/* NodosDigitales OS — Design system v1 (Sprint 1) */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
dialog{margin:auto}
:root{
  --ink:#0D1B2A;--ink2:#14263A;--amber:#E8922A;--amber-soft:#F5B45E;
  /* Naranja vívido medido directo del logo/mascota de Aluminero — SOLO para
     la pantalla de login (ver reglas .login más abajo). El resto de la app
     sigue con --amber de siempre: recolorearla toda es un cambio aparte,
     más grande, que no se hizo aquí a propósito (2026-08-30). */
  --login-accent:#F87406;--login-accent-soft:#FCA355;
  --bg:#EEF1F5;--card:#FFF;--txt:#1A2432;--txt2:#6B7686;--txt3:#9AA4B2;
  --green:#1E9E6A;--green-bg:#E4F6EE;--warn:#B97A15;--warn-bg:#FBF0DC;
  --blue:#2E6FD0;--blue-bg:#E8F0FC;--red:#C43D3D;--red-bg:#FBE3E3;--red-ink:#8a2b2b;
  --r-xl:32px;--r-lg:26px;--r-md:20px;--r-sm:14px;
  --sh-1:0 2px 8px rgba(13,27,42,.05),0 12px 32px rgba(13,27,42,.08);
  --sh-2:0 4px 14px rgba(13,27,42,.08),0 24px 56px rgba(13,27,42,.16);
}
:root[data-theme="dark"]{
  --bg:#0B121A;--card:#182430;--txt:#EAEDF1;--txt2:#9BA5B2;--txt3:#6C7684;
  --green-bg:rgba(30,158,106,.18);--warn-bg:rgba(185,122,21,.22);
  --blue-bg:rgba(46,111,208,.22);--red-bg:rgba(196,61,61,.22);--red-ink:#F5B7B7;
  --sh-1:0 2px 8px rgba(0,0,0,.25),0 12px 32px rgba(0,0,0,.3);
  --sh-2:0 4px 14px rgba(0,0,0,.3),0 24px 56px rgba(0,0,0,.45);
}
:root[data-theme="dark"] .btn{border-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{color:var(--txt);border-color:rgba(255,255,255,.16)}
:root[data-theme="dark"] .kbtn-fwd{background:var(--amber);color:#0D1B2A;border-color:var(--amber)}

/* Cuadro de "captura rápida" (Cotizador) — colores propios en vez de la
   variable --blue-bg compartida, para que se note la diferencia real entre
   claro y oscuro en vez de solo atenuar el mismo tono. */
.cr-quickbox{background:#DCEBFF;border:2px solid #2E6FD0}
.cr-quickbox p{color:#1B4F9C}
:root[data-theme="dark"] .cr-quickbox{background:rgba(46,111,208,.3);border-color:#5B9BF0}
:root[data-theme="dark"] .cr-quickbox p{color:#9CC7FF}
:root[data-theme="dark"] .ag-check{border-color:rgba(255,255,255,.3)}
body{font-family:"Inter",system-ui,sans-serif;background:var(--bg);color:var(--txt);min-height:100dvh;overscroll-behavior-y:contain}
html{overscroll-behavior-y:contain}
.hidden{display:none!important}
a{color:inherit;text-decoration:none}
/* Sin background/border aquí, un <button> "desnudo" (como #bnav-more, el
   botón "Más" del menú inferior) hereda el fondo/borde gris de fábrica del
   navegador — se nota mucho sobre el nav oscuro nuevo. Cualquier botón que
   sí quiera fondo ya lo trae explícito (.btn, .btn-primary, etc.), así que
   resetear solo estos dos es seguro en todos lados (no toco padding/margin
   para no mover botones que ya dependían del default en algún lugar). */
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
.link{color:var(--blue);font-weight:600;font-size:12.5px}

/* ── Botones ─────────────────────────────── */
.btn{border:1px solid rgba(13,27,42,.12);background:var(--card);color:var(--txt);font-weight:600;font-size:13.5px;padding:11px 18px;border-radius:var(--r-sm);transition:transform .15s,box-shadow .15s}
.btn:active{transform:scale(.97)}
/* Un <select class="btn"> se queda en :active todo el tiempo que el menú
   nativo está abierto (no solo el instante del clic, como en un <button>) —
   con el scale(.97) de arriba eso se veía como si el botón temblara. */
select.btn:active{transform:none}
.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:var(--sh-1)}
.btn-primary:hover{background:var(--ink2)}
.btn-block{width:100%}
.btn:disabled{opacity:.6;cursor:wait}

/* ── Login ───────────────────────────────────────────────────────
   Paleta propia de esta pantalla (--login-accent), separada de --amber
   que usa el resto de la app — ver nota junto a --login-accent arriba. */
.login{min-height:100dvh;display:flex;align-items:center;justify-content:center;background:var(--ink);position:relative;overflow:hidden;padding:14px}
.login-blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.28;pointer-events:none}
.b1{width:420px;height:420px;background:var(--login-accent);bottom:-200px;left:-160px}
.b2{width:360px;height:360px;background:#2E6FD0;top:-160px;right:-120px;opacity:.18}
/* Estructura en 3 piezas independientes (login-header / login-mascot /
   login-form-col) para poder reacomodarlas distinto en PC vs celular con
   grid-template-areas, sin duplicar HTML. */
.login-card{position:relative;width:100%;max-width:920px;max-height:98dvh;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;grid-template-areas:"header mascot" "form mascot";background:rgba(255,255,255,.06);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-xl);color:#fff;box-shadow:var(--sh-2);animation:pop .5s cubic-bezier(.2,.8,.3,1);overflow:hidden}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}}
.login-header{grid-area:header;padding:34px 38px 0;min-width:0}
.login-form-col{grid-area:form;padding:0 38px 30px;display:flex;flex-direction:column;min-width:0}
.login-logo{font-size:38px;font-weight:800;letter-spacing:.02em;position:relative;z-index:1}
.login-logo span{color:var(--login-accent)}
.login h1{font-size:26px;font-weight:700;margin-top:12px;line-height:1.25;text-wrap:balance;position:relative;z-index:1}
.login h1 span{color:var(--login-accent)}
.login-sub{font-size:15px;color:rgba(255,255,255,.65);margin-top:6px;position:relative;z-index:1}
.login form{margin-top:18px;display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
.login label{font-size:12px;font-weight:600;color:rgba(255,255,255,.75);display:flex;flex-direction:column;gap:6px}
.login-input-wrap{position:relative;display:flex;align-items:center}
.login-input-wrap svg{position:absolute;left:14px;opacity:.5;pointer-events:none}
.login input{width:100%;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.16);border-radius:var(--r-sm);padding:12px 14px 12px 40px;color:#fff;font-size:14px;font-family:inherit;outline:none;transition:border .2s,box-shadow .2s}
.login input:focus{border-color:var(--login-accent);box-shadow:0 0 0 4px rgba(248,116,6,.16)}
.login input::placeholder{color:rgba(255,255,255,.35)}
.login-forgot{align-self:flex-end;font-size:11.5px;font-weight:600;color:var(--login-accent-soft);margin-top:-6px}
.login-forgot:hover{text-decoration:underline}
.login-error{color:#FFB4A8;font-size:12.5px;min-height:16px}
.login code{color:var(--login-accent-soft);font-size:11px;word-break:break-all}
.login .btn-primary{background:var(--login-accent);border-color:var(--login-accent);color:var(--ink);transition:transform .2s cubic-bezier(.2,.8,.2,1),filter .2s,box-shadow .15s}
.login .btn-primary:hover{background:var(--login-accent);filter:brightness(1.08);transform:scale(1.02)}
.login .btn-primary:active{transform:scale(.98)}
.login-btn-secondary{display:block;width:100%;text-align:center;background:transparent;color:var(--login-accent-soft);border:1.5px solid rgba(248,116,6,.4);border-radius:var(--r-sm);padding:11px;font-size:13px;font-weight:700;margin-top:10px;transition:background .2s}
.login-btn-secondary:hover{background:rgba(248,116,6,.1)}
.login-attrib{text-align:center;font-size:10.5px;color:rgba(255,255,255,.4);margin-top:12px;position:relative;z-index:1}
.login-trust{display:flex;gap:16px;margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);position:relative;z-index:1}
.login-trust button{flex:1;text-align:center;font-size:10px;color:rgba(255,255,255,.45);font-weight:600;line-height:1.4;cursor:pointer;transition:color .15s}
.login-trust button:hover{color:rgba(255,255,255,.8)}
.login-trust svg{display:block;margin:0 auto 6px;opacity:.6}
/* La imagen de la mascota ya trae fondo transparente de verdad (con
   degradado hacia transparente en las orillas) — no un fondo negro sólido —
   así que no hace falta ningún truco de gradiente para disimular una unión;
   con object-fit:contain se ve completa y a un tamaño natural. */
.login-mascot{grid-area:mascot;position:relative;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;padding:20px 10px}
.login-mascot img{max-width:100%;max-height:100%;object-fit:contain}
@media (max-width:760px){
  .login{padding:12px}
  .b1{opacity:.14}
  /* La mascota pasa a estar AL LADO del texto (no arriba ni encima) —
     encabezado+mascota comparten fila, el formulario va abajo a lo ancho. */
  .login-card{grid-template-columns:1.35fr 1fr;grid-template-rows:auto auto;grid-template-areas:"header mascot" "form form";max-width:420px;max-height:96dvh;overflow-y:auto}
  .login-header{grid-area:header;padding:20px 0 6px 20px;align-self:end;display:flex;flex-direction:column;justify-content:space-between}
  .login-mascot{grid-area:mascot;height:auto;padding:10px 8px 0 0;align-self:end}
  .login-mascot img{max-height:210px}
  .login-form-col{grid-area:form;padding:10px 22px 18px;gap:0}
  .login-logo{font-size:30px}
  .login h1{font-size:19px;margin-top:10px}
  .login-sub{font-size:13px;margin-top:5px}
  .login form{margin-top:14px;gap:10px}
  .login label{font-size:11px;gap:4px}
  .login input{padding:10px 12px 10px 38px;font-size:13px}
  .login-attrib{margin-top:6px;font-size:10px}
  .login-trust{margin-top:6px;padding-top:6px;gap:6px}
  .login-trust button{font-size:7.5px;line-height:1.25}
  .login-trust svg{margin-bottom:2px;width:12px;height:12px}
  .login-btn-secondary{padding:9px;font-size:12px;margin-top:8px}
}
@media (max-width:760px) and (max-height:700px){
  .login-trust{display:none}
}

/* ── App layout ──────────────────────────── */
.app{display:flex;min-height:100dvh}
.sidebar{width:232px;flex-shrink:0;background:var(--ink);color:rgba(255,255,255,.85);padding:18px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100dvh}
.side-brand{font-size:16px;font-weight:800;letter-spacing:.03em;color:#fff;padding:0 8px}
.side-brand span{color:var(--amber)}
.side-org{margin:14px 0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-sm);padding:10px 12px;display:flex;align-items:center;gap:10px}
/* La "A" es casi el logo de la marca — fondo naranja vívido y letra
   blanca (invertido de como estaba), y más grande para que se note como
   insignia, no como un ícono más. Solo aplica a la letra; un logoUrl real
   (Industrial) sigue mostrando la imagen tal cual, sin este tratamiento. */
.org-dot{width:68px;height:68px;border-radius:16px;background:var(--login-accent);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;font-size:30px;font-weight:800;color:#fff}
.org-dot img{width:60px;height:60px;object-fit:contain;display:block}
/* Un logo real subido (Industrial) puede traer cualquier color/transparencia
   — fondo blanco neutro para que no choque, a diferencia de la letra "A"
   que sí lleva el naranja de marca. */
.org-dot:has(img){background:#fff}
.side-org b{font-size:12px;color:#fff;display:block}
.side-org small{font-size:11px;color:rgba(255,255,255,.45)}
/* PRO-249.3 Q3 — selector Modo Admin / Modo Taller (tarjeta del taller y hoja "Más").
   Control segmentado sobre el navy: el modo activo lleva el naranja de la marca
   (aria-pressed="true"); el inactivo queda en texto tenue. Nunca desborda la tarjeta. */
.side-org > div{flex:1;min-width:0}
.modo-selector{display:flex;gap:2px;margin-top:8px;padding:2px;width:100%;max-width:220px;box-sizing:border-box;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:999px}
.modo-btn{flex:1 1 0;min-width:0;border:0;background:transparent;color:rgba(255,255,255,.62);font:inherit;font-size:11px;font-weight:700;padding:5px 4px;border-radius:999px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s}
.modo-btn:hover{color:#fff}
.modo-btn[aria-pressed="true"]{background:var(--login-accent);color:#fff;box-shadow:0 2px 8px -2px rgba(248,116,6,.6)}
.modo-btn:focus-visible{outline:2px solid var(--login-accent-soft);outline-offset:1px}
/* "Plan X" en verde en vez de "org activa" — mismo lenguaje que el chip
   ✓ Activo de Facturación: esto es real, no una demo. !important porque
   ".sheet-org-info small"/".side-org small" (más abajo) compiten por el
   mismo <small> y empatan en especificidad — sin esto gana el gris. */
.side-org-plan{color:#22C55E !important;font-weight:700;display:inline-flex;align-items:center;gap:5px}
.side-org-plan i{width:6px;height:6px;border-radius:50%;background:#22C55E;flex-shrink:0}
.side-nav{flex:1;min-height:0;display:flex;flex-direction:column;gap:2px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.side-nav::-webkit-scrollbar{width:5px}
.side-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:4px}
.side-nav::-webkit-scrollbar-track{background:transparent}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;font-size:13px;font-weight:500;color:rgba(255,255,255,.86);transition:background .15s,color .15s;position:relative}
.nav-section .nav-item{color:rgba(255,255,255,.6);font-weight:400}
/* Ítems sueltos (sin group, ej. Inicio) van justo antes de los encabezados
   de sección en MAYÚSCULAS y negritas — con el mismo peso que un ítem
   normal se veían apagados/perdidos junto a ellos, aunque sean el destino
   más importante (la pantalla de inicio). Más blanco y más grueso cuando
   NO está activo para que compita visualmente; .active ya se ve bien. */
#side-nav > .nav-item:not(.active){color:#fff;font-weight:700}
.nav-item:hover{background:rgba(255,255,255,.06)}
.nav-item.active{background:rgba(248,116,6,.18);color:var(--login-accent-soft);font-weight:700}
.nav-item.active::before{content:"";position:absolute;left:-6px;top:22%;bottom:22%;width:3px;border-radius:3px;background:var(--login-accent)}
.nav-ico{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.nav-ico svg{width:16px;height:16px}
.nav-badge{margin-left:auto;font-size:10.5px;font-weight:700;background:rgba(255,255,255,.1);color:rgba(255,255,255,.5);padding:2px 7px;border-radius:9px}
.nav-group{margin:14px 4px 4px;padding:0 8px;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.28)}
.side-nav .nav-group:first-child{margin-top:2px}
.sheet-group{margin:16px 6px 4px;padding:0 4px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.sheet-nav .sheet-group:first-child{margin-top:0}

/* ── Sidebar: secciones colapsables por grupo ─── */
.nav-section{margin-top:6px;background:var(--ink2);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:4px 6px 5px;overflow:hidden}
.nav-section .nav-group-btn{margin:5px 2px 3px;padding:0 2px}
.nav-section-items{display:flex;flex-direction:column;gap:2px;overflow:hidden;max-height:600px;transition:max-height .22s ease,padding .22s ease}
.nav-section.collapsed{padding-bottom:4px}
.nav-section.collapsed .nav-section-items{max-height:0}
.nav-group-arrow{font-size:10px;opacity:.9;transition:transform .18s ease}
.nav-section.collapsed .nav-group-arrow{transform:rotate(-90deg)}
.nav-group-btn{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;margin:8px 4px 4px;padding:0 8px;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.58);transition:color .15s}
.nav-group-btn:hover{color:rgba(255,255,255,.85)}
.side-user{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:6px}
.u-avatar{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.u-info{min-width:0}
.u-info b{font-size:12.5px;color:#fff;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-info small{font-size:11px;color:rgba(255,255,255,.45)}
.u-out{flex-shrink:0;background:none;border:0;color:rgba(255,255,255,.4);font-size:16px;padding:6px;border-radius:8px}
.u-out:first-of-type{margin-left:auto}
.u-out:hover{color:#FFB4A8;background:rgba(255,255,255,.06)}
/* El botón de cerrar sesión no debe depender solo del tooltip nativo (title=)
   para distinguirse — en pantallas táctiles ese tooltip nunca aparece, y con
   el mismo tono apagado que 🔕/🌙 pasaba casi invisible. */
.u-out[data-logout]{color:rgba(255,180,168,.75)}
.u-out[data-logout]:hover{color:#FFB4A8;background:rgba(255,180,168,.12)}

.main{flex:1;min-width:0;padding:26px clamp(16px,3vw,36px) 110px}
.module-root{max-width:1180px;margin:0 auto;animation:fadein .35s ease}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}}

/* ── Inicio (pantalla de bienvenida, todos los niveles) ──── */
.inicio-hola{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.inicio-hola h1{font-size:clamp(19px,2.4vw,23px);font-weight:800;letter-spacing:-.01em}
.inicio-hola .sub{font-size:13px;margin-top:2px}
.inicio-bell-wrap{position:relative;flex-shrink:0}
.inicio-bell{width:40px;height:40px;border-radius:50%;background:var(--card);box-shadow:var(--sh-1);font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s;position:relative}
.inicio-bell:active{transform:scale(.92)}
.inicio-bell-dot{position:absolute;top:6px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid var(--card)}
.inicio-notif-panel{position:absolute;top:calc(100% + 8px);right:0;width:280px;max-width:calc(100vw - 40px);background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:14px;z-index:20}
.inicio-notif-head{font-size:13px;margin-bottom:8px}
.inicio-notif-label{display:block;font-size:11px;color:var(--txt3);text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px}
.inicio-aviso-item{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--bg)}
.inicio-aviso-item:last-child{border-bottom:0}
.inicio-aviso-item b{font-size:12.5px}
.inicio-aviso-item small{font-size:11.5px;color:var(--txt2);line-height:1.4}
.inicio-aviso-item .inicio-act-cuando{font-size:10.5px;color:var(--txt3)}
.inicio-notif-divider{height:1px;background:var(--bg);margin:10px 0}
.inicio-notif-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px}
.inicio-notif-push-btn{width:32px;height:32px;border-radius:50%;background:var(--bg);flex-shrink:0;font-size:14px;display:flex;align-items:center;justify-content:center}

.inicio-cta{position:relative;display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,var(--login-accent) 0%,#FF9A47 100%);color:#fff;border-radius:var(--r-lg);padding:20px 120px 20px 22px;text-decoration:none;margin-top:28px;transition:transform .15s,box-shadow .15s;box-shadow:0 10px 26px -8px rgba(248,116,6,.55)}
.inicio-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(248,116,6,.6)}
.inicio-cta:active{transform:translateY(0) scale(.99)}
.inicio-cta-ico{font-size:22px;font-weight:800;color:var(--login-accent);background:#fff;width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1}
.inicio-cta-txt{flex:1;min-width:0;position:relative;z-index:1}
.inicio-cta-txt b{font-size:16px;display:block}
.inicio-cta-txt small{font-size:12px;opacity:.9}
.inicio-cta-bot{position:absolute;right:14px;top:-34px;height:120px;width:auto;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(13,27,42,.35));pointer-events:none;z-index:2}
.inicio-cta-arrow{position:absolute;right:18px;bottom:14px;font-size:15px;font-weight:800;color:var(--login-accent);background:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1}
@media(max-width:600px){
  .inicio-cta{padding:18px 90px 18px 18px}
  .inicio-cta-bot{height:92px;top:-24px;right:8px}
  .inicio-cta-arrow{right:12px;bottom:10px;width:28px;height:28px}
}

.inicio-section-head{display:flex;justify-content:space-between;align-items:baseline;margin:26px 2px 12px}
.inicio-section-head b{font-size:15px;font-weight:800}
.inicio-link{color:var(--login-accent);font-size:12.5px;font-weight:700}

.inicio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.inicio-card{background:var(--card);border-radius:var(--r-md);padding:16px;box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:3px;text-decoration:none;color:var(--txt);transition:box-shadow .15s,transform .15s}
.inicio-card:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.inicio-card:active{transform:translateY(0) scale(.98)}
.inicio-card-ico{font-size:19px;width:40px;height:40px;border-radius:12px;background:rgba(248,116,6,.1);color:var(--login-accent);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.inicio-card b{font-size:13.5px}
.inicio-card small{font-size:11.5px;color:var(--txt2);line-height:1.3}

.inicio-act-cuando{font-size:10.5px;color:var(--txt3);margin-top:2px}

/* Vitrina "Todo tu taller, en un solo lugar" — herramientas bloqueadas a
   la izquierda + una vista previa ilustrativa (NO datos reales, el dueño
   de la cuenta no tiene acceso todavía) del tipo de tablero que sí trae
   Industrial, para que el upsell se sienta concreto en vez de una lista
   de palabras. */
.inicio-preview-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;align-items:stretch}
@media(max-width:860px){.inicio-preview-wrap{grid-template-columns:1fr}}
.inicio-preview-locked{background:var(--card);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-1);display:flex;flex-direction:column}
.inicio-preview-locked-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:12px}
.inicio-locked-item{display:flex;align-items:flex-start;gap:8px;background:var(--bg);border:0;border-radius:var(--r-sm);padding:10px;text-align:left;cursor:pointer;color:var(--txt);transition:filter .15s}
.inicio-locked-item:hover{filter:brightness(.96)}
.inicio-locked-item .inicio-card-ico{margin-bottom:0;flex-shrink:0;width:34px;height:34px;font-size:16px}
.inicio-locked-item b{font-size:12.5px;display:block}
.inicio-locked-item small{font-size:10.5px;color:var(--txt2);line-height:1.3}
.inicio-link-btn{background:none;border:0;color:var(--login-accent);font-size:12.5px;font-weight:700;text-align:left;cursor:pointer;margin-top:14px;padding:0}
.inicio-preview-dash{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:18px;box-shadow:0 10px 24px -8px rgba(13,27,42,.5);display:flex;flex-direction:column}
.inicio-preview-dash-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.inicio-preview-dash-head b{font-size:13.5px}
.inicio-preview-dash-head .chip{background:rgba(255,255,255,.15);color:rgba(255,255,255,.85)}
.inicio-preview-kpis{display:flex;gap:16px;margin-top:14px}
.inicio-preview-kpis div{flex:1}
.inicio-preview-kpis b{font-size:19px;font-weight:800;display:block}
.inicio-preview-kpis small{font-size:10.5px;color:rgba(255,255,255,.6)}
.inicio-preview-linea{width:100%;height:auto;margin-top:14px}
.inicio-preview-dona-wrap{display:flex;align-items:center;gap:14px;margin-top:10px}
.inicio-preview-dona{width:64px;height:64px;flex-shrink:0}
.inicio-preview-dona-leyenda{display:flex;flex-direction:column;gap:4px;font-size:11px;color:rgba(255,255,255,.75)}
.inicio-preview-dona-leyenda i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}

.inicio-upsell{position:sticky;bottom:12px;display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:16px 18px;text-decoration:none;margin-top:22px;transition:background .15s;flex-wrap:wrap;box-shadow:0 10px 24px -8px rgba(13,27,42,.5);z-index:5;width:100%;box-sizing:border-box;font-family:inherit;text-align:left}
.inicio-upsell:hover{background:var(--ink2)}
.inicio-upsell-ico{background:rgba(248,116,6,.22);color:var(--login-accent-soft);width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.inicio-upsell-txt{flex:1;min-width:170px}
.inicio-upsell-txt b{font-size:13.5px;display:block}
.inicio-upsell-txt small{font-size:11.5px;color:rgba(255,255,255,.62);line-height:1.35}
.inicio-upsell-btn{background:var(--login-accent);color:#fff;font-size:12px;font-weight:700;padding:9px 14px;border-radius:99px;flex-shrink:0;white-space:nowrap;margin-left:auto}
@media(max-width:520px){
  .inicio-upsell-txt small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .inicio-upsell-btn{width:100%;text-align:center;margin-left:0}
}

/* ── Página / KPIs / cards ───────────────── */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.page-head h1{font-size:clamp(19px,2.4vw,24px);font-weight:800;letter-spacing:-.02em}
.page-head>div:last-child{flex-wrap:wrap}
/* Botones de acción del encabezado (ej. "+ Nuevo despiece", "Escanear
   tarjeta") se salían de la pantalla en celular por texto largo — en vez de
   quedar pegados a la izquierda cuando envuelven, quedan centrados y cada
   uno usa el ancho completo para que el texto quepa siempre en una línea. */
@media(max-width:640px){
  .page-head{flex-direction:column;align-items:stretch;text-align:center}
  .page-head>div:last-child{justify-content:center;width:100%}
  .page-head>div:last-child>.btn,.page-head>div:last-child>label.btn{flex:1 1 auto;text-align:center;justify-content:center}
}
.sub{font-size:12.5px;color:var(--txt2);margin-top:3px}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.kpi{background:var(--card);border-radius:var(--r-md);padding:16px;box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:4px;transition:box-shadow .15s,transform .1s}
.kpi[data-k]:hover{box-shadow:var(--sh-2)}
.kpi-dark[data-k]:hover{box-shadow:0 2px 5px rgba(0,0,0,.4),0 14px 32px rgba(0,0,0,.28)}
.kpi[data-k]:active{transform:scale(.98)}
.kpi-dark{background:var(--ink);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.22)}
.kpi-label{font-size:11px;font-weight:600;color:var(--txt2)}
.kpi-dark .kpi-label{color:rgba(255,255,255,.55)}
.kpi-value{font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi-sub{font-size:11.5px;font-weight:600;color:var(--txt3)}
.kpi-sub.ok{color:var(--green)}.kpi-dark .kpi-sub{color:var(--amber-soft)}.kpi-sub.warn{color:var(--warn)}
.kpi-value.ok{color:var(--green)}.kpi-value.warn{color:var(--warn)}
/* Radar de mercado — mismas tarjetas .kpi, pero con un cuarto renglón de
   "impacto" que puede variar mucho de largo; sin altura mínima y sin topar
   las líneas, la cuadrícula se ve dispareja entre tarjetas de la misma fila. */
#radar-mercado-kpis .kpi{min-height:132px}
#radar-mercado-kpis .kpi-label{display:flex;align-items:center;gap:4px;line-height:1.25}
#radar-mercado-kpis .kpi-label .kpi-info{flex-shrink:0;width:16px;height:16px;border-radius:50%;background:var(--bg);color:var(--txt3);font-size:9.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;padding:0;font-family:inherit}
#radar-mercado-kpis .kpi-label .kpi-info:hover,#radar-mercado-kpis .kpi-label .kpi-info:focus-visible{background:var(--amber);color:#fff;outline:none}
#radar-mercado-kpis .kpi-impacto{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:auto;padding-top:6px}
#radar-mercado-kpis .kpi-info-panel{display:none;margin-top:8px;padding-top:8px;border-top:1px dashed var(--bg);font-size:11px;line-height:1.45;color:var(--txt2)}
#radar-mercado-kpis .kpi-info-panel.abierto{display:block}
#radar-mercado-kpis .kpi-bloque{border-bottom:1px solid var(--bg);padding-bottom:6px}
#radar-mercado-toggle{display:none;align-items:center;justify-content:space-between;width:100%;background:none;border:none;padding:10px 0 0;font:inherit;color:inherit;cursor:pointer;text-align:left;gap:8px}
#radar-mercado-toggle b{font-size:12.5px;color:var(--txt2)}
#radar-mercado-toggle .chev{transition:transform .15s;color:var(--txt3)}
#card-radar-mercado.abierto #radar-mercado-toggle .chev{transform:rotate(180deg)}
/* En celular, 9 tarjetas de 1 columna + banner + chips hacen la sección de
   Radar de mercado muy larga — se pliega dentro de #radar-mercado-body
   (envoltura simple, sin display propio, para no pelearse con el display:
   grid/flex de sus hijos ni con estilos inline). Esta regla va DESPUÉS de
   la base de arriba a propósito — misma especificidad (un solo #id), así
   que el orden en el archivo es lo que decide cuál gana. */
@media(max-width:640px){
  #radar-mercado-body{display:none}
  #card-radar-mercado.abierto #radar-mercado-body{display:block}
  #radar-mercado-toggle{display:flex}
}
.card{background:var(--card);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-1)}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-size:14px}
.mini-pipe{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px}
.mini-stage{background:var(--bg);border-radius:var(--r-sm);padding:12px;text-align:center}
.mini-count{display:block;font-size:20px;font-weight:800}
.mini-label{font-size:11px;color:var(--txt2);font-weight:600}

/* ── CRM / Kanban ────────────────────────── */
.search{width:100%;max-width:420px;background:var(--card);border:1px solid rgba(13,27,42,.08);border-radius:var(--r-sm);padding:11px 15px;font-size:13.5px;font-family:inherit;outline:none;margin-bottom:16px;box-shadow:var(--sh-1)}
.search:focus{border-color:var(--amber)}
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:12px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x proximity}
.kanban:has(> .empty-state){display:block}
.kcol{background:rgba(13,27,42,.04);border-radius:var(--r-md);padding:10px;scroll-snap-align:start;min-height:120px}
.kcol-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;padding:6px 8px 10px}
.kcol-meta{font-size:11px;font-weight:600;color:var(--txt3)}
.tone-gray{color:var(--txt2)}.tone-warn{color:var(--warn)}.tone-green{color:var(--green)}.tone-blue{color:var(--blue)}.tone-ink{color:var(--ink)}.tone-red{color:var(--red)}

/* ── Picker de plantillas WhatsApp (leads) ── */
.wa-tpl{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer;padding:11px 13px;border:1px solid rgba(13,27,42,.1);border-radius:14px;margin-bottom:8px;background:var(--card);transition:border-color .15s,background .15s}
.wa-tpl:hover{border-color:var(--amber);background:var(--bg)}
.wa-tpl b{display:block;font-size:13px;margin-bottom:3px}
.wa-tpl span{display:block;font-size:12px;color:var(--txt2);line-height:1.45}
.kcol-empty{font-size:11.5px;color:var(--txt3);text-align:center;padding:18px 0}
.kcard{background:var(--card);border-radius:var(--r-sm);padding:12px;box-shadow:var(--sh-1);margin-bottom:10px;animation:fadein .3s ease}
.kcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;font-size:13px}
.kcall{font-size:15px}
button.kcall{background:none;border:none;cursor:pointer;font-family:inherit;padding:0}

/* ── NodoCreativo ─────────────────────── */
.cre-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.cre-card{background:var(--card);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-1);cursor:pointer;transition:box-shadow .15s,transform .1s}
.cre-card:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.cre-card img{width:100%;height:150px;object-fit:cover;display:block;background:var(--bg)}
.cre-card-body{padding:12px}
.kcard-meta{font-size:11.5px;color:var(--txt2);margin-top:3px}
.kcard-notes{font-size:11.5px;color:var(--txt3);margin-top:6px;background:var(--bg);border-radius:10px;padding:7px 9px;overflow-wrap:anywhere;word-break:break-word}
.kcard-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.kcard-actions .kbtn{flex:1 1 auto;min-width:64px}
/* Acciones secundarias (Cotizador) — colapsadas detrás de "⋯" para que las
   2-3 que se usan a diario (Vista previa, Enviar) no compitan con el resto. */
.kbtn-mas{flex:0 0 32px !important;min-width:0 !important;font-weight:800}
.kcard-actions-mas{display:none;flex-basis:100%;gap:6px;flex-wrap:wrap;margin-top:2px}
.kcard-actions-mas.open{display:flex}
.kcard-actions-mas .kbtn{flex:0 0 auto;min-width:0;padding:6px 14px}
/* Los botones visibles de siempre (Vista previa/Enviar, Fotos/Avance) se
   estiraban a la mitad de la tarjeta con flex:1 — solo son 2-3, se ven
   más limpios a su ancho natural que ocupando todo el espacio disponible.
   ">" los limita a los botones de primer nivel — los de "⋯" ya tienen su
   propio ancho natural aparte y no deben tocarse por este selector. */
.cot-card-with-spine .kcard-actions > .kbtn{flex:0 1 auto;min-width:0;padding:6px 16px}
/* Barra de avance (Proyectos) — antes había que abrir el checklist para
   saber qué tan cerca está de entregarse una obra. */
.progress-bar{height:6px;border-radius:99px;background:var(--bg);overflow:hidden;margin-top:6px}
.progress-bar i{display:block;height:100%;border-radius:99px}
.kbtn{flex:1;border:1px solid rgba(13,27,42,.1);background:var(--bg);border-radius:10px;font-size:12.5px;padding:6px 0;color:var(--txt2);transition:background .15s}
.kbtn:hover{filter:brightness(0.95)}
/* Botón cuadrado de solo ícono (editar/cerrar en encabezados) — el .kbtn base
   asume que vive en una fila de kcard-actions y usa flex:1, lo que lo infla o
   lo aplasta cuando va suelto junto a un título o chip. */
.kbtn-icon{flex:none;width:30px;height:30px;padding:0;font-size:14px;display:inline-flex;align-items:center;justify-content:center}
.kbtn-fwd{background:var(--ink);color:var(--amber-soft);border-color:var(--ink);font-weight:700}

/* ── Modal ───────────────────────────────── */
.dlg{border:0;border-radius:var(--r-lg);padding:0;max-width:440px;width:calc(100% - 32px);box-shadow:var(--sh-2);background:var(--card);color:var(--txt)}
.dlg::backdrop{background:rgba(13,27,42,.5);backdrop-filter:blur(4px)}
.dlg form{padding:24px;display:flex;flex-direction:column;gap:13px}
.dlg h2{font-size:17px;font-weight:800}
.dlg label{font-size:12px;font-weight:600;color:var(--txt2);display:flex;flex-direction:column;gap:5px}
.dlg input,.dlg select,.dlg textarea{border:1px solid rgba(13,27,42,.12);border-radius:var(--r-sm);padding:10px 12px;font-size:13.5px;font-family:inherit;outline:none;background:var(--bg);color:var(--txt)}
.dlg input:focus,.dlg select:focus,.dlg textarea:focus{border-color:var(--amber)}
.frm-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.frm-row-buscar{grid-template-columns:1fr auto;align-items:end;gap:8px}
@media(max-width:480px){.frm-row-buscar{grid-template-columns:1fr}.frm-row-buscar button{width:100%}}
.frm-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px;flex-wrap:wrap}

/* ── Formulario suelto (no en diálogo) — mismo look que .dlg form ── */
.frm-card{display:flex;flex-direction:column;gap:13px}
.frm-card label,.nudito-pregunta-row label{font-size:12px;font-weight:600;color:var(--txt2);display:flex;flex-direction:column;gap:5px}
.frm-card input,.frm-card select,.frm-card textarea,.nudito-pregunta-row input,.catalogo-buscar{width:100%;border:1px solid rgba(13,27,42,.12);border-radius:var(--r-sm);padding:10px 12px;font-size:13.5px;font-family:inherit;outline:none;background:var(--bg);color:var(--txt)}
.frm-card input:focus,.frm-card select:focus,.frm-card textarea:focus,.nudito-pregunta-row input:focus,.catalogo-buscar:focus{border-color:var(--amber)}
/* Fila de pregunta libre de Nudito — vive suelta en la tarjeta (no dentro de
   un <form class="frm-card">), así que necesita su propio estilo de input
   en vez de heredar el de los diálogos. */
.nudito-pregunta-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-top:12px}
.nudito-pregunta-row label{flex:1;min-width:200px}
.nudito-pregunta-row button{flex-shrink:0}
@media(max-width:640px){.frm-card .frm-row{grid-template-columns:1fr}}

/* ── Empty state ─────────────────────────── */
.empty-state{background:var(--card);border-radius:var(--r-lg);padding:44px 24px;text-align:center;box-shadow:var(--sh-1);grid-column:1/-1}
.empty-icon{font-size:34px;margin-bottom:10px}
.empty-state h2{font-size:16px;font-weight:700}
.empty-state p{font-size:13px;color:var(--txt2);margin-top:6px;max-width:380px;margin-inline:auto}
.empty-state .frm-actions{margin-top:18px}

/* ── Bottom nav (móvil) ──────────────────── */
.bottom-nav{display:none}

/* ── Botón global "📷 Escanear" — un punto de entrada para los 4 flujos de
   lectura por IA, flotante para estar a mano desde cualquier pantalla ── */
.fab-escanear{position:fixed;right:18px;bottom:24px;z-index:1090;width:56px;height:56px;border-radius:50%;background:var(--login-accent);color:#fff;border:0;box-shadow:var(--sh-2);font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.fab-escanear span{display:block;transform:translate(1px,1px)}
.fab-escanear:active{transform:scale(.94)}
/* Antes cada opción se veía como una tarjeta grande apilada (icono arriba,
   texto abajo, ~100px de alto) — .escanear-op es un <label> dentro de un
   .dlg, y ".dlg label{flex-direction:column}" (más específico que la clase
   sola) le ganaba a cualquier flex-direction:row puesto solo en .escanear-op.
   Con 6 opciones no cabían en una pantalla ni en celular ni en PC. Ahora es
   una fila compacta (icono a la izquierda, texto a la derecha) de ~48px —
   el selector ".dlg .escanear-op" iguala esa especificidad a propósito.
   */
.escanear-opciones{display:flex;flex-direction:column;gap:6px}
.dlg .escanear-op{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;gap:12px;padding:9px 14px;border-radius:var(--r-sm);background:var(--bg);border:1px solid rgba(13,27,42,.08);cursor:pointer;text-decoration:none;color:inherit}
.escanear-op:hover{border-color:var(--amber)}
.escanear-op-icon{font-size:21px;flex-shrink:0;width:26px;text-align:center}
.escanear-op-txt{display:flex;flex-direction:column;gap:0;font-size:13px;text-align:left;min-width:0}
.escanear-op-txt small{color:var(--txt3);font-weight:600;font-size:10.5px}

@media(max-width:820px){
  .fab-escanear{bottom:calc(78px + env(safe-area-inset-bottom))}
  .inicio-upsell{bottom:calc(84px + env(safe-area-inset-bottom))}
  .sidebar{display:none}
  .main{padding:18px 14px 108px}
  .bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:1100;display:flex;justify-content:space-around;background:rgba(13,27,42,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.08);padding:9px 6px calc(12px + env(safe-area-inset-bottom))}
  .bnav-item{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9.5px;font-weight:600;color:rgba(255,255,255,.45);min-width:0;flex:1;padding:4px 4px;border-radius:12px;text-align:center;overflow-wrap:break-word;line-height:1.2;transition:color .15s}
  .bnav-item.active{color:var(--login-accent-soft)}
  .bnav-ico{width:22px;height:22px;display:flex;align-items:center;justify-content:center}
  .bnav-ico svg{width:20px;height:20px}
  .kanban{grid-auto-columns:82vw;scroll-snap-type:x mandatory}
  .frm-row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── Chips (canal / esquema) ─────────────── */
.kcard-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;align-items:center}
.chip{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:9px;background:var(--bg);color:var(--txt2);white-space:nowrap}
.chip-green{background:var(--green-bg);color:var(--green)}
.chip-blue{background:var(--blue-bg);color:var(--blue)}

/* ── Sheet "Más" (móvil) ─────────────────── */
/* z-index alto a propósito: Leaflet (Radar de obras, Reportes de cierre) usa
   z-index hasta 1000 en sus controles internos (zoom, atribución) — con 80
   ese mapa se pintaba encima de este menú de pantalla completa. */
/* El menú "Más" (sheet) se trata como parte del NAV, no del área de
   trabajo — igual que la barra lateral, se queda oscuro siempre, sin
   importar el interruptor de modo claro/oscuro (que solo afecta --card/--bg
   del contenido). Colores hardcodeados a propósito, mismo criterio que
   .sidebar/.login. */
.sheet{position:fixed;inset:0;z-index:1200}
.sheet-backdrop{position:absolute;inset:0;background:rgba(13,27,42,.5);backdrop-filter:blur(4px)}
.sheet-panel{position:absolute;bottom:0;left:0;right:0;max-height:min(82dvh,640px);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;background:var(--ink);color:#fff;border-radius:28px 28px 0 0;padding:14px 18px calc(22px + env(safe-area-inset-bottom));box-shadow:var(--sh-2);animation:sheetup .3s cubic-bezier(.2,.8,.3,1)}
.sheet-panel::-webkit-scrollbar{display:none}
.sheet-grip{position:sticky;top:0;width:42px;height:5px;border-radius:3px;background:rgba(255,255,255,.18);margin:0 auto 14px}
.sheet-org{display:flex;align-items:center;gap:11px;padding:4px 6px 14px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:10px}
.sheet-org .org-dot{border:1px solid rgba(255,255,255,.14)}
.sheet-org-info{flex:1;min-width:0}
.sheet-org-info b{display:block;font-size:13.5px;color:#fff}
.sheet-org-info small{font-size:11px;color:rgba(255,255,255,.45)}
.sheet-refresh{width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s}
.sheet-refresh:active{transform:rotate(-50deg) scale(.94)}
.sheet-refresh svg{width:17px;height:17px}
@keyframes sheetup{from{transform:translateY(40%);opacity:.6}}
.sheet-nav{display:flex;flex-direction:column;gap:2px}
/* Textos/botón genéricos (.sub, .btn) dentro del sheet asumen fondo claro en
   el resto de la app — aquí el fondo es oscuro fijo, necesitan su propio
   contraste sin importar el tema claro/oscuro activo. */
.sheet-panel .sub{color:rgba(255,255,255,.45)}
.sheet-panel .btn{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.16)}
.sheet-panel .btn:hover{background:rgba(255,255,255,.13)}
.sheet-item{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:14px;font-size:14px;font-weight:600;color:rgba(255,255,255,.86)}
.sheet-item:active{background:rgba(255,255,255,.07)}
.sheet-item.active{background:rgba(248,116,6,.18);color:var(--login-accent-soft)}
.sheet-item .nav-badge{margin-left:auto;background:rgba(255,255,255,.08);color:rgba(255,255,255,.5)}

/* ── Sprint 2: Cotizador ─────────────────── */
.dlg-wide{max-width:640px}
.part{background:var(--bg);border-radius:var(--r-sm);padding:12px;margin-bottom:10px}
.part-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 10px;font-size:13.5px;flex-wrap:wrap}
.part-grid{display:grid;grid-template-columns:1.6fr 1.2fr repeat(3,minmax(64px,.7fr));gap:8px}
.part-grid select,.part-grid input{border:1px solid rgba(13,27,42,.12);border-radius:12px;padding:9px 10px;font-size:12.5px;font-family:inherit;background:var(--card);min-width:0}
.part-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:12px}
.part-det{color:var(--txt2)}
.part-mg{color:var(--txt3);font-size:11px}
.part-foot .kbtn{flex:none;padding:5px 10px;background:var(--card)}
.btn-mini{padding:7px 12px;font-size:12px;border-radius:11px}
.lbl-check{display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;gap:10px;background:var(--bg);border-radius:var(--r-sm);padding:11px 14px;font-size:12px;font-weight:600;color:var(--txt2);font-family:inherit}
.lbl-check span{flex:1;min-width:0}
.lbl-check input[type="checkbox"]{flex-shrink:0}
.desglose{margin-top:8px;border-top:1px dashed rgba(13,27,42,.15);padding-top:8px}
.desg-row{display:grid;grid-template-columns:2fr .8fr 1fr auto;gap:6px;margin-bottom:6px}
.desg-row input,.desg-row select{border:1px solid rgba(13,27,42,.12);border-radius:10px;padding:7px 9px;font-size:12px;font-family:inherit;background:var(--card);min-width:0}
.desg-row .kbtn{flex:none;padding:4px 10px}
.desg-row.corte-row-perfil,.corte-head-perfil{grid-template-columns:1.4fr .8fr .7fr .8fr 30px 30px}
.desg-row.corte-row-cristal,.corte-head-cristal{grid-template-columns:1.2fr .8fr .8fr .7fr 30px 30px}
.corte-etiqueta-cell{display:flex;gap:4px;min-width:0}
.corte-etiqueta-cell input{flex:1;min-width:0}
.corte-etiqueta-cell .kbtn{flex:none;padding:4px 8px}
@media(max-width:640px){
  .desg-row.corte-row-perfil,.desg-row.corte-row-cristal{grid-template-columns:1fr 1fr;gap:6px;background:var(--bg);border-radius:10px;padding:8px;margin-bottom:8px}
  .desg-row.corte-row-perfil input,.desg-row.corte-row-cristal input,
  .desg-row.corte-row-perfil select,.desg-row.corte-row-cristal select,
  .desg-row.corte-row-perfil .corte-etiqueta-cell,.desg-row.corte-row-cristal .corte-etiqueta-cell{grid-column:1/-1}
  .desg-row.corte-row-perfil .kbtn,.desg-row.corte-row-cristal .kbtn{padding:8px 0}
  .corte-head-perfil,.corte-head-cristal{display:none}
}
.cot-totales{background:var(--ink);color:#fff;border-radius:var(--r-md);padding:12px 16px;margin-top:4px}
.cot-totales div{display:flex;justify-content:space-between;font-size:12.5px;padding:2px 0;color:rgba(255,255,255,.75)}
.cot-totales .tot-final{font-size:16px;color:#fff;border-top:1px solid rgba(255,255,255,.2);margin-top:5px;padding-top:7px}
.cot-totales .tot-final b{color:var(--amber-soft)}
.cot-margen{font-size:11.5px;color:var(--txt2);background:var(--warn-bg);border-radius:12px;padding:8px 12px;margin-top:8px}
.mg-ok{color:var(--green)}.mg-bad{color:var(--red)}
.cot-list{display:flex;flex-direction:column;gap:10px}
.cot-card{background:var(--card);border-radius:var(--r-md);padding:14px;box-shadow:var(--sh-1);transition:transform .15s,box-shadow .15s}
.cot-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.cot-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:13.5px}
.cot-monto{text-align:right;font-weight:800;font-size:18px;font-variant-numeric:tabular-nums;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.chip-warn{background:var(--warn-bg);color:var(--warn)}
.chip-info{background:var(--blue-bg);color:var(--blue)}
.chip-gray{background:var(--bg);color:var(--txt3)}
.btn-locked{opacity:.6;cursor:pointer}
.btn-locked .chip{margin-left:6px}

/* ── Sprint 2: Agenda ────────────────────── */
.ag-filtros{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.ag-filtros::-webkit-scrollbar{display:none}
.ag-filtros .btn{flex-shrink:0}
/* Botón de filtro seleccionado — sin esto, .active se aplicaba en JS pero
   no tenía ningún estilo visual (se veía "en blanco", igual que el resto). */
.ag-filtros .btn.active,.btn-mini.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.ag-f.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.ag-grupo{font-size:11.5px;font-weight:700;color:var(--txt2);text-transform:capitalize;margin:16px 2px 8px}
.ag-item{background:var(--card);border-radius:var(--r-sm);padding:12px 14px;box-shadow:var(--sh-1);display:flex;align-items:center;gap:12px;margin-bottom:8px}
.ag-done{opacity:.55}
.ag-done .ag-info b{text-decoration:line-through}
.ag-check{width:26px;height:26px;border-radius:9px;border:2px solid rgba(13,27,42,.2);background:var(--card);flex-shrink:0;font-size:14px;color:#fff;display:flex;align-items:center;justify-content:center;transition:all .2s}
.ag-check.on{background:var(--green);border-color:var(--green)}
.ag-ico{font-size:19px}
.ag-info{min-width:0}
.ag-info b{font-size:13px}
@media(max-width:820px){
  .part-grid{grid-template-columns:1fr 1fr}
  .part-grid select{grid-column:1/-1}
  .desg-row{grid-template-columns:1.5fr .7fr .9fr auto}
}

/* ── v2.1 ────────────────────────────────── */
.ag-map{font-size:18px;margin-left:auto;flex-shrink:0}
.cat-head{display:grid;grid-template-columns:2fr .8fr 1fr .6fr 30px;gap:6px;font-size:10.5px;font-weight:700;color:var(--txt3);padding:0 2px 6px}
/* .cat-row tiene 5 hijos (nombre, unidad, precio, días, ✕) — .desg-row base
   solo define 4 columnas, así que el botón de borrar se iba a su propia fila. */
.cat-row{grid-template-columns:2fr .8fr 1fr .6fr 30px}
.part-grid select[data-f="acabado"]{max-width:110px}

/* ── v2.3: agenda acciones ───────────────── */
.ag-btns{display:flex;gap:6px;flex-shrink:0;align-items:center}
.ag-act{font-size:16px;width:32px;height:32px;border-radius:10px;background:var(--bg);border:1px solid rgba(13,27,42,.08);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--txt)}
.ag-act:active{transform:scale(.94)}
.ag-item{flex-wrap:wrap}
@media(max-width:520px){.ag-btns{width:100%;justify-content:flex-end;margin-top:6px}}

/* ── v2.5 ────────────────────────────────── */
.ver{font-size:10px;font-weight:700;color:rgba(255,255,255,.35);letter-spacing:.05em;vertical-align:middle}
.login .ver{color:var(--amber-soft)}
.unit-wrap{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;background:var(--warn-bg);color:var(--warn);padding:6px 10px;border-radius:12px}
.unit-sel{border:1.5px solid var(--warn);border-radius:9px;padding:4px 8px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--warn);background:var(--card)}
.com-list{max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.com-item{background:var(--bg);border-radius:12px;padding:9px 12px;font-size:12.5px;line-height:1.5}
.com-item .sub{font-size:10.5px}
/* Diálogos: siempre caben en pantalla, sin scroll horizontal. "92vh" primero
   como respaldo para navegadores/WebViews que no entienden "dvh" — si no lo
   reconocen, ignoran solo esa línea y se quedan con el valor de arriba (una
   propiedad con un valor inválido no pisa una declaración anterior válida
   de la MISMA propiedad); si sí lo reconocen, "dvh" gana por venir después. */
.dlg{width:min(560px,calc(100vw - 28px));max-width:none;max-height:92vh;max-height:92dvh;overflow-y:auto;overflow-x:hidden}
.dlg-wide{width:min(680px,calc(100vw - 28px))}
/* Panel de Despiece — más ancho que un .dlg-wide normal cuando hay espacio
   (ficha técnica con tabla de perfiles, no un formulario angosto); en
   pantallas chicas cae en la misma regla .dlg de abajo, igual que las demás. */
.dlg-desp{width:min(880px,calc(100vw - 28px))}
.dlg form,.dlg>div{max-width:100%}
.dlg input,.dlg select,.dlg textarea{min-width:0;max-width:100%;width:100%}
.frm-row>label{min-width:0}
@media(max-width:640px){
  .dlg{width:calc(100vw - 16px);border-radius:22px}
  .dlg .frm-row{grid-template-columns:1fr}
  .part-grid{grid-template-columns:1fr 1fr}
  .part-grid select[data-f="prodId"]{grid-column:1/-1}
}

/* ── v2.6: semáforo de notas ─────────────── */
.lbl-cliente{color:var(--green)!important;font-weight:700}
.nota-cliente{background:var(--green-bg)!important;border:1.5px solid rgba(30,158,106,.45)!important}

/* ── v2.7 ────────────────────────────────── */
.lbl-cliente{color:var(--green)!important;font-weight:800}
textarea.nota-cliente{background:var(--green-bg)!important;border:2px solid rgba(30,158,106,.45)!important}

/* ── Sprint 3 ────────────────────────────── */
.foto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;max-height:280px;overflow-y:auto}
.foto-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;border:1px solid rgba(13,27,42,.1)}
.foto-pdf{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);border:1px solid rgba(13,27,42,.1);border-radius:12px;font-size:11px;font-weight:800;color:var(--txt2);line-height:1.3;text-align:center}
.foto-grid .foto-pdf{width:100%;aspect-ratio:1}
.inv-row{background:var(--card);border-radius:var(--r-sm);padding:11px 14px;box-shadow:var(--sh-1);display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.inv-sem{font-size:15px;flex-shrink:0}
.inv-info{flex:1 1 140px;min-width:0}
.inv-info b{font-size:13px}
.inv-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.inv-stock{display:flex;align-items:center;gap:8px}
.inv-stock .kbtn{width:30px;font-size:15px;font-weight:800}
.inv-num{font-size:14px;font-weight:800;min-width:52px;text-align:center}
.inv-num small{font-weight:600;color:var(--txt3);font-size:10.5px}
.fin-mes{padding:12px 0;border-bottom:1px solid rgba(13,27,42,.07)}
.fin-mes:last-child{border-bottom:0}
.fin-mes-head{display:flex;justify-content:space-between;align-items:baseline;font-size:14px}
.fin-ventas{font-weight:800}
.fin-ventas small{font-weight:600;color:var(--txt3)}
.fin-bar{height:8px;background:var(--bg);border-radius:5px;margin:8px 0;overflow:hidden}
.fin-bar-fill{height:100%;background:var(--amber);border-radius:5px;transition:width .4s ease}
.fin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:6px;font-size:12px;color:var(--txt2)}

/* ── Soporte: acordeón de guías ─────────────── */
.ayuda-list{display:flex;flex-direction:column;gap:6px}
.ayuda-item{background:var(--bg);border-radius:var(--r-sm);padding:2px 14px}
.ayuda-item summary{padding:10px 0;cursor:pointer;font-weight:700;font-size:13px;list-style:none}
.ayuda-item summary::-webkit-details-marker{display:none}
.ayuda-item summary::before{content:"▸";display:inline-block;margin-right:8px;color:var(--txt3);transition:transform .15s}
.ayuda-item[open] summary::before{transform:rotate(90deg)}
.ayuda-item p{padding:0 0 12px;font-size:12.5px;line-height:1.55;color:var(--txt2)}
.sop-tier-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:18px 0 8px;padding-top:14px;border-top:1px solid var(--bg)}
.sop-tier-head:first-of-type{margin-top:0;padding-top:0;border-top:0}
.sop-tier-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.sop-tier-badge.on{background:var(--green-bg);color:var(--green)}
.sop-tier-badge.off{background:rgba(13,27,42,.08);color:var(--txt3)}
.ayuda-item.sop-locked{opacity:.62}
.ayuda-item.sop-locked summary::before{content:"🔒"}
.sop-upgrade-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 0 12px;flex-wrap:wrap}
.sop-upgrade-line .sop-upgrade-link{font-size:12px;font-weight:700;color:var(--login-accent);white-space:nowrap;cursor:pointer}

/* ── Diálogo de info de plan (antes de mandar a WhatsApp) ─── */
#dlg-info-plan{max-width:680px}
.plan-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.plan-col{background:var(--bg);border-radius:var(--r-lg);padding:18px;position:relative;display:flex;flex-direction:column}
.plan-col-destacado{background:linear-gradient(160deg,rgba(248,116,6,.1),rgba(248,116,6,.03));border:1.5px solid var(--login-accent)}
.plan-col-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--login-accent);color:#fff;font-size:10.5px;font-weight:800;padding:3px 12px;border-radius:99px;white-space:nowrap}
.plan-col-nombre{font-size:17px}
.plan-col-precio{font-size:26px;font-weight:800;color:var(--login-accent);margin:10px 0 4px;display:flex;align-items:baseline;gap:6px}
.plan-col-precio small{font-size:12.5px;font-weight:600;color:var(--txt3)}
.plan-col-nota-candado{font-size:12.5px;font-weight:600;color:var(--txt2);margin:0 0 4px;line-height:1.4}
.plan-col-nota-extra{font-size:12px;color:var(--txt3);margin-top:2px;line-height:1.4}
.plan-col-incluye-titulo{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--txt3);margin-top:14px;margin-bottom:2px}
.plan-lista{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:8px;padding:0;flex:1}
.plan-lista li{font-size:12.5px;background:var(--card);border-radius:var(--r-sm);padding:7px 11px}
@media(max-width:560px){.plan-cols{grid-template-columns:1fr}}

/* ── Administración: "Mi taller" y páginas hijas ──────────── */
.admin-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.admin-card{background:var(--card);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-1);margin-top:14px}
.admin-grid-2 .admin-card{margin-top:0}
.admin-card-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.admin-card-txt{flex:1;min-width:150px;display:flex;flex-direction:column;gap:1px}
.admin-card-txt b{font-size:14.5px}
.admin-card-txt .sub{margin-top:0}
/* Gris neutro por default; los 3 tintes de marca (naranja/azul/verde) se
   aplican aparte, a propósito, no como mosaico aleatorio de 6 colores. */
.admin-ico{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;background:var(--bg);color:var(--txt2)}
.admin-ico svg{width:22px;height:22px}
.admin-ico-orange{background:rgba(248,116,6,.12);color:var(--login-accent)}
.admin-ico-blue{background:var(--blue-bg);color:var(--blue)}
.admin-ico-green{background:var(--green-bg);color:var(--green)}
.admin-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.admin-field{display:flex;flex-direction:column;gap:3px;min-width:0}
.admin-field-wide{grid-column:1/-1}
.admin-field b{font-size:11px;color:var(--txt3);text-transform:uppercase;letter-spacing:.03em;font-weight:700}
.admin-field span{font-size:14px;overflow:hidden;text-overflow:ellipsis}
.admin-field span em{font-style:normal;color:var(--txt3)}
.admin-social-ico{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-size:12px;font-weight:800;color:#fff;text-decoration:none;margin-right:4px}
.admin-social-fb{background:#1877F2}
.admin-social-ig{background:radial-gradient(circle at 30% 110%,#fdf497,#fd5949 40%,#d6249f 70%,#285AEB)}
.admin-card-btn{display:block;width:100%;text-align:center;text-decoration:none;margin-top:12px}
.admin-card-locked{opacity:.75}
.admin-mini-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--bg);font-size:13px}
.admin-mini-row:last-child{border-bottom:0}
.admin-plan-mini{display:flex;flex-direction:column;gap:2px;margin-bottom:4px}
.admin-plan-mini b{font-size:16px}
.admin-sec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
/* align-items:flex-start — sin esto el botón hereda el stretch por default
   de un flex en columna y se ve larguísimo y desproporcionado. */
.admin-sec-item{display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:13px}
.admin-sec-item .btn{width:auto}
.admin-tip{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:16px 18px;display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.admin-tip-bot{width:40px;height:40px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.admin-tip-bot img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.admin-tip-txt{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px}
/* Tarjeta de plan grande y vívida — antes era una tarjeta blanca chica, se
   perdía y no transmitía "esto es real", solo un dato más en la pantalla. */
.admin-plan-hero{background:linear-gradient(120deg,var(--login-accent) 0%,#FF9A47 100%);color:#fff;border-radius:var(--r-lg);padding:24px;box-shadow:0 10px 24px -8px rgba(248,116,6,.5)}
.admin-plan-hero-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.admin-plan-hero-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:.85}
.admin-plan-hero-chip{background:#22C55E;color:#fff;font-size:13px;font-weight:700;padding:6px 14px;border-radius:99px}
.admin-plan-hero-nombre{font-size:26px;font-weight:800;margin-top:6px}
.admin-plan-hero-precio{font-size:19px;font-weight:700;margin-top:2px}
.admin-plan-hero-nota{font-size:12.5px;opacity:.9;margin-top:6px}
.admin-plan-hero-renovacion{font-size:12.5px;opacity:.9;margin-top:6px}
.admin-plan-hero-renovacion b{font-weight:800}
.admin-plan-hero-link{display:inline-block;margin-top:14px;font-size:12.5px;font-weight:700;color:#fff;text-decoration:underline;text-underline-offset:2px}
.admin-plan-hero-top-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
/* Botón de subir de nivel — misma forma/tamaño de píldora que el chip
   "Activo" (no un bloque ancho aparte), oscuro y sólido para que contraste
   fuerte contra el degradado naranja/ámbar en vez de perderse. */
.admin-plan-hero-upgrade{background:#181825;color:#fff;border:0;border-radius:99px;padding:6px 14px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:0 4px 10px -2px rgba(0,0,0,.4);transition:transform .15s}
.admin-plan-hero-upgrade:hover{transform:translateY(-1px)}
.admin-plan-hero-incluye{margin-top:12px}
.admin-plan-hero-incluye summary{font-size:12.5px;font-weight:700;cursor:pointer;color:#fff;opacity:.9}
.admin-plan-hero-incluye-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.admin-plan-hero-incluye-grid span{background:rgba(255,255,255,.18);border-radius:99px;padding:5px 11px;font-size:12px;font-weight:600}
.admin-org-info{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:14px}
.admin-org-info span{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--txt3);text-transform:uppercase;letter-spacing:.03em;font-weight:700}
.admin-org-info span b{font-size:14px;color:var(--txt);text-transform:none;letter-spacing:0;font-weight:700}
@media(max-width:760px){
  .admin-grid-2{grid-template-columns:1fr}
  .admin-field-grid{grid-template-columns:1fr}
  .admin-card-top{text-align:center;justify-content:center}
  .admin-card-top .admin-ico{margin:0 auto}
  .admin-card-top>.btn{display:block;width:100%;text-align:center}
  .admin-tip,.ayuda-onboarding{text-align:center;justify-content:center}
  .admin-tip>a,.admin-tip>.btn,.ayuda-onboarding-btn{display:block;width:100%;text-align:center}
  .admin-sec-grid{text-align:center}
  .admin-sec-item{align-items:center}
  .plan-col{text-align:center}
  .ayuda-extra-card{text-align:center;align-items:center}
}

/* ── Centro de ayuda ──────────────────────────────────────── */
.ayuda-buscador{margin-bottom:14px}
.ayuda-buscador input{width:100%;border:1px solid rgba(13,27,42,.1);background:var(--card);border-radius:var(--r-lg);padding:14px 18px;font-size:14px;font-family:inherit;outline:none;box-shadow:var(--sh-1);color:var(--txt)}
.ayuda-buscador input:focus{border-color:var(--login-accent)}
/* Antes un tinte muy pálido que se perdía contra el fondo — mismo
   tratamiento vivo que .inicio-cta, para que de verdad se note. */
.ayuda-onboarding{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:linear-gradient(120deg,var(--login-accent) 0%,#FF9A47 100%);color:#fff;border:0;border-radius:var(--r-lg);padding:16px 18px;margin-bottom:22px;cursor:pointer;flex-wrap:wrap;box-shadow:0 10px 24px -8px rgba(248,116,6,.5)}
.ayuda-onboarding-bot{width:48px;height:48px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.ayuda-onboarding-bot img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.ayuda-onboarding-txt{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px;text-align:left}
.ayuda-onboarding-txt b{font-size:14.5px;display:block}
.ayuda-onboarding-txt small{font-size:12px;opacity:.92}
.ayuda-onboarding-btn{background:#fff;color:var(--login-accent);font-size:12.5px;font-weight:700;padding:9px 16px;border-radius:99px;white-space:nowrap;flex-shrink:0}
.ayuda-seccion-titulo{font-size:16px;font-weight:800;margin:0}
.ayuda-cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ayuda-cat-card{background:var(--card);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-1);display:flex;flex-direction:column}
.ayuda-cat-card .admin-ico{margin-bottom:10px}
.ayuda-cat-card>b{font-size:14.5px;display:block;color:var(--login-accent)}
.ayuda-cat-card>.sub{display:block;margin-bottom:10px}
.ayuda-extra-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:14px}
.ayuda-extra-card{background:var(--card);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-1);display:flex;flex-direction:column;text-align:left;text-decoration:none;color:var(--txt);cursor:pointer;transition:box-shadow .15s,transform .15s}
.ayuda-extra-card:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.ayuda-extra-card .admin-ico{margin-bottom:10px}
.ayuda-extra-card b{font-size:13.5px;display:block;margin-bottom:2px}
@media(max-width:760px){.ayuda-extra-grid{grid-template-columns:1fr}}
.ayuda-cat-items{display:flex;flex-direction:column;gap:4px}
/* Cuadro gris tenue de fondo en cada fila, no solo al pasar el mouse — así
   se ve cada herramienta como su propia "sección" adentro de la tarjeta. */
.ayuda-cat-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:var(--r-sm);width:100%;text-align:left;color:var(--txt);font-size:13px;transition:background .15s,filter .15s;cursor:pointer;background:var(--bg)}
.ayuda-cat-item:hover{filter:brightness(.97)}
/* Mismo degradado vívido que .ayuda-onboarding — un tinte pálido se perdía
   contra el fondo, esto sí usa el naranja real de marca. */
.ayuda-lock-banner{display:flex;align-items:center;gap:14px;background:linear-gradient(120deg,var(--login-accent) 0%,#FF9A47 100%);color:#fff;border:0;border-radius:var(--r-lg);padding:16px 18px;margin:18px 0;flex-wrap:wrap;box-shadow:0 10px 24px -8px rgba(248,116,6,.5)}
.ayuda-lock-banner .sub{color:rgba(255,255,255,.85)}
.ayuda-lock-txt{flex:1;min-width:180px}
.ayuda-lock-ico{width:44px;height:44px;border-radius:50%;background:#fff;color:#F5A623;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ayuda-lock-ico svg{width:24px;height:24px}
@media(max-width:760px){.ayuda-cat-grid{grid-template-columns:1fr}}
.flow-lista{display:flex;flex-direction:column;gap:2px}
.flow-fila{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;background:var(--bg);border-radius:var(--r-sm);margin-bottom:6px}
.flow-ico{font-size:20px;flex-shrink:0;width:24px;text-align:center}
.flow-info{display:flex;flex-direction:column;gap:2px}
.flow-info b{font-size:13px}
.flow-info .sub{font-size:12px}
.fin-canal{display:grid;grid-template-columns:120px 1fr auto;gap:10px;align-items:center;font-size:12.5px;padding:6px 0}
.fin-canal-nombre{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fin-canal .fin-bar{margin:0}
.fin-gasto{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:7px 0;border-bottom:1px solid rgba(13,27,42,.06)}
.fin-gasto>span:first-child{min-width:0;overflow-wrap:break-word}
.fin-gasto>span:last-child{flex-shrink:0}
@media(max-width:520px){.fin-canal{grid-template-columns:90px 1fr auto}}
@media(max-width:480px){
  .fin-gasto{flex-direction:column;align-items:flex-start;gap:4px}
  .fin-gasto>span:last-child{align-self:flex-end}
}

.banco-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
@media(max-width:640px){.banco-cal-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:380px){.banco-cal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.banco-cal-pill{min-height:56px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;line-height:1.3;white-space:normal;overflow-wrap:break-word;padding:6px;border-radius:9px;background:var(--bg);color:var(--txt2)}
.banco-cal-pill.warn{background:var(--warn-bg);color:var(--warn)}
.banco-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}

.fin-alertas{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.fin-alerta{display:flex;align-items:center;gap:8px;text-align:left;width:100%;padding:11px 14px;border-radius:var(--r-sm);border:1px solid transparent;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;transition:filter .15s}
.fin-alerta:hover{filter:brightness(0.97)}
.fin-alerta-red{background:var(--red-bg);color:var(--red-ink);border-color:rgba(196,61,61,.25)}
.fin-alerta-warn{background:var(--warn-bg);color:var(--warn);border-color:rgba(185,122,21,.25)}
.fin-alerta-ok{background:var(--green-bg);color:var(--green);cursor:default}
.fin-alerta-info{background:var(--bg);color:var(--txt2);border-color:rgba(120,130,145,.25);cursor:default;justify-content:space-between}

.nudito-card{display:flex;gap:16px;align-items:flex-start;margin-top:10px}
.nudito-card img{width:110px;flex-shrink:0}
.nudito-body{flex:1;min-width:0;font-size:13.5px;line-height:1.5}
.nudito-alerta{background:var(--warn-bg);color:var(--warn);border-radius:10px;padding:8px 12px;margin-top:8px;font-size:13px;font-weight:600}
@media(max-width:640px){.nudito-card{flex-direction:column;align-items:center;text-align:center}}
.fin-alertas-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:11px 14px;border-radius:var(--r-sm);font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:filter .15s;margin-bottom:8px}
.fin-alertas-toggle:hover{filter:brightness(0.97)}
.fin-alertas-toggle .chev{transition:transform .15s}
.fin-alertas-toggle.open .chev{transform:rotate(180deg)}
.fin-alertas-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.fin-alertas-list.hidden{display:none}

/* ── v3.1 ────────────────────────────────── */
.kcall-wa{background:var(--green-bg);border-radius:9px;padding:3px 7px;border:1px solid rgba(30,158,106,.35)}
.chip-red{background:var(--red-bg);color:var(--red)}
.chip-ink{background:var(--ink);color:#fff}
.chip-facebook{background:rgba(24,119,242,.16);color:#1877F2}
.chip-instagram{background:rgba(225,48,108,.16);color:#E1306C}
.chip-whatsapp{background:rgba(37,211,102,.18);color:#1DA851}
.chip-tiktok{background:rgba(13,27,42,.08);color:#0D9488}
.chip-purple{background:rgba(124,58,237,.14);color:#7C3AED}
.chip-teal{background:rgba(13,148,136,.14);color:#0F766E}
:root[data-theme="dark"] .chip-tiktok{background:rgba(45,212,191,.18);color:#5EEAD4}
:root[data-theme="dark"] .chip-purple{background:rgba(167,139,250,.2);color:#C4B5FD}
:root[data-theme="dark"] .chip-teal{background:rgba(45,212,191,.2);color:#5EEAD4}
.chip-fuente-ico{width:18px;height:18px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:2px}
/* Mapa de zonas (Reportes de cierre) — el popup de Leaflet usa sus propias
   clases, no hereda nada de la app, así que se retematiza a mano. */
#rep-mapa .leaflet-popup-content-wrapper,#rep-mapa .leaflet-popup-tip{background:var(--card);color:var(--txt)}
#rep-mapa .leaflet-popup-content{font-family:inherit;font-size:12.5px}
#rep-mapa .leaflet-container{background:var(--bg);font-family:inherit}
.part-grid textarea{border:1px solid rgba(13,27,42,.12);border-radius:12px;padding:9px 10px;font-size:12.5px;font-family:inherit;background:var(--card);grid-column:1/-1;resize:vertical;min-height:40px}
@media(min-width:821px){.kanban{scroll-snap-type:none;scroll-behavior:auto}}
.ag-wa{background:var(--green-bg)!important;border-color:rgba(30,158,106,.4)!important}

/* ── v3.4: enlaces públicos ──────────────── */
.side-links{display:flex;gap:6px;margin:-6px 0 14px;padding:0 4px}
.side-links a{width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:15px;transition:background .2s}
.side-links a:hover{background:rgba(232,146,42,.18)}
.sheet-links{margin:12px 0 0;justify-content:center}
.sheet-links a{background:var(--bg);border-color:rgba(13,27,42,.1)}

/* ── v3.6: enlaces discretos ─────────────── */
.side-links{gap:4px;margin:-8px 0 12px}
.side-links a{width:30px;height:30px;border-radius:9px;background:transparent;border:none;color:rgba(255,255,255,.42)}
.side-links a:hover{color:var(--amber-soft);background:rgba(255,255,255,.06)}
.sheet-links a{color:rgba(255,255,255,.42);background:transparent}
.sheet-links a:hover{color:var(--login-accent-soft);background:rgba(255,255,255,.06)}

/* ── v3.7: Dashboard 2.0 ─────────────────── */
.kpi-top{display:flex;justify-content:space-between;align-items:center}
/* Círculo de color por tipo de cifra — antes era un cuadrito neutro
   (mismo gris para ingresos, pendientes, etc.); ahora el color clasifica
   la métrica antes de leer el número, mismo criterio que la maqueta de
   Finanzas/Dashboard aprobada. */
.kpi-ico{width:34px;height:34px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.kpi-dark .kpi-ico{background:rgba(255,255,255,.14)}
.kpi-ico.green{background:var(--green-bg);color:var(--green)}
.kpi-ico.warn{background:var(--warn-bg);color:var(--warn)}
.kpi-ico.blue{background:var(--blue-bg);color:var(--blue)}
.kpi-ico.red{background:var(--red-bg);color:var(--red)}
.per-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.view-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.res-pill{background:var(--bg);border-radius:var(--r-sm);padding:12px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:background .15s}
.res-pill:hover{filter:brightness(0.95)}
.res-ok{background:var(--green-bg)}
.res-ok:hover{filter:brightness(0.95)}
.res-num{font-size:24px;font-weight:800;letter-spacing:-.02em}
.res-lbl{font-size:11.5px;font-weight:600;color:var(--txt2);line-height:1.3}
.res-lbl small{display:block;font-weight:600;color:var(--txt3);font-size:10.5px}
.dash-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-top:14px}

/* ── Podio / Ranking de Reportes de cierre ── */
.podio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.podio-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:20px 10px 16px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--sh-1)}
.podio-card.podio-1{box-shadow:0 0 0 2px var(--amber),var(--sh-2)}
.podio-badge{position:absolute;top:12px;left:12px;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;z-index:1}
.podio-card.podio-1 .podio-badge{background:var(--amber);color:#0D1B2A}
.podio-visual{width:108px;height:108px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:48px;margin:2px 0 8px}
.podio-nombre{font-size:13.5px;line-height:1.3;display:block}
.podio-veces{font-size:16px;font-weight:800}
@media(max-width:640px){.podio-grid{gap:8px}.podio-visual{width:78px;height:78px;font-size:34px}.podio-nombre{font-size:11.5px}}

/* Variante con foto real — banner rectangular de borde a borde en vez del
   ícono-círculo centrado, como la referencia. */
.podio-card-foto{padding:0;overflow:hidden}
.podio-foto-wrap{width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--bg)}
.podio-foto-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.podio-info{padding:10px 10px 16px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}

.rank-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(13,27,42,.06)}
.rank-row:last-child{border-bottom:0}
.rank-num{width:20px;flex-shrink:0;text-align:center;font-size:12px;font-weight:800;color:var(--txt3)}
.rank-thumb{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.rank-thumb-foto{background-size:cover;background-position:center}
.rank-body{flex:1;min-width:0}
.rank-body-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rank-body-top b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-bar{height:5px;border-radius:3px;background:rgba(13,27,42,.07);overflow:hidden;margin-top:5px}
.rank-bar i{display:block;height:100%;border-radius:3px}
.chart-leyenda{display:flex;gap:16px;font-size:11.5px;color:var(--txt2);margin-top:6px}
.chart-leyenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.dona-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.dona-leyenda{display:flex;flex-direction:column;gap:6px;font-size:12px;min-width:0}
.dona-leyenda div{display:flex;align-items:center;gap:7px}
.dona-leyenda i{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.dona-leyenda b{margin-left:auto;padding-left:10px}
.mini-ag-row{padding:5px 0;font-size:12.5px;line-height:1.5}
.pan-metrica{padding:14px 0;border-bottom:1px solid color-mix(in srgb, var(--txt3) 30%, transparent)}
.pan-metrica:first-child{padding-top:0}
.pan-metrica:last-child{border-bottom:none;padding-bottom:0}
.pan-metrica>b{font-size:14px}
.pan-metrica .kpi{padding:12px}
.pan-metrica .kpi-value{font-size:18px}
.pan-metrica .kpi-ico{width:26px;height:26px;font-size:12px}
@media(max-width:860px){.dash-grid{grid-template-columns:1fr}}

/* ── v3.9 ────────────────────────────────── */
.foto-item{position:relative}
.foto-del{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:8px;border:0;background:rgba(13,27,42,.75);color:#fff;font-size:11px;cursor:pointer}
.check-row{display:flex;align-items:center;gap:11px;padding:10px 4px;font-size:13.5px;border-bottom:1px solid rgba(13,27,42,.06);cursor:pointer}
.check-row input{width:19px;height:19px;accent-color:var(--green)}
.check-row input:checked+span{text-decoration:line-through;color:var(--txt3)}

/* ── Asistentes IA (AluMétrico) ────────────── */
.ia-textarea{width:100%;border:1px solid rgba(13,27,42,.12);border-radius:var(--r-sm);padding:12px 14px;font-size:13.5px;font-family:inherit;outline:none;background:var(--bg);color:var(--txt);resize:vertical;min-height:96px}
.ia-textarea:focus{border-color:var(--amber)}
.ia-actions{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.ia-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.ia-cliente-label{min-width:180px;flex:1}
.ia-toolbar-btns{display:flex;gap:8px;flex-wrap:wrap}
.ia-result{margin-top:16px;display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--r-md)}
.ia-result-icon{font-size:20px;line-height:1}
.ia-result-body{flex:1;min-width:0}
.ia-result-body p{font-size:13px;margin-top:4px}
.ia-result .btn{flex-shrink:0}
.ia-result-ok{background:var(--green-bg)}
.ia-result-ask{background:var(--warn-bg)}
.ia-result-error{background:var(--red-bg)}
@media(max-width:640px){.ia-result{flex-direction:column}.ia-result .btn{width:100%}}

.ia-head-avatar{gap:12px;justify-content:flex-start}
.ia-avatar{width:44px;height:44px;object-fit:contain;flex-shrink:0;border-radius:50%;background:var(--bg)}
.ia-head-text{display:flex;flex-direction:column;gap:2px}
.ia-head-text b{font-size:14.5px}
.ia-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 16px;background:var(--bg);border-radius:var(--r-md,14px);margin-bottom:12px}
.ia-hero img{width:120px;height:120px;object-fit:contain;margin-bottom:10px}
.ia-hero .sub{max-width:420px}
.ia-cliente-label select{display:block;width:100%;margin-top:4px;border:1px solid rgba(13,27,42,.12);border-radius:var(--r-sm);padding:9px 10px;font-size:13px;font-family:inherit;background:var(--bg);color:var(--txt)}
.ia-chat{display:flex;flex-direction:column;gap:10px;max-height:440px;overflow-y:auto;margin-bottom:14px;padding-right:2px}
.ia-msg{max-width:82%;padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.5}
.ia-msg-user{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px;white-space:pre-wrap}
.ia-msg-bot{align-self:flex-start;border-bottom-left-radius:4px;max-width:92%}
.ia-warn{background:var(--red-bg);color:var(--red-ink);border-radius:10px;padding:8px 10px;font-size:12px;line-height:1.5;margin-bottom:8px}
.ia-hist{max-height:280px;overflow-y:auto;background:var(--bg);border-radius:var(--r-sm);padding:8px;margin-bottom:12px}
.ia-hist-list{display:flex;flex-direction:column;gap:6px}
.ia-hist-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--card);border-radius:var(--r-sm);padding:8px 10px;cursor:pointer;font-size:12.5px}
.ia-hist-row:hover{filter:brightness(0.97)}
.ia-foto-chip{display:flex;align-items:center;gap:8px;background:var(--bg);border-radius:var(--r-sm);padding:6px 10px;margin-bottom:8px;font-size:12px;color:var(--txt2)}
.ia-foto-chip img{width:36px;height:36px;object-fit:cover;border-radius:8px;flex-shrink:0}
.ia-foto-pdf{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--card);border-radius:8px;flex-shrink:0;font-size:18px}
.ia-foto-chip span{flex:1}
.ia-foto-chip button{background:none;border:0;color:var(--txt3);font-size:14px;cursor:pointer;padding:4px}
@media(max-width:640px){.ia-msg{max-width:92%}}

/* ── Buscador global (Dashboard) ────────────── */
.search-wrap{display:flex;align-items:flex-start;gap:8px;max-width:640px;margin-bottom:16px}
.search-input-wrap{position:relative;flex:1;min-width:0}
.search-input-wrap .search{max-width:none;margin-bottom:0}
.dash-ia-btn{flex-shrink:0;display:flex;align-items:center;gap:6px;background:var(--amber);color:#0D1B2A;font-weight:700;font-size:13px;padding:0 16px;height:42px;border-radius:var(--r-sm);white-space:nowrap;box-shadow:var(--sh-1);transition:filter .15s}
.dash-ia-btn:hover{filter:brightness(1.06)}
@media (max-width:520px){.dash-ia-btn span{display:none}}
.search-results{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card);border-radius:var(--r-md);box-shadow:var(--sh-2);max-height:420px;overflow-y:auto;z-index:40;padding:6px}
.search-results.show{display:block}
.search-sec-title{font-size:10.5px;font-weight:800;color:var(--txt3);text-transform:uppercase;letter-spacing:.06em;padding:8px 10px 4px}
.search-res{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);cursor:pointer}
.search-res:hover{background:var(--bg)}
.search-res b{font-size:13px}
.search-res .sub{font-size:11.5px;text-align:right;white-space:nowrap}
.search-empty{padding:16px;text-align:center;color:var(--txt3);font-size:13px}

/* "Espina" de color con el nombre en vertical — patrón reusable en toda la
   app: una sola señal grande en vez de un chip más peleando por espacio.
   Se agrega junto a .kcard/.cli-row (no las reemplaza), envuelta en un
   contenedor "-body"/"-spine" propio de cada lista. */
.spine-bar{width:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff}
.spine-bar span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;padding:8px 0}
.spine-bar[data-tone="warn"]{background:var(--warn)}
.spine-bar[data-tone="green"]{background:var(--green)}
.spine-bar[data-tone="blue"]{background:var(--blue)}
.spine-bar[data-tone="ink"]{background:var(--ink)}
.spine-bar[data-tone="gray"]{background:var(--txt3)}
.spine-bar[data-tone="red"]{background:var(--red)}

/* ── Clientes (vista 360°) ────────────── */
/* Ojo: .cli-row también lo reusan las filas de Cuentas/Equipo en
   Configuración (sin espina, estructura plana) — la base se queda como
   siempre era; la espina es un modificador aparte que NO se aplica ahí. */
.cli-row{background:var(--card);border-radius:var(--r-sm);padding:12px 14px;box-shadow:var(--sh-1);display:flex;align-items:center;gap:12px;margin-bottom:8px;cursor:pointer}
.cli-row:hover{box-shadow:var(--sh-2)}
.cli-row-with-spine{padding:0;overflow:hidden;align-items:stretch}
.cli-row-with-spine .cli-row-body{display:flex;align-items:center;gap:12px;padding:12px 14px;flex:1;min-width:0}
/* Mismo criterio dentro de una tarjeta de kanban (Interesados, etc.) — se
   agrega la clase junto a .kcard, sin tocar los usos que no la llevan. */
.kcard-with-spine{display:flex;align-items:stretch;gap:0;padding:0;overflow:hidden}
.kcard-with-spine .kcard-body{padding:12px;flex:1;min-width:0}
/* Mismo criterio para .cot-card (Cotizador, Proyectos) */
.cot-card-with-spine{display:flex;align-items:stretch;gap:0;padding:0;overflow:hidden}
.cot-card-with-spine .cot-card-body{padding:14px;flex:1;min-width:0}
/* Círculo con la inicial del canal — más informativo que un punto de color
   sin abrir tooltip, y sigue sin competir en tamaño con la espina/estado. */
.canal-badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:9.5px;font-weight:800;flex-shrink:0}
.cli-avatar{width:32px;height:32px;border-radius:50%;background:var(--amber-soft);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0;position:relative}
/* Quién cotizó — se cuelga del avatar en vez de ser un chip más, a propósito
   (petición del usuario: "sirve más tipo bandera... para diferenciarlo de
   tanta etiqueta" — la tarjeta ya tiene muchos chips en .cli-badges). */
.cli-avatar-quien{position:absolute;bottom:-5px;right:-5px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;border:2px solid var(--card);line-height:1}
/* Mismo componente que .cli-avatar-quien, pero "inline" (no colgado de un
   avatar) — para usarse junto a un folio, una línea de historial, o la
   esquina de una tarjeta. Ver badgeOrigen() en crm.js. */
.origen-badge{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:var(--ink);color:#fff;font-size:10.5px;font-weight:800;line-height:1;flex-shrink:0;vertical-align:-4px}
.cli-info{flex:1;min-width:0}
.cli-info b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cli-info .sub{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cli-stats{display:flex;gap:10px;font-size:12px;color:var(--txt3);flex-shrink:0}
.cli-badges{display:flex;gap:6px;flex-wrap:wrap;align-items:center;flex-shrink:0}
.cli-row .kbtn{flex:none;width:auto;padding:6px 16px;white-space:nowrap;flex-shrink:0}
.cli-section{margin-top:18px;padding-top:16px;border-top:1px solid rgba(13,27,42,.08)}
.cli-section>b{font-size:13.5px}
.cli-subrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;font-size:13px;cursor:pointer;border-bottom:1px solid rgba(13,27,42,.05)}
.cli-subrow:last-child{border-bottom:none}
.cli-subrow:hover{color:var(--amber)}
.cli-subrow-grupo{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--txt3);padding:10px 0 4px}
.cli-subrow-grupo:first-child{padding-top:0}
@media(max-width:640px){
  .cli-row,.cli-row-body{flex-wrap:wrap}
  .cli-avatar{width:28px;height:28px;font-size:12px}
  .cli-avatar-quien{width:18px;height:18px;font-size:10px;bottom:-4px;right:-4px}
  .cli-stats{display:none}
  /* Con 2-4 chips (canal/flag/duplicado) ya no cabían junto al nombre en
     pantallas angostas — el nombre perdía la pelea por espacio y quedaba
     truncado a 2-3 letras. Bajan a su propio renglón completo. */
  .cli-badges{flex:0 0 100%;order:2;margin-top:6px}
  .cli-row .lbl-check,.cli-row-body .lbl-check{flex:0 0 100%;order:3;margin-top:6px}
  .cli-row .kbtn,.cli-row-body .kbtn{flex:0 0 100%;order:4;margin-top:8px;text-align:center}
}

/* ── Despiece: ficha técnica (panel de detalle) ──────────────────────
   Todo prefijado .desp- a propósito: son ajustes SOLO para este panel,
   nunca tocan .dlg/.frm-row/.card genéricos que comparte el resto de la
   app. Rediseño visual, ver renderDespiece() en js/modules/despiece.js —
   ninguna clase de aquí cambia lógica, solo layout/densidad. */
.desp-ficha-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.desp-ficha-head h2{margin:0;font-size:19px;font-weight:800;line-height:1.25}
.desp-ficha-sub{font-size:13px;color:var(--txt2);font-weight:600;margin-top:2px}
.desp-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}

/* Paso a paso Despiece → Revisar → Cortes — puramente informativo, refleja
   d.estado, no crea ningún estado nuevo. */
.desp-flow{display:flex;align-items:center;margin:14px 0 2px;overflow-x:auto;padding-bottom:2px}
.desp-flow-step{display:flex;align-items:center;gap:7px;flex-shrink:0}
.desp-flow-num{width:22px;height:22px;border-radius:50%;background:var(--bg);color:var(--txt3);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0}
.desp-flow-step.is-done .desp-flow-num{background:var(--green);color:#fff}
.desp-flow-step.is-active .desp-flow-num{background:var(--ink);color:#fff}
.desp-flow-txt{font-size:11.5px;font-weight:700;color:var(--txt3);white-space:nowrap}
.desp-flow-step.is-active .desp-flow-txt,.desp-flow-step.is-done .desp-flow-txt{color:var(--txt)}
.desp-flow-line{width:28px;height:2px;background:var(--bg);flex-shrink:0;margin:0 2px}
.desp-flow-step.is-done + .desp-flow-line{background:var(--green)}

/* Datos generales / specs de pieza — 3 columnas en desktop, se apila en
   pantallas chicas (mismo breakpoint que .dlg ya usa para .frm-row). */
.desp-datos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:720px){.desp-datos-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.desp-datos-grid{grid-template-columns:1fr}}

.desp-card-title{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.desp-card-resumen{font-size:11.5px;font-weight:700;color:var(--txt3)}

/* Perfiles como "tabla" — se queda con divs con el MISMO grid-template que
   las filas de datos (no <table>, para no tocar los selectores JS que ya
   asumen filas por div), solo se le agrega un renglón de encabezado. */
.desp-tabla-head{display:grid;gap:6px;padding:0 2px;margin-top:8px}
.desp-tabla-head span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--txt3)}
.desp-tabla-perfiles-head{grid-template-columns:1.4fr 1fr .7fr auto}
.desp-tabla-herrajes-head{grid-template-columns:1.6fr .7fr auto}
.desp-tabla-vidrio-head{grid-template-columns:1fr 1fr .7fr auto}

/* Vidrio: tipo → medida → cantidad, con flechita para que se lea como una
   sola relación en vez de 3 inputs sueltos. */
.desp-vidrio-flecha{color:var(--txt3);font-size:13px;padding:0 2px;display:flex;align-items:center;justify-content:center}

/* Consolidado del trabajo — resumen de solo lectura, generado de los mismos
   datos editables de abajo (nunca inventa cifras); existe para que el
   bloque se perciba distinto de la captura editable, como pidió el dueño. */
.desp-consolidado-resumen{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.desp-consolidado-resumen .chip{background:var(--bg);font-weight:700}
.desp-consolidado-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.desp-consolidado-cols{grid-template-columns:1fr}}

/* Proveedor — sección secundaria, colapsada por default (mismo patrón que
   "Actividad reciente" en el listado de Despiece). */
.desp-proveedor-details summary{cursor:pointer;list-style:none;font-weight:700;font-size:13.5px}
.desp-proveedor-details summary::-webkit-details-marker{display:none}
.desp-proveedor-details[open] summary{margin-bottom:10px}

/* Footer de acciones pegado abajo del panel mientras se hace scroll a un
   despiece largo — el -22px compensa el padding:22px del wrapper del
   detalle (ver #desp-detail en despiece.js) para que llegue a los bordes. */
.desp-footer-sticky{position:sticky;bottom:0;background:var(--card);margin:16px -22px -22px;padding:14px 22px;border-top:1px solid rgba(13,27,42,.08);display:flex;gap:10px;flex-wrap:wrap;box-shadow:0 -6px 16px rgba(13,27,42,.07);z-index:1}
:root[data-theme="dark"] .desp-footer-sticky{border-top-color:rgba(255,255,255,.08);box-shadow:0 -6px 16px rgba(0,0,0,.35)}
@media(max-width:480px){.desp-footer-sticky{margin:16px -16px -16px;padding:12px 16px}.desp-footer-sticky .btn{flex:1 1 auto}}

/* Tarjetas del listado principal de Despiece — misma base .cot-card-with-
   spine, solo se reordena la jerarquía interna (cliente/fecha arriba,
   producto+medida en medio, origen abajo). */
.desp-card-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.desp-card-fecha{font-size:11px;color:var(--txt3);white-space:nowrap;flex-shrink:0}
.desp-card-producto{font-size:12.5px;color:var(--txt2);margin-top:2px}
.desp-card-meta{display:flex;align-items:center;gap:6px;margin-top:5px;flex-wrap:wrap}

/* ── Cortes de vidrio/perfil: rediseño visual (solo presentación) ────────
   Prefijo .cvid- a propósito (viene de "Cortes de VIDrio", el primero en
   rediseñarse) — hoy lo comparten las 2 pestañas de Optimización de cortes
   (misma función renderCortes). Cero clases nuevas tocan el algoritmo de
   empaque (cortes-empaque.js) — todo esto es reordenar/agrupar HTML que ya
   existía. */
.cvid-page-grid{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
@media(max-width:900px){.cvid-page-grid{grid-template-columns:1fr}}
.cvid-page-main{min-width:0}
.cvid-page-side{min-width:0}
.link-mini{background:none;border:none;cursor:pointer;color:var(--blue);font-size:12.5px;font-weight:600;padding:0}
.link-mini:hover{text-decoration:underline}
/* Antes .cvid-hoja-grid usaba auto-fit/minmax, que a ciertos anchos de
   pantalla dejaba una columna huérfana (el checkbox de "rotar" solo en su
   propia fila) y se veía descuadrado frente a la columna de Proyecto/
   referencia de al lado. Columnas fijas (3 en Perfil, 4 en Vidrio) más el
   checkbox siempre en su propia fila aparte — así nunca hay una columna a
   medias. */
.cvid-config-fields{display:grid;gap:10px}
.cvid-fields-3{grid-template-columns:repeat(3,minmax(120px,1fr))}
.cvid-fields-4{grid-template-columns:repeat(4,minmax(100px,1fr))}
@media(max-width:640px){.cvid-fields-3,.cvid-fields-4{grid-template-columns:1fr 1fr}}
@media(max-width:360px){.cvid-fields-3,.cvid-fields-4{grid-template-columns:1fr}}
/* Algunas etiquetas de esta fila envuelven a 2 líneas ("Ancho de corte /
   kerf (cm)", "Margen de borde (cm, opcional)") y otras a 1 ("Ancho de
   hoja (cm)") — como el grid ya estira cada label al alto de la fila
   completa (la etiqueta más larga), sin esto el texto+cuadro de las
   etiquetas cortas quedaba pegado arriba (más alto que el resto) en vez
   de compartir la misma línea base. justify-content:flex-end empuja
   texto+input como bloque hasta el fondo de esa altura estirada, así
   todos los cuadros de texto terminan alineados en el mismo punto sin
   importar cuántas líneas use su etiqueta. */
.cvid-config-fields label{justify-content:flex-end}
.cvid-presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.cvid-preset.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.cvid-tabla-foot{display:flex;justify-content:flex-end;gap:6px;margin-top:8px;font-size:12.5px;color:var(--txt2);font-weight:600}
.cvid-resumen-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed rgba(13,27,42,.08);font-size:12.5px}
.cvid-resumen-row:last-child{border-bottom:none}
.cvid-resumen-ico{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;background:var(--bg)}
.cvid-resumen-ico.blue{background:var(--blue-bg);color:var(--blue)}
.cvid-resumen-ico.green{background:var(--green-bg);color:var(--green)}
.cvid-resumen-ico.warn{background:var(--warn-bg);color:var(--warn)}
.cvid-resumen-txt{flex:1;color:var(--txt2);min-width:0}
.cvid-resumen-row b{font-variant-numeric:tabular-nums;flex-shrink:0}
.cvid-resumen-row b.ok{color:var(--green)}
.cvid-resumen-row b.warn{color:var(--warn)}
.cvid-resumen-row b.pendiente{color:var(--txt3);font-weight:600;font-size:11px}

/* ── Cortes de vidrio: pulido final del RESULTADO (solo presentación) ────
   Sigue el mismo criterio de arriba: nada de esto toca cortes-empaque.js —
   solo reordena/agrupa el mismo HTML de siempre (svgHoja, leyenda, botón de
   guardar sobrante) para que se lea más rápido en taller. */
/* Borrador local de Cortes (Perfil/Vidrio) — aviso discreto de "trabajo en
   curso recuperado" cuando el módulo restaura piezas/config de localStorage
   al montar (ver cortes-borrador.js). Nunca recalcula solo, solo avisa. */
.cvid-borrador-aviso{background:var(--bg);border-radius:var(--r-sm);padding:8px 10px;margin-top:8px}
.cvid-borrador-aviso .link-mini{margin-left:6px}
.cvid-resultado-headline{font-size:15.5px;font-weight:800;color:var(--ink);margin-top:4px}
.cvid-aprovecha{font-size:13px;margin-top:6px}
.cvid-aprovecha b.ok{color:var(--green)}
.cvid-aprovecha b.warn{color:var(--warn)}
.cvid-aprovecha b.bad{color:var(--red)}
.cvid-preview-nav{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px;font-size:12.5px;color:var(--txt2)}
.cvid-hojas-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
@media(max-width:700px){.cvid-hojas-grid{grid-template-columns:1fr}}
.cvid-hoja-card,.cvid-barra-card{min-width:0;background:var(--bg);border-radius:var(--r-md);padding:14px}
/* Pulido visual de Cortes de Perfil (cierre UX del Gratis) — 2 tarjetas por
   fila en desktop en vez de 1 sola columna larguísima con 7-9 barras; solo
   afecta esta lista (.cvid-hojas-grid de Vidrio, arriba, no se toca). */
.cvid-barras-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
@media(max-width:900px){.cvid-barras-list{grid-template-columns:1fr}}
.cvid-hoja-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.cvid-hoja-acciones{display:flex;justify-content:flex-end;margin-top:6px}
/* Solo Perfil — badge de aprovechamiento a la derecha del header de la
   tarjeta (antes era una línea aparte debajo, la tarjeta compacta ya no la
   necesita) y la fila "Ver detalle · Ampliar" repartida en extremos. Clases
   propias (no cvid-hoja-acciones, que Vidrio también usa con solo 1 botón y
   depende de quedar a la derecha) para no tocar nada de Vidrio. */
.cvid-barra-badge{text-align:right;flex:none}
.cvid-barra-badge b{display:block;font-size:15px}
.cvid-barra-badge b.ok{color:var(--green)}
.cvid-barra-badge b.warn{color:var(--warn)}
.cvid-barra-badge b.bad{color:var(--red)}
.cvid-barra-conteo{margin-top:6px}
.cvid-barra-acciones-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-top:6px;flex-wrap:wrap}
.cvid-detalle-piezas{margin-top:6px}
.cvid-detalle-piezas summary{cursor:pointer;font-size:12.5px;color:var(--blue);font-weight:600}
.cvid-detalle-piezas summary::marker{color:var(--blue)}
.cvid-sobrantes-hoja{margin-top:8px;padding-top:8px;border-top:1px dashed rgba(13,27,42,.12)}
.cvid-sobrantes-tit{font-weight:700;margin-bottom:2px}
.cvid-sobrante-row{display:flex;align-items:center;gap:8px;margin-top:3px}
.cvid-ampliar-wrap svg{max-width:640px!important}

/* ── Cortes: tarjeta de configuración de ancho completo (Hoja de vidrio /
   Barra de material), fusionada con Proyecto/referencia y el CTA de
   calcular — pedido explícito para que ambas queden como "protagonista"
   arriba de la pantalla, en vez de enterradas junto a Piezas a cortar. */
.cvid-config-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:start}
@media(max-width:760px){.cvid-config-grid{grid-template-columns:1fr}}
.cvid-config-actions{margin-top:14px;align-items:center}
.cvid-cta{padding:13px 26px;font-size:14.5px}
/* ── Guía rápida (popup) ── */
.guia-popup ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--txt2);line-height:1.45}
/* UX-1A.1 (QA real, dark mode): era var(--ink) — un navy casi negro fijo
   que NUNCA se redefine en :root[data-theme="dark"] (a propósito: en el
   resto del CSS se usa como FONDO, donde no importa el tema). Aquí era la
   única vez que se usaba como color de TEXTO sobre .dlg{background:var(--card)},
   que sí cambia con el tema — texto casi negro sobre fondo casi negro en
   oscuro. var(--txt) es el texto estándar de la app (ya theme-aware) y en
   claro es visualmente casi idéntico a --ink. Beneficia a los 4 consumidores
   de .guia-popup (Centro de ayuda, Cortes, Despiece, Prospección) con un
   solo cambio. */
.guia-popup ol li b{color:var(--txt)}

/* ── Onboarding Gratis, 5 pasos (Fase UX-1A) — mismo <dialog>+.dlg de
   siempre, sin <form> (no envía nada) así que el padding lo trae .ob-wrap en
   vez de heredar el de ".dlg form". Clic en el fondo no cierra a propósito —
   es una guía de bienvenida, no un formulario que estorbe. ── */
.dlg-onboarding{max-width:520px}
.ob-wrap{padding:26px 24px 20px;display:flex;flex-direction:column;gap:2px}
.ob-badge{align-self:flex-start;background:var(--login-accent);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:99px;margin-bottom:10px}
.ob-wrap h2{font-size:19px;font-weight:800;margin:0}
.ob-headline{font-size:14.5px;font-weight:700;color:var(--login-accent);margin-top:4px}
.ob-wrap .sub{margin-top:8px;font-size:13.5px;line-height:1.5}

.ob-tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
@media(max-width:420px){.ob-tools-grid{grid-template-columns:1fr}}
.ob-tool{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:var(--r-sm);padding:12px}
.ob-tool-ico{font-size:20px;width:36px;height:36px;border-radius:10px;background:var(--card);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ob-tool b{font-size:13px}

.ob-flujo{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.ob-flujo-paso{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--bg);border-radius:var(--r-sm);padding:14px 12px;min-width:88px}
.ob-flujo-ico{font-size:22px}
.ob-flujo-paso b{font-size:12px;text-align:center}
.ob-flujo-flecha{font-size:16px;color:var(--txt3);font-weight:700}

.ob-niveles{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.ob-nivel{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;background:var(--bg);border-radius:var(--r-sm);padding:10px 12px}
.ob-nivel b{font-size:12.5px;font-weight:800;letter-spacing:.03em;flex-shrink:0}
.ob-nivel span{font-size:12.5px;font-weight:700;color:var(--login-accent);flex-shrink:0}
.ob-nivel small{font-size:12px;color:var(--txt2);flex-basis:100%}
.ob-nivel-activo{background:rgba(248,116,6,.1)}
.ob-nivel-activo b{color:var(--login-accent)}

.ob-progreso{text-align:center;font-size:11.5px;font-weight:700;color:var(--txt3);letter-spacing:.04em;margin-top:18px}
.ob-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;flex-wrap:wrap}
.ob-footer-final{justify-content:flex-end}
@media(max-width:480px){
  .ob-footer{flex-direction:column-reverse;align-items:stretch}
  .ob-footer .btn,.ob-footer .link-mini{width:100%;text-align:center}
  .ob-footer-final{flex-direction:column-reverse}
}

/* ── Checklist "Primeros pasos" (Fase UX-1A) — solo Inicio, solo Gratis,
   se oculta sola cuando las 3 tareas quedan hechas (ver inicio.js). ── */
.pp-card{background:var(--card);border-radius:var(--r-md);padding:16px;box-shadow:var(--sh-1);margin-top:16px}
.pp-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pp-head b{font-size:14px}
.pp-contador{font-size:12px;font-weight:700;color:var(--txt3)}
.pp-lista{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.pp-item{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--txt2)}
.pp-item-check{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(13,27,42,.18);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:transparent}
.pp-item.pp-hecho{color:var(--txt)}
.pp-item.pp-hecho .pp-item-check{background:var(--green);border-color:var(--green);color:#fff}

/* Lanzamiento PRO — cupo de Inventario (1,000 registros activos) */
.inv-cupo{margin:12px 0 6px;padding:10px 14px;border:1px solid rgba(13,27,42,.1);border-radius:var(--r-md);background:var(--card)}
.inv-cupo-linea{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--txt2)}
.inv-cupo-linea b{color:var(--txt)}
.inv-cupo-barra{height:6px;border-radius:99px;background:rgba(13,27,42,.08);margin-top:8px;overflow:hidden}
.inv-cupo-barra i{display:block;height:100%;background:var(--green);border-radius:99px}
.inv-cupo.alerta .inv-cupo-barra i{background:var(--warn)}
.inv-cupo.lleno .inv-cupo-barra i{background:var(--red)}
.inv-cupo-aviso{margin:8px 0 0;font-size:12.5px;line-height:1.4;padding:8px 10px;border-radius:var(--r-sm);background:var(--warn-bg);color:var(--warn)}
.inv-cupo.lleno .inv-cupo-aviso{background:var(--red-bg);color:var(--red-ink)}
:root[data-theme="dark"] .inv-cupo{border-color:rgba(255,255,255,.1)}
:root[data-theme="dark"] .inv-cupo-barra{background:rgba(255,255,255,.1)}

/* Lanzamiento PRO — tarjeta comercial discreta al fondo de Inventario */
.inv-industrial{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:22px 0 8px;padding:14px 16px;border:1px dashed rgba(13,27,42,.18);border-radius:var(--r-lg);background:transparent}
.inv-industrial-txt{flex:1;min-width:200px}
.inv-industrial-txt b{display:block;font-size:13.5px;color:var(--txt)}
.inv-industrial-txt p{margin:3px 0 0;font-size:12.5px;line-height:1.4;color:var(--txt2)}
:root[data-theme="dark"] .inv-industrial{border-color:rgba(255,255,255,.18)}