/* ===================================================================== 1) BASE Y LAYERS DE FONDO (cuadrícula + aurora + partículas) ===================================================================== */ /* ===================================================================== PALETA — rojo/negro por defecto y "blanco con rojo" en tema claro. El acento es editable desde Configuración → Color de la página. ===================================================================== */ :root{ --accent-rgb: 239 68 68; /* rojo principal (#EF4444) */ --accent2-rgb: 127 29 29; /* rojo profundo (#7F1D1D) */ /* Variantes del acento para TEXTO. Las recalcula JS al elegir color: -lt → aclarada, legible sobre superficies oscuras -ink → oscurecida, legible sobre superficies claras */ --accent-lt-rgb: 242 101 101; /* #F26565 */ --accent-ink-rgb: 210 60 60; /* #D23C3C */ --accent-text-rgb: var(--accent-lt-rgb); --ink-rgb: 8 8 11; /* fondo base */ --ink2-rgb: 17 17 22; /* superficie elevada */ --text-rgb: 255 255 255; /* texto principal */ --line-rgb: 255 255 255; /* bordes y veladuras */ --blue: rgb(var(--accent-rgb)); --violet: rgb(var(--accent2-rgb)); } /* Tema claro: blanco con rojo (solo cambian superficies y texto) */ body.light{ --ink-rgb: 255 255 255; --ink2-rgb: 247 247 250; --text-rgb: 10 10 14; --line-rgb: 10 10 14; --accent-text-rgb: var(--accent-ink-rgb); /* El lleva la utilidad `.text-gray-200` (0,1,0), que gana a la regla `body{color:…}` (0,0,1): sin este !important todo el texto heredado quedaba casi blanco sobre blanco. */ color:rgb(var(--text-rgb)) !important; } * { -webkit-tap-highlight-color: transparent; } html { background:rgb(var(--ink-rgb)); } body { background:rgb(var(--ink-rgb)); color:rgb(var(--text-rgb)); overflow-x:hidden; } /* Los textos sobre acento o sobre superficies siempre oscuras se marcan con .on-accent para que el tema claro no los invierta. */ body.light .on-accent, body.light .on-accent *{ color:#fff !important; } /* Cuadrícula sutil que se desplaza lentamente */ .grid-bg{ position:fixed; inset:0; z-index:-4; pointer-events:none; background-image: linear-gradient(rgb(var(--line-rgb) / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--line-rgb) / .05) 1px, transparent 1px); background-size:56px 56px; animation:gridPan 26s linear infinite; -webkit-mask-image: radial-gradient(ellipse 95% 75% at 50% 0%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 95% 75% at 50% 0%, #000 35%, transparent 100%); } @keyframes gridPan{ from{ background-position:0 0, 0 0; } to { background-position:56px 56px, 56px 56px; } } /* Aurora de luz azul/violeta en la parte superior */ .aurora{ position:fixed; top:-25%; left:-10%; right:-10%; height:85vh; z-index:-3; pointer-events:none; filter:blur(90px); opacity:.55; background: radial-gradient(closest-side, rgb(var(--accent-rgb) / .55), transparent 70%) 22% 12%/48% 58% no-repeat, radial-gradient(closest-side, rgb(var(--accent2-rgb) / .45), transparent 70%) 78% 22%/44% 54% no-repeat; animation:auroraMove 18s ease-in-out infinite alternate; } @keyframes auroraMove{ from{ transform:translate3d(-2%,0,0) scale(1); } to { transform:translate3d(2%,3%,0) scale(1.08); } } /* Capa de partículas (los nodos se generan por JS) */ #particles{ position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; } .particle{ position:absolute; border-radius:9999px; opacity:0; background:linear-gradient(180deg, rgb(var(--accent-rgb) / .95), rgb(var(--accent2-rgb) / .15)); animation-name:rise; animation-timing-function:linear; animation-iteration-count:infinite; } @keyframes rise{ 0% { transform:translateY(0) scale(.6); opacity:0; } 12% { opacity:.85; } 85% { opacity:.35; } 100%{ transform:translateY(-115vh) scale(1.15); opacity:0; } } /* ===================================================================== 1.b) ANTI-BLOWOUT DE GRID (evita recortes de texto en móvil) ===================================================================== */ /* Los items de grid tienen min-width:auto, así que un hijo "ancho" (p. ej. el 
 de la ventana de código) ensancha la columna por
       encima del contenedor. En layouts de una sola columna (móvil) la
       sección lo recorta porque lleva overflow-hidden.
       Tailwind solo lo evita en grid-cols-* (minmax(0,1fr)), no en la
       columna implícita. Con min-width:0 la columna respeta el contenedor
       y el 
 hace scroll horizontal dentro de su propia ventana. */
    .grid > *{ min-width:0; }

    /* =====================================================================
       2) GLASSMORPHISM, GLOW Y MICROINTERACCIONES
       ===================================================================== */
    .glass{
      background:linear-gradient(180deg, rgb(var(--line-rgb) / .065), rgb(var(--line-rgb) / .02));
      backdrop-filter:blur(14px) saturate(140%);
      -webkit-backdrop-filter:blur(14px) saturate(140%);
      border:1px solid rgb(var(--line-rgb) / .08);
    }
    .card-hover{
      transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
    }
    .card-hover:hover{
      transform:translateY(-6px);
      border-color:rgb(var(--accent-rgb) / .45);
      box-shadow:0 20px 55px -22px rgb(var(--accent-rgb) / .85), inset 0 1px 0 rgb(var(--line-rgb) / .06);
    }
    .grad-text{
      background:linear-gradient(92deg, rgb(var(--accent-rgb)), rgb(var(--accent2-rgb)) 55%, rgb(var(--accent-rgb) / .78));
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    body.light .grad-text{
      /* image en vez del atajo background: el atajo resetearía
         background-clip a border-box y el texto se vería como un bloque
         de color sólido en lugar de un degradado recortado a las letras. */
      background-image:linear-gradient(92deg, rgb(var(--accent-ink-rgb)), rgb(var(--accent2-rgb)) 55%, rgb(var(--accent-ink-rgb) / .9));
      -webkit-background-clip:text; background-clip:text;
    }
    /* El acento como TEXTO usa siempre la variante legible del tema activo
       (--accent-text-rgb pasa de aclarada a oscurecida en el tema claro), así
       el color que elija el usuario nunca queda por debajo de 4.5:1. */
    html body [class*="text-brand"]{ color:rgb(var(--accent-text-rgb)); }
    /* ...salvo sobre superficies que siguen siendo oscuras en ambos temas. */
    html body .code-window [class*="text-brand"],
    html body .on-accent [class*="text-brand"]{ color:rgb(var(--accent-lt-rgb)); }
    .btn-primary{
      background:linear-gradient(92deg, var(--blue), var(--violet));
      box-shadow:0 12px 34px -12px rgb(var(--accent-rgb) / .85);
      transition:transform .3s ease, box-shadow .3s ease, filter .3s ease;
    }
    .btn-primary:hover{
      transform:translateY(-2px);
      box-shadow:0 18px 48px -14px rgb(var(--accent2-rgb) / .95);
      filter:brightness(1.06);
    }
    .btn-primary:active{ transform:translateY(0); }
    .btn-ghost{ border:1px solid rgb(var(--line-rgb) / .14); transition:all .3s ease; }
    .btn-ghost:hover{ border-color:rgb(var(--accent-rgb) / .6); background:rgb(var(--accent-rgb) / .08); color:#fff; }

    .nav-link{ position:relative; }
    .nav-link::after{
      content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0;
      background:linear-gradient(90deg, var(--blue), var(--violet));
      border-radius:2px; transition:width .3s ease;
    }
    .nav-link:hover::after{ width:100%; }

    /* Iconos de features */
    .icon-tile{
      width:48px; height:48px; display:grid; place-items:center; border-radius:14px;
      background:linear-gradient(140deg, rgb(var(--accent-rgb) / .22), rgb(var(--accent2-rgb) / .16));
      border:1px solid rgb(var(--accent-rgb) / .32);
      color:rgb(var(--accent-text-rgb)); transition:color .3s ease, box-shadow .3s ease, transform .3s ease;
    }
    .card-hover:hover .icon-tile{
      color:#fff; transform:translateY(-2px) scale(1.04);
      box-shadow:0 10px 30px -10px rgb(var(--accent-rgb) / .9);
    }
/* =====================================================================
       3) CODE SHOWCASE (ventana de código + syntax highlighting)
       ===================================================================== */
    .code-window{
      background:linear-gradient(180deg, rgb(var(--ink2-rgb) / .92), rgb(var(--ink-rgb) / .96));
      border:1px solid rgb(var(--line-rgb) / .09);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
      box-shadow:0 40px 90px -40px rgb(var(--accent-rgb) / .55), inset 0 1px 0 rgb(var(--line-rgb) / .05);
    }
    pre.code{
      font-family:'JetBrains Mono', ui-monospace, monospace;
      font-size:13px; line-height:1.85; tab-size:2;
      white-space:pre; overflow-x:auto;
    }
    @media (min-width:1024px){ pre.code{ font-size:13.5px; } }
    /* Tokens de color (syntax highlighting "falso") */
    .tok-com { color:#64748B; font-style:italic; }
    .tok-str { color:#4ADE80; }
    .tok-kw  { color:#F472B6; }
    .tok-pre { color:rgb(var(--accent-rgb)); }
    .tok-num { color:#FBBF24; }
    .tok-fn  { color:#38BDF8; }
    .tok-type{ color:#F472B6; }

    /* Pestañas de lenguaje */
    .tab-btn{
      border:1px solid rgb(var(--line-rgb) / .10);
      color:rgb(var(--line-rgb) / .62);
      transition:all .28s ease;
    }
    .tab-btn:hover{ color:#fff; border-color:rgb(var(--accent-rgb) / .35); }
    .tab-btn.active{
      background:linear-gradient(180deg, rgb(var(--accent-rgb) / .28), rgb(var(--accent2-rgb) / .16));
      border-color:rgb(var(--accent-rgb) / .55);
      color:#fff;
      box-shadow:0 10px 30px -14px rgb(var(--accent-rgb) / .95);
    }
    @keyframes fadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

    /* =====================================================================
       4) ANIMACIONES DE SECCIÓN Y ELEMENTOS FLOTANTES
       ===================================================================== */
    .reveal{
      opacity:0; transform:translateY(26px);
      transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
    }
    .reveal.in{ opacity:1; transform:none; }
    .delay-1{ transition-delay:.08s } .delay-2{ transition-delay:.16s }
    .delay-3{ transition-delay:.24s }

    .float{ animation:floatY 7s ease-in-out infinite; }
    @keyframes floatY{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }

    /* Línea conectora animada entre pasos */
    .step-line{
      position:absolute; top:36px; left:14%; right:14%; height:2px;
      background:rgb(var(--line-rgb) / .26); overflow:hidden; border-radius:2px; z-index:0;
    }
    .step-line span{
      position:absolute; inset:0;
      background:linear-gradient(90deg, transparent, var(--blue), var(--violet), transparent);
      animation:sweep 3.4s linear infinite;
    }
    @keyframes sweep{ from{ transform:translateX(-100%) } to{ transform:translateX(100%) } }

    .step-dot{
      position:relative; z-index:1;
      width:72px; height:72px; border-radius:22px; display:grid; place-items:center;
      background:linear-gradient(150deg, rgb(var(--ink2-rgb) / .95), rgb(var(--ink2-rgb) / .95));
      border:1px solid rgb(var(--accent-rgb) / .35);
      box-shadow:0 16px 40px -18px rgb(var(--accent-rgb) / .9);
      transition:transform .35s ease, border-color .35s ease;
    }
    .step-dot:hover{ transform:translateY(-4px); border-color:rgb(var(--accent2-rgb) / .7); }
    .step-num{
      position:absolute; top:-10px; right:-10px;
      width:26px; height:26px; border-radius:9999px; display:grid; place-items:center;
      font-size:12px; font-weight:800; color:#fff;
      background:linear-gradient(140deg, var(--blue), var(--violet));
    }

    /* Marquee de tecnologías compatibles */
    .marquee-track{ animation:marquee 28s linear infinite; }
    .marquee:hover .marquee-track{ animation-play-state:paused; }
    @keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
    .mask-fade{
      -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
      mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    }

    /* =====================================================================
    5) DETALLES (badges, divisores, scrollbar, acordeón, selección y foco)
       ===================================================================== */
    .badge{
      display:inline-flex; align-items:center; gap:.5rem;
      border:1px solid rgb(var(--accent-rgb) / .32); border-radius:9999px;
      background:rgb(var(--accent-rgb) / .09); padding:.4rem .9rem;
      font-size:12.5px; color:rgb(var(--accent-text-rgb));
    }
    .divider-grad{
      height:1px; background:linear-gradient(90deg, transparent, rgb(var(--accent-rgb) / .55), rgb(var(--accent2-rgb) / .55), transparent);
    }
    details > summary{ list-style:none; cursor:pointer; }
    details > summary::-webkit-details-marker{ display:none; }
    details[open] .chev{ transform:rotate(180deg); }
    .chev{ transition:transform .3s ease; }
    ::selection{ background:rgb(var(--accent2-rgb) / .45); color:#fff; }
    ::-webkit-scrollbar{ width:10px; height:10px; }
    ::-webkit-scrollbar-track{ background:rgb(var(--ink-rgb)); }
    ::-webkit-scrollbar-thumb{
      background:linear-gradient(180deg, var(--blue), var(--violet));
      border-radius:9999px; border:2px solid rgb(var(--ink-rgb));
    }
    :focus-visible{ outline:2px solid rgb(var(--accent-rgb) / .9); outline-offset:3px; border-radius:8px; }

    /* Clases de estado aplicadas desde JavaScript */
    .nav-scrolled{
      background:rgb(var(--ink-rgb) / .82);
      backdrop-filter:blur(16px) saturate(140%);
      -webkit-backdrop-filter:blur(16px) saturate(140%);
      border-bottom:1px solid rgb(var(--line-rgb) / .09);
      box-shadow:0 18px 42px -32px rgba(0,0,0,.95);
    }
    .toast-show{ opacity:1 !important; transform:translateY(0) !important; }


    /* Mensajes de validación del formulario de login */
    .msg-error{ color:#FDA4AF; }
    .msg-ok{ color:#6EE7B7; }

    /* =====================================================================
       6) DASHBOARD DEMO (overlay que se abre tras el login de prueba)
       ===================================================================== */
    #dash{ opacity:0; transition:opacity .28s ease; }
    #dash.dash-open{ opacity:1; }

    .dash-kpi{
      border:1px solid rgb(var(--line-rgb) / .09); border-radius:1rem;
      background:linear-gradient(180deg, rgb(var(--line-rgb) / .06), rgb(var(--line-rgb) / .02));
      padding:1rem 1.1rem; backdrop-filter:blur(12px);
      transition:border-color .3s ease, transform .3s ease;
    }
    .dash-kpi:hover{ border-color:rgb(var(--accent-rgb) / .42); transform:translateY(-2px); }
    .dash-kpi-label{
      font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgb(var(--line-rgb) / .5);
    }
    .dash-kpi-value{ margin-top:.35rem; font-size:1.6rem; font-weight:800; color:#fff; }


    /* Código plano con scroll propio (no ensancha su columna) */
    .dash-code{
      margin:0; padding:1rem 1.1rem; overflow-x:auto;
      font-family:'JetBrains Mono', ui-monospace, monospace;
      font-size:12px; line-height:1.65; color:#CBD5E1; white-space:pre;
    }

    /* Píldoras de estado de las licencias */
    .pill{
      display:inline-flex; align-items:center; gap:.35rem;
      border-radius:9999px; padding:.15rem .6rem; font-size:11px; font-weight:600;
    }
    .pill-ok  { background:rgba(16,185,129,.14); color:#6EE7B7; border:1px solid rgba(16,185,129,.32); }
    .pill-warn{ background:rgba(251,191,36,.14); color:#FCD34D; border:1px solid rgba(251,191,36,.32); }
    .pill-off { background:rgba(148,163,184,.16);  color:#FDA4AF; border:1px solid rgba(148,163,184,.34); }

    /* Con el dashboard abierto, la landing no debe scrollear por detrás */
    body.dash-locked{ overflow:hidden; }

    /* Compensa la navbar fija al navegar por anclas */
    section[id]{ scroll-margin-top:96px; }

    /* Accesibilidad: respeta la preferencia de movimiento reducido */
    @media (prefers-reduced-motion: reduce){
      *, *::before, *::after{ animation:none !important; transition:none !important; }
      .reveal{ opacity:1 !important; transform:none !important; }
    }
  /* =====================================================================
       6.b) DASHBOARD v2 — layout de panel: sidebar + pestañas + tablas
       ===================================================================== */
    .dash-kpi-value{ color:rgb(var(--text-rgb)); }
    .pill-off{ color:#CBD5E1; }

    .dash-shell{ display:grid; grid-template-columns:250px minmax(0,1fr); min-height:100vh; }
    .dash-side{
      display:flex; flex-direction:column; gap:.3rem;
      padding:1.1rem .85rem; border-right:1px solid rgb(var(--line-rgb) / .09);
      background:rgb(var(--ink2-rgb) / .6); backdrop-filter:blur(10px);
    }
    .dash-side-head{ display:flex; align-items:center; gap:.65rem; padding:.2rem .3rem 1rem; }
    .dash-nav-btn{
      display:flex; align-items:center; gap:.7rem; width:100%; text-align:left;
      border:1px solid transparent; border-radius:.75rem; padding:.6rem .7rem;
      font-size:13px; font-weight:600; color:rgb(var(--text-rgb) / .6);
      transition:background .25s ease, color .25s ease, border-color .25s ease;
    }
    .dash-nav-btn:hover{ background:rgb(var(--line-rgb) / .05); color:rgb(var(--text-rgb)); }
    .dash-nav-btn.is-active{
      color:rgb(var(--text-rgb));
      border-color:rgb(var(--accent-rgb) / .45);
      background:linear-gradient(92deg, rgb(var(--accent-rgb) / .22), rgb(var(--accent2-rgb) / .12));
    }
    .dash-nav-count{
      margin-left:auto; font-size:11px; font-weight:700; padding:.1rem .45rem; border-radius:9999px;
      background:rgb(var(--line-rgb) / .08); color:rgb(var(--text-rgb) / .7);
    }
    .dash-main{ padding:1.2rem clamp(.9rem, 2.5vw, 2rem) 2.5rem; min-width:0; }
    .dash-tabpanel{ display:none; }
    .dash-tabpanel.is-active{ display:block; animation:fadeIn .3s ease; }

    .dash-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.9rem; margin-bottom:1rem; }
    .dash-h1{ font-size:1.05rem; font-weight:800; color:rgb(var(--text-rgb)); }
    .dash-sub{ font-size:11.5px; color:rgb(var(--text-rgb) / .55); }

    .panel{ border:1px solid rgb(var(--line-rgb) / .09); border-radius:1rem; background:rgb(var(--ink2-rgb) / .5); min-width:0; }
    .panel-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; padding:.85rem 1rem; border-bottom:1px solid rgb(var(--line-rgb) / .09); }

    .btn-soft{
      display:inline-flex; align-items:center; gap:.45rem; border-radius:.7rem;
      border:1px solid rgb(var(--line-rgb) / .12); background:rgb(var(--line-rgb) / .04);
      padding:.5rem .75rem; font-size:12px; font-weight:600; color:rgb(var(--text-rgb));
      transition:border-color .25s ease, background .25s ease;
    }
    .btn-soft:hover{ border-color:rgb(var(--accent-rgb) / .5); background:rgb(var(--accent-rgb) / .1); }

    .field{
      width:100%; border-radius:.7rem; border:1px solid rgb(var(--line-rgb) / .13);
      background:rgb(var(--line-rgb) / .04); padding:.55rem .75rem;
      font-size:13px; color:rgb(var(--text-rgb)); transition:border-color .2s ease, box-shadow .2s ease;
    }
    .field::placeholder{ color:rgb(var(--text-rgb) / .32); }
    .field:focus{ outline:none; border-color:rgb(var(--accent-rgb) / .6); box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .16); }
    .field-label{ display:block; margin-bottom:.3rem; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:rgb(var(--text-rgb) / .5); }

    /* Tablas de datos */
    .tbl{ width:100%; border-collapse:collapse; text-align:left; font-size:13px; }
    .tbl th{
      padding:.6rem .8rem; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
      color:rgb(var(--text-rgb) / .45); border-bottom:1px solid rgb(var(--line-rgb) / .09); white-space:nowrap;
    }
    .tbl td{ padding:.62rem .8rem; border-bottom:1px solid rgb(var(--line-rgb) / .06); color:rgb(var(--text-rgb) / .85); vertical-align:middle; }
    .tbl tr:last-child td{ border-bottom:0; }
    .tbl tbody tr:hover{ background:rgb(var(--line-rgb) / .03); }
    .tbl .mono{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11.5px; color:rgb(var(--text-rgb) / .8); }
    .tbl tr.is-banned td{ opacity:.45; }

    /* Botones de acción por fila */
    .act{
      display:inline-grid; place-items:center; width:29px; height:29px; border-radius:.55rem;
      border:1px solid rgb(var(--line-rgb) / .13); color:rgb(var(--text-rgb) / .72);
      transition:color .22s ease, border-color .22s ease, background .22s ease;
    }
    .act:hover{ color:rgb(var(--accent-text-rgb)); border-color:rgb(var(--accent-rgb) / .55); background:rgb(var(--accent-rgb) / .12); }
    .act.ok:hover{ color:#34D399; border-color:rgba(16,185,129,.55); background:rgba(16,185,129,.12); }
    .act.danger:hover{ color:#FB7185; border-color:rgba(244,63,94,.55); background:rgba(244,63,94,.12); }
    .act-row{ display:flex; flex-wrap:wrap; gap:.3rem; }
      /* Tarjetas de aplicaciones */
    .app-card{ border:1px solid rgb(var(--line-rgb) / .1); border-radius:1rem; padding:.9rem; background:linear-gradient(180deg, rgb(var(--line-rgb) / .05), rgb(var(--line-rgb) / .015)); }
    .app-tile{ display:grid; place-items:center; width:38px; height:38px; border-radius:.7rem; color:#fff; background:linear-gradient(140deg, rgb(var(--accent-rgb)), rgb(var(--accent2-rgb))); }
    .chip-mono{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11px; padding:.2rem .5rem; border-radius:.45rem; border:1px dashed rgb(var(--line-rgb) / .18); color:rgb(var(--text-rgb) / .75); }

    /* Avatar + swatches de la configuración */
    .avatar{ position:relative; display:grid; place-items:center; width:92px; height:92px; border-radius:1.4rem; overflow:hidden; color:#fff; font-size:1.5rem; font-weight:800; background:linear-gradient(140deg, rgb(var(--accent-rgb)), rgb(var(--accent2-rgb))); }
    .avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .swatch{ width:32px; height:32px; border-radius:9999px; border:2px solid transparent; transition:transform .2s ease, border-color .2s ease; }
    .swatch:hover{ transform:scale(1.08); }
    .swatch.is-active{ border-color:rgb(var(--text-rgb)); box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .25); }
    .theme-btn{ display:inline-flex; align-items:center; gap:.45rem; border-radius:9999px; border:1px solid rgb(var(--line-rgb) / .14); padding:.45rem .8rem; font-size:12px; font-weight:600; color:rgb(var(--text-rgb) / .78); transition:color .25s ease, border-color .25s ease; }
    .theme-btn:hover{ border-color:rgb(var(--accent-rgb) / .5); color:rgb(var(--text-rgb)); }

    /* Modal de confirmación */
    #confirm{ position:fixed; inset:0; z-index:90; display:none; place-items:center; padding:1rem; background:rgb(0 0 0 / .62); backdrop-filter:blur(6px); }
    #confirm.is-open{ display:grid; }
    .confirm-card{ width:100%; max-width:430px; border-radius:1.1rem; border:1px solid rgb(var(--line-rgb) / .12); background:rgb(var(--ink2-rgb) / .97); padding:1.25rem; }

    /* Responsive: la sidebar pasa a barra superior */
    @media (max-width:900px){
      .dash-shell{ grid-template-columns:1fr; }
      .dash-side{ position:static; flex-direction:row; flex-wrap:wrap; align-items:center; border-right:0; border-bottom:1px solid rgb(var(--line-rgb) / .09); padding:.7rem; }
      .dash-side-head{ padding:0 .4rem; }
      .dash-side nav{ display:flex; gap:.3rem; overflow-x:auto; width:100%; }
      .dash-nav-btn{ width:auto; white-space:nowrap; }
      .dash-nav-count{ display:none; }
    }
  /* =====================================================================
       6.c) PANTALLA DE ACCESO (portada del sitio) — vista tipo aplicación
       Se abre a pantalla completa al entrar (o con #/login) y cubre la
       landing. Todo el color sale de las mismas variables CSS del tema, así
       que respeta el tema claro/oscuro y el acento elegido en Configuración.
       ===================================================================== */
    /* overflow-x: #authView lleva backdrop-filter, así que el resplandor
       (position:fixed) se resuelve dentro de ella y ensancha su área
       desplazable; sin esto aparecería una barra horizontal al pie. */
    #authView{ opacity:0; transition:opacity .3s ease; overflow-x:hidden; }
    #authView.auth-open{ opacity:1; }
    /* Con la pantalla de acceso abierta, la landing de detrás no scrollea */
    body.app-locked{ overflow:hidden; }

    /* Resplandor decorativo del fondo (usa el acento del tema).
       Sin insets horizontales negativos: no debe ensanchar la vista. */
    .auth-glow{
      position:fixed; inset:-22% 0 auto 0; height:78vh; pointer-events:none;
      background:
        radial-gradient(closest-side, rgb(var(--accent-rgb) / .30), transparent 72%) 18% 32%/46% 62% no-repeat,
        radial-gradient(closest-side, rgb(var(--accent2-rgb) / .26), transparent 72%) 82% 16%/44% 58% no-repeat;
      filter:blur(70px); opacity:.85;
    }
    body.light .auth-glow{ opacity:.38; filter:blur(80px); }

    /* Entrada escalonada de la tarjeta y del panel de marca */
    .auth-in{ animation:authIn .6s cubic-bezier(.2,.7,.2,1) both; }
    @keyframes authIn{ from{ opacity:0; transform:translateY(18px) scale(.985); } to{ opacity:1; transform:none; } }
    .auth-in.d1{ animation-delay:.08s }

    /* Tarjeta del formulario */
    .auth-card{
      border:1px solid rgb(var(--line-rgb) / .12); border-radius:1.4rem;
      background:linear-gradient(180deg, rgb(var(--ink2-rgb) / .95), rgb(var(--ink-rgb) / .93));
      backdrop-filter:blur(18px) saturate(140%);
      -webkit-backdrop-filter:blur(18px) saturate(140%);
      padding:1.5rem;
      box-shadow:0 42px 96px -48px rgb(var(--accent-rgb) / .85), inset 0 1px 0 rgb(var(--line-rgb) / .05);
    }
    @media (min-width:640px){ .auth-card{ padding:1.75rem; } }
    body.light .auth-card{
      background:rgb(255 255 255 / .94);
      box-shadow:0 42px 96px -52px rgb(var(--accent-rgb) / .55), inset 0 1px 0 rgb(0 0 0 / .03);
    }

    /* Campos con icono (email / contraseña) */
    .auth-field{
      display:flex; align-items:center; gap:.6rem;
      border:1px solid rgb(var(--line-rgb) / .13); border-radius:.9rem;
      background:rgb(var(--line-rgb) / .035); padding:0 .85rem;
      transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
    }
    .auth-field:focus-within{
      border-color:rgb(var(--accent-rgb) / .62);
      background:rgb(var(--accent-rgb) / .06);
      box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .16);
    }
    .auth-field input{
      width:100%; background:transparent; padding:.82rem 0;
      font-size:.875rem; color:rgb(var(--text-rgb)); outline:none;
    }
    .auth-field input::placeholder{ color:rgb(var(--line-rgb) / .38); }
    body.light .auth-field input::placeholder{ color:#A1A1AA; }
    /* Botones dentro del campo (mostrar contraseña) */
    .auth-field .pick{
      display:grid; place-items:center; width:28px; height:28px; border-radius:9999px; flex:none;
      color:rgb(var(--line-rgb) / .55); transition:color .22s ease, background .22s ease;
    }
    .auth-field .pick:hover{ color:rgb(var(--accent-text-rgb)); background:rgb(var(--accent-rgb) / .14); }

    /* Selector de modo (Iniciar sesión / Crear cuenta) */
    .auth-tabs{
      display:grid; grid-template-columns:1fr 1fr; gap:.25rem;
      border:1px solid rgb(var(--line-rgb) / .12); border-radius:.85rem;
      background:rgb(var(--line-rgb) / .04); padding:.25rem;
    }
    .auth-tab{
      border-radius:.65rem; padding:.55rem .6rem; font-size:12.5px; font-weight:700;
      color:rgb(var(--text-rgb) / .6); transition:color .25s ease, background .25s ease, box-shadow .25s ease;
    }
    .auth-tab:hover{ color:rgb(var(--text-rgb)); }
    .auth-tab.is-active{
      color:#fff; background:linear-gradient(180deg, rgb(var(--accent-rgb) / .95), rgb(var(--accent2-rgb) / .88));
      box-shadow:0 10px 26px -14px rgb(var(--accent-rgb) / .95);
    }

    /* Separador «o continúa con» */
    .auth-or{
      display:flex; align-items:center; gap:.8rem;
      color:rgb(var(--line-rgb) / .45);
      font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.16em;
    }
    .auth-or::before, .auth-or::after{ content:''; height:1px; flex:1; background:rgb(var(--line-rgb) / .14); }


    /* Caja de credenciales de prueba */
    .auth-demo{
      border:1px dashed rgb(var(--accent-rgb) / .32); border-radius:1rem;
      background:rgb(var(--accent-rgb) / .045); padding:.85rem .95rem;
    }

    /* Ventajas y cifras del panel de marca (columna izquierda) */
    .auth-point{ display:flex; gap:.65rem; align-items:flex-start; font-size:.875rem; color:rgb(var(--text-rgb) / .74); }
    .auth-stat{
      border:1px solid rgb(var(--line-rgb) / .1); border-radius:1rem;
      background:rgb(var(--line-rgb) / .045); padding:.8rem .9rem;
    }
    .auth-stat b{ display:block; font-size:1.35rem; font-weight:800; color:rgb(var(--text-rgb)); }
  /* =====================================================================
       7) TEMA CLARO (blanco con rojo)
       Solo cambian las variables de superficie/texto y se invierten las
       utilidades de Tailwind usadas en la página. Los elementos marcados
       con .on-accent (botones, logos, ventanas de código) mantienen su
       texto claro porque van sobre color de acento o fondo oscuro.
       ===================================================================== */
    /* !important: las utilidades las inyecta el CDN de Tailwind en tiempo de
       ejecución y su orden puede variar; estas anulaciones solo existen para
       el tema claro, así que deben ganar siempre. */
    body.light .text-white{ color:rgb(var(--text-rgb)) !important; }
    body.light .text-gray-200{ color:#27272A !important; }
    body.light .text-gray-300{ color:#3F3F46 !important; }
    body.light .text-gray-400{ color:#52525B !important; }
    body.light .text-gray-500{ color:#71717A !important; }
    body.light .hover\:text-white:hover{ color:rgb(var(--text-rgb)) !important; }
    body.light .border-white\/10{ border-color:rgb(0 0 0 / .12); }
    body.light .border-white\/5{ border-color:rgb(0 0 0 / .08); }
    body.light .bg-white\/5{ background-color:rgb(0 0 0 / .05); }
    body.light .bg-white\/\[0\.015\]{ background-color:rgb(0 0 0 / .022); }
    body.light .bg-white\/\[0\.03\]{ background-color:rgb(0 0 0 / .035); }
    body.light .bg-white\/\[0\.04\]{ background-color:rgb(0 0 0 / .045); }
    body.light .hover\:bg-white\/5:hover{ background-color:rgb(0 0 0 / .05); }

    /* Fondos animados: versión suave en rojo sobre blanco */
    body.light .grid-bg{
      background-image:
        linear-gradient(rgb(0 0 0 / .045) 1px, transparent 1px),
        linear-gradient(90deg, rgb(0 0 0 / .045) 1px, transparent 1px);
    }
    body.light .aurora{
      opacity:.32; filter:blur(85px);
      background:
        radial-gradient(closest-side, rgb(var(--accent-rgb) / .35), transparent 70%) 22% 12%/48% 58% no-repeat,
        radial-gradient(closest-side, rgb(var(--accent-rgb) / .18), transparent 70%) 78% 22%/44% 54% no-repeat;
    }
    body.light .particle{ background:linear-gradient(180deg, rgb(var(--accent-rgb) / .75), rgb(var(--accent-rgb) / .05)); }
    body.light ::-webkit-scrollbar-track{ background:#F4F4F5; }
    body.light ::-webkit-scrollbar-thumb{ border-color:#F4F4F5; }
    body.light ::selection{ background:rgb(var(--accent-rgb) / .28); color:#111; }
    body.light .nav-scrolled{
      background:rgb(255 255 255 / .84);
      border-bottom:1px solid rgb(0 0 0 / .09);
      box-shadow:0 18px 42px -34px rgb(0 0 0 / .4);
    }

    /* Componentes propios que llevaban color fijo */
    body.light .badge{ color:rgb(var(--accent-text-rgb)); background:rgb(var(--accent-rgb) / .1); }
    body.light .icon-tile{ color:rgb(var(--accent-text-rgb)); }
    body.light .tab-btn{ color:#52525B !important; border-color:rgb(0 0 0 / .12); }
    body.light .tab-btn:hover{ color:rgb(var(--text-rgb)) !important; }
    /* En claro el relleno del acento es pálido: el texto activo va oscuro para
       no quedar blanco sobre blanco (antes 1:1, ilegible). */
    body.light .tab-btn.active{
      color:rgb(var(--text-rgb));
      background:rgb(var(--accent-rgb) / .16);
      border-color:rgb(var(--accent-rgb) / .5);
      box-shadow:0 10px 30px -16px rgb(var(--accent-rgb) / .75);
    }
    body.light .step-dot{ background:#fff; border-color:rgb(var(--accent-rgb) / .35); }
    body.light .step-line{ background:rgb(0 0 0 / .22); }
    body.light .btn-ghost{ border-color:rgb(0 0 0 / .14); color:rgb(var(--text-rgb)) !important; }
    body.light .btn-ghost:hover{ color:rgb(var(--text-rgb)) !important; }
    body.light .msg-error{ color:#BE123C; }
    body.light .msg-ok{ color:#047857; }
    body.light .pill-ok  { color:#047857; }
    body.light .pill-warn{ color:#A16207; }
    body.light .pill-off { color:#475569; }
    body.light .dash-kpi-label{ color:rgb(var(--text-rgb) / .5); }
      /* La ventana de código se queda oscura en ambos temas: se devuelven
       sus colores claros para que el contraste no se pierda. */
    body.light .code-window{
      background:linear-gradient(180deg, rgb(16 16 24 / .97), rgb(8 8 12 / .99));
      border-color:rgb(255 255 255 / .1);
      box-shadow:0 40px 90px -46px rgb(var(--accent-rgb) / .5), inset 0 1px 0 rgb(255 255 255 / .05);
    }
    body.light .code-window .text-white{ color:#fff !important; }
    body.light .code-window .text-gray-200{ color:#E4E4E7 !important; }
    body.light .code-window .text-gray-300{ color:#D4D4D8 !important; }
    body.light .code-window .text-gray-400{ color:#9CA3AF !important; }
    body.light .code-window .text-gray-500{ color:#8B93A7 !important; }
    body.light .code-window .border-white\/10{ border-color:rgb(255 255 255 / .1); }
    body.light .code-window .bg-white\/\[0\.04\]{ background-color:rgb(255 255 255 / .06); }
    body.light .code-window .text-emerald-300\/90{ color:#6EE7B7; }
      /* =====================================================================
       SECCIONES NUEVAS: licencias, credenciales y registros
       ===================================================================== */
    /* --- Campos de credenciales --- */
    .cred-field{ min-width:0; }
    .cred-field .chip-mono{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    /* --- Badges del historial de registros --- */
    .log-badge{
      display:inline-flex; align-items:center; gap:.3rem;
      border-radius:9999px; border:1px solid; padding:.15rem .55rem;
      font-size:11px; font-weight:600; white-space:nowrap;
    }
    .log-ok    { color:#6EE7B7; border-color:rgba(16,185,129,.34);  background:rgba(16,185,129,.12); }
    .log-warn  { color:#FCD34D; border-color:rgba(251,191,36,.34);  background:rgba(251,191,36,.12); }
    .log-danger{ color:#FDA4AF; border-color:rgba(244,63,94,.34);   background:rgba(244,63,94,.12);  }
    .log-off   { color:#CBD5E1; border-color:rgba(148,163,184,.34); background:rgba(148,163,184,.12); }
    .log-info  { color:rgb(var(--accent-text-rgb)); border-color:rgb(var(--accent-rgb) / .34); background:rgb(var(--accent-rgb) / .12); }

    /* --- Lista del lote de licencias recién generado --- */
    .lic-batch-list{
      margin:.5rem 0 0; padding:.6rem .7rem; max-height:190px; overflow:auto;
      border-radius:.6rem; border:1px solid rgb(var(--line-rgb) / .12);
      background:rgb(var(--ink-rgb) / .55);
      font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11.5px; line-height:1.7;
      color:rgb(var(--text-rgb) / .85); white-space:pre;
    }

    /* --- Botón de segmento activo (pestañas del SDK, filtros de registros) --- */
    .btn-soft.is-active{
      color:rgb(var(--accent-text-rgb));
      border-color:rgb(var(--accent-rgb) / .6);
      background:rgb(var(--accent-rgb) / .14);
    }

    /* --- Aplicación pausada: la tarjeta se apaga un poco --- */
    .app-card.is-paused{ opacity:.72; }

    /* Ajustes para el tema claro */
    body.light .log-ok    { color:#047857; }
    body.light .log-warn  { color:#A16207; }
    body.light .log-danger{ color:#BE123C; }
    body.light .log-off   { color:#475569; }
    body.light .lic-batch-list{ background:rgb(0 0 0 / .04); }

/* =====================================================================
   MODAL DE DÍAS (extender / recortar licencias y usuarios)
   ===================================================================== */
#daysModal{
  position:fixed; inset:0; z-index:95; display:none; place-items:center;
  padding:1rem; background:rgb(0 0 0 / .62); backdrop-filter:blur(6px);
}
#daysModal.is-open{ display:grid; }
#daysModal.is-cut .seg-btn[data-days-mode="add"]{ color:var(--text-dim); }
#daysModal.is-cut .seg-btn[data-days-mode="cut"]{ background:rgb(var(--accent-rgb) / .16); color:var(--text); }

.days-card{
  width:100%; max-width:430px; border-radius:1.1rem; padding:1.25rem;
  border:1px solid rgb(var(--line-rgb) / .12); background:rgb(var(--ink2-rgb) / .97);
  box-shadow:0 30px 70px -30px rgb(0 0 0 / .8);
}

/* Selector segmentado Extender / Quitar */
.seg{ display:inline-flex; gap:.25rem; padding:.25rem; border-radius:.75rem; background:rgb(var(--line-rgb) / .8); }
.seg-btn{
  display:inline-flex; align-items:center; gap:.4rem; border:0; cursor:pointer;
  border-radius:.55rem; padding:.4rem .8rem; font-size:.75rem; font-weight:600;
  color:var(--text-dim); background:transparent; transition:background .15s, color .15s;
}
.seg-btn:hover{ color:var(--text); }
.seg-btn.is-active{ background:rgb(var(--accent-rgb) / .18); color:var(--text); }

/* Atajos rápidos de días */
.days-chip{
  cursor:pointer; border-radius:.6rem; padding:.35rem .7rem; font-size:.72rem; font-weight:600;
  border:1px solid rgb(var(--line-rgb) / .14); background:rgb(var(--line-rgb) / .7);
  color:var(--text-dim); transition:border-color .15s, color .15s, background .15s;
}
.days-chip:hover{ color:var(--text); border-color:rgb(var(--accent-rgb) / .45); }
.days-chip.is-active{ border-color:rgb(var(--accent-rgb) / .7); background:rgb(var(--accent-rgb) / .16); color:var(--text); }

.days-preview{
  border-radius:.8rem; padding:.7rem .9rem;
  border:1px dashed rgb(var(--line-rgb) / .18); background:rgb(var(--line-rgb) / .5);
}

/* =====================================================================
   DEPENDENCIAS DEL SDK (tarjetas de descarga .lib)
   ===================================================================== */
.lib-card{
  display:flex; align-items:center; gap:.75rem; border-radius:.9rem; padding:.85rem .95rem;
  border:1px solid rgb(var(--line-rgb) / .12); background:rgb(var(--line-rgb) / .6);
  transition:border-color .15s, transform .15s;
}
.lib-card:hover{ border-color:rgb(var(--accent-rgb) / .45); transform:translateY(-1px); }
.lib-card .lib-icon{
  display:grid; place-items:center; width:2.1rem; height:2.1rem; flex-shrink:0;
  border-radius:.65rem; background:rgb(var(--accent-rgb) / .14); color:var(--accent-lt-rgb);
}
.lib-card .lib-name{ font-size:.8rem; font-weight:700; color:var(--text); }
.lib-card .lib-size{ font-size:.7rem; color:var(--text-dim); }
/* El binario no esta publicado: la tarjeta informa en vez de dar un 404 */
.lib-card.is-missing{
  border-style:dashed; border-color:rgb(var(--line-rgb) / .18);
  background:rgb(var(--line-rgb) / .3); cursor:default;
}
.lib-card.is-missing:hover{ border-color:rgb(var(--line-rgb) / .28); transform:none; }
.lib-card.is-missing .lib-icon{ background:rgb(var(--line-rgb) / .1); color:rgb(var(--text-rgb) / .45); }
.lib-card.is-missing .lib-name{ color:rgb(var(--text-rgb) / .65); }
.lib-card.is-missing .lib-size{ color:var(--accent-lt-rgb); }