/* ── Hoja de estilo de DAR OS ──────────────────────────────────────────
Es la MISMA del portal de cliente, copiada tal cual el 27-ago-2026.
Se copia en vez de compartirse por archivo porque sacar 66 KB de CSS en
línea de un portal que ya está en manos de clientes es un refactor con
riesgo real y sin beneficio hoy. Los dos productos van a divergir.
Si tocas algo aquí que también deba verse en el portal, hay que hacerlo
en los dos lados — igual que con el motor de rentabilidad.
------------------------------------------------------------------ */
/* ── TEMA CLARO del portal (toggle del cliente) — flipea tokens del shell + tarjetas legacy ──
El reporte rico ya tiene su propio tema (WR_THEMES); esto cubre el resto del portal. */
:root[data-theme="light"]{
--bg:#f6f7f9; --bg-card:#ffffff; --bg-surface:rgba(16,24,40,0.025);
--text:rgba(16,24,40,0.95); --muted:rgba(16,24,40,0.55); --dim:rgba(16,24,40,0.42); --dimmer:rgba(16,24,40,0.3);
--border:rgba(16,24,40,0.1); --card:rgba(16,24,40,0.03);
background:#f6f7f9;
}
:root[data-theme="light"] body{ background:#f6f7f9; }
:root[data-theme="light"] body::before, :root[data-theme="light"] body::after{ display:none; }
:root[data-theme="light"] .prem-popover{ background:rgba(255,255,255,0.97); border-color:rgba(16,24,40,0.1); }
:root[data-theme="light"] .card{ background:#ffffff; border-color:rgba(16,24,40,0.08); box-shadow:0 1px 2px rgba(16,24,40,0.05),0 2px 8px rgba(16,24,40,0.05); }
/* Inputs en claro: el design-system los fuerza oscuros con !important; aqui los devolvemos a claro */
:root[data-theme="light"] input, :root[data-theme="light"] textarea, :root[data-theme="light"] select{ background:rgba(16,24,40,0.035) !important; border-color:rgba(16,24,40,0.12) !important; color:rgba(16,24,40,0.95) !important; }
:root[data-theme="light"] input::placeholder, :root[data-theme="light"] textarea::placeholder{ color:rgba(16,24,40,0.4) !important; }
:root[data-theme="light"] input:focus, :root[data-theme="light"] textarea:focus, :root[data-theme="light"] select:focus{ border-color:rgba(37,99,235,0.5) !important; box-shadow:0 0 0 3px rgba(37,99,235,0.1) !important; }
/* --teal es BLANCO por diseño (sistema Glass): los "active" que lo usan de fondo necesitan
texto oscuro en tema oscuro, y en claro se invierten a tinta oscura + texto blanco.
Solo contraste — NO se cambia el acento de marca del portal. */
:root[data-theme="light"] .period-pill.active{background:rgba(16,24,40,0.92);border-color:rgba(16,24,40,0.92);color:#fff}
:root[data-theme="light"] .portal-tab.active{color:rgba(16,24,40,0.95)}
:root[data-theme="light"] .portal-tab.active::after{background:rgba(16,24,40,0.9)}
/* El design-system fuerza glass OSCURO a cualquier inline background:var(--card). En claro lo devolvemos a claro. */
:root[data-theme="light"] [style*="background:var(--card)"], :root[data-theme="light"] [style*="background: var(--card)"]{ background:rgba(16,24,40,0.035) !important; border-color:rgba(16,24,40,0.1) !important; }
/* El lateral (rail) y la barra movil SIEMPRE oscuros — el toggle solo cambia el contenido.
Re-declaramos los tokens en su scope para que iconos/labels/tooltips (var(--*)) sigan claros sobre fondo oscuro, sin importar el tema de la pagina. */
.portal-rail{
--text:rgba(255,255,255,0.92); --muted:rgba(255,255,255,0.55); --dim:rgba(255,255,255,0.4); --dimmer:rgba(255,255,255,0.3);
--border:rgba(255,255,255,0.08); --card:rgba(255,255,255,0.05);
}
/* ── Portal overrides ── */
.portal-login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;position:relative;overflow:hidden}
.login-orb{position:fixed;pointer-events:none;border-radius:50%;filter:blur(110px);opacity:.5;z-index:0}
.login-o1{width:480px;height:480px;background:radial-gradient(circle,rgba(96,165,250,0.22),transparent 70%);top:-180px;left:-120px;animation:lfloat1 14s ease-in-out infinite}
.login-o2{width:520px;height:520px;background:radial-gradient(circle,rgba(56,189,248,0.18),transparent 70%);bottom:-220px;right:-140px;animation:lfloat2 18s ease-in-out infinite}
.login-o3{width:340px;height:340px;background:radial-gradient(circle,rgba(167,139,250,0.14),transparent 70%);top:40%;left:45%;animation:lfloat1 22s ease-in-out infinite}
@keyframes lfloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-30px)}}
@keyframes lfloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,30px)}}
.login-hero{display:flex;flex-direction:column;justify-content:center;padding:64px 6vw;position:relative;z-index:1}
.login-hero-top{display:flex;align-items:center;gap:12px;margin-bottom:auto}
.login-hero-top img{width:42px;height:42px;border-radius:11px;object-fit:cover}
.login-hero-top span{font-size:13px;font-weight:800;letter-spacing:0.22em;color:rgba(255,255,255,0.55)}
.login-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#60a5fa;background:rgba(96,165,250,0.08);border:1px solid rgba(96,165,250,0.18);padding:6px 12px;border-radius:999px;margin-bottom:22px}
.login-eyebrow i{width:6px;height:6px;border-radius:50%;background:#60a5fa;box-shadow:0 0 10px #60a5fa}
.login-hero h2{font-size:clamp(28px,3.2vw,44px);font-weight:900;line-height:1.08;letter-spacing:-0.03em;margin-bottom:20px;color:#fff}
.login-hero h2 .grad{background:linear-gradient(110deg,#60a5fa,#93c5fd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.login-hero>p{font-size:15px;line-height:1.65;color:rgba(255,255,255,0.42);max-width:420px;margin-bottom:6px}
.login-feats{display:flex;flex-direction:column;gap:18px;margin-top:40px;padding-top:32px;border-top:1px solid rgba(255,255,255,0.06)}
.login-feat{display:flex;align-items:center;gap:14px}
.login-feat .lic{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,rgba(96,165,250,0.1),rgba(255,255,255,0.02));border:1px solid rgba(96,165,250,0.14);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.login-feat b{display:block;font-size:13px;font-weight:700;color:rgba(255,255,255,0.9);margin-bottom:2px}
.login-feat small{font-size:11.5px;color:rgba(255,255,255,0.36);line-height:1.3}
.login-formside{display:flex;align-items:center;justify-content:center;padding:40px 32px;position:relative;z-index:1}
.login-card{width:100%;max-width:400px;padding:40px 38px;border-radius:26px;background:linear-gradient(165deg,rgba(255,255,255,0.055),rgba(255,255,255,0.015));border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);box-shadow:0 30px 80px -20px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.08);position:relative;z-index:1}
/* ── Legal: checkbox premium theme-aware (nada de checkbox nativo) ── */
.legal-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;text-align:left;outline:none}
.legal-box{width:18px;height:18px;min-width:18px;border-radius:6px;border:1.5px solid rgba(127,127,127,0.45);background:rgba(127,127,127,0.07);display:flex;align-items:center;justify-content:center;margin-top:1px;transition:background .15s,border-color .15s,box-shadow .15s;flex-shrink:0}
.legal-check:hover .legal-box{border-color:rgba(96,165,250,0.6)}
.legal-check:focus-visible .legal-box{box-shadow:0 0 0 3px rgba(96,165,250,0.18)}
.legal-box.on{background:linear-gradient(135deg,#60a5fa,#2563eb);border-color:transparent;box-shadow:0 4px 14px -4px rgba(96,165,250,0.5)}
.legal-txt{font-size:11.5px;color:var(--muted);line-height:1.6}
.legal-txt a{color:#60a5fa;font-weight:700;text-decoration:none}
.legal-txt a:hover{text-decoration:underline}
:root[data-theme="light"] .legal-txt a{color:#2563eb}
.legal-flink{color:var(--dimmer);text-decoration:none;border-bottom:1px solid var(--border);transition:color .15s}
.legal-flink:hover{color:var(--muted)}
.login-input{width:100%;background:rgba(255,255,255,0.035);border:1px solid rgba(255,255,255,0.09);color:var(--text);border-radius:13px;padding:14px 16px;font-size:14px;font-family:Inter,sans-serif;box-sizing:border-box;transition:border-color .2s,background .2s,box-shadow .2s}
.login-input:focus{outline:none;border-color:rgba(96,165,250,0.5);background:rgba(96,165,250,0.04);box-shadow:0 0 0 4px rgba(96,165,250,0.08)}
.login-input::placeholder{color:var(--dim)}
.login-input:-webkit-autofill,.login-input:-webkit-autofill:hover,.login-input:-webkit-autofill:focus,.login-input:-webkit-autofill:active{-webkit-text-fill-color:#fff !important;caret-color:#fff;-webkit-box-shadow:0 0 0 1000px #141418 inset !important;box-shadow:0 0 0 1000px #141418 inset !important;border:1px solid rgba(255,255,255,0.09) !important;transition:background-color 9999s ease-in-out 0s !important}
.login-btn{width:100%;padding:15px;border-radius:14px;border:none;background:linear-gradient(135deg,#60a5fa,#93c5fd);color:#08203f;font-size:14px;font-weight:900;font-family:Inter,sans-serif;cursor:pointer;transition:transform .15s,box-shadow .2s,filter .2s;display:flex;align-items:center;justify-content:center;gap:8px}
.login-btn:hover{transform:translateY(-2px);box-shadow:0 14px 38px -8px rgba(96,165,250,0.45);filter:brightness(1.05)}
.login-btn:disabled{opacity:.5;cursor:wait;transform:none;box-shadow:none}
@media(max-width:880px){.portal-login{grid-template-columns:1fr}.login-hero{display:none}.login-formside{min-height:100vh;padding:32px 20px}.login-card{padding:34px 26px}}
.portal-header{position:sticky;top:0;z-index:20;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:rgba(5,5,5,0.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.portal-tabs{display:flex;gap:0;padding:0 16px;margin:6px 8px;border-radius:12px;overflow-x:auto;background:linear-gradient(135deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.06)}
.portal-tab{padding:12px 20px;font-size:12px;font-weight:600;color:var(--muted);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .15s;white-space:nowrap;font-family:inherit;display:flex;align-items:center;gap:6px}
.portal-tab.active{color:var(--teal);border-bottom-color:var(--teal)}
/* Rail de iconos (Madgicx-style) */
.portal-railed{padding-left:66px}
.portal-rail{position:fixed;left:0;top:0;bottom:0;width:66px;z-index:40;background:#0a0a0a;border-right:1px solid rgba(255,255,255,0.06);display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 0;overflow-y:auto}
.portal-rail::-webkit-scrollbar{width:0}
.portal-rail-logo{width:42px;height:42px;border-radius:12px;object-fit:contain;background:#ffffff;padding:5px;border:1px solid rgba(0,0,0,0.07);box-shadow:0 2px 8px rgba(0,0,0,0.18);margin-bottom:14px;flex-shrink:0}
.portal-rail-item{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:transparent;position:relative;transition:background .15s;flex-shrink:0}
.portal-rail-item:hover{background:rgba(255,255,255,0.06)}
.portal-rail-item.soon{opacity:.32;cursor:default}
.portal-rail-item .tip{position:absolute;left:54px;top:50%;transform:translateY(-50%);background:#14141a;border:1px solid var(--border);color:var(--text);padding:6px 11px;border-radius:9px;font-size:11px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:60}
.portal-rail-item:hover .tip{opacity:1}
/* Badge de pendientes (ej. creativos por aprobar) — punto rojo con conteo en la esquina del ícono */
.rail-badge{position:absolute;top:5px;right:5px;min-width:16px;height:16px;padding:0 4px;border-radius:20px;background:#f43f5e;color:#fff;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 0 0 2px #0d0d12;pointer-events:none}
:root[data-theme="light"] .rail-badge{box-shadow:0 0 0 2px #ffffff}
.rail-label-badge{display:none}
.portal-rail.expanded .rail-label-badge{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;min-width:18px;height:18px;padding:0 6px;border-radius:20px;background:#f43f5e;color:#fff;font-size:10px;font-weight:800}
.portal-rail.expanded .rail-badge{display:none}
.portal-rail-spacer{flex:1;min-height:10px}
/* El rail ya junta ~13 items: en pantallas cortas (laptops chicas / zoom del navegador)
se compacta progresivamente para caber SIEMPRE completo, sin scrollear el propio rail. */
@media (min-width:861px) and (max-height:800px){
.portal-rail{gap:3px;padding:10px 0}
.portal-rail-logo{width:36px;height:36px;border-radius:10px;margin-bottom:10px}
.portal-rail-item{width:40px;height:40px;border-radius:11px}
}
@media (min-width:861px) and (max-height:660px){
.portal-rail{gap:2px;padding:8px 0}
.portal-rail-logo{width:31px;height:31px;border-radius:9px;margin-bottom:7px;padding:4px}
.portal-rail-item{width:35px;height:35px;border-radius:9px}
.portal-rail-spacer{min-height:4px}
}
.marca-top{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start;margin-bottom:16px}
@media(max-width:920px){.marca-top{grid-template-columns:1fr}}
/* Las dos cards de arriba terminan parejas: card en columna y cuerpo centrado verticalmente */
.marca-top .mkb-card{display:flex;flex-direction:column}
.marca-top .mkb-body{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0}
.portal-mtop{display:none}
.portal-railbackdrop{display:none}
.rail-label{display:none}
.portal-rail,.portal-railed{transition:width .22s ease,padding-left .22s ease}
@media(min-width:861px){
.portal-rail.expanded{width:214px;align-items:stretch;padding:14px 12px;gap:4px;box-shadow:14px 0 50px rgba(0,0,0,0.35)}
.portal-rail.expanded .portal-rail-logo{margin:2px 4px 16px}
.portal-rail.expanded .portal-rail-item{width:100%;height:46px;justify-content:flex-start;gap:13px;padding:0 13px;border-radius:12px}
.portal-rail.expanded .rail-label{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap}
.portal-rail.expanded .portal-rail-item .tip{display:none}
.portal-railed.railexp{padding-left:214px}
}
@media(max-width:860px){
.portal-rail-exp{display:none}
.portal-railed{padding-left:0}
.portal-rail{left:0;width:300px;transform:translateX(-340px);transition:transform .24s cubic-bezier(.4,0,.2,1);will-change:transform;box-shadow:12px 0 50px rgba(0,0,0,0.6);align-items:stretch;padding:18px 12px;gap:4px}
.portal-rail.open{transform:translateX(0)}
.portal-rail-logo{display:block;width:42px;height:42px;margin:2px auto 18px}
.portal-rail-item{width:100%;height:48px;justify-content:flex-start;gap:13px;padding:0 14px;border-radius:12px}
.rail-label{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--text);white-space:nowrap}
.portal-rail-item .tip{display:none}
.portal-railbackdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:39}
.portal-mtop{display:flex;align-items:center;justify-content:center;position:sticky;top:0;padding:13px 14px;border-bottom:1px solid var(--border);background:var(--bg);z-index:25}
.portal-mtop .brand-lockup{height:38px;width:auto;display:block}
.portal-ham{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:10px;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .15s}
.portal-ham:active{background:rgba(127,127,127,0.12)}
.portal-rail-item,.portal-rail-logo{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
}
.portal-tab:hover:not(.active){color:var(--text)}
.period-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;margin:6px 8px;border-radius:12px;flex-wrap:wrap;background:linear-gradient(135deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.06)}
.period-pill{padding:5px 14px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit}
.period-pill.active{background:var(--teal);border-color:var(--teal);color:#0a0a0a}
.portal-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.portal-kpi-2{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:24px}
.brand-field{margin-bottom:12px}
.brand-label{font-size:8px;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.brand-value{font-size:12px;color:var(--text);font-weight:500}
.brand-input{width:100%;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:8px 10px;font-size:11px;box-sizing:border-box;font-family:Inter,sans-serif}
.brand-input:focus{outline:none;border-color:rgba(255,255,255,0.3)}
.color-swatch{width:28px;height:28px;border-radius:8px;border:2px solid rgba(255,255,255,0.1);display:inline-block;vertical-align:middle;margin-right:8px}
.product-card{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:all .3s}
.product-card:hover{border-color:rgba(255,255,255,0.12);transform:translateY(-2px)}
.skeleton{background:linear-gradient(90deg,var(--card) 25%,rgba(255,255,255,0.06) 50%,var(--card) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:6px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.loading-spinner::before{content:'';width:12px;height:12px;border:2px solid var(--border);border-top-color:var(--amber);border-radius:50%;animation:spin 0.6s linear infinite;display:inline-block}
/* ── Card glass effect ── */
.portal-kpi .card,.portal-kpi-2 .card{background:linear-gradient(135deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.07)}
/* ── Header glow ── */
.portal-header{background:linear-gradient(180deg,rgba(8,8,12,0.95) 0%,rgba(5,5,8,0.9) 100%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.portal-header::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,var(--brand,#2563eb) 50%,transparent 100%);opacity:0.3}
/* ── Animations ── */
@keyframes growW{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
.fade-in-up{animation:fadeInUp .4s ease-out both}
.fade-in{animation:fadeIn .3s ease-out both}
.scale-in{animation:scaleIn .3s ease-out both}
.stagger-1{animation-delay:.05s}.stagger-2{animation-delay:.1s}.stagger-3{animation-delay:.15s}.stagger-4{animation-delay:.2s}.stagger-5{animation-delay:.25s}.stagger-6{animation-delay:.3s}
/* ── Portal card hover ── */
.portal-kpi .card,.portal-kpi-2 .card{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.portal-kpi .card:hover,.portal-kpi-2 .card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,0.12);box-shadow:0 8px 32px rgba(0,0,0,0.3)}
/* ── Tab transition ── */
.portal-tab{transition:all .2s ease;position:relative}
.portal-tab.active::after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:2px;background:var(--teal);border-radius:2px}
.portal-tab.active{border-bottom-color:transparent}
/* ── Mobile ── */
@media(max-width:640px){
.portal-kpi{grid-template-columns:repeat(2,1fr)!important}
.portal-kpi-2{grid-template-columns:repeat(2,1fr)!important}
.brand-grid-2{grid-template-columns:1fr!important}
.products-grid{grid-template-columns:repeat(2,1fr)!important}
.portal-header{padding:10px 12px}
.portal-tabs{margin:4px;padding:0 8px}
.portal-tab{padding:10px 12px;font-size:11px}
.period-bar{margin:4px;padding:8px 10px}
}
/* Premium motion: scroll-reveal + trazo de gráficas */
.rvl{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rvl.rvl-in{opacity:1;transform:none}
@keyframes mxdash{to{stroke-dashoffset:0}}
.mx-line{stroke-dasharray:1;stroke-dashoffset:1;animation:mxdash 1.4s cubic-bezier(.4,0,.2,1) forwards}
@keyframes mxfade{to{opacity:1}}
.mx-fill{opacity:0;animation:mxfade .9s .55s ease forwards}
@media (prefers-reduced-motion: reduce){.rvl{opacity:1;transform:none;transition:none}.mx-line,.mx-fill{animation:none;stroke-dashoffset:0;opacity:1}}
/* ══ PORTAL KIT (pk) — base visual compartida de TODO el portal ══
RAÍZ del "hechizo": la .card del design-system trae radius 6 + sombra dura
0 4px 24px que el tema claro no reseteaba. Aquí se redefine con el mismo
lenguaje del kit .mkb- de Mi Marca: radius 16 + borde token + glass sutil
en oscuro / blanco con sombra suave en capas en claro. Mejora todas las
cards del portal de golpe. */
.card{border-radius:16px;border:1px solid var(--border);background:linear-gradient(135deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));box-shadow:inset 0 1px 0 rgba(255,255,255,0.04)}
.card:hover{border-color:rgba(255,255,255,0.12);box-shadow:inset 0 1px 0 rgba(255,255,255,0.05)}
/* Cards chicas/anidadas (tiles de stats): radius 12 para que no se vean globosas */
.card-sm,.portal-kpi-2 .card{border-radius:12px}
/* Hover en claro: lift suave (mata el 0 8px 32px negro de las KPI en claro) */
:root[data-theme="light"] .portal-kpi .card:hover,:root[data-theme="light"] .portal-kpi-2 .card:hover{border-color:rgba(16,24,40,0.14);box-shadow:0 14px 30px -12px rgba(16,24,40,0.22)}
/* Acento del portal con contraste real en AMBOS temas (patrón crx/mkb:
el --teal del design system es #fff y en claro desaparece). */
.portal-railed{--pk-acc:#60a5fa;--pk-acc-ink:#08203f;--pk-acc-soft:rgba(96,165,250,0.12);--pk-acc-line:rgba(96,165,250,0.35)}
:root[data-theme="light"] .portal-railed{--pk-acc:#2563eb;--pk-acc-ink:#ffffff;--pk-acc-soft:rgba(37,99,235,0.1);--pk-acc-line:rgba(37,99,235,0.3)}
/* Popover flotante (calendario de rango): oscuro en oscuro, blanco en claro —
los tokens var(--*) de adentro flipean con el tema, el fondo debe flipear igual */
.pk-pop{background:rgba(8,8,12,0.98);border:1px solid rgba(255,255,255,0.08);box-shadow:0 16px 48px rgba(0,0,0,0.7)}
:root[data-theme="light"] .pk-pop{background:#ffffff;border-color:rgba(16,24,40,0.1);box-shadow:0 16px 48px -12px rgba(16,24,40,0.28)}
/* Shell de modal (reporte abierto desde Reportes) — mismo trato */
.pk-modal{background:#0b0b0f;border:1px solid var(--border)}
:root[data-theme="light"] .pk-modal{background:#f6f7f9}
/* Celda mini de métrica (label uppercase + valor mono) — se repetía inline en 3+ lugares */
.pk-cell{padding:8px 10px;border-radius:8px;background:rgba(127,127,127,0.06);text-align:center}
.pk-cell-l{font-size:8px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
.pk-cell-v{font-size:13px;font-weight:800;color:var(--text)}
/* Par label/valor chico (strip de métricas en cards de Reportes) */
.pk-klabel{font-size:9px;font-weight:600;color:var(--dimmer);text-transform:uppercase;letter-spacing:.5px}
.pk-kval{font-size:13px;font-weight:800;color:var(--text);margin-top:1px}
/* Fila expandible (campañas / semanas anteriores): fondo neutro que vive en ambos temas */
.pk-row{background:rgba(127,127,127,0.04);border:1px solid var(--border)}
.pk-row.open{background:rgba(127,127,127,0.08);border-color:rgba(127,127,127,0.28)}
.pk-row-body{background:rgba(127,127,127,0.03);border:1px solid rgba(127,127,127,0.28);border-top:none}
/* Form kit: label uppercase + input base (se repetían inline en Estudio) */
.pk-lab{display:block;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.pk-input{width:100%;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:12px;color:var(--text);font-family:inherit;outline:none;box-sizing:border-box}
/* Botón de acento ghost (tinte suave + texto acento, hover lleno) — "Ver reporte" y similares */
.pk-acc-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:9px;border:1px solid var(--pk-acc-line);background:var(--pk-acc-soft);color:var(--pk-acc);font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s,border-color .15s;-webkit-tap-highlight-color:transparent}
.pk-acc-btn:hover{background:var(--pk-acc);border-color:var(--pk-acc);color:var(--pk-acc-ink)}
/* Card interna borde-only (lista de Reportes): mata el sandwich gris-dentro-de-blanco */
.pk-subcard{border-radius:12px;border:1px solid var(--border);background:transparent;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.pk-subcard.clickable{cursor:pointer}
.pk-subcard.clickable:hover{transform:translateY(-2px);border-color:rgba(127,127,127,0.3);box-shadow:0 12px 28px -16px rgba(0,0,0,0.5)}
:root[data-theme="light"] .pk-subcard.clickable:hover{box-shadow:0 12px 26px -14px rgba(16,24,40,0.2)}
/* Fila slim de reporte: solo rango de fechas → clic abre el modal con todo */
.rpt-row{width:100%;display:flex;align-items:center;gap:12px;padding:13px 15px;margin-bottom:8px;border-radius:12px;border:1px solid var(--border);background:transparent;cursor:pointer;font:inherit;text-align:left;transition:transform .15s ease,border-color .15s ease,background .15s ease}
.rpt-row:hover:not(:disabled){transform:translateY(-1px);border-color:rgba(127,127,127,0.32);background:rgba(127,127,127,0.035)}
.rpt-row:disabled{cursor:default;opacity:.55}
.rpt-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rpt-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.rpt-range{font-size:13.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rpt-sub{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rpt-roas{font-family:var(--mono);font-size:13px;font-weight:700;flex-shrink:0}
.rpt-eye{flex-shrink:0;display:flex;color:var(--dim);transition:color .15s}
.rpt-row:hover:not(:disabled) .rpt-eye{color:var(--muted)}
/* Tira de métricas en fila (Reportes): separadores sutiles entre pares label/valor */
.pk-kstrip{display:flex;flex-wrap:wrap;row-gap:8px;margin-top:12px}
.pk-kstrip>div{padding:0 16px;border-left:1px solid var(--border)}
.pk-kstrip>div:first-child{padding-left:0;border-left:none}
/* Tablas del Histórico: números tabulares + hover sutil por fila */
.pk-htable{font-variant-numeric:tabular-nums}
.pk-htable .pk-mrow{background:rgba(127,127,127,0.05);cursor:pointer;user-select:none;transition:background .12s}
.pk-htable .pk-mrow:hover{background:rgba(127,127,127,0.1)}
.pk-htable .pk-wrow{transition:background .12s}
.pk-htable .pk-wrow:hover{background:rgba(127,127,127,0.05)}
/* Mi Cuenta: Logo + Apariencia lado a lado (≥880px), contraseña full-width con 3 campos en fila */
.pk-acct-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;align-items:stretch}
.pk-acct-grid>.card{margin-bottom:0}
.pk-acct-pass{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:879px){.pk-acct-grid{grid-template-columns:1fr}.pk-acct-pass{grid-template-columns:1fr}}
/* ══ REPORTE RICO (wr) — refinamiento editorial del entregable semanal ══
Los colores viven en WR_THEMES (tk.*); aquí solo micro-detalles que CSS hace
mejor que inline: ::selection, hairlines de ritmo, hovers y números tabulares.
Las CSS vars (--wr-*) las setea el sheet inline según tema + acento de marca. */
.wr-sheet ::selection{background:var(--wr-sel);color:inherit}
.wr-sheet .mono{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-0.035em}
/* Etiquetas: mayusculas con tracking abierto = editorial. Mono en mayusculas = tecnico. */
.wr-kpi .mono[style*="uppercase"],.wr-sheet .rpt-sub{font-family:Inter,-apple-system,sans-serif;letter-spacing:.09em;font-weight:600}
/* El numero hero respira: peso alto y tracking cerrado */
.wr-kpi>div:nth-child(2){font-weight:800}
.wr-kpi{transition:transform .18s cubic-bezier(.4,0,.2,1),box-shadow .18s ease}
.wr-kpi:hover{transform:translateY(-2px);box-shadow:var(--wr-hover)}
/* Ritmo vertical: hairline + respiro constante entre secciones consecutivas */
.wr-sec+.wr-sec{border-top:1px solid var(--wr-hair);padding-top:30px}
@media(max-width:640px){.wr-sec+.wr-sec{padding-top:26px}}
.wr-trow{transition:background .12s}
.wr-trow:hover{background:var(--wr-row-hover)}
.wr-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
/* ══ CREADORAS (crx) — catálogo UGC + contenidos dentro del portal ══
Acento propio con contraste real en AMBOS temas (el token --teal del
design system es #fff y en claro producía chips blanco-sobre-blanco). */
.crx-view{--crx-acc:#60a5fa;--crx-acc-ink:#08203f;--crx-acc-text:#60a5fa;--crx-acc-soft:rgba(96,165,250,0.12);--crx-acc-line:rgba(96,165,250,0.3)}
:root[data-theme="light"] .crx-view{--crx-acc:#2563eb;--crx-acc-ink:#ffffff;--crx-acc-text:#2563eb;--crx-acc-soft:rgba(37,99,235,0.1);--crx-acc-line:rgba(37,99,235,0.28)}
/* En claro las cards de la vista llevan la misma sombra suave del reporte (no bloques planos) */
:root[data-theme="light"] .crx-view .card{box-shadow:0 1px 2px rgba(16,24,40,0.06),0 2px 6px rgba(16,24,40,0.05)}
/* Sub-navegación de la vista (mismo patrón segmented del resto del portal) */
/* El selector centrado dentro de su tarjeta. `.crx-seg` es inline-flex
—lo que está bien donde encabeza una pantalla— así que para centrarlo
se envuelve, en vez de cambiarle el display y descuadrar los otros
sitios donde ya se usa. */
.seg-centro{display:flex;justify-content:center;margin-bottom:20px}
.seg-centro .crx-seg{margin:0}
.crx-seg{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:rgba(127,127,127,0.06);border:1px solid var(--border);margin:2px 0 14px;max-width:100%}
.crx-seg-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 16px;min-height:38px;border-radius:9px;border:none;background:transparent;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s,color .15s;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.crx-seg-btn:hover:not(.active){color:var(--text)}
.crx-seg-btn.active{background:var(--crx-acc);color:var(--crx-acc-ink);box-shadow:0 6px 16px -8px var(--crx-acc-line)}
.crx-seg-badge{min-width:17px;height:17px;padding:0 5px;border-radius:100px;background:var(--crx-acc-soft);color:var(--crx-acc-text);font-size:9.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.crx-seg-btn.active .crx-seg-badge{background:rgba(0,0,0,0.16);color:inherit}
@media(max-width:640px){.crx-seg{display:flex;width:100%;box-sizing:border-box}.crx-seg-btn{flex:1;padding:8px 6px;font-size:11.5px;gap:5px}}
.crx-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 0 12px;margin-top:2px}
.crx-chips::-webkit-scrollbar{display:none}
.crx-chip{flex-shrink:0;min-height:38px;padding:8px 16px;border-radius:100px;border:1px solid var(--border);background:var(--card);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;transition:background .2s,color .2s,border-color .2s;font-family:inherit;white-space:nowrap;letter-spacing:.2px;-webkit-tap-highlight-color:transparent}
.crx-chip:hover{color:var(--text);background:rgba(127,127,127,0.1)}
.crx-chip.active{background:var(--crx-acc);border-color:var(--crx-acc);color:var(--crx-acc-ink);font-weight:700;box-shadow:0 6px 16px -8px var(--crx-acc-line)}
/* Catálogo: cards contenidas — 6 por fila en desktop, 2-3 en móvil */
.crx-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media(max-width:1100px){.crx-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:920px){.crx-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:720px){.crx-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:430px){.crx-grid{grid-template-columns:repeat(2,1fr);gap:8px}}
.crx-card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1),border-color .3s,box-shadow .3s;animation:fadeInUp .5s cubic-bezier(.16,1,.3,1) both}
.crx-card:hover{transform:translateY(-3px);border-color:rgba(127,127,127,0.3);box-shadow:0 16px 36px rgba(0,0,0,0.22)}
:root[data-theme="light"] .crx-card{background:#fff;border-color:rgba(16,24,40,0.08);box-shadow:0 1px 2px rgba(16,24,40,0.05)}
:root[data-theme="light"] .crx-card:hover{box-shadow:0 14px 30px -12px rgba(16,24,40,0.25)}
.crx-card.chosen{border-color:var(--crx-acc-line);box-shadow:0 0 0 1px var(--crx-acc-line),0 12px 30px var(--crx-acc-soft)}
.crx-media{position:relative;aspect-ratio:3/4;overflow:hidden;background:#0c0c10}
.crx-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.crx-card:hover .crx-media img{transform:scale(1.04)}
.crx-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease}
.crx-video.on{opacity:1}
.crx-overlay{position:absolute;bottom:0;left:0;right:0;padding:36px 11px 10px;background:linear-gradient(transparent,rgba(0,0,0,0.9));z-index:2}
.crx-name{font-size:13px;font-weight:800;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.crx-loc{font-size:9.5px;color:rgba(255,255,255,0.55);margin-top:3px;display:flex;align-items:center;gap:4px;font-weight:500}
.crx-badges{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.crx-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:100px;background:rgba(0,0,0,0.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.14);font-size:9px;font-weight:700;color:rgba(255,255,255,0.88);letter-spacing:.2px}
.crx-worked-badge{position:absolute;top:8px;left:8px;z-index:5;display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:100px;background:linear-gradient(135deg,#60a5fa,#14b8a6);color:#08203f;font-size:8.5px;font-weight:800;letter-spacing:.3px;box-shadow:0 4px 14px rgba(96,165,250,0.35)}
.crx-body{padding:8px 10px 10px;display:flex;gap:4px;flex-wrap:wrap}
.crx-niche{padding:3px 9px;border-radius:100px;font-size:8.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
@media(max-width:640px){.crx-media{aspect-ratio:2/3}.crx-name{font-size:12px}.crx-body{padding:7px 9px 9px}}
.crx-skel{border-radius:14px;overflow:hidden;border:1px solid var(--border);background:var(--card);animation:fadeInUp .4s ease both}
/* Trabajaron contigo */
.crx-worked-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:820px){.crx-worked-grid{grid-template-columns:1fr}}
.crx-worked{display:flex;gap:14px;padding:16px 18px;align-items:flex-start}
.crx-wavatar{width:62px;height:62px;border-radius:50%;padding:2.5px;background:linear-gradient(45deg,#0ea5e9,#60a5fa,#5eead4);flex-shrink:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.crx-wavatar img,.crx-wavatar .fb{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:2.5px solid rgba(0,0,0,0.35);box-sizing:border-box}
.crx-wavatar .fb{display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;color:rgba(255,255,255,0.35);background:linear-gradient(135deg,#0f0f1a,#1a1025)}
.crx-vid-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:100px;background:var(--crx-acc-soft);border:1px solid var(--crx-acc-line);color:var(--crx-acc-text);font-size:10px;font-weight:700;white-space:nowrap}
/* Encabezado de sección reutilizable de la vista */
.crx-sec-h{display:flex;align-items:center;gap:8px;margin:8px 0 12px}
.crx-sec-h b{font-size:14px;font-weight:800;color:var(--text);letter-spacing:-.1px}
.crx-sec-h span{font-size:10px;color:var(--dimmer);font-weight:600}
/* ── Tus contenidos: EN PRODUCCIÓN ── */
.crx-prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:820px){.crx-prod-grid{grid-template-columns:1fr}}
.crx-cycle{padding:16px 18px}
.crx-cyc-head{display:flex;align-items:center;gap:11px}
.crx-cyc-ava{width:40px;height:40px;border-radius:50%;padding:2px;background:linear-gradient(45deg,#0ea5e9,#60a5fa,#5eead4);flex-shrink:0;-webkit-tap-highlight-color:transparent}
.crx-cyc-ava img,.crx-cyc-ava .fb{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:2px solid var(--bg);box-sizing:border-box}
.crx-cyc-ava .fb{display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;color:var(--dim);background:rgba(127,127,127,0.12)}
.crx-status{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:100px;font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;flex-shrink:0;white-space:nowrap}
.crx-status.live{background:var(--crx-acc-soft);color:var(--crx-acc-text);border:1px solid var(--crx-acc-line)}
.crx-status.live i{width:5px;height:5px;border-radius:50%;background:var(--crx-acc-text);animation:crxPulse 1.8s ease infinite}
@keyframes crxPulse{0%,100%{opacity:1}50%{opacity:.3}}
.crx-status.paused{background:rgba(127,127,127,0.12);color:var(--muted);border:1px solid var(--border)}
/* Step tracker segmentado (estilo "pizza tracker"): barra de 5 segmentos + una sola línea de estado */
.crx-track{margin:14px 0 0;min-width:0}
.crx-track.paused{opacity:.45;filter:grayscale(1)}
.crx-track-bar{display:flex;gap:4px}
.crx-tseg{flex:1;height:6px;border-radius:99px;background:var(--crx-acc);opacity:.12;position:relative}
.crx-tseg.done{opacity:1}
.crx-tseg.now{opacity:1;animation:crxSegPulse 1.9s ease-in-out infinite}
@keyframes crxSegPulse{0%,100%{opacity:1}50%{opacity:.4}}
@media (prefers-reduced-motion: reduce){.crx-tseg.now{animation:none}}
@media(hover:hover) and (pointer:fine){
.crx-tseg::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:#14141a;border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.92);padding:5px 10px;border-radius:8px;font-size:10px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:30}
.crx-tseg:hover::after{opacity:1}
}
.crx-track-line{margin-top:9px;font-size:10.5px;font-weight:600;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.crx-track-line b{font-size:11.5px;font-weight:800;color:var(--crx-acc-text)}
.crx-track-line .nx{color:var(--dimmer)}
/* Chips de metadata: más chicos, una fila, la card respira */
.crx-cyc-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:11px}
.crx-cyc-meta .crx-vid-badge{padding:2px 8px;font-size:9.5px;min-height:22px}
.crx-cyc-meta .crx-cyc-date{font-size:10px}
.crx-cyc-meta .crx-mini-link{padding:3px 9px;min-height:22px;font-size:10px}
.crx-cyc-date{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.crx-mini-link{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;min-height:26px;border-radius:100px;border:1px solid var(--crx-acc-line);background:var(--crx-acc-soft);color:var(--crx-acc-text);font-size:10.5px;font-weight:700;text-decoration:none;white-space:nowrap;transition:filter .15s;-webkit-tap-highlight-color:transparent}
.crx-mini-link:hover{filter:brightness(1.12)}
/* ── Tus contenidos: HISTÓRICO ── */
.crx-hist-month{font-size:10px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--dim);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.crx-hist-month::after{content:'';flex:1;height:1px;background:var(--border)}
.crx-hist-month.fallback{color:var(--dimmer);font-size:9px}
.crx-hist-nolink{font-size:10px;color:var(--dimmer);font-weight:600;white-space:nowrap;flex-shrink:0}
.crx-hist-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-top:1px solid var(--border)}
.crx-hist-row:first-child{border-top:none}
@media(max-width:480px){.crx-hist-row{padding:12px 13px;gap:10px}}
/* Estrellas */
.crx-stars{display:inline-flex;gap:2px}
.crx-star{width:36px;height:36px;border:none;background:transparent;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--dim);transition:transform .12s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.crx-star:hover{transform:scale(1.18)}
.crx-star:disabled{cursor:default;opacity:.6}
@media(pointer:coarse){.crx-star{width:44px;height:44px}}
.crx-ratebox{margin-top:9px}
.crx-rate-label{font-size:9.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.crx-comment{width:100%;box-sizing:border-box;margin-top:8px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:rgba(127,127,127,0.06);color:var(--text);font-size:12.5px;line-height:1.5;font-family:inherit;outline:none;resize:none}
.crx-comment:focus{border-color:var(--crx-acc-line)}
/* El lockup tiene el recuadro de "DAR" en negro: sobre fondo oscuro
desaparece la mitad de la marca. Se pintan los dos y la hoja esconde el
que sobra — leer el tema desde JavaScript obliga a acertar también al
cambiarlo en caliente, y esto no.
OJO con el sentido: aquí el tema por defecto es el OSCURO, y el claro se
marca con data-theme="light". Lo escribí al revés la primera vez. */
.marca-claro{display:none}
.marca-oscuro{display:block}
:root[data-theme="light"] .marca-claro{display:block}
:root[data-theme="light"] .marca-oscuro{display:none}
/* `justify-content:center`: el boton ocupa todo el ancho y el texto se
quedaba pegado a la izquierda. `inline-flex` sin justificar alinea al
inicio, y no se nota hasta que el boton crece. */
.crx-send{margin-top:8px;min-height:38px;padding:9px 18px;border-radius:10px;border:none;background:var(--crx-acc);color:var(--crx-acc-ink);font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;transition:filter .15s;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.crx-send:hover{filter:brightness(1.08)}
.crx-send:disabled{opacity:.55;cursor:wait}
.crx-cancel{margin-top:8px;min-height:38px;padding:9px 12px;border-radius:10px;border:none;background:transparent;color:var(--dim);font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit}
.crx-cancel:hover{color:var(--text)}
.crx-thanks{margin-top:8px;font-size:12px;color:#14b8a6;font-weight:600;line-height:1.5;animation:fadeIn .3s ease}
:root:not([data-theme="light"]) .crx-thanks{color:#60a5fa}
.crx-rate-err{margin-top:8px;font-size:11.5px;color:#f87171;font-weight:600;line-height:1.5}
/* Modal perfil estilo Instagram — siempre oscuro (experiencia media viewer) */
.crx-modal-ov{position:fixed;inset:0;background:rgba(0,0,0,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:120;display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeIn .2s ease}
.crx-modal{--text:rgba(255,255,255,0.95);--muted:rgba(255,255,255,0.55);--dim:rgba(255,255,255,0.4);--dimmer:rgba(255,255,255,0.3);--border:rgba(255,255,255,0.08);--card:rgba(255,255,255,0.05);background:#0a0a0a;color:var(--text);max-width:520px;width:100%;position:relative;border-radius:24px;border:1px solid rgba(255,255,255,0.09);max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;animation:scaleIn .25s ease-out both}
.crx-modal::-webkit-scrollbar{width:0}
.crx-modal-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,0.5);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.12);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:130;transition:all .2s}
.crx-modal-close:hover{background:rgba(255,255,255,0.15)}
.crx-ig-header{display:flex;align-items:center;gap:18px;padding:26px 24px 0}
.crx-ig-ring{flex-shrink:0;width:92px;height:92px;border-radius:50%;padding:3px;background:linear-gradient(45deg,#0ea5e9,#60a5fa,#5eead4)}
.crx-ig-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:3px solid #0a0a0a;background:#111}
.crx-ig-fallback{width:100%;height:100%;border-radius:50%;border:3px solid #0a0a0a;background:linear-gradient(135deg,#0f0f1a,#1a1025);display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:900;color:rgba(255,255,255,0.18)}
.crx-ig-name{font-size:24px;font-weight:900;letter-spacing:-.4px;line-height:1.1;color:#fff}
.crx-ig-handle{font-size:13px;color:#60a5fa;font-weight:600;margin-top:3px}
.crx-ig-stats{display:flex;gap:22px;padding:18px 24px 0;flex-wrap:wrap}
.crx-ig-statnum{font-size:18px;font-weight:800;letter-spacing:-.4px;line-height:1;color:#fff}
.crx-ig-statlabel{font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-top:4px}
.crx-ig-bio{padding:16px 24px 0;font-size:13.5px;color:rgba(255,255,255,0.6);line-height:1.65}
.crx-ig-loc{padding:8px 24px 0;font-size:12px;color:rgba(255,255,255,0.45);display:flex;align-items:center;gap:5px;font-weight:500}
.crx-ig-niches{display:flex;gap:6px;flex-wrap:wrap;padding:14px 24px 0}
.crx-ig-links{display:flex;gap:8px;flex-wrap:wrap;padding:16px 24px 0}
.crx-ig-link{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:10px 16px;border-radius:12px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);color:rgba(255,255,255,0.6);text-decoration:none;font-size:12px;font-weight:600;transition:all .2s}
.crx-ig-link:hover{background:rgba(96,165,250,0.12);color:#60a5fa;border-color:rgba(96,165,250,0.25)}
.crx-ig-sectitle{font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.35);margin:0 24px 12px;display:flex;align-items:center;gap:8px}
.crx-ig-sectitle::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.08)}
.crx-modal-rate{margin:22px 24px 0;padding:16px 18px;border-radius:16px;background:rgba(96,165,250,0.06);border:1px solid rgba(96,165,250,0.18)}
.crx-modal-rate .crx-thanks{color:#60a5fa}
.crx-sizes-row{display:flex;gap:8px;flex-wrap:wrap;padding:0 24px}
.crx-info-pill{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);border-radius:14px;padding:10px 14px;display:flex;flex-direction:column;gap:2px;min-width:80px}
.crx-info-label{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.35)}
.crx-info-value{font-size:14px;font-weight:700;color:#fff}
.crx-highlights{display:flex;gap:16px;overflow-x:auto;padding:4px 24px 6px;scrollbar-width:none}
.crx-highlights::-webkit-scrollbar{display:none}
.crx-highlight{flex-shrink:0;width:68px;cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent}
.crx-hl-ring{width:68px;height:68px;border-radius:50%;padding:2.5px;background:linear-gradient(45deg,#0ea5e9,#60a5fa,#5eead4);transition:transform .2s}
.crx-highlight:hover .crx-hl-ring{transform:scale(1.06)}
.crx-hl-inner{width:100%;height:100%;border-radius:50%;overflow:hidden;border:2.5px solid #0a0a0a;background:#111;position:relative}
.crx-hl-inner video,.crx-hl-inner img{width:100%;height:100%;object-fit:cover;display:block}
.crx-hl-label{font-size:9px;font-weight:600;color:rgba(255,255,255,0.35);margin-top:6px;letter-spacing:.3px}
.crx-feed{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:0 3px}
.crx-feed-tile{position:relative;aspect-ratio:3/4;overflow:hidden;background:rgba(255,255,255,0.03);cursor:pointer;-webkit-tap-highlight-color:transparent}
.crx-feed-tile img,.crx-feed-tile video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.crx-feed-tile:hover img,.crx-feed-tile:hover video{transform:scale(1.04)}
.crx-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;pointer-events:none;border:1px solid rgba(255,255,255,0.2)}
.crx-modal-cta{position:sticky;bottom:0;z-index:125;padding:26px 20px 18px;margin-top:18px;background:linear-gradient(transparent,#0a0a0a 42%)}
.crx-cta{width:100%;min-height:54px;padding:15px 20px;border-radius:16px;border:none;cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:800;letter-spacing:-.2px;color:#08203f;background:linear-gradient(135deg,#5eead4,#60a5fa 45%,#14b8a6);box-shadow:0 10px 30px rgba(96,165,250,0.28),inset 0 1px 0 rgba(255,255,255,0.35);transition:transform .2s,box-shadow .2s}
.crx-cta:hover{transform:translateY(-1px) scale(1.01);box-shadow:0 14px 36px rgba(96,165,250,0.4),inset 0 1px 0 rgba(255,255,255,0.35)}
.crx-cta:active{transform:scale(0.99)}
/* Confirmación / éxito */
.crx-confirm-ov{position:fixed;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:140;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .25s ease}
.crx-confirm{--text:rgba(255,255,255,0.95);--muted:rgba(255,255,255,0.55);--dim:rgba(255,255,255,0.4);--border:rgba(255,255,255,0.08);background:#0a0a0a;color:var(--text);border:1px solid rgba(255,255,255,0.09);border-radius:24px;max-width:420px;width:100%;padding:30px 26px 24px;text-align:center;max-height:calc(100dvh - 40px);overflow-y:auto;animation:scaleIn .3s cubic-bezier(.34,1.4,.64,1) both}
.crx-c-eyebrow{font-size:9px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:#60a5fa;margin-bottom:10px}
.crx-c-ring{width:92px;height:92px;border-radius:50%;padding:3px;background:linear-gradient(45deg,#0ea5e9,#60a5fa,#5eead4);margin:0 auto 14px}
.crx-c-photo{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:3px solid #0a0a0a}
.crx-c-name{font-size:23px;font-weight:900;margin-bottom:4px;letter-spacing:-.3px;color:#fff}
.crx-c-loc{font-size:12px;color:rgba(255,255,255,0.35);margin-bottom:18px}
.crx-c-sizes{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:14px 16px;margin-bottom:12px;text-align:left}
.crx-c-sizeslabel{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:8px}
.crx-c-size b{font-size:14px;font-weight:800;color:#fff}
.crx-c-size span{display:block;font-size:9px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-top:2px}
.crx-c-notice{background:rgba(96,165,250,0.12);border:1px solid rgba(96,165,250,0.25);border-radius:14px;padding:14px 16px;margin-bottom:20px;font-size:12.5px;color:#99f6e4;text-align:left;line-height:1.6;display:flex;gap:10px;align-items:flex-start}
.crx-c-btn{width:100%;min-height:54px;padding:15px;border-radius:16px;background:#25D366;color:#fff;font-size:14.5px;font-weight:800;border:none;cursor:pointer;font-family:inherit;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 10px 26px rgba(37,211,102,0.25)}
.crx-c-btn:hover{background:#20bd5a;transform:scale(1.02)}
.crx-c-cancel{width:100%;min-height:44px;padding:12px;border-radius:12px;background:transparent;color:rgba(255,255,255,0.35);font-size:12.5px;font-weight:600;border:none;cursor:pointer;font-family:inherit;margin-top:8px;transition:color .2s}
.crx-c-cancel:hover{color:rgba(255,255,255,0.6)}
.crx-success-check{width:88px;height:88px;margin:6px auto 18px;display:block}
.crx-success-check circle{stroke:#60a5fa;stroke-width:2.5;fill:rgba(96,165,250,0.08);stroke-dasharray:302;stroke-dashoffset:302;animation:crxDrawCircle .7s ease forwards}
.crx-success-check path{stroke:#60a5fa;stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:crxDrawCheck .45s ease .45s forwards}
@keyframes crxDrawCircle{to{stroke-dashoffset:0}}
@keyframes crxDrawCheck{to{stroke-dashoffset:0}}
.crx-s-title{font-size:23px;font-weight:900;margin-bottom:8px;letter-spacing:-.3px;color:#fff}
.crx-s-sub{font-size:14px;color:rgba(255,255,255,0.6);line-height:1.65;margin-bottom:6px}
.crx-s-wa{font-size:12px;color:rgba(255,255,255,0.35);line-height:1.6;margin-bottom:22px;display:flex;align-items:center;justify-content:center;gap:6px}
.crx-s-btn{width:100%;min-height:52px;padding:14px;border-radius:16px;border:1px solid rgba(96,165,250,0.25);background:rgba(96,165,250,0.12);color:#60a5fa;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;transition:all .2s}
.crx-s-btn:hover{background:rgba(96,165,250,0.2)}
/* Lightbox de portafolio */
.crx-lightbox{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.96);display:flex;align-items:center;justify-content:center}
.crx-lightbox video{max-width:100%;max-height:100dvh}
.crx-lightbox img{max-width:100%;max-height:100dvh;object-fit:contain}
.crx-lightbox-close{position:absolute;top:calc(16px + env(safe-area-inset-top));right:16px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:310}
/* Modal full-screen en móvil */
@media(max-width:640px){
.crx-modal-ov{padding:0}
.crx-modal{max-width:100%;height:100dvh;max-height:100dvh;border-radius:0;border:none}
.crx-modal-close{position:fixed;top:calc(12px + env(safe-area-inset-top));right:12px;width:44px;height:44px}
.crx-ig-header{padding:22px 20px 0;gap:16px}
.crx-ig-ring{width:84px;height:84px}
.crx-ig-name{font-size:21px}
.crx-ig-stats{padding:16px 20px 0;gap:18px}
.crx-ig-bio,.crx-ig-loc,.crx-ig-niches,.crx-ig-links{padding-left:20px;padding-right:20px}
.crx-ig-sectitle{margin-left:20px;margin-right:20px}
.crx-sizes-row{padding:0 20px}
.crx-highlights{padding:4px 20px 6px}
.crx-modal-rate{margin:20px 16px 0}
.crx-modal-cta{padding:24px 16px calc(14px + env(safe-area-inset-bottom))}
.crx-worked{padding:14px}
}
/* ══ MI MARCA (mkb) — esqueleto compartido del tab, mismo lenguaje en claro y oscuro ══
Acentos por sección con contraste real en ambos temas (patrón crx: el --teal del
design system es #fff y en claro desaparecía). */
.mkb-acc-teal{--mkb-acc:#60a5fa;--mkb-acc-soft:rgba(96,165,250,0.13);--mkb-acc-line:rgba(96,165,250,0.35)}
:root[data-theme="light"] .mkb-acc-teal{--mkb-acc:#2563eb;--mkb-acc-soft:rgba(37,99,235,0.1);--mkb-acc-line:rgba(37,99,235,0.3)}
.mkb-acc-sky{--mkb-acc:#60a5fa;--mkb-acc-soft:rgba(96,165,250,0.13);--mkb-acc-line:rgba(96,165,250,0.35)}
:root[data-theme="light"] .mkb-acc-sky{--mkb-acc:#2563eb;--mkb-acc-soft:rgba(37,99,235,0.09);--mkb-acc-line:rgba(37,99,235,0.3)}
.mkb-acc-amber{--mkb-acc:#fbbf24;--mkb-acc-soft:rgba(251,191,36,0.13);--mkb-acc-line:rgba(251,191,36,0.4)}
:root[data-theme="light"] .mkb-acc-amber{--mkb-acc:#d97706;--mkb-acc-soft:rgba(217,119,6,0.1);--mkb-acc-line:rgba(217,119,6,0.3)}
.mkb-acc-pink{--mkb-acc:#e879f9;--mkb-acc-soft:rgba(232,121,249,0.13);--mkb-acc-line:rgba(232,121,249,0.35)}
:root[data-theme="light"] .mkb-acc-pink{--mkb-acc:#db2777;--mkb-acc-soft:rgba(219,39,119,0.09);--mkb-acc-line:rgba(219,39,119,0.3)}
/* Card base: radius 16 + borde token + glass sutil (oscuro) / blanco con sombra suave en capas (claro, como el reporte) */
.mkb-card{border-radius:16px;border:1px solid var(--border);background:linear-gradient(135deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));padding:20px 24px;box-sizing:border-box;min-width:0}
:root[data-theme="light"] .mkb-card{background:#ffffff;border-color:rgba(16,24,40,0.08);box-shadow:0 1px 2px rgba(16,24,40,0.06),0 2px 6px rgba(16,24,40,0.05)}
.mkb-card-slim{padding:12px 18px}
/* Header de sección: chip cuadradito 28 con tinte del acento + título 14/800 + meta muted 11 a la derecha. Mismo margen SIEMPRE. */
.mkb-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;min-height:28px;flex-wrap:wrap}
.mkb-head-ic{width:28px;height:28px;border-radius:8px;background:var(--mkb-acc-soft);color:var(--mkb-acc);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.mkb-head-t{font-size:14px;font-weight:800;color:var(--text);letter-spacing:-.2px;line-height:1.15}
.mkb-head-meta{margin-left:auto;font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
/* Botones: mismo alto 36px */
.mkb-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 15px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text);font-size:11.5px;font-weight:700;text-decoration:none;cursor:pointer;font-family:inherit;white-space:nowrap;box-sizing:border-box;transition:background .15s,border-color .15s;-webkit-tap-highlight-color:transparent}
.mkb-btn:hover{background:rgba(127,127,127,0.08);border-color:var(--mkb-acc-line,var(--border))}
.mkb-btn-wa{background:#25D366;border-color:#25D366;color:#fff}
.mkb-btn-wa:hover{background:#20bd5a;border-color:#20bd5a}
/* Identidad de marca: franja horizontal densa (logo + nombre + slogan + tipo). Sin datos extra la card queda bajita. */
.mkb-id{display:flex;align-items:center;gap:16px;min-width:0}
.mkb-id-logo{width:56px;height:56px;border-radius:12px;object-fit:contain;background:#fff;border:1px solid rgba(16,24,40,0.08);padding:6px;flex-shrink:0;box-sizing:border-box}
.mkb-id-fb{width:56px;height:56px;border-radius:12px;background:var(--mkb-acc-soft);color:var(--mkb-acc);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;flex-shrink:0}
.mkb-id-main{flex:1;min-width:0}
.mkb-id-name{font-size:18px;font-weight:900;color:var(--text);letter-spacing:-.3px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkb-id-slogan{font-size:12px;font-style:italic;color:var(--muted);margin-top:3px;line-height:1.4}
.mkb-id-type{flex-shrink:1;min-width:0;max-width:100%;padding:5px 12px;border-radius:100px;background:var(--mkb-acc-soft);color:var(--mkb-acc);border:1px solid var(--mkb-acc-line);font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
/* Metadata al extremo derecho de la MISMA fila de identidad (slogan + tipo): usa todo el ancho */
.mkb-id-side{margin-left:auto;display:flex;align-items:center;gap:12px;min-width:0;flex-shrink:1}
.mkb-id-side .mkb-id-slogan{margin-top:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:340px}
@media(max-width:640px){.mkb-id-side{margin-left:0;flex-basis:100%;flex-wrap:wrap;gap:8px}}
@media(max-width:640px){.mkb-id{flex-wrap:wrap}}
@media(max-width:480px){.mkb-id{flex-wrap:wrap}.mkb-id-name{white-space:normal}}
/* Sub-bloques compactos (solo si existen datos) */
.mkb-sub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:16px}
.mkb-sub{border:1px solid var(--border);border-radius:12px;background:rgba(127,127,127,0.05);padding:12px 14px;min-width:0}
:root[data-theme="light"] .mkb-sub{background:#f7f8fb;border-color:#e9ebf0}
.mkb-sub-label{font-size:9px;font-weight:800;color:var(--dim);text-transform:uppercase;letter-spacing:.7px;margin-bottom:7px}
.mkb-sub-body{font-size:11.5px;color:var(--text);line-height:1.55;overflow-wrap:anywhere;word-break:break-word;min-width:0}
.mkb-swatches{display:flex;gap:12px;flex-wrap:wrap}
.mkb-swatch{display:inline-flex;align-items:center;gap:7px}
.mkb-swatch i{width:22px;height:22px;border-radius:7px;border:1px solid rgba(127,127,127,0.25);display:block;flex-shrink:0}
.mkb-swatch b{font-size:10.5px;font-weight:700;color:var(--muted);font-family:'JetBrains Mono',monospace}
/* Tu Media Buyer: retícula limpia avatar + textos + CTA mismo alto */
.mkb-buyer{display:flex;align-items:center;gap:14px;min-width:0}
.mkb-buyer-ava{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--mkb-acc-line);box-sizing:border-box}
.mkb-buyer-fb{width:52px;height:52px;border-radius:50%;background:var(--mkb-acc-soft);color:var(--mkb-acc);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900;flex-shrink:0;border:2px solid var(--mkb-acc-line);box-sizing:border-box}
.mkb-buyer-name{font-size:15px;font-weight:800;color:var(--text);letter-spacing:-.2px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkb-buyer-role{font-size:11.5px;color:var(--muted);margin-top:2px}
.mkb-buyer-cta{display:flex;gap:8px;margin-top:14px}
.mkb-buyer-cta .mkb-btn{flex:1}
/* Carpetas (franja slim): chips mismo alto 38, hover consistente */
.mkb-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mkb-chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:11px;border:1px solid var(--border);background:rgba(127,127,127,0.05);text-decoration:none;font-size:12px;font-weight:700;color:var(--text);box-sizing:border-box;transition:border-color .15s,background .15s;-webkit-tap-highlight-color:transparent}
:root[data-theme="light"] .mkb-chip{background:#f7f8fb;border-color:#e9ebf0}
.mkb-chip:hover{border-color:var(--mkb-acc-line);background:var(--mkb-acc-soft)}
/* ── Menú agrupado ─────────────────────────────────────────────────
El encabezado de grupo NO es un item más: es más chico, en mayúsculas
y sin icono, para que no compita con las entradas reales. Si se ve
igual que un item, la jerarquía desaparece y no sirve de nada. */
/* La etiqueta del grupo alinea su flechita a la derecha — pero SOLO cuando
la etiqueta es visible. En el rail replegado hereda el display:none de
.rail-label, que es justo lo que un estilo en línea rompía. */
/* Atado a .expanded: cualquier regla que declare display fuera de ahí le gana
al display:none del rail replegado y saca el texto encima del icono. */
.portal-rail.expanded .rail-label-grupo{display:flex;align-items:center;
justify-content:space-between;width:100%}
/* La flechita es lo ÚNICO que distingue a un menú padre de un item. */
.rail-grupo-ch{display:inline-block;transition:transform .18s;font-size:15px;opacity:.5;
margin-left:8px;flex-shrink:0}
/* La línea del submenú solo existe cuando hay texto; replegado estorbaría. */
.rail-sub{padding-left:10px;margin-left:10px;border-left:1px solid var(--border)}
/* ── El segmentado de Rentabilidad: vidrio, a propósito ────────────
El estado activo heredaba el acento teal de Creadoras con una sombra
de color, y sobre fondo claro eso se leía como vidrio esmerilado por
accidente. Aquí se hace deliberado: la pastilla activa es una lámina
translúcida con desenfoque detrás, borde de luz arriba y sombra
suave — no un bloque de color plano.
Se limita a esta sección con .seg-vidrio para no tocar el resto. */
.seg-vidrio{background:rgba(127,127,127,.07);backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);border:1px solid var(--border);padding:5px}
.seg-vidrio .crx-seg-btn{color:var(--muted);transition:color .18s}
.seg-vidrio .crx-seg-btn:hover:not(.active){color:var(--text)}
.seg-vidrio .crx-seg-btn.active{
background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.62));
color:#111827;
border:1px solid rgba(255,255,255,.85);
box-shadow:0 1px 2px rgba(16,24,40,.09),0 8px 22px -12px rgba(16,24,40,.5),
inset 0 1px 0 rgba(255,255,255,1);
backdrop-filter:blur(14px) saturate(1.5);
-webkit-backdrop-filter:blur(14px) saturate(1.5)}
:root[data-theme="dark"] .seg-vidrio .crx-seg-btn.active,
:root:not([data-theme="light"]) .seg-vidrio .crx-seg-btn.active{
background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
color:#fff;border-color:rgba(255,255,255,.16);
box-shadow:0 8px 24px -14px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.24)}
/* ── TINTA FIJA EN EL PAPEL ────────────────────────────────────────
El documento es blanco SIEMPRE, en los dos temas. Sus campos no pueden
heredar el color del tema: en oscuro el texto se vuelve blanco y queda
invisible sobre el papel. Se fija la tinta, y con -webkit-text-fill-color
además, que es lo único que gana contra el autocompletado del navegador.
Es el mismo bug que ya nos mordió en el tablero interno. */
.pl-nombre,.pl-edit input,.pl-base{color:#111827!important;
-webkit-text-fill-color:#111827!important}
.pl-nombre::placeholder{color:#9ca3af!important;-webkit-text-fill-color:#9ca3af!important}
/* ── Estado de resultados: editables discretos ─────────────────────
Un estado de resultados se lee como DOCUMENTO. Si cada campo trae su
caja gris, parece formulario. Aquí los campos son invisibles en reposo
y solo se revelan al pasar por encima o al enfocarlos. */
.pl-nombre{width:auto;min-width:120px;max-width:280px;border:0;background:transparent;
color:#111827;font-size:13px;font-family:inherit;outline:none;padding:4px 7px;
border-radius:6px;transition:background .12s,box-shadow .12s}
.pl-nombre:hover{background:#f3f4f6}
.pl-nombre:focus{background:#fff;box-shadow:0 0 0 2px rgba(17,24,39,.14)}
.pl-nombre::placeholder{color:#9ca3af;font-style:italic}
.pl-edit{display:inline-flex;align-items:center;justify-content:flex-end;gap:2px;
padding:4px 7px;border-radius:6px;transition:background .12s,box-shadow .12s}
.pl-edit:hover{background:#f3f4f6}
.pl-edit:focus-within{background:#fff;box-shadow:0 0 0 2px rgba(17,24,39,.14)}
.pl-edit input{border:0;background:transparent;color:#111827;font-size:13px;text-align:right;
outline:none;font-variant-numeric:tabular-nums;font-family:inherit}
.pl-edit input::-webkit-outer-spin-button,.pl-edit input::-webkit-inner-spin-button{
-webkit-appearance:none;margin:0}
.pl-edit input[type=number]{-moz-appearance:textfield}
.pl-sig{color:#9ca3af;font-size:12px}
/* El chevron NO es adorno: sin él, "por unidad" parece un campo de texto y
nadie descubre que se puede cambiar. */
.pl-base{border:1px solid #e5e7eb;background:#fff;color:#374151;font-size:12px;
outline:none;cursor:pointer;padding:5px 26px 5px 9px;border-radius:7px;
font-family:inherit;-webkit-appearance:none;appearance:none;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 8px center;
transition:border-color .12s,background-color .12s}
.pl-base:hover{border-color:#9ca3af;background-color:#f9fafb}
.pl-base:focus{border-color:#111827;box-shadow:0 0 0 2px rgba(17,24,39,.1)}
.pl-base:disabled{opacity:.55;cursor:default;background-image:none;padding-right:9px}
.pl-quitar{border:0;background:transparent;color:#d1d5db;cursor:pointer;font-size:16px;
padding:0 4px;border-radius:5px;transition:color .12s,background .12s}
.pl-quitar:hover{color:#b91c1c;background:#fef2f2}
/* Congelado: sin reaccionar al cursor. Que se note que no se toca. */
.pl-frio:hover{background:transparent!important;box-shadow:none!important;cursor:default}
.pl-frio input{cursor:default}
/* Creativos: carpetitas por fecha — glifo neutro sin huecos, badge integrado, label mono muted */
.mkb-folders{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:14px}
.mkb-folder{border:none;background:transparent;cursor:pointer;padding:0;font-family:inherit;text-align:center;min-width:0;-webkit-tap-highlight-color:transparent}
.mkb-folder-glyph{position:relative;aspect-ratio:1/1;border-radius:16px;background:rgba(127,127,127,0.07);border:1px solid var(--border);padding:8px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;box-sizing:border-box;overflow:hidden;transition:transform .18s,border-color .18s,box-shadow .18s}
:root[data-theme="light"] .mkb-folder-glyph{background:#f2f3f7;border-color:#e9ebf0}
.mkb-folder:hover .mkb-folder-glyph{transform:translateY(-3px);border-color:var(--mkb-acc-line);box-shadow:0 10px 24px -12px rgba(0,0,0,0.28)}
.mkb-folder-mini{border-radius:6px;overflow:hidden;background:rgba(127,127,127,0.1);min-width:0;min-height:0}
:root[data-theme="light"] .mkb-folder-mini{background:#e7e9ef}
.mkb-folder-mini img{width:100%;height:100%;object-fit:cover;display:block}
.mkb-folder-badge{position:absolute;bottom:7px;right:7px;min-width:20px;height:20px;padding:0 7px;border-radius:10px;background:var(--mkb-acc);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.28)}
.mkb-folder-label{font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--muted);margin-top:8px;text-transform:uppercase;font-family:'JetBrains Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ── Móvil ─────────────────────────────────────────────────────────────
Las rejillas de dos columnas del muro y del directorio se escribían con
`gridTemplateColumns` en línea, y un estilo en línea no lo puede pisar
una media query: en un teléfono seguían forzando dos columnas de 640px
y 320px en 390px de ancho, así que cada palabra caía en su propio
renglón. Por eso llevan clase: para poder decirles aquí que se apilen.
No es "adaptación pendiente": era imposible de arreglar sin la clase. */
@media (max-width: 900px) {
.muro-cols { grid-template-columns: 1fr !important; }
/* El contexto va DEBAJO en móvil. Arriba empujaría el muro fuera de la
primera pantalla, que es justo lo que hace que se sienta muerto. */
.muro-cols > aside { order: 2; }
.dir-lista { grid-template-columns: 1fr !important; }
.dir-lista > div { border-left: none !important; }
.dir-lista > div + div { border-top: 1px solid var(--border) !important; }
}
@media (max-width: 560px) {
/* En pantallas chicas el nombre del negocio se come la barra. El avatar
solo basta: es lo que se toca, y el nombre ya está en el menú. */
.menu-perfil-nombre { display: none; }
}
/* ── El periódico en móvil ─────────────────────────────────────────────
La nota principal va a dos columnas —titular a la izquierda, cuerpo a
la derecha—, y eso se escribió con `gridTemplateColumns` en línea. En un
teléfono la segunda columna se salía de la pantalla: el cuerpo quedaba
cortado a media palabra.
Es el mismo defecto que el muro: un estilo en línea no lo puede pisar
una media query, así que hubo que darle clase primero. */
@media (max-width: 900px) {
.nota-principal { grid-template-columns: 1fr !important; gap: 14px !important; }
/* El titular vuelve a llevar su margen inferior: en dos columnas no lo
necesitaba porque el cuerpo iba al lado. */
.nota-principal > h3 { margin-bottom: 12px !important; }
/* Justificado en pantalla angosta abre huecos enormes entre palabras.
En papel se corrige con guiones; aquí es mejor alinear a la izquierda. */
.periodico p { text-align: left !important; }
}
@media (max-width: 640px) {
/* La cabecera del periódico a escala de teléfono. */
.periodico h1 { font-size: clamp(28px, 9vw, 44px) !important; }
}
/* La fila de nuevos se arrastra sin barra visible: la barra ocupa alto y
cambia la altura de la fila al aparecer, que es justo lo que hace que un
muro "salte" al cargar. */
.fila-nuevos::-webkit-scrollbar { display: none; }
/* En pantallas chicas la barra de reacciones se queda sin espacio para las
cuatro etiquetas. Se ocultan y quedan los iconos: cuatro emojis en fila
se entienden solos, cuatro etiquetas cortadas a media palabra no. */
/* Con CUATRO botones las etiquetas no cabían bajo 520px. Con tres sí, y
un icono solo no dice qué hace: el marcador se confunde con compartir
y la carita con emoji. Solo se esconden ya muy abajo. */
@media (max-width: 400px) { .reac-et { display: none; } }
@media (max-width: 520px) { .acc { font-size: 13px; gap: 5px; padding: 9px 2px; } }
/* El avatar flotante de arriba solo en móvil: en escritorio vive dentro de
la columna derecha, donde es parte de la composición en vez de un
elemento suelto en una esquina vacía. */
@media (min-width: 901px) { .perfil-arriba { display: none !important; } }
/* ── El cajón derecho ──────────────────────────────────────────────────
En escritorio la columna derecha va al lado del muro. En móvil no cabe,
y ponerla debajo la manda a tres pantallas de scroll: la gente no la
encuentra y "no existe".
Así que en móvil se convierte en un cajón que se abre desde la derecha,
con el avatar de la barra superior como puerta. Es el mismo contenido,
al alcance de un toque. */
.cajon-der { display: none; }
.mtop-yo { display: none; }
@media (max-width: 900px) {
/* La columna deja de repetirse al final del muro: ahora vive en el
cajón, y tenerla en los dos lados sería el mismo contenido dos veces. */
.rail-der-col { display: none !important; }
.mtop-yo {
display: flex; align-items: center; justify-content: center;
background: none; border: 0; padding: 0; cursor: pointer;
margin-left: auto;
}
.cajon-der {
display: block; position: fixed; top: 0; right: 0; bottom: 0;
width: min(340px, 88vw); z-index: 40;
background: var(--bg); border-left: 1px solid var(--border);
overflow-y: auto; -webkit-overflow-scrolling: touch;
/* Fuera de pantalla hasta que se abre. `transform` y no `right`:
animar una propiedad de posición obliga al navegador a recalcular la
maquetación en cada cuadro y se ve a tirones. */
transform: translateX(100%);
transition: transform .22s ease;
box-shadow: -8px 0 32px -12px rgba(16,24,40,.28);
}
.cajon-der.open { transform: translateX(0); }
}
/* Quien pidió menos movimiento no debe recibir una animación de todos
modos: el cajón aparece, sin deslizarse. */
@media (prefers-reduced-motion: reduce) {
.cajon-der { transition: none; }
}
/* ── La barra de arriba en móvil ───────────────────────────────────────
El logo va CENTRADO de verdad: los dos botones se sacan del flujo con
posición absoluta, uno a cada lado. Con `space-between` el logo se
corría al centro del hueco que dejaban, y basta que un botón cambie de
tamaño para que deje de estar centrado. */
@media (max-width: 900px) {
.portal-mtop { position: sticky; }
.portal-ham { position: absolute; left: 14px; }
.mtop-yo { position: absolute; right: 14px; margin-left: 0; }
/* Más compacto: en una barra de 50px de alto, un lockup de 26px pesa
más que el contenido que encabeza. */
.brand-lockup { height: 19px !important; width: auto !important; }
}
/* ── El menú lateral en móvil ──────────────────────────────────────────
Abierto ocupa toda la altura de la pantalla y el logo quedaba pegado a
la esquina, como si se hubiera olvidado ahí. Centrado, con aire
alrededor, encabeza el menú en vez de estorbarle. */
/* En escritorio el lockup se quedaba pegado al borde izquierdo del riel.
La regla de centrarlo existía, pero SOLO dentro del bloque de móvil: en
ancho el riel no la veía nunca. Se separa del menú con una línea, igual
que en el cajón, para que encabece en vez de estorbar. */
@media (min-width: 901px) {
.portal-rail.expanded .portal-rail-brand {
justify-content: center;
padding: 4px 0 16px;
margin-bottom: 8px;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.portal-rail.expanded .portal-rail-brand img { height: 19px !important; width: auto; }
/* Contraído, el icono cuadrado también al centro. */
.portal-rail:not(.expanded) .portal-rail-brand { justify-content: center; }
}
@media (max-width: 900px) {
.portal-rail.open .portal-rail-brand {
justify-content: center;
padding: 6px 0 18px;
margin-bottom: 8px;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.portal-rail.open .portal-rail-brand img { height: 20px !important; width: auto; }
/* Una entrada sin hijos ("Mi publicidad") se alineaba distinto que las
que sí los tienen: el hueco de la flecha las corría. Se iguala. */
.portal-rail.open .portal-rail-item { padding-right: 14px; }
}
/* ── El copiloto en su propio sitio (copiloto.darmediaconsulting.com) ──
Prefijo `cps-` (copiloto-sitio) y no `cop-`: ese ya lo usa el chat del
copiloto (`cop-barra`, `cop-marca`…) y las reglas se pisaban.
Misma piel que DAR OS —mismos tokens, mismo azul— para que se lea como
la misma casa, pero sin el riel de la comunidad: aquí manda el copiloto. */
.cps-producto{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text)}
.cps-barra{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
gap:16px;padding:12px clamp(16px,3vw,32px);background:var(--bg);border-bottom:1px solid var(--border)}
.cps-marca{display:flex;align-items:center;gap:10px;min-width:0}
.cps-iso{width:28px;height:28px;border-radius:8px;display:block}
.cps-nombre{font-weight:800;font-size:17px;letter-spacing:-.02em}
.cps-de{font-size:13px;color:var(--muted);white-space:nowrap}
.cps-beta{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:2px 7px;
border-radius:14px;background:rgba(37,99,235,.14);color:#2563eb}
.cps-der{display:flex;align-items:center;gap:10px}
.cps-link{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:9px;cursor:pointer;
font:600 14px/1 inherit;font-family:inherit;border:1px solid var(--border);background:transparent;color:var(--text)}
.cps-link:hover{background:var(--bg-surface)}
.cps-cuerpo{flex:1;width:100%;max-width:980px;margin:0 auto;padding:clamp(22px,4vw,48px) clamp(16px,3vw,32px) 80px}
.cps-cuerpo-chat{max-width:none;padding:0}
.cps-hero{max-width:760px;margin:0 0 30px}
.cps-sello{margin:0 0 10px;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#2563eb}
.cps-hero h1{margin:0 0 14px;font-size:clamp(30px,5vw,48px);line-height:1.06;letter-spacing:-.035em;font-weight:850;text-wrap:balance}
.cps-bajada{margin:0;font-size:17.5px;line-height:1.6;color:var(--muted);max-width:60ch}
.cps-bajada b{color:var(--text)}
.cps-portada .pag{padding:0;max-width:none}
.cps-portada .enc{display:none}
.cps-desbloqueo{margin-top:20px;padding:26px 28px}
.cps-desbloqueo h2{margin:0 0 8px;font-size:22px;letter-spacing:-.02em}
.cps-desbloqueo p:not(.cps-sello){margin:0 0 18px;font-size:14.5px;line-height:1.7;color:var(--muted);max-width:62ch}
.cps-btn{padding:11px 22px;border-radius:9px;border:0;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;
background:#2563eb;color:#fff}
@media (max-width:560px){.cps-de{display:none}.cps-link span{display:none}}
/* ── El chat del sitio, con su lado izquierdo (.cop.sitio) ────────────
Como Claude o ChatGPT: lado a la izquierda, conversación al centro, y lo
guardado se abre a la derecha solo cuando se pide. Todo el alto de la
pantalla: aquí no hay barra de arriba que restar. */
.cop.sitio{--lado-w:268px;height:100dvh;min-height:0;gap:0;grid-template-columns:var(--lado-w) minmax(0,1fr) 340px}
.cop.sitio.plegado{grid-template-columns:var(--lado-w) minmax(0,1fr)}
.cop.sitio .cop-col{padding:0 clamp(14px,2.4vw,32px);min-height:0}
.cop.sitio .cop-panel{padding:16px 18px;overflow:hidden}
.cop.sitio .cop-cab{padding-top:14px}
/* Con el lado izquierdo, la vista de la landing y lo guardado necesitan su
propia columna. Sin esto `.cop.con-lp` (dos columnas) le gana a la rejilla
de tres: el lado se queda con la primera, el chat con la segunda y la
landing cae a una fila nueva de alto 0, fuera de la pantalla — se toca
"13 secciones" y no aparece nada. Y el velo oscuro (z-index 59, pensado
para la hoja de abajo del teléfono) tapaba el panel de la derecha: se
veía "dimearse" la pantalla y cualquier clic lo cerraba. */
@media(min-width:1081px){
.cop.sitio.con-lp{grid-template-columns:var(--lado-w) minmax(0,.85fr) minmax(0,1.15fr)}
.cop.sitio .cop-panel{position:relative;z-index:60;background:var(--bg-card)}
}
/* ── LA BARRA DEL COPILOTO (rehecha 1-oct-2026) ─────────────────────
Una sola medida para todo: filas de 34px, 13.5px, ícono de 16 con 10 de
aire, radio 8. Un solo estado activo (fondo neutro y texto fuerte), igual
para herramientas, biblioteca y conversaciones: antes había azul en dos
sitios a la vez y gris en un tercero. Todo a lo ancho de la barra. */
.cps-lado{--lado-hover:color-mix(in srgb,var(--text) 5%,transparent);--lado-on:color-mix(in srgb,var(--text) 8%,transparent);
display:flex;flex-direction:column;min-height:0;height:100dvh;width:100%;
background:var(--bg-card);border-right:1px solid var(--border);padding:16px 12px 10px;gap:0}
.cps-lado-cab{display:flex;align-items:center;gap:10px;padding:0 4px 16px}
.cps-logo{display:flex;align-items:center;gap:10px;border:0;background:none;padding:0;cursor:pointer;min-width:0}
/* Darsito 2.0 (2-oct-2026): el ícono es SU CABEZA (el recuadro del logo con su visor) sobre un cuadro oscuro, igual en claro y en oscuro */
.ds-ico{flex:0 0 auto;display:grid;place-items:center;border-radius:28%;background:#111216;overflow:hidden}
.ds-ico .darsito{width:96%;height:96%}
.ds-ico .ds-cuerpo,.ds-ico .ds-sombra{display:none}
.cps-marca{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.cps-marca-t{display:flex;align-items:center;gap:7px;font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--text);line-height:1}
.cps-marca-sub{font-size:11.5px;font-weight:500;color:var(--dim);line-height:1}
.cps-beta{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--crx-acc-text);background:color-mix(in srgb,var(--crx-acc) 12%,transparent);padding:2px 5px;border-radius:4px}
.cps-lado-x{display:none;background:none;border:0;cursor:pointer;color:var(--muted);padding:4px}
.cps-cab-marca .marca-menu{left:auto;right:0}
.cps-nuevo{margin-top:2px}
.cps-lado-marca .marca-caja{display:block;width:100%}
.cps-lado-marca .marca-sel{display:flex;width:100%;border-radius:10px;padding:5px 10px 5px 5px}
.cps-lado-marca .marca-nom{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cps-nuevo{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border-radius:8px;cursor:pointer;
font-family:inherit;font-size:13.5px;font-weight:600;color:var(--text);background:transparent;border:1px dashed var(--border)}
.cps-nuevo:hover{background:var(--lado-hover);border-style:solid}
.cps-lado-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;margin:0 -6px;padding:6px 6px 8px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12px);mask-image:linear-gradient(to bottom,transparent 0,#000 12px)}
.cps-lado-t{display:flex;align-items:center;justify-content:space-between;width:100%;margin:18px 0 4px;padding:0 10px;
font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);background:none;border:0}
button.cps-lado-t{cursor:pointer}button.cps-lado-t:hover{color:var(--muted)}
button.cps-lado-t svg{transition:transform .15s}button.cps-lado-t[aria-expanded="false"] svg{transform:rotate(-90deg)}
.cps-lado-menu,.cps-chats{display:flex;flex-direction:column;gap:1px}
.cps-fila{display:flex;align-items:center;gap:10px;width:100%;height:34px;padding:0 10px;border-radius:8px;border:0;
cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:500;text-align:left;color:var(--muted);background:transparent;
position:relative;text-decoration:none}
.cps-fila svg{flex:0 0 auto;opacity:.85}
/* Solo con mouse: en iOS el :hover se queda pegado al tocar y dejaba dos filas marcadas (28-oct). */
@media (hover:hover){.cps-fila:hover{background:var(--lado-hover);color:var(--text)}}
.cps-fila.on{background:var(--lado-on);color:var(--text);font-weight:600}
.cps-fila.on svg{opacity:1}
.cps-fila[disabled]{cursor:default;color:var(--dimmer)}.cps-fila[disabled]:hover{background:transparent}
.cps-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cps-n{font-size:12px;font-weight:600;color:var(--dim);font-variant-numeric:tabular-nums}
.cps-pronto{font-size:11px;font-weight:500;color:var(--dimmer)}
.cps-chat{padding-right:32px}
.cps-chat-x{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:none;align-items:center;justify-content:center;
width:26px;height:26px;background:none;border:0;cursor:pointer;color:var(--dim);border-radius:6px}
.cps-chat:hover .cps-chat-x,.cps-chat:focus-visible .cps-chat-x{display:flex}
.cps-chat-x:hover{color:#c2410c;background:var(--lado-hover)}
.cps-mas{color:var(--dim);font-size:12.5px}
.cps-vacio{margin:4px 10px;font-size:12.5px;line-height:1.55;color:var(--dim)}
.cps-lado-pie{display:flex;align-items:center;gap:2px;padding-top:10px;border-top:1px solid var(--border)}
.cps-lado-pie .cps-yo{flex:1;min-width:0;display:flex;position:relative}
.cps-yo-btn{gap:9px;padding:0 6px}
.cps-yo>div{flex:1;min-width:0}
.cps-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;border:0;background:transparent;color:var(--muted);cursor:pointer}
.cps-ico:hover{background:var(--lado-hover);color:var(--text)}
.cps-fila:focus-visible,.cps-ico:focus-visible,.cps-nuevo:focus-visible,.cps-logo:focus-visible{outline:2px solid var(--crx-acc);outline-offset:1px}
.cps-ham{display:none;background:none;border:0;cursor:pointer;color:var(--text);padding:6px}
.cps-velo{display:none}
@media(max-width:1080px){
.cop.sitio,.cop.sitio.plegado{grid-template-columns:minmax(0,1fr);height:100dvh}
.cps-lado{position:fixed;left:0;top:0;bottom:0;z-index:120;width:min(300px,86vw);transform:translateX(-102%);
transition:transform .2s ease,visibility 0s linear .2s;visibility:hidden}
/* La sombra solo con el menú abierto: cerrado se asomaba en la orilla izquierda del celular (27-oct). Cerrado queda
además fuera del orden de tabulación (visibility). */
.cps-lado.abierto{transform:none;visibility:visible;transition:transform .2s ease;box-shadow:0 10px 40px rgba(0,0,0,.18)}
.cps-lado-x,.cps-ham{display:flex}
.cps-velo{display:block;position:fixed;inset:0;z-index:110;background:rgba(16,24,40,.35)}
}
@media (prefers-reduced-motion: reduce){.cps-lado{transition:none}}
/* LA BARRA PLEGADA (10-oct): solo íconos, con su nombre al pasar el cursor. En el teléfono la barra ya es un cajón. */
.cps-plegar{display:grid;place-items:center;width:32px;height:32px;margin-left:auto;flex-shrink:0;border-radius:8px;border:0;background:none;color:var(--dim);cursor:pointer}
.cps-plegar:hover{background:var(--lado-hover);color:var(--text)}
@media(max-width:1080px){.cps-plegar{display:none}}
@media(min-width:1081px){
.cop.sitio.lado-mini{--lado-w:64px}
.lado-mini .cps-lado{padding:14px 8px 10px;align-items:stretch}
.lado-mini .cps-lado-cab{flex-direction:column;gap:8px;padding:0 0 12px}
.lado-mini .cps-marca,.lado-mini .cps-l,.lado-mini .cps-n,.lado-mini .cps-pronto,.lado-mini .cps-lado-t,
.lado-mini .cps-chats,.lado-mini .cps-vacio,.lado-mini .cps-chat-x{display:none}
.lado-mini .cps-plegar{margin:0 auto}
.lado-mini .cps-logo{justify-content:center}
.lado-mini .cps-nuevo{justify-content:center;padding:0;font-size:0;gap:0}
.lado-mini .cps-lado-menu{margin-top:6px}
.lado-mini .cps-fila{justify-content:center;padding:0}
.lado-mini .cps-lado-scroll{margin:0;padding:6px 0 8px}
.lado-mini .cps-lado-pie{flex-direction:column;gap:4px}
.lado-mini .cps-yo-btn{justify-content:center;padding:0}
}
/* ── EL INICIO DEL COPILOTO (1-oct-2026) ─────────────────────────────
Anatomía del panel de Shopify: tarjeta → etiqueta → número grande →
delta → línea. El azul del sistema es la ÚNICA tinta de las gráficas;
verde y rojo solo dicen si el cambio es bueno o malo. */
.cop-col-ini{overflow-y:auto;overscroll-behavior:contain}
.ini{--ini-bien:#15803d;--ini-mal:#b91c1c;width:100%;max-width:1200px;margin:0 auto;padding:22px 0 48px;display:flex;flex-direction:column;gap:14px}
:root:not([data-theme="light"]) .ini{--ini-bien:#4ade80;--ini-mal:#f87171}
.ini-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.ini-marca{margin-left:auto}
.ini-cab h1{margin:0 8px 0 0;font-size:22px;font-weight:750;letter-spacing:-.02em;color:var(--text)}
.ini-periodo{display:inline-flex;gap:2px;padding:3px;border-radius:10px;border:1px solid var(--border);background:var(--bg-card)}
.ini-periodo button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:7px;cursor:pointer}
.ini-periodo button.on{background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text)}
.ini-comp{font-size:12.5px;color:var(--dim)}
.ini-caja,.ini-tarjeta{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:16px 18px;min-width:0;position:relative}
.ini-etq{display:block;font-size:13px;font-weight:600;color:var(--muted)}
.ini-fila{display:flex;align-items:baseline;gap:10px;margin-top:6px;flex-wrap:wrap}
.ini-num{font-size:22px;font-weight:750;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.ini-num.grande{font-size:28px}
.ini-delta{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums}
.ini-delta.bien{color:var(--ini-bien)}.ini-delta.mal{color:var(--ini-mal)}
.ini-delta.igual,.ini-delta.sin{color:var(--dim);font-weight:500}
.ini-nota{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:var(--dim)}
.ini-tarjetas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ini-chispa{display:block;width:100%;height:34px;margin-top:10px;color:var(--crx-acc)}
.ini-medio{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:14px}
.ini-abajo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.ini-graf{position:relative;margin-top:12px;color:var(--crx-acc)}
.ini-graf svg{display:block;width:100%;height:auto;overflow:visible}
.ini-rejilla{stroke:var(--border);stroke-width:1}
.ini-eje{font-size:11px;fill:var(--dim);font-variant-numeric:tabular-nums}
.ini-acento{color:var(--crx-acc)}
.ini-linea{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ini-linea-ant{fill:none;stroke:var(--dim);stroke-width:1.5;stroke-dasharray:4 4;opacity:.7}
.ini-guia{stroke:var(--dim);stroke-width:1}
.ini-punto{fill:currentColor;stroke:var(--bg-card);stroke-width:2}
.ini-globo{position:absolute;top:0;transform:translateX(-50%);pointer-events:none;display:flex;flex-direction:column;gap:2px;
padding:8px 10px;border-radius:9px;background:var(--bg-card);border:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,.14);
font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.ini-globo b{color:var(--text);font-size:12px}.ini-globo strong{color:var(--text)}.ini-globo .ant{color:var(--dim)}
.ini-leyenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--dim)}
.ini-leyenda span{display:inline-flex;align-items:center;gap:6px}
.ini-leyenda i{width:14px;height:0;border-top:2px solid var(--crx-acc)}
.ini-leyenda i.ant{border-top:2px dashed var(--dim)}
.ini-desglose{display:flex;flex-direction:column;margin-top:10px}
.ini-renglon{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:8px;font-size:13px;color:var(--muted)}
.ini-renglon:nth-child(even){background:color-mix(in srgb,var(--text) 3%,transparent)}
.ini-renglon b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ini-renglon.sub span{color:var(--text)}
.ini-renglon.total{margin-top:6px;border-top:1px solid var(--border);border-radius:0;padding-top:12px;background:none}
.ini-renglon.total span{color:var(--text);font-weight:650}
.ini-renglon.total b{color:var(--ini-bien);font-weight:750}
.ini-renglon.total.neg b{color:var(--ini-mal)}
.ini-falta p{margin:10px 0 12px;font-size:13px;line-height:1.55;color:var(--muted)}
.ini-reco{display:flex;align-items:center;gap:16px}
.ini-reco .ds-ico{flex:0 0 auto}
.ini-reco-t{flex:1;min-width:0}.ini-reco-t p{margin:4px 0 0;font-size:15px;line-height:1.45;color:var(--text);font-weight:550}
.ini-reco-btn{flex:0 0 auto;border:1px solid var(--border);background:transparent;color:var(--text);font:inherit;font-size:13px;font-weight:600;
padding:8px 14px;border-radius:9px;cursor:pointer}
.ini-reco-btn:hover{background:color-mix(in srgb,var(--text) 5%,transparent)}
.ini-embudo{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.ini-paso{display:grid;grid-template-columns:84px minmax(0,1fr) 86px 52px;align-items:center;gap:10px;font-size:13px}
.ini-paso-l{color:var(--muted)}
.ini-paso b{text-align:right;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.ini-barra{height:8px;border-radius:4px;background:color-mix(in srgb,var(--text) 6%,transparent);overflow:hidden}
.ini-acento-fondo{display:block;height:100%;border-radius:4px;background:var(--crx-acc)}
.ini-tasa{text-align:right;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.ini-camps{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column}
.ini-camps li{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(52px,auto);gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px}
.ini-camps li:last-child{border-bottom:0}
.ini-camp-n{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ini-camps b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.ini-vacio{margin-top:12px;font-size:13px;color:var(--dim)}
.ini-aviso{font-size:13.5px;color:var(--muted)}
/* ── Inicio v2: selector de fechas tipo Shopify ── */
.rf{position:relative;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.rf-btn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--border);
background:var(--bg-card);color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.rf-btn:hover,.rf-btn.on{border-color:var(--dim)}
.rf-comp{display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:9px;background:color-mix(in srgb,var(--text) 5%,transparent);
font-size:12.5px;color:var(--muted)}
.rf-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:70;width:min(720px,calc(100vw - 32px));border-radius:14px;border:1px solid var(--border);
background:var(--bg-card);box-shadow:0 18px 50px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.08);overflow:hidden}
.rf-cuerpo{display:grid;grid-template-columns:170px minmax(0,1fr)}
.rf-atajos{display:flex;flex-direction:column;gap:1px;padding:10px;border-right:1px solid var(--border)}
.rf-atajos button{text-align:left;border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;padding:8px 10px;border-radius:8px;cursor:pointer}
.rf-atajos button:hover{background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--text)}
.rf-atajos button.on{background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text);font-weight:600}
.rf-der{padding:12px 14px}
.rf-ult{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:10px}
.rf-ult input,.rf-ult select{height:32px;border-radius:8px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);font:inherit;font-size:13px;padding:0 8px}
.rf-ult input{width:70px}
.rf-meses{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rf-flecha{position:absolute;top:-2px;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;border:0;background:transparent;color:var(--muted);cursor:pointer}
.rf-flecha:hover:not([disabled]){background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--text)}
.rf-flecha[disabled]{opacity:.3;cursor:default}
.rf-flecha.izq{left:0}.rf-flecha.der{right:0}
.rf-mes-t{text-align:center;font-size:13px;font-weight:650;color:var(--text);height:26px;line-height:26px}
.rf-sem,.rf-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:2px 0}
.rf-sem span{text-align:center;font-size:11px;color:var(--dim);padding:6px 0}
.rf-dia{height:32px;border:0;background:transparent;color:var(--text);font:inherit;font-size:12.5px;cursor:pointer;font-variant-numeric:tabular-nums}
.rf-dia:hover:not([disabled]){background:color-mix(in srgb,var(--text) 7%,transparent);border-radius:8px}
.rf-dia[disabled]{color:var(--dimmer);cursor:default}
.rf-dia.dentro{background:color-mix(in srgb,var(--crx-acc) 14%,transparent)}
.rf-dia.borde{background:var(--crx-acc);color:var(--crx-acc-ink);border-radius:8px;font-weight:700}
.rf-dia.hoy:not(.borde){box-shadow:inset 0 0 0 1px var(--dim);border-radius:8px}
.rf-dia:focus-visible{outline:2px solid var(--crx-acc);outline-offset:-2px;border-radius:8px}
.rf-pie{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border-top:1px solid var(--border)}
.rf-rango{font-size:12.5px;color:var(--muted)}
.rf-cancel,.rf-aplicar{height:34px;padding:0 14px;border-radius:9px;font:inherit;font-size:13px;font-weight:650;cursor:pointer}
.rf-cancel{border:1px solid var(--border);background:transparent;color:var(--text)}
.rf-aplicar{border:0;background:var(--text);color:var(--bg-card)}
.rf-aplicar[disabled]{opacity:.45;cursor:default}
@media (max-width:720px){
.rf-panel{position:fixed;inset:0;width:auto;border-radius:0;display:flex;flex-direction:column;z-index:200}
.rf-cuerpo{display:flex;flex-direction:column;flex:1;overflow:auto}
.rf-atajos{flex-direction:row;flex-wrap:wrap;gap:4px;border-right:0;border-bottom:1px solid var(--border)}
.rf-atajos button{white-space:nowrap;padding:7px 10px;border:1px solid var(--border)}
.rf-meses{grid-template-columns:1fr}
.rf-meses .rf-mes:nth-of-type(1){display:none}
}
/* ── Inicio v2: tipo de cuenta, embudo, creativos, diversidad, pipeline ── */
.ini-tipo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.ini-tipo b{color:var(--text)}
.ini-tipo-cambia{position:relative}
.ini-link{border:0;background:none;padding:0;color:var(--crx-acc-text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ini-tipo-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:30;min-width:240px;display:flex;flex-direction:column;padding:6px;border-radius:12px;
border:1px solid var(--border);background:var(--bg-card);box-shadow:0 12px 32px rgba(0,0,0,.18)}
.ini-tipo-menu button{text-align:left;border:0;background:transparent;color:var(--text);font:inherit;font-size:13px;padding:8px 10px;border-radius:8px;cursor:pointer}
.ini-tipo-menu button:hover,.ini-tipo-menu button.on{background:color-mix(in srgb,var(--text) 7%,transparent)}
.ini-embudo2{display:flex;flex-direction:column;margin-top:10px}
.ini-paso2{display:grid;grid-template-columns:minmax(0,1fr) 84px 58px 64px;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px}
.ini-paso2:last-of-type{border-bottom:0}
.ini-paso2 b{text-align:right;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.ini-paso-d{text-align:right}
.ini-paso2.rompe .ini-paso-l{color:var(--text);font-weight:650}
.ini-paso2.rompe .ini-tasa{color:var(--ini-mal);font-weight:650}
.ini-rompe{grid-column:1/-1;margin-top:-4px;font-size:12px;color:var(--ini-mal)}
.ini-creas{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.ini-crea{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:7px 8px;margin:0 -8px;border:0;border-radius:10px;
background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.ini-crea:hover{background:color-mix(in srgb,var(--text) 5%,transparent)}
.ini-crea img,.ini-crea-sin{width:44px;height:44px;border-radius:8px;object-fit:cover;background:color-mix(in srgb,var(--text) 6%,transparent);display:grid;place-items:center;color:var(--dim)}
.ini-crea-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.ini-crea-t b{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ini-crea-t span{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.ini-crea-g{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ini-div-cab{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ini-div-ind{font-size:12.5px;color:var(--dim)}.ini-div-ind b{color:var(--text);font-size:14px}
.ini-div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:12px}
.ini-sub{display:block;font-size:12px;font-weight:600;color:var(--dim);margin-bottom:8px}
.ini-niveles{display:flex;flex-direction:column;gap:9px}
.ini-nivel{display:grid;grid-template-columns:122px minmax(0,1fr) 44px;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.ini-nivel b{text-align:right;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.ini-nivel.cero span:first-child{color:var(--ini-mal)}
.ini-hueco{margin:12px 0 0;padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.5;color:var(--text);background:color-mix(in srgb,var(--ini-mal) 9%,transparent)}
.ini-falta-p{margin:10px 0;font-size:13px;line-height:1.55;color:var(--muted)}
.ini-pipe-in{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.ini-pipe-in label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--dim)}
.ini-pipe-in input{width:110px;height:34px;padding:0 10px;border-radius:8px;border:1px solid var(--border)!important;background:var(--bg-card)!important;color:var(--text);font:inherit;font-size:13px}
@media (max-width:900px){.ini-div{grid-template-columns:1fr}}
.ini-esq{min-height:118px;background:linear-gradient(90deg,var(--bg-card),color-mix(in srgb,var(--text) 4%,var(--bg-card)),var(--bg-card));
background-size:200% 100%;animation:ini-brillo 1.4s ease-in-out infinite}
.ini-esq.alta{min-height:320px}
@keyframes ini-brillo{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (max-width:1100px){.ini-tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}.ini-medio,.ini-abajo{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.ini-tarjetas{grid-template-columns:minmax(0,1fr)}.ini-reco{flex-wrap:wrap}.ini-paso{grid-template-columns:70px minmax(0,1fr) 64px 46px}}
@media (prefers-reduced-motion:reduce){.ini-esq{animation:none}}
/* ── Inicio: movimiento y mostrador (1-oct-2026) ─────────────────────
Una sola curva (la de la consola de Diversidad creativa): arranca rápido
y frena suave. La cascada solo corre con .entra (primera carga). */
.ini{--ini-curva:cubic-bezier(.2,.7,.2,1)}
.ini-caja,.ini-tarjeta{transition:border-color .18s,box-shadow .18s,transform .18s var(--ini-curva)}
.ini-tarjeta:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--text) 16%,transparent);box-shadow:0 12px 28px -18px rgba(0,0,0,.45)}
.ini-caja:hover{border-color:color-mix(in srgb,var(--text) 13%,transparent)}
.ini.cargando>*:not(.ini-cab){opacity:.55;transition:opacity .25s}
.ini>*{transition:opacity .25s}
.ini.entra>.ini-caja,.ini.entra>.ini-tipo,.ini.entra .ini-medio>*,.ini.entra .ini-abajo>*{animation:ini-sube .5s var(--ini-curva) both}
.ini.entra>.ini-reco{animation-delay:40ms}
.ini.entra .ini-tarjeta{animation:ini-sube .45s var(--ini-curva) both;animation-delay:calc(90ms + var(--i,0) * 55ms)}
.ini.entra .ini-medio>*{animation-delay:280ms}.ini.entra .ini-medio>*:nth-child(2){animation-delay:340ms}
.ini.entra .ini-abajo>*{animation-delay:400ms}.ini.entra .ini-abajo>*:nth-child(2){animation-delay:460ms}
.ini.entra>.dv{animation-delay:520ms}.ini.entra>.ini-caja:last-child{animation-delay:580ms}
/* Las líneas se dibujan; el relleno aparece detrás. */
.ini.entra .ini-linea{stroke-dasharray:1;stroke-dashoffset:1;animation:ini-dibuja 1.1s ease-out .45s forwards}
.ini.entra .ini-area{animation:ini-aparece .7s ease-out 1s both}
.ini.entra .ini-chispa-l{stroke-dasharray:1;stroke-dashoffset:1;animation:ini-dibuja .9s ease-out forwards;animation-delay:calc(260ms + var(--i,0) * 55ms)}
.ini-tarjeta .ini-chispa-l{--i:inherit}
/* Las barras crecen. */
.ini.entra .ini-barra>span,.ini.entra .dv-ang-b>i{animation:ini-crece .7s var(--ini-curva) both;animation-delay:calc(620ms + var(--i,0) * 60ms)}
.ini.entra .dv-cinta>span{animation:ini-crece-x .8s var(--ini-curva) both;animation-delay:calc(600ms + var(--i,0) * 70ms)}
.ini.entra .dv-kpi{animation:ini-sube .4s var(--ini-curva) both;animation-delay:calc(560ms + var(--i,0) * 50ms)}
.ini.entra .mc{animation:ini-entra .45s var(--ini-curva) both;animation-delay:calc(460ms + var(--i,0) * 60ms)}
@keyframes ini-sube{from{opacity:0;transform:translateY(12px)}}
@keyframes ini-aparece{from{opacity:0}}
@keyframes ini-entra{from{opacity:0;transform:scale(.92) translateY(8px)}}
@keyframes ini-dibuja{to{stroke-dashoffset:0}}
@keyframes ini-crece{from{width:0}}
@keyframes ini-crece-x{from{transform:scaleX(0)}}
/* El mostrador: estante con desliz como la Biblioteca, tarjetas 4:5 como
la galería del copiloto interno, ranking a la vista. */
.mc-estante{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:12px;margin-top:12px;
overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:thin}
.mc{all:unset;box-sizing:border-box;display:block;cursor:pointer;scroll-snap-align:start;min-width:0;border-radius:12px;
transition:transform .2s var(--ini-curva)}
.mc:hover{transform:translateY(-4px)}
.mc:active{transform:scale(.98)}
.mc:focus-visible{outline:2px solid var(--crx-acc);outline-offset:3px}
.mc-marco{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:#0b0b0d;
box-shadow:0 1px 1px rgba(0,0,0,.08),0 10px 24px -14px rgba(0,0,0,.5);transition:box-shadow .2s}
.mc:hover .mc-marco{box-shadow:0 1px 1px rgba(0,0,0,.08),0 20px 36px -16px rgba(0,0,0,.6)}
.mc-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s var(--ini-curva)}
.mc:hover .mc-media{transform:scale(1.05)}
.mc-vivo{animation:ini-aparece .25s both}
.mc-sin{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:4px;color:#fff;
background:radial-gradient(120% 120% at 20% 0%,color-mix(in srgb,var(--crx-acc) 55%,#0b0b0d),#0b0b0d 70%)}
.mc-sin span{font-size:30px;font-weight:800;letter-spacing:-.03em}
.mc-sin small{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.65}
.mc-rank{position:absolute;top:8px;left:8px;z-index:2;min-width:26px;height:22px;padding:0 7px;border-radius:7px;display:grid;place-items:center;
font-size:11.5px;font-weight:800;color:#0b0b0d;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25);font-variant-numeric:tabular-nums}
.mc:first-child .mc-rank{background:var(--crx-acc);color:var(--crx-acc-ink)}
.mc-tipo{position:absolute;top:8px;right:8px;z-index:2;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;
font-size:10px;font-weight:800;color:#fff;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.mc-pie{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:28px 10px 10px;display:flex;flex-direction:column;gap:6px;
background:linear-gradient(180deg,transparent,rgba(0,0,0,.82) 60%)}
.mc-pie b{font-size:12px;font-weight:700;color:#fff;line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.mc-chips{display:flex;gap:5px;flex-wrap:wrap}
.mc-chips span{font-size:11px;font-weight:700;color:#fff;background:rgba(255,255,255,.16);padding:2px 7px;border-radius:999px;font-variant-numeric:tabular-nums;backdrop-filter:blur(4px)}
.mc-chips .mc-roas{background:color-mix(in srgb,var(--s) 85%,transparent)}
.mc-velo{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(4,6,10,.72);backdrop-filter:blur(6px);animation:ini-aparece .2s both}
.mc-modal{position:relative;width:min(900px,100%);max-height:calc(100dvh - 40px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
border-radius:18px;overflow:hidden;background:var(--bg-card);border:1px solid var(--border);box-shadow:0 30px 90px -30px rgba(0,0,0,.8);animation:ini-entra .28s var(--ini-curva) both}
.mc-modal-media{position:relative;background:#0b0b0d;min-height:420px}
.mc-modal-media .mc-media{object-fit:contain;transform:none!important}
.mc-modal-der{position:relative;padding:22px 22px 20px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.mc-modal-der h3{margin:0;font-size:17px;font-weight:750;letter-spacing:-.01em;color:var(--text);overflow-wrap:anywhere;padding-right:30px}
.mc-x{position:absolute;top:12px;right:12px;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer}
.mc-x:hover{background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--text)}
.mc-datos{display:flex;flex-direction:column;margin-top:4px}
.mc-datos div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--muted)}
.mc-datos b{color:var(--text);font-variant-numeric:tabular-nums}
.mc-por{margin-top:auto;align-self:flex-start}
@media (max-width:720px){.mc-modal{grid-template-columns:1fr}.mc-modal-media{min-height:300px}.mc-estante{grid-auto-columns:minmax(140px,46%)}}
/* Diversidad creativa, como la consola del dashboard: KPIs, cinta por
nivel con sus colores, el hueco en su tarjeta oscura y ángulos con barra. */
.dv-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.dv-kpi{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--text) 4%,transparent);min-width:0}
.dv-kpi span{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.dv-kpi b{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.dv-kpi b small{font-size:13px;font-weight:600;color:var(--dim);margin-left:2px;letter-spacing:0}
.dv-kpi.negro{background:#0b0b0d}.dv-kpi.negro span{color:#9a9a92}.dv-kpi.negro b{color:#fff}
:root:not([data-theme="light"]) .dv-kpi.negro{background:color-mix(in srgb,var(--text) 10%,transparent)}
.dv-kpi.alerta b{color:var(--ini-mal)}
.dv-cinta{display:flex;gap:2px;height:12px;margin:2px 0 14px;border-radius:6px;overflow:hidden}
.dv-cinta span{display:block;background:var(--c);transform-origin:left;min-width:4px}
.dv-nom{display:inline-flex;align-items:center;gap:7px}
.dv-nom i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.dv-der{display:flex;flex-direction:column;gap:6px;min-width:0}
.dv-hueco{display:flex;flex-direction:column;gap:8px;padding:14px 16px;margin-bottom:12px;border-radius:14px;color:#fff;
background:radial-gradient(120% 140% at 85% 100%,rgba(245,158,11,.22),transparent 55%),#0b0b0d}
.dv-hueco>span{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#9a9a92}
.dv-hueco p{margin:0;font-size:14.5px;font-weight:600;line-height:1.45}
.dv-hueco em{font-style:normal;color:#ff6a47;font-weight:800}
.dv-hueco strong{color:#fbbf24}
.dv-hueco-btn{align-self:flex-start;border:0;border-radius:999px;padding:7px 13px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;background:#fff;color:#0b0b0d;transition:transform .12s}
.dv-hueco-btn:active{transform:scale(.96)}
.dv-angs{display:flex;flex-direction:column;gap:2px}
.dv-ang{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(40px,1fr) auto 48px;gap:10px;align-items:center;padding:7px 0;font-size:13px;border-bottom:1px solid var(--border)}
.dv-ang:last-child{border-bottom:0}
.dv-ang b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.dv-ang-b{height:6px;border-radius:3px;background:color-mix(in srgb,var(--text) 6%,transparent);overflow:hidden}
.dv-ang-b i{display:block;height:100%;border-radius:3px;background:var(--crx-acc)}
@media (max-width:900px){.dv-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.ini *,.ini *::before,.ini *::after,.mc-velo,.mc-modal{animation:none!important;transition:none!important}
.ini .ini-linea,.ini .ini-chispa-l{stroke-dasharray:none!important;stroke-dashoffset:0!important}}
.ini-barra>span{display:block;height:100%;border-radius:4px}
/* ── EL ESTUDIO DEL COPILOTO (1-oct-2026) ─────────────────────────── */
/* La pantalla del brief es la de `Studio.jsx` (chat-card, saludo,
píldoras), con los tokens del copiloto. Las medidas son las de allá:
caja de 680, radio 24, campo 20/22/10, barra 9/18/14 con su línea. */
/* `safe center`: centrado cuando cabe; si la galería lo alarga, arranca
arriba en vez de subir el saludo debajo de la barra (15-oct-2026). */
.est-vacio{--hilo:680px;flex:1;display:flex;flex-direction:column;justify-content:safe center;min-height:0;padding:28px 4px 56px;position:relative;overflow-y:auto}
.est-vacio::before{content:"";position:absolute;inset:-40px -24px;z-index:-1;pointer-events:none;
background:radial-gradient(60% 50% at 18% 78%,color-mix(in srgb,var(--crx-acc) 5%,transparent),transparent 70%),
radial-gradient(50% 45% at 88% 90%,color-mix(in srgb,var(--text) 4%,transparent),transparent 70%)}
.est-saludo{text-align:center;margin:16px 0 16px}
.est-hola{font-size:28px;font-weight:900;letter-spacing:-.03em;color:var(--text);margin-bottom:6px;line-height:1.2}
.est-frase span{color:var(--dim)}
.est-modos{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.est-modo{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:14px;border:1px solid var(--border);
background:transparent;color:var(--dim);font-family:inherit;font-size:11px;font-weight:500;cursor:pointer;transition:all .15s}
.est-modo:hover{color:var(--text)}
.est-modo.on{border-color:color-mix(in srgb,var(--text) 15%,transparent);background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--text);font-weight:700}
.est-modo.on svg{color:var(--crx-acc-text)}
.est-modo i{font-style:normal;font-size:9px;font-weight:700;padding:1px 5px;border-radius:6px;background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--dim);margin-left:2px}
.est-tira{max-width:680px;width:100%;margin:0 auto 10px}
.est-tira .cmn-nec{margin:0}
.est-caja{max-width:680px;width:100%;margin:0 auto}
.est-caja .cop-caja.con-barra{border-radius:24px;padding:0;gap:0;background:var(--bg-card);border:1px solid var(--border);
box-shadow:0 2px 20px rgba(0,0,0,.12)}
.est-caja .cop-caja.con-barra:focus-within{border-color:color-mix(in srgb,var(--text) 15%,transparent);box-shadow:0 4px 32px rgba(0,0,0,.2)}
.est-caja .cop-caja.con-barra textarea,
:root[data-theme] .est-caja .cop-caja.con-barra textarea{padding:20px 22px 10px;min-height:80px;font-size:14px;line-height:1.6}
.est-caja .cop-adj{padding:0 16px 6px}
.est-caja .cop-adj-it{background:#fff}
.est-caja .cop-adj-it img{object-fit:contain;padding:3px}
.est-caja .cop-barra.estudio{padding:9px 18px 14px;border-top:1px solid color-mix(in srgb,var(--text) 5%,transparent)}
.est-caja .cop-tienda{max-width:680px;margin-top:10px}
/* Los chips de allá no tienen caja: texto de 11px con su icono y su
flecha, y solo «Imagen» en azul. Así cabe la fila entera en 680 px. */
.est-caja .cop-barra.estudio{flex-wrap:nowrap;gap:2px}
.est-caja .cop-barra.estudio .sel-chip{background:transparent;border-color:transparent;padding:5px 8px;font-size:11px;font-weight:600;color:var(--muted);gap:6px}
.est-caja .cop-barra.estudio .sel-chip:hover,.est-caja .cop-barra.estudio .sel-chip.on{background:color-mix(in srgb,var(--text) 5%,transparent);border-color:transparent;color:var(--text)}
.est-caja .cop-barra.estudio .sel-chip svg{width:12px;height:12px}
.est-caja .cop-sep{height:16px;margin:0 6px}
.est-caja .cop-marca-barra .marca-nom{font-size:11px;font-weight:700}
.est-caja .cop-enviar{width:34px;height:34px}
/* El catálogo se abre desde el «+» («Producto de tu tienda»), como
allá; el botón ancho de debajo sale solo para cerrarlo. */
.est-caja:not(.est-tienda) .cop-tienda:not(.ab){display:none}
.est-caja .cop-barra.estudio .sel-chip.pri{color:var(--crx-acc-text)}
.sel-pronto{font-style:normal;font-size:10px;font-weight:600;color:var(--dim);border:1px solid var(--border);border-radius:999px;padding:1px 6px;margin-left:7px;vertical-align:1px}
.est-nota{margin:8px auto 0;max-width:680px;text-align:center;font-size:11px;color:var(--dimmer);font-variant-numeric:tabular-nums}
@media(max-width:720px){.est-hola{font-size:22px}.est-caja .cop-barra.estudio{flex-wrap:wrap;padding:8px 12px 12px}}
.est-cab{display:flex;align-items:center;gap:8px;max-width:var(--hilo);margin:0 auto 8px;font-size:13px;color:var(--muted)}
.est-cab b{font-size:14px;color:var(--text)}
.est-mini{height:28px;padding:0 11px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--muted);
font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.est-mini:hover{color:var(--text);background:color-mix(in srgb,var(--text) 5%,transparent)}
/* El paso de referencias como pantalla (paso 1.5 de `Studio.jsx`). */
.erp{max-width:1132px;width:100%;margin:0 auto;padding:4px 0 40px}
.erp-cab{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:0 26px}
.erp-cab h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--text)}
.erp-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 16px;border-radius:8px;border:1px solid var(--border);
background:transparent;color:var(--muted);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer}
.erp-btn:hover:not([disabled]){color:var(--text);border-color:var(--dim)}
.erp-franja{display:flex;align-items:center;gap:8px;padding:14px 18px 14px 36px;margin-bottom:16px;border-radius:12px;
border:1px solid var(--border);background:color-mix(in srgb,var(--text) 3%,transparent);font-size:11.5px;color:var(--dim)}
.erp-franja b{color:var(--text);font-weight:600}
.erp-cuantas{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:8px;background:color-mix(in srgb,var(--text) 6%,transparent)}
.erp-cuantas b{font-weight:800}
.erp-cuantas i{font-style:normal;color:var(--dim)}
.erp-filtros{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.erp-filtro{height:24px;padding:0 12px;border-radius:7px;border:1px solid var(--border);background:transparent;color:var(--dim);
font-family:inherit;font-size:10.5px;font-weight:600;cursor:pointer}
.erp-filtro.on{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent);border-color:color-mix(in srgb,var(--text) 18%,transparent)}
.erp-rejilla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.erp-ref{display:flex;flex-direction:column;padding:0;border-radius:12px;overflow:hidden;cursor:pointer;text-align:left;
border:2px solid var(--border);background:var(--bg-card);font-family:inherit;transition:border-color .15s,transform .15s}
.erp-ref:hover:not([disabled]){border-color:var(--dim)}
.erp-ref.on{border-color:var(--text)}
.erp-img{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--bg-surface)}
.erp-img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.erp-tic{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
background:var(--text);color:var(--bg)}
.erp-pie{display:flex;flex-direction:column;gap:2px;padding:9px 10px 11px}
.erp-pie b{font-size:12px;font-weight:700;color:var(--text)}
.erp-pie span{font-size:10px;color:var(--dimmer)}
.erp-centro{display:flex;justify-content:center;margin:16px 0 0}
.erp-cambiar{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 16px;border-radius:9px;
border:1px dashed var(--border);background:transparent;color:var(--dim);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer}
.erp-cambiar:hover:not([disabled]){color:var(--text);border-color:var(--dim)}
.erp-acciones{position:sticky;bottom:12px;display:flex;justify-content:center;align-items:stretch;gap:10px;margin-top:14px}
.erp-sin{display:inline-flex;align-items:center;gap:8px;padding:0 22px;border-radius:12px;border:1px solid var(--border);
background:var(--bg-card);color:var(--muted);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
.erp-sin:hover:not([disabled]){color:var(--text)}
.erp-generar{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 32px;border-radius:12px;border:0;cursor:pointer;
background:var(--text);color:var(--bg);font-family:inherit;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.erp-generar b{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800}
.erp-generar span{font-size:10.5px;opacity:.65}
.erp-generar[disabled],.erp-sin[disabled]{opacity:.55;cursor:default}
@media(max-width:900px){.erp-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}.erp-franja{padding-left:14px;flex-wrap:wrap}.erp-cab{padding:0}}
/* El trabajo como pantalla (paso 2 de `Studio.jsx`). */
.efp{max-width:1132px;width:100%;margin:0 auto;padding:4px 0 40px}
.efp-cab{display:flex;align-items:flex-start;gap:10px;margin:10px 0 12px}
.efp-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;border:1px solid var(--border);color:var(--text);flex:0 0 auto}
.efp-cab h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--text)}
.efp-cab p{margin:2px 0 0;font-size:10.5px;color:var(--dimmer);letter-spacing:.02em}
.efp .av-barra{margin:0 0 14px}
.efp-lista{display:flex;flex-direction:column;gap:12px}
.efp-con{padding:16px 18px 18px;border-radius:10px;border:1px solid var(--border);background:var(--bg-card)}
.efp-con-t{display:flex;align-items:baseline;gap:6px;margin-bottom:8px}
.efp-con-t i{font-style:normal;font-size:10px;color:var(--dimmer)}
.efp-con-t b{font-size:14px;font-weight:700;color:var(--text)}
.efp-tag{display:inline-block;padding:3px 7px;border-radius:5px;border:1px solid var(--border);background:color-mix(in srgb,var(--text) 6%,transparent);
font-size:10px;font-weight:700;color:var(--text)}
.efp-lineas{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.efp-lineas i{display:block;height:8px;border-radius:4px;background:color-mix(in srgb,var(--text) 6%,transparent);animation:efp-late 1.4s ease-in-out infinite}
.efp-lineas i+i{width:60%}
@keyframes efp-late{50%{opacity:.45}}
.efp-hueco{display:grid;place-items:center;width:100%;aspect-ratio:4/5;background:color-mix(in srgb,var(--text) 4%,transparent);font-size:12px;color:var(--dim)}
.efp-hueco i{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--text);animation:efp-gira .9s linear infinite}
.efp-hueco.mal{color:#dc2626}
@keyframes efp-gira{to{transform:rotate(360deg)}}
.efp-rejilla{position:static;max-width:none}
@media (prefers-reduced-motion:reduce){.efp-lineas i,.efp-hueco i{animation:none}}
/* ── Creadoras UGC: el marketplace marca ↔ creadora (1-oct-2026) ───────── */
.mkt .ini-cab .mkt-btn.pri{margin-left:auto}
.mkt .ini-cab .ini-marca{margin-left:8px}
@media (max-width:640px){.mkt .ini-cab{flex-wrap:wrap;row-gap:10px}.mkt .ini-cab .mkt-btn.pri{margin-left:0;width:100%;justify-content:center}}
.mkt-sub{margin:2px 0 14px;font-size:13.5px;color:var(--muted);max-width:72ch}
.mkt-ok{margin:0 0 12px;font-size:13px;color:#16a34a}
.mkt-mal{margin:8px 0 0;font-size:12.5px;color:#c2410c}
.mkt-nota{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}
.mkt-etq{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.mkt-btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:9px;border:1px solid var(--border);
background:transparent;color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.mkt-btn:hover{background:color-mix(in srgb,var(--text) 5%,transparent)}
.mkt-btn.pri{background:var(--text);color:var(--bg-card);border-color:var(--text)}
.mkt-btn.pri:hover{opacity:.9}
.mkt-btn.fant{border-color:transparent;color:var(--muted)}
.mkt-btn[disabled]{opacity:.5;cursor:default}
.mkt-link{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.mkt-link:hover{color:var(--text)}
.mkt-chips{display:flex;flex-wrap:wrap;gap:6px}
.mkt-chips span{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--muted)}
.mkt-chips.sel{margin-bottom:16px}
.mkt-chips.sel button{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.mkt-chips.sel button.on{background:var(--text);color:var(--bg-card);border-color:var(--text)}
.mkt-pill{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:#f97316;color:#fff;font-size:10.5px;font-weight:800}
.mkt-pill.chat{background:var(--crx-acc);color:var(--crx-acc-ink)}
/* Explorar */
.mkt-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.mkt-cr{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--bg-card);
transition:transform .18s ease,box-shadow .18s ease}
.mkt-cr:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.18)}
.mkt-cr.esq{min-height:330px;background:linear-gradient(90deg,var(--bg-card),color-mix(in srgb,var(--text) 5%,var(--bg-card)),var(--bg-card));background-size:200% 100%;animation:mkt-brillo 1.4s infinite}
@keyframes mkt-brillo{to{background-position:-200% 0}}
.mkt-cr-media{position:relative;aspect-ratio:4/5;background:color-mix(in srgb,var(--text) 6%,transparent);overflow:hidden}
.mkt-cr-media img,.mkt-cr-media video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.mkt-cr:hover .mkt-cr-media img,.mkt-cr:hover .mkt-cr-media video{transform:scale(1.04)}
.mkt-cr-vacia{display:grid;place-items:center;height:100%;font-size:44px;font-weight:800;color:var(--dim)}
.mkt-cr-play,.mkt-cr-n{position:absolute;top:10px;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:700;backdrop-filter:blur(6px)}
.mkt-cr-play{left:10px}.mkt-cr-n{right:10px}
.mkt-cr-cuerpo{display:flex;flex-direction:column;gap:10px;padding:12px}
.mkt-cr-cab{display:flex;align-items:center;gap:10px;min-width:0}
.mkt-cr-cab b{display:block;font-size:14px;color:var(--text)}
.mkt-cr-cab span{display:block;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt-cr .mkt-btn{justify-content:center;width:100%}
.mkt-vacio{display:flex;flex-direction:column;align-items:center;gap:12px;padding:36px 20px;text-align:center}
.mkt-vacio p{margin:0;max-width:46ch;color:var(--muted);font-size:13.5px}
/* Recomendadas, candado por plan y «con la agencia» (14-oct-2026) */
.mkt-reco{display:flex;flex-direction:column;gap:12px;margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.mkt-reco-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mkt-reco-cab b{font-size:15px;color:var(--text)}
.mkt-reco-cab span{font-size:12.5px;color:var(--dim)}
.mkt-cr .mkt-cr-acc{margin-top:auto}
.mkt-cr-cuerpo{flex:1}
.mkt-reco-porque{margin:0;padding:0 2px;list-style:none;display:flex;flex-direction:column;gap:3px}
.mkt-reco-porque li{position:relative;padding-left:14px;font-size:12px;line-height:1.45;color:var(--muted)}
.mkt-reco-porque li::before{content:"";position:absolute;left:2px;top:.55em;width:5px;height:5px;border-radius:50%;background:#16a34a}
.mkt-candado{gap:10px;color:var(--muted)}
.mkt-candado b{font-size:15px;color:var(--text)}
.mkt-condar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:22px;padding:16px 18px;border-radius:14px;border:1px dashed var(--border)}
.mkt-condar b{display:block;font-size:14px;color:var(--text)}
.mkt-condar span{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--muted);max-width:62ch}
.mkt-condar .mkt-btn{text-decoration:none}
.mkt-lista li.mkt-tarde{color:#c2410c;font-weight:600}
/* Una colaboración como convocatoria: lo publicado, postulaciones, invitaciones, en curso (14-oct-2026) */
.mkt-conv{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;padding:18px;border-radius:16px;border:1px solid var(--border);background:var(--bg-card);margin-bottom:22px}
.mkt-conv-foto{width:96px;height:96px;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--dim)}
.mkt-conv-foto img{width:100%;height:100%;object-fit:cover;display:block}
.mkt-conv-cuerpo{display:flex;flex-direction:column;gap:12px;min-width:0}
.mkt-conv-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mkt-conv-cab b{font-size:17px;color:var(--text)}
.mkt-conv-datos{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px 20px;margin:0}
.mkt-conv-datos div{min-width:0}
.mkt-conv-datos dt{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.mkt-conv-datos dd{margin:0;font-size:13.5px;line-height:1.45;color:var(--text);overflow-wrap:anywhere}
.mkt-conv-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--border)}
.mkt-conv-pie span{font-size:12.5px;color:var(--muted)}
.mkt-sec{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.mkt-sec-cab{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.mkt-sec .mkt-sec-cab{margin-bottom:0}
.mkt-sec-cab b{font-size:15px;color:var(--text)}
.mkt-sec-n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 7px;border-radius:999px;font-size:11.5px;font-weight:700;background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--muted)}
.mkt-sec-n.hay{background:#f97316;color:#fff}
.mkt-sec-vacio{margin:0;padding:14px 16px;border-radius:12px;border:1px dashed var(--border);font-size:13px;line-height:1.5;color:var(--muted)}
.mkt-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.mkt-post{display:flex;flex-direction:column;border-radius:14px;border:1px solid var(--border);background:var(--bg-card);overflow:hidden}
.mkt-post-port{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;aspect-ratio:3/1.25;background:var(--border)}
.mkt-post-port button{padding:0;border:0;background:color-mix(in srgb,var(--text) 6%,transparent);cursor:pointer;overflow:hidden}
.mkt-post-port img,.mkt-post-port video{width:100%;height:100%;object-fit:cover;display:block}
.mkt-post-port.vacio{display:grid;place-items:center;grid-template-columns:1fr;background:color-mix(in srgb,var(--text) 4%,transparent)}
.mkt-post-port.vacio span{font-size:12px;color:var(--dim)}
.mkt-post-cuerpo{display:flex;flex-direction:column;gap:10px;padding:14px;flex:1}
.mkt-post-cuerpo .mkt-cr-cab b{display:block;font-size:14px;color:var(--text)}
.mkt-post-cuerpo .mkt-cr-cab span{display:block;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt-post-msg{margin:0;font-size:13px;line-height:1.5;color:var(--text)}
.mkt-post-msg.vacio{color:var(--dim)}
.mkt-post-cuando{font-size:11.5px;color:var(--dim)}
.mkt-post-acc{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.mkt-post-acc .mkt-btn.fant{margin-left:auto}
.mkt-invs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-radius:12px;border:1px solid var(--border);background:var(--bg-card)}
.mkt-invs li{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px}
.mkt-invs li+li{border-top:1px solid var(--border)}
.mkt-invs li b{color:var(--text)}
.mkt-invs li .mkt-invs-t{flex:1;min-width:0;color:var(--muted);font-size:12.5px}
@media (max-width:640px){.mkt-conv{grid-template-columns:1fr}.mkt-conv-foto{width:100%;height:140px}.mkt-conv-foto.vacia{display:none}.mkt-posts{grid-template-columns:1fr}}
/* Mis colaboraciones */
.mkt-colabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.mkt-colab{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:14px;border:1px solid var(--border);background:var(--bg-card);text-align:left;font:inherit;color:var(--text);cursor:pointer;transition:transform .18s ease,border-color .18s}
.mkt-colab:hover{transform:translateY(-2px);border-color:var(--dim)}
.mkt-colab-cab{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mkt-colab-cab b{font-size:15px}
.mkt-colab-sub{font-size:12.5px;color:var(--muted)}
.mkt-colab-pie{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--dim)}
.mkt-estado{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.mkt-estado.abierta{background:rgba(22,163,74,.12);color:#16a34a}
.mkt-estado.cerrada{background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--muted)}
.mkt-colab-barra{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.mkt-colab-barra b{flex:1;font-size:16px}
/* El tablero: una columna por etapa */
.mkt-tablero{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);gap:10px;overflow-x:auto;padding-bottom:8px}
.mkt-col{display:flex;flex-direction:column;gap:8px;min-height:220px;padding:10px;border-radius:12px;background:color-mix(in srgb,var(--text) 3%,transparent);border:1px solid var(--border)}
.mkt-col-cab{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);padding:2px 2px 4px}
.mkt-tarj{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;border:1px solid var(--border);background:var(--bg-card);font:inherit;color:var(--text);cursor:pointer;text-align:left;animation:mkt-entra .3s ease both}
.mkt-tarj.toca{border-color:#f97316}
.mkt-tarj-t{flex:1;min-width:0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes mkt-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Modales y panel de detalle */
.mkt-velo{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:rgba(10,12,16,.55);backdrop-filter:blur(4px)}
.mkt-modal{width:min(560px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:16px;border:1px solid var(--border);background:var(--bg-card);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.mkt-panel{width:min(980px,100%);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:16px;border:1px solid var(--border);background:var(--bg-card);box-shadow:0 24px 60px rgba(0,0,0,.35);overflow:hidden}
.mkt-modal-cab{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mkt-modal-cab>b{font-size:16px}
.mkt-modal-pie{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.mkt-x{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;border:0;background:transparent;color:var(--muted);cursor:pointer}
.mkt-x:hover{background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--text)}
.mkt-campo{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.mkt-campo>span{font-size:12px;font-weight:600;color:var(--muted)}
.mkt-campo input,.mkt-campo select,.mkt-campo textarea,.mkt-caja textarea{width:100%;box-sizing:border-box;padding:9px 11px;border-radius:9px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit;font-size:13.5px}
.mkt-campo textarea,.mkt-caja textarea{resize:vertical}
.mkt-fila2{display:flex;gap:10px}
.mkt-fila-btn{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.mkt-tracker{display:flex;gap:4px;overflow-x:auto}
.mkt-tracker span{flex:1;min-width:76px;text-align:center;font-size:11px;font-weight:600;padding:6px 4px;border-radius:7px;color:var(--dim);background:color-mix(in srgb,var(--text) 4%,transparent)}
.mkt-tracker span.hecho{color:var(--muted);background:color-mix(in srgb,var(--text) 9%,transparent)}
.mkt-tracker span.ahora{color:var(--bg-card);background:var(--text)}
.mkt-panel-cuerpo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:16px;min-height:0;overflow:hidden}
.mkt-panel-izq{display:flex;flex-direction:column;gap:12px;overflow-y:auto;min-height:0}
.mkt-caja{padding:14px;border-radius:12px;border:1px solid var(--border);background:var(--bg)}
.mkt-caja .mkt-campo{margin-top:8px}
.mkt-lista{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.mkt-lista b{color:var(--text)}
.mkt-lista a,.mkt-entregas a{color:var(--crx-acc-text);font-weight:600;text-decoration:none}
.mkt-entregas{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.mkt-entregas a{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.mkt-pie-acc{display:flex;gap:16px}
.mkt-chat{display:flex;flex-direction:column;min-height:320px;padding:14px;border-radius:12px;border:1px solid var(--border);background:var(--bg)}
.mkt-chat-hilo{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:4px 0}
.mkt-msg{align-self:flex-start;max-width:85%;padding:8px 11px;border-radius:12px 12px 12px 4px;font-size:13px;line-height:1.45;background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--text);white-space:pre-wrap}
.mkt-msg.yo{align-self:flex-end;border-radius:12px 12px 4px 12px;background:var(--crx-acc);color:var(--crx-acc-ink)}
.mkt-chat-caja{display:flex;align-items:flex-end;gap:6px;margin-top:8px}
.mkt-chat-caja textarea{resize:none;line-height:20px;max-height:128px;overflow-y:auto;min-width:0;outline:0}
.mkt-chat-caja input,.mkt-chat-caja textarea{flex:1;padding:9px 11px;border-radius:9px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);font:inherit;font-size:13.5px}
.mkt-estrellas{display:flex;gap:4px;margin-bottom:6px}
.mkt-estrellas button{border:0;background:none;font-size:24px;line-height:1;color:color-mix(in srgb,var(--text) 20%,transparent);cursor:pointer;padding:0}
.mkt-estrellas button.on{color:#f59e0b}
@media (max-width:760px){.mkt-panel-cuerpo{grid-template-columns:1fr;overflow-y:auto}.mkt-fila2{flex-direction:column}.mkt .ini-cab .mkt-btn.pri{margin-left:0}}
@media (prefers-reduced-motion:reduce){.mkt-cr,.mkt-colab,.mkt-tarj,.mkt-cr-media img,.mkt-cr-media video{transition:none;animation:none}}
/* Tarifa por video de la creadora en el marketplace (1-oct-2026) */
.mkt-tarifa{font-size:13px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.mkt-tarifa.vacia{font-weight:500;color:var(--dim)}
.mkt-tarifa-cab{display:block;margin-top:3px;font-size:12.5px;font-weight:500;color:var(--muted)}
/* ── Páginas y Guiones como bibliotecas (1-oct-2026) ──────────────── */
.pg-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 11px;border-radius:8px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);font:600 12.5px/1 inherit;font-family:inherit;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s}
.pg-btn:hover{background:color-mix(in srgb,var(--text) 5%,var(--bg-card));border-color:color-mix(in srgb,var(--text) 18%,transparent)}
.pg-btn[disabled]{opacity:.55;cursor:default}
.pg-btn.pri{background:var(--text);color:var(--bg-card);border-color:transparent}
.pg-btn.pri:hover{background:color-mix(in srgb,var(--text) 86%,var(--bg-card))}
.pg-btn.ic{width:32px;padding:0}
.pg-btn.peligro{background:#dc2626;color:#fff;border-color:transparent}
.pg-borrar:hover{color:#dc2626;border-color:color-mix(in srgb,#dc2626 40%,transparent)}
.pg-btn:focus-visible,.pg-vista:focus-visible,.gu-tarj:focus-visible{outline:2px solid var(--crx-acc);outline-offset:2px}
@keyframes pg-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pg-brillo{to{background-position:-200% 0}}
.pg-confirma{position:absolute;left:10px;right:10px;bottom:10px;padding:12px;border-radius:11px;background:var(--bg-card);border:1px solid color-mix(in srgb,#dc2626 35%,var(--border));box-shadow:0 12px 30px rgba(0,0,0,.18);display:flex;flex-direction:column;gap:10px;z-index:2}
.pg-confirma p{margin:0;font-size:12.5px;line-height:1.45;color:var(--text)}
.pg-confirma div{display:flex;gap:6px;justify-content:flex-end}
/* Compartido con Guiones (cabecera en línea, filtros y selects) */
.pg-cab{gap:10px}
.pg-cab .pg-btn.pri{margin-left:auto}
.pg-filtros{display:flex;gap:8px;flex-wrap:wrap}
.pg-sel{height:40px;padding:0 10px;border-radius:10px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);font:13px inherit;font-family:inherit;cursor:pointer}
.pg-sin{margin:20px 0;color:var(--muted);font-size:13.5px}
:root[data-theme] .pg-busca input,.pg-busca input{background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important;height:auto;padding:0;flex:1;min-width:0;color:var(--text)!important;font:13.5px inherit;font-family:inherit}
@media (max-width:640px){.pg-cab .pg-btn.pri{margin-left:0}}
/* Biblioteca de páginas v2 (1-oct-2026): portada legible + una acción + menú «⋯» */
.pgb{gap:18px}
.pgb-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pgb-cab h1{display:flex;align-items:center;gap:10px;margin:0;font-size:26px;font-weight:700;letter-spacing:-.025em;color:var(--text)}
.pgb-cab .pg-cab-txt p{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.pg-n{font-size:12px;font-weight:600;letter-spacing:0;color:var(--muted);background:color-mix(in srgb,var(--text) 7%,transparent);padding:2px 8px;border-radius:999px;font-variant-numeric:tabular-nums;line-height:1.5}
.pg-btn.grande{height:40px;padding:0 16px;border-radius:10px;font-size:13.5px;gap:7px}
.pg-btn.sec{background:color-mix(in srgb,var(--text) 7%,var(--bg-card));border-color:transparent;padding:0 14px}
.pg-btn.sec:hover{background:color-mix(in srgb,var(--text) 12%,var(--bg-card));border-color:transparent}
.pg-acc .pg-btn.ic{width:32px;padding:0;background:transparent;border-color:transparent;color:var(--muted)}
.pg-acc .pg-btn.ic:hover,.pg-acc .pg-btn.ic[aria-expanded="true"]{background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text)}
/* Barra: buscador + orden, y debajo las pastillas por producto */
.pg-barra{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pg-busca{flex:1;min-width:220px;display:flex;align-items:center;gap:9px;height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg-card);color:var(--muted);transition:border-color .15s,box-shadow .15s}
.pg-busca:focus-within{border-color:var(--crx-acc-line,rgba(96,165,250,.45));box-shadow:0 0 0 3px var(--crx-acc-soft,rgba(96,165,250,.12))}
.pg-busca-x{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;border:0;background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--muted);cursor:pointer;padding:0}
.pg-orden{display:flex;align-items:center;gap:6px;height:40px;padding:0 4px 0 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg-card);font-size:12.5px;color:var(--muted)}
.pg-orden select{font:600 13px/1 inherit;font-family:inherit;color:var(--text);cursor:pointer;padding:0 6px;height:100%}
/* El campo va DENTRO de su caja: sin fondo, borde ni sombra propios (la regla global de inputs le pintaba otra cajita). */
:root[data-theme] .pg .bare-input,.pg .bare-input{flex:1;min-width:0;background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important;border-radius:0;padding:0;color:var(--text)!important;font:13.5px inherit;font-family:inherit}
.pg .bare-input::-webkit-search-cancel-button{display:none}
.pg-orden .bare-input{flex:0 0 auto}
.pg-pastillas{flex-basis:100%;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.pg-pastillas::-webkit-scrollbar{display:none}
.pg-pastilla{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 6px 0 13px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--muted);font:500 13px/1 inherit;font-family:inherit;cursor:pointer;transition:background .15s,color .15s,border-color .15s;max-width:260px}
.pg-pastilla-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-pastilla-n{min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--muted)}
.pg-pastilla:hover{color:var(--text);border-color:color-mix(in srgb,var(--text) 20%,transparent)}
.pg-pastilla.on{background:var(--text);color:var(--bg-card);border-color:transparent}
.pg-pastilla.on .pg-pastilla-n{background:color-mix(in srgb,var(--bg-card) 22%,transparent);color:var(--bg-card)}
.pg-pastilla:focus-visible,.pg-busca-x:focus-visible{outline:2px solid var(--crx-acc,#60a5fa);outline-offset:2px}
/* Grupos por producto */
.pg-grupo{display:flex;flex-direction:column;gap:12px}
.pg-grupo+.pg-grupo{margin-top:14px}
.pg-grupo-t{display:flex;align-items:center;gap:9px;margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.pg-grupo-t>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-grupo-ver{margin-left:auto;border:0;background:transparent;color:var(--muted);font:500 12.5px/1 inherit;font-family:inherit;cursor:pointer;padding:6px 4px;white-space:nowrap}
.pg-grupo-ver:hover{color:var(--text)}
.pg-aviso{margin:0;font-size:12.5px;color:#b45309}
.pgb-sin{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:28px 20px;border:1px dashed var(--border);border-radius:14px;color:var(--muted);font-size:13.5px}
.pgb-sin p{margin:0}
/* Rejilla 3 / 2 / 1 */
.pg-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.pg-tarj{position:relative;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:14px;background:var(--bg-card);overflow:hidden;
box-shadow:0 1px 2px rgba(0,0,0,.18);
animation:pg-entra .5s var(--ini-curva,cubic-bezier(.2,.7,.2,1)) both;transition:transform .25s var(--ini-curva,ease),box-shadow .25s,border-color .25s}
.pg-tarj:hover,.pg-tarj.activa{transform:translateY(-3px);box-shadow:0 16px 36px -12px rgba(0,0,0,.55);border-color:color-mix(in srgb,var(--text) 16%,transparent)}
:root[data-theme="light"] .pg-tarj{box-shadow:0 1px 2px rgba(16,24,40,.05)}
:root[data-theme="light"] .pg-tarj:hover,:root[data-theme="light"] .pg-tarj.activa{box-shadow:0 18px 40px -16px rgba(16,24,40,.22),0 2px 6px rgba(16,24,40,.05)}
.pg-vista{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:inherit}
.pg-vista:focus-visible{outline:2px solid var(--crx-acc,#60a5fa);outline-offset:-2px}
/* Portada 16:10; al pasar el mouse baja despacio y al salir regresa rápido */
.pg-mini{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:#fff;border-bottom:1px solid var(--border)}
.pg-mini-rodar{position:absolute;top:0;left:0;right:0;transform:translateY(0);transition:transform .7s cubic-bezier(.3,.7,.2,1);will-change:transform}
.pg-vista:hover .pg-mini-rodar,.pg-vista:focus-visible .pg-mini-rodar{transform:translateY(var(--pg-rodar,0));transition:transform 7s cubic-bezier(.4,0,.3,1) .25s}
.pg-mini-lienzo{position:absolute;top:0;left:0;transform-origin:0 0;border:0;pointer-events:none;background:#fff;overflow:hidden}
.pg-mini-vieja{overflow:hidden}
.pg-mini-vieja .lp{max-width:none;border-radius:0}
.pg-mini-esq{position:absolute;inset:0;background:linear-gradient(110deg,color-mix(in srgb,var(--text) 4%,var(--bg-card)) 30%,color-mix(in srgb,var(--text) 9%,var(--bg-card)) 50%,color-mix(in srgb,var(--text) 4%,var(--bg-card)) 70%);background-size:200% 100%;animation:pg-brillo 1.4s linear infinite}
.pg-vista-velo{position:absolute;inset:auto 10px 10px auto;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none}
.pg-vista-velo span{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;background:rgba(17,17,17,.82);color:#fff;font-size:12px;font-weight:600;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pg-vista:hover .pg-vista-velo,.pg-vista:focus-visible .pg-vista-velo{opacity:1;transform:none}
@media (hover:none){.pg-vista-velo{display:none}}
.pg-cuerpo{display:flex;flex-direction:column;gap:5px;padding:14px 14px 12px 16px;flex:1}
.pg-tit{margin:0;font-size:15px;font-weight:600;line-height:1.38;letter-spacing:-.01em;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pg-meta{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px;color:var(--muted);min-width:0}
.pg-meta-prod{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pg-meta time{flex:0 0 auto;white-space:nowrap}
.pg-pie{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:10px}
.pg-chips{display:flex;flex-wrap:wrap;gap:5px;min-width:0;flex:1}
.pg-chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:500;white-space:nowrap;color:color-mix(in srgb,var(--text) 78%,transparent);background:color-mix(in srgb,var(--text) 6%,transparent)}
.pg-chip i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--text) 35%,transparent)}
.pg-chip.dis i{background:#22c55e}
.pg-chip.tn i{background:#7c8cff}
:root[data-theme="light"] .pg-chip.dis i{background:#16a34a}
:root[data-theme="light"] .pg-chip.tn i{background:#2c3256}
.pg-acc{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.pg-giro{width:14px;height:14px;border-radius:50%;border:2px solid color-mix(in srgb,var(--text) 20%,transparent);border-top-color:var(--text);animation:pg-gira .7s linear infinite}
@keyframes pg-gira{to{transform:rotate(360deg)}}
/* Menú «⋯» (en portal, fuera de la tarjeta) */
.pg-menu{position:fixed;z-index:1200;width:228px;padding:6px;border-radius:12px;background:var(--bg-card,#16181d);border:1px solid var(--border);box-shadow:0 18px 44px -10px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.25);animation:pg-menu-entra .14s ease-out both}
:root[data-theme="light"] .pg-menu{box-shadow:0 18px 44px -12px rgba(16,24,40,.25),0 2px 6px rgba(16,24,40,.06)}
@keyframes pg-menu-entra{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.pg-menu-it{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--text);font:500 13.5px/1 inherit;font-family:inherit;text-align:left;text-decoration:none;cursor:pointer}
.pg-menu-it svg{color:var(--muted);flex:0 0 auto}
.pg-menu-it:hover,.pg-menu-it:focus-visible{background:color-mix(in srgb,var(--text) 7%,transparent);outline:0}
.pg-menu-it[disabled]{opacity:.5;cursor:default}
.pg-menu-it.peligro,.pg-menu-it.peligro svg{color:#f87171}
:root[data-theme="light"] .pg-menu-it.peligro,:root[data-theme="light"] .pg-menu-it.peligro svg{color:#dc2626}
.pg-menu-it.peligro:hover,.pg-menu-it.peligro:focus-visible{background:color-mix(in srgb,#dc2626 12%,transparent)}
.pg-menu-sep{height:1px;margin:5px 4px;background:var(--border)}
/* Confirmación de borrado */
.pg-modal-fondo{position:fixed;inset:0;z-index:1300;display:grid;place-items:center;padding:16px;background:rgba(6,8,12,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:pg-fade .15s ease-out both}
@keyframes pg-fade{from{opacity:0}to{opacity:1}}
.pg-modal{width:min(420px,100%);padding:22px;border-radius:16px;background:var(--bg-card,#16181d);border:1px solid var(--border);box-shadow:0 30px 70px -20px rgba(0,0,0,.6);animation:pg-menu-entra .18s ease-out both}
.pg-modal-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:color-mix(in srgb,#dc2626 14%,transparent);color:#ef4444}
.pg-modal h3{margin:14px 0 6px;font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.pg-modal p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.pg-modal p b{color:var(--text);font-weight:600}
.pg-modal-acc{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.pg-modal-acc .pg-btn{height:36px;padding:0 14px;font-size:13px}
/* Vacío */
.pg-vacio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:64px 20px;border:1px dashed var(--border);border-radius:16px}
.pg-vacio h2{margin:6px 0 0;font-size:19px;font-weight:700;color:var(--text)}
.pg-vacio p{margin:0;max-width:440px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.pg-vacio .pg-btn{margin-top:8px}
@media (max-width:1024px){.pg-rejilla{gap:16px}}
@media (max-width:640px){.pg-rejilla{grid-template-columns:1fr;gap:14px}.pgb-cab .pg-btn.grande{width:100%}.pgb .pg-busca{min-width:0;flex:1 1 0}.pg-orden>span{display:none}.pg-orden{padding-left:6px}.pgb-cab h1{font-size:23px}}
@media (prefers-reduced-motion:reduce){.pg-tarj,.pg-menu,.pg-modal,.pg-modal-fondo{animation:none}.pg-tarj,.pg-tarj:hover,.pg-tarj.activa{transform:none;transition:box-shadow .2s,border-color .2s}.pg-mini-rodar,.pg-vista:hover .pg-mini-rodar{transform:none;transition:none}.pg-vista-velo{transition:none}}
/* Guiones */
.gu-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.gu-tarj{display:flex;flex-direction:column;gap:7px;text-align:left;padding:16px;border-radius:14px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);cursor:pointer;font-family:inherit;
animation:pg-entra .45s cubic-bezier(.2,.7,.2,1) both;transition:transform .2s,box-shadow .2s,border-color .2s}
.gu-tarj:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.12);border-color:color-mix(in srgb,var(--text) 16%,transparent)}
.gu-meta{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gu-tit{font-size:15px;font-weight:700;line-height:1.3}
.gu-gancho{font-size:13px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gu-pie{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:6px;font-size:12px;font-weight:600;color:var(--dim)}
.gu-lector{width:min(820px,100%);max-height:88vh;display:flex;flex-direction:column;position:relative}
.gu-lector-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:20px 22px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.gu-lector-cab h3{margin:4px 0 0;font-size:19px;color:var(--text)}
.gu-acc{display:flex;gap:6px;flex-wrap:wrap}
.gu-confirma{position:static;margin:12px 22px 0}
.gu-lector-cuerpo{overflow-y:auto;padding:18px 22px 26px;display:flex;flex-direction:column;gap:12px}
.gu-idea{margin:0;font-size:14px;line-height:1.6;color:var(--muted);max-width:68ch}
.gu-toma{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--border)}
.gu-n{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:12.5px;font-weight:800;background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text)}
.gu-rol{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.gu-dice{margin:0 0 8px;font-size:16px;font-weight:600;line-height:1.45;color:var(--text);max-width:62ch}
.gu-dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;margin:0;font-size:13px;line-height:1.5}
.gu-dl dt{color:var(--dim);font-weight:600}
.gu-dl dd{margin:0;color:var(--text)}
.gu-crudo{white-space:pre-wrap;font:13.5px/1.6 inherit;font-family:inherit;color:var(--text);margin:0}
@media (max-width:640px){.gu-rejilla{grid-template-columns:1fr}.gu-lector{max-height:100dvh}}
@media (prefers-reduced-motion:reduce){.gu-tarj,.pg-mini-esq{animation:none;transition:none}}
/* ── Creadoras UGC: tablero por filas y panel lateral (rediseño 1-oct-2026) ── */
.mkt-filtros{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.mkt-filtros button{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--border);
background:var(--bg-card);color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.mkt-filtros button span{min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:inline-grid;place-items:center;font-size:11px;font-weight:700;
background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text);font-variant-numeric:tabular-nums}
.mkt-filtros button:hover{color:var(--text);border-color:var(--dim)}
.mkt-filtros button.on{background:var(--text);border-color:var(--text);color:var(--bg-card)}
.mkt-filtros button.on span{background:color-mix(in srgb,var(--bg-card) 22%,transparent);color:var(--bg-card)}
.mkt-filtros button.toca span{background:#f97316;color:#fff}
.mkt-filas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:12px}
.mkt-fila{position:relative;display:flex;align-items:stretch;gap:14px;padding:12px 14px 12px 12px;border-radius:14px;border:1px solid var(--border);
background:var(--bg-card);font:inherit;color:var(--text);text-align:left;cursor:pointer;
animation:mkt-entra .35s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 40ms);
transition:transform .18s ease,border-color .18s,box-shadow .18s}
.mkt-fila:hover{transform:translateY(-2px);border-color:var(--dim);box-shadow:0 10px 26px rgba(0,0,0,.10)}
.mkt-fila.toca{border-color:color-mix(in srgb,#f97316 55%,var(--border))}
.mkt-fila.fin{opacity:.7}
.mkt-fila-media{position:relative;flex:0 0 auto;width:76px;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:color-mix(in srgb,var(--text) 6%,transparent)}
.mkt-fila-media img,.mkt-fila-media video{width:100%;height:100%;object-fit:cover;display:block}
.mkt-fila-media .mkt-cr-vacia{font-size:26px}
.mkt-fila-media .mkt-cr-play{top:auto;bottom:6px;left:6px;padding:3px 5px}
.mkt-fila-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.mkt-fila-cab{display:flex;align-items:center;gap:8px;min-width:0}
.mkt-fila-cab b{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt-fila-cal{font-size:12px;font-weight:700;color:#f59e0b}
.mkt-fila-origen{margin-left:auto;font-size:11.5px;color:var(--dim);white-space:nowrap}
.mkt-fila-cab .mkt-pill.chat{gap:3px;padding:0 6px}
.mkt-fila-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px}
.mkt-fila-chip{padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--muted)}
.mkt-fila-tarifa{color:var(--muted);font-weight:600}
.mkt-pasos{display:flex;flex-direction:column;gap:5px}
.mkt-pasos-seg{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.mkt-pasos-seg i{height:4px;border-radius:2px;background:color-mix(in srgb,var(--text) 10%,transparent)}
.mkt-pasos-seg i.hecho{background:color-mix(in srgb,var(--crx-acc) 55%,transparent)}
.mkt-pasos-seg i.ahora{background:var(--crx-acc)}
.mkt-pasos>span{font-size:11.5px;color:var(--dim)}
.mkt-pasos>span b{color:var(--text);font-weight:600}
.mkt-fila-sig{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;color:var(--muted)}
.mkt-fila-sig.yo{color:var(--text);font-weight:600}
.mkt-fila-punto{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#f97316;box-shadow:0 0 0 3px color-mix(in srgb,#f97316 22%,transparent)}
.mkt-fila-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkt-fila-dias{flex:0 0 auto;font-size:11.5px;font-weight:600;color:var(--dim);font-variant-numeric:tabular-nums}
.mkt-fila-dias.tarde{color:#dc2626}
.mkt-fila-ir{align-self:center;color:var(--dim);transition:transform .18s,color .18s}
.mkt-fila:hover .mkt-fila-ir{transform:translateX(3px);color:var(--text)}
.mkt-fila-sig.grande{padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--text) 4%,transparent);font-size:14px}
.mkt-fila-sig.grande .mkt-fila-txt{white-space:normal}
/* El paso a paso con nombre, completo, en el panel */
.mkt-stepper{display:flex;gap:0;margin:0;padding:0;list-style:none;overflow-x:auto}
.mkt-stepper li{flex:1;min-width:64px;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;font-size:11px;color:var(--dim);text-align:center}
.mkt-stepper li::before{content:"";position:absolute;top:11px;left:-50%;width:100%;height:2px;background:color-mix(in srgb,var(--text) 10%,transparent);z-index:0}
.mkt-stepper li:first-child::before{display:none}
.mkt-stepper li.hecho::before,.mkt-stepper li.ahora::before{background:var(--crx-acc)}
.mkt-stepper i{position:relative;z-index:1;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;
background:var(--bg-card);border:2px solid color-mix(in srgb,var(--text) 14%,transparent);color:var(--dim)}
.mkt-stepper li.hecho i{background:var(--crx-acc);border-color:var(--crx-acc);color:var(--crx-acc-ink)}
.mkt-stepper li.ahora i{border-color:var(--crx-acc);color:var(--crx-acc-text);box-shadow:0 0 0 4px color-mix(in srgb,var(--crx-acc) 18%,transparent)}
.mkt-stepper li.ahora{color:var(--text);font-weight:700}
/* Panel lateral */
.mkt-velo.lado{place-items:stretch end;padding:0}
.mkt-panel.lado{width:min(560px,100%);max-height:none;height:100dvh;border-radius:0;border-width:0 0 0 1px;padding:20px 22px;overflow-y:auto;
animation:mkt-lado .28s cubic-bezier(.2,.7,.2,1) both}
.mkt-panel.lado .mkt-panel-cuerpo{grid-template-columns:1fr;overflow:visible}
.mkt-panel.lado .mkt-panel-izq{overflow:visible}
/* Que el panel SE DESPLACE en vez de aplastar lo de adentro: con un acuerdo largo el chat se encimaba a «Lo que toca» (14-oct). */
.mkt-panel.lado>*{flex-shrink:0}
.mkt-panel.lado .mkt-cr-cab span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
@keyframes mkt-lado{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:640px){.mkt-fila-origen{display:none}.mkt-fila-media{width:62px}.mkt-panel.lado{padding:16px}}
@media (prefers-reduced-motion:reduce){.mkt-fila,.mkt-panel.lado{animation:none;transition:none}}
@media (max-width:640px){
.mkt-colab-barra{flex-wrap:wrap;gap:8px 12px}
.mkt-colab-barra b{order:3;flex-basis:100%;font-size:18px}
.mkt-colab-barra .mkt-btn{margin-left:auto}
.mkt-fila{gap:10px;padding:10px}
.mkt-fila-sig{flex-wrap:wrap;row-gap:2px}
.mkt-fila-txt{white-space:normal;flex-basis:calc(100% - 16px)}
.mkt-fila-dias{padding-left:15px}
.mkt-fila-ir{display:none}
}
.est-tienda{margin-top:10px}
.est-tienda .cop-tienda{width:100%}
.est-vacio{position:relative}
.est-historial{position:absolute;top:12px;right:clamp(14px,2.4vw,32px);display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;
border-radius:9px;border:1px solid var(--border);background:var(--bg-card);color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.est-historial:hover{color:var(--text);border-color:var(--dim)}
.est-historial i{font-style:normal;font-size:11px;font-weight:700;padding:1px 6px;border-radius:999px;background:var(--bg-surface);color:var(--muted)}
.est-hola{display:flex;align-items:flex-end;justify-content:center;gap:12px}
.est-ds{flex:0 0 auto;width:64px;height:64px;color:var(--text);margin-bottom:-4px}
.est-ds .darsito{width:100%;height:100%}
.est-ds .darsito [fill="#fff"]{fill:currentColor}
.est-ds .darsito [fill="#000"]{fill:var(--bg)}
@media(max-width:560px){.est-ds{width:44px;height:41px}}
/* ── Cartera de créditos (1-oct-2026) ───────────────────────────────── */
.cps-cab-marca{display:flex;align-items:center;gap:8px}
.crd-chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--text);font:inherit;font-size:13px;cursor:pointer;transition:background .15s,border-color .15s}
.crd-chip:hover{background:var(--bg-surface);border-color:var(--dimmer)}
.crd-chip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}
.crd-chip-n{font-weight:700;font-variant-numeric:tabular-nums}
.crd-chip-u{color:var(--muted)}
/* Celular (27-oct): el chip de créditos sin la palabra «créditos», para que el título de la pantalla no se corte. */
@media(max-width:480px){.crd-chip-u{display:none}.crd-chip{padding:0 10px}}
.arranque{justify-content:center}
@media(max-width:720px){.arranque{justify-content:flex-start;padding-top:20px!important}}
.crd-chip.vacio{border-color:rgba(239,68,68,.45);color:#ef4444}
.crd-chip.vacio .crd-chip-u{color:inherit}
@media(max-width:720px){.crd-chip-u{display:none}}
.crd-fondo{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px}
/* Va por portal a , fuera del contenedor que define los tokens del
tema: por eso los declara aquí (oscuro) y el claro los voltea. */
.crd-caja{--text:rgba(255,255,255,.94);--muted:rgba(255,255,255,.6);--dim:rgba(255,255,255,.45);--dimmer:rgba(255,255,255,.3);--border:rgba(255,255,255,.1);--card:rgba(255,255,255,.04);--bg-surface:rgba(255,255,255,.06);
background:#111214;color:var(--text);border:1px solid var(--border);border-radius:20px;width:100%;max-width:620px;max-height:calc(100dvh - 32px);overflow-y:auto;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
:root[data-theme="light"] .crd-caja{--text:rgba(16,24,40,.95);--muted:rgba(16,24,40,.6);--dim:rgba(16,24,40,.45);--dimmer:rgba(16,24,40,.3);--border:rgba(16,24,40,.1);--card:rgba(16,24,40,.03);--bg-surface:rgba(16,24,40,.04);background:#fff}
.crd-cab{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px}
.crd-cab>div{flex:1}
.crd-cab h2{margin:0 0 4px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.crd-cab p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
.crd-x{flex:0 0 auto;width:34px;height:34px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text);display:grid;place-items:center;cursor:pointer}
.crd-aviso{padding:10px 12px;border-radius:12px;background:rgba(34,197,94,.12);color:var(--text);font-size:13.5px;margin-bottom:14px}
.crd-aviso.mal{background:rgba(239,68,68,.12)}
.crd-link{background:none;border:0;padding:0;color:#3b82f6;font:inherit;cursor:pointer;text-decoration:underline}
.crd-cargando{color:var(--muted);font-size:14px;padding:24px 0;text-align:center}
.crd-bolsas{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.crd-bolsas{grid-template-columns:1fr}}
.crd-bolsa{border:1px solid var(--border);border-radius:16px;padding:16px;background:var(--card)}
.crd-bolsa.pronto{opacity:.72}
.crd-bolsa-cab{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);flex-wrap:wrap}
.crd-pill{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--bg-surface);border:1px solid var(--border);color:var(--muted)}
.crd-num{font-size:34px;font-weight:800;letter-spacing:-.03em;margin:8px 0 12px;font-variant-numeric:tabular-nums}
.crd-num span{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}
.crd-filas{display:flex;flex-direction:column;gap:6px}
.crd-fila{display:flex;justify-content:space-between;gap:12px;font-size:13.5px}
.crd-fila span{color:var(--muted)}
.crd-fila b{font-variant-numeric:tabular-nums}
.crd-barra{height:6px;border-radius:99px;background:var(--bg-surface);border:1px solid var(--border);overflow:hidden}
.crd-barra i{display:block;height:100%;background:#3b82f6;border-radius:99px}
.crd-nota{font-size:12px;color:var(--dim);margin:0 0 6px}
.crd-sub{font-size:14px;font-weight:700;margin:22px 0 10px}
.crd-paqs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:560px){.crd-paqs{grid-template-columns:1fr}}
.crd-paq{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px;border-radius:14px;border:1px solid var(--border);background:var(--card);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.crd-paq:hover:not(:disabled){border-color:#3b82f6;background:rgba(59,130,246,.06)}
.crd-paq:disabled{cursor:not-allowed;opacity:.6}
.crd-paq-n{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.crd-paq-n small,.crd-paq-p small{font-size:12px;font-weight:500;color:var(--muted)}
.crd-paq-p{font-size:15px;font-weight:700}
.crd-paq-u{font-size:12px;color:var(--dim)}
.crd-pie{font-size:12.5px;color:var(--muted);margin:12px 0 0}
.crd-hist .crd-fila{padding:6px 0;border-top:1px solid var(--border)}
/* ── Ajustes del copiloto (1-oct-2026) ──────────────────────────────
Como los Ajustes de Shopify: lista de secciones a la izquierda, una
sección a la vez a la derecha. En el teléfono la lista es una tira
arriba que se desliza de lado. */
.cfg-nav-op:focus-visible,.cfg-btn:focus-visible,.cfg-switch:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}
.cfg-h2{margin:0 0 2px;font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.cfg-tarjeta{border:1px solid var(--border);border-radius:14px;background:var(--bg-card);padding:20px;display:flex;flex-direction:column;gap:12px}
.cfg-tarjeta h3{margin:0;font-size:15px;font-weight:700;color:var(--text)}
.cfg-sub{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.cfg-pie{margin:0;font-size:12.5px;color:var(--dim)}
.cfg-nota{font-size:13px;line-height:1.5;padding:10px 12px;border-radius:10px;background:var(--bg-surface);border:1px solid var(--border);color:var(--muted)}
.cfg-ok,.cfg-mal{margin:0;padding:10px 12px;border-radius:10px;font-size:13.5px;color:var(--text)}
.cfg-ok{background:rgba(34,197,94,.12)}
.cfg-mal{background:rgba(239,68,68,.12)}
.cfg-campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.cfg-etq{font-size:12.5px;font-weight:600;color:var(--muted)}
.cfg-in{width:100%;box-sizing:border-box;height:38px;padding:0 11px;border-radius:9px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit;font-size:14px}
select.cfg-in{padding-right:28px}
.cfg-in:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.18)}
.cfg-in[disabled]{opacity:.7;cursor:not-allowed}
.cfg-mayus{text-transform:uppercase;letter-spacing:.04em}
.cfg-campo.mal .cfg-in{border-color:#ef4444}
.cfg-err{font-size:12.5px;color:#ef4444}
.cfg-ayuda{font-size:12px;color:var(--dim)}
.cfg-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cfg-rejilla .cfg-campo:first-child{grid-column:1/-1}
.cfg-acciones{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.cfg-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:9px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,opacity .15s}
.cfg-btn:hover:not(:disabled){background:var(--bg-surface)}
.cfg-btn.pri{background:var(--text);color:var(--bg-card);border-color:var(--text)}
.cfg-btn.pri:hover:not(:disabled){background:var(--text);opacity:.88}
.cfg-btn.peligro{background:#dc2626;border-color:#dc2626;color:#fff}
.cfg-btn.peligro:hover:not(:disabled){background:#b91c1c}
.cfg-btn.peligro-suave{background:transparent;color:#ef4444;border-color:rgba(239,68,68,.4)}
.cfg-btn.peligro-suave:hover:not(:disabled){background:rgba(239,68,68,.08)}
.cfg-btn.chico{height:30px;padding:0 10px;font-size:12.5px}
.cfg-btn:disabled{opacity:.5;cursor:not-allowed}
.cfg-plan-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cfg-plan-n{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--text);margin-top:2px}
.cfg-plan-p{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.cfg-pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--bg-surface);color:var(--muted);border:1px solid var(--border)}
.cfg-pill.ok{background:rgba(34,197,94,.12);color:#15803d;border-color:rgba(34,197,94,.3)}
.cfg-pill.aviso{background:rgba(245,158,11,.12);color:#b45309;border-color:rgba(245,158,11,.3)}
.cfg-pill.mal{background:rgba(239,68,68,.12);color:#b91c1c;border-color:rgba(239,68,68,.3)}
:root:not([data-theme="light"]) .cfg-pill.ok{color:#4ade80}
:root:not([data-theme="light"]) .cfg-pill.aviso{color:#fbbf24}
:root:not([data-theme="light"]) .cfg-pill.mal{color:#f87171}
.cfg-fila-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cfg-con{display:flex;align-items:flex-start;gap:12px;color:var(--text);min-width:0}
.cfg-con svg{flex:0 0 auto;margin-top:2px}
.cfg-con h3{margin-bottom:2px}
.cfg-tabla{display:flex;flex-direction:column;font-size:13.5px}
.cfg-tr{display:grid;grid-template-columns:1.2fr 1fr auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--border);color:var(--muted)}
.cfg-tr b{color:var(--text);font-variant-numeric:tabular-nums;text-align:right}
.cfg-th{border-top:0;padding-top:0;font-size:12px;font-weight:600;color:var(--dim)}
.cfg-th span:last-child{text-align:right}
.cfg-avisos .cfg-tr{grid-template-columns:minmax(0,1fr) 84px 84px}
.cfg-avisos .cfg-tr>span:not(:first-child){display:flex;justify-content:center}
.cfg-avisos .cfg-th span:not(:first-child){text-align:center}
.cfg-aviso-t{display:flex;flex-direction:column;gap:2px}
.cfg-aviso-t b{font-weight:600;color:var(--text);text-align:left}
.cfg-aviso-t small{font-size:12px;color:var(--dim)}
.cfg-switch{position:relative;width:38px;height:22px;border-radius:999px;border:1px solid var(--border);background:var(--bg-surface);cursor:pointer;padding:0;transition:background .15s}
.cfg-switch i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:transform .15s,background .15s}
.cfg-switch.on{background:#2563eb;border-color:#2563eb}
.cfg-switch.on i{transform:translateX(16px);background:#fff}
.cfg-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cfg-lista li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--border);font-size:13.5px;color:var(--text)}
.cfg-lista li>span:first-child{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis}
.cfg-lista small{font-size:12px;color:var(--dim)}
.cfg-invita{display:flex;gap:10px}
.cfg-invita .cfg-in{flex:1}
.cfg-confirma{max-width:440px}
.cfg-confirma h2{margin:0 0 8px;font-size:18px;font-weight:800}
.cfg-confirma p{margin:0 0 18px;font-size:14px;line-height:1.55;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.cfg-switch,.cfg-switch i,.cfg-btn,.cfg-nav-op{transition:none}}
@media(max-width:820px){
.cfg-rejilla{grid-template-columns:1fr}
.cfg-tarjeta{padding:16px}
.cfg-acciones .cfg-btn{flex:1;justify-content:center}
.cfg-avisos .cfg-tr{grid-template-columns:minmax(0,1fr) 56px 64px}
.cfg-invita{flex-direction:column}
}
/* ── Ajustes estilo «Personal profile» (1-oct-2026) ───────────────────
Columna angosta PEGADA a la izquierda y contenido ancho que usa el
espacio (máx. ~1000px), nada centrado con huecos. */
.cop.sitio .cop-col.cop-col-cfg{padding:0}
.cfg{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100%;align-items:stretch}
.cfg-lado{position:sticky;top:0;align-self:start;height:100dvh;max-height:100%;display:flex;flex-direction:column;gap:6px;padding:22px 14px 16px;border-right:1px solid var(--border);box-sizing:border-box}
.cfg-espacio{font-size:12.5px;font-weight:600;color:var(--dim);padding:0 10px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfg-nav{display:flex;flex-direction:column;gap:2px}
.cfg-nav-op{display:flex;align-items:center;gap:11px;width:100%;height:42px;padding:0 10px;border-radius:10px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer;transition:background .15s,color .15s}
.cfg-nav-op:hover{background:var(--bg-surface);color:var(--text)}
.cfg-nav-op.on{background:var(--bg-surface);color:var(--text)}
.cfg-nav-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfg-cuad{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff}
.cfg-cuad.grande{width:40px;height:40px;border-radius:11px}
.c-azul{background:linear-gradient(140deg,#60a5fa,#2563eb)}
.c-violeta{background:linear-gradient(140deg,#c084fc,#7c3aed)}
.c-verde{background:linear-gradient(140deg,#4ade80,#16a34a)}
.c-ambar{background:linear-gradient(140deg,#fcd34d,#d97706)}
.c-cian{background:linear-gradient(140deg,#67e8f9,#0891b2)}
.c-rosa{background:linear-gradient(140deg,#f9a8d4,#db2777)}
.c-naranja{background:linear-gradient(140deg,#fdba74,#ea580c)}
.cfg-lado-pie{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.cfg-ayuda-t{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:16px 14px 14px;border:1px solid var(--border);border-radius:14px;background:var(--card)}
.cfg-ayuda-t b{font-size:14px;color:var(--text)}
.cfg-ayuda-t span{font-size:12.5px;line-height:1.45;color:var(--muted)}
.cfg-ayuda-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--bg-surface);color:var(--text);margin-bottom:4px}
.cfg-ayuda-t .cfg-btn{margin-top:8px;width:100%;justify-content:center}
.cfg-salir{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.cfg-salir:hover{background:var(--bg-surface);color:var(--text)}
.cfg-der{min-width:0;padding:0 clamp(16px,3vw,40px) 48px}
.cfg-tope{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px;max-width:1000px;border-bottom:1px solid var(--border);margin-bottom:24px}
.cfg-miga{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--dim)}
.cfg-miga b{color:var(--text);font-weight:600}
.cfg-panel{display:flex;flex-direction:column;gap:16px;min-width:0;max-width:1000px}
.cfg-btn.blanco{background:#fff;color:#0b0d12;border-color:#fff}
.cfg-btn.blanco:hover:not(:disabled){background:#e9ebef}
:root[data-theme="light"] .cfg-btn.blanco{background:#0b0d12;color:#fff;border-color:#0b0d12}
:root[data-theme="light"] .cfg-btn.blanco:hover:not(:disabled){background:#23262e}
.cfg-btn.grande{height:44px;padding:0 20px;font-size:14.5px;border-radius:11px}
.cfg-link{background:none;border:0;padding:0;font:inherit;font-size:13px;font-weight:600;color:var(--text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cfg-perfil{display:flex;align-items:center;gap:22px;padding:4px 0 8px}
.cfg-perfil-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.cfg-perfil-n{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cfg-perfil-n h2{margin:0;font-size:30px;font-weight:800;letter-spacing:-.025em;color:var(--text)}
.cfg-perfil-c{font-size:14.5px;color:var(--muted)}
.cfg-editar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cfg-editar .cfg-in{width:260px;max-width:100%;height:40px;font-size:16px}
.cfg-dos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cfg-kpi{min-height:168px;justify-content:space-between;border-radius:18px;background:var(--card)}
.cfg-kpi-cab{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cfg-kpi-t{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--muted)}
.cfg-kpi-total{font-size:22px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.cfg-kpi-pie{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cfg-kpi-n{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.cfg-kpi-n span{font-size:16px;font-weight:600;color:var(--text)}
.cfg-kpi-s{font-size:13px;color:var(--muted);margin-top:2px}
.cfg-graf{display:flex;flex-direction:column;gap:8px}
.cfg-graf-barras{height:var(--alto);display:flex;align-items:flex-end;gap:3px}
.cfg-graf-b{flex:1;min-width:2px;border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,#60a5fa,#2563eb)}
.cfg-graf-b.cero{height:4px;max-width:4px;margin:0 auto;border-radius:50%;background:var(--dimmer);flex:1 1 0}
.cfg-graf-fechas{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.cfg-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cfg-stat{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--card)}
.cfg-stat b{display:block;font-size:20px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.cfg-stat span{font-size:12.5px;color:var(--muted)}
.cfg-fila-accion{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}
.cfg-vacio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:40px 16px;color:var(--muted)}
.cfg-vacio.chico{padding:20px 12px}
.cfg-vacio b{font-size:15px;color:var(--text)}
.cfg-vacio span{font-size:13px;max-width:360px;line-height:1.5}
.cfg-vacio .cfg-btn{margin-top:8px}
.cfg-tr.dos{grid-template-columns:1fr auto}
.cfg-banner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 28px;border-radius:20px;border:1px solid rgba(139,92,246,.35);
background:radial-gradient(120% 140% at 0% 0%,rgba(59,130,246,.28),transparent 55%),radial-gradient(120% 140% at 100% 100%,rgba(139,92,246,.30),transparent 55%),#121318;color:#fff}
.cfg-banner h3{margin:2px 0 6px;font-size:24px;font-weight:800;letter-spacing:-.02em;color:#fff}
.cfg-banner p{margin:0;font-size:14px;color:rgba(255,255,255,.72);max-width:520px;line-height:1.5}
.cfg-banner-e{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.cfg-banner .cfg-btn.blanco{background:#fff;color:#0b0d12;border-color:#fff}
@media(max-width:900px){
.cfg{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start}
.cfg-lado{min-width:0}
.cfg-lado{position:static;height:auto;border-right:0;border-bottom:1px solid var(--border);padding:14px 16px 10px}
.cfg-nav{flex-direction:row;overflow-x:auto;gap:6px;scrollbar-width:none;padding-bottom:4px}
.cfg-nav::-webkit-scrollbar{display:none}
.cfg-nav-op{width:auto;flex:0 0 auto;height:38px;padding:0 12px 0 6px;border:1px solid var(--border);border-radius:999px}
.cfg-lado-pie{display:none}
.cfg-der{padding:0 16px 40px}
.cfg-tope{height:auto;padding:12px 0;flex-wrap:wrap}
.cfg-dos,.cfg-stats{grid-template-columns:1fr}
.cfg-perfil{gap:14px}
.cfg-perfil>:first-child{width:64px!important;height:64px!important}
.cfg-perfil-n h2{font-size:22px}
.cfg-fila-accion,.cfg-banner{flex-direction:column;align-items:flex-start}
}
/* ── Menú de la cuenta en el copiloto ─────────────────────────────────── */
.mc[role="menu"]{position:absolute;left:0;bottom:calc(100% + 10px);width:300px;z-index:60;padding:8px;border-radius:16px;border:1px solid var(--border);background:var(--bg-card);box-shadow:0 18px 50px rgba(0,0,0,.35);color:var(--text)}
:root:not([data-theme="light"]) .mc[role="menu"]{background:#16171b}
.mc-yo{display:flex;align-items:center;gap:11px;padding:8px 8px 12px}
.mc-yo>div{min-width:0;display:flex;flex-direction:column}
.mc-yo b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-yo span{font-size:12.5px;color:var(--muted)}
.mc-caja{border-radius:12px;background:var(--bg-surface);border:1px solid var(--border);padding:10px 12px;margin-bottom:6px}
.mc-cred{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:none;padding:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer}
.mc-cred-n{display:flex;align-items:center;gap:2px;color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
.mc-puntos{display:flex;gap:3px;margin:10px 0 12px}
.mc-puntos i{flex:1;height:6px;border-radius:99px;background:var(--dimmer);opacity:.45}
.mc-puntos i.on{background:linear-gradient(90deg,#60a5fa,#3b82f6);opacity:1}
.mc-mejora{display:flex;align-items:center;gap:9px;padding-top:10px;border-top:1px solid var(--border);font-size:13.5px;font-weight:600}
.mc-mejora span{flex:1}
.mc-mejora svg{color:#a78bfa}
.mc-mejorar{height:28px;padding:0 12px;border-radius:999px;border:0;background:linear-gradient(135deg,#3b82f6,#7c3aed);color:#fff;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.mc-op{display:flex;align-items:center;gap:12px;width:100%;height:44px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit;font-size:14px;font-weight:500;text-align:left;cursor:pointer}
.mc-op svg{color:var(--muted)}
.mc-op span{flex:1}
.mc-op em{font-style:normal;font-size:12.5px;color:var(--dim)}
.mc-op:hover{background:var(--bg-surface)}
.mc-op:focus-visible,.mc-mejorar:focus-visible,.mc-cred:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}
.mc-sep{height:1px;background:var(--border);margin:6px 4px}
/* ── Planes a pantalla completa ──────────────────────────────────────────
Va por portal a : declara sus tokens (oscuro) y el claro los voltea. */
.pm-fondo{--text:#f4f5f7;--muted:rgba(255,255,255,.62);--dim:rgba(255,255,255,.45);--border:rgba(255,255,255,.1);--caja:rgba(255,255,255,.05);
--g0:rgba(255,255,255,.06);--g1:rgba(59,130,246,.22);--g2:rgba(168,85,247,.24);
position:fixed;inset:0;z-index:1100;overflow-y:auto;background:#0b0c0f;color:var(--text);font-family:Inter,system-ui,sans-serif}
:root[data-theme="light"] .pm-fondo{--text:#0f1218;--muted:rgba(15,18,24,.62);--dim:rgba(15,18,24,.45);--border:rgba(15,18,24,.1);--caja:rgba(15,18,24,.04);
--g0:rgba(15,18,24,.04);--g1:rgba(59,130,246,.13);--g2:rgba(168,85,247,.13);background:#f5f6f8}
.pm-x{position:fixed;top:20px;right:22px;z-index:2;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--border);background:var(--caja);color:var(--text);display:grid;place-items:center;cursor:pointer}
.pm-x:hover{border-color:var(--muted)}
.pm-cont{max-width:1180px;margin:0 auto;padding:56px 20px 64px;display:flex;flex-direction:column;align-items:center}
.pm-titulo{margin:0;font-family:Anton,"Archivo Narrow",Impact,sans-serif;font-weight:400;font-size:clamp(36px,6vw,68px);line-height:1.02;letter-spacing:.01em;text-transform:uppercase;text-align:center;text-wrap:balance}
.pm-sub{margin:12px 0 0;font-size:16px;color:var(--muted);text-align:center;max-width:620px;line-height:1.5}
.pm-periodo{display:flex;align-items:center;gap:4px;margin:26px 0 30px;padding:5px;border:1px solid var(--border);border-radius:14px;background:var(--caja)}
.pm-periodo button{height:36px;padding:0 16px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.pm-periodo button.on{background:var(--text);color:#0b0c0f}
:root[data-theme="light"] .pm-periodo button.on{color:#fff}
.pm-periodo .pm-dto{margin:0 6px 0 4px}
.pm-dto{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:#e11d48;color:#fff;font-size:12px;font-weight:800;font-style:italic;white-space:nowrap}
.pm-error{margin:0 0 16px;padding:10px 14px;border-radius:10px;background:rgba(239,68,68,.14);font-size:14px}
.pm-planes{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.pm-pl{position:relative;display:flex;flex-direction:column;gap:14px;padding:22px 18px 18px;border-radius:22px;border:1px solid var(--border);background:linear-gradient(180deg,var(--g0),transparent 60%)}
.pm-pl-1{background:linear-gradient(180deg,var(--g1),transparent 65%);border-color:rgba(59,130,246,.45);box-shadow:0 0 0 1px rgba(59,130,246,.18),0 24px 60px rgba(37,99,235,.18)}
.pm-pl-2{background:linear-gradient(180deg,var(--g2),transparent 65%);border-color:rgba(168,85,247,.38)}
.pm-pl-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pm-pl-cab h3{margin:0;font-family:Anton,"Archivo Narrow",Impact,sans-serif;font-weight:400;font-size:30px;letter-spacing:.01em;text-transform:uppercase;line-height:1}
.pm-ins{position:absolute;top:22px;right:18px;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:#2563eb;color:#fff;font-size:11.5px;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.02em}
.pm-ins.tuyo{background:#16a34a}
.pm-para{margin:-8px 0 0;font-size:14px;color:var(--muted)}
.pm-caja{min-height:168px;box-sizing:border-box;display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:16px;background:var(--caja);border:1px solid var(--border)}
.pm-cr{display:flex;align-items:center;gap:9px;font-size:17px}
.pm-cr b{font-weight:700}
.pm-eq{padding-left:25px;font-size:13.5px;color:var(--muted)}
.pm-fijo{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;height:42px;border-radius:12px;border:1px solid var(--border);font-size:13.5px;color:var(--muted)}
.pm-desl{margin-top:auto;padding-top:8px}
.pm-desl-riel{position:relative;height:4px;border-radius:99px;background:var(--border);margin:0 8px}
.pm-desl-riel i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#a855f7,#ec4899)}
.pm-desl-riel i::after{content:"";position:absolute;right:-9px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.pm-desl-ops{display:flex;justify-content:space-between;margin-top:14px}
.pm-desl-ops button{display:flex;align-items:center;gap:5px;height:30px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums}
.pm-desl-ops button.on{color:var(--text);background:var(--caja)}
.pm-precio{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:4px}
.pm-precio s{font-size:24px;font-weight:800;color:#f43f5e;text-decoration-thickness:2px}
.pm-precio b{font-size:40px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pm-precio span{font-size:14px;color:var(--muted)}
.pm-btn{height:54px;border-radius:14px;border:0;font:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:transform .12s,filter .15s}
.pm-btn:hover:not(:disabled){filter:brightness(1.06)}
.pm-btn:active:not(:disabled){transform:translateY(1px)}
.pm-btn:disabled{cursor:not-allowed;opacity:.55}
.pm-btn:focus-visible,.pm-periodo button:focus-visible,.pm-desl-ops button:focus-visible,.pm-x:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}
.pm-btn-0{background:#fff;color:#0b0c0f;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
:root[data-theme="light"] .pm-btn-0{background:#0f1218;color:#fff}
.pm-btn-1{background:#2563eb;color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.pm-btn-2{background:linear-gradient(90deg,#a855f7,#ec4899);color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.pm-ahorro{margin-top:-4px;padding:10px 12px;border-radius:12px;background:var(--caja);font-size:13px;color:var(--muted);text-align:center;line-height:1.45}
.pm-ahorro b{color:var(--text)}
.pm-incluye{list-style:none;margin:2px 0 0;padding:6px 14px;border-radius:16px;border:1px solid var(--border);background:var(--caja)}
.pm-incluye li{display:flex;align-items:center;gap:10px;min-height:42px;font-size:14px;border-top:1px solid var(--border)}
.pm-incluye li span{flex:1}
.pm-incluye li.no{color:var(--dim)}
.pm-incluye .pm-inc-cab{border-top:0;font-family:Anton,"Archivo Narrow",Impact,sans-serif;text-transform:uppercase;font-size:15px;letter-spacing:.02em}
.pm-chip{font-style:normal;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:6px;background:#2563eb;color:#fff}
.pm-pl-2 .pm-chip{background:linear-gradient(90deg,#a855f7,#ec4899)}
.pm-chip.gris{background:var(--border);color:var(--muted)}
.pm-pie{margin:26px 0 0;font-size:13px;color:var(--dim);text-align:center}
@media(max-width:900px){.pm-planes{grid-template-columns:1fr;max-width:460px}.pm-cont{padding-top:72px}}
@media (prefers-reduced-motion:reduce){.pm-btn,.cfg-nav-op,.mc-op{transition:none}}
/* Cartera en créditos (planes, 1-oct-2026) */
.crd-saldo{padding:4px 0 14px}
.crd-saldo .crd-num{margin:0}
.crd-alcanza{font-size:13.5px;color:var(--muted)}
.crd-plan{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;padding:14px 16px;border-radius:14px;border:1px solid rgba(139,92,246,.35);background:linear-gradient(120deg,rgba(59,130,246,.12),rgba(139,92,246,.12))}
.crd-plan>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.crd-plan b{font-size:14px}
.crd-plan span{font-size:12.5px;color:var(--muted);line-height:1.4}
.crd-btn-plan{flex:0 0 auto;height:34px;padding:0 14px;border-radius:999px;border:0;background:linear-gradient(135deg,#3b82f6,#7c3aed);color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.crd-btn-plan:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}
.crd-bolsa{display:flex;flex-direction:column;gap:8px}
.crd-bolsa .crd-nota{margin:0}
/* ══ PULIDO «NIVEL HIGGSFIELD» (1-oct-2026) ════════════════════════════
Daniel: «se sigue viendo un poco hechizo… ya es más tema del CSS».
Solo sobrescribe; la estructura y los textos no cambian. El sistema:
· Se separa por SUPERFICIE, no por borde: la tarjeta exterior lleva un
tono sobre la página, borde 1px muy tenue y un brillo interno arriba;
lo de adentro NO lleva borde, solo un tono más.
· Radios 24 tarjeta / 16 caja interna / 12 botón / 999 píldora.
· Espaciado en múltiplos de 4. Pesos: 500 cuerpo, 600 etiquetas y
botones, 800 solo números grandes.
· Botones con «labio» inferior (la sombra interna de abajo) que se
hunde al apretar. */
:root{
--ps-pag:#0b0c0f;
--ps-card:rgba(255,255,255,.035);
--ps-in:rgba(255,255,255,.04);
--ps-in2:rgba(255,255,255,.07);
--ps-line:rgba(255,255,255,.07);
--ps-hi:inset 0 1px 0 rgba(255,255,255,.06);
--ps-sh:0 1px 0 rgba(0,0,0,.25);
--ps-flota:0 24px 60px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
--ps-acc:59,130,246; --ps-acc2:168,85,247;
--ps-labio:inset 0 -3px 0 rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.08);
--ps-ruido:url("data:image/svg+xml;utf8,");
}
:root[data-theme="light"]{
--ps-pag:#f5f6f8;
--ps-card:#ffffff;
--ps-in:rgba(16,24,40,.035);
--ps-in2:rgba(16,24,40,.06);
--ps-line:rgba(16,24,40,.08);
--ps-hi:inset 0 1px 0 rgba(255,255,255,.9);
--ps-sh:0 1px 2px rgba(16,24,40,.06),0 8px 24px -8px rgba(16,24,40,.12);
--ps-flota:0 24px 60px -16px rgba(16,24,40,.28),0 0 0 1px rgba(16,24,40,.08);
--ps-labio:inset 0 -3px 0 rgba(0,0,0,.18),0 1px 2px rgba(16,24,40,.12);
}
/* ── PLANES ─────────────────────────────────────────────────────────── */
.pm-fondo{background:
radial-gradient(40% 35% at 30% 45%,rgba(var(--ps-acc),.10),transparent 70%),
radial-gradient(40% 35% at 72% 50%,rgba(var(--ps-acc2),.10),transparent 70%),
var(--ps-pag)}
.pm-fondo::before{content:"";position:fixed;inset:0;pointer-events:none;background:var(--ps-ruido);opacity:.025;mix-blend-mode:overlay}
:root[data-theme="light"] .pm-fondo::before{opacity:.04;mix-blend-mode:multiply}
.pm-cont{position:relative;min-height:100dvh;box-sizing:border-box;justify-content:center;padding:64px 24px 48px}
.pm-titulo{font-size:clamp(40px,6.2vw,76px);letter-spacing:.012em}
.pm-sub{max-width:640px;font-size:15.5px;font-weight:500;text-wrap:balance}
.pm-x{width:44px;height:44px;border:1px solid var(--ps-line);background:var(--ps-card);box-shadow:var(--ps-hi);transition:background .15s,transform .15s}
.pm-x:hover{background:var(--ps-in2)}
/* El interruptor: una píldora que se desliza detrás del botón elegido. */
.pm-periodo{position:relative;gap:0;margin:28px 0 36px;padding:4px;border-radius:999px;border:1px solid var(--ps-line);background:var(--ps-card);box-shadow:var(--ps-hi)}
.pm-periodo button{position:relative;z-index:1;width:104px;height:38px;padding:0;border-radius:999px;font-weight:600;transition:color .2s}
.pm-periodo button.on{background:transparent;color:#0b0c0f}
:root[data-theme="light"] .pm-periodo button.on{color:#fff}
.pm-periodo::before{content:"";position:absolute;top:4px;left:4px;width:104px;height:38px;border-radius:999px;background:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.25);transition:transform .22s cubic-bezier(.3,.7,.4,1)}
.pm-periodo:has(button:nth-child(2).on)::before{transform:translateX(104px)}
.pm-periodo .pm-dto{margin:0 6px 0 10px}
.pm-dto,.pm-ins{height:22px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:700;font-style:normal;letter-spacing:.02em}
.pm-dto{background:linear-gradient(90deg,#f43f5e,#e11d48);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.pm-planes{gap:24px;align-items:stretch}
.pm-pl{gap:16px;padding:28px 24px 24px;border-radius:24px;border:1px solid var(--ps-line);
background:radial-gradient(120% 60% at 50% 0%,rgba(255,255,255,.05),transparent 60%),var(--ps-card);
box-shadow:var(--ps-hi),var(--ps-sh);transition:transform .18s ease,box-shadow .18s ease}
.pm-pl:hover{transform:translateY(-2px)}
.pm-pl-1{border-color:transparent;
background:
radial-gradient(120% 60% at 50% 0%,rgba(var(--ps-acc),.18),transparent 60%) padding-box,
linear-gradient(var(--ps-pag),var(--ps-pag)) padding-box,
linear-gradient(180deg,rgba(var(--ps-acc),.85),rgba(var(--ps-acc),.15) 55%,rgba(var(--ps-acc),.35)) border-box;
box-shadow:var(--ps-hi),0 30px 80px -20px rgba(var(--ps-acc),.35)}
.pm-pl-2{border-color:rgba(var(--ps-acc2),.22);
background:radial-gradient(120% 60% at 50% 0%,rgba(var(--ps-acc2),.18),transparent 60%),var(--ps-card)}
:root[data-theme="light"] .pm-pl-1{background:
radial-gradient(120% 60% at 50% 0%,rgba(var(--ps-acc),.10),transparent 60%) padding-box,
linear-gradient(#fff,#fff) padding-box,
linear-gradient(180deg,rgba(var(--ps-acc),.7),rgba(var(--ps-acc),.15) 55%,rgba(var(--ps-acc),.3)) border-box;
box-shadow:0 30px 70px -24px rgba(var(--ps-acc),.30)}
:root[data-theme="light"] .pm-pl-2{background:radial-gradient(120% 60% at 50% 0%,rgba(var(--ps-acc2),.10),transparent 60%),#fff}
.pm-pl-cab h3{font-size:40px;letter-spacing:.015em}
.pm-ins{top:30px;right:24px;background:rgb(var(--ps-acc));text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.pm-para{margin:-10px 0 0;font-weight:500}
.pm-caja{min-height:176px;gap:4px;padding:18px;border:0;border-radius:16px;background:var(--ps-in)}
.pm-cr{font-size:17px;font-weight:600;margin-bottom:4px}
.pm-cr b{font-weight:600}
.pm-eq{font-weight:500;line-height:1.55}
.pm-fijo{height:40px;border:0;border-radius:12px;background:var(--ps-in2);font-weight:500}
.pm-desl-riel{height:3px;background:var(--ps-in2)}
.pm-desl-ops button.on{background:var(--ps-in2)}
/* Precio: el «MXN al mes» va EN LÍNEA con la cifra, a su base. */
.pm-precio{flex-wrap:nowrap;align-items:baseline;gap:8px;margin-top:4px;min-height:52px}
.pm-precio s{font-size:20px;font-weight:700;letter-spacing:-.02em;color:#f43f5e;white-space:nowrap;font-variant-numeric:tabular-nums}
.pm-precio b{font-size:42px;letter-spacing:-.035em;line-height:1;white-space:nowrap}
.pm-precio span{flex:0 1 auto;max-width:7.2em;min-width:0;font-size:12.5px;font-weight:500;line-height:1.3}
.pm-btn{height:52px;border-radius:12px;font-weight:600;letter-spacing:.005em;box-shadow:var(--ps-labio);transition:transform .12s,filter .15s,box-shadow .12s}
.pm-btn:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 -1px 0 rgba(0,0,0,.22)}
.pm-btn-1{background:linear-gradient(180deg,#3b82f6,#2563eb)}
.pm-btn-0,.pm-btn-1,.pm-btn-2{box-shadow:var(--ps-labio)}
.pm-ahorro{margin-top:-6px;padding:10px 12px;border-radius:12px;background:transparent;font-weight:500}
.pm-incluye{margin:0;padding:4px 18px 6px;border:0;border-radius:16px;background:var(--ps-in)}
.pm-incluye li{min-height:44px;font-weight:500;border-top-color:var(--ps-line)}
.pm-incluye .pm-inc-cab{font-size:16px;letter-spacing:.04em}
.pm-chip{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:600}
.pm-chip.gris{background:var(--ps-in2);color:var(--muted)}
.pm-pie{margin-top:32px}
/* ── AJUSTES ────────────────────────────────────────────────────────── */
.cfg-lado{gap:4px;padding:24px 12px 16px;border-right-color:var(--ps-line)}
.cfg-espacio{font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:0 10px 12px}
.cfg-nav-op{height:40px;gap:12px;font-weight:500;border-radius:10px}
.cfg-nav-op.on{background:var(--ps-in2);color:var(--text);font-weight:600;box-shadow:var(--ps-hi)}
.cfg-cuad{width:28px;height:28px;border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.25)}
.cfg-cuad.grande{width:36px;height:36px;border-radius:10px}
.cfg-ayuda-t{border:0;border-radius:16px;background:var(--ps-in);padding:18px 16px 16px}
.cfg-der{padding:0 clamp(16px,3.2vw,48px) 56px}
.cfg-tope,.cfg-panel{max-width:1080px}
.cfg-tope{border-bottom-color:var(--ps-line);margin-bottom:32px}
.cfg-panel{gap:20px}
.cfg-tarjeta{border-radius:24px;border:1px solid var(--ps-line);background:var(--ps-card);box-shadow:var(--ps-hi),var(--ps-sh);padding:24px;gap:16px}
.cfg-tarjeta h3{font-weight:600}
.cfg-kpi{min-height:176px;border-radius:24px;background:var(--ps-card)}
.cfg-kpi-t{font-weight:500}
.cfg-kpi-n{font-size:40px;letter-spacing:-.035em;line-height:1}
.cfg-kpi-n span{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0}
.cfg-kpi-s{margin-top:8px;font-weight:500}
/* La tarjeta de créditos: cifra arriba a la izquierda y barra fina debajo. */
.cfg-kpi-cred{justify-content:flex-start}
.cfg-kpi-cred .cfg-kpi-pie{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px;margin-top:4px}
.cfg-kpi-cred .cfg-kpi-pie>div{align-self:start}
.cfg-kpi-cred .cfg-kpi-pie>div::after{content:"";display:block;height:4px;margin-top:16px;border-radius:99px;
background:linear-gradient(90deg,#60a5fa,#3b82f6) 0 0/var(--pct,0%) 100% no-repeat,var(--ps-in2)}
.cfg-graf-barras{gap:4px}
.cfg-graf-b{border-radius:4px 4px 1px 1px;background:linear-gradient(180deg,#60a5fa,rgba(37,99,235,.55))}
.cfg-graf-b.cero{width:4px;height:4px;background:var(--ps-in2)}
.cfg-graf-fechas{font-size:11px}
.cfg-stats{gap:20px}
.cfg-stat{gap:14px;padding:18px 20px;border-radius:20px;border:1px solid var(--ps-line);background:var(--ps-card);box-shadow:var(--ps-hi),var(--ps-sh)}
.cfg-stat b{font-size:22px;letter-spacing:-.02em}
.cfg-stat span{font-weight:500}
.cfg-perfil{gap:24px;padding:0 0 12px}
.cfg-perfil>:first-child{box-shadow:0 0 0 4px var(--ps-pag),0 0 0 5px var(--ps-line),0 10px 30px -10px rgba(0,0,0,.5)}
.cfg-perfil-n h2{font-size:32px;letter-spacing:-.03em}
.cfg-perfil-c{font-weight:500}
.cfg-nota{border:0;background:var(--ps-in);border-radius:12px}
.cfg-in{height:40px;border-radius:10px;border:1px solid var(--ps-line);background:var(--ps-in);font-weight:500}
.cfg-pill{height:22px;padding:0 8px;font-size:11.5px;border:0;background:var(--ps-in2)}
.cfg-tr{border-top-color:var(--ps-line)}
.cfg-lista li{border-top-color:var(--ps-line)}
.cfg-banner{border-radius:24px;padding:28px 32px;border:1px solid rgba(var(--ps-acc2),.28);box-shadow:var(--ps-hi),0 30px 80px -30px rgba(var(--ps-acc2),.35)}
/* Botones de la familia: mismo labio, más chicos. */
.cfg-btn{height:36px;border-radius:12px;border:1px solid var(--ps-line);background:var(--ps-card);box-shadow:var(--ps-hi),0 1px 2px rgba(0,0,0,.12);transition:background .15s,filter .15s,transform .12s}
.cfg-btn:hover:not(:disabled){background:var(--ps-in2)}
.cfg-btn:active:not(:disabled){transform:translateY(1px)}
.cfg-btn.chico{height:32px;border-radius:10px}
.cfg-btn.grande{height:44px;border-radius:12px}
.cfg-btn.blanco,.cfg-btn.pri,.cfg-btn.peligro{border:0;box-shadow:var(--ps-labio)}
.cfg-btn.blanco:hover:not(:disabled),.cfg-btn.pri:hover:not(:disabled){filter:brightness(1.06);opacity:1}
.cfg-btn.blanco:hover:not(:disabled){background:#fff}
:root[data-theme="light"] .cfg-btn.blanco:hover:not(:disabled){background:#0b0d12}
.cfg-btn.pri:hover:not(:disabled){background:var(--text)}
/* ── MENÚ DE LA CUENTA ─────────────────────────────────────────────── */
.mc[role="menu"]{padding:8px;border-radius:20px;border:0;background:#141519;box-shadow:var(--ps-flota),var(--ps-hi)}
:root:not([data-theme="light"]) .mc[role="menu"]{background:#141519}
:root[data-theme="light"] .mc[role="menu"]{background:#fff}
.mc-caja{border:0;border-radius:16px;background:var(--ps-in);padding:12px 14px;margin:0 0 6px}
.mc-cred{font-weight:600}
.mc-puntos{gap:3px;margin:12px 0 14px}
.mc-puntos i{height:4px;opacity:1;background:var(--ps-in2)}
.mc-puntos i.on{background:linear-gradient(90deg,#60a5fa,#8b5cf6)}
.mc-mejora{border-top-color:var(--ps-line);padding-top:12px}
.mc-mejorar{height:28px;padding:0 12px;font-weight:600;box-shadow:inset 0 -2px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2);transition:filter .15s}
.mc-mejorar:hover{filter:brightness(1.08)}
.mc-op{height:40px;font-weight:500;border-radius:10px;transition:background .12s}
.mc-op:hover{background:var(--ps-in2)}
.mc-sep{background:var(--ps-line)}
/* ── CARTERA ───────────────────────────────────────────────────────── */
.crd-fondo{background:rgba(5,6,8,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.crd-caja{border-radius:24px;border:0;padding:28px;box-shadow:var(--ps-flota),var(--ps-hi)}
:root[data-theme="light"] .crd-caja{box-shadow:var(--ps-flota)}
.crd-cab h2{font-size:22px;letter-spacing:-.025em}
.crd-cab p{font-weight:500}
.crd-x{border:0;background:var(--ps-in2);border-radius:999px}
.crd-num{font-size:44px;letter-spacing:-.035em;line-height:1.05}
.crd-num span{font-weight:500}
.crd-bolsa{border:0;border-radius:16px;background:var(--ps-in);padding:18px}
.crd-barra{height:4px;border:0;background:var(--ps-in2)}
.crd-plan{border-radius:16px;padding:16px 18px;border:1px solid rgba(var(--ps-acc2),.25);box-shadow:var(--ps-hi)}
.crd-btn-plan{font-weight:600;box-shadow:inset 0 -2px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2)}
.crd-sub{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:24px 0 12px}
.crd-paqs{gap:12px}
.crd-paq{border:0;border-radius:16px;background:var(--ps-in);padding:16px;gap:4px;box-shadow:var(--ps-hi);transition:background .15s,transform .15s,box-shadow .15s}
.crd-paq:hover:not(:disabled){background:rgba(var(--ps-acc),.10);box-shadow:inset 0 0 0 1px rgba(var(--ps-acc),.5);transform:translateY(-2px)}
.crd-paq-n{font-size:22px;letter-spacing:-.02em}
.crd-hist .crd-fila{border-top-color:var(--ps-line)}
/* ── CHIP DE CRÉDITOS (arriba a la derecha) ─────────────────────────── */
.crd-chip{height:36px;border-radius:999px;border:1px solid var(--ps-line);background:var(--ps-card);box-shadow:var(--ps-hi),var(--ps-sh);font-weight:500}
.crd-chip-n{font-weight:700}
@media(max-width:900px){
.pm-cont{justify-content:flex-start;padding:72px 16px 40px}
.pm-pl{padding:24px 20px 20px}
.pm-pl-cab h3{font-size:34px}
.cfg-tarjeta{padding:20px;border-radius:20px}
.cfg-kpi-n{font-size:34px}
}
@media (prefers-reduced-motion:reduce){
.pm-pl,.pm-periodo::before,.pm-periodo button,.pm-btn,.pm-x,.cfg-btn,.crd-paq,.mc-op,.mc-mejorar{transition:none}
.pm-pl:hover,.crd-paq:hover:not(:disabled){transform:none}
}
/* ══ ESTILO SOBRIO (1-oct-2026, segunda vuelta) ═══════════════════════
Daniel: «más profesional, menos bordes redondeados, menos íconos
genéricos, los logos oficiales de las IA». Sobrescribe la capa de
arriba sin tocar la estructura:
· Radios 12 tarjeta / 8 caja interna, botón e input / 6 chip y
cuadrito / 10 avatar. Nada redondo salvo el control deslizante.
· Tipografía: Inter en todo (fuera Anton). Títulos 700 con tracking
negativo; nombres de plan 600 en mayúsculas con tracking .08em;
etiquetas 11px mayúsculas.
· Un solo acento (el azul del copiloto) para lo destacado; lo demás
neutro. Brillos de fondo a la mitad.
· Logos de las IA (.lia-*) con sus colores oficiales; en la franja
«Potenciado por» van en gris y se encienden al pasar el mouse. */
:root{--ps-r:12px;--ps-r2:8px;--ps-r3:6px}
/* ── logos de las IA ── */
.lia{flex:0 0 auto;display:inline-block;vertical-align:middle}
.lia path{fill:currentColor}
.lia-claude{color:#D97757}
.lia-gemini path{fill:url(#lia-gem)}
.lia-openai{color:var(--text)}
.lia-veo{color:#4285F4}
.lia-gris .lia,.lia-gris .lia-gemini path{color:var(--muted);fill:var(--muted);transition:color .15s,fill .15s}
.lia-gris .pm-pot-i:hover .lia-claude{color:#D97757}
.lia-gris .pm-pot-i:hover .lia-openai{color:var(--text)}
.lia-gris .pm-pot-i:hover .lia-veo{color:#4285F4}
.lia-gris .pm-pot-i:hover .lia-gemini path{fill:url(#lia-gem)}
.lia-gris .pm-pot-i:hover .lia path{fill:currentColor}
.lia-gris .pm-pot-i:hover .lia-gemini path{fill:url(#lia-gem)}
.lia-tabla{display:flex;flex-direction:column}
.lia-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;border-top:1px solid var(--ps-line)}
.lia-fila:first-child{border-top:0}
.lia-mod{display:flex;align-items:center;gap:10px;min-width:0;font-size:14px}
.lia-mod b{font-weight:600;color:var(--text)}
.lia-mod small{font-size:12.5px;color:var(--muted);font-weight:500}
.lia-cr{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
/* ── PLANES ── */
.pm-fondo{background:
radial-gradient(40% 35% at 50% 40%,rgba(var(--ps-acc),.06),transparent 70%),
var(--ps-pag)}
.pm-titulo{font-family:Inter,system-ui,sans-serif;font-weight:700;font-size:44px;letter-spacing:-.035em;line-height:1.1;text-transform:none}
.pm-sub{font-size:15px;color:var(--muted);margin-top:10px}
.pm-potencia{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 22px;margin-top:20px;font-size:12px;font-weight:500;color:var(--muted)}
.pm-potencia>span:first-child{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.pm-pot-i{display:inline-flex;align-items:center;gap:7px;cursor:default}
.pm-pot-i b{font-weight:600;color:var(--muted);transition:color .15s}
.pm-pot-i:hover b{color:var(--text)}
.pm-x{border-radius:var(--ps-r2);width:40px;height:40px}
.pm-periodo{border-radius:var(--ps-r2);margin:24px 0 32px}
.pm-periodo button{border-radius:6px;height:34px}
.pm-periodo::before{border-radius:6px;height:34px}
.pm-dto,.pm-ins{border-radius:var(--ps-r3);height:22px;font-size:11px;letter-spacing:.04em}
.pm-dto{background:rgba(var(--ps-acc),.16);color:#93c5fd;box-shadow:none}
:root[data-theme="light"] .pm-dto{background:rgba(var(--ps-acc),.12);color:#1d4ed8}
.pm-planes{gap:16px}
.pm-pl{border-radius:var(--ps-r);padding:24px;gap:14px;
background:var(--ps-card);box-shadow:var(--ps-hi),var(--ps-sh)}
.pm-pl:hover{transform:none;border-color:rgba(255,255,255,.12)}
:root[data-theme="light"] .pm-pl:hover{border-color:rgba(16,24,40,.16)}
.pm-pl-1{border-radius:var(--ps-r);border:1px solid rgba(var(--ps-acc),.55);
background:radial-gradient(120% 50% at 50% 0%,rgba(var(--ps-acc),.09),transparent 60%),var(--ps-card);
box-shadow:var(--ps-hi),0 24px 60px -28px rgba(var(--ps-acc),.45)}
:root[data-theme="light"] .pm-pl-1{border:1px solid rgba(var(--ps-acc),.5);
background:radial-gradient(120% 50% at 50% 0%,rgba(var(--ps-acc),.06),transparent 60%),#fff;
box-shadow:0 24px 60px -28px rgba(var(--ps-acc),.30)}
.pm-pl-2,:root[data-theme="light"] .pm-pl-2{border:1px solid var(--ps-line);background:var(--ps-card)}
:root[data-theme="light"] .pm-pl-2{background:#fff}
.pm-pl-cab h3{font-family:Inter,system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;color:var(--text)}
.pm-ins{position:static;background:rgb(var(--ps-acc));color:#fff;text-transform:none;letter-spacing:.01em;box-shadow:none}
.pm-ins.tuyo{background:var(--ps-in2);color:var(--text)}
.pm-pl-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px}
.pm-para{margin:-6px 0 0;font-size:13.5px;color:var(--muted)}
.pm-caja{min-height:0;border-radius:var(--ps-r2);padding:16px;gap:10px}
.pm-cr{display:flex;align-items:baseline;gap:6px;font-size:14px;margin:0}
.pm-cr b{font-size:24px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pm-cr span{color:var(--muted);font-weight:500}
.pm-mods{display:flex;flex-direction:column;gap:2px}
.pm-mod{display:flex;align-items:center;gap:9px;min-height:28px;font-size:13px}
.pm-mod span{flex:1;color:var(--muted);font-weight:500}
.pm-mod b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
.pm-fijo{height:34px;border-radius:6px;font-size:12.5px}
.pm-desl-ops button{border-radius:6px;font-variant-numeric:tabular-nums}
.pm-precio{min-height:48px;gap:8px}
.pm-precio s{font-size:16px;font-weight:600;color:var(--dim);text-decoration-thickness:1.5px}
.pm-precio b{font-size:36px;font-weight:700}
.pm-btn{height:44px;border-radius:var(--ps-r2);font-size:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.25)}
.pm-btn:active:not(:disabled){box-shadow:none}
.pm-btn-0,.pm-btn-2{background:var(--ps-in2);color:var(--text);box-shadow:inset 0 0 0 1px var(--ps-line)}
.pm-btn-0:hover:not(:disabled),.pm-btn-2:hover:not(:disabled){background:rgba(255,255,255,.1)}
:root[data-theme="light"] .pm-btn-0,:root[data-theme="light"] .pm-btn-2{background:#fff;color:#0b0d12;box-shadow:inset 0 0 0 1px rgba(16,24,40,.14),0 1px 2px rgba(16,24,40,.06)}
:root[data-theme="light"] .pm-btn-0:hover:not(:disabled),:root[data-theme="light"] .pm-btn-2:hover:not(:disabled){background:#f6f7f9}
.pm-btn-1{background:rgb(var(--ps-acc));color:#fff}
.pm-btn-1:hover:not(:disabled){background:#2563eb}
.pm-ahorro{border-radius:0;padding:0 2px;margin-top:-4px;font-size:12.5px;text-align:left;color:var(--muted)}
.pm-ahorro b{color:var(--text);font-weight:600}
.pm-incluye{border-radius:0;background:transparent;padding:4px 0 0;border-top:1px solid var(--ps-line)}
.pm-incluye .pm-inc-cab{font-family:Inter,system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--muted);min-height:36px}
.pm-incluye li{min-height:40px;font-size:13.5px;gap:10px}
.pm-incluye li>span{flex:1}
.pm-inc-ias{display:inline-flex;align-items:center;gap:6px;font-style:normal}
.pm-chip{border-radius:var(--ps-r3);height:20px;font-size:11px;padding:0 7px;background:rgba(var(--ps-acc),.14);color:#93c5fd}
:root[data-theme="light"] .pm-chip{background:rgba(var(--ps-acc),.1);color:#1d4ed8}
.pm-pl-2 .pm-chip:not(.gris){background:rgba(var(--ps-acc),.14)}
.pm-chip.gris{background:var(--ps-in2);color:var(--muted)}
/* ── AJUSTES ── */
.cfg-nav-op{height:36px;border-radius:var(--ps-r2);gap:10px;padding:0 10px;color:var(--muted)}
.cfg-nav-op.on{box-shadow:none;color:var(--text)}
.cfg-nav-ic{display:inline-grid;place-items:center;width:16px;height:16px;color:var(--muted)}
.cfg-nav-op.on .cfg-nav-ic,.cfg-nav-op:hover .cfg-nav-ic{color:var(--text)}
.cfg-cuad{border-radius:var(--ps-r3);box-shadow:none}
.cfg-espacio{font-size:11px;letter-spacing:.08em;font-weight:600;color:var(--dim)}
.cfg-ayuda-t{border-radius:var(--ps-r);text-align:left;align-items:flex-start;padding:16px}
.cfg-ayuda-t .cfg-btn{width:100%}
.cfg-tarjeta,.cfg-kpi,.cfg-banner{border-radius:var(--ps-r)}
.cfg-tarjeta{padding:20px 22px}
.cfg-tarjeta h3{font-size:14px;font-weight:600;letter-spacing:-.005em}
.cfg-kpi{min-height:160px}
.cfg-kpi-t{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cfg-kpi-n{font-size:36px;font-weight:700}
.cfg-kpi-cred .cfg-kpi-pie>div::after{border-radius:2px;height:4px}
.cfg-graf-b{border-radius:2px 2px 0 0;background:rgb(var(--ps-acc));opacity:.9}
.cfg-graf-b.cero{border-radius:1px;width:3px;height:3px}
.cfg-stats{gap:16px}
.cfg-stat{border-radius:var(--ps-r);padding:16px 20px}
.cfg-stat>div{display:flex;flex-direction:column;gap:6px}
.cfg-stat span{order:0;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cfg-stat b{order:1;font-size:26px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cfg-perfil>:first-child{border-radius:10px!important;overflow:hidden}
.cfg-perfil>:first-child img{border-radius:10px}
.cfg-perfil-n h2{font-size:28px;font-weight:700}
.cfg-btn,.cfg-btn.chico,.cfg-btn.grande{border-radius:var(--ps-r2)}
.cfg-btn.blanco,.cfg-btn.pri,.cfg-btn.peligro{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.25)}
.cfg-in{border-radius:var(--ps-r2)}
.cfg-pill{border-radius:var(--ps-r3)}
.cfg-nota{border-radius:var(--ps-r2)}
.cfg-banner{border:1px solid rgba(var(--ps-acc),.4);box-shadow:var(--ps-hi);
background:radial-gradient(80% 120% at 0% 0%,rgba(var(--ps-acc),.10),transparent 60%),var(--ps-card)}
/* ── MENÚ DE LA CUENTA ── */
.mc[role="menu"]{border-radius:var(--ps-r)}
.mc[role="menu"] .mc-yo>:first-child{border-radius:10px!important}
.mc-caja{border-radius:var(--ps-r2)}
.mc-puntos{gap:2px}
.mc-puntos i{height:4px;border-radius:1px}
.mc-puntos i.on{background:rgb(var(--ps-acc))}
.mc-mejorar{border-radius:var(--ps-r3);background:rgb(var(--ps-acc));box-shadow:none}
.mc-op{height:36px;border-radius:var(--ps-r3)}
/* ── CARTERA Y CHIP ── */
.crd-caja{border-radius:var(--ps-r)}
.crd-x{border-radius:var(--ps-r2)}
.crd-bolsa,.crd-paq,.crd-plan{border-radius:var(--ps-r2)}
.crd-bolsa-cab{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.crd-plan{border:1px solid rgba(var(--ps-acc),.35)}
.crd-btn-plan{border-radius:var(--ps-r2);background:rgb(var(--ps-acc));box-shadow:none}
.crd-barra,.crd-barra i{border-radius:2px}
.crd-sub{font-size:11px;letter-spacing:.08em}
.crd-chip{border-radius:var(--ps-r2)}
.crd-caja .lia-tabla{border-radius:var(--ps-r2);background:var(--ps-in);padding:2px 16px}
@media(max-width:900px){
.pm-titulo{font-size:32px}
.pm-pl-cab h3{font-size:13px}
.cfg-tarjeta{border-radius:var(--ps-r)}
}
/* Ajustes de la revisión de capturas: el banner del plan lee en los dos
temas, «Pronto» queda gris en claro y las cajas de créditos de los
tres planes miden lo mismo (los precios quedan a la misma altura). */
.cfg-banner h3,.cfg-banner-e{color:var(--text)}
.cfg-banner p{color:var(--muted)}
.cfg-banner-e{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
:root[data-theme="light"] .pm-chip.gris{background:rgba(16,24,40,.06);color:var(--muted)}
.pm-caja{min-height:224px}
@media(max-width:900px){.pm-caja{min-height:0}}
.pm-desl-riel i{background:rgb(var(--ps-acc))!important}
/* Ajustes en teléfono (1-oct-2026): una sola fila arriba —sección y
créditos— en vez de la tira de píldoras y la miga. Va al final para
ganarle a las capas de pulido de arriba. */
.cfg-sel-movil{display:none}
@media(max-width:900px){
.cfg-lado{display:none}
.cfg-der{padding:0 16px 40px}
.cfg-tope{position:sticky;top:0;z-index:5;height:56px;padding:0;flex-wrap:nowrap;margin:0 -16px 20px;padding:0 16px;background:var(--bg);border-bottom:1px solid var(--border)}
.cfg-miga{display:none}
.cfg-sel-movil{position:relative;display:inline-flex;align-items:center;gap:8px;min-width:0;height:38px;padding:0 10px;border-radius:8px;color:var(--text);font-size:15px;font-weight:600;cursor:pointer}
.cfg-sel-movil:active{background:var(--bg-surface)}
.cfg-sel-movil select{appearance:none;-webkit-appearance:none;background:transparent!important;border:0!important;padding:0!important;margin:0;color:inherit!important;font:inherit;font-weight:600;min-width:0;max-width:52vw;text-overflow:ellipsis;cursor:pointer;outline:none;box-shadow:none!important}
.cfg-sel-movil select:focus-visible{outline:2px solid #3b82f6;outline-offset:4px}
.cfg-panel>.cfg-h2{display:none}
/* app.css pinta todo