/* ============================================================================
   THEME SHELL · Ninja WMS renovado
   Esqueleto del panel: menú lateral, barra superior, barras de aviso (anuncio,
   verificación, módulo bloqueado), login y muro de plan. Referencia visual:
   Sidebar.dc.html, Dashboard.dc.html, Bloqueado.dc.html y Main.dc.html.
   Va después del CSS inline y de theme-base.css; mobile.css va después y manda
   en ≤860 px, por eso lo exclusivo de escritorio vive en @media(min-width:861px).
   Todo color de marca usa var(--primary) y derivados: la operación puede
   cambiarlo en vivo (applyOperationBranding).
   ========================================================================== */

/* Tokens propios del esqueleto (el ámbar del bloqueo y el WhatsApp). */
:root{
  --side-w:240px; --side-w-mini:72px;
  --lock-bg:#FFF8EB; --lock-line:#F6D9A8; --lock-ic:#C2690C; --lock-ink:#0B1220;
  --wa:#25D366; --wa-ink:#0B2E18;
  --field-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --lock-bg:color-mix(in srgb,#C2690C 16%, var(--surface)); --lock-line:color-mix(in srgb,#C2690C 42%, var(--surface));
  --lock-ic:#F2B64C; --lock-ink:var(--ink);
}}
:root[data-theme="dark"]{
  --lock-bg:color-mix(in srgb,#C2690C 16%, var(--surface)); --lock-line:color-mix(in srgb,#C2690C 42%, var(--surface));
  --lock-ic:#F2B64C; --lock-ink:var(--ink);
}

/* ---------------------------------------------------------------------------
   1. LAYOUT
   ------------------------------------------------------------------------- */
.layout{grid-template-columns:var(--side-w) 1fr}
.content{padding:26px 32px 48px;max-width:none}

/* ---------------------------------------------------------------------------
   2. MENÚ LATERAL
   ------------------------------------------------------------------------- */
.side{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;border-right:1px solid var(--line);
  padding:0;gap:0;font-family:var(--font,"Inter",sans-serif)}

/* Marca + saludo, separados del resto por un borde. */
.side .side-head{padding:26px 20px 20px;display:flex;flex-direction:column;gap:16px;border-bottom:1px solid var(--line)}
.side .brand{padding:0}
.side .brand .brandlogo-svg{width:122px}
/* El logo SVG trae Sora como atributo; el CSS le gana al atributo de presentación. */
.side .brand .brandlogo-svg text{font-family:"Inter",sans-serif;font-weight:800;letter-spacing:-.03em}
.side .brand .brandlogo img{width:150px}
.side .side-who{display:flex;align-items:center;gap:10px;min-width:0}
/* El avatar sigue existiendo (mobile.js lo copia al chip de contexto), pero el canvas no lo muestra. */
.side .side-who .av{display:none}
.side .side-who-t{min-width:0}
.side .side-who .nm{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* app.js escribe el rol en mayúsculas ("PLATFORM ADMIN"): se lee mejor en tipo oración. */
.side .side-who .rl{font-size:12px;color:var(--ink-3);margin-top:3px;text-transform:lowercase}
.side .side-who .rl::first-letter{text-transform:uppercase}

/* Mi Cuenta + "Carga tus órdenes" */
.side .side-account{padding:18px 14px 4px;display:flex;flex-direction:column;gap:12px}
.side .side-account[hidden]{display:none}
.side .side-acc-lbl{font-size:12.5px;color:var(--ink-2);font-weight:500;padding:0 6px}
.side .side-upload{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border:0;border-radius:10px;
  background:var(--dark-btn,#0B1220);color:var(--dark-btn-ink,#fff);font-size:14px;font-weight:600;cursor:pointer;
  font-family:inherit;text-align:left;transition:filter .12s ease}
.side .side-upload:hover{filter:brightness(1.25)}
.side .side-upload svg{flex:none}

/* Lista de navegación */
.side .side-nav{padding:14px;display:flex;flex-direction:column;gap:3px}
.side .navcat{gap:0}
.side .nav,.side .navcat-h{height:42px;padding:0 12px;gap:12px;border-radius:10px;font-size:14.5px;font-weight:500;
  color:var(--ink-2);box-shadow:none;line-height:1.2;white-space:nowrap}
.side .nav:hover,.side .navcat-h:hover{background:var(--surface-2);color:var(--ink)}
.side .nav .ic,.side .navcat-h .ic{width:18px;height:18px;flex:none;display:inline-flex;align-items:center;justify-content:center;opacity:1}
.side .nav .ic svg,.side .navcat-h .ic svg{display:block}
.side .nav.on{background:var(--primary-wash);color:var(--primary-ink);font-weight:500;box-shadow:none}
.side .nav.on .ic{color:var(--primary-ink)}
/* Categoría: el chevron mira abajo cerrada y arriba abierta. */
.side .navcat-h .navcat-lbl{flex:1;min-width:0;white-space:normal;line-height:1.2}
/* Rótulos largos ("Inventario y ubicaciones") bajan a dos líneas en vez de cortarse. */
.side .navcat-h{height:auto;min-height:42px;padding-top:8px;padding-bottom:8px;text-align:left}
.side .navcat .navcat-arrow{margin-left:auto;display:inline-flex;opacity:.8;transform:rotate(180deg);transition:transform .15s ease}
.side .navcat.collapsed .navcat-arrow{transform:none}
.side .navcat.has-active>.navcat-h{background:var(--primary-wash);color:var(--primary-ink)}
/* Subítems: indentados con una guía vertical, sin ícono (como el canvas). */
.side .navcat-body{margin:4px 0 8px 21px;padding-left:13px;border-left:1px solid var(--line-2);gap:1px}
.side .nav.sub{height:34px;padding:0 10px;gap:8px;font-size:14px;border-radius:8px}
.side .nav.sub .ic{display:none}
.side .nav.sub.on{background:transparent;color:var(--primary-ink);font-weight:600}
.side .nav.sub.on:hover{background:var(--surface-2)}
/* Una categoría sin ningún ítem visible no se muestra (el webhook del CLIENT se
   oculta después de que app.js sincroniza las categorías). */
.side .navcat:not(:has(.nav:not(.hidden))){display:none}

/* Badges (conteo cíclico, chat, alertas) */
.side .nav .badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;box-sizing:border-box;
  background:var(--c-red-wash,#FDECEC);color:var(--c-red-ink,#D93A3A);font-size:11.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
.side .nav .badge:empty{display:none}
/* Categoría plegada con un badge adentro: theme-shell.js copia la suma en la
   cabecera (.navcat-badge) para que el contador se vea al entrar, como antes. */
.side .navcat-h .navcat-badge{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;box-sizing:border-box;
  background:var(--c-red-wash,#FDECEC);color:var(--c-red-ink,#D93A3A);font-size:11.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
.side .navcat-h .navcat-badge[hidden],.side .navcat:not(.collapsed)>.navcat-h .navcat-badge{display:none}

/* Candado de plan: app.js inserta un emoji; se esconde y se dibuja un candado gris. */
.side .nav.locked{opacity:1;color:var(--ink-3)}
.side .nav.locked:hover{opacity:1}
.side .nav .navlock{margin-left:auto;flex:none;width:14px;height:14px;font-size:0;line-height:0;color:transparent;background:#B8BEC9;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11h14v10H5z M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11h14v10H5z M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat}
.side .nav .badge~.navlock,.side .nav .navlock~.badge{margin-left:6px}

/* Pie: aprendizaje discreto, cerrar sesión en rojo y el sello. */
.side .spacer{flex:1}
.side .side-foot{border-top:1px solid var(--line);padding:12px 14px 18px;display:flex;flex-direction:column;gap:2px}
/* tutorial.js inyecta su <style> al final del <head>: se sube especificidad para ganarle. */
.side .side-foot .navlearn{height:38px;margin:0;padding:0 12px;gap:12px;border:0;border-radius:10px;background:transparent;
  color:var(--ink-3);font-size:13.5px;font-weight:500}
.side .side-foot .navlearn:hover{background:var(--surface-2);color:var(--ink-2);border-color:transparent}
.side .side-foot .navlearn .ic{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}
.side .side-foot .navout{height:42px;margin:0;padding:0 12px;gap:12px;border-radius:10px;color:var(--c-red,#E5484D);
  font-size:14.5px;font-weight:500}
.side .side-foot .navout .ic{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}
.side .side-foot .navout:hover{background:var(--crit-wash)}
.side .poweredby{padding:12px 12px 0}
.side .poweredby .pb-chip{box-shadow:none;border-color:var(--line)}

/* Botón de colapsar: círculo de 24 px sobre el borde derecho. Es fixed y no
   absolute porque el menú hace scroll y lo recortaría. app.js le escribe « / »:
   se oculta el texto y se dibuja un chevron que gira al colapsar. */
@media(min-width:861px){
  /* El menú es sticky (crea su propio contexto de apilado): se sube a z 14 para que
     el botón quede sobre la barra de anuncio (sticky, z 12) y bajo los modales (z 40). */
  .side{z-index:14}
  .sidetoggle{position:fixed;top:27px;left:calc(var(--side-w) - 12px);right:auto;transform:none;z-index:13;
    width:24px;height:24px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);
    color:var(--ink-3);font-size:0;box-shadow:var(--shadow);padding:0;display:flex;align-items:center;justify-content:center}
  .sidetoggle::before{content:"";width:12px;height:12px;background:currentColor;transition:transform .15s ease;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
  .sidetoggle:hover{color:var(--ink);background:var(--surface-2);border-color:var(--line-2)}
  .layout.sidecollapsed .sidetoggle{left:calc(var(--side-w-mini) - 12px)}
  .layout.sidecollapsed .sidetoggle::before{transform:rotate(180deg)}

  /* ---- Menú colapsado (solo íconos) ----
     Las reglas de arriba tienen más especificidad que las del inline, así que se
     repiten acá con .layout.sidecollapsed delante. */
  .layout.sidecollapsed{grid-template-columns:var(--side-w-mini) 1fr}
  .layout.sidecollapsed .side{padding:0;align-items:stretch}
  .layout.sidecollapsed .side .side-head{padding:22px 8px 16px;align-items:center}
  .layout.sidecollapsed .side .side-who{display:none}
  .layout.sidecollapsed .side .side-account{padding:14px 12px 0}
  .layout.sidecollapsed .side .side-acc-lbl{display:none}
  .layout.sidecollapsed .side .side-upload{justify-content:center;padding:0}
  .layout.sidecollapsed .side .side-upload span{display:none}
  .layout.sidecollapsed .side .side-nav{padding:12px}
  .layout.sidecollapsed .side .nav,.layout.sidecollapsed .side .navcat-h,
  .layout.sidecollapsed .side .side-foot .navlearn,.layout.sidecollapsed .side .side-foot .navout{
    font-size:0;justify-content:center;padding:0;gap:0;position:relative}
  .layout.sidecollapsed .side .nav.sub{height:38px}
  .layout.sidecollapsed .side .nav.sub .ic{display:inline-flex}
  .layout.sidecollapsed .side .navcat-lbl,.layout.sidecollapsed .side .navcat-arrow{display:none}
  .layout.sidecollapsed .side .navcat-body{margin:2px 0 6px;padding:0;border-left:0;border-top:1px dashed var(--line-2);padding-top:2px}
  .layout.sidecollapsed .side .nav .badge{position:absolute;top:2px;right:2px;transform:none;min-width:16px;height:16px;font-size:9.5px;padding:0 4px}
  .layout.sidecollapsed .side .navcat-h .navcat-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;font-size:9.5px;padding:0 4px}
  .layout.sidecollapsed .side .nav .navlock{position:absolute;right:4px;bottom:4px;width:10px;height:10px;margin:0}
  .layout.sidecollapsed .side .side-foot{padding:10px 12px 14px}
}

/* Tablet horizontal: mobile.css angosta el menú a 200 px. */
@media(min-width:861px) and (max-width:1100px){
  :root{--side-w:200px}
  .side .side-head{padding:22px 14px 16px}
  .side .side-nav{padding:12px 10px}
  /* Integración: a 200 px "Comunicación"/"Integraciones" (una sola palabra)
     no cabían y el chevron se montaba sobre el texto. Se ajusta el aire. */
  .side .nav,.side .navcat-h{padding-left:10px;padding-right:8px;gap:10px;font-size:14px}
  .side .navcat .navcat-arrow{flex:none}
}

/* ---------------------------------------------------------------------------
   3. BARRA SUPERIOR
   ------------------------------------------------------------------------- */
.topbar{min-height:88px;padding:14px 32px;gap:10px;row-gap:10px;background:var(--surface);
  backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--line);align-items:center}
.topbar .tb-title{min-width:0;flex:0 1 auto;margin-right:8px}
.topbar h2{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.topbar .sub{font-size:14px;color:var(--ink-2);margin-top:4px}

/* Chips discretos: tutorial y "al día". Sin display acá para respetar .hide/.hidden. */
.topbar .nt-topbtn{height:36px;padding:0 12px 0 6px;gap:8px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink-2);font-size:13px;font-weight:600;align-items:center}
.topbar .nt-topbtn:hover{border-color:var(--primary-line);color:var(--primary-ink)}
.topbar .nt-topbtn .pl{width:24px;height:24px;border-radius:999px;background:var(--primary-wash);color:var(--primary-ink);
  padding:0 0 0 1px;display:flex;align-items:center;justify-content:center}
.topbar .live-btn{height:36px;padding:0 12px;gap:7px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);
  color:var(--ink-2);font-size:12.5px;font-weight:600}
.topbar .live-btn:hover{color:var(--ink);border-color:var(--line-2);background:var(--surface-2)}
@media(max-width:1560px){
  .topbar .nt-topbtn{width:36px;padding:0;justify-content:center}
  .topbar .live-btn{width:36px;padding:0;justify-content:center}
}

/* Buscador */
.topbar .gsearch{flex:0 1 250px;min-width:170px}
.topbar .gsearch input{height:42px;padding:0 14px 0 40px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);
  color:var(--ink);font-size:14px}
.topbar .gsearch input::placeholder{color:var(--ink-3)}
.topbar .gsearch input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring,color-mix(in srgb,var(--primary) 18%,transparent))}
.topbar .gsearch .i{left:13px;color:var(--ink-3);display:flex;line-height:0;pointer-events:none}
.topbar .gsearch .res{top:48px;border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow-lg);background:var(--surface);min-width:300px}
.topbar .gsearch .res a{padding:11px 14px;font-size:13.5px}

/* Selectores de contexto con forma de campo de filtro: "Operación: valor". */
.topbar .sel{height:42px;padding:0 4px 0 14px;gap:4px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);
  cursor:pointer;min-width:0}
.topbar .sel:hover{border-color:color-mix(in srgb,var(--ink-3) 45%, var(--line-2))}
.topbar .sel:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring,color-mix(in srgb,var(--primary) 18%,transparent))}
.topbar .sel label{font-size:14px;font-weight:400;color:var(--ink-3);text-transform:none;letter-spacing:0;white-space:nowrap;cursor:pointer}
.topbar .sel label::after{content:":"}
.topbar .sel select{height:40px;border:0;background:transparent var(--field-chev) right 8px center/14px no-repeat;
  padding:0 28px 0 2px;font-size:14px;font-weight:600;color:var(--ink);border-radius:8px;box-shadow:none;
  -webkit-appearance:none;appearance:none;max-width:210px;cursor:pointer;text-overflow:ellipsis}
.topbar .sel select:focus{outline:none;box-shadow:none}
.topbar .sel select option{color:var(--ink);background:var(--surface)}

/* Integración: entre 861 y 1440 px la fila no cabía y los botones de tema y
   contraseña bajaban a una segunda línea pegados a la izquierda. Se compacta
   por pasos y, si aun así envuelve, la línea nueva se alinea a la derecha. */
.topbar{justify-content:flex-end}
.topbar .tb-title{margin-right:auto}
@media (min-width:861px) and (max-width:1440px){
  .topbar .gsearch{flex:1 1 160px;min-width:110px;max-width:220px}
  .topbar .sel select{max-width:200px}
  .topbar .tb-title h2,.topbar .tb-title .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* Bajo 1360 px el rótulo "Operación:"/"Cliente:" se oculta solo a la vista
   (sigue accesible por <label for>), porque el valor ya se entiende solo. */
@media (min-width:861px) and (max-width:1360px){
  .topbar .sel label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .topbar .sel{padding-left:10px}
}
/* flex-wrap decide con el ancho máximo del contenido, antes de encoger, así
   que el título nunca llegaba a recortarse: desde 1024 px se fuerza una sola
   fila y encogen título, buscador y selectores (los botones no). */
@media (min-width:1024px){
  .topbar{flex-wrap:nowrap}
  .topbar .tb-title{flex:0 1 auto;min-width:90px}
  .topbar .sel{flex:0 1 auto}
  .topbar .sel select{min-width:60px}
  .topbar .nt-topbtn,.topbar .live-btn,.topbar .iconbtn{flex:0 0 auto}
}

/* Botones de ícono: modo oscuro y contraseña (#btn-mypass lleva .btn: se neutraliza). */
.topbar .iconbtn{width:44px;height:44px;min-height:44px;padding:0;border-radius:12px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;flex:none;
  box-shadow:none;transform:none;font-size:0}
.topbar .iconbtn:hover{background:var(--surface-2);color:var(--ink);border-color:var(--line-2);transform:none;box-shadow:none}
.topbar .iconbtn:focus-visible{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring,color-mix(in srgb,var(--primary) 18%,transparent))}
.topbar .iconbtn span{display:inline-flex}
#theme-toggle .th-sun{display:none}
:root[data-theme="dark"] #theme-toggle .th-sun{display:inline-flex}
:root[data-theme="dark"] #theme-toggle .th-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #theme-toggle .th-sun{display:inline-flex}
  :root:not([data-theme="light"]) #theme-toggle .th-moon{display:none}
}

/* ---------------------------------------------------------------------------
   4. BARRAS SOBRE EL CONTENIDO
   ------------------------------------------------------------------------- */
/* Anuncio de plataforma: ya no es un degradé con texto blanco (sobre el verde
   Ninja no se leía): franja suave de marca con texto oscuro. */
.ann-bar{min-height:46px;padding:7px 32px;gap:12px;background:var(--primary-wash);color:var(--ink);
  border-bottom:1px solid var(--primary-line);box-shadow:none}
.ann-bar .ann-ic{display:inline-flex;color:var(--primary-ink);font-size:0}
.ann-bar .ann-text{font-size:14px;font-weight:600}
.ann-bar .ann-link{height:32px;padding:0 14px;border-radius:9px;background:var(--dark-btn,#0B1220);color:var(--dark-btn-ink,#fff);
  font-size:13px;font-weight:700}
.ann-bar .ann-link:hover{opacity:.9}
.ann-bar .ann-x{width:30px;height:30px;padding:0;border-radius:8px;color:var(--ink-3);display:inline-flex;align-items:center;justify-content:center}
.ann-bar .ann-x:hover{background:color-mix(in srgb,var(--ink) 7%, transparent);color:var(--ink)}

/* Verificación de email */
.verifybar{min-height:46px;padding:7px 32px;gap:12px;background:var(--lock-bg);border-bottom:1px solid var(--lock-line);
  color:var(--lock-ink);font-size:14px;align-items:center}
.verifybar .vb-ic{display:inline-flex;color:var(--lock-ic);flex:none}
.verifybar .vb-txt{flex:1;min-width:220px}
.verifybar .vb-btn{height:32px;padding:0 13px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface);
  color:var(--ink);font-size:13px;font-weight:600}
.verifybar .vb-btn:hover{background:var(--surface-2)}
.verifybar .vb-x{width:30px;height:30px;padding:0;border-radius:8px;color:var(--ink-3);display:inline-flex;align-items:center;justify-content:center}
.verifybar .vb-x:hover{background:color-mix(in srgb,var(--ink) 7%, transparent);color:var(--ink)}

/* Módulo fuera del plan (Bloqueado.dc.html). app.js pinta el botón con style="" según el rol. */
.lockbar{min-height:48px;padding:7px 32px;gap:12px;background:var(--lock-bg);border-bottom:1px solid var(--lock-line);
  color:var(--lock-ink);font-size:14px;align-items:center}
.lockbar .lb-ic{display:inline-flex;color:var(--lock-ic);font-size:0}
.lockbar .lb-txt{flex:1}
.lockbar .lb-wa{height:34px;padding:0 14px;border-radius:9px;font-size:13px;font-weight:800;color:var(--wa-ink)}

/* ---------------------------------------------------------------------------
   5. MURO DE PLAN (popup que abre app.js dentro del modal genérico)
   ------------------------------------------------------------------------- */
.paywall{padding:10px 8px 4px;display:flex;flex-direction:column;align-items:center;text-align:center}
/* El JS pone un emoji de candado: se oculta y se dibuja el ícono del canvas. */
.paywall .pw-ic{width:60px;height:60px;margin:0 0 16px;border-radius:16px;background:var(--lock-bg);border:1px solid var(--lock-line);
  font-size:0;line-height:0;display:flex;align-items:center;justify-content:center}
.paywall .pw-ic::before{content:"";width:26px;height:26px;background:var(--lock-ic);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11h14v10H5z M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11h14v10H5z M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat}
.paywall h4{font-family:"Inter",sans-serif;font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.paywall .pw-txt{font-size:14px;line-height:1.55;color:var(--ink-2);max-width:380px;margin:0 auto 6px}
.paywall .pw-plan{height:30px;padding:0 14px;border-radius:999px;background:var(--bg);border:1px solid var(--line);
  font-size:13px;color:var(--ink-3);margin:18px 0 22px;display:inline-flex;align-items:center;gap:6px}
.paywall .pw-plan b{color:var(--ink)}
.paywall .pw-acts{gap:10px}
.paywall .pw-wa{height:48px;padding:0 22px;border-radius:12px;background:var(--wa);color:var(--wa-ink);font-size:15px;font-weight:800;
  display:inline-flex;align-items:center;gap:9px;box-shadow:0 12px 24px -14px rgba(37,211,102,.95)}
.paywall .pw-close{height:48px;padding:0 20px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);
  color:var(--ink-2);font-size:14.5px;font-weight:600}
.paywall .pw-close:hover{background:var(--surface-2);color:var(--ink)}
.paywall .pw-foot{margin-top:16px;font-size:12px;color:var(--ink-3)}

/* ---------------------------------------------------------------------------
   6. LOGIN (Main.dc.html) — la caja 3D y el CTA animado quedan como estaban
   ------------------------------------------------------------------------- */
.loginov{background:radial-gradient(640px 420px at 82% 6%, color-mix(in srgb,var(--primary) 9%, transparent), transparent 62%), var(--bg)}
.loginov::after{display:none}
.loginbox{width:420px;max-width:92vw;background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid var(--line);border-radius:20px;box-shadow:0 1px 2px rgba(16,24,40,.04),var(--shadow-lg);overflow:hidden}
/* El relleno pasa a cada vista para que la cabecera pueda ir de borde a borde.
   (No se toca el display de .lgview: el JS alterna vistas con el atributo hidden.) */
.loginov .loginbox{padding:0}
.loginbox .lgview{padding:28px 30px 30px}
.loginbox .lg-head{position:relative;margin:-28px -30px 26px;padding:32px 30px 26px;border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:10px;overflow:hidden}
.loginbox .lg-head::before{content:"";position:absolute;top:-60px;right:-60px;width:260px;height:260px;border-radius:999px;pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb,var(--primary) 16%, transparent), transparent)}
.loginbox .lg-mark{position:relative;width:60px;height:60px;border-radius:16px;background:var(--primary-wash);border:1px solid var(--primary-line);
  color:var(--primary-ink);display:flex;align-items:center;justify-content:center}
.loginbox .lg-app{position:relative;font-size:27px;font-weight:800;letter-spacing:-.03em;margin-top:6px;color:var(--ink);line-height:1.1}
.loginbox .lg-app .a{color:var(--primary)}
.loginbox .lg-tag{position:relative;font-size:14px;color:var(--ink-3)}
.loginbox h1,.lgview h1{font-family:"Inter",sans-serif;font-size:19px;font-weight:700;letter-spacing:-.01em;margin:0 0 6px;color:var(--ink)}
.loginbox p{font-size:14px;color:var(--ink-3);margin:0 0 18px}
.loginbox .lgview[data-view="login"] h1{margin-bottom:8px}
.loginbox label{font-size:13.5px;font-weight:600;color:var(--ink-2);margin:0 0 8px}
.loginbox input,.loginbox select{height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:10px;background-color:var(--bg);
  color:var(--ink);font-size:15px;margin-bottom:16px;font-family:inherit}
.loginbox select{font-size:14px}
.loginbox input:focus,.loginbox select:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 4px var(--primary-ring,color-mix(in srgb,var(--primary) 18%,transparent))}
/* Íconos de sobre y candado dentro del campo, como en el canvas. */
.loginbox input[type="email"],.loginbox input[type="password"]{padding-left:42px;background-repeat:no-repeat;background-position:14px center;background-size:18px}
.loginbox input[type="email"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z M22 6l-10 7L2 6'/%3E%3C/svg%3E")}
.loginbox input[type="password"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11h14v10H5z M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E")}
.loginbox .b{height:46px;padding:0 16px;border:0;border-radius:10px;background:var(--primary);color:var(--on-primary);font-size:15px;font-weight:700;
  box-shadow:0 10px 22px -12px color-mix(in srgb,var(--primary) 80%, transparent);margin-top:4px}
.loginbox .b:hover{filter:brightness(1.04)}
.loginbox .lgrow{margin:12px 0 0;text-align:right}
.loginbox .lg-link{color:var(--primary-ink);font-size:13px;font-weight:600}
.loginbox .hint{font-size:13px;color:var(--ink-3);margin-top:16px}
.loginbox .err{font-size:13px}
/* CTA "Crea tu cuenta gratis": solo cambia su forma; la animación (v136) sigue viva. */
.loginbox .lgcta{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.loginbox .lgcta .lgcta-q{font-size:13px;color:var(--ink-3);margin:0 0 10px}
.loginbox .lgcta-btn{height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--primary-line);
  background:var(--primary-wash);color:var(--ink);font-size:14px;font-weight:700}
.loginbox .lgcta-btn .lgcta-ic{display:inline-flex;color:var(--primary-ink)}
.loginbox .lgcta .lgcta-sub{font-size:12px;color:var(--ink-3);margin:10px 0 0}

/* ---------------------------------------------------------------------------
   7. MÓVIL (≤860 px): lo nuevo del esqueleto dentro del cajón de mobile.js
   ------------------------------------------------------------------------- */
@media(max-width:860px){
  .side .side-head{padding:6px 4px 14px;gap:10px}
  .side .side-head .m-side-head{padding:0}
  .side .side-account{padding:14px 4px 4px}
  .side .side-nav{padding:10px 0}
  .side .nav,.side .navcat-h{height:46px;font-size:15px}
  .side .nav.sub{height:40px;font-size:14.5px;padding:0 10px}
  .side .side-foot{padding:12px 0 8px}
  .topbar{min-height:0}
  .topbar .iconbtn{width:40px;height:40px;min-height:40px;border-radius:11px}
  .topbar #theme-toggle{order:3}
  .topbar .sel{height:auto;padding:6px 10px;flex-direction:column;align-items:stretch}
  .topbar .sel select{max-width:none;width:100%;height:36px}
  .ann-bar,.verifybar,.lockbar{padding-left:12px;padding-right:12px}
  .loginbox .lgview{padding:24px 20px 24px}
  .loginbox .lg-head{margin:-24px -20px 22px;padding:24px 20px 20px}
}