/* ============================================================
   Adiasoft — Tema CLARO · azul marino corporativo (#002863)
   ============================================================ */
:root{
  --navy:#002863;          /* azul marino del logo */
  --navy-2:#0a3c8c;
  --navy-soft:#e8eef8;
  --acc:#0bb6c4;           /* turquesa */
  --acc-2:#2f7ff0;         /* azul brillante */
  --warm:#ff8a3d;
  --bg:#f6f8fc;
  --bg-2:#eef2f9;
  --panel:#ffffff;
  --line:#e2e8f3;
  --line-2:#d3def0;
  /* 🔴 Borde de los botones «fantasma» (.btn-ghost). NO es --line-2 a propósito:
     --line-2 (#d3def0) da 1.36:1 contra el blanco del panel, y como el relleno
     del botón es ese mismo blanco, sobre una caja clara (.module-list-hero,
     que es el encabezado de casi todas las pantallas del ERP) el botón se
     queda literalmente sin silueta: no se ve dónde empieza ni dónde acaba.
     Este tono da 3.72:1 contra blanco y 3.50:1 contra el tinte del encabezado,
     que es lo que pide WCAG 2.1 SC 1.4.11 para el contorno de un control. */
  --btn-line:#6b86ae;
  /* 🔴 Antetítulo de las pantallas del ERP (.erp-eyebrow). Nació en #73e3e7
     para el encabezado azul oscuro .erp-module-intro —donde da 9.67:1— pero
     ese bloque ya no lo usa NINGUNA pantalla: hoy el antetítulo vive dentro
     de .module-list-hero, que es casi blanco, y ahí el mismo turquesa da
     1.51:1. Es el «texto casi blanco sobre fondo claro» de Estados
     financieros («Contabilidad Corporativo · SUNAT», justo encima de los
     botones). Este teal oscuro da 5.88:1 sobre blanco. */
  --eyebrow:#0b6f7a;
  --text:#10203a;
  --muted:#5b6b85;
  --dim:#90a0b8;
  --shadow:0 18px 50px rgba(0,40,99,.10);
  --shadow-sm:0 6px 20px rgba(0,40,99,.08);
  --display:'Bricolage Grotesque','Sora',sans-serif;
  --body:'Manrope',sans-serif;
  --mono:'Space Mono',monospace;
  --r:18px;
  --maxw:1240px;
}

/* ============================================================
   INVENTARIO · catálogo multiubicación y presentaciones
   ============================================================ */
.inventory-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 30px;background:linear-gradient(125deg,#fff 0%,#f4fbff 55%,#e8fbfa 100%);border:1px solid rgba(12,163,177,.15);overflow:hidden;position:relative}
.inventory-hero:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;right:-90px;top:-130px;background:radial-gradient(circle,rgba(14,175,183,.18),transparent 70%);pointer-events:none}
.inventory-hero-copy{position:relative;z-index:1}.inventory-hero h2{margin:5px 0 7px;font-size:clamp(1.55rem,2.5vw,2.15rem);color:#082e57}.inventory-hero p{margin:0;color:#587087;max-width:720px}.inventory-hero-actions{display:flex;gap:10px;position:relative;z-index:1;flex-shrink:0}.inventory-hero-actions .ui-line-icon{width:19px;height:19px}
.inventory-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:16px 0}.inventory-kpis article{background:#fff;border:1px solid #e1ebf4;border-radius:17px;padding:18px 20px;box-shadow:0 8px 24px rgba(7,42,81,.055);display:flex;flex-direction:column;min-height:118px}.inventory-kpis span{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:#71869a}.inventory-kpis b{font-size:1.55rem;color:#092f59;margin:8px 0 3px;line-height:1.1}.inventory-kpis small{color:#8293a3}.inventory-kpis article.warn{border-color:#ffd9a8;background:linear-gradient(145deg,#fff,#fff8ef)}.inventory-kpis article.warn b{color:#b95c09}
.inventory-list-card{padding:0;overflow:hidden}.inventory-list-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 25px;border-bottom:1px solid #e8eef4;background:linear-gradient(90deg,#fff,#fbfdff)}.inventory-list-head h3{margin:0 0 5px;color:#0a315d;font-size:1.25rem}.inventory-list-head p{margin:0;color:#708397;font-size:.9rem}.inventory-search{width:min(380px,100%)}.inventory-search input{width:100%;border-radius:12px;background:#f2f6fa;border:1px solid #e0e8ef;padding:12px 15px}.inventory-table-wrap{margin:0}.inventory-table{min-width:1120px}.inventory-table th{font-size:.68rem;letter-spacing:.055em;text-transform:uppercase;color:#6f8396;background:#f8fbfd}.inventory-table td{vertical-align:middle}.inventory-product-cell{display:flex;gap:11px;align-items:center;min-width:220px}.inventory-product-cell b{display:block;color:#0b315b}.inventory-product-cell small,.inventory-table td>small,.inventory-table td>b+small{display:block;color:#8091a1;margin-top:4px}.inventory-product-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#e6faff,#e8f0ff);color:#087f9b;flex:0 0 auto}.inventory-product-icon svg{width:20px;height:20px}.inventory-total{font-size:1.05rem;color:#087d81}.inventory-total.low{color:#c26213}
.inventory-unit-details,.inventory-location-details{position:relative}.inventory-unit-details summary,.inventory-location-details summary{cursor:pointer;list-style:none;white-space:nowrap;font-weight:750;color:#31516e;background:#f2f7fa;border:1px solid #e2ebf1;border-radius:9px;padding:7px 9px}.inventory-unit-details summary::-webkit-details-marker,.inventory-location-details summary::-webkit-details-marker{display:none}.inventory-unit-details[open] summary,.inventory-location-details[open] summary{border-color:#38b7bf;background:#edfafa}.inventory-unit-details div,.inventory-location-details div{position:absolute;z-index:12;top:calc(100% + 6px);left:0;min-width:235px;padding:9px;border-radius:12px;background:#fff;border:1px solid #dce8ef;box-shadow:0 13px 30px rgba(6,41,75,.15)}.inventory-unit-details div span{display:block;padding:6px 8px;color:#49627a}.inventory-location-details div span{display:flex;justify-content:space-between;gap:18px;padding:7px 8px;border-bottom:1px solid #edf2f5}.inventory-location-details div span:last-child{border:0}.inventory-location-details em{font-style:normal;color:#078a8d;font-weight:800}
.inventory-barcode-button{border:0;background:transparent;padding:0;cursor:pointer;width:104px;color:#28445f}.inventory-barcode-button:hover{color:#068f98}.inv-barcode-svg{display:block;width:100%;height:28px;fill:currentColor;background:#fff}.inventory-barcode-button small{display:block;max-width:104px;overflow:hidden;text-overflow:ellipsis;text-align:center;font-size:.64rem;letter-spacing:.08em;margin-top:3px}.inventory-row-actions{display:flex;align-items:center;gap:6px;white-space:nowrap}.inventory-no-results{padding:35px;text-align:center;color:#71869a}
.inventory-modal{width:min(1120px,calc(100vw - 28px));max-height:92vh}.inventory-form{padding:0}.inventory-form-section{padding:21px 25px;border-bottom:1px solid #e6edf3}.inventory-form-section .field-row{margin-top:14px}.inventory-section-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.inventory-help{margin:7px 0 14px 39px;color:#718399;font-size:.86rem}.inventory-initial-stock{align-items:flex-end;background:#f4fbfc;border:1px dashed #a6dfe2;border-radius:13px;padding:13px}.inventory-initial-stock small{max-width:330px;color:#60808b;padding-bottom:10px}.inventory-units{display:flex;flex-direction:column;gap:9px}.inventory-unit-row{display:grid;grid-template-columns:1fr 1.3fr .8fr .8fr 1.2fr 34px;gap:9px;align-items:end;background:#f7fafc;border:1px solid #e2eaf0;border-radius:13px;padding:11px}.inventory-unit-row .field{min-width:0}.inventory-unit-row label{font-size:.71rem}.inventory-unit-remove{width:32px;height:40px;border:0;border-radius:9px;background:#fff0f0;color:#c84949;font-size:1.2rem;cursor:pointer}.inventory-unit-remove:hover{background:#ffe2e2}.inventory-checks{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px}.inventory-checks label{display:flex;align-items:center;gap:9px;font-weight:700;color:#284861}.inventory-checks input{width:18px;height:18px;accent-color:#059da7}
.stock-modal{width:min(850px,calc(100vw - 28px))}.barcode-modal{width:min(720px,calc(100vw - 28px))}.inventory-barcode-large{padding:28px;border:1px solid #dce6ed;border-radius:16px;text-align:center;background:#fff}.inventory-barcode-large .inv-barcode-svg{height:105px;max-width:570px;margin:auto}.inventory-barcode-large b{display:block;font-size:1.25rem;letter-spacing:.16em;margin:14px 0 5px;color:#092e57}.inventory-barcode-large span{color:#6c8195}.inventory-kardex-card{padding:0;overflow:hidden}.inventory-kardex-card>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:20px 24px}.inventory-kardex-card>summary::-webkit-details-marker{display:none}.inventory-kardex-card>summary span{display:flex;flex-direction:column;gap:4px}.inventory-kardex-card>summary b{color:#0c3158;font-size:1.08rem}.inventory-kardex-card>summary small{color:#7c8fa0}.inventory-kardex-card>summary em{font-style:normal;color:#087f8c;font-weight:800}.inventory-kardex-card[open]>summary{border-bottom:1px solid #e3ebf1}
@media(max-width:980px){.inventory-hero{align-items:flex-start}.inventory-hero-actions{flex-direction:column}.inventory-kpis{grid-template-columns:repeat(2,1fr)}.inventory-list-head{align-items:flex-start;flex-direction:column}.inventory-search{width:100%}}
@media(max-width:720px){.inventory-hero{padding:22px 19px;flex-direction:column}.inventory-hero-actions{width:100%;display:grid;grid-template-columns:1fr 1.3fr}.inventory-hero-actions .btn{justify-content:center;margin:0}.inventory-kpis{gap:10px}.inventory-kpis article{min-height:103px;padding:15px}.inventory-kpis b{font-size:1.25rem}.inventory-list-head{padding:19px}.inventory-table-wrap{overflow:visible}.inventory-table{min-width:0;display:block;padding:13px}.inventory-table thead{display:none}.inventory-table tbody{display:grid;gap:12px}.inventory-table tr{display:grid;background:#fff;border:1px solid #e0e9ef;border-radius:15px;padding:14px;box-shadow:0 5px 16px rgba(9,46,81,.05)}.inventory-table td{display:grid;grid-template-columns:112px minmax(0,1fr);gap:9px;padding:9px 0!important;border-bottom:1px dashed #e5ebef}.inventory-table td:last-child{border-bottom:0}.inventory-table td:before{font-size:.65rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em;color:#8192a2}.inventory-table td:nth-child(1):before{content:"Artículo"}.inventory-table td:nth-child(2):before{content:"Marca / modelo"}.inventory-table td:nth-child(3):before{content:"Presentaciones"}.inventory-table td:nth-child(4):before{content:"Precio"}.inventory-table td:nth-child(5):before{content:"Stock total"}.inventory-table td:nth-child(6):before{content:"Ubicaciones"}.inventory-table td:nth-child(7):before{content:"Código"}.inventory-table td:nth-child(8):before{content:"Estado"}.inventory-table td:nth-child(9):before{content:"Acciones"}.inventory-product-cell{min-width:0}.inventory-unit-details div,.inventory-location-details div{position:static;margin-top:6px;box-shadow:none}.inventory-row-actions{flex-wrap:wrap}.inventory-modal,.stock-modal,.barcode-modal{width:calc(100vw - 14px);max-height:96vh;margin:auto}.inventory-form-section{padding:18px 15px}.inventory-help{margin-left:0}.inventory-unit-row{grid-template-columns:1fr 1fr;padding:10px}.inventory-unit-row .field:nth-child(2),.inventory-unit-row .field:nth-child(5){grid-column:span 2}.inventory-unit-remove{grid-column:2;justify-self:end}.inventory-initial-stock{align-items:stretch}.inventory-initial-stock small{padding:0}.inventory-checks{flex-direction:column;gap:11px}.inventory-barcode-large{padding:15px}.inventory-barcode-large .inv-barcode-svg{height:80px}}
@media(max-width:430px){.inventory-kpis{grid-template-columns:1fr 1fr}.inventory-kpis small{font-size:.7rem}.inventory-table td{grid-template-columns:92px minmax(0,1fr)}.inventory-hero-actions{grid-template-columns:1fr}.inventory-unit-row{grid-template-columns:1fr}.inventory-unit-row .field:nth-child(2),.inventory-unit-row .field:nth-child(5){grid-column:auto}.inventory-unit-remove{grid-column:1}}
@media print{body *{visibility:hidden!important}.barcode-modal[open],.barcode-modal[open] *{visibility:visible!important}.barcode-modal[open]{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0}.barcode-modal .erp-modal-head,.barcode-modal .erp-modal-actions{display:none!important}.inventory-barcode-large{border:0;margin:40mm auto 0;max-width:150mm}}
/* ---------- TEMA OSCURO (opcional, por toggle) ---------- */
[data-theme="dark"]{
  --navy:#3d8bff;          /* azul claro para contraste en oscuro */
  --navy-2:#5fa3ff;
  --navy-soft:#16243d;
  --acc:#14d0e0;
  --acc-2:#4f95ff;
  --bg:#0a1018;
  --bg-2:#111a26;
  --panel:#131e2c;
  --line:#1e2c3f;
  --line-2:#2a3b52;
  /* Mismo problema en oscuro: --line-2 (#2a3b52) sobre --panel (#131e2c) es
     1.48:1 y el botón tampoco tiene silueta. Este tono da 3.27:1. */
  --btn-line:#556f94;
  /* En oscuro el fondo vuelve a ser oscuro, así que el antetítulo vuelve a ser
     claro: #5fd3d9 sobre --panel (#131e2c) da 9.45:1. */
  --eyebrow:#5fd3d9;
  --text:#e8eef6;
  --muted:#9fb0c5;
  --dim:#6b7d96;
  --shadow:0 18px 50px rgba(0,0,0,.5);
  --shadow-sm:0 6px 20px rgba(0,0,0,.35);
}
[data-theme="dark"] header{background:rgba(15,24,38,.88)}
[data-theme="dark"] .hero{background:linear-gradient(135deg,#0a1320,#0c1828 50%,#0a1f24)}
[data-theme="dark"] .page-hero,[data-theme="dark"] .cta-final,[data-theme="dark"] .tax-card{background:linear-gradient(135deg,#13233d,#0f2d44)}
[data-theme="dark"] .mobile-menu a{background:var(--panel)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);font-family:var(--body);
  line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- HEADER ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;background:linear-gradient(112deg,#fff 0%,#f2f5f8 58%,#dfe7ee 100%);border-bottom:1px solid rgba(22,60,96,.16);box-shadow:0 1px 0 rgba(255,255,255,.9) inset;transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .3s,background .3s;will-change:transform}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent 3%,rgba(11,182,196,.58) 34%,rgba(47,127,240,.52) 66%,transparent 97%);pointer-events:none}
header.scrolled{background:linear-gradient(112deg,rgba(255,255,255,.97),rgba(236,242,247,.97) 62%,rgba(216,227,236,.97));box-shadow:0 8px 24px rgba(0,40,99,.13)}
header.header-hidden{transform:translateY(-110%)}
/* compensar el espacio del header fijo en el body */
body{padding-top:79px}
[data-theme="dark"] header{background:#0a1320}
/* logo navy sobre header claro */
header .logo{color:var(--navy)}
header .logo .mark{color:var(--navy)}
header .logo b{color:var(--acc)}
/* nav sobre fondo claro (light mode default) */
header .nav-links a{color:var(--muted)}
header .nav-links a:hover,header .nav-links a.active{color:var(--navy);background:var(--navy-soft)}
header .nav-search-btn{border-color:var(--line-2);background:transparent;color:var(--navy)}
header .nav-search-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
header .country-btn{border-color:var(--line-2);background:var(--bg);color:var(--navy)}
header .country-btn:hover{border-color:var(--acc);background:var(--navy-soft)}
header .country-btn .chev{color:var(--dim)}
header .burger span{background:var(--navy)}
.nav-cta{background:var(--navy)!important;color:#fff!important;font-weight:800!important;box-shadow:0 6px 18px rgba(0,40,99,.20)}
.nav-cta:hover{transform:translateY(-1px);background:var(--acc)!important;color:var(--navy)!important}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:800;font-size:1.34rem;letter-spacing:-.01em;color:var(--navy)}
.logo .mark{width:32px;height:32px;flex:none;color:var(--navy);display:flex;align-items:center}
.logo .mark svg{width:100%;height:100%;display:block}
.logo b{color:var(--acc);font-weight:800;margin-left:.04em}
[data-theme="dark"] .logo{color:#fff}
[data-theme="dark"] .logo .mark{color:#fff}
[data-theme="dark"] .logo b{color:var(--acc)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{padding:9px 14px;border-radius:9px;color:var(--muted);font-weight:600;font-size:.92rem;transition:.2s}
.nav-links a:hover,.nav-links a.active{color:var(--navy);background:var(--navy-soft)}
.nav-cta{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff!important;font-weight:700!important;box-shadow:0 6px 18px rgba(0,40,99,.25)}
/* 🔴 EL BOTÓN «INGRESAR» SE BORRABA AL PASAR EL RATÓN.
   Hay DOS reglas .nav-cta:hover con la misma especificidad. Esta, por ir
   después, gana — pero solo redeclaraba `background`. El `color:var(--navy)`
   de la de arriba sobrevivía, y quedaba letra azul marino (#002863) sobre
   botón azul marino: contraste 1.00:1. Es decir, el texto desaparecía.
   Se declara aquí el color junto al fondo: donde se decide uno se decide el
   otro, que es lo que impide que vuelva a pasar. Blanco sobre el degradado
   navy → 14.15:1 en el extremo oscuro y 10.30:1 en el claro. */
.nav-cta:hover{transform:translateY(-1px);background:linear-gradient(135deg,var(--navy),var(--navy-2))!important;color:#fff!important}

/* country selector */
.country-pick{position:relative;margin-left:4px}
.country-btn{display:flex;align-items:center;gap:7px;cursor:pointer;padding:8px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--panel);font-weight:600;font-size:.86rem;transition:.2s}
.country-btn:hover{border-color:var(--acc)}
.country-btn .flag{font-size:1.1rem}
.country-btn .chev{color:var(--dim);font-size:.65rem;transition:.2s}
.country-btn.open .chev{transform:rotate(180deg)}
.country-menu{position:absolute;top:calc(100% + 8px);right:0;width:230px;background:var(--panel);border:1px solid var(--line-2);border-radius:14px;padding:6px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s;z-index:120}
.country-menu.show{opacity:1;visibility:visible;transform:none}
.country-opt{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:9px;cursor:pointer;transition:.15s}
.country-opt:hover{background:var(--navy-soft)}
.country-opt .flag{font-size:1.25rem}
.country-opt .co-name{font-weight:700;font-size:.88rem}
.country-opt .co-tax{font-size:.7rem;color:var(--acc);font-family:var(--mono)}
.country-opt.active{background:var(--navy-soft);outline:1px solid var(--acc)}

.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;border:0;background:transparent}
.burger span{width:24px;height:2px;background:var(--navy);border-radius:2px}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 25px;border-radius:12px;font-weight:700;font-size:.95rem;cursor:pointer;border:none;transition:.25s;font-family:var(--body)}
.btn-primary{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;box-shadow:0 10px 26px rgba(0,40,99,.22)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,40,99,.3)}
.btn-acc{background:linear-gradient(135deg,var(--acc),var(--acc-2));color:#fff;box-shadow:0 10px 26px rgba(11,182,196,.28)}
.btn-acc:hover{transform:translateY(-2px)}
/* ============================================================
   BOTONES FANTASMA · por qué se perdían
   ------------------------------------------------------------
   El texto nunca fue el problema: --navy sobre --panel da 14.15:1.
   Lo que fallaba era el CONTORNO. El relleno del botón es var(--panel)
   —el mismo blanco de fondo del panel— y el borde era var(--line-2),
   1.36:1 contra ese blanco. En cuanto el botón cae dentro de una caja
   clara (.module-list-hero: el encabezado de Estados financieros y de
   casi todo el ERP) desaparece el único trazo que lo separaba del
   fondo, y lo que queda es una palabra suelta flotando.
   Se arregla EN LA CLASE, no en la pantalla, porque .btn-ghost es el
   botón secundario de todo el producto (panel, /adiasis y web).
   Sin !important: las variantes que ya existían —.hero .btn-ghost y
   .cta-final .btn-ghost, que van sobre azul oscuro— tienen más
   especificidad y siguen mandando en su sitio.
   ============================================================ */
.btn-ghost{background:var(--panel);color:var(--navy);border:1px solid var(--btn-line)}
.btn-ghost:hover{border-color:var(--navy);background:var(--navy-soft)}
/* El foco de teclado tenía el aro global de 2 px en --acc (#0bb6c4), que sobre
   blanco es 2.47:1: se ve menos que el borde del propio botón. --acc-2 da
   3.88:1, el mínimo de WCAG para un indicador de foco. Gana por especificidad
   (0,2,0) al aro genérico de `a:focus-visible` (0,1,1); no hace falta forzar. */
.btn:focus-visible{outline:3px solid var(--acc-2);outline-offset:2px}
/* Deshabilitado: hasta ahora un botón apagado («Plan activo», «Todavía no
   disponible» en Planes) se veía idéntico a uno pulsable y la gente lo pulsaba.
   Se apaga con color propio, no con opacity, para no arrastrar también el
   texto por debajo del contraste. */
.btn-ghost:disabled,.btn-ghost[disabled],.btn-ghost[aria-disabled="true"]{
  background:var(--bg-2);color:var(--muted);cursor:not-allowed}
/* El borde NO se aclara al deshabilitar: si se aclarase, el botón apagado
   volvería a quedarse sin silueta y parecería un texto suelto en vez de un
   control desactivado. Lo que cambia es el relleno y el color de la letra
   (--muted da 4.81:1 sobre --bg-2, de sobra aunque WCAG ni lo exija aquí). */
.btn-ghost:disabled:hover,.btn-ghost[disabled]:hover,.btn-ghost[aria-disabled="true"]:hover{
  background:var(--bg-2);border-color:var(--btn-line)}
.btn:disabled::after,.btn[disabled]::after{display:none}

/* ---------- HERO FULL-WIDTH + CANVAS ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#03102a 0%,#0a2354 45%,#0e2f6c 100%);transition:background 1.2s ease}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 560px at 85% 10%,rgba(47,127,240,.20),transparent 60%),radial-gradient(800px 560px at 5% 90%,rgba(11,182,196,.18),transparent 60%);pointer-events:none;transition:background 1.2s ease}
/* Fondo distinto por slide (azules oscuros · cada uno con su personalidad) */
.hero[data-slide="0"]{background:linear-gradient(135deg,#04102a 0%,#0a2354 45%,#0d3470 100%)}
.hero[data-slide="1"]{background:linear-gradient(135deg,#021024 0%,#082145 45%,#0e3a86 100%)}
.hero[data-slide="1"]::before{background:radial-gradient(900px 600px at 80% 12%,rgba(120,180,255,.22),transparent 62%),radial-gradient(800px 500px at 10% 90%,rgba(47,127,240,.18),transparent 60%)}
.hero[data-slide="2"]{background:radial-gradient(120% 100% at 50% 50%,#08163a 0%,#040b22 70%,#02050f 100%)}
.hero[data-slide="2"]::before{background:radial-gradient(420px 260px at 18% 78%,rgba(255,170,90,.22),transparent 65%),radial-gradient(220px 150px at 82% 18%,rgba(120,200,255,.20),transparent 65%)}
/* Slide 4: fondo violeta-azul profundo para resaltar tarjetas blancas y mate */
.hero[data-slide="3"]{background:linear-gradient(135deg,#0a0d24 0%,#13133a 45%,#1d1a4e 100%)}
.hero[data-slide="3"]::before{background:
  radial-gradient(700px 480px at 78% 25%,rgba(124,58,237,.30),transparent 60%),
  radial-gradient(620px 420px at 18% 80%,rgba(11,182,196,.22),transparent 62%),
  radial-gradient(380px 280px at 50% 50%,rgba(47,127,240,.16),transparent 70%)}
/* En azul oscuro: texto del hero pasa a claro */
.hero .hero-text h1,.hero .hero-text h1 em{color:#f6fbff}
.hero .hero-text h1 em{background:linear-gradient(120deg,#6fe5f0,#a3c5ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .hero-text p{color:#b8c8e0}
.hero .slide-tag{color:#9ed3ff;background:rgba(120,180,255,.08);border:1px solid rgba(120,180,255,.25);padding:6px 14px;border-radius:20px}
.hero .slide-tag .dot{background:#5fe0ea;box-shadow:0 0 10px #5fe0ea}
.hero .crumb,.hero .breadcrumb{color:#9eb5d6}
.hero .btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.hero-nav button{background:rgba(255,255,255,.25)}
.hero-nav button.active{background:#5fe0ea;width:46px}
.hero-arrow{border-color:rgba(255,255,255,.25);color:#fff}
.hero-arrow:hover{background:#5fe0ea;color:#03102a;border-color:#5fe0ea}
#netCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:90px 24px 100px;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero-text{max-width:580px}
.hero-slides{position:relative;min-height:230px}
.hslide{position:absolute;inset:0;opacity:0;transform:translateY(14px);transition:.7s;pointer-events:none}
.hslide.active{opacity:1;transform:none;position:relative;pointer-events:auto}
.slide-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--navy);border:1px solid var(--line-2);padding:6px 13px;border-radius:30px;margin-bottom:20px;background:rgba(255,255,255,.7)}
.slide-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 9px var(--acc)}
.hslide h1{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4vw,3.2rem);line-height:1.06;letter-spacing:-.03em;margin-bottom:16px;color:var(--navy)}
.hslide h1 em{font-style:normal;background:linear-gradient(120deg,var(--acc),var(--acc-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hslide p{color:var(--muted);font-size:1.06rem;max-width:480px}
.slide-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px}
/* Chips informativos en hero slide 4 (matemáticas + agentes IA) */
.slide-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.slide-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;padding:7px 12px;border-radius:20px;font-weight:700;line-height:1;transition:.25s}
.slide-chip-math{background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(11,182,196,.18));color:#7c3aed;border:1px solid rgba(124,58,237,.35)}
.slide-chip-agents{background:linear-gradient(135deg,rgba(11,182,196,.16),rgba(47,127,240,.16));color:var(--acc);border:1px solid rgba(11,182,196,.35)}
.slide-chip:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(11,40,99,.10)}
[data-theme="dark"] .slide-chip-math{background:linear-gradient(135deg,rgba(124,58,237,.25),rgba(11,182,196,.20));color:#c0a6ff;border-color:rgba(160,140,255,.45)}
[data-theme="dark"] .slide-chip-agents{color:#5fe0ea;border-color:rgba(95,224,234,.45)}
/* Chips dentro del hero (siempre oscuro): texto más claro para contraste */
.hero .slide-chip-math{background:linear-gradient(135deg,rgba(160,120,255,.18),rgba(120,200,255,.15));color:#c8b0ff;border-color:rgba(160,140,255,.55)}
.hero .slide-chip-agents{background:linear-gradient(135deg,rgba(95,224,234,.16),rgba(120,180,255,.14));color:#7ff0fa;border-color:rgba(95,224,234,.55)}
/* Hero slide 4 — fondo del hero un poco más oscuro y matemático */
.hero[data-slide="3"] .agents-math-bg text{animation:mathFloat 6s ease-in-out infinite}
.agents-math-bg text:nth-child(2){animation-delay:-1s}
.agents-math-bg text:nth-child(3){animation-delay:-2s}
.agents-math-bg text:nth-child(4){animation-delay:-3s}
.agents-math-bg text:nth-child(5){animation-delay:-4s}
.agents-math-bg text:nth-child(6){animation-delay:-5s}
@keyframes mathFloat{
  0%,100%{transform:translateY(0);opacity:.30}
  50%{transform:translateY(-6px);opacity:.55}
}
@media(prefers-reduced-motion:reduce){.agents-math-bg text{animation:none}}
.hero-nav-wrap{display:flex;align-items:center;gap:14px;margin-top:30px}
.hero-nav{display:flex;gap:9px;margin-top:0}
/* El hero es SIEMPRE oscuro (ambos temas): los controles usan colores fijos
   claros/cian, no variables de tema (que en claro serían navy/gris = invisibles). */
.hero-arrow{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.07);
  cursor:pointer;display:grid;place-items:center;color:#fff;transition:.2s;flex:none}
.hero-arrow svg{width:18px;height:18px}
.hero-arrow:hover{background:#5fe0ea;color:#03102a;border-color:#5fe0ea;transform:scale(1.05)}
.hero-nav button{width:32px;height:6px;border-radius:4px;border:none;background:rgba(255,255,255,.32);cursor:pointer;transition:.3s}
.hero-nav button.active{background:#5fe0ea;width:46px;box-shadow:0 0 12px rgba(95,224,234,.6)}

/* AI / ERP visual card */
.hero-visual{position:relative}
.ai-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow)}
.ai-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.ai-head .ai-badge{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.7rem;color:var(--acc);font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.ai-head .ai-badge .spark{width:18px;height:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--acc),var(--acc-2));border-radius:6px;color:#fff;font-size:.7rem}
.ai-head .live{font-family:var(--mono);font-size:.68rem;color:var(--navy);display:flex;align-items:center;gap:6px}
.ai-head .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.ai-chat{background:var(--bg-2);border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:.85rem;color:var(--muted)}
.ai-chat b{color:var(--navy)}
.ai-typing{color:var(--acc);font-family:var(--mono);font-size:.8rem}
.ai-bars{display:flex;align-items:flex-end;gap:7px;height:90px;margin:8px 0 12px;padding:0 2px}
.ai-bars i{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(to top,var(--acc-2),var(--acc));opacity:.9;transition:height .8s cubic-bezier(.2,.7,.3,1)}
.ai-row{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);padding:8px 0;border-top:1px solid var(--line)}
.ai-row b{color:var(--navy);font-family:var(--mono)}
.ai-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:8px}
.ai-icons .ic{aspect-ratio:1;border-radius:12px;background:var(--navy-soft);display:grid;place-items:center;font-size:1.3rem;border:1px solid var(--line);transition:.3s;cursor:default}
.ai-icons .ic:hover{background:var(--navy);transform:translateY(-3px)}

/* ---------- SECTIONS ---------- */
.sec{padding:84px 0}
.sec-head{text-align:center;max-width:680px;margin:0 auto 52px}
.eyebrow{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;color:var(--acc);margin-bottom:13px}
.sec-head h2{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,3.4vw,2.7rem);letter-spacing:-.03em;line-height:1.1;color:var(--navy)}
.sec-head p{color:var(--muted);margin-top:14px;font-size:1.04rem}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow-sm)}
.stat .n{font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.02em;color:var(--navy)}
.stat .l{color:var(--muted);font-size:.87rem;margin-top:4px}

/* rubros / features */
.rubro-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.rubro-chip{padding:9px 16px;border-radius:30px;border:1px solid var(--line-2);background:var(--panel);font-weight:600;font-size:.86rem;color:var(--muted);transition:.25s;box-shadow:var(--shadow-sm)}
.rubro-chip:hover{border-color:var(--acc);color:var(--navy);transform:translateY(-2px)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;transition:.3s;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--navy),var(--acc));transform:scaleX(0);transform-origin:left;transition:.35s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card:hover::before{transform:scaleX(1)}
.card .ico{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;font-size:1.5rem;background:var(--navy-soft);margin-bottom:15px}
.card h3{font-family:var(--display);font-weight:700;font-size:1.08rem;margin-bottom:7px;color:var(--navy)}
.card p{color:var(--muted);font-size:.88rem}
.card .lnk{margin-top:14px;font-weight:700;font-size:.85rem;color:var(--acc);display:inline-flex;gap:5px;align-items:center}

/* tax / paises */
.tax-banner{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:42px;display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center;box-shadow:var(--shadow);overflow:hidden;position:relative}
.tax-banner::after{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(11,182,196,.14),transparent 70%)}
.tax-left h2{font-family:var(--display);font-weight:800;font-size:1.9rem;color:var(--navy);margin-bottom:12px;letter-spacing:-.02em}
.tax-left p{color:var(--muted);margin-bottom:22px}
.tax-flags{display:flex;flex-wrap:wrap;gap:9px}
.tax-flag{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:11px;border:1px solid var(--line);background:var(--bg);cursor:pointer;transition:.25s;font-weight:600;font-size:.86rem}
.tax-flag .flag{font-size:1.2rem}
.tax-flag:hover{border-color:var(--acc);transform:translateY(-2px)}
.tax-flag.active{border-color:var(--navy);background:var(--navy-soft);box-shadow:0 0 0 3px rgba(0,40,99,.07)}
.tax-card{background:linear-gradient(160deg,var(--navy),var(--navy-2));color:#fff;border-radius:18px;padding:28px;position:relative;z-index:2}
.tax-card .tc-country{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.tax-card .tc-country .flag{font-size:2.2rem}
.tax-card .tc-country h3{font-family:var(--display);font-weight:800;font-size:1.35rem}
.tax-card .tc-country span{color:rgba(255,255,255,.6);font-size:.82rem}
.tc-detail{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid rgba(255,255,255,.14)}
.tc-detail .lbl{color:rgba(255,255,255,.65);font-size:.86rem}
.tc-detail .val{font-family:var(--mono);font-weight:700;color:var(--acc);font-size:.9rem}
.tc-doc{display:inline-flex;align-items:center;gap:6px;margin-top:5px;font-size:.74rem;color:rgba(255,255,255,.8);background:rgba(255,255,255,.1);padding:4px 10px;border-radius:8px}

/* pricing */
.toggle-wrap{display:flex;justify-content:center;align-items:center;gap:15px;margin:0 auto 46px}
.toggle-wrap span{font-weight:600;color:var(--muted);transition:.2s}
.toggle-wrap span.on{color:var(--navy)}
.save-pill{font-family:var(--mono);font-size:.66rem;color:var(--acc);background:rgba(11,182,196,.12);padding:3px 9px;border-radius:20px;margin-left:5px}
.switch{width:56px;height:30px;border-radius:30px;background:var(--bg-2);border:1px solid var(--line-2);cursor:pointer;position:relative;transition:.3s;flex:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--navy-2));transition:.3s}
.switch.year::after{left:29px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.plans.plans-2{grid-template-columns:repeat(2,minmax(0,420px));justify-content:center}
/* Cuatro tarjetas: el gratuito + los tres de pago (rubros de mostrador) */
.plans.plans-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.plans.plans-4 .plan{padding:26px 20px}
.plans.plans-4 .p-features{font-size:.85rem}
@media (max-width:1200px){ .plans.plans-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* Plan gratuito: mismo peso visual, acento propio */
/* position:relative es imprescindible: sin él la etiqueta "Empieza gratis"
   se colocaba respecto a la sección y aterrizaba sobre el interruptor
   mensual/anual (solo .plan.featured traía posicionamiento propio). */
.plan-free{position:relative;border-color:var(--acc)}
.plan-free .p-price .now{font-family:var(--display);font-weight:800;font-size:2.1rem;color:var(--acc)}
.plan-badge.free{background:linear-gradient(135deg,var(--acc),var(--acc-2));color:#02252b}
/* Selector de rubro en la cabecera de precios */
.precio-rubro{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.precio-rubro label{font-size:.86rem;color:#c9d8ea;font-weight:600}
.precio-rubro select{padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.1);color:#fff;font-family:var(--body);font-size:.88rem;
  max-width:min(420px,90vw);cursor:pointer}
.precio-rubro select option{color:var(--text);background:var(--panel)}
.precio-rubro-link{font-size:.85rem;color:var(--acc);font-weight:700;text-decoration:none}
.precio-rubro-link:hover{text-decoration:underline}
/* Asterisco de "control interno" y su nota */
.p-ast{color:var(--acc);font-weight:800;text-decoration:none;padding:0 2px}
.p-ast:hover{text-decoration:underline}
.nota-validez{max-width:900px;margin:18px auto 0;padding:14px 18px;border-radius:14px;
  background:var(--bg-2);border:1px dashed var(--line-2);color:var(--muted);
  font-size:.86rem;line-height:1.55;text-align:left}
.nota-validez b{color:var(--text)}
.nota-validez-link{color:var(--acc);font-weight:700;text-decoration:none;white-space:nowrap}
/* Ficha comparativa de validez */
.validez-box{max-width:760px}
.validez-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}
.validez-card{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:16px}
.validez-card.destacado{border-color:var(--acc);background:var(--panel)}
.validez-card b{display:block;font-family:var(--display);color:var(--navy);margin:8px 0 8px;font-size:1rem}
.validez-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.validez-card li{font-size:.86rem;color:var(--muted);line-height:1.45}
.validez-card li.no{color:var(--dim)}
.vz-tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.7rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;background:var(--navy);color:#fff}
.vz-tag.gratis{background:var(--line-2);color:var(--muted)}
.validez-pie{font-size:.86rem;color:var(--muted)}
.validez-acc{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
@media (max-width:640px){
  .validez-grid{grid-template-columns:1fr}
  .precio-rubro{justify-content:center}
}
.free-hint{text-align:center;margin-top:18px;font-size:.92rem;color:var(--muted)}
.free-hint a{color:var(--acc);font-weight:700;text-decoration:none}
.free-hint a:hover{text-decoration:underline}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:34px 30px;display:flex;flex-direction:column;transition:.3s;box-shadow:var(--shadow-sm)}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.plan.featured{border-color:var(--navy);box-shadow:0 22px 60px rgba(0,40,99,.16);position:relative}
.plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:#fff;background:linear-gradient(135deg,var(--navy),var(--navy-2));padding:5px 15px;border-radius:20px;font-weight:700;white-space:nowrap}
/* Aviso que sustituye al botón «sube a X» cuando X todavía no se vende. */
.plan-cta-soon{display:inline-block;font-size:.82rem;line-height:1.5;color:var(--dim);
  background:rgba(176,137,0,.10);border:1px dashed rgba(176,137,0,.55);border-radius:10px;padding:8px 12px}
.plan-upgrade-card.is-bloqueado{opacity:.9;border-style:dashed}
/* Plan que todavía no se vende: se ve entero (es el destino del producto) pero
   apagado, con su cartel y sin botón de compra. */
.plan.is-bloqueado{position:relative;opacity:.92;border-style:dashed}
.plan-badge.plan-badge-soon{background:linear-gradient(135deg,#7a6a00,#b08900)}
.plan .p-bloqueado{font-size:.76rem;line-height:1.5;color:var(--dim);margin:8px 0 0;text-align:left}
.plan .p-bloqueado b{color:var(--navy)}
.plan .p-name{font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--navy);margin-bottom:5px}
/* «Tu plan actual»: una línea pequeña dentro de la tarjeta que le toca, en vez
   del cartel que antes tapaba el hero de la página. */
.plan .p-actual{font-size:.72rem;color:var(--acc-2,#0bb6c4);font-weight:600;margin:-2px 0 6px;line-height:1.4}
.plan .p-actual .pa-lbl{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.plan .p-actual .pa-emp{color:var(--dim)}
.plan .p-actual a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.plan .p-desc{color:var(--dim);font-size:.86rem;min-height:42px;margin-bottom:20px}
.plan .p-price .quote{font-family:var(--display);font-weight:800;font-size:1.7rem;background:linear-gradient(120deg,var(--acc),var(--acc-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.plan .p-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.plan .p-price .was{font-size:1rem;color:var(--dim);text-decoration:line-through;font-weight:600}
.plan .p-price .sym{font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--navy);align-self:flex-start;margin-top:6px}
.plan.featured .p-price .sym{background:linear-gradient(120deg,var(--acc),var(--acc-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.plan .p-price .now{font-family:var(--display);font-weight:800;font-size:2.2rem;color:var(--navy);letter-spacing:-.02em}
.plan .p-price .per{font-size:.9rem;color:var(--muted);font-weight:600}
.plan.featured .p-price .now{background:linear-gradient(120deg,var(--acc),var(--acc-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.plan .p-cycle{color:var(--muted);font-size:.83rem;margin:6px 0 22px;min-height:18px}
.plan .p-features{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:26px;flex:1}
/* La viñeta NO puede ser flex: el <b>, el texto suelto y el <span class="x-pais">
   se convertían en 3 columnas y partían la frase ("Sistema contable completo |
   según | (Perú) normativa"). Con block + check posicionado, el texto fluye
   como un párrafo normal. Propiedades lógicas para que funcione también en RTL. */
.plan .p-features li{display:block;position:relative;padding-inline-start:28px;
  font-size:.89rem;color:var(--muted);line-height:1.55}
.plan .p-features li .ck{position:absolute;inset-inline-start:0;top:3px;width:18px;height:18px;
  border-radius:50%;background:rgba(11,182,196,.16);color:var(--acc);display:grid;place-items:center;font-size:.62rem}
.plan .p-features li.off{opacity:.45}
.plan .p-features li.off .ck{background:var(--bg-2);color:var(--dim)}
.plan .btn{width:100%;justify-content:center}

/* clients slider */
.clients-wrap{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.clients-track{display:flex;gap:20px;width:max-content;animation:scroll 30s linear infinite}
.clients-track:hover{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.client{flex:none;width:210px;height:92px;border-radius:16px;border:1px solid var(--line);background:var(--panel);display:flex;align-items:center;gap:11px;padding:0 18px;box-shadow:var(--shadow-sm);transition:.3s}
.client:hover{border-color:var(--acc);transform:translateY(-3px)}
.client .c-logo{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;font-family:var(--display);font-weight:800;color:#fff}
.client .c-name{font-family:var(--display);font-weight:700;font-size:.98rem;color:var(--navy);line-height:1.1}
.client .c-name small{display:block;font-family:var(--body);font-weight:500;font-size:.7rem;color:var(--dim)}
/* Cliente con logo PNG real (reemplaza el badge de inicial) */
.client-haslogo{justify-content:center;padding:0 22px}
.client .c-img{max-width:100%;max-height:52px;width:auto;height:auto;object-fit:contain;filter:grayscale(100%);opacity:.78;transition:.3s}
.client-haslogo:hover .c-img{filter:grayscale(0);opacity:1}
[data-theme="dark"] .client .c-img{filter:grayscale(100%) brightness(0) invert(1);opacity:.7}
[data-theme="dark"] .client-haslogo:hover .c-img{filter:none;opacity:1}
/* Logos dibujados en canvas: gris en reposo, color al hover.
   En modo oscuro NO se invierten (el canvas se redibuja con colores correctos). */
.client .c-canvas{display:block;filter:grayscale(100%);opacity:.8;transition:.35s;transform:scale(1)}
.client-haslogo:hover .c-canvas{filter:grayscale(0);opacity:1;transform:scale(1.04)}
[data-theme="dark"] .client .c-canvas{filter:grayscale(100%);opacity:.72}
[data-theme="dark"] .client-haslogo:hover .c-canvas{filter:none;opacity:1}

/* testimonial / cta */
.testi{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:48px;text-align:center;max-width:820px;margin:0 auto;box-shadow:var(--shadow)}
.testi .quote{font-family:var(--display);font-weight:600;font-size:1.4rem;line-height:1.4;color:var(--navy);margin-bottom:22px}
.testi .quote span{color:var(--acc)}
.testi .who{color:var(--muted);font-size:.9rem}
.testi .who b{color:var(--navy)}
.cta-final{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;border-radius:28px;padding:58px;text-align:center;position:relative;overflow:hidden}
.cta-final::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 80% 20%,rgba(11,182,196,.25),transparent 60%)}
.cta-final h2{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.03em;margin-bottom:14px;position:relative}
.cta-final p{color:rgba(255,255,255,.8);max-width:520px;margin:0 auto 28px;position:relative}
.cta-final .slide-actions{justify-content:center;position:relative}
.cta-final .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}

/* ---------- AUTH ---------- */
/* ============================================================
   ACCESO (/login) — dos columnas: panel de marca + formulario.
   El formulario NO va centrado en toda la pantalla: se queda en
   su mitad. En móvil el panel desaparece y solo queda el
   formulario, ocupando el ancho completo.
   ============================================================ */
.auth-split{display:grid;grid-template-columns:minmax(420px,.95fr) minmax(0,1.05fr);min-height:calc(100vh - 72px);background:#f4f7fc}
body.auth-layout>footer,body.auth-layout .fab-wrap,body.auth-layout .chat-widget,body.auth-layout .app-tabbar,body.auth-layout #geoBar{display:none!important}
.auth-brand{position:relative;overflow:hidden;display:flex;align-items:center;
  background:radial-gradient(circle at 18% 18%,rgba(41,194,255,.34),transparent 28%),
    linear-gradient(145deg,#061b3b 0%,#073d82 54%,#0b78c9 100%);color:#fff}
/* círculos suaves de fondo, como el ejemplo */
.auth-brand::before,.auth-brand::after{content:"";position:absolute;border-radius:50%;
  background:rgba(255,255,255,.09);pointer-events:none}
.auth-brand::before{width:520px;height:520px;top:-160px;inset-inline-start:-120px}
.auth-brand::after{width:300px;height:300px;bottom:-90px;inset-inline-end:-60px;background:rgba(255,255,255,.07)}
.auth-brand::after{border:1px solid rgba(255,255,255,.12);background:transparent}
.ab-inner{position:relative;z-index:1;padding:64px 9% 64px 12%;max-width:620px}
.ab-kicker{display:inline-flex;align-items:center;gap:9px;margin-bottom:24px;padding:7px 12px;border:1px solid rgba(255,255,255,.22);
  border-radius:999px;color:#d8f6ff;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.08)}
.ab-kicker i{width:7px;height:7px;border-radius:50%;background:#4ee0c2;box-shadow:0 0 0 5px rgba(78,224,194,.14)}
.auth-brand h2{font-family:var(--display);font-weight:800;font-size:clamp(2.35rem,4vw,3.55rem);line-height:1.08;
  letter-spacing:-.035em;color:#fff;margin-bottom:20px}
.auth-brand p{color:rgba(255,255,255,.88);font-size:1rem;line-height:1.7;margin-bottom:30px}
.ab-perks{list-style:none;display:flex;flex-direction:column;gap:15px;padding:0;margin:0}
.ab-perks li{display:flex;align-items:center;gap:14px;color:rgba(255,255,255,.95);font-size:.97rem}
.ab-perks li>span:last-child{display:flex;flex-direction:column;gap:2px}.ab-perks li b{font-size:.93rem}.ab-perks li small{color:#a9caea;font-size:.76rem}
.ab-ck{flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);font-size:.9rem;font-weight:800}
.ab-foot{display:flex;gap:0;margin-top:38px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.ab-foot span{padding:0 18px;color:#a9caea;font-size:.72rem;border-right:1px solid rgba(255,255,255,.14)}
.ab-foot span:first-child{padding-left:0}.ab-foot span:last-child{border:0}.ab-foot b{display:block;color:#fff;font-size:1.05rem;font-family:var(--display)}
.auth-logo{display:block;margin-bottom:22px}
.auth-logo .adia-logo-anim{height:38px}
.auth-alt{margin-top:18px;text-align:center;color:var(--muted);font-size:.86rem}
.auth-alt a{color:var(--acc-2);font-weight:700}
/* Chip de la empresa en /{empresa}/login */
.auth-emp{display:flex;align-items:center;gap:11px;margin-bottom:16px;padding:10px 13px;
  border-radius:12px;background:var(--navy-soft);border:1px solid var(--line-2)}
.ae-chip{width:36px;height:36px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-family:var(--display);font-weight:800;font-size:1.05rem}
.auth-emp b{display:block;color:var(--navy);font-size:.94rem;line-height:1.25}
.auth-emp small{color:var(--dim);font-size:.76rem;direction:ltr;unicode-bidi:isolate}
[data-theme="dark"] .auth-emp{background:#12203a}
[data-theme="dark"] .auth-emp b{color:#dbe6f7}
.auth-brand-emp .ab-logo{max-height:56px;max-width:220px;margin-bottom:18px;
  background:#fff;border-radius:12px;padding:8px 12px}
@media(max-width:980px){
  /* móvil y tablet: fuera el panel, el formulario manda */
  .auth-split{grid-template-columns:1fr;min-height:auto}
  .auth-brand{display:none}
}
.auth-wrap{min-height:calc(100vh - 72px);display:grid;place-items:center;padding:50px 24px;background:linear-gradient(135deg,#eef4ff,#e7fbfd)}
/* dentro del split el fondo degradado sobra: lo pone el panel de marca */
.auth-split .auth-wrap{position:relative;background:linear-gradient(145deg,#f4f7fc,#eef6ff);min-height:auto;padding:46px 24px;overflow:hidden}
.auth-split .auth-wrap::before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;right:-180px;top:-180px;background:rgba(36,134,232,.08)}
.auth-card{position:relative;background:rgba(255,255,255,.94);border:1px solid rgba(184,202,225,.75);border-radius:28px;padding:42px;width:100%;max-width:460px;
  box-shadow:0 24px 70px rgba(13,42,82,.14),0 2px 8px rgba(13,42,82,.05);backdrop-filter:blur(12px)}
/* el registro pide más campos: ahí la tarjeta puede ser más ancha */
.auth-card:has(form[data-guard="registro"]){max-width:560px}
[data-theme="dark"] .auth-split .auth-wrap{background:var(--bg)}
.auth-card-kicker{display:flex;align-items:center;gap:8px;color:#57708e;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
.auth-card-kicker span{width:8px;height:8px;border-radius:50%;background:#12b89d;box-shadow:0 0 0 5px rgba(18,184,157,.12)}
.auth-card h2{font-family:var(--display);font-weight:800;font-size:1.82rem;letter-spacing:-.025em;color:var(--navy);margin-bottom:7px}
.auth-card .sub{color:var(--muted);font-size:.9rem;margin-bottom:26px}
.auth-tabs{display:flex;gap:6px;background:var(--bg-2);padding:5px;border-radius:12px;margin-bottom:24px}
.auth-tabs a{flex:1;text-align:center;padding:10px;border-radius:8px;font-weight:700;font-size:.88rem;color:var(--muted);transition:.2s}
.auth-tabs a.active{background:var(--panel);color:var(--navy);box-shadow:var(--shadow-sm)}
.field{margin-bottom:15px}
.field label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:6px;font-weight:600}
.field input,.field select,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line-2);border-radius:11px;padding:12px 14px;color:var(--text);font-family:var(--body);font-size:.92rem;transition:.2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(11,182,196,.12);background:#fff}
.field textarea{resize:vertical;min-height:90px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.demo-hint{margin-top:18px;font-size:.78rem;color:var(--muted);background:var(--navy-soft);border-radius:11px;padding:12px 14px;line-height:1.6}
.demo-hint b{color:var(--navy)}
.demo-divider{display:flex;align-items:center;gap:12px;margin:20px 0 16px;color:var(--dim);font-size:.78rem}
.demo-divider::before,.demo-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.demo-btns{display:flex;flex-direction:column;gap:10px}
.demo-btn{width:100%;justify-content:center;text-decoration:none}

.auth-field>div{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:12px;background:#f8fafd;transition:.2s;overflow:hidden}
.auth-field>div:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px rgba(11,182,196,.12);background:#fff}
.auth-field>div>span{display:grid;place-items:center;width:43px;align-self:stretch;color:#68809d;font-weight:800;border-right:1px solid var(--line)}
.auth-field>div>input{border:0!important;box-shadow:none!important;background:transparent!important;border-radius:0;padding-left:12px}
.auth-submit{width:100%;justify-content:space-between;margin-top:5px;padding:13px 17px;border-radius:12px;box-shadow:0 10px 22px rgba(0,40,99,.2)}
.auth-submit span{font-size:1.1rem}.auth-trust{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:18px;padding-top:17px;border-top:1px solid var(--line)}
.auth-trust span{color:var(--dim);font-size:.68rem;white-space:nowrap}
@media(max-width:980px){
  .auth-split .auth-wrap{min-height:calc(100vh - 70px);padding:28px 18px}
  .auth-card{padding:32px 26px;border-radius:22px;max-width:500px}
}
@media(max-width:520px){
  .auth-card{padding:27px 20px}.auth-logo{margin-bottom:18px}.auth-card h2{font-size:1.55rem}
  .auth-card .sub{font-size:.84rem;margin-bottom:20px}.auth-tabs{margin-bottom:20px}.auth-trust{gap:7px 11px}
}

/* alerts */
.alert{padding:13px 16px;border-radius:12px;font-size:.9rem;font-weight:600;margin-bottom:18px}
.alert.ok{background:#e6f9f1;color:#0a7d52;border:1px solid #b6ebd4}
.alert.err{background:#fdecec;color:#c0392b;border:1px solid #f5c6c6}

/* ---------- DASHBOARD (panel & admin) ---------- */
.dash{padding:40px 0 70px;min-height:70vh}
.dash-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:30px}
.dash-top h1{font-family:var(--display);font-weight:800;font-size:1.7rem;color:var(--navy)}
.dash-top .who{color:var(--muted);font-size:.9rem}
/* Tarjetas de cifra. Eran de escaparate —20 px de aire, número a 1,9 rem— y
   ocupaban media pantalla antes de que se viera nada del negocio. Un KPI se
   mira de un vistazo: cabe en un tercio de eso. */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 13px;box-shadow:var(--shadow-sm)}
.kpi .lbl{color:var(--muted);font-size:.63rem;text-transform:uppercase;letter-spacing:.05em;line-height:1.3}
.kpi .num{font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--navy);margin-top:2px;line-height:1.15}
.kpi small{font-size:.66rem;line-height:1.3}
.kpi .num+small{display:block;margin-top:1px}
.kpi.acc .num{color:var(--acc)}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:24px;flex-wrap:wrap}
.tabs a{padding:11px 18px;font-weight:700;font-size:.9rem;color:var(--muted);border-bottom:2px solid transparent;transition:.2s}
.tabs a.active{color:var(--navy);border-color:var(--navy)}
.panel-box{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--shadow-sm);margin-bottom:22px}
.panel-box h3{font-family:var(--display);font-weight:700;color:var(--navy);font-size:1.15rem;margin-bottom:16px}
/* Listas compactas. 13 px de alto por celda hacían que ocho registros no
   cupieran en una pantalla de portátil: en una lista lo que se busca es ver
   muchas filas a la vez, no que cada una respire. */
table{width:100%;border-collapse:collapse;font-size:.84rem}
th{text-align:left;padding:7px 10px;color:var(--muted);font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--line)}
td{padding:8px 10px;border-bottom:1px solid var(--line);color:var(--text)}
tr:last-child td{border-bottom:none}
.badge{display:inline-block;padding:4px 11px;border-radius:20px;font-size:.74rem;font-weight:700;font-family:var(--mono)}
.badge.pendiente{background:#fff4e0;color:#c77a14}
.badge.cotizado{background:#e3f0ff;color:#1e6fd9}
.badge.aprobado{background:#e6f9f1;color:#0a7d52}
.badge.rechazado{background:#fdecec;color:#c0392b}
/* Insignia MORADA de EMPRESA DE EJEMPLO (demo). El morado no se usa en
   ningún otro estado de la plataforma —verde aprobado, ámbar pendiente,
   rojo rechazado, azul cotizado—, así que una fila morada se reconoce de
   un vistazo entre cientos y nadie confunde el ejemplo con un cliente. */
/* ── EL ID DEL REGISTRO, EN TODAS LAS TABLAS DEL PANEL ───────────────────
   El número con el que se habla de una fila en la base de datos, en los
   enlaces y en cualquier consulta de soporte. Estaba solo en Empresas,
   Usuarios, Clientes, Contactos y Pedidos; el resto obligaba a abrir el
   registro para saber cuál era. Se pulsa y se copia (manejador
   [data-copy] de assets/app.js). Cifras tabulares para que una columna
   de ids se lea alineada. */
/* ==========================================================================
   PROPORCIONES DEL PANEL · 2026-08-23
   --------------------------------------------------------------------------
   Los botones y los títulos del panel heredaban el tamaño del SITIO PÚBLICO,
   donde un botón de 52 px de alto (padding 13/25, letra .95rem) es una llamada
   a la acción de portada y está bien. Dentro de una pantalla de datos —donde
   conviven «Añadir», «Entrar», «Editar», «Suspender» en la misma fila— ese
   tamaño se come el sitio y obliga a bajar más de una pantalla para ver la
   primera fila de la tabla (medido: la tabla empezaba en el píxel 1.372).

   🔴 Se acota a `.adm-shell`, que envuelve el panel central y el ERP, y NO al
   sitio público: la portada sigue con sus botones grandes, que es donde
   tienen sentido. Un `.btn` compacto aquí no cambia nada allí.
   ========================================================================== */
.adm-shell .btn{padding:8px 15px;border-radius:9px;font-size:.83rem;gap:6px}
.adm-shell .btn-sm{padding:5px 11px;font-size:.76rem;border-radius:8px;gap:5px}
/* La sombra flotante y el salto al pasar por encima son de una portada, no de
   una fila de tabla: aquí solo estorban y desalinean la fila. */
.adm-shell .btn-primary{box-shadow:0 3px 10px rgba(0,40,99,.16)}
.adm-shell .btn-primary:hover{transform:none;box-shadow:0 5px 14px rgba(0,40,99,.24)}
.adm-shell .btn .ui-line-icon{width:15px;height:15px}

/* Títulos: la jerarquía se mantiene, solo baja la escala. */
.adm-shell .adm-body h2{font-size:1.24rem;line-height:1.2}
.adm-shell .adm-body h3{font-size:.98rem}
.adm-shell .panel-box>h3{font-size:.95rem}
.adm-shell .module-list-hero h2{font-size:1.18rem}
.adm-shell .module-list-hero p{font-size:.78rem}
.adm-shell .adm-page-head h2{font-size:1.24rem}
/* ── BUSCADOR Y FILTROS DEL PANEL (empresas, usuarios…) ──────────────────
   Vivía dentro de includes/admin/empresas.php y por eso la pantalla de
   Usuarios no podía reutilizarlo: el mismo buscador se veía sin estilo.
   Aquí lo comparten las dos, y cualquier listado futuro. */
.emp-filtros{margin-bottom:16px;padding:12px 14px}
/* ── El buscador manda ──────────────────────────────────────────────────────
   Es lo que se usa el 90 % de las veces, así que ocupa la primera línea entera
   y es el único campo grande de la pantalla. Los ejes de casillas quedan
   detrás de un <details>: estaban costando 369 px fijos y empujaban la tabla
   fuera de la primera pantalla. */
.emp-buscador{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.emp-buscador-campo{position:relative;flex:1 1 340px;min-width:0;display:flex;align-items:center}
.emp-buscador-ico{position:absolute;left:12px;font-size:.9rem;opacity:.55;pointer-events:none}
.emp-buscador .emp-fq{width:100%;padding:11px 14px 11px 36px;font-size:.92rem;font-weight:600;
  border:2px solid var(--line-2);border-radius:11px;background:var(--bg);color:var(--text);
  transition:border-color .15s,box-shadow .15s}
.emp-buscador .emp-fq:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px rgba(11,182,196,.14);background:#fff}
.emp-buscador .emp-fq::placeholder{font-weight:500}
.emp-buscador .btn-primary{padding:11px 22px;font-size:.88rem}
/* La casilla de «sin demos», con la misma piel morada que la insignia. */
.emp-chk-demo{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:10px;
  border:1px solid #ddccff;background:#faf7ff;color:#6b3fbf;font-size:.79rem;font-weight:700;
  cursor:pointer;white-space:nowrap}
.emp-chk-demo:hover{background:#f3ecff}
.emp-chk-demo input{accent-color:#6b3fbf;width:auto}
/* ── El desplegable de filtros ── */
.emp-fmas{margin-top:11px;border-top:1px solid var(--line);padding-top:9px}
.emp-fmas>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
  font-size:.8rem;font-weight:800;color:var(--navy);padding:4px 2px;user-select:none}
.emp-fmas>summary::-webkit-details-marker{display:none}
.emp-fmas>summary::before{content:"▸";font-size:.85rem;transition:transform .15s;display:inline-block}
.emp-fmas[open]>summary::before{transform:rotate(90deg)}
.emp-fmas>summary:hover{color:var(--acc)}
.emp-fmas-n{background:var(--navy);color:#fff;border-radius:999px;padding:1px 8px;font-size:.68rem}
.emp-fmas-ayuda{margin:6px 0 10px;color:var(--dim);font-size:.75rem;line-height:1.45}
.emp-fq{min-width:180px;padding:7px 11px;border:1px solid var(--line,#e6ebf4);border-radius:10px;font:inherit;font-size:.86rem}
.emp-fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.emp-fcol{border:1px solid var(--line,#e6ebf4);border-radius:12px;padding:8px 10px 10px;margin:0;min-width:0;background:#fafcff}
.emp-fcol-ancha{grid-column:span 2}
.emp-fcol legend{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:0 4px}
.emp-fcol legend b{color:var(--dim);font-weight:700}
/* La de rubro tiene 28 valores: la columna hace scroll en vez de estirar la página. */
.emp-flista{display:flex;flex-direction:column;gap:2px;max-height:196px;overflow:auto}
.emp-fchk{display:flex;align-items:center;gap:7px;padding:3px 6px;border-radius:8px;font-size:.82rem;cursor:pointer;min-width:0}
.emp-fchk:hover{background:#eef3fb}
.emp-fchk.on{background:#e7f6f8;font-weight:700}
.emp-fchk input{margin:0;flex:0 0 auto}
.emp-fchk span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emp-fchk b{color:var(--dim);font-variant-numeric:tabular-nums;font-size:.76rem;font-weight:700}
/* Opción de un solo valor (radio) dentro de una columna de filtros. */
.emp-fop{display:flex;align-items:center;gap:7px;padding:3px 6px;border-radius:8px;font-size:.82rem;cursor:pointer}
.emp-fop:hover{background:#eef3fb}
.emp-fop input{margin:0;flex:0 0 auto;width:auto}
/* ── Documento del cliente: número + botón de extracción + contador ──
   El contador es la respuesta a «¿cuántos dígitos van?» sin tener que
   contarlos con el dedo en la pantalla. Verde al llegar al largo exacto,
   rojo si se pasa. */
.cf-doc-row{display:flex;gap:6px;align-items:stretch}
.cf-doc-row>input{flex:1 1 auto;min-width:0}
.cf-doc-btn{flex:0 0 auto;white-space:nowrap}
.cf-doc-cuenta{display:block;margin-top:3px;font-variant-numeric:tabular-nums;color:var(--dim);font-weight:700}
.cf-doc-cuenta.ok{color:#0a7d52}
.cf-doc-cuenta.mal{color:#c0392b}
/* En Usuarios el formulario no lleva caja propia: la pone el panel-box. */
.emp-filtros .emp-fmas{margin-top:9px}

.adm-rec-id{width:1%;white-space:nowrap}
.adm-rec-id code{font-size:.78rem;color:var(--dim);background:#eef3fb;border-radius:6px;
  padding:2px 6px;font-variant-numeric:tabular-nums;cursor:pointer}
.adm-rec-id code:hover{background:#e0e9f7;color:var(--navy)}
[data-theme="dark"] .adm-rec-id code{background:rgba(255,255,255,.07)}
.badge.demo{background:#f2ebff;color:#6b3fbf;border:1px solid #ddccff}
.badge.demo-repetido{background:#fdecec;color:#c0392b;border:1px solid #f3b8b0}

.mini-form{display:flex;gap:8px;align-items:center}
.mini-form select{padding:7px 10px;border:1px solid var(--line-2);border-radius:8px;font-family:var(--body);font-size:.82rem}
.mini-form button{padding:7px 14px;border:none;border-radius:8px;background:var(--navy);color:#fff;font-weight:700;font-size:.8rem;cursor:pointer}
.empty{text-align:center;padding:40px;color:var(--dim)}

/* ---------- FOOTER ---------- */
/* ============================================================
   FOOTER — degradado suave + textura sutil
   ============================================================ */
footer{position:relative;margin-top:80px;padding:130px 0 28px;overflow:hidden;
  background:
    radial-gradient(ellipse 70% 60% at 25% 85%, rgba(11,182,196,.04) 0%, transparent 70%),
    radial-gradient(ellipse 70% 60% at 75% 25%, rgba(47,127,240,.03) 0%, transparent 70%),
    linear-gradient(180deg,
      var(--bg) 0%,
      var(--panel) 25%,
      var(--panel) 70%,
      var(--bg) 100%)
}

/* Horizonte suave (apenas perceptible, sin línea marcada) */
.foot-horizon{
  position:absolute;
  left:0;right:0;top:0;
  height:140px;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(ellipse 90% 110% at 50% 100%, rgba(11,182,196,.08) 0%, transparent 75%),
    linear-gradient(180deg, transparent 0%, transparent 80%, rgba(11,182,196,.08) 100%);
}

/* Textura de puntos muy sutil */
footer::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle, rgba(11,40,99,.06) 1.1px, transparent 1.1px),
    radial-gradient(circle, rgba(11,182,196,.04) 1px, transparent 1px);
  background-size: 28px 28px, 40px 40px;
  background-position: 0 0, 14px 14px;
  pointer-events:none;
  z-index:1;
  opacity:1;
}
/* MODO OSCURO */
[data-theme="dark"] footer{
  background:
    radial-gradient(ellipse 70% 60% at 25% 85%, rgba(11,182,196,.08) 0%, transparent 70%),
    radial-gradient(ellipse 70% 60% at 75% 25%, rgba(47,127,240,.06) 0%, transparent 70%),
    linear-gradient(180deg,
      #03102a 0%,
      #061634 30%,
      #061634 70%,
      #03102a 100%)
}
[data-theme="dark"] .foot-horizon{
  background:
    radial-gradient(ellipse 90% 110% at 50% 100%, rgba(127,214,230,.10) 0%, transparent 75%),
    linear-gradient(180deg, transparent 0%, transparent 80%, rgba(127,214,230,.12) 100%);
}
[data-theme="dark"] footer::before{
  background-image:
    radial-gradient(circle, rgba(127,214,230,.08) 1.1px, transparent 1.1px),
    radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
  opacity:.6;
}
footer .wrap{position:relative;z-index:2}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:38px;margin-bottom:44px}
.foot-brand .logo{margin-bottom:16px}
.foot-brand p{color:var(--muted);font-size:.9rem;max-width:290px;margin-bottom:16px}
.foot-contact{display:flex;flex-direction:column;gap:6px;font-size:.84rem;color:var(--muted);margin-bottom:18px}
.foot-social{display:flex;gap:9px}
.foot-social a{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--bg);display:grid;place-items:center;font-size:1rem;color:var(--navy);transition:.25s}
.foot-social a:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.foot-col h4{font-family:var(--display);font-weight:700;font-size:.93rem;color:var(--navy);margin-bottom:16px}
.foot-col a{display:block;color:var(--muted);font-size:.87rem;padding:5px 0;transition:.2s}
/* El turquesa de marca sobre el pie casi blanco da 2.24:1: el enlace se
   volvía MENOS legible justo al apuntarlo (en reposo cumplía con 4.91:1).
   --eyebrow es el mismo turquesa un escalón más oscuro y está definido para
   los dos temas: 5.34:1 en claro y 10.07:1 en oscuro. */
.foot-col a:hover{color:var(--eyebrow);padding-left:4px}
.foot-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--dim);font-size:.82rem}
.foot-bottom .made{font-family:var(--mono)}
/* Aquí fallaban los dos estados: --dim daba 2.41:1 en reposo y el turquesa
   2.24:1 en hover. Son los enlaces legales, que es donde menos gracia tiene
   no poder leer. 4.90:1 y 5.34:1. */
.foot-bottom-links a{color:var(--muted);text-decoration:none}
.foot-bottom-links a:hover{color:var(--eyebrow);text-decoration:underline}

/* whatsapp float */
.wa-float{position:fixed;bottom:24px;right:24px;z-index:200;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#25d366,#1eaf57);display:grid;place-items:center;box-shadow:0 10px 28px rgba(37,211,102,.4);cursor:pointer;transition:.3s;animation:wabob 3s ease-in-out infinite}

/* theme toggle float (esquina) */
.theme-toggle{position:fixed;bottom:96px;right:24px;z-index:200;width:48px;height:48px;border-radius:50%;background:var(--panel);border:1px solid var(--line-2);display:grid;place-items:center;cursor:pointer;font-size:1.2rem;box-shadow:var(--shadow-sm);transition:.3s}
.theme-toggle:hover{transform:scale(1.1);border-color:var(--acc)}

/* selector de idioma (footer) */
.lang-pick{display:flex;align-items:center;gap:8px;margin-top:14px}
.lang-pick .lang-lbl{font-size:.78rem;color:var(--dim);font-family:var(--mono)}
.lang-opt{padding:5px 11px;border-radius:8px;border:1px solid var(--line);background:var(--bg);font-size:.8rem;font-weight:700;cursor:pointer;transition:.2s;color:var(--muted)}
.lang-opt.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.lang-opt.disabled{opacity:.4;cursor:not-allowed;position:relative}

/* Selector de país en footer (mismo modal que el del header) */
.foot-country-pick{display:flex;align-items:center;gap:10px;margin-top:18px}
.foot-pick-lbl{font-size:.78rem;color:var(--dim);font-family:var(--mono)}
.foot-country-btn{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:9px;
  border:1px solid var(--line);background:var(--bg);color:var(--text);font-family:var(--body);
  font-size:.85rem;font-weight:600;cursor:pointer;transition:.2s}
.foot-country-btn:hover{border-color:var(--acc);background:var(--bg-2);transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(11,182,196,.12)}
.foot-country-btn .flag{display:inline-flex;align-items:center;width:20px;height:14px;line-height:1;font-size:1rem}
.foot-country-btn .flag svg{width:100%;height:100%;border-radius:2px;overflow:hidden}
.foot-country-btn .chev{font-size:.6rem;color:var(--dim);margin-left:2px}
[data-theme="dark"] .foot-country-btn{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10);color:#cfd9ea}
[data-theme="dark"] .foot-country-btn:hover{background:rgba(11,182,196,.10);border-color:var(--acc)}
.lang-opt.disabled:hover::after{content:"Próximamente";position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);font-size:.68rem;padding:3px 8px;border-radius:6px;white-space:nowrap;font-weight:600}
@keyframes wabob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:31px;height:31px;fill:#fff}
.wa-float::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(37,211,102,.5);animation:waring 2s ease-out infinite}
@keyframes waring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.4);opacity:0}}

/* page hero (interior pages) */
.page-hero{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;padding:64px 0;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 85% 20%,rgba(11,182,196,.3),transparent 60%)}
.page-hero .crumb{font-family:var(--mono);font-size:.76rem;color:rgba(255,255,255,.6);margin-bottom:12px;position:relative}
.page-hero h1{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,3.6vw,2.8rem);letter-spacing:-.02em;position:relative}
.page-hero p{color:rgba(255,255,255,.82);max-width:560px;margin-top:12px;position:relative}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:.7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* responsive */
@media(max-width:980px){
  .nav-links{display:none}
  .burger{display:flex}
  .hero-inner{grid-template-columns:1fr;padding:60px 24px 70px}
  .hero-visual{display:none}
  .stats,.kpis{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr}
  .tax-banner{grid-template-columns:1fr;gap:28px}
  .plans{grid-template-columns:1fr;max-width:430px;margin:0 auto}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px}
  .mobile-menu.show{display:flex}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  .grid-4{grid-template-columns:1fr 1fr}
  .field-row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hslide h1{font-size:1.8rem}
  .sec{padding:60px 0}
  .country-pick .label-txt{display:none}
  table{font-size:.82rem}
  th,td{padding:9px 7px}
}
.mobile-menu{display:none;position:fixed;inset:72px 0 0;z-index:99;background:var(--bg);flex-direction:column;padding:22px;gap:8px}
.mobile-menu a{padding:14px 16px;border-radius:12px;font-family:var(--display);font-weight:600;font-size:1.02rem;background:var(--panel);border:1px solid var(--line);color:var(--navy)}
/* Solo los enlaces de primer nivel llevan icono al lado del texto. Los de
   dentro de «Rubros» ya son una rejilla con su propio maquetado. */
.mobile-menu>a{display:flex;align-items:center;gap:11px}

/* ============================================================
   Refinamiento visual
   ============================================================ */

/* ---------- 1. Carga con revelado escalonado del hero ---------- */
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero-text .slide-tag{animation:heroIn .7s cubic-bezier(.2,.7,.3,1) both}
.hero-text .hero-slides{animation:heroIn .7s cubic-bezier(.2,.7,.3,1) .1s both}
.hero-text .slide-actions{animation:heroIn .7s cubic-bezier(.2,.7,.3,1) .22s both}
.hero-text .hero-nav{animation:heroIn .7s cubic-bezier(.2,.7,.3,1) .32s both}
.hero-visual .ai-card{animation:heroIn .9s cubic-bezier(.2,.7,.3,1) .35s both}
@media(prefers-reduced-motion:reduce){.hero-text *,.hero-visual *{animation:none!important}}

/* ---------- 2. Hero con malla de degradado + grano sutil ---------- */
.hero{background:
  radial-gradient(900px 600px at 78% -5%,rgba(47,127,240,.18),transparent 55%),
  radial-gradient(800px 600px at 8% 105%,rgba(11,182,196,.16),transparent 55%),
  radial-gradient(600px 500px at 50% 50%,rgba(0,40,99,.04),transparent 70%),
  linear-gradient(135deg,#eef4ff 0%,#e9f2ff 45%,#e4fbfd 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E")}
[data-theme="dark"] .hero{background:
  radial-gradient(900px 600px at 78% -5%,rgba(47,127,240,.16),transparent 55%),
  radial-gradient(800px 600px at 8% 105%,rgba(11,182,196,.13),transparent 55%),
  linear-gradient(135deg,#0a1320,#0c1828 50%,#0a1f24)}

/* ---------- 3. Tag del hero con punto pulsante mejorado ---------- */
.slide-tag{backdrop-filter:blur(8px);box-shadow:0 4px 18px rgba(0,40,99,.06)}
.slide-tag .dot{animation:tagPulse 2s ease-in-out infinite}
@keyframes tagPulse{0%,100%{box-shadow:0 0 0 0 rgba(11,182,196,.5)}50%{box-shadow:0 0 0 6px rgba(11,182,196,0)}}

/* ---------- 4. Tarjeta IA flotante con leve balanceo ---------- */
.ai-card{animation:heroIn .9s cubic-bezier(.2,.7,.3,1) .35s both, floatY 6s ease-in-out 1.4s infinite;
  box-shadow:0 30px 70px rgba(0,40,99,.16),0 2px 0 rgba(255,255,255,.6) inset}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.ai-card::before{content:"";position:absolute;inset:0;border-radius:22px;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(11,182,196,.5),transparent 40%,transparent 60%,rgba(47,127,240,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.hero-visual{perspective:1200px}

/* ---------- 5. Botones con barrido de brillo ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);transition:left .6s ease}
.btn:hover::after{left:160%}
.btn-primary:hover,.btn-acc:hover{transform:translateY(-3px) scale(1.015)}

/* ---------- 6. Tarjetas con profundidad y elevación 3D suave ---------- */
.card{transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s}
.card .ico{transition:transform .4s cubic-bezier(.2,.7,.3,1),background .35s}
.card:hover{transform:translateY(-7px)}
.card:hover .ico{transform:scale(1.12) rotate(-4deg);background:linear-gradient(135deg,var(--navy),var(--acc));color:#fff}
.card:hover .lnk{gap:9px}
.card .lnk{transition:gap .3s}

/* ---------- 7. Stats con número que "respira" al revelar ---------- */
.stat{transition:transform .35s,box-shadow .35s}
.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.stat .n{background:linear-gradient(120deg,var(--navy),var(--acc-2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 8. Encabezados de sección con línea decorativa ---------- */
.sec-head .eyebrow{display:inline-flex;align-items:center;gap:9px}
.sec-head .eyebrow::before,.sec-head .eyebrow::after{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--acc))}
.sec-head .eyebrow::after{background:linear-gradient(90deg,var(--acc),transparent)}

/* ---------- 9. Planes: realce del destacado + brillo superior ---------- */
.plan{transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
.plan.featured{transform:translateY(-8px) scale(1.02)}
.plan.featured:hover{transform:translateY(-12px) scale(1.025)}
.plan::after{content:"";position:absolute;top:0;left:10%;right:10%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--acc),transparent);opacity:0;transition:opacity .4s}
.plan:hover::after{opacity:1}

/* ---------- 10. Chips de rubro con realce ---------- */
.rubro-chip{position:relative;overflow:hidden}
.rubro-chip:hover{box-shadow:0 8px 22px rgba(0,40,99,.12)}

/* ---------- 11. Banner tributario con borde de gradiente ---------- */
.tax-banner{position:relative}
.tax-card{box-shadow:0 24px 60px rgba(0,40,99,.28),0 1px 0 rgba(255,255,255,.12) inset}
.tax-flag{transition:transform .25s,border-color .25s,box-shadow .25s}
.tax-flag:hover{box-shadow:0 8px 20px rgba(0,40,99,.1)}

/* ---------- 12. CTA final con brillo orbital ---------- */
.cta-final{position:relative;overflow:hidden}
.cta-final::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  top:-180px;right:-120px;background:radial-gradient(circle,rgba(11,182,196,.35),transparent 65%);
  animation:orbit 14s linear infinite}
@keyframes orbit{from{transform:rotate(0) translateX(40px) rotate(0)}to{transform:rotate(360deg) translateX(40px) rotate(-360deg)}}

/* ---------- 13. Page-hero (rubros) con patrón de cuadrícula ---------- */
.page-hero{position:relative}
.page-hero::after{content:"";position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:42px 42px;-webkit-mask:radial-gradient(circle at 70% 30%,#000,transparent 75%)}

/* ---------- 14. Header: sombra al hacer scroll (vía clase) ---------- */
header{transition:box-shadow .3s,background .3s}
header.scrolled{box-shadow:0 6px 30px rgba(0,40,99,.1)}

/* ---------- 15. Links del footer con subrayado animado ---------- */
.foot-col a{position:relative;width:fit-content}
.foot-col a::after{content:"";position:absolute;left:0;bottom:2px;width:0;height:1px;background:var(--acc);transition:width .3s}
.foot-col a:hover::after{width:100%}

/* ---------- 16. Scrollbar y selección con la marca ---------- */
::selection{background:var(--acc);color:#fff}
html{scrollbar-color:var(--acc) var(--bg-2)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--navy),var(--acc));border-radius:8px;border:2px solid var(--bg-2)}

/* ---------- 17. Botones flotantes con entrada ---------- */
.wa-float,.theme-toggle{animation:heroIn .6s ease 1s both}

/* ---------- 18. Foco accesible coherente con la marca ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}

/* ============================================================
   Estilos editoriales
   ============================================================ */

/* ---------- TIPOGRAFÍA: más jerarquía y carácter ---------- */
.hslide h1{font-weight:700;font-size:clamp(2.3rem,4.8vw,3.9rem);line-height:1.0;letter-spacing:-.04em}
.hslide h1 em{font-style:normal;font-weight:800}
.sec-head h2{font-weight:700;font-size:clamp(2rem,3.8vw,3rem);letter-spacing:-.035em;line-height:1.04}
.page-hero h1{font-weight:700;letter-spacing:-.035em}
.plan .p-name,.card h3,.stat .n,.kpi .num{letter-spacing:-.02em}
body{font-size:1.02rem}
.hslide p,.sec-head p{font-size:1.1rem;line-height:1.6}

/* ---------- ESPACIADOS: más aire ---------- */
.sec{padding:104px 0}
.sec-head{margin-bottom:64px}
.hero-inner{padding:104px 24px 116px;gap:56px}
@media(max-width:980px){.sec{padding:72px 0}.hero-inner{padding:64px 24px 76px;gap:40px}}

/* ---------- HERO: título con realce y degradado dinámico ---------- */
.hslide h1 em{background:linear-gradient(110deg,var(--acc) 0%,var(--acc-2) 55%,#9ec5ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% auto;
  animation:gradShift 6s ease infinite;padding-right:.08em;font-style:normal;display:inline-block}
@keyframes gradShift{0%,100%{background-position:0% center}50%{background-position:100% center}}
.hero-inner::before{content:"";position:absolute;left:-2%;top:18%;width:3px;height:120px;z-index:1;
  background:linear-gradient(var(--acc),transparent);border-radius:3px;opacity:.6}

/* ---------- BOTONES: más presencia ---------- */
.btn{padding:15px 30px;border-radius:14px;font-size:.98rem;letter-spacing:-.01em}
.btn-primary{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 70%,var(--acc) 160%)}

/* ---------- TARJETAS DE RUBRO: índice + tratamiento editorial ---------- */
#rubros .grid-4{gap:22px}
#rubros .card{padding:30px 26px 28px}
#rubros .card .ico{width:56px;height:56px;border-radius:16px;font-size:1.7rem;margin-bottom:18px}
#rubros .card h3{font-size:1.18rem}
#rubros .card::after{content:"";position:absolute;right:22px;top:22px;width:7px;height:7px;border-radius:50%;
  background:var(--line-2);transition:.35s}
#rubros .card:hover::after{background:var(--acc);box-shadow:0 0 0 5px rgba(11,182,196,.15)}

/* ---------- FEATURES: cuadrícula con tratamiento de profundidad ---------- */
.grid-3 .card{padding:32px 28px}
.grid-3 .card .ico{width:54px;height:54px;border-radius:15px;font-size:1.6rem}

/* ---------- SECCIONES ALTERNADAS: ritmo visual ---------- */
.sec:nth-of-type(even){position:relative}
.sec.sec-tinted{background:linear-gradient(180deg,transparent,rgba(0,40,99,.022) 12%,rgba(0,40,99,.022) 88%,transparent)}

/* ---------- STAT: tarjetas con línea de acento ---------- */
.stat{padding:28px 24px;border-radius:20px;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--acc),var(--acc-2));
  transform:scaleY(0);transform-origin:top;transition:transform .4s}
.stat:hover::before{transform:scaleY(1)}
.stat .n{font-size:2.3rem;font-weight:700}

/* ---------- PLANES: refinamiento editorial ---------- */
.plan{padding:38px 32px;border-radius:24px}
.plan .p-name{font-size:1.45rem;font-weight:700}
.plan .p-price .now{font-size:2.5rem;font-weight:700}
.plan.featured{box-shadow:0 30px 80px rgba(0,40,99,.2)}

/* ---------- SEC-HEAD eyebrow: tipografía mono refinada ---------- */
.eyebrow{letter-spacing:.22em;font-size:.72rem}

/* ---------- TESTIMONIAL: comillas decorativas grandes ---------- */
.testi{padding:60px 56px;border-radius:28px;position:relative}
.testi::before{content:"\201C";position:absolute;top:6px;left:34px;font-family:var(--display);
  font-size:7rem;line-height:1;color:var(--acc);opacity:.16;font-weight:800}
.testi .quote{font-size:1.5rem;line-height:1.45;font-weight:600;letter-spacing:-.01em}

/* ---------- HEADER: logo y nav más refinados ---------- */
.nav{height:78px}
.logo{font-size:1.36rem;letter-spacing:-.03em}
.nav-links a{font-size:.93rem;letter-spacing:-.01em}

/* ---------- AI CARD: encabezado más limpio ---------- */
.ai-card{border-radius:24px;padding:26px}
.ai-bars i{border-radius:7px 7px 2px 2px}

/* ---------- MICROINTERACCIONES PREMIUM ---------- */
/* nav links con subrayado que crece desde el centro */
.nav-links a:not(.nav-cta){position:relative}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:50%;right:50%;bottom:5px;height:2px;
  background:var(--acc);border-radius:2px;transition:left .28s,right .28s}
.nav-links a:not(.nav-cta):hover::after{left:14px;right:14px}
.nav-links a:not(.nav-cta):hover{background:transparent}

/* country button con leve realce */
.country-btn:hover{box-shadow:0 6px 18px rgba(0,40,99,.1);transform:translateY(-1px)}

/* tax flags activos con check */
.tax-flag.active::after{content:"✓";margin-left:4px;color:var(--acc);font-weight:800}

/* revelado: leve escala además de subida */
.reveal{transform:translateY(28px) scale(.985)}
.reveal.in{transform:none}

/* enlaces de tarjeta rubro: flecha que avanza */
#rubros .card .lnk{transition:transform .3s,gap .3s}
#rubros .card:hover .lnk{transform:translateX(3px)}

/* ---------- DETALLE: divisores con degradado ---------- */
.sec + .sec{position:relative}

/* ---------- RESPONSIVE: títulos hero en móvil ---------- */
@media(max-width:560px){
  .hslide h1{font-size:2.1rem;line-height:1.05}
  .testi{padding:40px 28px}
  .testi .quote{font-size:1.2rem}
  .sec{padding:60px 0}
}

/* ============================================================
   MODAL DE SELECCIÓN DE PAÍS
   ============================================================ */
.country-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:rgba(4,12,28,.55);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:.3s;padding:24px}
.country-modal.show{opacity:1;visibility:visible}
.cm-box{background:var(--panel);border:1px solid var(--line-2);border-radius:24px;width:100%;max-width:720px;
  max-height:85vh;overflow:hidden;box-shadow:0 40px 100px rgba(0,40,99,.4);display:flex;flex-direction:column;
  transform:translateY(18px) scale(.97);transition:.35s cubic-bezier(.2,.7,.3,1)}
.country-modal.show .cm-box{transform:none}
.cm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:26px 28px 18px;border-bottom:1px solid var(--line)}
.cm-head h3{font-family:var(--display);font-weight:700;font-size:1.4rem;color:var(--navy);letter-spacing:-.02em}
.cm-head p{color:var(--muted);font-size:.88rem;margin-top:4px}
.cm-close{width:38px;height:38px;flex:none;border:1px solid var(--line-2);background:var(--bg);border-radius:10px;
  cursor:pointer;font-size:1rem;color:var(--muted);transition:.2s}
.cm-close:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.cm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:20px 24px 26px;overflow-y:auto}
.country-opt{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:13px;cursor:pointer;
  border:1px solid transparent;transition:.18s;position:relative}
.country-opt:hover{background:var(--navy-soft);border-color:var(--line-2)}
.country-opt.active{background:var(--navy-soft);border-color:var(--acc)}
.country-opt .flag{font-size:1.7rem;flex:none;line-height:1}
.country-opt .co-info{flex:1;min-width:0}
.country-opt .co-name{font-weight:700;font-size:.95rem;color:var(--navy)}
.country-opt .co-tax{font-size:.74rem;color:var(--dim);font-family:var(--mono);margin-top:1px}
.country-opt .co-check{color:var(--acc);font-weight:800;font-size:1.05rem;flex:none}
@media(max-width:560px){.cm-grid{grid-template-columns:1fr}.cm-box{max-height:90vh}}

/* ============================================================
   TABLA DE COMPARACIÓN DE PLANES (precios)
   ============================================================ */
.compare-wrap{margin-top:80px;overflow-x:auto}
.compare-head{text-align:center;margin-bottom:36px}
.compare-head h2{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3.2vw,2.4rem);color:var(--navy);letter-spacing:-.03em}
.compare-head p{color:var(--muted);margin-top:10px}
.compare{width:100%;border-collapse:separate;border-spacing:0;min-width:620px;background:var(--panel);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm)}
.compare th,.compare td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
.compare thead th{background:var(--navy);color:#fff;font-family:var(--display);font-weight:700;font-size:.95rem;
  letter-spacing:-.01em;position:sticky;top:0}
.compare thead th.plan-col{text-align:center;width:120px}
.compare thead th.feat-elem{background:var(--navy-2)}
/* Columna del plan gratuito: más apagada que las de pago, porque es la puerta
   de entrada y no una opción comercial más. Sigue siendo legible —el texto es
   blanco sobre el mismo azul oscuro—, solo baja de peso. */
.compare thead th.feat-free{background:var(--navy-2);opacity:.92}
.compare thead th.feat-free .cmp-price{font-weight:700;opacity:.95}
.compare-free-note{margin:18px auto 0;max-width:760px;text-align:center;font-size:.83rem;line-height:1.65;
  color:var(--muted);padding:12px 16px;border:1px dashed var(--line-2);border-radius:12px;background:var(--bg-2)}
.compare-free-note b{color:var(--navy)}
.compare-free-note a{color:var(--acc-2,#0bb6c4);font-weight:700;white-space:nowrap}
[data-theme="dark"] .compare-free-note b{color:#dbe6f7}
.compare tbody tr:nth-child(even){background:rgba(0,40,99,.025)}
.compare tbody tr:hover{background:var(--navy-soft)}
.compare td.feat{color:var(--text);font-size:.9rem;font-weight:500}
.compare td.feat b{color:var(--navy)}
.compare td.mark{text-align:center;font-size:1.1rem;font-weight:800;width:120px}
.compare .yes{color:#0a9d5e}
.compare .no{color:#d14848}
.compare tbody tr:last-child td{border-bottom:none}
.compare-plan-name{font-family:var(--display)}
.compare-plan-name small{display:block;font-family:var(--body);font-weight:500;font-size:.72rem;opacity:.8;margin-top:2px}
@media(max-width:560px){.compare th,.compare td{padding:11px 12px;font-size:.82rem}}

/* ============================================================
   FAB UNIFICADO + CHATBOT
   ============================================================ */
.fab-wrap{position:fixed;bottom:24px;right:24px;z-index:250;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.fab-main{width:62px;height:62px;border-radius:50%;border:none;cursor:pointer;position:relative;
  background:linear-gradient(135deg,var(--navy),var(--acc-2));box-shadow:0 12px 32px rgba(0,40,99,.35);
  transition:transform .3s;display:grid;place-items:center}
.fab-main:hover{transform:translateY(-1px)}
.fab-main span:not(.fab-badge){position:absolute;font-size:1.5rem;transition:opacity .25s,transform .25s}
.fab-ico-close{opacity:0;transform:rotate(-90deg) scale(.5)}
.fab-wrap.open .fab-ico-open{opacity:0;transform:rotate(90deg) scale(.5)}
.fab-wrap.open .fab-ico-close{opacity:1;transform:none;color:#fff}
.fab-options{display:flex;flex-direction:column;gap:10px;align-items:flex-end;
  opacity:0;visibility:hidden;transform:translateY(12px);transition:.3s cubic-bezier(.2,.7,.3,1)}
.fab-wrap.open .fab-options{opacity:1;visibility:visible;transform:none}
.fab-opt{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border-radius:30px;border:none;
  cursor:pointer;font-weight:700;font-size:.9rem;color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.18);transition:transform .2s}
.fab-opt:hover{transform:translateX(-3px)}
a.fab-opt{text-decoration:none}
.fab-pedido{background:linear-gradient(135deg,var(--navy),#12488f);color:#fff}
.fab-opt svg{width:24px;height:24px;fill:#fff}
.fab-wa{background:linear-gradient(135deg,#25d366,#1eaf57)}
.fab-bot{background:linear-gradient(135deg,var(--acc),var(--acc-2))}
.fab-label{white-space:nowrap}

/* ---------- Chat widget tipo app (tipografía compacta) ---------- */
.chat-widget{position:fixed;bottom:18px;right:18px;z-index:260;width:min(340px,calc(100vw - 24px));
  height:min(500px,calc(100vh - 96px));background:var(--panel);border:1px solid var(--line-2);
  border-radius:18px;box-shadow:0 24px 60px rgba(0,40,99,.32);display:flex;flex-direction:column;overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.96);pointer-events:none;
  transition:.28s cubic-bezier(.2,.7,.3,1)}
.chat-widget.show{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.chat-head{background:linear-gradient(135deg,#062a63,#0a4a8a);color:#fff;padding:10px 10px 10px 12px;
  display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}
.chat-head-info{display:flex;align-items:center;gap:8px;min-width:0}
/* La cabecera del chat es azul marino: el robot va en blanco sobre un
   disco translúcido. Antes era un círculo turquesa con una carita dentro
   —otro dibujo distinto al del botón flotante—. */
.chat-avatar{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;flex:none;overflow:hidden}
.chat-avatar .adiabot-line{color:#fff;width:22px;height:22px}
.chat-avatar .adiabot-line .abl-bola,
.chat-avatar .adiabot-line .abl-panel{stroke:#5fe0ea}
.chat-title{font-family:var(--display);font-weight:750;font-size:.82rem;line-height:1.1}
.chat-status{font-size:.62rem;color:rgba(255,255,255,.78);display:flex;align-items:center;gap:4px;margin-top:1px}
.chat-dot{width:5px;height:5px;border-radius:50%;background:#3be07a;box-shadow:0 0 6px #3be07a}
.chat-head-actions{display:flex;gap:5px;flex:none}
.chat-close,.chat-ico-btn{width:28px;height:28px;border:none;background:rgba(255,255,255,.14);color:#fff;
  border-radius:8px;cursor:pointer;font-size:.82rem;line-height:1;transition:.15s}
/* El «✕» blanco sobre un velo blanco al 28 % se quedaba en 4.35:1. Se oscurece
   el velo en vez de aclararlo. */
.chat-close:hover,.chat-ico-btn:hover{background:rgba(0,0,0,.22)}

/* ── El mismo fallo, cuatro veces: `background:var(--navy);color:#fff` ──
   En claro --navy es #002863 y va sobrado; en oscuro se redefine a #3d8bff
   —azul claro— y el blanco encima cae a 3.31:1. Son estados ACTIVOS: la
   píldora del idioma, la moneda del demo y la «✕» del modal de país. Una sola
   regla para los cuatro, al lado de la causa. 5.70:1. */
[data-theme="dark"] .lang-opt.active,
[data-theme="dark"] .lang-pick .lang-opt.active,
[data-theme="dark"] .dm-curr.active,
[data-theme="dark"] .cm-close:hover{color:#03102a}
/* body crece y scrollea; chips/input NO tapan mensajes */
.chat-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:10px 10px 10px;
  display:flex;flex-direction:column;gap:7px;background:var(--bg-2);-webkit-overflow-scrolling:touch;
  scroll-behavior:smooth}
.chat-msg{max-width:86%;padding:7px 10px;border-radius:12px;font-size:.78rem;line-height:1.38;
  animation:chatIn .25s ease both;word-break:break-word}
@keyframes chatIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.chat-msg.bot{background:var(--panel);color:var(--text);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.chat-admin-alert{align-self:stretch;margin:4px 0 8px;padding:10px 12px;border-radius:12px;
  background:linear-gradient(135deg,#e8f4ff,#d6ecff);border:1px solid rgba(47,127,240,.35);
  color:#0a3c8c;font:650 .82rem/1.4 var(--body);box-shadow:0 4px 14px rgba(0,40,99,.08)}
.chat-msg.user{background:linear-gradient(135deg,#062a63,#0a4a8a);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chat-msg-time{display:block;font-size:.58rem;opacity:.55;margin-top:3px;font-variant-numeric:tabular-nums}
.chat-msg.user .chat-msg-time{text-align:right;color:rgba(255,255,255,.7)}
.chat-typing{display:flex;gap:4px;align-items:center;width:auto;padding:8px 12px}
/* Solo los TRES puntos son bolitas. El avatar del bot también es un <span> y
   esta regla se lo comía: le dejaba 5 px y el cerebro no se veía. */
.chat-typing .ct-dots span{width:5px;height:5px;border-radius:50%;background:var(--dim);animation:typing 1.2s infinite}
.chat-typing .ct-dots span:nth-child(2){animation-delay:.2s}
.chat-typing .ct-dots span:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
/* Una sola fila con scroll horizontal: no crece hacia arriba ni tapa el hilo */
.chat-chips{display:flex;flex-wrap:nowrap;gap:6px;padding:7px 10px;border-top:1px solid var(--line);
  background:var(--panel);flex:0 0 auto;height:auto;max-height:44px;overflow-x:auto;overflow-y:hidden;
  align-items:center;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.chat-chips:empty{display:none;padding:0;border:0;max-height:0}
.chat-opt,.chat-chip{border:1px solid var(--line-2);background:var(--bg);border-radius:999px;padding:5px 10px;
  cursor:pointer;font:650 .68rem/1.15 var(--body);color:var(--navy);white-space:nowrap;max-width:none;
  flex:0 0 auto;overflow:hidden;text-overflow:ellipsis;transition:.15s}
.chat-opt:hover,.chat-chip:hover{border-color:var(--acc);background:var(--navy-soft)}
/* Países del pie: una fila discreta sobre el copyright, nunca una columna
   (como columna empujaba «Contacto» fuera del grid). */
.foot-paises-row{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;
  padding:16px 0 4px;border-top:1px solid rgba(255,255,255,.08);margin-top:8px}
.foot-paises-row a{font-size:.78rem;opacity:.62;text-decoration:none;color:inherit;white-space:nowrap}
.foot-paises-row a:hover{opacity:1;text-decoration:underline}
@media(max-width:640px){.foot-paises-row{gap:4px 10px}.foot-paises-row a{font-size:.72rem}}
/* Fila de los 30 rubros. Mismo peso visual que la de países —es navegación
   secundaria, no un menú— pero con su rótulo delante: treinta nombres de
   industria seguidos de diecisiete de país, sin decir cuál es cuál, se leen
   como una sola lista revuelta. */
.foot-rubros-row{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;align-items:baseline;
  padding:16px 0 4px;border-top:1px solid rgba(255,255,255,.08);margin-top:8px}
.foot-rubros-row a{font-size:.78rem;opacity:.62;text-decoration:none;color:inherit;white-space:nowrap}
.foot-rubros-row a:hover{opacity:1;text-decoration:underline}
.foot-row-lbl{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.45;
  margin-right:2px;white-space:nowrap}
.foot-rubros-row a.foot-row-mas{opacity:.85;font-weight:700;color:var(--acc-2,#0bb6c4)}
.foot-rubros-row a.foot-row-mas:hover{opacity:1}
/* La de países pierde su borde superior: pegada debajo de la de rubros, dos
   líneas seguidas parecían un separador doble. */
.foot-rubros-row + .foot-paises-row{border-top:0;margin-top:0;padding-top:8px}
@media(max-width:640px){.foot-rubros-row{gap:4px 10px}.foot-rubros-row a{font-size:.72rem}.foot-row-lbl{width:100%;text-align:center;margin-bottom:2px}}

.chat-chip-more{border-style:dashed;color:var(--acc-2)}
/* Cerrar las sugerencias: cuadrado y discreto, para que no compita con las opciones */
.chat-chip-x{padding:4px 9px;line-height:1;opacity:.55;font-weight:700;border-style:dashed}
.chat-chip-x:hover{opacity:1}
.chat-input-row{display:flex;gap:6px;padding:7px 8px calc(7px + env(safe-area-inset-bottom,0));
  border-top:1px solid var(--line);background:var(--panel);align-items:center;flex:0 0 auto}
.chat-input-row input{flex:1;min-width:0;border:1px solid var(--line-2);border-radius:11px;padding:8px 10px;
  font:500 .78rem var(--body);background:var(--bg);color:var(--text)}
.chat-input-row input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(11,182,196,.14)}
.chat-input-row input::placeholder{font-size:.74rem}
.chat-send{flex:none;width:36px;height:36px;border:0;border-radius:11px;cursor:pointer;font-size:.9rem;
  background:linear-gradient(135deg,#062a63,#0bb6c4);color:#fff;transition:transform .12s}
.chat-send:hover{transform:scale(1.05)}.chat-send:disabled{opacity:.45;cursor:wait;transform:none}
/* Dictado por voz. `[hidden]` tiene que ganar al display del botón: es el
   mismo tropiezo que ya costó rato en ui-2026.css con las rejillas. */
.chat-mic{flex:none;width:36px;height:36px;border:1px solid var(--line-2);border-radius:11px;cursor:pointer;
  font-size:.92rem;line-height:1;background:var(--bg);color:var(--text);transition:transform .12s,background .12s}
.chat-mic[hidden]{display:none}
.chat-mic:hover{transform:scale(1.05);border-color:var(--acc)}
.chat-mic.rec{background:#e0243c;border-color:#e0243c;color:#fff;animation:micLate 1.1s ease-in-out infinite}
@keyframes micLate{0%,100%{box-shadow:0 0 0 0 rgba(224,36,60,.55)}50%{box-shadow:0 0 0 7px rgba(224,36,60,0)}}
@media (prefers-reduced-motion:reduce){.chat-mic.rec{animation:none}}
/* Modal opciones / rubros: anclado abajo con aire */
.chat-modal{position:fixed;inset:0;z-index:280;background:rgba(4,20,45,.48);display:flex;align-items:flex-end;justify-content:center;
  padding:0 12px max(16px, env(safe-area-inset-bottom, 0px));box-sizing:border-box}
.chat-modal[hidden]{display:none!important}
.chat-modal-box{width:min(380px,100%);max-height:min(62vh,420px);margin:0 0 8px;background:var(--panel);
  border-radius:16px 16px 14px 14px;box-shadow:0 16px 48px rgba(0,0,0,.28);
  display:flex;flex-direction:column;overflow:hidden;animation:chatIn .22s ease}
.chat-modal-sm{max-height:none}
.chat-modal-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--line);flex:0 0 auto}
.chat-modal-head strong{font:750 .82rem var(--display);color:var(--navy)}
.chat-modal-x{width:28px;height:28px;border:0;border-radius:8px;background:var(--bg-2);cursor:pointer;font-size:.88rem;color:var(--muted)}
.chat-modal-list{padding:8px 10px 14px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;flex:1 1 auto;min-height:0}
.chat-modal-list .chat-opt{white-space:normal;border-radius:11px;padding:10px 12px;text-align:left;font-size:.76rem;line-height:1.3}
.chat-info-body{padding:12px 14px 16px;font-size:.78rem;line-height:1.45;color:var(--text)}
.chat-info-body p{margin:0 0 7px}
.chat-info-hint{color:var(--muted);font-size:.72rem!important}
/* Móvil: full-screen app */
@media(max-width:560px){
  .chat-widget{inset:0;bottom:0;right:0;left:0;top:0;width:100%;height:100%;max-height:none;border-radius:0;
    height:100dvh;height:100svh}
  .chat-msg{font-size:.76rem;max-width:90%;padding:7px 10px}
  .chat-title{font-size:.8rem}
  .chat-chips{max-height:42px;padding:6px 8px}
  .chat-chip{font-size:.66rem;padding:5px 9px}
  .chat-input-row input{font-size:.76rem;padding:8px 10px}
  .chat-modal{align-items:flex-end;justify-content:stretch;padding:0 0 max(12px, env(safe-area-inset-bottom, 0px))}
  .chat-modal-box{width:100%;max-width:100%;margin:0;border-radius:16px 16px 0 0;max-height:min(70dvh, 70svh)}
  .chat-modal-list{padding:8px 10px max(16px, env(safe-area-inset-bottom, 0px))}
  .chat-modal-list .chat-opt{font-size:.74rem;padding:11px 12px}
}
/* Touch: sin tooltip hover del FAB (el toque abre el chat directo) */
@media (hover:none), (pointer:coarse){
  .fab-hover-tip{display:none!important}
  .fab-main.fab-bot-face:hover .fab-hover-tip,
  .fab-main.fab-bot-face:focus-visible .fab-hover-tip,
  .fab-wrap.is-hover .fab-hover-tip{opacity:0!important;visibility:hidden!important}
}

/* ---------- ADMIN: editor de chatbot ---------- */
.cb-node{border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:16px;background:var(--bg)}
.cb-node-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cb-key{font-family:var(--mono);font-weight:700;color:var(--navy);background:var(--navy-soft);padding:4px 12px;border-radius:8px;font-size:.85rem}
.cb-del{background:#fdecec;color:#c0392b;border:1px solid #f5c6c6;border-radius:8px;padding:5px 12px;font-size:.78rem;font-weight:700;cursor:pointer}
.cb-del:hover{background:#c0392b;color:#fff}
.cb-form{margin-bottom:12px}
.cb-form label{display:block;font-size:.76rem;color:var(--muted);font-weight:700;margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em}
.cb-form textarea{width:100%;background:var(--panel);border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;font-family:var(--mono);font-size:.82rem;resize:vertical;margin-bottom:8px;color:var(--text)}
.cb-form textarea:focus{outline:none;border-color:var(--acc)}
.btn-sm{padding:8px 16px;font-size:.82rem}

/* ============================================================
   RUBROS: íconos SVG + cuadrícula extendida
   ============================================================ */
.card .ico svg{width:32px;height:32px}
.card .ico{color:var(--navy)}
.card:hover .ico{color:#fff}
.card:hover .ico svg{stroke:#fff}

.rubros-mas{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.rubro-mini{text-decoration:none;display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:18px;transition:.3s;box-shadow:var(--shadow-sm)}
.rubro-mini:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--acc)}
.rm-ico{width:46px;height:46px;flex:none;border-radius:13px;background:var(--navy-soft);display:grid;place-items:center;color:var(--navy);transition:.3s}
.rm-ico svg{width:26px;height:26px}
.rubro-mini:hover .rm-ico{background:linear-gradient(135deg,var(--navy),var(--acc));color:#fff}
.rubro-mini:hover .rm-ico svg{stroke:#fff}
.rm-body h4{font-family:var(--display);font-weight:700;font-size:.98rem;color:var(--navy);margin-bottom:4px;letter-spacing:-.01em}
.rm-body p{color:var(--muted);font-size:.82rem;line-height:1.45}
@media(max-width:980px){.rubros-mas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rubros-mas{grid-template-columns:1fr}}

/* ---------- BANDERAS SVG ---------- */
.flag-svg{display:inline-flex;width:28px;height:19px;border-radius:4px;overflow:hidden;flex:none;
  box-shadow:0 1px 3px rgba(0,0,0,.18);vertical-align:middle;border:1px solid rgba(0,0,0,.06)}
.flag-svg svg{width:100%;height:100%;display:block}
.country-btn .flag-svg{width:24px;height:16px}
.country-opt .flag-svg{width:34px;height:23px}
.tc-country .flag-svg{width:42px;height:28px;border-radius:6px}
.tax-flag .flag-svg{width:24px;height:16px;margin-right:4px}
.tc-detail .flag-svg{width:24px;height:16px}

/* ============================================================
   DIAGRAMAS CIRCULARES ERP (hero) — distintos por slide
   ============================================================ */
.erp-orbit{position:relative;width:100%;max-width:460px;aspect-ratio:1;margin:0 auto}
.erp-diagram{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(.9) rotate(-8deg);
  transition:.6s cubic-bezier(.2,.7,.3,1)}
.erp-diagram.active{opacity:1;visibility:visible;transform:none}
.erp-ring{position:absolute;inset:14%;border-radius:50%;border:2px dashed var(--line-2);animation:erpSpin 30s linear infinite}
.erp-ring-2{inset:2%;border-style:solid;border-color:rgba(11,182,196,.12);animation-direction:reverse;animation-duration:45s}
@keyframes erpSpin{to{transform:rotate(360deg)}}
.erp-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34%;height:34%;border-radius:50%;
  background:#fff;border:3px solid var(--hub,#0bb6c4);display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 14px 40px rgba(0,40,99,.18),0 0 0 10px rgba(11,182,196,.06);z-index:3}
.erp-hub-main{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--hub,#0bb6c4);letter-spacing:-.02em;line-height:1}
.erp-hub-sub{font-size:.62rem;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
.erp-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;z-index:2;
  animation:erpPop .5s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes erpPop{from{opacity:0;transform:translate(-50%,-50%) scale(.3)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.erp-node-ic{width:50px;height:50px;border-radius:15px;background:var(--panel);border:1px solid var(--line);
  display:grid;place-items:center;font-size:1.4rem;box-shadow:var(--shadow-sm);transition:.3s}
.erp-node:hover .erp-node-ic{transform:translateY(-4px) scale(1.08);border-color:var(--acc);box-shadow:0 10px 24px rgba(0,40,99,.15)}
/* Iconos minimalistas dibujados en canvas dentro de los nodos */
.erp-node-ic .erp-cv{display:block;width:30px;height:30px}
@media(max-width:980px){.erp-node-ic .erp-cv{width:26px;height:26px}}
.erp-node-lbl{font-size:.7rem;font-weight:700;color:var(--navy);background:var(--panel);padding:2px 8px;border-radius:20px;border:1px solid var(--line);white-space:nowrap}
[data-theme="dark"] .erp-hub{background:var(--panel)}
[data-theme="dark"] .erp-node-ic,[data-theme="dark"] .erp-node-lbl{background:var(--panel)}
@media(max-width:980px){.erp-orbit{max-width:360px}.erp-node-ic{width:42px;height:42px;font-size:1.2rem}.erp-hub-main{font-size:1.2rem}}
@media(max-width:560px){.erp-orbit{max-width:300px}.erp-node-lbl{font-size:.62rem}}

/* ============================================================
   FOOTER REDISEÑADO + MAPAMUNDI + AVATAR FAB
   ============================================================ */
.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* mapamundi */
.foot-map{position:relative;margin-bottom:44px;padding-bottom:30px;border-bottom:1px solid var(--line)}
#worldMap{width:100%;height:240px;display:block}
.foot-map-cap{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;
  font-size:.82rem;color:var(--muted);font-family:var(--mono);background:var(--panel);padding:6px 16px;border-radius:30px;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);white-space:nowrap}
.fm-dot{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc);animation:tagPulse 2s infinite}
@media(max-width:560px){#worldMap{height:160px}.foot-map-cap{font-size:.68rem;bottom:30px}}

/* theme switch en footer */
.foot-theme{display:flex;align-items:center;gap:12px;margin:18px 0;font-size:.82rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;font-family:var(--mono)}
.theme-switch{width:50px;height:26px;border-radius:30px;border:none;background:var(--line-2);cursor:pointer;position:relative;transition:.3s;padding:0}
.theme-switch .ts-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.3s;box-shadow:0 2px 6px rgba(0,0,0,.2)}
[data-theme="dark"] .theme-switch{background:var(--acc)}
[data-theme="dark"] .theme-switch .ts-knob{transform:translateX(24px)}

.foot-col h4{position:relative;padding-bottom:8px;margin-bottom:16px}
.foot-col h4::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:2px;background:var(--acc);border-radius:2px}

/* FAB avatar + burbuja */
.fab-main .fab-ico-open{display:grid;place-items:center}
.fab-bubble{position:absolute;right:68px;top:50%;background:var(--panel);color:var(--navy);
  font-weight:700;font-size:.72rem;padding:6px 11px;border-radius:20px;box-shadow:var(--shadow);white-space:nowrap;
  border:1px solid var(--line-2);pointer-events:none;transform-origin:right center;
  animation:bubbleCycle 11s ease-in-out infinite;opacity:0}
.fab-bubble::after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%) rotate(45deg);width:9px;height:9px;background:var(--panel);border-right:1px solid var(--line-2);border-top:1px solid var(--line-2)}
@keyframes bubbleCycle{
  0%{opacity:0;transform:translateY(-50%) translateX(8px) scale(.9)}
  3%{opacity:1;transform:translateY(-50%) translateX(0) scale(1)}
  16%{opacity:1;transform:translateY(-50%) translateX(0) scale(1)}
  21%{opacity:0;transform:translateY(-50%) translateX(8px) scale(.9)}
  100%{opacity:0;transform:translateY(-50%) translateX(8px) scale(.9)}
}
.fab-wrap.open .fab-bubble{opacity:0;visibility:hidden;animation:none}
/* badge de notificación (mensaje recibido) */
.fab-badge{position:absolute;top:-3px;right:-3px;width:22px;height:22px;border-radius:50%;
  background:#ff4757;color:#fff;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;
  box-shadow:0 2px 8px rgba(255,71,87,.5);border:2.5px solid #fff;z-index:3;
  animation:badgePop .4s ease 1s both,badgePulse 2.5s ease-in-out 1.4s infinite}
@keyframes badgePop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.fab-wrap.open .fab-badge{opacity:0;visibility:hidden}
@media(max-width:560px){.fab-bubble{display:none}}
@media(prefers-reduced-motion:reduce){.fab-bubble{animation:none;opacity:0}.fab-badge{animation:badgePop .4s ease 1s both}}

/* ---------- ETIQUETA DE MÓDULO en rubros ---------- */
.rm-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.rm-mod{font-family:var(--mono);font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:6px;letter-spacing:.04em;flex:none}
/* Badges de módulo: colores con contraste AA (texto .6rem => umbral 4.5:1) */
.mod-erp{background:rgba(0,40,99,.1);color:var(--navy)}
.mod-pos{background:rgba(11,182,196,.16);color:#06707a}
.mod-dms{background:rgba(47,127,240,.15);color:#1b59b8}
.mod-crm{background:rgba(255,138,61,.17);color:#a84d10}
.mod-mrp{background:rgba(139,92,246,.16);color:#6d28d9}
[data-theme="dark"] .mod-erp{background:rgba(61,139,255,.18);color:#7fb0ff}
[data-theme="dark"] .mod-pos{background:rgba(11,182,196,.2);color:#5fd8e2}
[data-theme="dark"] .mod-dms{background:rgba(47,127,240,.2);color:#7fb0ff}
[data-theme="dark"] .mod-crm{background:rgba(255,138,61,.2);color:#ffb27a}
[data-theme="dark"] .mod-mrp{background:rgba(139,92,246,.22);color:#c4b5fd}

/* ============================================================
   📱 OPTIMIZACIÓN RESPONSIVE (móvil / tablet)
   ============================================================ */
/* Tablet: mostrar el diagrama ERP debajo del texto, más pequeño */
@media(max-width:980px) and (min-width:621px){
  .hero-inner{grid-template-columns:1fr;text-align:left}
  .hero-visual{display:block;margin-top:20px}
  .erp-orbit{max-width:340px}
  .stats{grid-template-columns:repeat(4,1fr)}
}
/* Tablet general */
@media(max-width:820px){
  .foot-map-cap{position:static;transform:none;margin:14px auto 0;width:fit-content}
  .foot-map{text-align:center}
  #worldMap{height:200px}
}
/* Móvil */
@media(max-width:620px){
  .hero-visual{display:none}
  .stats,.kpis{grid-template-columns:1fr 1fr;gap:12px}
  .stat{padding:20px 16px}
  .stat .n{font-size:1.9rem}
  .grid-4{grid-template-columns:1fr;gap:14px}
  .rubros-mas{grid-template-columns:1fr}
  .sec-head h2{font-size:1.7rem}
  .sec-head{margin-bottom:40px}
  .hslide h1{font-size:1.85rem;line-height:1.1}
  .hslide p,.sec-head p{font-size:1rem}
  .btn{padding:13px 22px;font-size:.92rem}
  .slide-actions{flex-direction:column;align-items:stretch}
  .slide-actions .btn{justify-content:center;width:100%}
  .toggle-wrap{flex-wrap:wrap;justify-content:center}
  .plan{padding:28px 22px}
  .testi{padding:32px 22px}
  .testi .quote{font-size:1.15rem}
  .cta-final{padding:44px 20px}
  .foot-theme{justify-content:flex-start}
  .compare-wrap{margin-top:50px}
  /* tabla comparativa: scroll horizontal suave */
  .compare-wrap{-webkit-overflow-scrolling:touch}
  .compare{min-width:560px}
  /* modal país: una columna, ocupa casi toda la pantalla */
  .cm-box{max-height:88vh}
  .cm-head{padding:20px 20px 14px}
  .cm-head h3{font-size:1.2rem}
  /* FAB y chat más cómodos en móvil */
  .fab-wrap{bottom:16px;right:16px}
  .theme-toggle{bottom:84px;right:16px}
  /* En pantalla pequeña el botón es lo que hay encima del texto: se reduce
     un poco y, MIENTRAS se hace scroll (o sea, mientras se lee), se aparta
     hasta quedar casi transparente. Vuelve solo al dejar de desplazarse. */
  .fab-main{width:54px;height:54px}
  .fab-main span:not(.fab-badge){font-size:1.3rem}
  .fab-wrap{transition:opacity .25s ease,transform .25s ease}
  .fab-wrap.scrolling:not(.open){opacity:.28;transform:scale(.82)}
}
/* Móvil pequeño */
@media(max-width:380px){
  .wrap{padding:0 14px}
  .logo{font-size:1.15rem}
  .hslide h1{font-size:1.6rem}
  .stats,.kpis{grid-template-columns:1fr}
}
/* Evitar overflow horizontal en todo el sitio */
html,body{max-width:100%;overflow-x:hidden}
.compare-wrap{max-width:100%}
img,svg,canvas{max-width:100%}
/* ── SEO: H1 único en la home. Los slides 2-4 del hero pasaron de <h1> a <h2>;
      estas reglas les dan exactamente el mismo aspecto que el <h1> del hero. ── */
.hslide h2{font-family:var(--display);font-weight:700;font-size:clamp(2.3rem,4.8vw,3.9rem);line-height:1;letter-spacing:-.04em;margin-bottom:16px;color:var(--navy)}
.hero .hero-text h2{color:#f6fbff}
.hslide h2 em{font-style:normal;font-weight:800;background:linear-gradient(110deg,var(--acc) 0%,var(--acc-2) 55%,#9ec5ff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
@media(max-width:560px){.hslide h2{font-size:1.85rem;line-height:1.1}}
@media(max-width:380px){.hslide h2{font-size:1.6rem}}

/* botón de país en menú móvil */
.mm-country{display:flex;align-items:center;gap:8px;padding:14px 16px;border-radius:12px;font-family:var(--display);
  font-weight:600;font-size:1.02rem;background:var(--navy);color:#fff;border:none;cursor:pointer;width:100%;text-align:left}
.mm-country:hover{background:var(--navy-2)}
/* En oscuro --navy y --navy-2 son azules CLAROS, así que el blanco encima
   daba 3.31:1 en reposo y 2.57:1 en hover. Tinta oscura: 5.70:1 y 7.35:1. */
[data-theme="dark"] .mm-country{color:#03102a}

/* ---------- TARJETAS DE FUNCIONALIDAD POR RUBRO (precios) ---------- */
.feature-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 22px;transition:.3s;box-shadow:var(--shadow-sm)}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--acc)}
.fc-ico{width:54px;height:54px;border-radius:15px;background:var(--navy-soft);display:grid;place-items:center;font-size:1.6rem;margin-bottom:16px}
.feature-card h3{font-family:var(--display);font-weight:700;font-size:1.08rem;color:var(--navy);margin-bottom:8px;letter-spacing:-.01em}
.feature-card p{color:var(--muted);font-size:.9rem;line-height:1.5}

/* ---------- HOVER ACTIVO en tarjetas de rubro ---------- */
.card{transition:transform .3s, box-shadow .3s, border-color .3s, background .3s;position:relative;overflow:hidden}
.card[href]:hover{transform:translateY(-6px);border-color:var(--acc);box-shadow:0 20px 50px rgba(0,40,99,.16)}
.card[href]::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--acc),var(--acc-2));transition:width .35s}
.card[href]:hover::after{width:100%}
.card[href]:hover .lnk{color:var(--acc-2);transform:translateX(4px)}
.card .lnk{transition:transform .25s, color .25s;display:inline-block}
.rubro-mini{cursor:pointer}
.rubro-mini:hover h4{color:var(--acc-2)}

/* ---------- botón "Ver más" en mini-rubros ---------- */
.rm-vermas{display:inline-block;margin-top:8px;font-size:.78rem;font-weight:700;color:var(--acc-2);
  font-family:var(--display);opacity:0;transform:translateX(-4px);transition:.25s}
.rubro-mini.has-page:hover .rm-vermas{opacity:1;transform:translateX(0)}
.rubro-mini.has-page{border-left:3px solid transparent}
.rubro-mini.has-page:hover{border-left-color:var(--acc)}
@media(max-width:560px){.rm-vermas{opacity:1;transform:none}}

/* ============================================================
   DIAGRAMAS HERO v2 — 3 formatos distintos
   ============================================================ */
/* Hub con logo A */
.erp-hub-logo{background:#fff;border:3px solid var(--acc);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.erp-hub-logo svg{display:block}
[data-theme="dark"] .erp-hub-logo{background:var(--panel)}

/* SLIDE 2: factura electrónica validada */
.fac-card{position:absolute;left:-6%;right:-6%;top:6%;bottom:6%;background:var(--panel);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 24px 60px rgba(0,40,99,.14);padding:22px 24px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.fac-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--acc),var(--acc-2))}
.fac-head{display:flex;align-items:center;gap:12px}
.fac-logo{width:42px;height:42px;border-radius:12px;background:var(--navy-soft);display:grid;place-items:center;flex:none}
.fac-head-txt{flex:1;display:flex;flex-direction:column}
.fac-head-txt b{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--navy)}
.fac-head-txt span{font-size:.75rem;color:var(--muted)}
.fac-seal{width:34px;height:34px;border-radius:50%;background:rgba(11,182,196,.15);color:var(--acc);display:grid;place-items:center;font-weight:800;flex:none;border:2px dashed var(--acc);animation:facSeal 4s ease-in-out infinite}
@keyframes facSeal{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.fac-rows{display:flex;flex-direction:column;gap:11px;flex:1;justify-content:center}
.fac-row{display:flex;align-items:center;gap:12px;animation:erpPop .5s cubic-bezier(.2,.9,.3,1.2) both}
.fac-row-ic{font-size:1.25rem;flex:none}
.fac-row-bar{flex:1;height:9px;background:var(--bg-2);border-radius:6px;overflow:hidden}
.fac-row-bar b{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc-2));border-radius:6px}
.fac-row-ok{width:22px;height:22px;border-radius:50%;background:rgba(11,182,196,.16);color:var(--acc);display:grid;place-items:center;font-size:.7rem;font-weight:800;flex:none}
.fac-entes{display:flex;gap:6px;flex-wrap:wrap}
.fac-entes span{font-family:var(--mono);font-size:.6rem;font-weight:700;color:var(--acc-2);background:rgba(47,127,240,.1);padding:3px 8px;border-radius:6px}
.fac-foot{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.76rem;color:var(--muted)}
.erp-dot-live{width:8px;height:8px;border-radius:50%;background:#3be07a;box-shadow:0 0 8px #3be07a;animation:tagPulse 2s infinite}

/* SLIDE 3: red de nodos IA */
.erp-net-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.erp-net-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36%;height:36%;border-radius:50%;
  background:radial-gradient(120% 120% at 38% 30%,#1c3a6e 0%,#0c1f44 42%,#0a1530 70%,#070d20 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 18px 50px rgba(10,25,60,.5),inset 0 2px 14px rgba(120,170,255,.25),0 0 0 6px rgba(120,170,255,.06);
  z-index:3;color:#fff;cursor:pointer;
  transition:transform .4s cubic-bezier(.2,.8,.3,1.2),box-shadow .4s}
/* halo turquesa exterior */
.erp-net-core::before{content:"";position:absolute;inset:-10%;border-radius:50%;
  background:radial-gradient(circle,rgba(11,182,196,.20),transparent 68%);z-index:-1;
  animation:iaPulse 4.5s ease-in-out infinite}
/* anillo punteado giratorio */
.erp-net-core::after{content:"";position:absolute;inset:-14%;border-radius:50%;border:1px dashed rgba(120,170,255,.35);
  animation:coreSpin 22s linear infinite}
@keyframes coreSpin{to{transform:rotate(360deg)}}
@keyframes iaPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.erp-net-core:hover{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 24px 64px rgba(10,25,60,.6),inset 0 2px 16px rgba(120,170,255,.35),0 0 0 8px rgba(120,170,255,.1)}
.erp-net-core-main{font-family:var(--display);font-weight:800;font-size:1.7rem;line-height:1;color:var(--warm);text-shadow:0 0 18px rgba(255,138,61,.5);position:relative;z-index:3}
.erp-net-core-sub{font-size:.52rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;color:rgba(180,210,255,.85);margin-top:38px;position:relative;z-index:3}
/* onda sinusoidal animada dentro de la esfera (legacy, slide 3 ahora usa canvas) */
.ia-orb-wave{position:absolute;left:0;right:0;top:50%;transform:translateY(-30%);width:100%;height:55%;z-index:1;opacity:.9}
.ia-wave-path{animation:iaWave 5s ease-in-out infinite}
.ia-wave-2{animation-duration:7s;animation-direction:reverse}
@keyframes iaWave{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
/* === IA BRAIN: cerebro IA animado en canvas (slide 3) === */
.ia-brain{background:radial-gradient(120% 120% at 38% 30%,#1c3a6e 0%,#0c1f44 42%,#0a1530 70%,#070d20 100%)}
.ia-brain-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;border-radius:50%}
.ia-brain .erp-net-core-main{font-size:1.55rem;letter-spacing:.04em;background:linear-gradient(135deg,#ff8a3d 0%,#ffd06b 50%,#ff8a3d 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none;filter:drop-shadow(0 0 12px rgba(255,138,61,.5))}
.ia-brain .erp-net-core-sub{margin-top:44px;font-size:.5rem;color:rgba(160,220,255,.95)}
@media(prefers-reduced-motion:reduce){.erp-net-core::before,.erp-net-core::after,.ia-wave-path{animation:none}}
.erp-net-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:5px;z-index:2;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:11px 9px;min-width:72px;box-shadow:var(--shadow-sm);
  animation:erpPop .5s cubic-bezier(.2,.9,.3,1.2) both;transition:transform .25s,box-shadow .25s,border-color .25s}
.erp-net-node:hover{transform:translate(-50%,-50%) scale(1.08);box-shadow:var(--shadow);border-color:var(--acc)}
.erp-net-node .nn-ic{width:28px;height:28px;color:var(--acc)}
.erp-net-node .nn-ic svg{width:100%;height:100%}
.erp-net-node b{font-size:.7rem;color:var(--navy);font-weight:700}
[data-theme="dark"] .erp-net-node{background:var(--panel)}
[data-theme="dark"] .erp-net-node b{color:#fff}

/* ============================================================
   BUSCADOR (nav + modal)
   ============================================================ */
.nav-search-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line-2);background:var(--panel);
  cursor:pointer;display:grid;place-items:center;color:var(--navy);transition:.2s}
.nav-search-btn svg{width:18px;height:18px}
.nav-search-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.search-modal{position:fixed;inset:0;z-index:320;display:flex;align-items:flex-start;justify-content:center;
  padding:90px 24px 24px;background:rgba(4,12,28,.55);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:.25s}
.search-modal.show{opacity:1;visibility:visible}
.sm-box{background:var(--panel);border:1px solid var(--line-2);border-radius:20px;width:100%;max-width:600px;
  box-shadow:0 40px 100px rgba(0,40,99,.4);overflow:hidden;transform:translateY(-14px);transition:.3s}
.search-modal.show .sm-box{transform:none}
.sm-input-wrap{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.sm-input-wrap svg{width:22px;height:22px;color:var(--acc);flex:none}
.sm-input-wrap input{flex:1;border:none;background:none;outline:none;font-size:1.05rem;color:var(--text);font-family:var(--body)}
.sm-close{font-family:var(--mono);font-size:.66rem;color:var(--muted);background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:4px 8px;cursor:pointer;flex:none}
.sm-results{max-height:60vh;overflow-y:auto;padding:8px}
.sm-item{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:12px;text-decoration:none;transition:.15s}
.sm-item:hover{background:var(--navy-soft)}
.sm-name{flex:1;font-weight:600;color:var(--navy);font-size:.95rem}
.sm-mod{font-family:var(--mono);font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:6px}
.sm-go{color:var(--acc);font-weight:800;opacity:0;transition:.15s}
.sm-item:hover .sm-go{opacity:1}
.sm-empty{padding:30px 18px;text-align:center;color:var(--muted);font-size:.9rem}
@media(max-width:980px){.nav-search-btn{display:none}}

/* lista de módulos en página de rubro */
.mod-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:11px 18px;margin-top:20px}
.mod-list li{display:flex;gap:10px;align-items:flex-start;color:var(--text);font-size:.92rem;line-height:1.4}
.ml-check{flex:none;width:20px;height:20px;border-radius:50%;background:rgba(11,182,196,.15);color:var(--acc);display:grid;place-items:center;font-size:.62rem;font-weight:800;margin-top:1px}
@media(max-width:620px){.mod-list{grid-template-columns:1fr}}

/* etiqueta de rubro en planes dinámicos */
.p-rubro-tag{font-size:.72rem;font-weight:700;color:var(--acc-2);background:rgba(47,127,240,.1);
  padding:5px 10px;border-radius:8px;margin-bottom:12px;display:inline-block;font-family:var(--mono)}
.p-features li b{color:var(--navy);font-weight:700}
[data-theme="dark"] .p-features li b{color:var(--acc)}

/* ============================================================
   WIZARD DE SOLICITUD / CARRITO
   ============================================================ */
.wrap-narrow{max-width:760px}
.wz-steps{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:36px}
.wz-step{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;flex:1;max-width:140px}
.wz-step::after{content:"";position:absolute;top:17px;left:60%;width:80%;height:2px;background:var(--line-2)}
.wz-step:last-child::after{display:none}
.wz-num{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--bg-2);color:var(--dim);border:2px solid var(--line-2);transition:.3s;z-index:1}
.wz-lbl{font-size:.82rem;color:var(--dim);font-weight:600}
.wz-step.active .wz-num{background:var(--navy);color:#fff;border-color:var(--navy)}
.wz-step.active .wz-lbl{color:var(--navy)}
.wz-step.done .wz-num{background:var(--acc);color:#fff;border-color:var(--acc)}
.wz-step.done::after{background:var(--acc)}
.wz-panel{display:none;animation:wzIn .4s ease}
.wz-panel.active{display:block}
@keyframes wzIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wz-title{font-family:var(--display);font-size:1.5rem;color:var(--navy);margin-bottom:6px}
.wz-sub{color:var(--muted);margin-bottom:24px;font-size:.95rem}
.cart-form{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:20px}
.cart-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cart-form .field{margin-bottom:14px}
.cart-form label{display:block;font-size:.8rem;font-weight:600;color:var(--navy);margin-bottom:6px}
.cart-form input,.cart-form select,.wz-panel .field input,.wz-panel .field select{width:100%;padding:11px 13px;border:1px solid var(--line-2);border-radius:10px;font-family:var(--body);font-size:.92rem;background:var(--panel);color:var(--text)}
.cart-list{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.cart-empty{text-align:center;color:var(--dim);padding:24px;border:2px dashed var(--line-2);border-radius:14px;font-size:.9rem}
.cart-item{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:14px 16px}
.ci-info{flex:1;display:flex;flex-direction:column}
.ci-info b{color:var(--navy);font-size:.96rem}
.ci-info span{color:var(--muted);font-size:.82rem}
.ci-price{font-weight:800;color:var(--navy);font-family:var(--display)}
.ci-price small{font-weight:500;color:var(--dim);font-size:.7rem}
.ci-del{width:30px;height:30px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--dim);cursor:pointer;flex:none;transition:.2s}
.ci-del:hover{background:#ffe5e8;color:#ff4757;border-color:#ffccd2}
.cart-cycle{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px 0;border-top:1px solid var(--line);margin-bottom:8px}
.cc-lbl{font-weight:600;color:var(--navy);font-size:.9rem}
.cc-opt{display:flex;align-items:center;gap:7px;font-size:.9rem;color:var(--text);cursor:pointer}
.cart-total{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;background:var(--navy-soft);border-radius:13px;margin-bottom:20px}
.cart-total b{font-family:var(--display);font-size:1.4rem;color:var(--navy)}
.wz-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px}
.reg-check{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--text);margin:8px 0 4px;cursor:pointer}
.reg-pass{margin-bottom:8px}
.pay-methods{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.pay-opt{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:2px 14px;align-items:center;padding:16px 18px;border:2px solid var(--line-2);border-radius:14px;cursor:pointer;transition:.2s}
.pay-opt:hover{border-color:var(--acc)}
.pay-opt:has(input:checked){border-color:var(--acc);background:rgba(11,182,196,.06)}
.pay-opt input{grid-row:1/3;width:18px;height:18px}
.pay-ic{grid-row:1/3;grid-column:1;display:none}
.pay-name{font-weight:700;color:var(--navy);font-size:.98rem}
.pay-desc{font-size:.82rem;color:var(--muted)}
.pay-detail{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:15px 17px;font-size:.9rem;color:var(--text);margin-bottom:22px;line-height:1.5}
.cart-summary{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:8px}
.cart-summary h3{font-family:var(--display);font-size:1.05rem;color:var(--navy);margin-bottom:12px}
.cs-row{display:flex;justify-content:space-between;padding:8px 0;font-size:.9rem;color:var(--text);border-bottom:1px solid var(--line)}
.cs-row.cs-total{border-bottom:none;border-top:2px solid var(--navy);margin-top:6px;padding-top:12px;font-size:1.05rem}
.cs-row.cs-total b{color:var(--navy);font-family:var(--display)}
.wz-done-ico{width:72px;height:72px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-size:2.4rem;margin:0 auto 18px;animation:badgePop .5s cubic-bezier(.2,.9,.3,1.3) both}
@media(max-width:620px){.cart-row2{grid-template-columns:1fr}.wz-lbl{font-size:.72rem}}

/* registro obligatorio en el wizard */
.reg-required{background:var(--navy-soft);border:1px solid var(--line);border-radius:14px;padding:18px;margin:8px 0 4px}
.reg-required-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.rr-ico{font-size:1.3rem;flex:none}
.reg-required-head b{display:block;color:var(--navy);font-size:.98rem;margin-bottom:3px}
.reg-required-head span{font-size:.84rem;color:var(--muted)}
.reg-required-head a{color:var(--acc-2);font-weight:700}
.reg-required .field{margin-bottom:12px}
.reg-required .field:last-child{margin-bottom:0}
.reg-required label{display:block;font-size:.8rem;font-weight:600;color:var(--navy);margin-bottom:6px}
.reg-required input{width:100%;padding:11px 13px;border:1px solid var(--line-2);border-radius:10px;font-family:var(--body);font-size:.92rem;background:var(--panel);color:var(--text)}

/* slide 2 enriquecido */
.fac-row .nn-ic{width:24px;height:24px;color:var(--acc-2);flex:none}
.fac-row .nn-ic svg{width:100%;height:100%}
.fac-row-lbl{flex:1;font-weight:600;color:var(--navy);font-size:.9rem}
.fac-entes-group{margin-top:2px}
.fac-entes-lbl{font-size:.62rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--dim);margin-bottom:5px}
[data-theme="dark"] .fac-row-lbl{color:#fff}

/* ============================================================
   FONDOS TEMÁTICOS DEL HERO (iconos tenues por slide)
   ============================================================ */
.hero-bgicons{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hbg-i,.hbg-f{position:absolute;color:#a3c5ff;opacity:.12;transition:opacity .6s;
  animation:hbgFloat 9s ease-in-out infinite}
.hbg-i svg{width:42px;height:42px}
.hbg-f{font-family:var(--mono);font-weight:700;opacity:.08;white-space:nowrap}
[data-theme="dark"] .hbg-i,[data-theme="dark"] .hbg-f{color:var(--acc);opacity:.1}
@keyframes hbgFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(4deg)}}
.hbg-f{animation:hbgFloatF 10s ease-in-out infinite}
@keyframes hbgFloatF{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero-inner{position:relative;z-index:2}

/* ============================================================
   DASHBOARD ERP — captura del sistema
   ============================================================ */
.dash-showcase{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start;margin-top:14px}
.dash-mock{background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.dash-mock-bar{display:flex;align-items:center;gap:9px;padding:13px 18px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.78rem;color:var(--muted);background:var(--bg-2)}
.dash-mock-bar em{color:var(--acc);font-style:normal;font-weight:700}
.dm-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e}
.dm-tabs{margin-left:auto;display:flex;gap:3px;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:3px}
.dm-tab{font-family:var(--body);font-size:.74rem;padding:6px 14px;border-radius:7px;color:var(--muted);font-weight:600;transition:.2s;cursor:pointer;background:transparent}
.dm-tab:hover{color:var(--navy);background:rgba(11,40,99,.08)}
.dm-tab.active{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff !important;box-shadow:0 4px 12px rgba(11,40,99,.28)}
[data-theme="dark"] .dm-tab{color:#9eb5d6}
[data-theme="dark"] .dm-tab:hover{color:#fff;background:rgba(255,255,255,.08)}
[data-theme="dark"] .dm-tab.active{background:linear-gradient(135deg,var(--acc),var(--acc-2));color:#03102a !important;box-shadow:0 4px 12px rgba(11,182,196,.35)}
[data-theme="dark"] .dm-tabs{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.dash-mock-body{padding:18px}
.dm-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.dm-kpi{border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:12px;padding:12px 14px;background:var(--bg)}
.dm-kpi-warn{border-left-color:var(--warm)}
.dm-k-lbl{display:block;font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.dm-k-val{display:block;font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--navy);margin:4px 0 2px;letter-spacing:-.02em}
.dm-k-up{font-size:.74rem;font-weight:700;color:#16a34a}
.dm-k-alert{font-size:.74rem;font-weight:700;color:var(--warm)}
.dm-chart{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--bg);margin-bottom:16px}
.dm-chart-head{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin-bottom:8px}
.dm-proj{color:var(--acc)}
.dm-spark{width:100%;height:64px;display:block}
.dm-days{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.62rem;color:var(--dim);margin-top:4px;padding:0 2px}
.dm-top{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--bg)}
.dm-top-head{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin-bottom:10px}
.dm-top-row{display:grid;grid-template-columns:64px 1fr 70px 48px;align-items:center;gap:10px;padding:5px 0}
.dm-sku{font-family:var(--mono);font-size:.74rem;color:var(--acc-2);font-weight:700}
.dm-sku-name{font-size:.82rem;color:var(--text)}
.dm-bar{height:6px;border-radius:4px;background:var(--line);overflow:hidden}
.dm-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--acc-2),var(--acc))}
.dm-pct{font-size:.78rem;font-weight:700;color:#16a34a;text-align:right}
.dash-feats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dash-feat{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow-sm);transition:.28s;overflow:hidden}
.dash-feat::before{content:"";position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(11,182,196,.13),transparent 65%);opacity:0;transition:.35s;pointer-events:none}
.dash-feat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--acc)}
.dash-feat:hover::before{opacity:1}
.df-ic{position:relative;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(11,182,196,.14),rgba(47,127,240,.12));
  color:var(--acc);margin-bottom:12px;transition:.35s;overflow:visible;z-index:1}
.df-ic::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:1.4px solid var(--acc);
  opacity:0;transform:scale(.85);transition:.4s cubic-bezier(.2,.8,.3,1.2)}
.dash-feat:hover .df-ic{background:linear-gradient(135deg,var(--acc),var(--acc-2));color:#fff;transform:rotate(-6deg) scale(1.06)}
.dash-feat:hover .df-ic::after{opacity:.5;transform:scale(1.18)}
.df-ic svg{width:24px;height:24px;transition:.35s}
.dash-feat:hover .df-ic svg{transform:scale(1.1)}
.dash-feat h4{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--navy);margin-bottom:5px;position:relative;z-index:1}
.dash-feat p{color:var(--muted);font-size:.85rem;line-height:1.45;position:relative;z-index:1}
@media(max-width:900px){.dash-showcase{grid-template-columns:1fr}}
@media(max-width:520px){.dm-kpis{grid-template-columns:1fr 1fr}.dash-feats{grid-template-columns:1fr}.dm-top-row{grid-template-columns:54px 1fr 40px;}.dm-bar{display:none}}

/* ============================================================
   ¿QUÉ ES ADIASOFT? — acrónimo
   ============================================================ */
.adia-acro{background:linear-gradient(120deg,#0bb6c4,#2f7ff0 70%,#3d7fe6);border-radius:26px;padding:42px 44px;color:#fff;box-shadow:0 22px 60px rgba(47,127,240,.28);position:relative;overflow:hidden}
.adia-acro::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 90% 0,rgba(255,255,255,.18),transparent 60%);pointer-events:none}
.adia-acro-tag{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.22em;color:rgba(255,255,255,.85);display:block;margin-bottom:20px;position:relative}
.adia-letters{display:grid;grid-template-columns:repeat(8,1fr);gap:14px;position:relative}
/* Las tarjetas A-D-I-A del acrónimo llevan texto BLANCO sobre un mosaico
   translúcido puesto encima del degradado turquesa. Al aclarar el mosaico en
   hover, el blanco se comía a sí mismo: 1.91:1. Se oscurece en vez de
   aclarar —mismo efecto de «se levanta», contraste al revés—: 5.66:1 en
   reposo y 7.46:1 en hover, medido contra el extremo más claro del degradado,
   que es el peor caso. */
.adia-l{background:rgba(2,28,55,.45);border:1px solid rgba(255,255,255,.45);border-radius:14px;padding:18px 10px;text-align:center;backdrop-filter:blur(4px);transition:.25s;cursor:default}
.adia-l:hover{background:rgba(2,28,55,.58);border-color:rgba(255,255,255,.75);transform:translateY(-5px);box-shadow:0 12px 28px rgba(2,20,55,.22)}
.adia-l b{display:block;font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1;color:#fff;letter-spacing:-.02em;text-shadow:0 2px 10px rgba(2,20,55,.30)}
.adia-l span{display:block;min-height:.9em;font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:#fff;margin-top:10px;white-space:nowrap}
.adia-l span.typing{border-right:2px solid #fff;animation:adiaCaret .7s step-end infinite}
@keyframes adiaCaret{50%{border-color:transparent}}
.adia-claim{margin-top:26px;font-size:1.04rem;line-height:1.55;color:rgba(255,255,255,.92);max-width:680px;position:relative}
.adia-claim strong{color:#fff}
@media(max-width:760px){.adia-acro{padding:30px 24px}.adia-letters{grid-template-columns:repeat(4,1fr)}.adia-l b{font-size:2rem}}
@media(max-width:420px){.adia-letters{grid-template-columns:repeat(4,1fr);gap:9px}.adia-l{padding:13px 6px}.adia-l b{font-size:1.7rem}}

/* ============================================================
   IMPACTO GLOBAL · 9 mil millones
   ============================================================ */
.impacto-global{background:var(--bg-2);text-align:center}
.impacto-inner{max-width:760px;margin:0 auto}
.eyebrow-c{text-align:center;color:var(--acc)}
.impacto-title{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.1;letter-spacing:-.03em;color:var(--navy);margin:14px 0 18px}
.impacto-title span{background:linear-gradient(120deg,var(--acc),var(--acc-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.impacto-sub{color:var(--muted);font-size:1.05rem;line-height:1.6;max-width:620px;margin:0 auto}

/* ============================================================
   PAGE-HERO de RUBRO — dos columnas con ilustración vectorial
   ============================================================ */
.page-hero{padding:58px 0 64px}
.ph-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center;position:relative;z-index:2}
.ph-text{max-width:600px}
.ph-h1-ico{display:inline-flex;vertical-align:-4px;color:var(--acc)}
.ph-h1-ico svg{width:34px;height:34px}
.ph-art{position:relative;display:flex;justify-content:center;align-items:center}
.rubro-ilus{width:100%;max-width:460px;height:auto;filter:drop-shadow(0 20px 40px rgba(0,15,40,.4));animation:ilusFloat 6s ease-in-out infinite}
@keyframes ilusFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(prefers-reduced-motion:reduce){.rubro-ilus{animation:none}}
@media(max-width:900px){.ph-grid{grid-template-columns:1fr;gap:18px}.ph-art{order:-1;max-width:380px;margin:0 auto}.rubro-ilus{max-width:340px}}
@media(max-width:560px){.rubro-ilus{max-width:280px}}

/* ============================================================
   NOSOTROS — edificio Adiasoft + infinito Misión/Visión
   ============================================================ */
.about-banner{align-items:center}
.about-art{display:flex;justify-content:center;align-items:center;position:relative}
.ilus-edificio{width:100%;max-width:360px;height:auto;animation:ilusFloat 7s ease-in-out infinite}
.about-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.about-chip{display:inline-flex;flex-direction:column;gap:2px;padding:10px 16px;border-radius:12px;background:var(--navy-soft);border:1px solid var(--line-2);font-size:.74rem;color:var(--muted)}
.about-chip b{font-family:var(--display);font-weight:800;font-size:.98rem;color:var(--navy);letter-spacing:-.01em}
[data-theme="dark"] .about-chip{background:var(--panel)}

/* Infinito Misión/Visión/Compromiso */
.mvc-art{display:flex;justify-content:center;margin:8px auto 4px;max-width:720px}
.ilus-infinito{width:100%;max-width:620px;height:auto}
.mvc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:920px;margin:6px auto 0;text-align:center}
.mvc-item h3{font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--navy);margin-bottom:8px}
.mvc-item p{color:var(--muted);font-size:.92rem;line-height:1.55;max-width:300px;margin:0 auto}
@media(prefers-reduced-motion:reduce){.ilus-edificio{animation:none}}
@media(max-width:820px){.mvc-grid{grid-template-columns:1fr;gap:22px}.mvc-art{max-width:440px}}

/* ============================================================
   HERO SLIDE 2 — ERP multicapa 3D isométrico flotante
   ============================================================ */
.erp-iso{display:grid;place-items:center}
.iso3d{width:100%;height:100%;max-width:460px;overflow:visible}

/* La pila de capas late sutilmente como un todo */
.iso-stack{transform-origin:230px 320px;animation:isoStackPulse 7s ease-in-out infinite}
@keyframes isoStackPulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.012)}}

/* Cada capa de la pila flota con su propio desfase (efecto "exploded layers") */
.iso-layer{animation:isoLayer 6s ease-in-out infinite}
.iso-l1{animation-delay:0s}
.iso-l2{animation-delay:.5s}
.iso-l3{animation-delay:1s}
@keyframes isoLayer{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Línea-espina conectora con guiones en movimiento */
.iso-spine{animation:isoSpine 2.2s linear infinite}
@keyframes isoSpine{to{stroke-dashoffset:-16}}

/* barras del mini-dashboard parpadean de altura */
.iso-bars{animation:isoBars 4s ease-in-out infinite;transform-origin:240px 264px}
@keyframes isoBars{0%,100%{opacity:.9}50%{opacity:1}}

/* Componentes flotantes — cada uno con ritmo y amplitud propios para
   que el conjunto se sienta vivo y permanentemente en movimiento suave */
.iso-float{animation:isoFloatA 5.5s ease-in-out infinite}
.iso-f0{animation:isoFloatTag 4.5s ease-in-out infinite}
.iso-f1{animation:isoFloatA 6s ease-in-out infinite}
.iso-f2{animation:isoFloatB 5s ease-in-out infinite .4s}
.iso-f3{animation:isoFloatB 6.5s ease-in-out infinite .8s}
.iso-f4{animation:isoFloatA 5.8s ease-in-out infinite .2s}
@keyframes isoFloatA{0%,100%{transform:translate(0,0)}50%{transform:translate(-3px,-9px)}}
@keyframes isoFloatB{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-8px)}}
@keyframes isoFloatTag{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

@media(prefers-reduced-motion:reduce){
  .iso-stack,.iso-layer,.iso-spine,.iso-bars,.iso-float,.iso-f0,.iso-f1,.iso-f2,.iso-f3,.iso-f4{animation:none}
}

/* ============================================================
   ICONOS DE RUBRO — line-art grande con animación "morse"
   (trazo punteado que fluye continuamente; se completa al hover)
   ============================================================ */
/* contenedor con icono lineal más grande */
.ico-line{color:var(--acc)}
.ico-svg .ico-orbit{stroke:var(--ico-a,currentColor);stroke-width:.72;stroke-dasharray:1.3 2.1;opacity:.46;fill:none}
.ico-svg .ico-accent-dot{fill:var(--ico-a,currentColor);stroke:none;opacity:.92}
.card .ico-line svg, .rm-ico.ico-line svg{width:auto;height:auto}
#rubros .card .ico-line{width:68px;height:68px;border-radius:20px}
#rubros .ico-line{--ico-a:#0bb6c4;--ico-b:#1768ad;position:relative;isolation:isolate;overflow:hidden;color:var(--ico-b);background:linear-gradient(145deg,#fbfdff 0%,#eaf4fa 100%);border:1px solid rgba(31,93,145,.16);box-shadow:0 10px 24px rgba(3,57,104,.10),inset 0 1px 0 #fff;transition:.35s cubic-bezier(.2,.7,.3,1)}
#rubros .ico-line::before{content:"";position:absolute;z-index:-1;width:42px;height:42px;right:-16px;bottom:-18px;border-radius:50%;background:radial-gradient(circle,var(--ico-a),transparent 68%);opacity:.2}
#rubros .ico-line::after{content:"";position:absolute;z-index:0;left:9px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--ico-a);box-shadow:0 0 0 4px rgba(11,182,196,.09)}
#rubros .ico-line svg{position:relative;z-index:1;filter:drop-shadow(0 3px 7px rgba(0,63,126,.09))}
#rubros .ico-line .ico-orbit{stroke:var(--ico-a);stroke-width:.72;stroke-dasharray:1.3 2.1;opacity:.46;fill:none}
#rubros .ico-line .ico-accent-dot{fill:var(--ico-a);stroke:none;opacity:.95}
#rubros .grid-4 .card:nth-child(4n+2),#rubros .rubro-mini:nth-child(4n+2){--ico-a:#38a7df;--ico-b:#164f9a}
#rubros .grid-4 .card:nth-child(4n+3),#rubros .rubro-mini:nth-child(4n+3){--ico-a:#18b89c;--ico-b:#075f87}
#rubros .grid-4 .card:nth-child(4n+4),#rubros .rubro-mini:nth-child(4n+4){--ico-a:#5b8def;--ico-b:#153f86}
.rm-ico.ico-line{width:54px;height:54px;border-radius:16px;flex:none}

/* Trazo "morse": dash que recorre el contorno SOLO al hover (quieto en reposo) */
.ico-morse{overflow:visible}
.ico-morse .ico-glyph path,
.ico-morse .ico-glyph circle,
.ico-morse .ico-glyph rect,
.ico-morse .ico-glyph line,
.ico-morse .ico-glyph polyline,
.ico-morse .ico-glyph polygon{
  stroke-dasharray:none;
  transition:stroke-width .3s;
}
@keyframes icoMorse{to{stroke-dashoffset:-18}}

/* INTERACTIVO: al pasar el cursor el trazo fluye (morse) y luego al
   completarse el hover el trazo se asienta más grueso */
.card:hover .ico-morse .ico-glyph path,
.card:hover .ico-morse .ico-glyph circle,
.card:hover .ico-morse .ico-glyph rect,
.card:hover .ico-morse .ico-glyph line,
.card:hover .ico-morse .ico-glyph polyline,
.card:hover .ico-morse .ico-glyph polygon,
.rubro-mini:hover .ico-morse .ico-glyph path,
.rubro-mini:hover .ico-morse .ico-glyph circle,
.rubro-mini:hover .ico-morse .ico-glyph rect,
.rubro-mini:hover .ico-morse .ico-glyph line,
.rubro-mini:hover .ico-morse .ico-glyph polyline,
.rubro-mini:hover .ico-morse .ico-glyph polygon{
  stroke-dasharray:5 4;
  animation:icoMorse 1.8s linear infinite;
  stroke-width:2;
}
/* desfases al hover para sub-trazos */
.card:hover .ico-morse :nth-child(2),
.rubro-mini:hover .ico-morse :nth-child(2){animation-delay:.12s}
.card:hover .ico-morse :nth-child(3),
.rubro-mini:hover .ico-morse :nth-child(3){animation-delay:.24s}
.card:hover .ico-morse :nth-child(4),
.rubro-mini:hover .ico-morse :nth-child(4){animation-delay:.36s}

#rubros .card:hover .ico-line{transform:translateY(-4px);border-color:var(--acc);box-shadow:0 12px 28px rgba(11,182,196,.28);background:linear-gradient(135deg,var(--navy),var(--acc));color:#fff}
#rubros .card:hover .ico-line svg{stroke:#fff;color:#fff}
.rubro-mini:hover .ico-line{background:linear-gradient(135deg,var(--navy),var(--acc));color:#fff;border-color:var(--acc)}
.rubro-mini:hover .ico-line svg{stroke:#fff;color:#fff}

/* ====== Borde "dibujado" del card al pasar el mouse (una vez) ====== */
#rubros .grid-4 .card,#rubros .rubro-mini{position:relative;overflow:hidden}
#rubros .grid-4 .card::after,#rubros .rubro-mini::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:2px solid var(--acc);
  /* el borde está oculto vía clip-path inicialmente; al hover se "dibuja" */
  clip-path:inset(0 100% 100% 0);
  transition:none;
}
#rubros .grid-4 .card:hover::after,#rubros .rubro-mini:hover::after{
  animation:cardDrawBorder 0.9s cubic-bezier(.65,.05,.35,1) forwards;
}
@keyframes cardDrawBorder{
  0%   {clip-path:inset(0 100% 100% 0)}   /* nada visible */
  25%  {clip-path:inset(0 0 100% 0)}      /* línea superior */
  50%  {clip-path:inset(0 0 0 0); clip-path:polygon(0 0,100% 0,100% 100%,100% 100%,100% 100%,100% 100%)}
  100% {clip-path:inset(0)}               /* todo el borde */
}
@media(prefers-reduced-motion:reduce){
  #rubros .grid-4 .card:hover::after,#rubros .rubro-mini:hover::after{animation:none;clip-path:inset(0)}
}

/* en modo oscuro mantener contraste del trazo */
[data-theme="dark"] #rubros .card .ico-line{background:linear-gradient(135deg,rgba(11,182,196,.16),rgba(47,127,240,.16))}

@media(prefers-reduced-motion:reduce){
  .ico-morse path,.ico-morse circle,.ico-morse rect,.ico-morse line,.ico-morse polyline,.ico-morse polygon{animation:none;stroke-dasharray:none}
}

/* ============================================================
   TYPING (h2 que escribe al entrar al viewport)
   ============================================================ */
.is-typing::after,.typed::after{
  content:"";display:inline-block;width:3px;height:1em;background:var(--acc);
  vertical-align:-3px;margin-left:6px;animation:typingBlink 0.9s steps(2) infinite}
.typed::after{animation:typingBlinkFade 2.4s ease-out forwards}
@keyframes typingBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes typingBlinkFade{0%,80%{opacity:1}100%{opacity:0;width:0}}
@media(prefers-reduced-motion:reduce){
  .is-typing::after,.typed::after{display:none}
}

/* ============================================================
   DASHBOARD ampliado (5 KPIs · planilla · continentes · costos)
   ============================================================ */
.dash-mock-bar button.dm-tab{border:none;cursor:pointer;font-family:var(--body)}
.dm-panel{display:none}
.dm-panel.active{display:block}
.dm-kpis-5{grid-template-columns:repeat(5,1fr);gap:8px}
.dm-kpi{transition:transform .25s,border-color .25s,box-shadow .25s;cursor:default}
.dm-kpi:hover{transform:translateY(-3px);border-color:var(--acc);box-shadow:0 10px 22px rgba(11,182,196,.15)}
.dm-k-down{font-size:.74rem;font-weight:700;color:#dc2626}
.dm-spark-m{height:90px}
.dm-pts circle{cursor:pointer;transition:r .2s}
.dm-pts circle:hover{r:4}
.dm-months{margin-top:6px}

/* fila inferior: continentes + costos */
.dm-bottom{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.dm-cont,.dm-costs{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--bg)}
.dm-cont-head{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin-bottom:9px}
.dm-cont-row{display:grid;grid-template-columns:18px 100px 1fr 36px;align-items:center;gap:8px;padding:3px 0}
.dm-cont-flag{font-size:.9rem}
.dm-cont-lbl{font-size:.76rem;color:var(--text)}
.dm-bar-sm{height:5px}
.dm-cont-pct{font-size:.74rem;font-weight:700;color:var(--acc-2);text-align:right}
.dm-costs-bars{display:flex;align-items:flex-end;gap:12px;height:90px;padding:6px 4px 0}
.dm-cost-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.dm-cost-bar{width:100%;background:linear-gradient(180deg,var(--acc),var(--acc-2));border-radius:6px 6px 0 0;position:relative;min-height:18%;transition:filter .25s;display:flex;align-items:flex-start;justify-content:center}
.dm-cost-bar:hover{filter:brightness(1.12)}
.dm-cost-bar span{font-size:.6rem;color:#fff;font-weight:700;padding:3px;font-family:var(--mono)}
.dm-cost-bar-2{background:linear-gradient(180deg,#f59e0b,#fb923c)}
.dm-cost-bar-3{background:linear-gradient(180deg,#16a34a,#22c55e)}
.dm-cost-lbl{font-size:.66rem;color:var(--muted);font-weight:600}

/* Panel IA / RRHH */
.dm-panel-ia{padding:18px}
.dm-ia-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:12px;gap:14px;flex-wrap:wrap}
.dm-ia-title b{font-family:var(--display);font-weight:800;font-size:1.1rem;color:var(--navy);display:block}
.dm-ia-tag{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--acc)}
.dm-ia-curr{display:flex;gap:4px;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;padding:3px}
.dm-curr{background:transparent;border:none;cursor:pointer;padding:5px 11px;border-radius:7px;font-size:.74rem;font-weight:700;color:var(--dim);transition:.2s;font-family:var(--body)}
.dm-curr.active{background:var(--navy);color:#fff}
.dm-pay{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg);margin:12px 0}
.dm-pay-head,.dm-pay-row{display:grid;grid-template-columns:1.3fr 1.1fr 1fr .9fr .85fr;align-items:center;gap:8px;padding:9px 13px;font-size:.78rem}
.dm-pay-head{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);background:var(--bg-2);border-bottom:1px solid var(--line)}
.dm-pay-row+.dm-pay-row{border-top:1px solid var(--line)}
.dm-pay-row:nth-child(odd){background:var(--bg)}
.dm-pay-row:nth-child(even){background:var(--bg-2)}
.dm-pay-row .dm-pay-c1{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--text)}
.dm-pay-c4{font-family:var(--mono);font-weight:700;color:var(--navy)}
.dm-ava{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--acc-2),var(--acc));color:#fff;font-size:.66rem;font-weight:800;display:grid;place-items:center;font-family:var(--mono);flex:none}
.dm-pill{font-size:.66rem;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap}
.dm-pill-ok{background:rgba(22,163,74,.14);color:#16a34a}
.dm-pill-wait{background:rgba(245,158,11,.14);color:#d97706}
.dm-pill-liq{background:rgba(220,38,38,.14);color:#dc2626}
.dm-ia-foot{font-size:.78rem;color:var(--muted);padding-top:4px;border-top:1px dashed var(--line);margin-top:6px;padding-top:10px}
[data-theme="dark"] .dm-pay-c4,[data-theme="dark"] .dm-ia-title b{color:#fff}

@media(max-width:980px){
  .dm-kpis-5{grid-template-columns:repeat(2,1fr)}
  .dm-bottom{grid-template-columns:1fr}
  .dm-pay-head,.dm-pay-row{grid-template-columns:1.3fr 1fr .85fr .85fr;font-size:.72rem}
  .dm-pay-c3{display:none}
}
@media(max-width:560px){
  .dm-pay-head,.dm-pay-row{grid-template-columns:1.3fr .85fr .85fr}
  .dm-pay-c2{display:none}
}

/* ============================================================
   FEATURE CARDS de rubro — line-art grande + fondo decorativo
   en esquina que reacciona al hover + borde dibujándose
   ============================================================ */
.grid-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.grid-feats{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid-feats{grid-template-columns:1fr}}

.feat-fancy{position:relative;overflow:hidden;padding:28px 26px;border-radius:18px;background:var(--panel);border:1px solid var(--line);transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s}
.feat-fancy:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(11,40,99,.15);border-color:transparent}
[data-theme="dark"] .feat-fancy:hover{box-shadow:0 18px 38px rgba(0,0,0,.5)}

/* fondo decorativo en esquina superior derecha */
.feat-corner-bg{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.85}
.feat-corner-bg svg{position:absolute;top:-30px;right:-30px;width:160px;height:160px;transition:transform .8s cubic-bezier(.2,.7,.3,1),opacity .4s}
.feat-fancy:hover .feat-corner-bg svg{transform:scale(1.4) rotate(28deg);opacity:1}
.feat-corner-bg svg circle[stroke]{animation:fcgSpin 22s linear infinite}
.feat-fancy:hover .feat-corner-bg svg circle[stroke]{animation-duration:6s}
@keyframes fcgSpin{to{transform:rotate(360deg);transform-origin:108px 14px}}

/* icono grande line-art con anillo cónico animado, "halo" interno y dot pulsante */
.fc-ico-lg{position:relative;z-index:1;width:78px;height:78px;border-radius:22px;
  background:
    radial-gradient(120% 120% at 30% 20%,rgba(255,255,255,.55),rgba(255,255,255,0) 60%),
    linear-gradient(135deg,rgba(11,182,196,.10),rgba(47,127,240,.10));
  border:1px solid var(--line);display:grid;place-items:center;color:var(--acc);
  margin-bottom:18px;transition:.45s cubic-bezier(.2,.7,.3,1.1);overflow:hidden;isolation:isolate}
/* anillo cónico (gradiente que gira) — visible solo en hover */
.fc-ico-lg::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.4px;
  background:conic-gradient(from 0deg,
    var(--acc) 0deg,var(--acc-2) 90deg,
    transparent 140deg,transparent 230deg,
    var(--acc) 320deg,var(--acc) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s ease;
  animation:fcSpin 4s linear infinite;
}
.feat-fancy:hover .fc-ico-lg::before{opacity:1}
@keyframes fcSpin{to{transform:rotate(360deg)}}
/* sparkle: punto turquesa que aparece en la esquina */
.fc-ico-lg::after{
  content:"";position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 8px var(--acc);
  opacity:0;transform:scale(.4);transition:.35s;
}
.feat-fancy:hover .fc-ico-lg::after{opacity:1;transform:scale(1);animation:fcSparkle 2.2s ease-in-out infinite .35s}
@keyframes fcSparkle{0%,100%{opacity:.6;transform:scale(.85)}50%{opacity:1;transform:scale(1.25)}}
.fc-ico-lg svg{width:40px;height:40px;transition:transform .55s cubic-bezier(.2,.7,.3,1.2),stroke .35s;stroke-width:1.6}
.fc-ico-lg svg path,.fc-ico-lg svg circle,.fc-ico-lg svg rect,.fc-ico-lg svg polyline,.fc-ico-lg svg line,.fc-ico-lg svg polygon{transition:stroke-dashoffset .9s cubic-bezier(.2,.7,.3,1.1)}
.feat-fancy:hover .fc-ico-lg{background:linear-gradient(135deg,var(--navy),var(--acc));border-color:transparent;box-shadow:0 14px 32px rgba(11,182,196,.32),0 0 0 1px var(--acc) inset;color:#fff;transform:scale(1.04)}
.feat-fancy:hover .fc-ico-lg svg{stroke:#fff;color:#fff;transform:scale(1.10) rotate(-3deg)}
@media(prefers-reduced-motion:reduce){
  .fc-ico-lg::before{animation:none}
  .feat-fancy:hover .fc-ico-lg::after{animation:none}
  .feat-fancy:hover .fc-ico-lg{transform:none}
  .feat-fancy:hover .fc-ico-lg svg{transform:none}
}

/* texto sobre la decoración */
.feat-fancy h3,.feat-fancy p{position:relative;z-index:1}
.feat-fancy h3{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--navy);margin-bottom:8px}
.feat-fancy p{color:var(--muted);font-size:.92rem;line-height:1.55}
[data-theme="dark"] .feat-fancy h3{color:#fff}

/* Borde turquesa "dibujándose" al hover (igual técnica que en cards de rubro) */
.feat-fancy::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:2px solid var(--acc);
  clip-path:inset(0 100% 100% 0);
}
.feat-fancy:hover::after{
  animation:cardDrawBorder 0.9s cubic-bezier(.65,.05,.35,1) forwards;
}
@media(prefers-reduced-motion:reduce){
  .feat-fancy:hover::after{animation:none;clip-path:inset(0)}
  .feat-corner-bg svg{animation:none}
  .feat-fancy:hover .feat-corner-bg svg{transform:none}
}

/* Dark mode: header recupera estilo oscuro */
[data-theme="dark"] header{background:rgba(15,24,38,.92)!important;border-bottom-color:rgba(255,255,255,.08)}
[data-theme="dark"] header .logo{color:#fff}
[data-theme="dark"] header .logo .mark{color:#fff}
[data-theme="dark"] header .logo b{color:var(--acc)}
[data-theme="dark"] header .nav-links a{color:rgba(255,255,255,.82)}
[data-theme="dark"] header .nav-links a:hover,[data-theme="dark"] header .nav-links a.active{color:#fff;background:rgba(255,255,255,.12)}
[data-theme="dark"] header .nav-search-btn{border-color:rgba(255,255,255,.25);color:#fff}
[data-theme="dark"] header .nav-search-btn:hover{background:#fff;color:#0a1018}
[data-theme="dark"] header .country-btn{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff}
[data-theme="dark"] header .country-btn .chev{color:rgba(255,255,255,.7)}
[data-theme="dark"] header .burger span{background:#fff}
/* En oscuro el mismo botón fallaba YA EN REPOSO: `color:var(--navy)` se
   escribió pensando en el #002863 del tema claro, pero en oscuro --navy se
   redefine a #3d8bff (azul claro) y quedaba azul claro sobre turquesa claro,
   1.76:1. Se fija una tinta oscura literal, que es la que funciona sobre los
   dos turquesas. 8.94:1 en reposo y 11.34:1 en hover. */
[data-theme="dark"] .nav-cta{background:var(--acc)!important;color:#03202b!important;box-shadow:0 6px 18px rgba(11,182,196,.35)}
[data-theme="dark"] .nav-cta:hover{background:#7fe3ee!important;color:#03202b!important}
/* ── Selector de idioma (nuevo elemento en header) ── */
.lang-pick-header{position:relative;margin-left:6px}
.lang-trigger{display:flex;align-items:center;gap:6px;cursor:pointer;padding:7px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);color:var(--navy);font-weight:700;font-size:.82rem;transition:.2s;font-family:var(--body);-webkit-tap-highlight-color:transparent}
.lang-trigger:hover{border-color:var(--acc);background:var(--navy-soft)}
.lang-trigger[aria-expanded="true"]{border-color:var(--acc);background:var(--navy-soft)}
.lang-flag{font-size:1rem;line-height:1}
.lang-cur{font-family:var(--mono);font-size:.75rem;letter-spacing:.05em}
.lang-chev{width:14px;height:14px;transition:transform .25s;flex:none;opacity:.7}
.lang-trigger[aria-expanded="true"] .lang-chev{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:170px;background:var(--panel);border:1px solid var(--line-2);border-radius:14px;padding:6px;box-shadow:0 16px 40px rgba(0,20,60,.15);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transition:.22s cubic-bezier(.25,.8,.25,1);z-index:200}
.lang-menu.open{opacity:1;visibility:visible;transform:none}
.lang-menu .lang-opt{display:flex;align-items:center;gap:10px;width:100%;padding:10px 13px;border-radius:9px;border:none;background:transparent;cursor:pointer;text-align:left;font-family:var(--body);font-size:.9rem;font-weight:600;color:var(--text);transition:.15s}
.lang-menu .lang-opt:hover{background:var(--navy-soft);color:var(--navy)}
.lang-menu .lang-opt.active{background:linear-gradient(135deg,rgba(0,40,99,.07),rgba(11,182,196,.07));color:var(--navy);outline:1px solid rgba(11,182,196,.3)}
.lo-flag{font-size:1.2rem;flex:none}
.lo-name{flex:1;font-weight:600}
.lo-code{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--dim);flex:none}
[data-theme="dark"] .lang-trigger{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff}
[data-theme="dark"] .lang-trigger:hover{border-color:var(--acc);background:rgba(11,182,196,.15)}
[data-theme="dark"] .lang-menu{background:var(--panel);border-color:var(--line-2)}
[data-theme="dark"] .lang-menu .lang-opt{color:var(--text)}
[data-theme="dark"] .lang-menu .lang-opt:hover{background:rgba(255,255,255,.08);color:#fff}
[data-theme="dark"] .lang-menu .lang-opt.active{color:var(--acc)}
/* Footer lang (simple pills) */
.lang-pick{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.lang-pick .lang-lbl{font-size:.78rem;color:var(--dim);font-family:var(--mono)}
.lang-pick .lang-opt{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:8px;border:1px solid var(--line);background:var(--bg);font-size:.8rem;font-weight:700;cursor:pointer;transition:.2s;color:var(--muted);font-family:var(--body)}
.lang-pick .lang-opt:hover{border-color:var(--acc);color:var(--navy)}
.lang-pick .lang-opt.active{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ── Flash alerts ── */
.alert{padding:13px 18px;border-radius:12px;font-size:.9rem;font-weight:600;margin:0 0 12px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 16px rgba(0,0,0,.1);cursor:pointer}
.alert.ok{background:#e6f9f1;color:#0a7d52;border:1px solid #b6ebd4}
.alert.err{background:#fff0f0;color:#c0392b;border:1px solid #f5c6c6}

/* ── Logo dual PNG/SVG ── */
.logo{display:flex;align-items:center;text-decoration:none}
.logo-img-wrap{display:flex;align-items:center;height:36px}
.logo-img{height:34px;width:auto;display:block;object-fit:contain}
.logo-svg-inline{align-items:center}
.logo-svg-inline .logo-svg-wrap{font-size:1.34rem}
.logo-img-light{display:block}
.logo-img-light.logo-svg-inline{display:flex}
.logo-img-dark{display:none}
[data-theme="dark"] .logo-img-light{display:none}
[data-theme="dark"] .logo-img-dark{display:block}
[data-theme="dark"] .logo-img-dark.logo-svg-inline{display:flex}
.logo-svg-wrap{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:800;font-size:1.34rem;letter-spacing:-.01em;color:var(--navy)}
.logo-svg-wrap .mark{width:32px;height:32px;flex:none;color:var(--navy);display:flex;align-items:center}
.logo-svg-wrap .mark svg{width:100%;height:100%;display:block}
.logo-svg-wrap .logo-wordmark{color:var(--navy)}
.logo-svg-wrap .logo-wordmark b{color:var(--acc);font-weight:800}
[data-theme="dark"] .logo-svg-wrap,[data-theme="dark"] .logo-svg-wrap .mark,[data-theme="dark"] .logo-svg-wrap .logo-wordmark{color:#fff}
[data-theme="dark"] .logo-svg-wrap .logo-wordmark b{color:var(--acc)}

/* ===== FAQ (preguntas frecuentes — rubro y rubro×país) ===== */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden;transition:border-color .18s,box-shadow .18s}
.faq-item[open]{border-color:var(--acc);box-shadow:0 8px 24px rgba(11,182,196,.10)}
.faq-item>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;padding:18px 20px;font-weight:700;color:var(--navy);font-size:1.02rem;line-height:1.4}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.faq-item .faq-q{flex:1}
.faq-item .faq-ico{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:rgba(11,182,196,.12);color:var(--acc);font-size:1.25rem;font-weight:600;transition:transform .2s}
.faq-item[open] .faq-ico{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 20px 18px;color:var(--muted);line-height:1.75}
.faq-item .faq-a p{margin:0}
[data-theme="dark"] .faq-item .faq-q{color:#eef3fb}
@media(prefers-reduced-motion:reduce){.faq-item,.faq-item .faq-ico{transition:none}}

/* Logo animado en el footer: un poco más grande que en el header */
.foot-logo .adia-logo-anim{height:40px}
.foot-logo{margin-bottom:16px}

/* Flor ERP modular (slide 1 del hero) — canvas interactivo */
.erp-flower-wrap{display:grid;place-items:center;width:100%;height:100%}
.erp-flower-canvas{display:block;margin:0 auto;max-width:100%;height:auto}

/* Modal "¿Cambiar a esta localidad?" (enlaces de país del mapa) */
.locale-modal{position:fixed;inset:0;background:rgba(3,16,38,.55);backdrop-filter:blur(3px);display:none;place-items:center;z-index:10000;padding:20px}
.locale-modal.open{display:grid}
.lm-box{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:20px;max-width:430px;width:100%;padding:32px 28px 28px;text-align:center;box-shadow:0 30px 80px rgba(3,16,38,.45);animation:lmIn .25s ease-out}
@keyframes lmIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.lm-flag{display:inline-block;width:54px;height:36px;border-radius:7px;overflow:hidden;box-shadow:0 5px 14px rgba(0,0,0,.2);margin-bottom:14px;vertical-align:middle}
.lm-flag .flag-svg{width:54px;height:36px;display:block}
.lm-box h3{font-family:var(--display);font-weight:800;font-size:1.32rem;color:var(--navy);margin:0 0 10px}
.lm-box p{color:var(--muted);font-size:.95rem;line-height:1.55;margin:0 0 22px}
.lm-actions{display:flex;flex-direction:column;gap:10px}
.lm-btn{width:100%;padding:13px 18px;border-radius:12px;font-weight:700;font-size:.95rem;cursor:pointer;border:1px solid transparent;font-family:inherit;transition:.18s}
.lm-yes{background:linear-gradient(120deg,var(--acc),var(--acc-2));color:#fff}
.lm-yes:hover{filter:brightness(1.06);transform:translateY(-1px)}
.lm-no{background:transparent;color:var(--muted);border:1px solid var(--line)}
.lm-no:hover{background:var(--bg);color:var(--navy)}
.lm-x{position:absolute;top:12px;right:14px;background:none;border:none;font-size:1.05rem;color:var(--muted);cursor:pointer;line-height:1}

/* ===== Flechas del slider en los laterales del hero (no chocan con CTAs ni puntos) ===== */
.hero-arrow-side{position:absolute;top:50%;transform:translateY(-50%);z-index:7;width:46px;height:46px;background:rgba(8,20,48,.5);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.45);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.28)}
.hero-arrow-side:hover{transform:translateY(-50%) scale(1.08);background:#5fe0ea;color:#03102a;border-color:#5fe0ea}
.hero-arrow-prev{left:18px}
.hero-arrow-next{right:18px}
@media(max-width:980px){.hero-arrow-side{width:40px;height:40px}.hero-arrow-prev{left:8px}.hero-arrow-next{right:8px}}
@media(max-width:620px){.hero-arrow-side{width:34px;height:34px}.hero-arrow-prev{left:4px}.hero-arrow-next{right:4px}}

/* ===== Botón pausar/reanudar del slider del hero ===== */
.hero-play{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.07);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;transition:.2s;-webkit-tap-highlight-color:transparent}
.hero-play:hover{background:#5fe0ea;color:#03102a;border-color:#5fe0ea;transform:scale(1.06)}
.hero-play svg{width:16px;height:16px}
.hero-play .ic-play{display:none}
.hero-play.is-paused{background:#5fe0ea;color:#03102a;border-color:#5fe0ea}
.hero-play.is-paused .ic-pause{display:none}
.hero-play.is-paused .ic-play{display:block}

/* ===== Hero compacto para páginas legales (franja azul corta: solo el título) ===== */
.page-hero-compact{padding:38px 0 30px}
.page-hero-compact .legal-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:12px;position:relative}
.page-hero-compact .legal-meta span{color:rgba(255,255,255,.72);font-size:.85rem}
.page-hero-compact .legal-meta strong{color:#fff;font-weight:700}

/* ===== Barra de sugerencia por país (geolocalización, pie de página) ===== */
.geo-bar{position:fixed;left:18px;bottom:18px;z-index:280;display:flex;align-items:center;gap:10px;
  max-width:min(600px,calc(100vw - 120px));padding:10px 14px;border-radius:16px;
  background:var(--panel);border:1px solid var(--line-2);box-shadow:var(--shadow);
  font-size:.88rem;color:var(--text);animation:gbUp .45s cubic-bezier(.2,.8,.3,1) both}
@keyframes gbUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.geo-bar .gb-flag{display:inline-flex;flex:0 0 auto}
.geo-bar .gb-flag .flag-svg{display:inline-flex;width:26px;border-radius:4px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.geo-bar .gb-flag .flag-svg svg{width:26px;height:auto;display:block}
.geo-bar .gb-txt{line-height:1.35}
.geo-bar .gb-txt b{color:var(--navy);font-weight:800}
.geo-bar .gb-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.geo-bar button{font:inherit;font-size:.82rem;border-radius:10px;cursor:pointer;padding:7px 12px;border:1px solid transparent;white-space:nowrap}
.geo-bar .gb-yes{background:var(--acc);color:#02252b;font-weight:800;border-color:var(--acc)}
.geo-bar .gb-yes:hover{filter:brightness(1.07)}
.geo-bar .gb-no{background:transparent;color:var(--muted);border-color:var(--line-2)}
.geo-bar .gb-no:hover{color:var(--text);border-color:var(--muted)}
.geo-bar .gb-x{background:transparent;color:var(--dim);padding:6px 8px;font-size:.85rem}
.geo-bar .gb-x:hover{color:var(--text)}
[data-theme="dark"] .geo-bar{background:rgba(19,30,44,.96);backdrop-filter:blur(8px)}
@media (max-width:640px){
  .geo-bar{left:10px;right:86px;bottom:12px;max-width:none;flex-wrap:wrap;gap:8px;padding:10px 12px}
  .geo-bar .gb-actions{width:100%;justify-content:flex-end}
}

/* ===== Modal de intención de salida ("no te vayas todavía") ===== */
.exit-modal{position:fixed;inset:0;background:rgba(3,16,38,.55);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:9000;padding:20px;opacity:0;transition:opacity .25s}
.exit-modal.open{opacity:1}
.exit-modal .em-box{position:relative;max-width:460px;width:100%;background:var(--panel);border:1px solid var(--line-2);border-radius:20px;padding:30px 28px 26px;text-align:center;box-shadow:var(--shadow);transform:translateY(14px) scale(.97);transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.exit-modal.open .em-box{transform:none}
.exit-modal .em-ico{font-size:2.4rem;display:block;margin-bottom:8px}
.exit-modal h3{font-family:var(--display);color:var(--navy);font-size:1.35rem;margin-bottom:10px}
.exit-modal p{color:var(--muted);font-size:.93rem;line-height:1.6;margin-bottom:18px}
.exit-modal p b{color:var(--navy)}
.exit-modal .em-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.exit-modal .em-x{position:absolute;top:12px;right:14px;background:transparent;border:0;color:var(--dim);font-size:1rem;cursor:pointer;padding:6px}
.exit-modal .em-x:hover{color:var(--text)}
.exit-modal.compact{inset:auto 18px 86px auto;width:min(360px,calc(100vw - 28px));padding:0;background:transparent;backdrop-filter:none;opacity:1;display:block}
.exit-modal.compact .em-box{max-width:none;padding:18px 18px 16px;text-align:left;border-radius:17px;box-shadow:0 18px 46px rgba(2,27,64,.22);transform:none}
.exit-modal.compact .of-tag{margin-bottom:7px}
.exit-modal.compact .em-ico,.exit-modal.compact .of-box>p,.exit-modal.compact .of-sello,.exit-modal.compact .of-cuenta,.exit-modal.compact .of-tyc,.exit-modal.compact .btn-ghost{display:none!important}
.exit-modal.compact h3{font-size:1rem;margin:0 34px 10px 0;line-height:1.3}
.exit-modal.compact .em-actions{justify-content:flex-start}
.exit-modal.compact .btn-primary{padding:9px 14px;font-size:.78rem;animation:none}
@media(max-width:640px){.exit-modal.compact{left:12px;right:12px;bottom:82px;width:auto}.exit-modal.compact .em-box{padding:15px 16px 14px}}

/* ===== Toast "bienvenido de vuelta" (esquina, se va solo) ===== */
.wb-toast{position:fixed;top:84px;right:18px;z-index:8000;display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line-2);border-left:4px solid var(--acc);border-radius:14px;padding:12px 18px 12px 14px;box-shadow:var(--shadow);opacity:0;transform:translateX(24px);transition:opacity .4s,transform .4s cubic-bezier(.2,.8,.3,1)}
.wb-toast.show{opacity:1;transform:none}
.wb-toast .wb-ico{font-size:1.5rem}
.wb-toast b{display:block;color:var(--navy);font-size:.95rem}
.wb-toast small{color:var(--muted);font-size:.8rem}
@media (max-width:640px){ .wb-toast{top:auto;bottom:96px;left:12px;right:12px;transform:translateY(16px)} .wb-toast.show{transform:none} }

/* Solicitudes disponibles únicamente después de crear o iniciar una cuenta. */
.request-auth-gate{display:grid;place-items:center;text-align:center;min-height:420px;padding:34px 26px}
.request-auth-gate .rag-icon{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;margin-bottom:18px;color:#fff;background:linear-gradient(135deg,var(--navy),var(--acc));box-shadow:0 14px 32px rgba(0,55,115,.2)}
.request-auth-gate .rag-icon svg{width:30px;height:30px}
.request-auth-gate h3{font-family:var(--display);font-size:1.45rem;color:var(--navy);margin-bottom:9px}
.request-auth-gate p{max-width:390px;color:var(--muted);line-height:1.6;margin-bottom:22px}
.request-auth-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}

/* ===== Precio referencial en moneda local (bajo el precio USD) ===== */
.p-ref{margin-top:6px;font-size:.78rem;color:var(--dim)}

/* ===== Medios de pago en el footer (referencial) ===== */
.pay-refs{display:flex;flex-direction:column;align-items:center;gap:8px;margin:26px 0 6px;padding:16px 0;border-top:1px solid var(--line)}
.pay-refs .pr-lbl{font-size:.82rem;color:var(--muted)}
.pay-refs .pr-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pay-refs .pr-chip{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;color:var(--muted);background:var(--bg-2);border:1px solid var(--line);border-radius:9px;padding:5px 11px;white-space:nowrap}
.pay-refs .pr-note{font-size:.72rem;color:var(--dim)}
[data-theme="dark"] .pay-refs .pr-chip{background:var(--panel)}
footer .pay-refs .pr-lbl,footer .pay-refs .pr-chip{color:var(--muted)}
/* logos de pago fieles a la marca (SVG/estilos inline, sin imágenes) */
.pr-chip svg{display:block;flex:0 0 auto}
.pp-visa{color:#1A1F71;font-weight:900;font-style:italic;letter-spacing:.5px;font-family:Arial,Helvetica,sans-serif;font-size:.92rem}
[data-theme="dark"] .pp-visa{color:#7f9bff}
.pp-mc{width:28px;height:17px}
.pp-mcname{font-weight:600;color:var(--text);text-transform:lowercase;letter-spacing:.2px}
.pp-amex{background:#2E77BC;color:#fff;font-weight:900;font-size:.66rem;letter-spacing:.8px;border-radius:3px;padding:3px 6px;font-family:Arial,Helvetica,sans-serif;font-style:italic}
.pp-pp{width:14px;height:17px;margin-right:2px}
.pp-pay{color:#003087;font-weight:900;font-style:italic;font-size:.9rem}
.pp-pal{color:#009CDE;font-weight:900;font-style:italic;font-size:.9rem}
[data-theme="dark"] .pp-pay{color:#7f9bff}
.pp-wu{background:#000;color:#FFD200;font-weight:900;font-style:italic;border-radius:4px;padding:2px 6px;font-size:.7rem;font-family:Arial,Helvetica,sans-serif;letter-spacing:.5px}

/* ===== Identidad del país en el hero: hito + cumplimiento =====
   El hito va al DOBLE de tamaño y sobresale por encima del pill
   (márgenes negativos), sin agrandar la franja. */
.pais-hero{display:inline-flex;align-items:center;gap:14px;margin-top:26px;padding:10px 18px 10px 14px;border-radius:16px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(4px);
  color:rgba(255,255,255,.85);font-size:.84rem;animation:phIn .6s ease both}
@keyframes phIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pais-hero .ph-land{color:var(--acc);flex:0 0 auto;display:inline-flex;margin:-26px 0 -6px;
  filter:drop-shadow(0 0 10px rgba(11,182,196,.45))}
.pais-hero .ph-land svg{width:94px;height:63px;display:block}
.pais-hero .ph-txt b{color:#fff;font-weight:800}
@media (max-width:640px){
  .pais-hero{gap:10px;padding:7px 12px;font-size:.72rem;margin-top:18px}
  .pais-hero .ph-land{margin:-16px 0 -4px}
  .pais-hero .ph-land svg{width:62px;height:41px}
}

/* ===== Planes /precios responsive (antes se apretaban en columnas) ===== */
@media (max-width:1000px){
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans > .plan:last-child:nth-child(3){grid-column:1/-1;max-width:460px;width:100%;margin:0 auto}
}
@media (max-width:720px){
  .plans,.plans.plans-2{grid-template-columns:1fr;max-width:470px;margin-left:auto;margin-right:auto}
  .plans > .plan:last-child:nth-child(3){max-width:none}
}

/* ===== Insignia de fiestas (Navidad / Fiestas Patrias) ===== */
.fiesta-badge{position:absolute;top:86px;left:50%;transform:translateX(-50%);z-index:5;
  display:inline-flex;align-items:center;gap:7px;padding:9px 20px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(90deg,#d4380d,#c41d7f 55%,#722ed1);color:#fff;font-size:.9rem;
  box-shadow:0 8px 26px rgba(160,20,80,.45);animation:fiestaIn .7s cubic-bezier(.2,.8,.3,1) both, fiestaGlow 2.4s ease-in-out 1s infinite}
.fiesta-badge b{font-weight:800;letter-spacing:.3px}
@keyframes fiestaIn{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes fiestaGlow{0%,100%{box-shadow:0 8px 26px rgba(160,20,80,.45)}50%{box-shadow:0 8px 34px rgba(220,60,120,.75)}}
@media (max-width:640px){ .fiesta-badge{top:76px;font-size:.78rem;padding:7px 14px;max-width:92vw;white-space:normal;text-align:center} }

/* ===== Exit-intent: más vivo + autocierre visible ===== */
.exit-modal .em-ico.em-bounce{animation:emBounce 1.4s ease infinite}
@keyframes emBounce{0%,100%{transform:translateY(0)}45%{transform:translateY(-9px) rotate(-6deg)}60%{transform:translateY(0)}}
.exit-modal .em-stars{display:block;font-size:.85rem;letter-spacing:3px;margin-bottom:6px;animation:emStars 1.8s ease-in-out infinite}
@keyframes emStars{0%,100%{opacity:.75}50%{opacity:1;transform:scale(1.06)}}
.exit-modal .em-pulse{animation:emPulse 1.7s ease-in-out infinite}
@keyframes emPulse{0%,100%{box-shadow:0 0 0 0 rgba(11,182,196,.55)}55%{box-shadow:0 0 0 12px rgba(11,182,196,0)}}
.exit-modal .em-bar{height:4px;border-radius:4px;background:var(--line);margin-top:18px;overflow:hidden}
.exit-modal .em-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc-2));animation:emBar 12s linear forwards}
@keyframes emBar{from{width:100%}to{width:0}}

/* ===== Selección masiva de clientes (admin) ===== */
.masivo-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;padding:10px 14px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.masivo-all{display:inline-flex;align-items:center;gap:7px;font-size:.84rem;font-weight:700;color:var(--text);cursor:pointer}
.masivo-all input,.chk-cli{width:17px;height:17px;accent-color:#c0392b;cursor:pointer}
.masivo-cuenta{font-size:.8rem;color:var(--muted)}
.masivo-bar .adm-del:disabled{opacity:.45;cursor:not-allowed}
.plan-nota{display:block;margin-top:6px;font-size:.76rem;color:var(--warm);font-weight:600}

/* ===== Menú del usuario conectado (header) ===== */
.user-pick{position:relative}
.user-trigger{display:inline-flex;align-items:center;gap:7px;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:12px;padding:6px 11px 6px 6px;cursor:pointer;font:inherit;font-size:.86rem;font-weight:700;color:var(--text)}
.user-trigger:hover{border-color:var(--acc)}
.user-ava{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;
  background:linear-gradient(135deg,var(--navy),var(--acc));color:#fff;font-weight:800}
.user-trigger .chev{color:var(--dim);font-size:.7rem}
.user-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:236px;background:var(--panel);
  border:1px solid var(--line-2);border-radius:14px;padding:6px;box-shadow:var(--shadow);z-index:130;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.18s}
.user-menu.open{opacity:1;visibility:visible;transform:none}
.user-menu a{display:block;padding:9px 12px;border-radius:9px;text-decoration:none;color:var(--text);
  font-size:.86rem;font-weight:600;white-space:nowrap}
.user-menu a:hover{background:var(--navy-soft);color:var(--navy)}
.user-menu .um-out{color:#c0392b;border-top:1px solid var(--line);margin-top:4px;padding-top:10px;border-radius:0 0 9px 9px}
.user-menu .um-out:hover{background:#fdeceb;color:#c0392b}

/* ===== Panel admin: acciones por fila (WhatsApp, editar, eliminar) ===== */
.adm-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.adm-acts .mini-form{display:inline-flex;gap:4px;align-items:center;margin:0}
.adm-wa,.adm-mail{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;font-weight:700;
  text-decoration:none;padding:5px 9px;border-radius:8px;white-space:nowrap}
.adm-wa{background:#25d366;color:#04331a}
.adm-wa:hover{filter:brightness(1.08)}
.adm-mail{background:var(--bg-2);color:var(--muted);border:1px solid var(--line)}
.adm-mail:hover{color:var(--navy)}
.adm-del{background:transparent!important;color:#c0392b!important;border:1px solid #f0c2bb!important;
  font-size:.74rem;padding:5px 9px;border-radius:8px;cursor:pointer}
.adm-del:hover{background:#fdeceb!important}
.adm-edit{margin-top:8px}
.adm-edit summary{cursor:pointer;font-size:.76rem;font-weight:700;color:var(--acc-2);padding:4px 0}
.adm-edit-form{display:flex;flex-direction:column;gap:7px;margin:8px 0;padding:10px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px}
.adm-edit-form label{display:flex;flex-direction:column;gap:3px;font-size:.72rem;color:var(--muted);font-weight:700}
.adm-edit-form input,.adm-edit-form textarea{font-size:.8rem;padding:6px 9px;border:1px solid var(--line-2);
  border-radius:7px;background:var(--panel);color:var(--text);font-family:inherit}
.btn-sm{padding:6px 12px!important;font-size:.78rem!important}

/* ===== Funciones integrables opcionales (*) en los planes ===== */
.feat-opt{color:var(--warm);font-weight:700;font-size:.9em;white-space:nowrap}
.feat-opt-nota{text-align:center;color:var(--dim);font-size:.8rem;margin-top:26px;max-width:720px;
  margin-left:auto;margin-right:auto;line-height:1.5}
.compare td.feat b{color:var(--warm)}

/* ===== Wizard de solicitud: RUC, contraseña con ojito, PayPal ===== */
.ruc-msg{font-size:.82rem;margin:-6px 0 14px;color:var(--muted);min-height:18px}
.ruc-msg.ok{color:#0a7d52;font-weight:700}
.ruc-msg.err{color:#c0392b}
.pass-wrap{position:relative;display:block}
.pass-wrap input{width:100%;padding-right:46px}
.pass-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:0;
  font-size:1.05rem;cursor:pointer;padding:6px 8px;line-height:1;border-radius:8px}
.pass-eye:hover{background:var(--bg-2)}
.pass-hint{font-size:.8rem;margin-top:5px;min-height:16px}
.pass-hint.ok{color:#0a7d52;font-weight:700}
.pass-hint.err{color:#c0392b}
/* Aviso de datos recuperados del pedido en el formulario de registro */
.reg-prefill{background:rgba(10,125,82,.10);border:1px solid rgba(10,125,82,.35);color:#0a7d52;
  border-radius:12px;padding:11px 14px;font-size:.85rem;line-height:1.5;margin-bottom:14px}
.reg-prefill b{color:#0a7d52}
/* IP de origen en el panel admin (registro y contacto) */
.adm-ip{color:var(--dim);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.74rem}
.activacion-box{margin:20px auto 6px;max-width:560px;padding:18px 20px;border-radius:16px;
  background:var(--navy-soft);border:1px solid var(--line-2)}
.activacion-box b{color:var(--navy)}
.activacion-box p{color:var(--muted);font-size:.88rem;line-height:1.6;margin-top:8px}
.activacion-box a{color:var(--acc-2);font-weight:700}
.activacion-box .act-temp{color:#0a7d52}
[data-theme="dark"] .activacion-box{background:#12203a}
/* Resumen del pedido en la pantalla de éxito (cliente que ya tenía cuenta) */
.ped-resumen{margin:20px auto 6px;max-width:460px;padding:6px 20px;border-radius:16px;
  background:var(--navy-soft);border:1px solid var(--line-2)}
.ped-resumen .pr-row{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.ped-resumen .pr-row:last-child{border-bottom:0}
.ped-resumen .pr-row span{color:var(--muted);font-size:.86rem}
.ped-resumen .pr-row b{color:var(--navy);font-family:var(--display);font-size:.96rem}
[data-theme="dark"] .ped-resumen{background:#12203a}
[data-theme="dark"] .ped-resumen .pr-row b{color:#dbe6f7}
.paypal-box{margin:18px auto 0;max-width:560px;padding:20px;border-radius:16px;text-align:center;
  background:var(--panel);border:2px solid #0070ba}
.paypal-box b{display:block;color:#003087;font-size:1.02rem;margin-bottom:6px}
[data-theme="dark"] .paypal-box b{color:#7f9bff}
.paypal-box p{color:var(--muted);font-size:.86rem;line-height:1.55;margin-bottom:14px}
.paypal-box small{display:block;color:var(--dim);font-size:.76rem;margin-top:12px}

/* ===== Aceptación de políticas (checkbox legal) ===== */
.check-legal{display:flex;align-items:flex-start;gap:10px;margin:4px 0 18px;font-size:.84rem;color:var(--muted);line-height:1.5;cursor:pointer}
.check-legal input{width:18px;height:18px;flex:0 0 auto;margin-top:1px;accent-color:var(--acc);cursor:pointer}
.check-legal a{color:var(--acc-2);font-weight:700;text-decoration:underline}
.check-legal a:hover{color:var(--navy)}

/* ===== Beneficios de crear cuenta (registro) ===== */
.reg-perks{margin-top:22px;padding:18px 20px;border-radius:16px;background:var(--navy-soft);border:1px solid var(--line-2)}
.reg-perks > b{display:block;color:var(--navy);font-family:var(--display);font-size:.98rem;margin-bottom:12px}
.reg-perks ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.reg-perks li{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--muted);line-height:1.45}
.reg-perks li span{flex:0 0 auto;font-size:1.05rem;line-height:1.2}
.reg-perks li b{color:var(--text)}
[data-theme="dark"] .reg-perks{background:#12203a}

/* ===== Antispam: campo trampa (invisible) y aviso del guardián ===== */
.hp-field{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.guard-msg{display:none}
.guard-msg.show{display:block;margin:0 0 12px;padding:10px 14px;border-radius:12px;font-size:.84rem;line-height:1.5;
  background:#fff4e6;border:1px solid #ffd8a8;color:#a1450a}
.guard-msg.show small{color:#b4590f}
.guard-msg.show a{color:var(--acc-2);font-weight:700}
[data-theme="dark"] .guard-msg.show{background:#2a1e10;border-color:#5a3a12;color:#ffc078}

/* ===== Anclas compartibles: el header fijo no tapa la sección ===== */
#planes,#comparativa,#rubros,#operaciones{scroll-margin-top:96px}

/* ===== Barra inferior tipo APP (solo celular) ===== */
.app-tabbar{display:none}
@media (max-width:740px){
  .app-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:260;display:flex;justify-content:space-around;align-items:stretch;
    background:linear-gradient(180deg,rgba(251,253,255,.98),rgba(232,239,245,.98));border-top:1px solid rgba(31,93,145,.17);box-shadow:0 -10px 28px rgba(0,30,70,.13),inset 0 1px 0 #fff;
    padding:7px 6px calc(7px + env(safe-area-inset-bottom));backdrop-filter:blur(16px)}
  .app-tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;text-decoration:none;color:#61738a;
    font-size:.59rem;font-weight:700;letter-spacing:.015em;padding:2px;border-radius:12px;transition:.22s}
  .app-tab-icon{width:34px;height:29px;border-radius:10px;display:grid;place-items:center;color:#315f8d;border:1px solid transparent;transition:.22s}
  .app-tab-icon svg{width:19px;height:19px;display:block}
  .app-tabbar a.on{color:var(--navy)}
  .app-tabbar a.on .app-tab-icon{color:#fff;background:linear-gradient(135deg,var(--navy),#1768ad 62%,var(--acc));border-color:rgba(255,255,255,.38);box-shadow:0 6px 16px rgba(0,61,122,.23)}
  .app-tabbar a:active .app-tab-icon{transform:scale(.92)}
  body{padding-bottom:68px}
  /* los elementos flotantes suben para no chocar con la barra */
  .fab-wrap{bottom:86px}
  .geo-bar{bottom:78px}
  .wb-toast{bottom:150px}
}

/* ===== Comparativa como TARJETAS por plan (celular) ===== */
.cmp-cards{display:none}
@media (max-width:700px){
  .compare-wrap .compare, .compare-wrap .compare-hint{display:none}   /* la tabla se transforma */
  .cmp-cards{display:block;margin-top:14px}
  .cc-pills{display:flex;gap:8px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
  .cc-pill{font:inherit;font-size:.85rem;font-weight:800;padding:8px 16px;border-radius:999px;cursor:pointer;
    background:var(--bg-2);color:var(--muted);border:1px solid var(--line-2)}
  .cc-pill.on{background:var(--navy);color:#fff;border-color:var(--navy)}
  .cc-list{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .cc-row{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-bottom:1px solid var(--line);font-size:.86rem;color:var(--text)}
  .cc-row:last-child{border-bottom:none}
  .cc-row .cc-mk{flex:0 0 auto;font-weight:800;color:#0a9d5e}
  .cc-row.off{opacity:.45}
  .cc-row.off .cc-mk{color:#d14848}
  .cc-row .cc-tx b{color:var(--navy)}
}

/* ===== Comparativa de planes en celular: 1ª columna fija + deslizar ===== */
.compare-hint{display:none;text-align:center;color:var(--dim);font-size:.75rem;margin:12px 0 4px}
@media(max-width:700px){
  .compare-hint{display:block}
  .compare{min-width:540px}
  .compare th,.compare td{padding:10px 9px;font-size:.79rem}
  .compare td.feat{position:sticky;left:0;z-index:2;background:var(--panel);max-width:170px;box-shadow:3px 0 7px rgba(0,20,60,.08)}
  .compare thead th:first-child{position:sticky;left:0;z-index:3;box-shadow:3px 0 7px rgba(0,0,0,.18)}
  .compare tbody tr:nth-child(even) td.feat{background:#eef2f9}
  [data-theme="dark"] .compare td.feat{background:var(--panel)}
  [data-theme="dark"] .compare tbody tr:nth-child(even) td.feat{background:#111a26}
  .compare td.mark,.compare thead th.plan-col{width:80px;min-width:80px}
  .compare .compare-plan-name{font-size:.8rem}
  .compare .cmp-price{font-size:.64rem}
}

/* ============================================================
   NOSOTROS · sede real y compromiso social
   ============================================================ */
.about-building-card{position:relative;margin:0;min-width:0;border-radius:22px;overflow:hidden;background:#071c3c;color:#fff;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 56px rgba(3,24,60,.22)}
.about-building-card .abc-photo{position:relative;aspect-ratio:4/3;overflow:hidden}
.about-building-card .abc-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(2,14,36,.84))}
.about-building-card .abc-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease}
.about-building-card:hover .abc-photo img{transform:scale(1.035)}
.abc-badge{position:absolute;left:16px;bottom:14px;z-index:1;padding:7px 11px;border-radius:999px;background:rgba(4,24,55,.8);
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);font-family:var(--mono);font-size:.68rem;letter-spacing:.06em}
.about-building-card figcaption{padding:22px 24px 24px}
.abc-kicker{display:block;font-family:var(--mono);font-size:.67rem;letter-spacing:.13em;text-transform:uppercase;color:#6fe5f0;margin-bottom:8px}
.about-building-card figcaption>strong{display:block;font-family:var(--display);font-size:1.35rem;line-height:1.15}
.about-building-card figcaption>p{margin-top:9px;color:rgba(235,245,255,.72);font-size:.83rem;line-height:1.55}
.abc-facts{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.abc-facts span{font-size:.67rem;padding:6px 9px;border-radius:999px;background:rgba(95,224,234,.1);border:1px solid rgba(95,224,234,.2);color:#c8f8ff}

.social-commit{padding-top:16px}
.social-commit-grid{display:grid;grid-template-columns:minmax(300px,.88fr) 1.12fr;gap:58px;align-items:center;padding:46px;
  border-radius:28px;background:linear-gradient(135deg,#061a3d,#0a3764);box-shadow:0 28px 70px rgba(3,24,60,.18);overflow:hidden;position:relative}
.social-commit-grid::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-180px;top:-240px;
  background:radial-gradient(circle,rgba(11,182,196,.24),transparent 68%)}
.social-commit-media{margin:0;position:relative;z-index:1;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 22px 50px rgba(0,0,0,.24)}
.social-commit-media img{width:100%;height:auto;display:block}
.social-commit-media figcaption{padding:12px 16px;background:#fff;color:#173256;font-size:.76rem;font-weight:700;text-align:center}
.social-commit-copy{position:relative;z-index:1;color:#fff}
.social-commit-copy .eyebrow{color:#6fe5f0}
.social-commit-copy h2{font-family:var(--display);font-size:clamp(2rem,3.5vw,3rem);line-height:1.03;letter-spacing:-.04em;max-width:650px}
.social-commit-copy>p{margin-top:15px;color:rgba(235,245,255,.78);line-height:1.7;max-width:660px}
.social-pillars{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.social-pillars article{display:flex;gap:11px;padding:13px;border-radius:15px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.social-pillars article>b{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(95,224,234,.15);color:#6fe5f0;font-family:var(--mono);font-size:.68rem;flex:none}
.social-pillars strong{display:block;font-size:.84rem;margin-bottom:3px}
.social-pillars span{display:block;color:rgba(235,245,255,.66);font-size:.71rem;line-height:1.4}

/* Logotipos reales de clientes: color institucional, sin canvas ni filtros. */
.clients-track{gap:14px}
.client.client-haslogo{position:relative;width:224px;height:106px;flex-direction:column;justify-content:center;gap:7px;padding:14px 18px;background:#fff;border-color:#e0e8f2}
.client.client-haslogo .c-img{max-width:176px;max-height:58px;filter:none!important;opacity:1!important;object-fit:contain}
.client-sector{font-family:var(--mono);font-size:.61rem;letter-spacing:.08em;text-transform:uppercase;color:#7b8ca5}
[data-theme="dark"] .client.client-haslogo{background:#fff;border-color:rgba(255,255,255,.25)}
[data-theme="dark"] .client.client-haslogo .c-img{filter:none!important;opacity:1!important}

@media(max-width:820px){
  .about-banner{padding:24px}
  .social-commit-grid{grid-template-columns:1fr;padding:28px;gap:28px}
  .social-commit-media{max-width:480px;margin:0 auto}
}
@media(max-width:560px){
  .about-banner{padding:18px;border-radius:20px}
  .about-building-card figcaption{padding:18px}
  .about-building-card figcaption>strong{font-size:1.18rem}
  .social-commit{padding-top:0}
  .social-commit-grid{padding:20px;border-radius:22px;gap:22px}
  .social-commit-copy h2{font-size:1.85rem}
  .social-commit-copy>p{font-size:.88rem;line-height:1.55}
  .social-pillars{grid-template-columns:1fr;gap:8px}
  .client.client-haslogo{width:190px;height:94px;padding:12px}
  .client.client-haslogo .c-img{max-width:156px;max-height:50px}
}

/* ============================================================
   PERFIL DEL CLIENTE, TICKETS Y SUBIDA DE IMÁGENES
   ============================================================ */
/* ── Cabecera del panel con foto ── */
.dash-ident{display:flex;align-items:center;gap:16px}
.dash-foto{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--acc);flex:0 0 auto}
.dash-acts{display:flex;gap:10px;flex-wrap:wrap}
.verif{font-size:.72em;vertical-align:middle;margin-left:6px;letter-spacing:-2px;cursor:help}
.verif.full{color:#0a7d52}
.verif.half{color:var(--acc-2)}
.verif.none{color:var(--dim)}

/* ── Perfil ── */
.perfil-head{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.perfil-avatar{width:84px;height:84px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:2rem;font-weight:800;border:3px solid var(--acc)}
.perfil-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.perfil-id{flex:1 1 260px}
.perfil-id h1{margin:0 0 4px}
.perfil-estado{margin-top:8px}
.perfil-logo{flex:0 0 auto;max-width:160px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.perfil-logo img{max-width:100%;max-height:64px;object-fit:contain;display:block}
.perfil-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px;align-items:start}
.pf-sub{color:var(--muted);font-size:.86rem;line-height:1.6;margin:-6px 0 16px}
.pf-h4{font-family:var(--display);color:var(--navy);font-size:1rem;margin:22px 0 10px}
.pf-h4:first-of-type{margin-top:4px}
.pf-img-form{padding:14px 0;border-bottom:1px dashed var(--line)}
.pf-img-form:last-child{border-bottom:0}
.pf-file{display:block;font-size:.82rem;font-weight:600;color:var(--navy);margin-bottom:8px}
.pf-file span{display:block;margin-bottom:6px}
.pf-file input[type=file]{width:100%;font-size:.84rem;color:var(--text)}
.pf-previa{max-width:110px;max-height:110px;border-radius:12px;object-fit:cover;margin:10px 0;border:1px solid var(--line)}
.pf-previa.logo{max-width:180px;max-height:80px;object-fit:contain;border-radius:8px;background:#fff}
.pf-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.pf-cod{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.pf-codigo{width:130px;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--panel);
  color:var(--text);font-family:var(--display);font-size:1.1rem;letter-spacing:5px;text-align:center}
.pf-verif{margin-top:18px;padding:14px 16px;border-radius:12px;background:var(--navy-soft);border:1px solid var(--line-2)}
.pf-verif b{color:var(--navy)}
.pf-verif p{color:var(--muted);font-size:.85rem;line-height:1.6;margin-top:6px}
.pf-verif .ok{color:#0a7d52;font-weight:700}
.pf-volver{margin-top:20px}

/* ── Aviso del compresor de imágenes ── */
.img-aviso{font-size:.78rem;color:var(--muted);line-height:1.6;margin-top:6px;display:none}
.img-aviso.show{display:block}
.img-aviso.img-aviso-err{color:#c0392b;font-weight:600}

/* ============================================================
   PERFIL PÚBLICO (bloque de /perfil): @usuario, visibilidad,
   brochure en PDF y galería de fotos del negocio.
   ============================================================ */
/* El perfil público es un bloque grande (ficha + brochure + galería):
   ocupa toda la fila del grid en vez de quedarse en una columna estrecha. */
.pf-publico{grid-column:1/-1}
.pf-publico .pf-nota{display:block;color:var(--dim);font-size:.78rem;margin-top:5px}
.cumple-wrap{display:flex;gap:8px}
.cumple-wrap select{flex:1;min-width:0}
.cumple-nota{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:11px;
  background:var(--navy-soft);border:1px solid var(--line-2);color:var(--muted);font-size:.78rem;line-height:1.45}
[data-theme="dark"] .cumple-nota{background:#12203a}
.pf-publico label small{color:var(--dim);font-weight:400}
.pf-cont{color:var(--dim);font-weight:400;font-size:.82rem}
/* @usuario: el prefijo del dominio va pegado al campo para que se vea la URL entera */
.handle-wrap{display:flex;align-items:stretch;border:1px solid var(--line-2);border-radius:11px;
  overflow:hidden;background:var(--panel)}
.handle-wrap:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px rgba(11,182,196,.14)}
/* El prefijo se encoge antes que el campo: en local la URL es larga
   (http://localhost:8081/adiasoftweb7/@) y se comía el input entero. */
.handle-pre{display:flex;align-items:center;padding:0 4px 0 12px;background:var(--bg-2);color:var(--dim);
  font-size:.82rem;white-space:nowrap;border-inline-end:1px solid var(--line);direction:ltr;unicode-bidi:isolate;
  flex:0 1 auto;min-width:0;max-width:55%;overflow:hidden;text-overflow:ellipsis}
.handle-wrap input{flex:1 1 12ch;min-width:12ch;border:0;background:transparent;padding:11px 12px;
  font-size:.94rem;color:var(--text);outline:none;direction:ltr}
@media(max-width:560px){
  .handle-wrap{flex-direction:column}
  .handle-pre{padding:8px 12px 4px;border-inline-end:0;border-bottom:1px solid var(--line)}
}
/* Interno / público */
.vis-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 18px}
@media(max-width:640px){.vis-pick{grid-template-columns:1fr}}
.vis-opt{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:13px;cursor:pointer;
  border:1.5px solid var(--line-2);background:var(--panel);transition:border-color .18s,background .18s}
.vis-opt:hover{border-color:var(--acc)}
.vis-opt input{margin-top:3px;accent-color:var(--acc);flex:0 0 auto}
.vis-opt:has(input:checked){border-color:var(--acc);background:var(--navy-soft)}
.vis-ic{font-size:1.15rem;line-height:1.2}
.vis-opt b{display:block;color:var(--navy);font-size:.92rem}
.vis-opt small{display:block;color:var(--muted);font-size:.78rem;line-height:1.5;margin-top:2px}
[data-theme="dark"] .vis-opt b{color:#dbe6f7}
/* Brochure ya subido */
.broch-actual{display:flex;align-items:center;gap:12px;padding:12px 15px;border-radius:13px;
  border:1px solid var(--line-2);background:var(--bg-2);margin-bottom:12px}
.broch-ico{font-size:1.4rem;flex:0 0 auto}
.broch-datos{flex:1;min-width:0}
.broch-datos a{display:block;color:var(--acc-2);font-weight:700;font-size:.9rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.broch-datos small{color:var(--dim);font-size:.76rem}
.broch-actual .mini-form{margin:0;flex:0 0 auto}
/* Galería del negocio */
.neg-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px;margin-bottom:14px}
.neg-foto{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3}
.neg-foto img{width:100%;height:100%;object-fit:cover;display:block}
.neg-foto form{position:absolute;top:5px;inset-inline-end:5px;margin:0}
.neg-x{width:24px;height:24px;border-radius:50%;border:0;cursor:pointer;line-height:1;font-size:.72rem;
  background:rgba(8,20,40,.72);color:#fff;display:grid;place-items:center;transition:background .18s}
.neg-x:hover{background:#c0392b}

/* ============================================================
   PANEL CON BARRA LATERAL (/panel?s=…)
   ============================================================ */
.dash-layout{display:grid;grid-template-columns:246px minmax(0,1fr);gap:22px;align-items:start}
.dash-side{position:sticky;top:88px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:10px;box-shadow:var(--shadow-sm)}
.ds-toggle{display:none;width:100%;gap:9px;align-items:center;justify-content:center;padding:11px;
  border:0;border-radius:11px;background:var(--navy-soft);color:var(--navy);font-weight:700;
  font-family:var(--body);font-size:.9rem;cursor:pointer}
.ds-nav{display:flex;flex-direction:column;gap:2px}
.ds-nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;
  text-decoration:none;color:var(--muted);font-size:.9rem;font-weight:600;transition:background .15s,color .15s}
.ds-nav a:hover{background:var(--bg-2);color:var(--navy)}
.ds-nav a.on{background:var(--navy-soft);color:var(--navy);font-weight:700}
[data-theme="dark"] .ds-nav a:hover,[data-theme="dark"] .ds-nav a.on{color:#dbe6f7}
.ds-ico{width:20px;text-align:center;flex:0 0 auto;font-size:1rem}
.ds-txt{flex:1;min-width:0}
.ds-badge{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:20px;background:var(--acc);
  color:#fff;font-size:.7rem;font-weight:800;display:grid;place-items:center;line-height:1}
.ds-sep{padding:14px 12px 6px;font-size:.68rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim)}
.dash-main{min-width:0}
.kpis-sec{margin-top:-6px}
@media(max-width:900px){
  .dash-layout{grid-template-columns:1fr}
  .dash-side{position:static}
  .ds-toggle{display:flex}
  /* en móvil el menú arranca plegado y se abre con el botón */
  .dash-side .ds-nav{display:none;margin-top:8px}
  .dash-side.abierta .ds-nav{display:flex}
}

/* Panel empresarial como aplicación: sin navegación pública duplicada.

   🔴 91.ª · POR QUÉ `.chat-widget` Y `.fab-wrap` SIGUEN OCULTOS AQUÍ, aunque
   la portada prometa «Asistente Claude dentro del ERP». Los dos son el Adiabot
   de MARKETING: su guion (assets/app.js) habla con el chatbot público y su
   prompt vende planes y explica la fiscalidad del país. Destaparlos en el
   panel le habría puesto a un gerente que ya paga un bot que le ofrece «ver
   precios» y que no sabe cuánto vendió su empresa este mes — peor que no
   tener ninguno.
   El asistente del ERP existe y es OTRO: lo pinta includes/platform_shell.php
   al final de platform_shell_end() con clases propias (`.iaerp-*`, que estas
   reglas no alcanzan), lee las cifras reales de la empresa
   (includes/erp_ia_contexto.php) y lo que propone se confirma a mano
   (includes/erp_ia_propuestas.php). El de marketing sigue vivo donde sirve:
   en la web pública. */
body.panel-layout>header,body.panel-layout>footer,body.panel-layout .fab-wrap,
body.panel-layout .chat-widget,body.panel-layout .app-tabbar,body.panel-layout #geoBar{display:none!important}
body.panel-layout{padding-top:0!important;background:#f1f5fb}
body.panel-layout .dash{padding:22px 20px 55px;min-height:100vh}
body.panel-layout .dash>.wrap{max-width:1580px}
.dash-top{padding:18px 20px;margin-bottom:18px;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:var(--shadow-sm)}
.dash-locale{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px}
.dash-locale span{padding:4px 9px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line);color:var(--muted);font-size:.68rem;font-weight:700}
.dash-acts{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.panel-company-switch{display:flex;flex-direction:column;gap:3px;min-width:230px;padding:7px 10px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2)}
.panel-company-switch label{font-size:.61rem;color:var(--dim);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.panel-company-switch select{border:0;background:transparent;color:var(--navy);font:700 .8rem var(--body);outline:0;min-width:0}
.dash-side{top:20px;max-height:calc(100vh - 40px);overflow-y:auto;border-radius:18px;padding:8px}
.dash-side::-webkit-scrollbar{width:6px}.dash-side::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px}
.ds-nav a{min-height:40px}.ds-nav a.on{background:linear-gradient(135deg,var(--navy),#07529b);color:#fff!important;box-shadow:0 5px 14px rgba(0,40,99,.16)}
.ds-nav a.on .ds-ico{color:#69e5eb}.ds-sep:first-child{padding-top:9px}.ds-spag{margin:8px 4px;background:#e8f7f8;color:#087b85!important;border:1px solid #c5ebee}
.ds-mobile-top,.panel-mobile-head{display:none}

/* Catálogo de servicios */
.srv-hero{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:16px;padding:24px 26px;border-radius:19px;color:#fff;
  background:radial-gradient(circle at 84% 18%,rgba(78,225,204,.28),transparent 28%),linear-gradient(125deg,#08234d,#075292 67%,#087b97)}
.srv-hero>div{max-width:760px}.srv-hero span{display:block;color:#69e5d1;font-size:.66rem;font-weight:800;letter-spacing:.1em}.srv-hero h2{margin:5px 0 7px;color:#fff;font:800 1.45rem var(--display)}.srv-hero h2 b{color:#fff}.srv-hero p{margin:0;color:#c3d8eb;font-size:.82rem;line-height:1.5}
.srv-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:17px}.srv-kpis>div{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow-sm)}.srv-kpis span,.srv-kpis small{display:block;color:var(--dim);font-size:.66rem}.srv-kpis span{text-transform:uppercase;font-weight:800;letter-spacing:.05em}.srv-kpis b{display:block;margin:3px 0;color:var(--navy);font:800 1.25rem var(--display)}
.srv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.srv-head h3{margin-bottom:4px}.srv-search{display:flex;gap:6px}.srv-search input{min-width:210px;padding:9px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-2);color:var(--text)}.srv-search button{padding:8px 11px;border:0;border-radius:9px;background:var(--navy);color:#fff;font-weight:700}
.srv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.srv-card{display:flex;flex-direction:column;min-width:0;padding:15px;border:1px solid var(--line);border-radius:15px;background:var(--bg-2)}.srv-card.off{opacity:.65}.srv-card-top,.srv-meta,.srv-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}.srv-code{color:var(--acc-2);font:700 .68rem var(--mono)}.srv-card h4{margin:10px 0 6px;color:var(--navy);font:.92rem var(--display);font-weight:800}.srv-meta{justify-content:flex-start;flex-wrap:wrap}.srv-meta span{padding:3px 7px;border-radius:999px;background:var(--panel);color:var(--muted);font-size:.64rem}.srv-card>p{min-height:38px;margin:9px 0;color:var(--muted);font-size:.72rem;line-height:1.45}.srv-price{margin-top:auto;padding-top:11px;border-top:1px solid var(--line)}.srv-price b,.srv-price small{display:block}.srv-price b{color:var(--navy);font:800 1.18rem var(--display)}.srv-price small{color:var(--dim);font-size:.64rem}.srv-actions{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line)}.srv-actions a,.srv-actions button{border:0;background:none;color:var(--acc-2);font:700 .7rem var(--body);cursor:pointer;text-decoration:none}.srv-actions button{color:var(--muted)}
.srv-form-box{display:grid;grid-template-columns:minmax(190px,.4fr) minmax(0,1fr);gap:24px}.srv-tax{display:flex;align-items:center;gap:8px;min-height:46px;padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2);font-size:.78rem}

@media(max-width:1100px){.srv-grid{grid-template-columns:1fr 1fr}.srv-form-box{grid-template-columns:1fr}}
@media(max-width:900px){
  body.panel-layout .dash{padding:0 0 42px}
  body.panel-layout .dash>.wrap{width:100%;max-width:none;padding:0 14px}
  .panel-mobile-head{position:sticky;top:0;z-index:54;display:flex;align-items:center;gap:10px;height:62px;margin:0 -14px 14px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(8,38,75,.07)}
  .panel-mobile-head>button,.panel-mobile-head>a{display:grid;place-items:center;height:38px;border:0;border-radius:10px;background:var(--navy);color:#fff;font:700 .75rem var(--body);text-decoration:none}.panel-mobile-head>button{display:flex;gap:7px;padding:0 12px}.panel-mobile-head>a{width:38px;margin-left:auto;background:linear-gradient(135deg,var(--acc),var(--acc-2))}
  .panel-mobile-head>div{display:flex;flex:1;min-width:0;flex-direction:column}.panel-mobile-head small,.panel-mobile-head b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panel-mobile-head small{color:var(--dim);font-size:.63rem}.panel-mobile-head b{color:var(--navy);font-size:.82rem}
  .dash-top{align-items:flex-start;padding:14px;margin-bottom:14px}.dash-ident{min-width:0}.dash-top h1{font-size:1.25rem}.dash-top .who{font-size:.72rem;overflow-wrap:anywhere}.dash-acts{width:100%;justify-content:flex-start}.panel-company-switch{flex:1 1 100%;min-width:0}.dash-acts>.btn{flex:1;padding:10px 12px;justify-content:center;font-size:.76rem}
  .dash-layout{display:block}.dash-side{position:fixed!important;z-index:80;left:0;top:0;bottom:0;width:min(310px,86vw);max-height:none;margin:0;border:0;border-radius:0;transform:translateX(-105%);transition:transform .24s ease;box-shadow:0 0 45px rgba(0,20,50,.32);background:var(--panel)}
  .dash-layout.menu-open .dash-side{transform:none}.dash-layout.menu-open::after{content:"";position:fixed;inset:0;z-index:70;background:rgba(3,18,38,.52)}
  .dash-side .ds-nav{display:flex!important;margin-top:0;padding-bottom:24px}.ds-toggle{display:none!important}.ds-mobile-top{position:sticky;top:-8px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-8px -8px 5px;padding:14px;background:var(--navy);color:#fff}.ds-mobile-top span{min-width:0}.ds-mobile-top small,.ds-mobile-top b{display:block}.ds-mobile-top small{color:#8eafd2;font-size:.63rem}.ds-mobile-top b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.84rem}.ds-mobile-top button{width:35px;height:35px;border:0;border-radius:9px;background:rgba(255,255,255,.12);color:#fff;font-size:1.3rem}
  body.panel-menu-lock{overflow:hidden}.srv-kpis{grid-template-columns:1fr 1fr}.srv-head{flex-direction:column}.srv-search{width:100%}.srv-search input{flex:1;min-width:0}
}
@media(max-width:560px){.dash-locale{gap:4px}.dash-locale span{font-size:.61rem}.srv-hero{align-items:flex-start;flex-direction:column;padding:20px}.srv-kpis{gap:8px}.srv-kpis>div{padding:11px}.srv-kpis b{font-size:1.05rem}.srv-grid{grid-template-columns:1fr}.srv-form-box{gap:12px}}

/* ============================================================
   PERFIL CON PESTAÑAS LATERALES (/perfil?t=…)
   ------------------------------------------------------------
   Reutiliza la barra del panel (.dash-layout/.dash-side/.ds-nav).
   Aquí solo van los paneles, la ficha de resumen y las zonas de
   arrastrar y soltar.
   ============================================================ */
.pf-panel{display:none}
.pf-panel.on{display:block}
/* Respaldo SIN JavaScript: al guardar el perfil público, el brochure o las
   fotos, auth.php vuelve a /perfil#publico. El ancla manda sobre ?t=. */
.pf-tabs:has(.pf-panel:target) .pf-panel.on{display:none}
.pf-tabs:has(.pf-panel:target) .pf-panel:target{display:block}
.pf-tabs:has(#publico:target) .ds-nav a.on{background:transparent;color:var(--muted);font-weight:600}
.pf-tabs:has(#publico:target) .ds-nav a.pf-nav-publico{background:var(--navy-soft);color:var(--navy);font-weight:700}
[data-theme="dark"] .pf-tabs:has(#publico:target) .ds-nav a.pf-nav-publico{color:#dbe6f7}

/* ── Resumen "Ver mi perfil" (solo lectura) ── */
.pf-ficha-nom{font-family:var(--display);font-size:1.3rem;font-weight:800;color:var(--navy);margin:0 0 2px}
.pf-arroba{color:var(--acc-2);font-weight:700}
.pf-vacio{color:var(--dim);font-style:italic}
.pf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:2px 0 6px}
.pf-stat{display:flex;flex-direction:column;gap:2px;padding:13px 16px;border-radius:14px;
  background:var(--bg-2);border:1px solid var(--line)}
.pf-stat-n{font-family:var(--display);font-size:1.6rem;font-weight:800;color:var(--navy);line-height:1.1}
.pf-stat-l{color:var(--muted);font-size:.78rem;font-weight:600}
.pf-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 20px}
.pf-dato{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;justify-content:space-between;
  padding:9px 0;border-bottom:1px dashed var(--line)}
.pf-dato-k{color:var(--muted);font-size:.8rem;font-weight:600}
.pf-dato-v{color:var(--text);font-size:.9rem;font-weight:700;text-align:end;word-break:break-word}
.pf-dato-v.vacio{color:var(--dim);font-weight:400;font-style:italic}

/* ── Zona de arrastrar y soltar (el <input type=file> sigue dentro) ── */
.pf-drop{border:1.5px dashed var(--line-2);border-radius:14px;padding:14px 16px;background:var(--bg);
  transition:border-color .18s,background .18s}
.pf-drop:hover{border-color:var(--acc)}
.pf-drop.dentro{border-style:solid;border-color:var(--acc);background:var(--navy-soft)}
.pf-drop .pf-file{margin-bottom:0}
.pf-drop-hint{display:flex;align-items:center;gap:7px;margin-top:9px;color:var(--dim);font-size:.78rem}
.pf-drop-ico{font-size:.95rem}
.pf-drop.dentro .pf-drop-hint{color:var(--acc-2);font-weight:700}
/* en pantallas táctiles no hay arrastre: queda solo el botón de siempre */
@media(hover:none){.pf-drop-hint{display:none}}

/* ============================================================
   MULTIEMPRESA: empresa activa y lista de mis empresas
   ============================================================ */
.dash-emp{display:inline-flex;align-items:center;gap:7px;margin-top:7px;padding:5px 12px;
  border-radius:20px;background:var(--navy-soft);border:1px solid var(--line-2);font-size:.8rem;color:var(--muted)}
.dash-emp b{color:var(--navy)}
.dash-emp a{color:var(--acc-2);font-weight:700;margin-inline-start:4px}
[data-theme="dark"] .dash-emp{background:#12203a}
[data-theme="dark"] .dash-emp b{color:#dbe6f7}
.emp-lista{display:flex;flex-direction:column;gap:10px}
.emp-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:13px;
  border:1px solid var(--line);background:var(--bg-2)}
.emp-item.activa{border-color:var(--acc);background:var(--navy-soft)}
.emp-chip{width:40px;height:40px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-family:var(--display);font-weight:800;font-size:1.05rem}
.emp-chip-com{background:linear-gradient(135deg,var(--acc),var(--acc-2))}
.emp-datos{flex:1;min-width:0;line-height:1.4}
.emp-datos b{display:block;color:var(--navy);font-size:.93rem}
.emp-datos small{color:var(--dim);font-size:.78rem}
[data-theme="dark"] .emp-datos b{color:#dbe6f7}
.emp-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:0 0 auto}
.emp-acts form{margin:0}
/* sufijo /login pegado al campo de la dirección de empresa */
.handle-post{display:flex;align-items:center;padding:0 12px 0 4px;background:var(--bg-2);color:var(--dim);
  font-size:.82rem;white-space:nowrap;border-inline-start:1px solid var(--line);direction:ltr}
@media(max-width:620px){
  .emp-item{flex-wrap:wrap}
  .emp-acts{width:100%;justify-content:flex-end}
}

/* ============================================================
   MURO: publicar, publicaciones, likes y comentarios
   ============================================================ */
.muro-form textarea{width:100%;background:var(--bg);border:1px solid var(--line-2);border-radius:12px;
  padding:12px 14px;color:var(--text);font-family:var(--body);font-size:.93rem;resize:vertical}
.muro-form textarea:focus{outline:none;border-color:var(--acc)}
.muro-form-pie{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:10px}
.muro-foto{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line-2);font-size:.84rem;font-weight:600;color:var(--muted)}
.muro-foto:hover{border-color:var(--acc);color:var(--navy)}
.muro-foto input{display:none}
.muro-form-pie select{padding:9px 12px;border-radius:10px;border:1px solid var(--line-2);
  background:var(--bg-2);color:var(--text);font-size:.84rem}
.muro-form-pie .btn{margin-inline-start:auto}
.muro-regla{color:var(--dim);font-size:.76rem;line-height:1.55;margin-top:10px}
/* Aviso de "aún no puedes publicar": se dice QUÉ falta y se enlaza */
.muro-bloqueo{border:1px solid rgba(224,168,0,.4);background:rgba(255,196,0,.07);
  border-radius:14px;padding:15px 17px}
.mb-cab{display:flex;gap:11px;align-items:flex-start}
.mb-cab span{font-size:1.2rem;line-height:1.2}
.mb-cab b{display:block;color:var(--navy);font-size:.94rem}
.mb-cab small{display:block;color:var(--muted);font-size:.8rem;line-height:1.55;margin-top:2px}
[data-theme="dark"] .mb-cab b{color:#dbe6f7}
.mb-lista{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.mb-lista li{display:flex;align-items:center;gap:9px;font-size:.87rem}
.mb-x{color:#c99700;font-weight:800}
.mb-lista a{color:var(--acc-2);font-weight:700}
.muro-tabs{display:flex;gap:6px;background:var(--bg-2);padding:5px;border-radius:12px;margin-bottom:16px}
.muro-tabs a{flex:1;text-align:center;padding:9px;border-radius:9px;font-weight:700;font-size:.86rem;
  color:var(--muted);text-decoration:none;transition:.2s}
.muro-tabs a.on{background:var(--panel);color:var(--navy);box-shadow:var(--shadow-sm)}
[data-theme="dark"] .muro-tabs a.on{color:#dbe6f7}

.muro-post{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.muro-post .mp-cab{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.mp-av{width:40px;height:40px;border-radius:50%;flex:0 0 auto;overflow:hidden;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-family:var(--display);font-weight:800;font-size:1rem}
.mp-av img{width:100%;height:100%;object-fit:cover}
.mp-av-sm{width:30px;height:30px;font-size:.82rem}
.mp-quien{flex:1;min-width:0;line-height:1.35}
.mp-quien b{display:block;color:var(--navy);font-size:.92rem}
.mp-quien small{color:var(--dim);font-size:.76rem}
[data-theme="dark"] .mp-quien b{color:#dbe6f7}
.mp-vis{font-size:.9rem;opacity:.65}
.mp-del{margin:0}
.mp-del button{border:0;background:transparent;color:var(--dim);cursor:pointer;font-size:.9rem;padding:4px 6px;border-radius:8px}
.mp-del button:hover{background:var(--bg-2);color:#c0392b}
.mp-txt{color:var(--text);font-size:.94rem;line-height:1.7;margin-bottom:10px;white-space:pre-line}
.mp-img{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);margin-bottom:10px}
.mp-img img{width:100%;display:block;max-height:440px;object-fit:cover}
.mp-pie{display:flex;align-items:center;gap:9px;padding-top:9px;border-top:1px solid var(--line)}
.mp-like{margin:0}
.mp-like button{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;cursor:pointer;
  color:var(--muted);font-size:.84rem;font-weight:600;padding:6px 10px;border-radius:9px;font-family:var(--body)}
.mp-like button:hover{background:var(--bg-2)}
.mp-like button.on{color:var(--acc-2)}
.mp-like b{font-weight:800}
.mp-ncom,.mp-ncom-lbl{color:var(--dim);font-size:.8rem}
.mp-ncom{margin-inline-start:auto}
.mp-coms{margin-top:11px;display:flex;flex-direction:column;gap:9px}
.mp-com{display:flex;gap:9px;align-items:flex-start}
.mp-com b{color:var(--navy);font-size:.84rem}
.mp-com small{color:var(--dim);font-size:.72rem;margin-inline-start:5px}
.mp-com p{color:var(--text);font-size:.87rem;line-height:1.6;margin-top:1px}
[data-theme="dark"] .mp-com b{color:#dbe6f7}
.mp-comform{display:flex;gap:8px;margin-top:12px}
.mp-comform input{flex:1;min-width:0;background:var(--bg-2);border:1px solid var(--line-2);border-radius:20px;
  padding:9px 15px;color:var(--text);font-size:.86rem}
.mp-comform input:focus{outline:none;border-color:var(--acc)}

/* ============================================================
   RED: contactos, solicitudes y sugerencias
   ============================================================ */
.red-lista{display:flex;flex-direction:column;gap:10px}
.red-item{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:13px;
  border:1px solid var(--line);background:var(--bg-2)}
.red-av{width:42px;height:42px;border-radius:50%;flex:0 0 auto;overflow:hidden;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-family:var(--display);font-weight:800;font-size:1rem}
.red-av img{width:100%;height:100%;object-fit:cover}
.red-datos{flex:1;min-width:0;line-height:1.4}
.red-datos b{display:block;color:var(--navy);font-size:.92rem}
.red-datos small{color:var(--dim);font-size:.78rem;direction:ltr;unicode-bidi:isolate}
.red-serv{display:block;color:var(--muted);font-size:.79rem;margin-top:3px}
[data-theme="dark"] .red-datos b{color:#dbe6f7}
.red-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:0 0 auto}
.red-acts form{margin:0}
@media(max-width:620px){
  .red-item{flex-wrap:wrap}
  .red-acts{width:100%;justify-content:flex-end}
}

/* ============================================================
   ADIABOT — mascota animada
   ------------------------------------------------------------
   La gracia está en que los gestos NO van sincronizados: cada
   instancia recibe --ab-d1/--ab-d2 distintos desde PHP, y las
   duraciones son primos entre sí (2.9s, 4.3s, 6.1s, 7.3s) para
   que la combinación tarde mucho en repetirse. Eso es lo que
   hace que parezca vivo y no un bucle corto.
   ============================================================ */
.adiabot{display:inline-block;line-height:0;flex:0 0 auto}
.adiabot svg{width:100%;height:100%;display:block;overflow:visible}
/* respiración: todo el cuerpo sube y baja muy poco */
.ab-todo{transform-box:fill-box;transform-origin:50% 92%;
  animation:abRespira 4.3s ease-in-out infinite var(--ab-d2,0s)}
@keyframes abRespira{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-1.6px) scaleY(1.012)}}
.ab-sombra{animation:abSombra 4.3s ease-in-out infinite var(--ab-d2,0s)}
@keyframes abSombra{0%,100%{rx:21;opacity:.16}50%{rx:19;opacity:.12}}
/* cabeza: ladeo lento, como quien escucha */
.ab-cabeza{transform-box:fill-box;transform-origin:50% 100%;
  animation:abLadeo 7.3s ease-in-out infinite var(--ab-d1,0s)}
@keyframes abLadeo{0%,100%{transform:rotate(0)}25%{transform:rotate(-3.2deg)}60%{transform:rotate(2.6deg)}}
/* antena: se balancea con retardo respecto a la cabeza (efecto muelle) */
.ab-antena{transform-box:fill-box;transform-origin:50% 100%;
  animation:abAntena 6.1s ease-in-out infinite var(--ab-d2,0s)}
@keyframes abAntena{0%,100%{transform:rotate(0)}30%{transform:rotate(9deg)}65%{transform:rotate(-7deg)}}
.ab-pompon{animation:abPompon 2.9s ease-in-out infinite var(--ab-d1,0s)}
@keyframes abPompon{0%,100%{r:5}50%{r:5.6}}
/* parpadeo: cerrar los ojos es rapidísimo y ocupa un instante del ciclo */
.ab-ojo{transform-box:fill-box;transform-origin:50% 50%;
  animation:abParpadeo 6.1s ease-in-out infinite var(--ab-d1,0s)}
@keyframes abParpadeo{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}97%{transform:scaleY(1)}}
/* mirada: los ojos se van un poco a los lados, no están clavados */
.ab-ojos{animation:abMirada 7.3s ease-in-out infinite var(--ab-d2,0s)}
@keyframes abMirada{0%,100%{transform:translateX(0)}30%{transform:translateX(2.2px)}62%{transform:translateX(-2px)}}
.ab-moflete{animation:abMoflete 4.3s ease-in-out infinite var(--ab-d1,0s)}
@keyframes abMoflete{0%,100%{opacity:.45}50%{opacity:.62}}

/* — saluda: la manita va y viene — */
.adiabot-saluda .ab-mano{transform-box:fill-box;transform-origin:30% 80%;
  animation:abSaluda 2.9s ease-in-out infinite}
@keyframes abSaluda{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-22deg)}80%{transform:rotate(12deg)}90%{transform:rotate(-16deg)}}
.adiabot-lista .ab-mano,.adiabot-espera .ab-mano,.adiabot-piensa .ab-mano{opacity:0}

/* — espera: mira a los lados con más recorrido, boca relajada — */
.adiabot-espera .ab-ojos{animation-duration:4.3s}
.adiabot-espera .ab-cabeza{animation-duration:5.9s}

/* — piensa: ojos en puntos suspensivos y ceja arqueada — */
.adiabot-piensa .ab-ojos,.adiabot-piensa .ab-boca{opacity:0}
.adiabot-piensa .ab-piensa{opacity:1}
.adiabot-piensa .ab-ceja{opacity:1}
.ab-piensa circle{animation:abPuntos 1.4s ease-in-out infinite}
.ab-piensa circle:nth-child(2){animation-delay:.18s}
.ab-piensa circle:nth-child(3){animation-delay:.36s}
@keyframes abPuntos{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-2.5px)}}

/* — mientras el cliente escribe, Adiabot presta atención: se acerca,
     abre más los ojos y deja de ladear la cabeza — */
.escribiendo .adiabot .ab-todo{animation-duration:2.2s}
.escribiendo .adiabot .ab-cabeza{animation:abAtiende 2.2s ease-in-out infinite}
@keyframes abAtiende{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(0) translateY(-1px) scale(1.03)}}
.escribiendo .adiabot .ab-ojo{ry:6.4}
.escribiendo .adiabot .ab-boca{d:path("M43 55 Q50 61 57 55")}

@media(prefers-reduced-motion:reduce){
  .adiabot *{animation:none !important}
}

/* ============================================================
   CHAT entre contactos
   ============================================================ */
.chat-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:16px;align-items:start}
.chat-lista{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;
  max-height:600px;overflow-y:auto}
.chat-lista h3{font-size:1rem;margin-bottom:12px}
.cl-cab{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.cl-online{display:inline-flex;align-items:center;gap:5px;color:#0a7d52;font-size:.74rem;font-weight:700;margin-bottom:12px}
.cl-online i{width:7px;height:7px;border-radius:50%;background:#16c47f;display:inline-block}
.cl-nota{color:var(--dim);font-size:.79rem;line-height:1.55;padding:12px 10px}
.cl-nota a{color:var(--acc-2);font-weight:700}
/* punto verde de presencia sobre el avatar */
.cc-ava{position:relative;display:inline-flex;flex:0 0 auto}
.cc-ava.en-linea::after{content:"";position:absolute;bottom:0;inset-inline-end:0;width:11px;height:11px;
  border-radius:50%;background:#16c47f;border:2px solid var(--panel)}
.cc-of{display:inline-block;margin-inline-start:5px;padding:1px 6px;border-radius:20px;font-size:.6rem;
  font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--acc);color:#fff;vertical-align:middle}
.ch-estado{color:var(--dim);font-size:.75rem}
/* doble check */
.ch-check{margin-inline-start:4px;font-weight:700;letter-spacing:-1px}
.ch-msg.mio .ch-check{color:rgba(255,255,255,.55)}
.ch-msg.mio .ch-check.leido{color:#5fe0ea}
/* mensaje escrito por el bot */
.ch-msg.de-bot{background:linear-gradient(135deg,rgba(11,182,196,.13),rgba(47,127,240,.10));
  border:1px solid rgba(11,182,196,.28)}
.ch-bot-tag{display:block;font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--acc-2);margin-bottom:3px}
.chat-cont{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;
  text-decoration:none;margin-bottom:3px;transition:background .15s}
.chat-cont:hover{background:var(--bg-2)}
.chat-cont.on{background:var(--navy-soft)}
.cc-datos{flex:1;min-width:0;line-height:1.35}
.cc-datos b{display:block;color:var(--navy);font-size:.87rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-datos small{color:var(--dim);font-size:.75rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-theme="dark"] .cc-datos b{color:#dbe6f7}
.chat-hilo{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  display:flex;flex-direction:column;height:600px;overflow:hidden}
.ch-cab{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line)}
.ch-cab b{display:block;color:var(--navy);font-size:.94rem}
.ch-cab small{color:var(--dim);font-size:.76rem;direction:ltr;unicode-bidi:isolate}
.ch-cab .btn{margin-inline-start:auto}
[data-theme="dark"] .ch-cab b{color:#dbe6f7}
.ch-mensajes{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:9px}
.ch-msg{max-width:74%;padding:9px 13px;border-radius:14px;font-size:.89rem;line-height:1.55}
.ch-msg p{margin:0;white-space:pre-line}
.ch-msg small{display:block;font-size:.68rem;opacity:.7;margin-top:3px}
.ch-msg.mio{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:4px}
.ch-msg.suyo{align-self:flex-start;background:var(--bg-2);color:var(--text);border-bottom-left-radius:4px}
[dir="rtl"] .ch-msg.mio{border-bottom-right-radius:14px;border-bottom-left-radius:4px}
[dir="rtl"] .ch-msg.suyo{border-bottom-left-radius:14px;border-bottom-right-radius:4px}
.ch-form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.ch-form input{flex:1;min-width:0;background:var(--bg-2);border:1px solid var(--line-2);border-radius:22px;
  padding:11px 16px;color:var(--text);font-size:.9rem}
.ch-form input:focus{outline:none;border-color:var(--acc)}
/* ── Emoticones del chat ──
   Sin librería y sin imágenes: son los emoji del propio sistema, que ya vienen
   en todos los teléfonos y en Windows. El panel se abre HACIA ARRIBA porque el
   formulario vive pegado al borde inferior del hilo. */
.ch-emo-caja{position:relative;display:flex}
.ch-emo-btn{border:1px solid var(--line-2);background:var(--bg-2);border-radius:22px;width:42px;
  cursor:pointer;font-size:1.15rem;line-height:1;color:var(--text)}
.ch-emo-btn:hover,.ch-emo-btn[aria-expanded="true"]{border-color:var(--acc)}
.ch-emo-panel{position:absolute;bottom:calc(100% + 8px);left:0;z-index:60;width:296px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 10px 34px rgba(16,42,67,.20);padding:8px;display:block}
.ch-emo-panel[hidden]{display:none}
.ch-emo-tabs{display:flex;gap:2px;margin-bottom:6px;border-bottom:1px solid var(--line);padding-bottom:6px}
.ch-emo-tabs button{flex:1;border:0;background:none;cursor:pointer;font-size:1rem;padding:4px 0;
  border-radius:8px;line-height:1;opacity:.55}
.ch-emo-tabs button.on{opacity:1;background:var(--bg-2)}
.ch-emo-rejilla{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;max-height:186px;overflow-y:auto}
.ch-emo-rejilla button{border:0;background:none;cursor:pointer;font-size:1.25rem;line-height:1;
  padding:5px 0;border-radius:8px}
.ch-emo-rejilla button:hover{background:var(--bg-2)}
.ch-emo-vacio{grid-column:1/-1;color:var(--muted);font-size:.78rem;padding:14px 6px;text-align:center}
@media(max-width:520px){.ch-emo-panel{width:calc(100vw - 40px)}}
.chat-vacio{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 24px;gap:7px}
.chat-vacio span{font-size:2.2rem;opacity:.4}
.chat-vacio b{color:var(--navy);font-size:1rem}
.chat-vacio p{color:var(--muted);font-size:.86rem;max-width:320px}
.chat-vacio-sm{padding:20px}
[data-theme="dark"] .chat-vacio b{color:#dbe6f7}
@media(max-width:820px){
  .chat-layout{grid-template-columns:1fr}
  .chat-lista{max-height:none}
  .chat-hilo{height:520px}
}

/* ============================================================
   COMUNIDAD (/comunidad) y FICHA PÚBLICA (/@usuario)
   ============================================================ */
.com-filtros{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  margin-bottom:26px;padding:14px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.com-buscar{display:flex;gap:8px;flex:1 1 320px;min-width:0}
.com-buscar input{flex:1;min-width:0;padding:10px 14px;border-radius:10px;border:1px solid var(--line-2);
  background:var(--bg-2);color:var(--text);font-size:.92rem}
.com-buscar input:focus{outline:none;border-color:var(--acc)}
.com-selects{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.com-selects select{padding:9px 12px;border-radius:10px;border:1px solid var(--line-2);
  background:var(--bg-2);color:var(--text);font-size:.86rem;max-width:220px}
.com-vacio{padding:44px 20px;text-align:center}
.com-vacio b{display:block;color:var(--navy);font-size:1.05rem;margin-bottom:6px}
.com-vacio p{color:var(--muted);margin-bottom:16px}
[data-theme="dark"] .com-vacio b{color:#dbe6f7}

.com-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.com-card{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;text-decoration:none;
  background:var(--panel);border:1px solid var(--line);transition:transform .2s,box-shadow .2s,border-color .2s}
.com-card:hover{transform:translateY(-3px);border-color:var(--acc);box-shadow:0 14px 30px rgba(3,36,92,.13)}
.cc-portada{position:relative;aspect-ratio:16/9;background:var(--navy-soft);display:grid;place-items:center;overflow:hidden}
.cc-portada>img:not(.cc-logo){width:100%;height:100%;object-fit:cover;display:block}
.cc-sin{font-size:2rem;color:var(--acc);font-family:var(--display);font-weight:800;opacity:.5}
.cc-logo{position:absolute;bottom:8px;inset-inline-start:8px;max-width:74px;max-height:34px;object-fit:contain;
  background:#fff;border-radius:8px;padding:4px 6px;box-shadow:0 3px 10px rgba(3,36,92,.18)}
.cc-cuerpo{padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
.cc-cuerpo h3{font-size:1rem;color:var(--navy);line-height:1.3;margin:0}
[data-theme="dark"] .cc-cuerpo h3{color:#dbe6f7}
.cc-handle{color:var(--acc-2);font-size:.8rem;font-weight:700;direction:ltr;unicode-bidi:isolate}
.cc-serv{color:var(--muted);font-size:.85rem;line-height:1.55;margin:2px 0 0}
.cc-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:10px}
.cc-meta span{font-size:.72rem;color:var(--dim);background:var(--bg-2);border-radius:20px;padding:3px 9px}
.com-cta{margin-top:38px;text-align:center;padding:32px 20px;border-radius:18px;
  background:var(--navy-soft);border:1px solid var(--line-2)}
.com-cta h3{color:var(--navy);margin-bottom:6px}
.com-cta p{color:var(--muted);margin-bottom:16px}
.com-cta .btn{margin:0 4px}
[data-theme="dark"] .com-cta{background:#12203a}
[data-theme="dark"] .com-cta h3{color:#dbe6f7}

/* Ficha pública */
.pp-cab{display:flex;gap:18px;align-items:center;margin-bottom:22px;flex-wrap:wrap}
.pp-ava{width:88px;height:88px;border-radius:20px;flex:0 0 auto;overflow:hidden;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-family:var(--display);font-size:2rem;font-weight:800}
.pp-ava img{width:100%;height:100%;object-fit:cover}
.pp-ava img.pp-logo{object-fit:contain;background:#fff;padding:8px}
.pp-id{flex:1;min-width:200px}
.pp-id h1{font-size:1.7rem;line-height:1.2;margin:0 0 3px}
.pp-handle{color:var(--acc-2);font-weight:700;font-size:.92rem;direction:ltr;unicode-bidi:isolate}
.pp-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.pp-chip{font-size:.76rem;color:var(--muted);background:var(--bg-2);border:1px solid var(--line);
  border-radius:20px;padding:4px 11px}
.pp-serv{color:var(--text);font-size:.95rem;line-height:1.75;white-space:pre-line}
.pp-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pp-galeria a{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3}
.pp-galeria img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.pp-galeria a:hover img{transform:scale(1.05)}
.pp-brochure{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:13px;text-decoration:none;
  border:1px solid var(--line-2);background:var(--bg-2);transition:border-color .2s}
.pp-brochure:hover{border-color:var(--acc)}
.pp-brochure .broch-datos b{display:block;color:var(--navy);font-size:.92rem}
.pp-brochure .broch-datos small{color:var(--dim);font-size:.76rem}
[data-theme="dark"] .pp-brochure .broch-datos b{color:#dbe6f7}
.pp-broch-cta{margin-inline-start:auto;color:var(--acc-2);font-weight:700;font-size:.86rem;white-space:nowrap}
.pp-contacto{display:flex;flex-wrap:wrap;gap:10px}
.pp-cta{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:11px;
  text-decoration:none;font-weight:700;font-size:.9rem}
.pp-cta-wa{background:linear-gradient(135deg,#25d366,#1eaf57);color:#fff}
.pp-cta-web{background:var(--navy);color:#fff}
.pp-cta:hover{filter:brightness(1.06)}
.pp-nota{color:var(--dim);font-size:.78rem;margin-top:11px;line-height:1.55}
.pp-conectar{display:flex;flex-wrap:wrap;align-items:center;gap:11px;margin-bottom:18px;
  padding:13px 17px;border-radius:13px;background:var(--navy-soft);border:1px solid var(--line-2)}
.pp-conectar form{margin:0}
.pp-rel{color:var(--muted);font-size:.88rem;font-weight:600}
[data-theme="dark"] .pp-conectar{background:#12203a}
/* en la ficha pública el post no lleva marco propio: ya está dentro del panel */
.muro-post-pub{border:0;box-shadow:none;padding:0 0 16px;margin-bottom:16px;border-radius:0;
  border-bottom:1px solid var(--line);background:transparent}
.muro-post-pub:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.pp-pie{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
@media(max-width:560px){
  .pp-cab{gap:13px}
  .pp-ava{width:66px;height:66px;border-radius:16px;font-size:1.5rem}
  .pp-id h1{font-size:1.35rem}
  .com-filtros{flex-direction:column;align-items:stretch}
  .com-selects select{max-width:none;flex:1}
}

/* ── Tickets ── */
.tk-nuevo,.tk-otros{border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:14px;background:var(--panel)}
.tk-nuevo>summary,.tk-otros>summary{cursor:pointer;font-weight:700;color:var(--navy);font-family:var(--display)}
.tk-form{margin-top:14px}
.tk-item{border:1px solid var(--line);border-left:4px solid var(--line-2);border-radius:14px;
  padding:12px 18px;margin-bottom:12px;background:var(--panel);scroll-margin-top:90px}
.tk-item[open]{border-left-color:var(--acc)}
.tk-item>summary{cursor:pointer;display:flex;align-items:center;gap:10px;flex-wrap:wrap;list-style:none}
.tk-item>summary::-webkit-details-marker{display:none}
.tk-ref{font-family:var(--display);font-weight:800;color:var(--navy);font-size:.9rem}
.tk-asunto{flex:1 1 200px;color:var(--text);font-weight:600;font-size:.92rem}
.tk-fecha{color:var(--dim);font-size:.78rem}
.tk-badge{font-size:.72rem;font-weight:800;padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.4px}
.tk-abierto{background:rgba(217,119,6,.14);color:#b45309}
.tk-proceso{background:rgba(47,127,240,.14);color:#2f7ff0}
.tk-cerrado{background:rgba(10,125,82,.14);color:#0a7d52}
.tk-meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.79rem;margin:12px 0 4px}
/* progreso abierto -> en proceso -> cerrado */
.tk-pasos{display:flex;gap:0;list-style:none;margin:14px 0 18px;padding:0}
.tk-pasos li{flex:1;position:relative;text-align:center;font-size:.74rem;color:var(--dim);padding-top:20px}
.tk-pasos li span{position:absolute;top:2px;left:50%;transform:translateX(-50%);width:12px;height:12px;
  border-radius:50%;background:var(--bg-2);border:2px solid var(--line-2)}
.tk-pasos li::before{content:"";position:absolute;top:7px;left:0;width:50%;height:2px;background:var(--line-2)}
.tk-pasos li::after{content:"";position:absolute;top:7px;right:0;width:50%;height:2px;background:var(--line-2)}
.tk-pasos li:first-child::before,.tk-pasos li:last-child::after{display:none}
.tk-pasos li.hecho span,.tk-pasos li.activo span{background:var(--acc);border-color:var(--acc)}
.tk-pasos li.hecho::before,.tk-pasos li.hecho::after,.tk-pasos li.activo::before{background:var(--acc)}
.tk-pasos li.activo{color:var(--navy);font-weight:700}
.tk-pasos li.hecho{color:var(--muted)}
/* hilo de mensajes */
.tk-hilo{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.tk-msg{max-width:88%;padding:10px 14px;border-radius:14px;font-size:.88rem;line-height:1.6}
.tk-msg.de-cliente{align-self:flex-end;background:var(--navy);color:#fff}
.tk-msg.de-admin{align-self:flex-start;background:var(--bg-2);color:var(--text);border:1px solid var(--line)}
.tk-msg-cab{display:flex;gap:8px;align-items:baseline;margin-bottom:4px;font-size:.76rem;opacity:.85}
.tk-msg p{margin:0}
.tk-adj{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tk-adj img{width:84px;height:84px;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,.25);display:block}
.tk-msg.de-admin .tk-adj img{border-color:var(--line)}
.tk-responder textarea{width:100%;padding:10px 13px;border:1px solid var(--line-2);border-radius:10px;
  background:var(--bg);color:var(--text);font-family:var(--body);font-size:.9rem;resize:vertical}
.tk-responder-pie{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.tk-responder-pie input[type=file]{flex:1 1 200px;font-size:.8rem;color:var(--muted)}
.tk-acciones{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:640px){
  .perfil-grid{grid-template-columns:1fr}
  .tk-msg{max-width:96%}
  .tk-item>summary{gap:6px}
  .tk-asunto{flex-basis:100%;order:3}
}

/* ── Selector de período del panel de visitas ── */
.rango-bar{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.rango-presets{display:flex;gap:6px;flex-wrap:wrap}
.rango-presets a{padding:5px 13px;border-radius:9px;text-decoration:none;font-size:.82rem;
  background:var(--bg-2);color:var(--muted);border:1px solid var(--line)}
.rango-presets a.on{background:var(--navy);color:#fff;font-weight:700;border-color:var(--navy)}
.rango-cal{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rango-cal label{display:flex;gap:6px;align-items:center;font-size:.82rem;color:var(--muted)}
.rango-cal input[type=date]{padding:7px 10px;border:1px solid var(--line-2);border-radius:9px;
  background:var(--panel);color:var(--text);font-family:var(--body);font-size:.84rem}
.rango-limpiar{color:var(--dim);font-size:.8rem;text-decoration:none}
.rango-limpiar:hover{color:#c0392b}

/* ── Etiquetas (chips) del panel de visitas ──
   Cada una es un filtro que se pulsa: quién (personas/robots), país,
   región o ciudad. Llevan su propia cifra para leerse como un KPI. */
.vis-tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px;
  padding-top:14px;border-top:1px dashed var(--line)}
.vis-tags+.vis-tags{border-top:0;padding-top:0;margin-top:8px}
.vis-tags-lbl{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
  min-width:52px;font-weight:700}
.vis-tag{display:inline-flex;gap:7px;align-items:center;padding:5px 12px;border-radius:999px;
  text-decoration:none;font-size:.82rem;background:var(--bg-2);color:var(--muted);border:1px solid var(--line)}
.vis-tag b{font-variant-numeric:tabular-nums;color:var(--text)}
.vis-tag:hover{border-color:var(--acc);color:var(--text)}
.vis-tag.on{background:var(--navy);border-color:var(--navy);color:#fff}
.vis-tag.on b{color:#fff}
.vis-tag.bot.on{background:#6b7280;border-color:#6b7280}
.vis-tag.limpiar{border-style:dashed;color:var(--dim)}
.vis-tag.limpiar:hover{color:#c0392b;border-color:#c0392b}
.vis-buscar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vis-buscar input[type=search]{padding:7px 12px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--panel);color:var(--text);font-family:var(--body);font-size:.84rem;min-width:220px}
.vis-activo{margin:12px 0 0;font-size:.84rem;color:var(--muted)}
.vis-link{color:inherit;text-decoration:none;border-bottom:1px dotted var(--line-2)}
.vis-link:hover{color:var(--acc);border-bottom-color:var(--acc)}
.vis-fila-on{background:var(--navy-soft)}
/* Resumen de robots: una línea en vez de cien filas de crawlers */
.vis-bots{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:12px 16px;border-radius:12px;background:var(--bg-2);border:1px dashed var(--line-2);
  margin-bottom:14px;font-size:.86rem;color:var(--muted)}
.vis-bots b{color:var(--text)}
.vis-bots small{color:var(--dim);font-size:.78rem}
/* Paginación */
.vis-pags{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:14px}
.vis-pags a{padding:6px 12px;border-radius:9px;text-decoration:none;font-size:.82rem;
  background:var(--bg-2);color:var(--muted);border:1px solid var(--line);font-variant-numeric:tabular-nums}
.vis-pags a:hover{border-color:var(--acc);color:var(--text)}
.vis-pags a.on{background:var(--navy);color:#fff;font-weight:700;border-color:var(--navy)}
.vis-pags-sep{color:var(--dim);padding:0 2px}
@media (max-width:640px){
  .vis-tags-lbl{min-width:0;flex-basis:100%}
  .vis-buscar input[type=search]{min-width:0;flex:1}
}
/* ============================================================
   PANEL DE ADMINISTRACIÓN — marco de aplicación
   ------------------------------------------------------------
   Barra lateral agrupada + cabecera propia, al estilo del panel
   de DNEYRA. El contenido ocupa TODO el ancho disponible: en un
   monitor grande el contenedor centrado de 1200 px dejaba media
   pantalla vacía. En móvil el menú es un cajón y las tablas se
   convierten en tarjetas.
   Todo cuelga de .adm-* / body.adm-layout: no afecta al sitio.
   ============================================================ */
body.adm-layout > header,
body.adm-layout > footer,
body.adm-layout .fab-wrap,
body.adm-layout .chat-widget,
body.adm-layout .app-tabbar,   /* la barra de app del sitio público navega FUERA del panel */
body.adm-layout #geoBar{display:none !important}
/* El body reserva 79 px para el header fijo del sitio; en el panel ese
   header no existe, así que ese hueco era una franja en blanco. */
body.adm-layout{background:var(--bg-2);padding-top:0 !important}

/* Resumen global en UNA línea de chips: antes eran cinco tarjetas de 100 px
   de alto que empujaban el contenido de cada sección fuera de la pantalla. */
.adm-resumen{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  padding:10px 20px;background:var(--panel);border-bottom:1px solid var(--line)}
.adm-res{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  background:var(--bg-2);border:1px solid var(--line);font-size:.82rem;color:var(--muted);
  text-decoration:none;white-space:nowrap}
.adm-res:hover{border-color:var(--acc);color:var(--text)}
.adm-res b{font-variant-numeric:tabular-nums;color:var(--navy);font-family:var(--display);font-size:.95rem}
.adm-res.aviso b{color:#d33}
.adm-res.acc b{color:var(--acc)}

.adm-shell{--adm-side:252px;--adm-mini:66px;--adm-top:60px;
  display:grid;grid-template-columns:var(--adm-side) 1fr;min-height:100vh}
/* El ancho del aside se fija con una regla propia además de la variable:
   con `width:var(--adm-side)` heredada, Chrome no siempre re-resolvía el
   valor al añadir la clase y la barra se quedaba ancha con los iconos. */
.adm-shell.mini{--adm-side:66px}
.adm-shell.mini .adm-side{width:66px}

/* ── Barra lateral ── */
.adm-side{position:fixed;top:0;left:0;bottom:0;width:var(--adm-side);z-index:60;
  background:var(--navy);color:#c7d2e0;display:flex;flex-direction:column;
  overflow-x:hidden;overflow-y:auto;transition:width .22s ease,transform .22s ease}
.adm-side::-webkit-scrollbar{width:7px}
.adm-side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:4px}
.adm-side-top{height:var(--adm-top);display:flex;align-items:center;padding:0 14px;flex:0 0 auto;
  border-bottom:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.16)}
.adm-side-logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;overflow:hidden}
.adm-side-mark{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--acc),var(--acc-2));font-family:var(--display);font-weight:800;font-size:1.05rem;color:#fff}
.adm-side-name{font-family:var(--display);font-weight:700;font-size:.98rem;line-height:1.1;white-space:nowrap}
.adm-side-name small{display:block;font-family:var(--body);font-weight:400;font-size:.68rem;color:#8ea3bd;
  letter-spacing:.05em;text-transform:uppercase}
.adm-nav{padding:10px 0 20px;flex:1 1 auto}
.adm-nav-head{width:100%;display:flex;align-items:center;gap:11px;padding:11px 16px;background:none;border:0;
  color:#9fb3cc;font:inherit;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  cursor:pointer;text-align:left}
.adm-nav-head:hover{color:#fff}
.adm-nav-arrow{margin-left:auto;transition:transform .2s ease;font-size:1rem;line-height:1}
.adm-nav-group.open .adm-nav-arrow{transform:rotate(90deg)}
.adm-nav-sub{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;transition:max-height .25s ease}
.adm-nav-group.open .adm-nav-sub{max-height:420px}
.adm-nav-link{display:flex;align-items:center;gap:11px;padding:10px 16px;color:#c7d2e0;text-decoration:none;
  font-size:.9rem;white-space:nowrap;border-left:3px solid transparent}
.adm-nav-link:hover{background:rgba(255,255,255,.07);color:#fff}
.adm-nav-link.on{background:rgba(255,255,255,.12);color:#fff;font-weight:700;border-left-color:var(--acc)}
.adm-nav-ico{flex:0 0 22px;width:22px;text-align:center;font-size:1rem}
.adm-nav-txt{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}
.adm-pill{flex:0 0 auto;background:#d33;color:#fff;border-radius:999px;padding:1px 8px;font-size:.7rem;font-weight:800}
.adm-nav-salir{margin:16px 12px 0;border-radius:10px;background:rgba(255,255,255,.08);border-left:0;justify-content:center}
.adm-nav-salir:hover{background:#c0392b;color:#fff}
/* Plegado: solo iconos, y el rótulo aparece al pasar el ratón */
.adm-shell.mini .adm-nav-txt,
.adm-shell.mini .adm-side-name,
.adm-shell.mini .adm-nav-arrow,
.adm-shell.mini .adm-nav-head{display:none}
.adm-shell.mini .adm-nav-sub{max-height:none}
.adm-shell.mini .adm-nav-link{justify-content:center;padding:12px 0;position:relative}
.adm-shell.mini .adm-pill{position:absolute;top:5px;right:9px;padding:0 5px;font-size:.62rem}
.adm-shell.mini .adm-side-top{justify-content:center;padding:0}

/* ── Cabecera del panel ── */
.adm-main{grid-column:2;min-width:0;display:flex;flex-direction:column}
.adm-top{position:sticky;top:0;z-index:50;height:var(--adm-top);display:flex;align-items:center;gap:14px;
  padding:0 20px;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.05)}
.adm-burger{background:none;border:0;font-size:1.25rem;line-height:1;color:var(--text);cursor:pointer;
  padding:8px 10px;border-radius:9px}
.adm-burger:hover{background:var(--bg-2)}
.adm-top-title{font-family:var(--display);font-weight:800;font-size:1.12rem;color:var(--navy);margin:0;white-space:nowrap}
.adm-buscar{position:relative;flex:1 1 220px;max-width:340px;margin-left:auto}
.adm-buscar input{width:100%;height:36px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--bg-2);color:var(--text);font-family:var(--body);font-size:.85rem}
.adm-buscar input:focus{background:var(--panel);border-color:var(--acc);outline:none}
.adm-buscar-res{position:absolute;top:42px;left:0;right:0;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);overflow:hidden;z-index:70}
/* 🔴 Solo la caja de la BARRA (el mismo #admBuscarRes reaprovechado dentro de
   dialog.buscar-modal ya se reancla más abajo y no debe heredar esto).
   Dos males medidos en el centro SPAG a 1440×900:
   · sin tope de alto, con «usu» la lista medía 1344px — seguía medio metro
     por debajo de la ventana y no había forma de llegar a esos resultados;
   · clavada al ancho del input (140px ahí, porque la barra va apretada),
     cada resultado con persona y correo se partía en ocho renglones.
   Tope con desplazamiento propio y ancho de lectura anclado a la derecha. */
.adm-buscar .adm-buscar-res{left:auto;right:0;width:min(340px,calc(100vw - 26px));
  max-height:min(62vh,520px);overflow-y:auto}
.adm-buscar-res a{display:block;padding:9px 14px;font-size:.86rem;color:var(--text);text-decoration:none}
.adm-buscar-res a:hover{background:var(--bg-2)}
.adm-buscar-nada{display:block;padding:9px 14px;font-size:.84rem;color:var(--dim)}
.adm-top-acc{display:flex;align-items:center;gap:10px;position:relative}
.adm-lang-pick{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted)}
.adm-lang-pick select{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:8px;padding:4px 8px;font:inherit;font-weight:600;max-width:148px}
.adm-lang-lbl{font-weight:700;letter-spacing:.02em}
.adm-top-user{font-size:.86rem;color:var(--muted);font-weight:600;white-space:nowrap}
.adm-campana{position:relative;background:none;border:0;font-size:1.15rem;cursor:pointer;padding:7px 9px;border-radius:9px}
.adm-campana:hover{background:var(--bg-2)}
.adm-campana.viva{animation:admToc 1.4s ease 3}
@keyframes admToc{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-7deg)}}
.adm-campana-num{position:absolute;top:1px;right:1px;background:#d33;color:#fff;border-radius:999px;
  padding:0 5px;font-size:.62rem;font-weight:800;line-height:1.5}
.adm-noti{position:absolute;top:46px;right:0;width:340px;max-width:88vw;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);z-index:80;overflow:hidden}
.adm-noti-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--line)}
.adm-noti-lista{max-height:380px;overflow-y:auto}
.adm-noti-item{display:flex;gap:11px;padding:11px 14px;text-decoration:none;color:var(--text);
  border-bottom:1px solid var(--line);font-size:.85rem}
.adm-noti-item:hover{background:var(--bg-2)}
.adm-noti-ico{flex:0 0 auto;font-size:1.1rem}
.adm-noti-hora{color:var(--dim)}
.adm-noti .empty{padding:22px 14px;text-align:center}

/* ── Expediente de una empresa (vista "todo en uno" del SPAG) ── */
.emp-ficha{border-left:4px solid var(--acc)}
.emp-head{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.emp-avatar{flex:0 0 auto;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--navy),var(--acc));color:#fff;
  font-family:var(--display);font-weight:800;font-size:1.25rem}
.emp-id{flex:1 1 260px;min-width:0}
.emp-id h3{margin-bottom:4px}
.emp-id p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.5}
.emp-links{margin-top:6px !important;font-size:.82rem}
.emp-links a{color:var(--acc);font-weight:700;text-decoration:none}
.emp-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:18px 0 4px}
.emp-kpis>div{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.emp-kpis span{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--dim);font-weight:700}
.emp-kpis b{display:block;font-family:var(--display);font-size:1.3rem;color:var(--navy);margin-top:2px}
.emp-kpis small{display:block;color:var(--muted);font-size:.76rem}
.emp-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:18px}
.emp-col h4{font-family:var(--display);color:var(--navy);font-size:.98rem;margin-bottom:10px}
.emp-col h4 small{color:var(--dim);font-weight:400}
.emp-sub{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--dim);font-weight:700;margin-bottom:6px}
.emp-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.emp-lista li{background:var(--bg-2);border:1px solid var(--line);border-radius:11px;padding:9px 12px;font-size:.86rem}
.emp-lista li b{display:inline-block;color:var(--text)}
.emp-lista li small{display:block;color:var(--muted);font-size:.78rem;line-height:1.4}
.emp-lista li small.dim{color:var(--dim);font-size:.74rem}
.emp-lista a{text-decoration:none;color:var(--acc)}

/* ── Contenido: TODO el ancho ── */
.adm-body{padding:24px 24px 60px;flex:1 1 auto;min-width:0}
.adm-body .kpis{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
@media (min-width:1800px){
  .adm-body{padding:28px 40px 70px}
  .adm-body .kpis{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
}

/* ── Tabletas y móviles: el menú es un cajón ── */
@media (max-width:1024px){
  .adm-shell{grid-template-columns:1fr}
  .adm-side{transform:translateX(-100%);box-shadow:0 0 40px rgba(0,0,0,.35);width:262px}
  .adm-shell.mini .adm-side{width:262px}
  .adm-shell.abierto .adm-side{transform:none}
  .adm-shell.abierto::after{content:"";position:fixed;inset:0;background:rgba(4,12,24,.45);z-index:55}
  .adm-main{grid-column:1}
  .adm-shell.mini{--adm-side:262px}
  .adm-shell.mini .adm-nav-txt,.adm-shell.mini .adm-side-name,
  .adm-shell.mini .adm-nav-arrow,.adm-shell.mini .adm-nav-head{display:flex}
  .adm-shell.mini .adm-side-name{display:block}
  .adm-shell.mini .adm-nav-head{display:flex}
  .adm-shell.mini .adm-nav-link{justify-content:flex-start;padding:10px 16px}
}
@media (max-width:760px){
  .adm-body{padding:16px 14px 50px}
  /* Los chips del resumen en UNA línea que se desliza, como en una app:
     apilados en tres filas se comían media pantalla. */
  .adm-resumen{flex-wrap:nowrap;overflow-x:auto;padding:8px 12px;scrollbar-width:none}
  .adm-resumen::-webkit-scrollbar{display:none}
  .adm-res{flex:0 0 auto}
  .emp-head{gap:12px}
  .emp-avatar{width:44px;height:44px;border-radius:12px;font-size:1rem}
  .emp-kpis{grid-template-columns:1fr 1fr;gap:8px}
  .emp-kpis>div{padding:10px}
  .emp-kpis b{font-size:1.1rem}
  .adm-top{padding:0 12px;gap:8px}
  .adm-top-title{font-size:1rem}
  .adm-top-user{display:none}
  .adm-lang-lbl{display:none}
  .adm-lang-pick select{max-width:72px;font-size:.72rem;padding:3px 4px}
  .adm-buscar{max-width:none}
  /* En pantalla estrecha el buscador robaba el sitio del título: el menú
     se abre con el botón de la izquierda, que es lo natural en el móvil. */
  @media (max-width:560px){ .adm-buscar{display:none} }
  .adm-body .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .adm-body .kpi{padding:10px 11px;border-radius:11px}
  .adm-body .kpi .num{font-size:1.35rem}
  .adm-body .panel-box{padding:16px;border-radius:16px}

  /* ── Tablas convertidas en TARJETAS ──
     Cada fila pasa a ser una ficha y cada celda muestra el título de
     su columna (data-lbl lo pone el JS leyendo el <thead>). */
  /* La etiqueta va ENCIMA del valor, no al lado: hay celdas con formularios,
     selectores y varias líneas, y a dos columnas se desbordaban. */
  .adm-body table.adm-cards,
  .adm-body table.adm-cards tbody,
  .adm-body table.adm-cards tr,
  .adm-body table.adm-cards td{display:block;width:100%;max-width:100%}
  .adm-body table.adm-cards thead{display:none}
  .adm-body table.adm-cards tr{background:var(--panel);border:1px solid var(--line);border-radius:14px;
    padding:12px 14px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
  .adm-body table.adm-cards td{border:0;padding:7px 0;text-align:left;overflow-wrap:anywhere}
  .adm-body table.adm-cards td+td{border-top:1px dashed var(--line)}
  .adm-body table.adm-cards td::before{content:attr(data-lbl);display:block;margin-bottom:2px;
    color:var(--dim);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
  .adm-body table.adm-cards td:empty{display:none}
  .adm-body table.adm-cards td[data-lbl=""]::before{display:none}
  .adm-body .tabla-scroll{overflow:visible}
  .adm-body table.adm-cards select,
  .adm-body table.adm-cards input[type=text]{max-width:100%}
}

/* ── Centro SPAG: navegación multiempresa y dashboard ejecutivo ── */
.adm-side-close{display:none;margin-left:auto;width:34px;height:34px;border:0;border-radius:9px;background:rgba(255,255,255,.1);color:#fff;font-size:1.35rem;cursor:pointer}
.spag-side-company{margin:12px 12px 2px;padding:12px;border:1px solid rgba(255,255,255,.11);border-radius:13px;background:rgba(255,255,255,.06);overflow:hidden}
.spag-side-company span,.spag-side-company small{display:block;color:#8fa9c6;font-size:.66rem}.spag-side-company span{text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.spag-side-company b{display:block;margin:4px 0 2px;color:#fff;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-erp-nav{margin:11px 9px 0;padding:10px 3px 7px;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.08)}
.adm-erp-label{padding:4px 13px 8px;color:#718dab;font-size:.65rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.adm-erp-link{border-radius:9px;border-left:0;margin:1px 0;padding:9px 12px}.adm-erp-link .adm-nav-ico{color:#65d9e5}
.adm-erp-link.disabled{opacity:.38;cursor:not-allowed}.adm-erp-link.disabled:hover{background:transparent;color:#c7d2e0}
.adm-shell.mini .spag-side-company,.adm-shell.mini .adm-erp-label{display:none}
.adm-shell.mini .adm-erp-nav{margin:8px 6px;padding:8px 0}

.adm-top-heading{min-width:150px}.adm-top-heading small{display:block;color:var(--dim);font-size:.65rem;margin-top:1px;white-space:nowrap}
.spag-company-switch{height:40px;display:flex;align-items:center;gap:6px;padding:4px 5px 4px 11px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2);margin-left:auto}
.spag-company-switch label{color:var(--dim);font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.spag-company-switch select{height:30px;min-width:175px;max-width:240px;border:0;background:transparent;color:var(--text);font:600 .78rem var(--body);outline:0}
.spag-company-switch button{height:29px;padding:0 10px;border:0;border-radius:8px;background:var(--navy);color:#fff;font:700 .72rem var(--body);cursor:pointer}
.adm-open-erp{height:40px;display:inline-flex;align-items:center;gap:8px;padding:0 13px;border-radius:11px;background:linear-gradient(135deg,var(--acc),var(--acc-2));color:#fff;text-decoration:none;font-size:.78rem;font-weight:800;white-space:nowrap;box-shadow:0 6px 14px rgba(11,182,196,.18)}
.adm-open-erp span{font-size:1rem}.adm-top .adm-buscar{flex:0 1 250px;margin-left:0}.adm-top-acc{margin-left:0}

.spag-hero{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:18px;padding:26px 28px;border-radius:20px;color:#fff;
  background:radial-gradient(circle at 82% 10%,rgba(55,196,240,.32),transparent 27%),linear-gradient(125deg,#061d43,#084b91 66%,#087ab2);box-shadow:0 16px 38px rgba(7,47,94,.2)}
.spag-hero>div:first-child{max-width:780px}.spag-eyebrow{display:block;margin-bottom:7px;color:var(--acc);font-size:.67rem;line-height:1.2;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.spag-hero .spag-eyebrow{color:#74e9ef}.spag-hero h2{margin:0 0 9px;font:800 clamp(1.35rem,2.3vw,2rem)/1.15 var(--display);letter-spacing:-.02em}.spag-hero p{margin:0;color:#c2d8ef;font-size:.86rem;line-height:1.55}
.spag-hero-status{flex:0 0 255px;padding:15px 17px;border:1px solid rgba(255,255,255,.16);border-radius:15px;background:rgba(255,255,255,.08);position:relative}
.spag-hero-status small,.spag-hero-status b,.spag-hero-status>span:last-child{display:block}.spag-hero-status small{color:#91b8dc;font-size:.66rem;text-transform:uppercase;letter-spacing:.06em}.spag-hero-status b{margin:3px 0;color:#fff;font-size:.9rem}.spag-hero-status>span:last-child{color:#b6cfe8;font-size:.71rem}
.spag-status-dot{position:absolute;right:14px;top:14px;width:9px;height:9px;border-radius:50%;background:#ef9f42}.spag-status-dot.on{background:#36d6a0;box-shadow:0 0 0 5px rgba(54,214,160,.14)}

.spag-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.spag-kpis-global{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.spag-kpi{display:flex;align-items:center;gap:13px;min-width:0;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--panel);text-decoration:none;box-shadow:var(--shadow-sm);transition:.2s}
.spag-kpi:hover{transform:translateY(-2px);border-color:var(--line-2);box-shadow:0 9px 24px rgba(18,49,87,.1)}.spag-kpi-icon{flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#e9f2ff;color:#1971d4;font-size:1.2rem}.spag-kpi.cyan .spag-kpi-icon{background:#e4fbfa;color:#078d91}.spag-kpi.green .spag-kpi-icon{background:#e6f8ef;color:#138453}.spag-kpi.amber .spag-kpi-icon{background:#fff5df;color:#c88117}.spag-kpi.violet .spag-kpi-icon{background:#f2ebff;color:#7950c7}.spag-kpi.demo .spag-kpi-icon{background:#ede0ff;color:#5b2fae}.spag-kpi.demo{border-color:#e0d0ff}
.spag-kpi div{min-width:0}.spag-kpi small,.spag-kpi em{display:block}.spag-kpi small{color:var(--muted);font-size:.7rem}.spag-kpi b{font:800 1.45rem var(--display);color:var(--navy)}.spag-kpi em{color:var(--dim);font-size:.66rem;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spag-grid-main{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,.75fr);gap:18px}.spag-grid-main .panel-box,.spag-grid-feed .panel-box{margin-bottom:18px}.spag-box-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.spag-box-head h3{margin:0}.spag-box-head>a{color:var(--acc-2);font-size:.75rem;font-weight:800;text-decoration:none;white-space:nowrap}
.spag-quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.spag-quick{display:flex;min-width:0;flex-direction:column;gap:3px;padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--bg-2);color:var(--text);text-decoration:none;transition:.2s}.spag-quick:hover{background:var(--panel);border-color:var(--acc);transform:translateY(-1px)}.spag-quick>span{width:30px;height:30px;display:grid;place-items:center;margin-bottom:5px;border-radius:9px;background:var(--panel);color:var(--acc-2);font-weight:800}.spag-quick b{font-size:.82rem;color:var(--navy)}.spag-quick small{color:var(--dim);font-size:.68rem}.spag-quick.primary{background:linear-gradient(135deg,#073b7b,#0874bd);border-color:transparent}.spag-quick.primary>span{background:rgba(255,255,255,.13);color:#fff}.spag-quick.primary b{color:#fff}.spag-quick.primary small{color:#bcd4ec}
.spag-empty-company{display:flex;align-items:center;gap:15px;min-height:150px;padding:22px;border:1px dashed var(--line-2);border-radius:14px;background:var(--bg-2)}.spag-empty-company>span{font-size:2rem}.spag-empty-company b{color:var(--navy)}.spag-empty-company p{margin:4px 0 0;color:var(--muted);font-size:.8rem}
.spag-company-context{display:flex;gap:6px;flex-wrap:wrap;margin:-5px 0 13px}.spag-company-context span{padding:4px 9px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line);color:var(--muted);font-size:.65rem;font-weight:700}
.spag-erp-board{border-top:3px solid var(--acc)}.spag-board-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.spag-board-kpis>a{display:flex;min-width:0;flex-direction:column;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);color:var(--text);text-decoration:none;transition:.18s}.spag-board-kpis>a:hover{border-color:var(--acc);background:var(--panel);transform:translateY(-1px)}.spag-board-kpis span,.spag-board-kpis small{color:var(--dim);font-size:.65rem}.spag-board-kpis span{text-transform:uppercase;font-weight:800;letter-spacing:.04em}.spag-board-kpis b{margin:4px 0;color:var(--navy);font:800 1.03rem var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spag-today-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.78rem}.spag-today-row span{display:flex;align-items:center;gap:9px;color:var(--muted)}.spag-today-row i{width:27px;height:27px;display:grid;place-items:center;border-radius:8px;background:#e7f7ee;color:#159153;font-style:normal}.spag-today-row i.buy{background:#e9f2ff;color:#2670c8}.spag-today-row i.ticket{background:#fff3df;color:#bd781a}.spag-today-row i.order{background:#f1eaff;color:#7350b5}.spag-today-row b{font:800 1rem var(--display);color:var(--navy)}.spag-today-link{display:block;margin-top:15px;color:var(--acc-2);font-size:.72rem;font-weight:800;text-decoration:none}
.spag-grid-feed{display:grid;grid-template-columns:1fr 1fr;gap:18px}.spag-feed-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:11px;padding:10px 0;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}.spag-feed-row:last-child{border:0}.spag-avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#e8f2ff;color:#1969bd;font-size:.72rem;font-weight:800}.spag-avatar.company{background:#e5f8f5;color:#078b78}.spag-feed-row>span:nth-child(2){min-width:0}.spag-feed-row b,.spag-feed-row small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spag-feed-row b{font-size:.78rem}.spag-feed-row small{color:var(--dim);font-size:.66rem;margin-top:2px}.spag-feed-row em{padding:3px 7px;border-radius:999px;background:var(--bg-2);color:var(--muted);font-size:.63rem;font-style:normal}.spag-feed-row em.ok{background:#e6f8ef;color:#138453}.spag-feed-row em.wait{background:#fff3df;color:#af711a}

@media(max-width:1280px){
  .adm-top-heading small,.spag-company-switch label,.adm-top .adm-buscar{display:none}.spag-company-switch{margin-left:auto}.spag-kpis{grid-template-columns:1fr 1fr}
}
@media(max-width:1024px){
  .adm-side-close{display:grid;place-items:center}.adm-shell.mini .spag-side-company,.adm-shell.mini .adm-erp-label{display:block}.adm-shell.mini .adm-erp-nav{margin:11px 9px;padding:10px 3px 7px}
}
@media(max-width:760px){
  .adm-top{height:64px}.adm-top-heading{min-width:0;flex:1}.adm-top-heading small{display:none}.adm-top-title{overflow:hidden;text-overflow:ellipsis;max-width:130px}
  .spag-company-switch{padding:3px 4px;margin-left:0;height:38px}.spag-company-switch select{min-width:104px;max-width:130px;font-size:.7rem}.spag-company-switch button{display:none}.adm-open-erp{width:38px;padding:0;justify-content:center;font-size:0}.adm-open-erp span{font-size:1rem}.adm-top-acc{gap:2px}.adm-campana{padding:6px}
  .spag-hero{align-items:flex-start;flex-direction:column;padding:21px;gap:17px}.spag-hero-status{flex:0 0 auto;width:100%}.spag-kpis{grid-template-columns:1fr 1fr;gap:9px}.spag-kpi{padding:12px;gap:9px}.spag-kpi-icon{width:34px;height:34px;flex-basis:34px}.spag-kpi b{font-size:1.18rem}.spag-kpi em{display:none}
  .spag-grid-main,.spag-grid-feed{grid-template-columns:1fr}.spag-quick-grid{grid-template-columns:1fr 1fr}.spag-quick{padding:12px}.spag-grid-main .panel-box,.spag-grid-feed .panel-box{margin-bottom:0}.spag-grid-main,.spag-grid-feed{margin-bottom:16px}
  .spag-board-kpis{grid-template-columns:1fr 1fr}.spag-erp-board{margin-top:0}
}
@media(max-width:430px){.spag-kpi small{font-size:.64rem}.spag-quick-grid{grid-template-columns:1fr}.adm-top-title{max-width:92px}.spag-company-switch select{max-width:112px}}

/* ============================================================
   Plataforma Adiasis unificada: ERP, cuenta y perfil
   ============================================================ */
body.panel-layout .platform-shell{min-height:100vh;background:#f1f5fb}
.platform-body{width:100%;max-width:none}
.platform-context{min-height:48px;padding:7px 20px}
.platform-context .adm-res{background:var(--panel)}
.platform-company-switch{margin-left:auto}
.platform-profile{display:flex;align-items:center;gap:7px;height:38px;padding:0 11px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--navy);font-size:.78rem;font-weight:800;text-decoration:none;white-space:nowrap}
.platform-profile:hover{border-color:var(--acc);color:var(--acc-2)}
.platform-quickbar{display:flex;align-items:center;gap:6px;min-height:48px;padding:6px 20px;border-bottom:1px solid var(--line);background:var(--panel);overflow-x:auto;scrollbar-width:none}
.platform-quickbar::-webkit-scrollbar{display:none}.platform-quickbar>span{flex:0 0 auto;margin-right:4px;color:var(--dim);font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.platform-quickbar>a{flex:0 0 auto;display:inline-flex;align-items:center;height:34px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:var(--bg-2);color:var(--navy);font-size:.72rem;font-weight:750;text-decoration:none;white-space:nowrap}
.platform-quickbar>a:hover,.platform-quickbar>a.on{border-color:var(--acc);background:#e8f8fa;color:#087c87}.platform-quickbar>a.primary{border-color:transparent;background:linear-gradient(135deg,var(--navy),#075ba2);color:#fff}
.platform-page-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;padding:18px 20px;border:1px solid var(--line);border-radius:17px;background:var(--panel);box-shadow:var(--shadow-sm)}
.platform-page-head .dash-ident{margin:0}.platform-page-head .dash-ident h1{margin:0;color:var(--navy);font:800 1.35rem var(--display)}
.platform-page-head .dash-acts{display:flex;gap:9px;flex-wrap:wrap}
.platform-settings{grid-template-columns:220px minmax(0,1fr);gap:18px}
.platform-settings>.dash-side{top:80px;max-height:calc(100vh - 105px);border-radius:15px}
.platform-settings>.dash-side .ds-nav{display:flex}
.platform-settings>.dash-main{min-width:0}
.platform-body>.panel-box,.platform-body>.srv-hero,.platform-body>.srv-kpis,.platform-body>.srv-grid{max-width:none}

@media(max-width:1280px){
  .platform-profile span{display:none}.platform-profile{width:38px;padding:0;justify-content:center}
}
@media(max-width:1024px){
  .platform-company-switch{margin-left:auto}
  .platform-settings{display:block}
  .platform-settings>.dash-side{position:static!important;width:100%;max-height:none;margin:0 0 14px;padding:7px;border:1px solid var(--line);border-radius:14px;transform:none!important;box-shadow:none;background:var(--panel)}
  .platform-settings>.dash-side .ds-toggle{display:none!important}
  .platform-settings>.dash-side .ds-nav{display:flex!important;flex-direction:row;gap:5px;margin:0;overflow-x:auto;scrollbar-width:none}
  .platform-settings>.dash-side .ds-nav::-webkit-scrollbar{display:none}
  .platform-settings>.dash-side .ds-nav>a{flex:0 0 auto;min-height:38px;padding:8px 11px;border-radius:9px;white-space:nowrap}
  .platform-settings>.dash-side .ds-sep{display:none}
}
@media(max-width:760px){
  .platform-context{padding:7px 12px}.platform-page-head{align-items:flex-start;flex-direction:column;padding:15px}.platform-page-head .dash-acts{width:100%}.platform-page-head .dash-acts .btn{flex:1;justify-content:center}
  .platform-company-switch label,.platform-company-switch button{display:none}.platform-company-switch select{min-width:105px;max-width:132px}
  .platform-body{padding-top:14px}
}
@media(max-width:430px){.platform-profile{display:none}.platform-page-head .dash-ident .who{overflow-wrap:anywhere}.platform-settings>.dash-side{margin-left:-2px;margin-right:-2px;width:auto}}

/* Menú minimizado: cada icono abre únicamente el submenú de su módulo. */
@media(min-width:1025px){
  .adm-shell.mini .adm-nav-head{display:flex;justify-content:center;padding:12px 0;position:relative}
  .adm-shell.mini .adm-nav-head>.adm-nav-txt,.adm-shell.mini .adm-nav-head>.adm-nav-arrow{display:none}
  .adm-shell.mini .adm-nav-group>.adm-nav-sub{display:none;position:fixed;z-index:120;left:66px;top:var(--fly-top,70px);width:244px;max-height:min(72vh,520px);padding:7px;overflow-y:auto;border:1px solid rgba(255,255,255,.12);border-radius:0 13px 13px 0;background:var(--navy);box-shadow:14px 16px 34px rgba(0,20,50,.28)}
  .adm-shell.mini .adm-nav-group:hover>.adm-nav-sub,.adm-shell.mini .adm-nav-group:focus-within>.adm-nav-sub,.adm-shell.mini .adm-nav-group.fly>.adm-nav-sub{display:block}
  .adm-shell.mini .adm-nav-group>.adm-nav-sub::before{content:attr(data-label);display:block;padding:7px 11px 9px;color:#7f9ab8;font-size:.65rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
  .adm-shell.mini .adm-nav-group>.adm-nav-sub .adm-nav-link{justify-content:flex-start;min-height:39px;padding:9px 11px;border-left:0;border-radius:8px}
  .adm-shell.mini .adm-nav-group>.adm-nav-sub .adm-nav-txt{display:block}
  .adm-shell.mini .adm-nav-group>.adm-nav-sub .adm-pill{position:static;margin-left:auto;padding:1px 8px;font-size:.68rem}
  .adm-shell.mini .adm-nav-group>.adm-nav-sub li{list-style:none}
  .adm-shell.mini .adm-nav-salir{margin:12px 8px}.adm-shell.mini .adm-nav-salir .adm-nav-txt{display:none}
}

@media(max-width:760px){.platform-quickbar{padding:6px 12px}.platform-quickbar>span{display:none}}

/* ============================================================
   CAPTCHA propio "No soy un robot"
   ------------------------------------------------------------
   Mismo lenguaje visual que el resto del sitio; la casilla es
   grande y cómoda de tocar en el móvil.
   ============================================================ */
.cap-box{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:14px;
  padding:14px 16px;margin:16px 0}
.cap-check{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none;flex:1 1 auto}
.cap-check .cap-input{position:absolute;opacity:0;width:0;height:0}
.cap-mark{width:26px;height:26px;flex:0 0 26px;border-radius:7px;background:var(--panel);
  border:2px solid var(--line-2);display:grid;place-items:center;transition:.2s}
.cap-tick{opacity:0;transform:scale(.5);color:#fff;font-weight:900;font-size:.95rem;line-height:1;transition:.2s}
.cap-check:hover .cap-mark{border-color:var(--acc)}
.cap-box.ok .cap-mark{background:#0a9d5e;border-color:#0a9d5e}
.cap-box.ok .cap-tick{opacity:1;transform:scale(1)}
.cap-box.ok{border-color:#0a9d5e}
.cap-txt{font-size:.95rem;font-weight:600;color:var(--text)}
.cap-marca{display:flex;flex-direction:column;align-items:flex-end;text-align:right;
  font-family:var(--display);font-weight:700;font-size:.8rem;color:var(--dim);line-height:1.2}
.cap-marca small{font-family:var(--body);font-weight:400;font-size:.64rem;color:var(--dim);
  text-transform:uppercase;letter-spacing:.04em}
.cap-box.cap-falta{border-color:#c0392b;animation:capTiemble .35s}
@keyframes capTiemble{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.cap-noscript{flex-basis:100%;margin-top:10px;font-size:.88rem;color:var(--muted)}
.cap-noscript input{width:80px;padding:6px 10px;border:1px solid var(--line-2);border-radius:8px;
  background:var(--panel);color:var(--text);font-family:var(--body)}
@media (max-width:520px){
  .cap-marca{display:none}
}

/* ── Miniaturas en el listado de clientes ── */
.cli-nom{display:flex;gap:10px;align-items:flex-start}
.cli-foto{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:1px solid var(--line)}
.cli-logo{max-width:70px;max-height:28px;object-fit:contain;display:block;margin-bottom:4px}

/* ============================================================
   ÁRABE (RTL): aislar lo que NO debe espejarse
   ------------------------------------------------------------
   Con dir="rtl" el algoritmo bidi reordena los tokens neutros:
   "S/" salía "/S" y a la derecha del número, "US$" salía "$US" y
   el teléfono "+51 951 358 378" se leía al revés. `unicode-bidi:
   isolate` + `direction:ltr` los trata como un bloque LTR aparte.
   ============================================================ */
[dir="rtl"] .p-price .sym,
[dir="rtl"] .p-price .amount,
[dir="rtl"] .cmp-price,
[dir="rtl"] .p-ref,
[dir="rtl"] .cart-total b,
[dir="rtl"] .cs-row b,
[dir="rtl"] .kpi .num,
[dir="rtl"] .dm-curr,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] .adm-ip,
[dir="rtl"] .tk-ref{
  direction:ltr;
  unicode-bidi:isolate;
}
/* el precio completo (símbolo + importe + /mes) como una unidad LTR */
[dir="rtl"] .p-price{direction:ltr;unicode-bidi:isolate;display:inline-flex;align-items:baseline}
/* bandera y país del pie: sin que se peguen al espejar */
[dir="rtl"] .foot-country,[dir="rtl"] #footCountry{gap:8px}
[dir="rtl"] .flag-svg{margin-left:6px;margin-right:0}
/* flechas del carrusel: intercambiar lados en RTL */
[dir="rtl"] .hero-arrow-prev{left:auto;right:18px}
[dir="rtl"] .hero-arrow-next{right:auto;left:18px}

/* ── FAB del chat en RTL ──
   Anclado a la derecha, en árabe caía sobre el INICIO de cada línea (que es
   donde empieza a leerse) y tapaba el texto. Se espeja al lado izquierdo,
   que en RTL es el final de la línea, igual que en español. */
[dir="rtl"] .fab-wrap{right:auto;left:24px;align-items:flex-start}
[dir="rtl"] .fab-options{align-items:flex-start}
[dir="rtl"] .fab-opt{padding:10px 12px 10px 16px}
[dir="rtl"] .fab-opt:hover{transform:translateX(3px)}
[dir="rtl"] .fab-bubble{right:auto;left:68px}
[dir="rtl"] .fab-bubble::after{right:auto;left:-5px;
  border-right:0;border-top:0;
  border-left:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
[dir="rtl"] .fab-badge{right:auto;left:-3px}
[dir="rtl"] .theme-toggle{right:auto;left:24px}
@media(max-width:768px){
  [dir="rtl"] .fab-wrap{left:16px}
  [dir="rtl"] .theme-toggle{left:16px}
}

/* ============================================================
   ERP DE LA EMPRESA (panel del cliente)
   Ficha de empresa, equipo y permisos, inventario, punto de
   venta y facturación electrónica.
   ============================================================ */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla-scroll table{min-width:560px}

/* ---- Ficha de la empresa ---- */
.erp-ficha{display:grid;grid-template-columns:190px 1fr;gap:22px;align-items:start}
.erp-logo{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.erp-logo img{max-width:170px;max-height:120px;object-fit:contain;border-radius:12px;
  border:1px solid var(--line);background:#fff;padding:10px}
.erp-logo-vacio{width:120px;height:120px;border-radius:16px;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-family:var(--display);font-weight:800;font-size:2rem}
.erp-logo form{width:100%}
.erp-logo input[type=file]{font-size:.76rem;width:100%}
.erp-form{min-width:0}
@media(max-width:760px){ .erp-ficha{grid-template-columns:1fr} }

/* ---- Filtros de sección ---- */
.erp-filtros{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:16px}
.erp-filtros .field{margin:0;min-width:170px}
.erp-series-info{display:flex;gap:14px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:.82rem}
.erp-series-info b{color:var(--navy);font-family:var(--display)}
[data-theme="dark"] .erp-series-info b{color:#dbe6f7}

/* ---- Equipo, roles y permisos ---- */
.erp-chip-perm{display:inline-block;margin:2px 4px 2px 0;padding:2px 9px;border-radius:20px;
  background:var(--navy-soft);border:1px solid var(--line-2);color:var(--muted);font-size:.72rem;white-space:nowrap}
[data-theme="dark"] .erp-chip-perm{background:#12203a}
.erp-perms{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin-top:10px}
.erp-perm{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border-radius:11px;
  border:1px solid var(--line);background:var(--bg-2);cursor:pointer}
.erp-perm input{margin-top:3px}
.erp-perm b{display:block;font-size:.85rem;color:var(--navy)}
.erp-perm small{display:block;color:var(--dim);font-size:.75rem;line-height:1.35}
[data-theme="dark"] .erp-perm b{color:#dbe6f7}
.erp-roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.erp-rol{padding:14px;border-radius:13px;border:1px solid var(--line);background:var(--bg-2)}
.erp-rol b{display:block;color:var(--navy);margin-bottom:4px}
.erp-rol p{color:var(--muted);font-size:.82rem;margin-bottom:8px}
[data-theme="dark"] .erp-rol b{color:#dbe6f7}

/* ---- Punto de venta ---- */
/* El mostrador va en UNA columna: los ítems ocupan todo el ancho de lado a
   lado (antes quedaban en media pantalla y la tabla se estrechaba). */
.pos-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:start}
.pos-buscar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.pos-buscar .field{margin:0;flex:1;min-width:130px}
.pos-buscar button{flex:0 0 auto}
.pos-aviso{min-height:20px;font-size:.83rem;margin:8px 0;line-height:1.5}
.pos-aviso.ok{color:#178f4e;font-weight:600}
.pos-aviso.err{color:#c0392b;font-weight:600}
.pos-tabla td{vertical-align:middle}
.pos-tabla .pos-vacio td{color:var(--dim);text-align:center;padding:22px 10px}
.pos-in{width:92px;padding:6px 8px;border:1px solid var(--line-2);border-radius:8px;
  background:var(--bg-2);color:var(--text);font-size:.85rem;text-align:right}
.pos-imp{font-weight:700;white-space:nowrap}
.pos-del{border:none;background:transparent;color:#c0392b;font-size:1rem;cursor:pointer;padding:4px 6px;line-height:1}
.pos-del:hover{color:#e74c3c}
.pos-totales{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:16px;
  padding:14px 16px;border-radius:13px;background:var(--bg-2);border:1px solid var(--line)}
.pos-totales>div{display:flex;flex-direction:column;gap:2px}
.pos-totales span{color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.4px}
.pos-totales b{color:var(--navy);font-family:var(--display);font-size:1rem}
.pos-totales .pos-total b{font-size:1.4rem;color:var(--acc-2)}
[data-theme="dark"] .pos-totales b{color:#dbe6f7}
.pos-cond{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.pos-radio{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg-2);cursor:pointer}
.pos-radio b{display:block;color:var(--navy);font-size:.9rem}
.pos-radio small{display:block;color:var(--dim);font-size:.75rem}
[data-theme="dark"] .pos-radio b{color:#dbe6f7}
.pos-pago{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.pos-pago select,.pos-pago input{padding:8px 10px;border:1px solid var(--line-2);border-radius:9px;
  background:var(--bg-2);color:var(--text);font-size:.85rem;min-width:0}
.pos-pago select{flex:0 0 130px}
.pos-pago input[name="monto[]"]{flex:0 0 110px;text-align:right}
.pos-pago input[name="referencia[]"]{flex:1}
.pos-vuelto{margin-top:10px;padding:10px 13px;border-radius:11px;background:var(--navy-soft);
  font-size:.85rem;color:var(--muted)}
.pos-vuelto b{color:var(--navy);font-family:var(--display);margin:0 5px}
[data-theme="dark"] .pos-vuelto{background:#12203a}
[data-theme="dark"] .pos-vuelto b{color:#dbe6f7}
.pos-plan{margin-top:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.pos-plan-tit{grid-column:1/-1;font-weight:700;color:var(--navy);font-size:.85rem}
[data-theme="dark"] .pos-plan-tit{color:#dbe6f7}
.pos-plan>div{padding:9px 11px;border-radius:10px;border:1px solid var(--line);background:var(--bg-2);
  display:flex;flex-direction:column;gap:1px}
.pos-plan span{color:var(--muted);font-size:.74rem}
.pos-plan b{color:var(--navy);font-size:.95rem}
.pos-plan small{color:var(--dim);font-size:.72rem}
[data-theme="dark"] .pos-plan b{color:#dbe6f7}

/* ---- Detalle de la venta y facturación electrónica ---- */
.erp-doc-top{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.erp-doc-top small{color:var(--dim)}
.erp-doc-badges{display:flex;flex-wrap:wrap;gap:6px}
.erp-doc-cli{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:14px;
  padding:12px 14px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line)}
.erp-doc-cli span{display:block;color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.4px}
.erp-doc-cli b{color:var(--navy)}
[data-theme="dark"] .erp-doc-cli b{color:#dbe6f7}
.erp-cobro{display:flex;gap:6px;align-items:center}
.erp-cobro input,.erp-cobro select{padding:6px 8px;border:1px solid var(--line-2);border-radius:8px;
  background:var(--bg-2);color:var(--text);font-size:.82rem}
.erp-cobro input{width:92px;text-align:right}
.erp-fe-amb{padding:12px 15px;border-radius:12px;border:1px solid var(--line)}
.erp-fe-amb b{display:block;font-size:.95rem}
.erp-fe-amb small{color:var(--muted)}
.erp-fe-amb.beta{background:#fff8e6;border-color:#f0c96a}
.erp-fe-amb.prod{background:#fdeaea;border-color:#e39b9b}
[data-theme="dark"] .erp-fe-amb.beta{background:#2c2717;border-color:#6b5a24}
[data-theme="dark"] .erp-fe-amb.prod{background:#2e1a1a;border-color:#7a3b3b}
.erp-fe-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.erp-fe-btns form{margin:0}
.erp-cert{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:14px;
  padding:14px 16px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line)}
.erp-cert span{display:block;color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.4px}
.erp-cert b{color:var(--navy)}
[data-theme="dark"] .erp-cert b{color:#dbe6f7}
/* Aviso de estado PERMANENTE dentro del panel. No usar .alert aquí: esa clase
   la borra app.js a los 4 s porque está pensada para los mensajes flash. */
.erp-nota{margin:10px 0;padding:11px 14px;border-radius:11px;font-size:.88rem;line-height:1.5;
  border:1px solid var(--line);background:var(--bg-2);color:var(--muted)}
.erp-nota b{color:var(--navy)}
.erp-nota a{color:var(--acc-2);font-weight:700}
.erp-nota.err{background:#fdeaea;border-color:#e39b9b;color:#8c2f2f}
.erp-nota.err b{color:#8c2f2f}
.erp-nota.ok{background:#e9f8ef;border-color:#9dd8b4;color:#176b39}
.erp-nota.ok b{color:#176b39}
[data-theme="dark"] .erp-nota{background:#12203a;color:#bcc9de}
[data-theme="dark"] .erp-nota b{color:#dbe6f7}
[data-theme="dark"] .erp-nota.err{background:#2e1a1a;border-color:#7a3b3b;color:#f0bcbc}
[data-theme="dark"] .erp-nota.ok{background:#142b1f;border-color:#2f6b47;color:#a9e3c2}
/* Casilla de "confiar en este equipo" en los dos accesos */
.conf-equipo{display:flex;gap:10px;align-items:flex-start;margin:4px 0 14px;padding:11px 13px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg-2);cursor:pointer}
.conf-equipo input{margin-top:3px;flex:0 0 auto}
.conf-equipo b{display:block;color:var(--navy);font-size:.88rem}
.conf-equipo small{display:block;color:var(--dim);font-size:.75rem;line-height:1.45}
[data-theme="dark"] .conf-equipo b{color:#dbe6f7}
.dash-sesion{margin-inline-start:8px}
@media(max-width:620px){ .dash-sesion{margin-inline-start:0} }

/* ---- Oferta del día (sustituye al aviso de salida) ---- */
.exit-modal .of-box{padding-top:34px}
.of-tag{display:inline-block;margin-bottom:10px;padding:4px 12px;border-radius:20px;
  background:linear-gradient(135deg,var(--acc),var(--acc-2));color:#fff;font-size:.72rem;
  font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.of-sello{display:inline-block;margin:0 0 14px;padding:5px 12px;border-radius:10px;
  background:var(--navy-soft);border:1px solid var(--line-2);color:var(--muted);font-size:.8rem}
[data-theme="dark"] .of-sello{background:#12203a}
.of-cuenta{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px}
.of-cuenta span{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.5px}
.of-cuenta b{font-family:var(--display);font-size:1.7rem;color:var(--acc-2);
  font-variant-numeric:tabular-nums;letter-spacing:1px}
.of-tyc{display:block;margin:16px auto 0;background:none;border:0;color:var(--muted);
  font-size:.8rem;text-decoration:underline;cursor:pointer;font-family:var(--body)}
.of-tyc:hover{color:var(--acc-2)}
.of-tyc-modal{z-index:9100}
.of-tyc-box{max-width:520px;text-align:left}
.of-tyc-box h3,.of-tyc-box .em-ico{text-align:center;display:block}
.of-lista{margin:12px 0 14px;padding-inline-start:20px;color:var(--muted);font-size:.87rem;line-height:1.65}
.of-lista li{margin-bottom:6px}
.of-hash{color:var(--acc-2);font-weight:700}
.of-legal{font-size:.8rem;color:var(--dim);line-height:1.55}
.of-legal a{color:var(--acc-2);font-weight:700}
@media(max-width:520px){ .of-cuenta b{font-size:1.4rem} }
/* la ficha de condiciones se lee mejor alineada a la izquierda (el .em-box
   centra todo, y por especificidad hay que repetir el selector completo) */
.exit-modal .of-tyc-box{text-align:left}
.exit-modal .of-tyc-box h3,.exit-modal .of-tyc-box .em-ico,
.exit-modal .of-tyc-box .em-actions{text-align:center;justify-content:center}
/* El atributo hidden debe ganar SIEMPRE: display:grid/flex de una clase
   (por ejemplo .field-row) lo pisaba y el bloque seguía viéndose. */
[hidden]{display:none !important}

/* ---- Tablero: gráficos SVG dibujados a mano (sin librerías) ---- */
.tab-svg{width:100%;height:auto;display:block;margin-top:6px}
.tab-guia{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.tab-eje{fill:var(--dim);font-size:10px;font-family:var(--body)}
.tab-bar{fill:url(#g) ;fill:var(--acc);opacity:.85;transition:opacity .2s}
.tab-bar:hover{opacity:1}
.tab-linea{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tab-ventas{stroke:var(--acc)}
.tab-compras{stroke:var(--acc-2);stroke-dasharray:5 4}
.tab-punto{fill:var(--acc)}
.tab-leyenda{display:flex;gap:16px;align-items:center;color:var(--muted);font-size:.82rem;margin-bottom:4px}
.tab-leyenda i{display:inline-block;width:16px;height:3px;border-radius:2px;margin-inline-end:6px;vertical-align:middle}
.tab-c-ventas{background:var(--acc)}
.tab-c-compras{background:var(--acc-2)}

/* ---- Chip del plan de la empresa (esquina del panel) ---- */
.plan-chip{display:inline-flex;margin-top:8px}
.plan-chip-btn{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:22px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--panel);font-family:var(--body);text-align:start;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.plan-chip-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(3,36,92,.12);border-color:var(--acc)}
.plan-chip.gratis .plan-chip-btn{border-color:transparent;
  background:linear-gradient(135deg,rgba(0,178,214,.14),rgba(3,36,92,.10))}
.plan-chip .pc-ico{font-size:1.15rem}
.plan-chip .pc-txt b{display:block;color:var(--navy);font-size:.86rem;line-height:1.2}
.plan-chip .pc-txt small{display:block;color:var(--dim);font-size:.74rem}
.plan-chip .pc-cta{margin-inline-start:6px;padding:4px 11px;border-radius:16px;font-size:.74rem;font-weight:800;
  background:linear-gradient(135deg,var(--acc),var(--acc-2));color:#fff;white-space:nowrap}
[data-theme="dark"] .plan-chip .pc-txt b{color:#dbe6f7}
@media(max-width:620px){ .plan-chip .pc-txt small{display:none} }

.plan-modal .plan-box{max-width:780px;text-align:center}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:16px 0}
.plan-card{position:relative;padding:16px 14px;border-radius:14px;border:1px solid var(--line);background:var(--bg-2);text-align:start}
.plan-card.destacado{border-color:var(--acc);box-shadow:0 10px 26px rgba(0,178,214,.16)}
.plan-card b{display:block;color:var(--navy);font-family:var(--display);font-size:1.02rem}
.plan-card small{display:block;color:var(--dim);font-size:.76rem;margin-bottom:8px;line-height:1.45}
.plan-card ul{list-style:none;margin:0 0 12px;padding:0}
.plan-card li{color:var(--muted);font-size:.79rem;line-height:1.5;padding-inline-start:16px;position:relative}
.plan-card li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--acc);font-weight:700}
.plan-tag{position:absolute;top:-9px;inset-inline-end:12px;padding:2px 9px;border-radius:12px;font-size:.66rem;
  font-weight:800;background:linear-gradient(135deg,var(--acc),var(--acc-2));color:#fff}
[data-theme="dark"] .plan-card b{color:#dbe6f7}

/* ============================================================
   HERO FOTOGRÁFICO POR PAÍS · escritorio + móvil
   ============================================================ */
:root{
  --country-hero-image:url('country-heroes/pe.webp');
  --country-hero-mobile:url('country-heroes/pe-mobile.webp');
}
:root[data-country="pe"],.country-hero-pe{--country-hero-image:url('country-heroes/pe.webp');--country-hero-mobile:url('country-heroes/pe-mobile.webp')}
:root[data-country="ar"],.country-hero-ar{--country-hero-image:url('country-heroes/ar.webp');--country-hero-mobile:url('country-heroes/ar-mobile.webp')}
:root[data-country="bo"],.country-hero-bo{--country-hero-image:url('country-heroes/bo.webp');--country-hero-mobile:url('country-heroes/bo-mobile.webp')}
:root[data-country="br"],.country-hero-br{--country-hero-image:url('country-heroes/br.webp');--country-hero-mobile:url('country-heroes/br-mobile.webp')}
:root[data-country="cl"],.country-hero-cl{--country-hero-image:url('country-heroes/cl.webp');--country-hero-mobile:url('country-heroes/cl-mobile.webp')}
:root[data-country="co"],.country-hero-co{--country-hero-image:url('country-heroes/co.webp');--country-hero-mobile:url('country-heroes/co-mobile.webp')}
:root[data-country="cr"],.country-hero-cr{--country-hero-image:url('country-heroes/cr.webp');--country-hero-mobile:url('country-heroes/cr-mobile.webp')}
:root[data-country="ec"],.country-hero-ec{--country-hero-image:url('country-heroes/ec.webp');--country-hero-mobile:url('country-heroes/ec-mobile.webp')}
:root[data-country="sv"],.country-hero-sv{--country-hero-image:url('country-heroes/sv.webp');--country-hero-mobile:url('country-heroes/sv-mobile.webp')}
:root[data-country="gt"],.country-hero-gt{--country-hero-image:url('country-heroes/gt.webp');--country-hero-mobile:url('country-heroes/gt-mobile.webp')}
:root[data-country="hn"],.country-hero-hn{--country-hero-image:url('country-heroes/hn.webp');--country-hero-mobile:url('country-heroes/hn-mobile.webp')}
:root[data-country="mx"],.country-hero-mx{--country-hero-image:url('country-heroes/mx.webp');--country-hero-mobile:url('country-heroes/mx-mobile.webp')}
:root[data-country="ni"],.country-hero-ni{--country-hero-image:url('country-heroes/ni.webp');--country-hero-mobile:url('country-heroes/ni-mobile.webp')}
:root[data-country="pa"],.country-hero-pa{--country-hero-image:url('country-heroes/pa.webp');--country-hero-mobile:url('country-heroes/pa-mobile.webp')}
:root[data-country="py"],.country-hero-py{--country-hero-image:url('country-heroes/py.webp');--country-hero-mobile:url('country-heroes/py-mobile.webp')}
:root[data-country="do"],.country-hero-do{--country-hero-image:url('country-heroes/do.webp');--country-hero-mobile:url('country-heroes/do-mobile.webp')}
:root[data-country="uy"],.country-hero-uy{--country-hero-image:url('country-heroes/uy.webp');--country-hero-mobile:url('country-heroes/uy-mobile.webp')}
:root[data-country="ww"],.country-hero-ww{--country-hero-image:url('country-heroes/ww.webp');--country-hero-mobile:url('country-heroes/ww-mobile.webp')}

.hero.country-photo-hero{
  min-height:690px;
  background-image:linear-gradient(90deg,rgba(2,12,34,.94) 0%,rgba(3,24,58,.82) 43%,rgba(3,20,45,.32) 74%,rgba(3,16,38,.18) 100%),var(--country-hero-image)!important;
  background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;
}
.hero.country-photo-hero::before{
  z-index:1;background:linear-gradient(180deg,rgba(3,16,42,.18),rgba(3,16,42,.28))!important;
}
.hero.country-photo-hero #netCanvas{opacity:.34;mix-blend-mode:screen}
.hero.country-photo-hero .hero-inner{min-height:690px}
.hero.country-photo-hero .hero-text{text-shadow:0 3px 24px rgba(0,0,0,.45)}
.hero.country-photo-hero .hslide h1,.hero.country-photo-hero .hslide h2{max-width:590px;font-size:clamp(2.35rem,4.4vw,4rem);line-height:.98;color:#fff;letter-spacing:-.045em}
.hero.country-photo-hero .hslide p{max-width:510px;color:rgba(238,246,255,.88);font-size:1.03rem;line-height:1.65;text-shadow:0 2px 14px rgba(0,0,0,.65)}
.hero.country-photo-hero .slide-tag{color:#d7f8ff;background:rgba(4,25,55,.48);border-color:rgba(150,225,255,.35);box-shadow:0 8px 28px rgba(0,0,0,.18)}
.hero.country-photo-hero .erp-orbit{filter:drop-shadow(0 30px 44px rgba(0,0,0,.35))}

.page-hero.country-hero{
  min-height:470px;display:flex;align-items:center;padding:70px 0;
  background-image:linear-gradient(90deg,rgba(2,15,40,.96) 0%,rgba(3,25,60,.83) 48%,rgba(3,18,40,.28) 100%),var(--country-hero-image)!important;
  background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;
}
.page-hero:not(.country-hero){
  background-image:linear-gradient(90deg,rgba(2,15,40,.95) 0%,rgba(3,25,60,.78) 55%,rgba(3,18,40,.3) 100%),var(--country-hero-image)!important;
  background-size:cover!important;background-position:center 44%!important;background-repeat:no-repeat!important;
}
.page-hero:not(.country-hero)::before{background:linear-gradient(180deg,rgba(3,16,42,.04),rgba(3,16,42,.34))}
.page-hero:not(.country-hero) .wrap{position:relative;z-index:2}
.page-hero:not(.country-hero) h1{max-width:760px;font-size:clamp(2.15rem,4vw,3.45rem);line-height:1.02;letter-spacing:-.04em;text-shadow:0 3px 22px rgba(0,0,0,.55)}
.page-hero:not(.country-hero) p{font-size:1rem;line-height:1.65;text-shadow:0 2px 16px rgba(0,0,0,.65)}
.page-hero.country-hero::before{background:linear-gradient(180deg,rgba(3,16,42,.06),rgba(3,16,42,.38))}
.country-hero .ph-grid{grid-template-columns:1.22fr .78fr;gap:56px}
.country-hero .ph-text{padding:10px 0;text-shadow:0 3px 20px rgba(0,0,0,.58)}
.country-hero .ph-text h1{font-size:clamp(2.2rem,4.4vw,3.55rem);line-height:1.02;letter-spacing:-.04em}
.country-hero .ph-text>p{max-width:650px;font-size:1.03rem;line-height:1.7;color:rgba(245,249,255,.9)}
.country-product-card{justify-self:end;width:min(100%,340px);display:flex;flex-direction:column;align-items:flex-start;padding:26px;
  border-radius:24px;background:linear-gradient(145deg,rgba(6,27,61,.82),rgba(8,57,88,.66));border:1px solid rgba(255,255,255,.25);
  color:#fff;box-shadow:0 28px 70px rgba(0,0,0,.34);backdrop-filter:blur(14px);animation:floatY 6s ease-in-out infinite}
.country-product-card .cpc-live{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#c8efff;display:flex;align-items:center;gap:8px}
.country-product-card .cpc-live span{width:8px;height:8px;border-radius:50%;background:#54f2b0;box-shadow:0 0 12px #54f2b0;animation:tagPulse 2s infinite}
.country-product-card .cpc-mark{width:78px;height:78px;display:grid;place-items:center;margin:24px 0 18px;border-radius:22px;color:#7ff2ff;background:rgba(95,224,234,.13);border:1px solid rgba(95,224,234,.3)}
.country-product-card .cpc-mark svg{width:52px;height:52px}
.country-product-card>strong{font-family:var(--display);font-size:1.55rem;line-height:1.1}
.country-product-card>p{margin:7px 0 18px;color:#bfe8f7;font-family:var(--mono);font-size:.78rem}
.country-product-card .cpc-proof{display:flex;flex-wrap:wrap;gap:8px}
.country-product-card .cpc-proof span{font-size:.72rem;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12)}

@media(max-width:980px){
  .hero.country-photo-hero{min-height:auto;background-position:62% center!important}
  .hero.country-photo-hero .hero-inner{min-height:auto;grid-template-columns:1fr .72fr;padding-top:64px;padding-bottom:76px}
  .hero.country-photo-hero .hero-visual{display:block!important;margin-top:0}
  .hero.country-photo-hero .erp-orbit{max-width:320px}
  .country-hero .ph-grid{grid-template-columns:1fr .55fr;gap:26px}
}

@media(max-width:700px){
  .hero.country-photo-hero{
    min-height:760px;background-image:linear-gradient(180deg,rgba(2,13,36,.78) 0%,rgba(2,18,46,.9) 54%,rgba(2,14,34,.96) 100%),var(--country-hero-mobile)!important;
    background-position:center 34%!important;
  }
  .hero.country-photo-hero .hero-inner{display:grid;grid-template-columns:1fr;gap:4px;min-height:760px;padding:44px 18px 88px}
  .hero.country-photo-hero .hero-slides{min-height:190px}
  .hero.country-photo-hero .hslide h1,.hero.country-photo-hero .hslide h2{font-size:2.15rem;line-height:1.02;margin-bottom:12px;max-width:94%}
  .hero.country-photo-hero .hslide p{font-size:.92rem;line-height:1.5;max-width:95%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hero.country-photo-hero .slide-tag{font-size:.61rem;margin-bottom:14px;max-width:96%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hero.country-photo-hero .slide-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}
  .hero.country-photo-hero .slide-actions .btn{padding:11px 10px;font-size:.82rem;text-align:center}
  .hero.country-photo-hero .hero-nav-wrap{margin-top:18px}
  .hero.country-photo-hero .hero-visual{display:block!important;height:235px;margin-top:-8px;overflow:hidden}
  .hero.country-photo-hero .erp-orbit{max-width:235px}
  .hero.country-photo-hero #netCanvas{opacity:.22}
  .hero.country-photo-hero .hero-arrow-side{width:36px;height:36px}
  .page-hero.country-hero{
    min-height:680px;padding:48px 0 70px;background-image:linear-gradient(180deg,rgba(2,13,36,.7) 0%,rgba(2,18,46,.9) 56%,rgba(2,14,34,.97) 100%),var(--country-hero-mobile)!important;
    background-position:center 28%!important;
  }
  .page-hero:not(.country-hero){
    min-height:330px;display:flex;align-items:flex-end;padding:72px 0 48px;
    background-image:linear-gradient(180deg,rgba(2,13,36,.38) 0%,rgba(2,18,46,.9) 66%,rgba(2,14,34,.98) 100%),var(--country-hero-mobile)!important;
    background-position:center 32%!important;
  }
  .page-hero:not(.country-hero) h1{font-size:2rem;line-height:1.03}
  .page-hero:not(.country-hero) p{font-size:.9rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .country-hero .ph-grid{grid-template-columns:1fr;gap:22px}
  .country-hero .ph-art{order:2;max-width:none;margin:0}
  .country-hero .ph-text h1{font-size:2rem;line-height:1.04}
  .country-hero .ph-text>p{font-size:.9rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .country-hero .ph-text .btn{padding:11px 14px;font-size:.84rem}
  .country-product-card{width:100%;padding:16px 18px;border-radius:18px;display:grid;grid-template-columns:auto 1fr;column-gap:13px;align-items:center;animation:none}
  .country-product-card .cpc-live{grid-column:1/-1;margin-bottom:11px}
  .country-product-card .cpc-mark{grid-column:1;grid-row:2/4;width:58px;height:58px;margin:0;border-radius:16px}
  .country-product-card .cpc-mark svg{width:38px;height:38px}
  .country-product-card>strong{grid-column:2;font-size:1.18rem}
  .country-product-card>p{grid-column:2;margin:2px 0 0;font-size:.7rem}
  .country-product-card .cpc-proof{grid-column:1/-1;margin-top:12px}
}

/* ============================================================
   NOSOTROS INTERNACIONAL · fotografía, parallax y soporte
   ============================================================ */
.about-lead{color:var(--muted);margin-top:15px;line-height:1.72}
.about-cta{margin-top:24px}
.about-final-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}

.about-building-card[data-parallax] .abc-photo img,
.social-commit-media[data-parallax] img{
  transform:translate3d(0,var(--parallax-y,0),0) scale(1.065);
  will-change:transform;
  transition:transform .18s linear;
}
.about-building-card[data-parallax]:hover .abc-photo img{transform:translate3d(0,var(--parallax-y,0),0) scale(1.095)}
.about-building-card .abc-photo img{object-position:center}
.social-commit-media{aspect-ratio:4/3;position:relative}
.social-commit-media img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.social-commit-media figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;background:linear-gradient(180deg,transparent,rgba(3,17,43,.86));color:#fff;padding:34px 16px 13px}

.support-hours{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.support-hours>div{padding:13px 15px;border-radius:14px;background:rgba(3,17,43,.32);border:1px solid rgba(111,229,240,.2)}
.support-hours span{display:block;color:#6fe5f0;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}
.support-hours strong{display:block;color:#fff;font-size:.79rem;line-height:1.4}

.about-origin-note{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(270px,.65fr);gap:42px;align-items:center;
  padding:38px 42px;border-radius:26px;background:linear-gradient(135deg,var(--panel),var(--bg-2));border:1px solid var(--line-2);box-shadow:var(--shadow-sm)}
.about-origin-note h2{font-family:var(--display);font-size:clamp(1.65rem,3vw,2.35rem);letter-spacing:-.035em;color:var(--navy);margin-bottom:10px}
.about-origin-note p{color:var(--muted);line-height:1.7;max-width:760px}
.about-origin-aside{display:grid;gap:12px;align-self:stretch}
.founder-mini-card{margin:0;display:grid;grid-template-columns:86px 1fr;align-items:center;gap:14px;padding:10px;
  border-radius:18px;background:var(--panel);border:1px solid var(--line-2);box-shadow:0 12px 28px rgba(4,35,79,.1)}
.founder-mini-card img{width:86px;height:106px;object-fit:cover;object-position:center 18%;display:block;border-radius:12px;filter:grayscale(1) contrast(1.03)}
.founder-mini-card figcaption{min-width:0}
.founder-mini-card span{display:block;color:var(--acc-2);font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;margin-bottom:5px}
.founder-mini-card strong{display:block;color:var(--navy);font-size:.85rem;line-height:1.28}
.founder-mini-card small{display:block;color:var(--muted);font-size:.67rem;line-height:1.4;margin-top:5px}
.about-peru-address{padding:20px;border-radius:18px;background:var(--navy);color:#fff;border:1px solid rgba(255,255,255,.12);box-shadow:0 15px 32px rgba(0,40,99,.2)}
.about-peru-address[hidden]{display:none!important}
.about-peru-address span{display:block;color:#6fe5f0;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.about-peru-address strong{display:block;font-size:.85rem;line-height:1.55}
.about-peru-address small{display:block;color:rgba(255,255,255,.58);font-size:.66rem;line-height:1.45;margin-top:9px}

/* El contenido de todas las páginas públicas aparece con más profundidad,
   manteniendo una transición corta y sin afectar paneles administrativos. */
body:not(.adm-layout) .reveal{filter:blur(3px);transition-delay:var(--reveal-delay,0ms)}
body:not(.adm-layout) .reveal.in{filter:none}

.foot-service-hours{display:block;color:var(--muted);font-size:.78rem;line-height:1.5;margin-bottom:5px}

/* ============================================================
   FAB androide (feliz / pensando / triste) — sin cambio de color
   ============================================================ */
.fab-wrap{position:fixed;bottom:20px;right:18px;z-index:250;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
body.chat-open .fab-wrap{opacity:0;visibility:hidden;pointer-events:none}
/* ── Con el chat abierto no se le encima NADA ──────────────────────
   La oferta del día es un modal a pantalla completa con z-index 9000
   y el widget del chat vale 260: se abría encima de la conversación
   y la tapaba entera. La clase .chat-open ya la pone openChat(), así
   que basta con esto para que lo que YA estuviera abierto se aparte
   en el acto, además del guardián que impide que se abra.
   A propósito NO entran aquí country-modal, search-modal ni
   locale-modal: esos los abre la persona queriendo, no son
   promociones que salten solas. */
body.chat-open .exit-modal,
body.chat-open .oferta-modal,
body.chat-open .promo-modal,
body.chat-open .pwa-prompt,
body.chat-open .fiesta-banner{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
/* En móvil, la barra inferior tapaba el campo de escribir del chat. */
@media(max-width:820px){ body.chat-open .app-tabbar{transform:translateY(100%);pointer-events:none} }

/* Globo de invitación (intermitente o al hover en PC) */
.fab-invite{position:relative;display:flex;align-items:center;gap:8px;max-width:min(200px,68vw);
  padding:8px 26px 8px 12px;border-radius:14px 14px 4px 14px;background:var(--panel);color:var(--navy);
  border:1px solid var(--line-2);box-shadow:0 12px 32px rgba(0,40,99,.14);font:650 .72rem/1.3 var(--body);
  animation:fabInviteIn .4s cubic-bezier(.2,.8,.2,1)}
.fab-invite[hidden]{display:none!important}
.fab-invite-x{position:absolute;top:3px;right:5px;width:22px;height:22px;border:0;background:transparent;
  color:var(--dim);cursor:pointer;font-size:1rem;line-height:1;border-radius:6px}
.fab-invite-x:hover{color:var(--navy);background:var(--bg-2)}

/* Botón: color FIJO (nunca rojo/verde) */
.fab-main.fab-bot-face{width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;position:relative;
  background:linear-gradient(160deg,#f0fbff 0%,#d6f0fa 45%,#c5e8f6 100%);
  box-shadow:0 8px 20px rgba(0,40,99,.18),inset 0 0 0 2px rgba(11,182,196,.30);
  display:grid;place-items:center;padding:0;overflow:visible;
  animation:fabFloat 3.2s ease-in-out infinite;
  transition:box-shadow .22s ease,transform .22s ease}
/* Hover: sin sol ni escala grande — solo un halo azul luminoso pequeño (click) */
.fab-wrap.is-hover .fab-main.fab-bot-face,
.fab-main.fab-bot-face:hover,.fab-main.fab-bot-face:focus-visible{
  animation:none;
  transform:none;
  box-shadow:0 6px 16px rgba(0,40,99,.16),inset 0 0 0 2px rgba(11,182,196,.7),0 0 0 3px rgba(11,182,196,.38),0 0 14px rgba(47,127,240,.35);
  outline:none}
.fab-main.fab-bot-face:active{transform:scale(.97);box-shadow:0 4px 12px rgba(0,40,99,.18),inset 0 0 0 2px rgba(11,182,196,.55)}

/* Tooltip: oculto. Esos textos van solo DENTRO del chat. */
.fab-hover-tip,
.fab-invite{display:none!important}
.fab-hover-tip::after{
  content:'';position:absolute;right:-6px;top:50%;transform:translateY(-50%);
  border:6px solid transparent;border-left-color:var(--panel);filter:drop-shadow(1px 0 0 var(--line-2))}
.fab-main.fab-bot-face:hover .fab-hover-tip,
.fab-main.fab-bot-face:focus-visible .fab-hover-tip,
.fab-wrap.is-hover .fab-hover-tip{
  opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
/* Si el invite grande está visible, ocultar tip pequeño para no duplicar */
.fab-invite:not([hidden]) ~ .fab-main .fab-hover-tip{opacity:0!important;visibility:hidden!important}

/* ── EL ROBOT DE LÍNEA · un solo dibujo para todo el asistente ─────────
   Lo pintan adiabot_lineal() (includes/adiabot.php) y adiaBotSVG()
   (assets/app.js): botón flotante, cabecera del chat y «escribiendo…».
   Antes cada sitio tenía su propio muñeco —cara de dibujos con mofletes
   rosas en el botón, dos ojos y una boca en la cabecera, un emoji en el
   hilo— y no se parecían entre sí.
   El SVG no lleva color: todo es currentColor y se decide AQUÍ, así que
   el mismo dibujo vale para tema claro y oscuro. */
.adiabot-line{display:block;overflow:visible;color:var(--navy,#002863)}
/* Turquesa SOLO en la bola de la antena y en la ranura del pecho: con más
   acento el dibujo volvía a parecer un juguete de colores. */
.adiabot-line .abl-bola,
.adiabot-line .abl-panel{stroke:var(--acc,#0bb6c4)}
/* Parpadeo y balanceo de la antena: lo justo para que parezca despierto.
   transform-box:fill-box para que el origen sea el del propio grupo y no
   la esquina del lienzo (sin esto el ojo se va de la cara al animarse). */
.adiabot-line .abl-ojos{transform-box:fill-box;transform-origin:center;
  animation:ablParpadeo 5.4s ease-in-out infinite}
.adiabot-line .abl-antena{transform-box:fill-box;transform-origin:bottom center;
  animation:ablAntena 3.6s ease-in-out infinite}
@keyframes ablParpadeo{0%,92%,97%,100%{transform:scaleY(1)}94.5%{transform:scaleY(.12)}}
@keyframes ablAntena{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}

/* Gestos: cambia LA BOCA, nada más. Ni cejas, ni mofletes, ni el color del
   botón. Los estados los pone _botMood() en assets/app.js con data-mood. */
.adiabot-line .abl-boca-think,
.adiabot-line .abl-boca-sad{display:none}
.fab-wrap[data-mood="think"] .abl-boca-happy,
.fab-wrap[data-mood="sad"] .abl-boca-happy,
.chat-avatar[data-mood="sad"] .abl-boca-happy{display:none}
.fab-wrap[data-mood="think"] .abl-boca-think,
.fab-wrap[data-mood="sad"] .abl-boca-sad,
.chat-avatar[data-mood="sad"] .abl-boca-sad{display:block}
/* En el botón el azul va FIJO: el fondo del FAB es claro en los dos temas
   y con var(--navy) en oscuro (#3d8bff) el trazo perdía cuerpo. */
.fab-main.fab-bot-face .adiabot-line{color:#03245c;width:38px;height:38px}

@keyframes fabFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
/* Se fueron con el muñeco antiguo los @keyframes fabBob/fabAntenna/
   fabPompon/fabBlink/fabArmL/fabArmR/fabShadow/fabCheek/fabDot/fabPulse:
   animaban bracitos, mofletes y pompón, piezas que ya no existen. */
@keyframes fabInviteIn{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}

@media(max-width:820px){
  .about-origin-note{grid-template-columns:1fr;padding:28px;gap:24px}
  .support-hours{grid-template-columns:1fr}
}
@media(max-width:560px){
  .about-building-card .abc-photo{aspect-ratio:4/3}
  .about-building-card figcaption>p{display:none}
  .abc-facts span:nth-child(n+3){display:none}
  .social-commit-media{aspect-ratio:4/3}
  .social-commit-media figcaption{display:none}
  .support-hours{margin-top:14px}
  .support-hours>div{padding:11px 12px}
  .about-origin-note{padding:22px;border-radius:20px}
  .about-origin-note h2{font-size:1.55rem}
  .about-origin-aside{gap:10px}
  .founder-mini-card{grid-template-columns:68px 1fr;padding:8px;gap:11px}
  .founder-mini-card img{width:68px;height:84px;border-radius:10px}
  .founder-mini-card strong{font-size:.78rem}
  .founder-mini-card small{font-size:.62rem}
  .fab-wrap{right:12px;bottom:78px}
  .fab-main.fab-bot-face{width:52px;height:52px}
  .fab-main.fab-bot-face .adiabot-line{width:32px;height:32px}
  .fab-invite{max-width:min(150px,58vw);font-size:.68rem;padding:7px 24px 7px 10px}
  /* En móvil no usamos tip hover: el toque abre el chat */
  .fab-hover-tip{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  body:not(.adm-layout) .reveal{filter:none;transition:none}
  .about-building-card[data-parallax] .abc-photo img,
  .social-commit-media[data-parallax] img{transform:none;transition:none}
  .fab-invite{animation:none}
  /* Quien pidió menos movimiento ve el robot quieto: ni parpadeo, ni
     antena, ni el flotar del botón. El dibujo se lee igual. */
  .fab-main.fab-bot-face,
  .chat-typing.ct-pensando .ct-av,
  .adiabot-line .abl-ojos,
  .adiabot-line .abl-antena{animation:none!important}
}

/* ============================================================
   BANNERS CONTEXTUALES · hora local + fotografía por rubro
   ============================================================ */
:root{
  --capital-night-image:url('time-heroes/capital-night.webp');
  --capital-night-mobile:url('time-heroes/capital-night-mobile.webp');
  --rubro-hero-image:url('rubro-heroes/tecnologia.webp');
  --rubro-hero-mobile:url('rubro-heroes/tecnologia-mobile.webp');
}
:root[data-country="pe"]{--capital-night-image:url('time-heroes/pe-night.webp');--capital-night-mobile:url('time-heroes/pe-night-mobile.webp')}
:root[data-country="ar"]{--capital-night-image:url('time-heroes/ar-night.webp');--capital-night-mobile:url('time-heroes/ar-night-mobile.webp')}
:root[data-country="bo"]{--capital-night-image:url('time-heroes/bo-night.webp');--capital-night-mobile:url('time-heroes/bo-night-mobile.webp')}
:root[data-country="br"]{--capital-night-image:url('time-heroes/br-night.webp');--capital-night-mobile:url('time-heroes/br-night-mobile.webp')}
:root[data-country="cl"]{--capital-night-image:url('time-heroes/cl-night.webp');--capital-night-mobile:url('time-heroes/cl-night-mobile.webp')}
:root[data-country="co"]{--capital-night-image:url('time-heroes/co-night.webp');--capital-night-mobile:url('time-heroes/co-night-mobile.webp')}
:root[data-country="cr"]{--capital-night-image:url('time-heroes/cr-night.webp');--capital-night-mobile:url('time-heroes/cr-night-mobile.webp')}
:root[data-country="ec"]{--capital-night-image:url('time-heroes/ec-night.webp');--capital-night-mobile:url('time-heroes/ec-night-mobile.webp')}
:root[data-country="sv"]{--capital-night-image:url('time-heroes/sv-night.webp');--capital-night-mobile:url('time-heroes/sv-night-mobile.webp')}
:root[data-country="gt"]{--capital-night-image:url('time-heroes/gt-night.webp');--capital-night-mobile:url('time-heroes/gt-night-mobile.webp')}
:root[data-country="hn"]{--capital-night-image:url('time-heroes/hn-night.webp');--capital-night-mobile:url('time-heroes/hn-night-mobile.webp')}
:root[data-country="mx"]{--capital-night-image:url('time-heroes/mx-night.webp');--capital-night-mobile:url('time-heroes/mx-night-mobile.webp')}
:root[data-country="ni"]{--capital-night-image:url('time-heroes/ni-night.webp');--capital-night-mobile:url('time-heroes/ni-night-mobile.webp')}
:root[data-country="pa"]{--capital-night-image:url('time-heroes/pa-night.webp');--capital-night-mobile:url('time-heroes/pa-night-mobile.webp')}
:root[data-country="py"]{--capital-night-image:url('time-heroes/py-night.webp');--capital-night-mobile:url('time-heroes/py-night-mobile.webp')}
:root[data-country="do"]{--capital-night-image:url('time-heroes/do-night.webp');--capital-night-mobile:url('time-heroes/do-night-mobile.webp')}
:root[data-country="uy"]{--capital-night-image:url('time-heroes/uy-night.webp');--capital-night-mobile:url('time-heroes/uy-night-mobile.webp')}

/* Mañana conserva el hito del país; tarde lo vuelve más cálido; de noche
   cambia a una capital iluminada. Los rubros se excluyen: allí manda el sector. */
:root[data-daypart="morning"] .hero.country-photo-hero,
:root[data-daypart="morning"] .page-hero:not(.rubro-hero){
  background-image:linear-gradient(90deg,rgba(2,16,42,.93) 0%,rgba(3,28,62,.72) 47%,rgba(255,185,78,.08) 100%),var(--country-hero-image)!important
}
:root[data-daypart="afternoon"] .hero.country-photo-hero,
:root[data-daypart="afternoon"] .page-hero:not(.rubro-hero){
  background-image:linear-gradient(90deg,rgba(24,17,38,.94) 0%,rgba(61,31,43,.68) 48%,rgba(234,133,47,.18) 100%),var(--country-hero-image)!important
}
:root[data-daypart="night"] .hero.country-photo-hero,
:root[data-daypart="night"] .page-hero:not(.rubro-hero){
  background-image:linear-gradient(90deg,rgba(1,10,30,.97) 0%,rgba(2,20,51,.79) 48%,rgba(2,15,38,.22) 100%),var(--capital-night-image)!important;
  background-position:center!important
}

.hero-time-chip{position:absolute;z-index:7;top:22px;right:clamp(18px,4vw,64px);display:none!important;align-items:center;gap:8px;
  max-width:min(88vw,360px);padding:8px 12px;border:1px solid rgba(255,255,255,.24);border-radius:999px;
  background:rgba(2,18,45,.62);color:#fff;backdrop-filter:blur(10px);box-shadow:0 10px 28px rgba(0,0,0,.2);
  font-family:var(--mono);font-size:.67rem;letter-spacing:.035em;text-shadow:0 1px 5px rgba(0,0,0,.5)}
.hero-time-chip i{width:8px;height:8px;border-radius:50%;background:#ffd16a;box-shadow:0 0 12px rgba(255,209,106,.8);flex:none}
:root[data-daypart="afternoon"] .hero-time-chip i{background:#ff9c56;box-shadow:0 0 12px rgba(255,156,86,.8)}
:root[data-daypart="night"] .hero-time-chip i{background:#69dcff;box-shadow:0 0 12px rgba(105,220,255,.8)}
.hero-time-chip b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Un recurso por familia evita descargar treinta fotografías distintas, pero
   cada clave de rubro recibe una escena coherente con su actividad. */
.rubro-hero-educativo{--rubro-hero-image:url('rubro-heroes/educacion.webp');--rubro-hero-mobile:url('rubro-heroes/educacion-mobile.webp')}
.rubro-hero-transporte,.rubro-hero-distribuidora,.rubro-hero-fluvial,.rubro-hero-comercio{--rubro-hero-image:url('rubro-heroes/transporte.webp');--rubro-hero-mobile:url('rubro-heroes/transporte-mobile.webp')}
/* 76.ª · odontología comparte la foto de salud: no hay una foto dental
   propia y dejarlo sin declarar daría un hero sin imagen. */
.rubro-hero-farmaceutico,.rubro-hero-salud,.rubro-hero-odontologia,.rubro-hero-veterinaria,.rubro-hero-gimnasio{--rubro-hero-image:url('rubro-heroes/salud.webp');--rubro-hero-mobile:url('rubro-heroes/salud-mobile.webp')}
/* 76.ª · carril BEL · el salón NO comparte la foto de salud aunque el
   gimnasio sí lo haga: un spa con una imagen de hospital le dice al
   visitante que el sistema es clínico. Usa gimnasio.webp, que es la única
   del banco donde se ve a alguien atendiendo a alguien. La misma que el
   folleto en PDF (broch_hero en includes/pdf_brochure.php), para que papel
   y pantalla no salgan con dos fotos distintas. */
.rubro-hero-belleza{--rubro-hero-image:url('rubro-heroes/gimnasio.webp');--rubro-hero-mobile:url('rubro-heroes/gimnasio-mobile.webp')}
.rubro-hero-retail,.rubro-hero-restaurante,.rubro-hero-hotelero,.rubro-hero-abarrotes,.rubro-hero-carniceria,.rubro-hero-boutique,.rubro-hero-joyeria{--rubro-hero-image:url('rubro-heroes/comercio.webp');--rubro-hero-mobile:url('rubro-heroes/comercio-mobile.webp')}
.rubro-hero-financiero,.rubro-hero-contable,.rubro-hero-planillas,.rubro-hero-gobierno{--rubro-hero-image:url('rubro-heroes/finanzas.webp');--rubro-hero-mobile:url('rubro-heroes/finanzas-mobile.webp')}
.rubro-hero-ferreteria,.rubro-hero-construccion,.rubro-hero-manufactura,.rubro-hero-taller,.rubro-hero-produccion,.rubro-hero-inmobiliaria{--rubro-hero-image:url('rubro-heroes/industria.webp');--rubro-hero-mobile:url('rubro-heroes/industria-mobile.webp')}
.rubro-hero-agro{--rubro-hero-image:url('rubro-heroes/agro.webp');--rubro-hero-mobile:url('rubro-heroes/agro-mobile.webp')}
.rubro-hero-tecnologico{--rubro-hero-image:url('rubro-heroes/tecnologia.webp');--rubro-hero-mobile:url('rubro-heroes/tecnologia-mobile.webp')}
.rubro-hero-gimnasio{--rubro-hero-image:url('rubro-heroes/gimnasio.webp');--rubro-hero-mobile:url('rubro-heroes/gimnasio-mobile.webp')}
.rubro-hero-restaurante{--rubro-hero-image:url('rubro-heroes/restaurante.webp');--rubro-hero-mobile:url('rubro-heroes/restaurante-mobile.webp')}
.rubro-hero-hotelero{--rubro-hero-image:url('rubro-heroes/hotel.webp');--rubro-hero-mobile:url('rubro-heroes/hotel-mobile.webp')}
.rubro-hero-veterinaria{--rubro-hero-image:url('rubro-heroes/veterinaria.webp');--rubro-hero-mobile:url('rubro-heroes/veterinaria-mobile.webp')}
.rubro-hero-gobierno{--rubro-hero-image:url('rubro-heroes/gobierno.webp');--rubro-hero-mobile:url('rubro-heroes/gobierno-mobile.webp')}
.rubro-hero-inmobiliaria{--rubro-hero-image:url('rubro-heroes/inmobiliaria.webp');--rubro-hero-mobile:url('rubro-heroes/inmobiliaria-mobile.webp')}

.page-hero.rubro-hero{min-height:500px;display:flex;align-items:center;padding:70px 0;
  background-image:linear-gradient(90deg,rgba(1,12,34,.97) 0%,rgba(3,24,58,.84) 48%,rgba(3,18,40,.2) 100%),var(--rubro-hero-image)!important;
  background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
:root[data-daypart="afternoon"] .page-hero.rubro-hero{
  background-image:linear-gradient(90deg,rgba(16,13,35,.97) 0%,rgba(49,27,46,.78) 48%,rgba(222,123,46,.12) 100%),var(--rubro-hero-image)!important
}
:root[data-daypart="night"] .page-hero.rubro-hero{
  background-image:linear-gradient(90deg,rgba(0,8,25,.98) 0%,rgba(1,18,48,.86) 50%,rgba(0,10,28,.34) 100%),var(--rubro-hero-image)!important
}

.about-office-thumb{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:center;margin-top:17px;padding:9px;
  border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11)}
.about-office-thumb img{width:92px;height:62px;object-fit:cover;object-position:28% center;border-radius:9px;display:block}
.about-office-thumb span{font-size:.69rem;line-height:1.42;color:rgba(235,245,255,.66)}
.about-office-thumb b{display:block;color:#fff;font-size:.74rem;margin-bottom:2px}

@media(max-width:700px){
  :root[data-daypart="morning"] .hero.country-photo-hero,
  :root[data-daypart="morning"] .page-hero:not(.rubro-hero){background-image:linear-gradient(180deg,rgba(2,13,36,.58),rgba(2,18,46,.92) 66%,rgba(2,14,34,.98)),var(--country-hero-mobile)!important}
  :root[data-daypart="afternoon"] .hero.country-photo-hero,
  :root[data-daypart="afternoon"] .page-hero:not(.rubro-hero){background-image:linear-gradient(180deg,rgba(34,18,33,.52),rgba(43,22,42,.92) 66%,rgba(14,11,31,.98)),var(--country-hero-mobile)!important}
  :root[data-daypart="night"] .hero.country-photo-hero,
  :root[data-daypart="night"] .page-hero:not(.rubro-hero){background-image:linear-gradient(180deg,rgba(1,9,28,.48),rgba(2,18,46,.9) 64%,rgba(1,10,29,.98)),var(--capital-night-mobile)!important;background-position:center 40%!important}
  .hero-time-chip{top:12px;right:12px;padding:7px 10px;font-size:.6rem;max-width:calc(100% - 24px)}
  .page-hero.rubro-hero{min-height:640px;padding:54px 0 68px;align-items:flex-end;
    background-image:linear-gradient(180deg,rgba(1,12,34,.42) 0%,rgba(2,18,46,.88) 54%,rgba(1,10,29,.98) 100%),var(--rubro-hero-mobile)!important;
    background-position:center 30%!important}
  :root[data-daypart="afternoon"] .page-hero.rubro-hero{background-image:linear-gradient(180deg,rgba(40,22,35,.38),rgba(47,24,43,.89) 55%,rgba(17,10,29,.98)),var(--rubro-hero-mobile)!important}
  :root[data-daypart="night"] .page-hero.rubro-hero{background-image:linear-gradient(180deg,rgba(0,8,25,.5),rgba(1,17,44,.92) 55%,rgba(0,8,24,.99)),var(--rubro-hero-mobile)!important}
  .about-office-thumb{grid-template-columns:72px 1fr}
  .about-office-thumb img{width:72px;height:52px}
}

/* ============================================================
   Mega menú de rubros — hover estable + click (pinned)
   ============================================================ */
.nav-mega{position:relative;display:flex;align-items:center}
.nav-mega-trigger{display:flex;align-items:center;gap:6px;padding:9px 14px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:600 .92rem var(--body);cursor:pointer;transition:.2s}
.nav-mega-trigger .mega-chev{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;transition:transform .28s}
.nav-mega.open .nav-mega-trigger,.nav-mega-trigger:hover,.nav-mega-trigger:focus-visible{color:var(--navy);background:var(--navy-soft)}
.nav-mega.open .nav-mega-trigger .mega-chev{transform:rotate(180deg)}
/* Panel full-width bajo el header; el bridge evita el “hueco” del hover */
.nav-mega-panel{position:fixed;z-index:160;top:var(--header-h,78px);left:0;right:0;padding:0 16px 20px;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
  transition:opacity .22s ease,transform .26s cubic-bezier(.2,.7,.3,1),visibility .22s}
.nav-mega-bridge{position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-mega-card{width:min(1160px,calc(100vw - 32px));margin:0 auto;max-height:min(78vh,640px);overflow:auto;
  background:rgba(255,255,255,.99);border:1px solid rgba(15,70,125,.14);border-radius:0 0 22px 22px;
  box-shadow:0 28px 70px rgba(0,40,99,.2);padding:0 22px 20px;position:relative}
.nav-mega-card::before{content:"";position:sticky;display:block;top:0;height:3px;margin:0 -22px 0;background:linear-gradient(90deg,var(--navy),var(--acc),var(--acc-2));z-index:2}
.nav-mega.open .nav-mega-panel{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.nav-mega-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 2px 15px;border-bottom:1px solid var(--line);position:sticky;top:3px;background:inherit;z-index:1}
.nav-mega-top div{display:flex;flex-direction:column;gap:2px}
.nav-mega-top small{font:700 .65rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc-2)}
.nav-mega-top strong{font:750 1.05rem var(--display);color:var(--navy)}
.nav-mega-top>a{display:inline-flex!important;align-items:center;gap:7px;padding:8px 12px!important;color:var(--navy)!important;background:var(--navy-soft);font-size:.78rem!important;white-space:nowrap;border-radius:10px}
.nav-mega-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding-top:16px}
.mega-sector{min-width:0;padding:14px 12px 12px;border-radius:16px;background:linear-gradient(160deg,var(--panel) 0%,var(--bg-2) 100%);border:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
.mega-sector:hover{border-color:rgba(11,182,196,.35);box-shadow:0 10px 28px rgba(0,40,99,.08)}
.mega-sector h3{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:750 .86rem var(--display);color:var(--navy)}
/* Vectores de sector (retail, servicios, etc.) — no emoji */
.mega-sector-ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:none;
  background:linear-gradient(135deg,var(--navy),var(--acc));box-shadow:0 6px 14px rgba(0,40,99,.2)}
.mega-sector-ico svg{width:17px;height:17px;display:block}
.mega-sector-retail .mega-sector-ico{background:linear-gradient(135deg,#0a3d7a,#0bb6c4)}
.mega-sector-servicios .mega-sector-ico{background:linear-gradient(135deg,#12488f,#3b82f6)}
.mega-sector-movilidad .mega-sector-ico{background:linear-gradient(135deg,#0f766e,#14b8a6)}
.mega-sector-industria .mega-sector-ico{background:linear-gradient(135deg,#1e3a5f,#6366f1)}
.mega-sector-links{display:grid;gap:3px}
.nav-links .mega-sector-links a{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;color:var(--muted);font-size:.76rem;font-weight:600;line-height:1.3}
.nav-links .mega-sector-links a .mega-link-ico{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:var(--navy-soft);color:var(--navy)}
.nav-links .mega-sector-links a .mega-link-ico .ico-svg,
.nav-links .mega-sector-links a .mega-link-ico svg{width:14px;height:14px;display:block}
.nav-links .mega-sector-links a .mega-link-txt{flex:1;min-width:0}
.nav-links .mega-sector-links a b{color:var(--acc);font-size:.72rem;opacity:0;transform:translateX(-4px);transition:.2s;flex:none}
.nav-links .mega-sector-links a:hover{color:var(--navy);background:var(--panel);box-shadow:0 3px 12px rgba(0,40,99,.07)}
.nav-links .mega-sector-links a:hover b{opacity:1;transform:none}
.nav-links .mega-sector-links a:hover .mega-link-ico{background:linear-gradient(135deg,var(--navy),var(--acc));color:#fff}
.nav-login-cta{display:inline-flex!important;align-items:center;gap:7px}
.nav-login-cta svg,.mm-login svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
[data-theme="dark"] .nav-mega-card{background:rgba(12,20,32,.99);border-color:var(--line)}
[data-theme="dark"] .mega-sector{background:linear-gradient(160deg,var(--panel),var(--bg-2))}
[data-theme="dark"] .nav-links .mega-sector-links a:hover{background:var(--navy-soft)}

/* Menú móvil: acordeón con iconos */
.mobile-menu{overflow-y:auto;padding-bottom:max(110px,env(safe-area-inset-bottom))}
.mm-sectors{border:1px solid var(--line);border-radius:12px;background:var(--panel)}
/* Antes era space-between con dos hijos. Ahora son tres —icono, texto y
   flecha— y el reparto dejaba el texto flotando en el centro: el icono
   y el texto van juntos a la izquierda y la flecha se empuja al final. */
.mm-sectors summary{display:flex;justify-content:flex-start;align-items:center;gap:11px;padding:14px 16px;list-style:none;color:var(--navy);font:700 1.02rem var(--display);cursor:pointer}
.mm-sectors summary::-webkit-details-marker{display:none}
.mm-sectors[open] summary{border-bottom:1px solid var(--line);background:var(--navy-soft)}
.mm-sectors summary .mm-chev{margin-left:auto;display:grid;place-items:center;color:var(--dim);transition:transform .2s}
.mm-sectors summary .mm-chev .ui-line-icon{width:18px;height:18px}
.mm-sectors[open] summary .mm-chev{transform:rotate(180deg)}
.mm-sector-list{padding:12px;display:grid;gap:14px}
.mm-sector-group{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mm-sector-group strong{grid-column:1/-1;display:flex;align-items:center;gap:8px;color:var(--navy);font:700 .72rem var(--display);letter-spacing:.02em;margin-bottom:2px}
.mm-sector-ico{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:linear-gradient(135deg,var(--navy),var(--acc));color:#fff}
.mm-sector-ico svg{width:13px;height:13px}
.mobile-menu .mm-sector-group a{display:flex;align-items:center;gap:6px;padding:8px;border:0;background:var(--bg-2);font-size:.74rem;font-weight:650;line-height:1.25;border-radius:8px}
.mobile-menu .mm-sector-group a .mm-link-ico{flex:none;color:var(--navy);display:grid;place-items:center}
.mobile-menu .mm-sector-group a .mm-link-ico svg,.mobile-menu .mm-sector-group a .mega-ico{width:14px;height:14px}
.mobile-menu .mm-all-sectors{padding:10px 12px;background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;font-size:.8rem;text-align:center;border-radius:10px}
.mobile-menu .mm-login{display:flex;align-items:center;gap:11px}
/* ── Iconos del menú móvil ──
   Eran emoji (🛡️ 📊 👑 👤 💰 🔍 🌎): cada teléfono los pintaba a su manera,
   de colores, y no había forma de que siguieran el azul de la marca. Ahora
   son vectores de línea (ui_icon) que heredan el color del enlace con
   currentColor, así que valen igual en tema claro y en oscuro.
   El hueco es FIJO (22 px): así todos los textos arrancan alineados aunque
   un icono sea más estrecho que otro. */
.mm-ico{flex:none;width:22px;height:22px;display:grid;place-items:center;color:inherit}
/* Gana a `.mm-login svg` (que pide 1.9) para que las 12 filas del menú
   tengan EXACTAMENTE el mismo grosor de trazo. */
.mm-ico .ui-line-icon{width:21px;height:21px;stroke-width:1.6}
.mm-country .mm-ico{color:inherit}

/* ============================================================
   Rubros: contraste de iconos y enfoque desde enlaces del footer
   ============================================================ */
#rubros .rubro-mini:hover .ico-line,#rubros .grid-4 .card:hover .ico-line{background:linear-gradient(145deg,#052b63,#087d8a)!important;border-color:#49dbe4!important;color:#fff!important;box-shadow:0 13px 28px rgba(0,40,99,.28),inset 0 0 0 1px rgba(255,255,255,.12)}
#rubros .rubro-mini:hover .ico-line .ico-glyph,#rubros .grid-4 .card:hover .ico-line .ico-glyph{color:#fff}
#rubros .rubro-mini:hover .ico-line .ico-glyph *,#rubros .grid-4 .card:hover .ico-line .ico-glyph *{stroke:currentColor!important}
#rubros .rubro-mini:hover .ico-line .ico-orbit,#rubros .grid-4 .card:hover .ico-line .ico-orbit{stroke:#65eef3!important;opacity:.85}
#rubros .rubro-mini:hover .ico-line .ico-accent-dot,#rubros .grid-4 .card:hover .ico-line .ico-accent-dot{fill:#83f5ef!important}
.module-focus-note{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:22px 0 18px;padding:14px 18px;border:1px solid rgba(11,182,196,.28);border-radius:16px;background:linear-gradient(100deg,rgba(11,182,196,.1),rgba(47,127,240,.07));color:var(--muted);font-size:.88rem;scroll-margin-top:96px}
.module-focus-note strong{color:var(--navy)}
.module-focus-note button{border:0;background:var(--panel);color:var(--navy);border-radius:9px;padding:7px 10px;font:700 .75rem var(--body);cursor:pointer;box-shadow:var(--shadow-sm)}
#rubros.module-filter-active [data-modulo]{opacity:.3;filter:saturate(.45);transition:opacity .3s,filter .3s,transform .3s,box-shadow .3s}
#rubros.module-filter-active [data-modulo].module-match{opacity:1;filter:none;border-color:var(--acc);box-shadow:0 14px 36px rgba(11,182,196,.17);transform:translateY(-3px);order:-1}
#rubros.module-filter-active [data-modulo].module-match::before{transform:scaleX(1)}

.foot-module-link{display:flex!important;flex-direction:column;align-items:flex-start;gap:0}
.foot-module-link small{font-size:.63rem;font-weight:500;color:var(--dim);line-height:1.25}

/* Pasarelas sobrias en reposo; recuperan su identidad al interactuar. */
.pay-refs .pr-chip{filter:grayscale(1);opacity:.67;transition:filter .25s,opacity .25s,transform .25s,border-color .25s,background .25s}
.pay-refs .pr-chip:hover,.pay-refs .pr-chip:focus-within{filter:grayscale(0);opacity:1;transform:translateY(-2px);border-color:rgba(11,182,196,.5);background:var(--panel)}

@media(max-width:1100px){
  .nav-mega-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .mega-sector{padding:12px}.nav-links .mega-sector-links a{font-size:.74rem}
}
@media(max-width:980px){.nav-mega{display:none}}
@media(max-width:560px){
  .module-focus-note{align-items:flex-start;margin-bottom:16px}.module-focus-note button{flex:none}
  #rubros.module-filter-active [data-modulo]{opacity:.22}
}

/* ============================================================
   Nosotros: significado de ADIASOFT, filosofía y datos legales PE
   ============================================================ */
.corp-philosophy{padding-top:26px;position:relative}
.corp-philosophy::before{content:"";position:absolute;inset:8% 0 0;pointer-events:none;background:radial-gradient(620px 320px at 12% 45%,rgba(11,182,196,.09),transparent 70%),radial-gradient(620px 360px at 88% 55%,rgba(47,127,240,.08),transparent 72%)}
.corp-philosophy .wrap{position:relative;z-index:1}
.corp-philosophy-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:22px;align-items:stretch}
.brand-meaning{padding:34px;border-radius:28px;background:linear-gradient(145deg,#041938 0%,#073a67 62%,#087981 140%);color:#fff;box-shadow:0 28px 70px rgba(2,29,67,.22);position:relative;overflow:hidden}
.brand-meaning::after{content:"";position:absolute;width:310px;height:310px;border-radius:50%;right:-145px;bottom:-175px;background:radial-gradient(circle,rgba(89,238,240,.28),transparent 68%)}
.brand-word{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;padding:16px;border:1px solid rgba(130,235,244,.2);border-radius:20px;background:rgba(255,255,255,.055);position:relative;z-index:1}
.brand-word>span{min-width:0}
.brand-word b{display:block;font:800 clamp(2.2rem,5vw,4.4rem)/.9 var(--display);letter-spacing:-.06em;background:linear-gradient(115deg,#fff,#6fe5f0);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-word small{display:block;margin-top:9px;color:rgba(232,248,255,.7);font-size:.68rem;line-height:1.45}
.brand-word i{font-style:normal;font:400 1.3rem var(--mono);color:#6fe5f0;opacity:.75}
.brand-meaning-copy{position:relative;z-index:1;margin-top:28px}
.brand-meaning-copy .abc-kicker{color:#6fe5f0}
.brand-meaning-copy h3{font:750 clamp(1.6rem,3vw,2.25rem)/1.05 var(--display);letter-spacing:-.035em;margin:7px 0 12px}
.brand-meaning-copy p{color:rgba(235,247,255,.74);font-size:.88rem;line-height:1.68;margin-top:10px;max-width:720px}
.brand-meaning-copy p strong{color:#fff}
.philosophy-pillars{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.philosophy-card{display:flex;gap:13px;padding:21px;border-radius:20px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .3s,border-color .3s,box-shadow .3s}
.philosophy-card:hover{transform:translateY(-4px);border-color:rgba(11,182,196,.55);box-shadow:var(--shadow)}
.philosophy-card>span{width:34px;height:34px;display:grid;place-items:center;flex:none;border-radius:10px;background:linear-gradient(135deg,var(--navy),var(--acc));color:#fff;font:700 .65rem var(--mono)}
.philosophy-card h3{font:750 .97rem var(--display);color:var(--navy);margin:2px 0 6px}
.philosophy-card p{color:var(--muted);font-size:.75rem;line-height:1.5}

.about-origin-note{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr)}
.about-legal-card{padding:20px;border-radius:19px;background:linear-gradient(145deg,#041a3a,#063966);color:#fff;border:1px solid rgba(119,232,241,.2);box-shadow:0 16px 34px rgba(0,40,99,.2);scroll-margin-top:98px}
.about-legal-card[hidden]{display:none!important}
.about-legal-head{display:flex;align-items:center;gap:11px;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.12)}
.about-legal-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,var(--acc),var(--acc-2));font:700 1.05rem Georgia,serif}
.about-legal-head small{display:block;color:#6fe5f0;font:700 .59rem var(--mono);letter-spacing:.09em;text-transform:uppercase}
.about-legal-head strong{display:block;font:750 1.05rem var(--display);margin-top:2px}
.about-legal-card dl{display:grid;gap:0;margin-top:9px}
.about-legal-card dl>div{display:grid;grid-template-columns:105px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.about-legal-card dt{color:rgba(218,239,250,.58);font-size:.66rem}
.about-legal-card dd{margin:0;color:#fff;font-size:.72rem;font-weight:700;line-height:1.45}
.about-legal-card>p{margin-top:10px;color:rgba(218,239,250,.52);font-size:.6rem;line-height:1.4}

@media(max-width:960px){
  .corp-philosophy-grid{grid-template-columns:1fr}
  .philosophy-pillars{grid-template-columns:repeat(4,1fr)}
  .philosophy-card{flex-direction:column}
}
@media(max-width:820px){
  .about-origin-note{grid-template-columns:1fr}
  .philosophy-pillars{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .corp-philosophy{padding-top:0}
  .brand-meaning{padding:21px;border-radius:22px}
  .brand-word{grid-template-columns:1fr;padding:14px;gap:9px}
  .brand-word i{display:none}
  .brand-word b{font-size:2.75rem}
  .brand-meaning-copy{margin-top:22px}
  .brand-meaning-copy p{font-size:.81rem}
  .philosophy-pillars{grid-template-columns:1fr}
  .philosophy-card{flex-direction:row;padding:17px}
  .about-legal-card dl>div{grid-template-columns:90px 1fr}
}

/* Acrónimo correcto: ADIA + “en el” + SOFT. SOFT es una sola palabra y no
   cuatro significados independientes. */
.adia-letters{grid-template-columns:minmax(0,4fr) auto minmax(205px,1.45fr);gap:18px;align-items:stretch}
.adia-core{display:grid;gap:9px;min-width:0}
.adia-core-letters{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.adia-core>small{font:600 .62rem var(--mono);letter-spacing:.045em;color:rgba(255,255,255,.7);text-align:center}
.adia-connector{align-self:center;display:inline-flex;align-items:center;justify-content:center;padding:7px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(3,30,78,.12);color:#fff;font:700 .62rem var(--mono);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
/* La quinta baldosa del acrónimo va con las otras cuatro: cuando aquellas
   pasaron a oscurecer el fondo, esta se quedó aclarándolo y el «SOFT» blanco
   flotaba sobre turquesa claro. Mismo tratamiento, un punto más suave para
   que siga destacando sobre las otras. */
.adia-soft{display:grid;place-content:center;min-height:104px;background:linear-gradient(145deg,rgba(2,28,55,.52),rgba(2,28,55,.46));border-color:rgba(255,255,255,.55)}
.adia-soft b{font-size:3.1rem;letter-spacing:-.06em}
.adia-soft span{font-size:.68rem;letter-spacing:.16em}
.brand-word i{display:flex;align-items:center;gap:7px;font:700 .63rem var(--mono);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.brand-word i::before,.brand-word i::after{content:"";width:13px;height:1px;background:rgba(111,229,240,.55)}

@media(max-width:760px){
  .adia-letters{grid-template-columns:1fr;gap:11px}
  .adia-core-letters{grid-template-columns:repeat(4,1fr);gap:9px}
  .adia-connector{justify-self:center}
  .adia-soft{min-height:88px}
  .adia-soft b{font-size:2.7rem}
}
@media(max-width:560px){
  .brand-word i{display:flex;justify-content:center;margin:1px 0}
}
@media(max-width:420px){
  .adia-core-letters{gap:7px}
  .adia-core-letters .adia-l{padding:13px 4px}
  .adia-core-letters .adia-l span{font-size:.49rem;letter-spacing:.045em}
  .adia-core>small{font-size:.54rem;line-height:1.45}
}

/* ============================================================
   ADIASIS MULTIEMPRESA · identidad, jerarquía e iconos lineales
   ============================================================ */
.ui-line-icon{width:19px;height:19px;display:inline-block;flex:none;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.adm-nav-ico .ui-line-icon{width:19px;height:19px}.adm-nav-link .adm-nav-ico{color:#9ab7d5}
.platform-shell .adm-side,.adm-layout .adm-side{background:linear-gradient(180deg,#031631 0%,#05274d 48%,#073a62 100%)}
.adm-nav{padding-inline:10px}.adm-nav-group{margin:7px 0;border:1px solid transparent;border-radius:13px;overflow:hidden}
.adm-nav-group.open{border-color:rgba(114,211,228,.13);background:rgba(255,255,255,.035)}
.adm-nav-head{padding:12px 12px;color:#bcd0e5;font-size:.69rem;font-weight:800;letter-spacing:.055em;text-transform:uppercase}
.adm-nav-head:hover,.adm-nav-group.open>.adm-nav-head{color:#fff;background:linear-gradient(90deg,rgba(11,182,196,.18),rgba(47,127,240,.05))}
.adm-nav-group.open>.adm-nav-head .adm-nav-ico{color:#61dbe3}
.adm-nav-sub{padding:3px 5px 7px}.adm-nav-link{position:relative;border-radius:9px;margin:2px 0;padding:9px 10px;font-size:.77rem}
.adm-nav-link::before{content:"";position:absolute;left:0;top:25%;bottom:25%;width:2px;border-radius:2px;background:transparent}
.adm-nav-link:hover{background:rgba(255,255,255,.07)}.adm-nav-link.on{background:linear-gradient(90deg,rgba(11,182,196,.22),rgba(48,127,240,.12));color:#fff;font-weight:800}
.adm-nav-link.on::before{background:#5fe6e8}.adm-nav-link.on .adm-nav-ico{color:#74edf0}
.adm-top{background:linear-gradient(105deg,var(--panel) 0%,var(--panel) 60%,rgba(11,182,196,.08) 100%)}
.adm-top-title{font-size:1.28rem;letter-spacing:-.025em}.adm-top-heading small{font-weight:650;color:var(--dim)}
.adm-body h2,.adm-body h3{letter-spacing:-.02em}.panel-box>h3{font-size:1.04rem;color:var(--navy);font-weight:850}
.adm-side-mark.has-logo{padding:3px;background:#fff}.adm-side-mark img{width:100%;height:100%;object-fit:contain;border-radius:8px;display:block}
.spag-side-company{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:center;padding:11px}
.spag-side-company-logo{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,#0bb6c4,#3478f6);color:#fff;overflow:hidden}
.spag-side-company-logo img{width:100%;height:100%;object-fit:contain;padding:3px;background:#fff}.spag-side-company-logo b{margin:0;color:#fff;font-size:.72rem}
.spag-side-company>div:last-child{min-width:0}.spag-side-company>div:last-child>b{display:block}
.platform-profile .ui-line-icon,.adm-res .ui-line-icon,.platform-quickbar .ui-line-icon{width:16px;height:16px}

.spag-simulation-bar{position:relative;z-index:400;min-height:48px;display:flex;align-items:center;justify-content:center;gap:12px;padding:7px 18px;background:linear-gradient(90deg,#4b2e83,#263f85,#066e87);color:#fff;box-shadow:0 6px 22px rgba(18,24,66,.25);font-size:.78rem}
.spag-simulation-bar>span{display:grid;place-items:center}.spag-simulation-bar form{margin:0}.spag-simulation-bar button{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.28);border-radius:9px;background:rgba(255,255,255,.13);color:#fff;padding:7px 10px;font-weight:800;cursor:pointer}.spag-simulation-bar .ui-line-icon{width:17px;height:17px}
.spag-simulation-bar+.adm-shell{min-height:calc(100vh - 48px)}

.spag-sim-card{display:grid;grid-template-columns:minmax(280px,1fr) minmax(310px,.9fr);gap:14px 28px;align-items:center;border-color:rgba(91,92,200,.2);background:linear-gradient(120deg,var(--panel),rgba(91,92,200,.07))}
.spag-sim-copy{display:flex;gap:14px;align-items:flex-start}.spag-sim-copy>span{width:42px;height:42px;display:grid;place-items:center;flex:none;border-radius:12px;background:linear-gradient(135deg,#5d45a5,#168da0);color:#fff}.spag-sim-copy h3{margin:0 0 5px}.spag-sim-copy p{margin:0}.spag-sim-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}.spag-sim-form label{grid-column:1/-1;color:var(--muted);font-size:.68rem;font-weight:800}.spag-sim-form select{min-width:0}.spag-sim-form button{white-space:nowrap}.spag-sim-form .ui-line-icon{width:16px;height:16px}.spag-sim-note{grid-column:1/-1;color:var(--dim);font-size:.65rem}
.spag-company-cell{display:flex;align-items:center;gap:9px;min-width:185px}.spag-company-mini{width:34px;height:34px;display:grid;place-items:center;flex:none;border-radius:10px;background:linear-gradient(135deg,#073a67,#0bb6c4);color:#fff;font-size:.6rem;font-weight:850;overflow:hidden}.spag-company-mini img,.emp-avatar img,.spag-avatar.has-logo img{width:100%;height:100%;object-fit:contain;background:#fff;padding:3px}.emp-avatar.has-logo{padding:0;overflow:hidden;background:#fff}.spag-avatar.has-logo{overflow:hidden;padding:0}

.logo-maker{width:100%;margin-top:7px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2);text-align:left}.logo-maker summary{padding:9px 10px;cursor:pointer;color:var(--navy);font-size:.7rem;font-weight:800}.logo-maker form{display:grid;gap:7px;padding:0 10px 11px}.logo-maker label{font-size:.62rem;color:var(--dim);font-weight:750}.logo-maker input,.logo-maker select{width:100%;min-width:0;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text)}
.erp-module-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:16px;padding:22px 24px;border-radius:20px;background:linear-gradient(120deg,#052853,#087885);color:#fff;box-shadow:0 16px 36px rgba(4,49,91,.17)}.erp-module-intro h2{margin:3px 0 7px;color:#fff;font-size:1.45rem}.erp-module-intro p{margin:0;max-width:720px;color:rgba(235,250,255,.73);font-size:.79rem;line-height:1.55}.erp-eyebrow{color:var(--eyebrow);font:750 .62rem var(--mono);letter-spacing:.1em;text-transform:uppercase}.erp-module-intro .erp-eyebrow{color:#73e3e7}.erp-module-intro .btn{flex:none}.erp-kpis{margin-bottom:16px}.title-count{display:inline-grid;place-items:center;min-width:27px;height:27px;margin-left:5px;padding:0 8px;border-radius:999px;background:var(--navy-soft);color:var(--acc-2);font-size:.7rem}

.platform-company-footer{display:grid;grid-template-columns:minmax(190px,.7fr) minmax(260px,1.5fr) auto;align-items:center;gap:18px;padding:17px 24px;border-top:1px solid var(--line);background:linear-gradient(110deg,var(--panel),var(--bg-2));color:var(--muted)}
.platform-company-foot-brand{display:flex;align-items:center;gap:10px;min-width:0}.platform-company-foot-brand img,.platform-company-foot-brand>span{width:38px;height:38px;object-fit:contain;padding:3px;display:grid;place-items:center;flex:none;border-radius:10px;background:#fff;border:1px solid var(--line)}.platform-company-foot-brand>span{background:linear-gradient(135deg,#073a67,#0bb6c4);color:#fff;font-size:.65rem;font-weight:850}.platform-company-foot-brand b,.platform-company-foot-brand small{display:block}.platform-company-foot-brand b{color:var(--navy);font-size:.77rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.platform-company-foot-brand small{font-size:.61rem}.platform-company-foot-data{display:flex;align-items:center;gap:14px;min-width:0;overflow:hidden}.platform-company-foot-data span{display:inline-flex;align-items:center;gap:5px;min-width:0;font-size:.65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.platform-company-foot-data .ui-line-icon{width:14px;height:14px;color:var(--acc-2)}.platform-company-footer>a{display:inline-flex;align-items:center;gap:6px;color:var(--acc-2);font-size:.67rem;font-weight:800;white-space:nowrap}.platform-company-footer>a .ui-line-icon{width:15px;height:15px}

.ticket-company-contact{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(340px,1.2fr);gap:22px;align-items:center;margin-bottom:16px;padding:20px 22px;border:1px solid rgba(11,182,196,.22);border-radius:19px;background:linear-gradient(115deg,var(--panel),rgba(11,182,196,.08));box-shadow:var(--shadow-sm)}.ticket-company-brand{display:flex;align-items:center;gap:14px}.ticket-company-brand>img,.ticket-company-brand>span{width:58px;height:58px;object-fit:contain;padding:4px;display:grid;place-items:center;flex:none;border:1px solid var(--line);border-radius:15px;background:#fff}.ticket-company-brand>span{background:linear-gradient(135deg,#073a67,#0bb6c4);color:#fff;font-weight:850}.ticket-company-brand small{color:var(--acc-2);font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.ticket-company-brand h2{margin:2px 0;color:var(--navy);font-size:1.12rem}.ticket-company-brand p{margin:0;color:var(--dim);font-size:.68rem}.ticket-company-data{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap}.ticket-company-data span{display:grid;grid-template-columns:20px auto;column-gap:5px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:.66rem}.ticket-company-data span .ui-line-icon{grid-row:1/3;width:18px;height:18px;color:var(--acc-2)}.ticket-company-data span b{display:block;color:var(--navy);font-size:.58rem;text-transform:uppercase;letter-spacing:.04em}

@media(max-width:900px){.spag-sim-card,.ticket-company-contact{grid-template-columns:1fr}.ticket-company-data{justify-content:flex-start}.platform-company-footer{grid-template-columns:1fr auto}.platform-company-foot-data{grid-column:1/-1;grid-row:2}}
@media(max-width:700px){.spag-simulation-bar{justify-content:space-between;padding:7px 10px;font-size:.68rem}.spag-simulation-bar>span{display:none}.spag-simulation-bar form{flex:none}.spag-simulation-bar button{padding:6px 8px}.spag-sim-form{grid-template-columns:1fr}.spag-sim-form label{grid-column:auto}.erp-module-intro{align-items:flex-start;padding:18px;flex-direction:column}.platform-company-footer{grid-template-columns:1fr;padding:14px}.platform-company-footer>a{justify-self:start}.platform-company-foot-data{grid-column:auto;grid-row:auto;flex-wrap:wrap}.ticket-company-contact{padding:16px}.ticket-company-data{display:grid;grid-template-columns:1fr}.adm-top-title{font-size:1.05rem}}

/* ============================================================
   COMPRAS · listado principal, modal y documentos PDF
   ============================================================ */
.purchase-list-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:16px;padding:22px 24px;border:1px solid rgba(11,182,196,.18);border-radius:20px;background:linear-gradient(110deg,var(--panel),rgba(11,182,196,.08));box-shadow:var(--shadow-sm)}
.purchase-list-head h2{margin:3px 0 6px;color:var(--navy);font-size:1.45rem;letter-spacing:-.03em}.purchase-list-head p{margin:0;max-width:720px;color:var(--muted);font-size:.78rem;line-height:1.55}.purchase-list-head>.btn{display:inline-flex;align-items:center;gap:8px;flex:none}.purchase-list-head>.btn .ui-line-icon{width:17px;height:17px}
.purchase-table-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}.purchase-table-head h3{margin:0 0 3px}.purchase-table-head small{color:var(--dim);font-size:.68rem}.purchase-filter input{width:min(320px,35vw);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);color:var(--text);font:600 .72rem var(--body);outline:none}.purchase-filter input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(11,182,196,.12)}
.purchase-actions{display:flex;align-items:center;gap:6px;white-space:nowrap}.purchase-pdf-link{display:inline-flex;align-items:center;gap:4px;padding:6px 7px;border-radius:8px;color:var(--acc-2);font-size:.64rem;font-weight:800;text-decoration:none}.purchase-pdf-link:hover{background:var(--navy-soft)}.purchase-pdf-link .ui-line-icon{width:14px;height:14px}.purchase-table tr[hidden]{display:none}

/* Lista limpia + alta/edición en modal: el dialog cerrado nunca empuja la tabla. */
dialog.erp-modal:not([open]){display:none!important}
.erp-modal{width:min(1040px,calc(100vw - 32px));max-width:none;max-height:min(92vh,900px);padding:0;border:0;border-radius:22px;background:var(--panel);color:var(--text);box-shadow:0 32px 100px rgba(1,18,47,.38);overflow:hidden}.erp-modal[open]{display:flex;flex-direction:column}.erp-modal::backdrop{background:rgba(2,16,39,.68);backdrop-filter:blur(4px)}html.modal-open{overflow:hidden}
.adm-client-modal{width:min(760px,calc(100vw - 28px))}
.adm-client-form{margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.adm-client-form .field-row{margin-bottom:10px}
.adm-client-tools{margin:0 0 16px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}
.adm-client-tools h4{margin:0 0 10px;font-size:.82rem;color:var(--navy)}
.adm-client-danger{margin:8px 0 0;padding-top:12px}
.adm-cli-acts{min-width:200px}
.adm-wa-btn{background:#25d366!important;color:#04331a!important;border-color:transparent!important}
.adm-cli-table td{vertical-align:middle}

/* AdiaSIS · DataTable shell, pager, kanban CRM, buscador empresas cabecera */
.adm-dt-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.adm-dt-toolbar input[type=search]{min-width:min(280px,48vw);padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);color:var(--text);font:600 .78rem var(--body)}
.adm-dt-toolbar input[type=search]:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px rgba(11,182,196,.12)}
.adm-pager{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.adm-pager a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;padding:6px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg-2);color:var(--navy);font-size:.74rem;font-weight:750;text-decoration:none}
.adm-pager a.on,.adm-pager a.num.on{background:var(--navy);border-color:var(--navy);color:#fff}
.adm-pager a:hover{border-color:var(--acc)}
.adm-pager-meta{margin-right:auto;color:var(--dim);font-size:.72rem;font-weight:650}
.adm-pager-sep{color:var(--dim);padding:0 2px}
.adm-dt td{vertical-align:middle}
.adm-kanban{display:grid;grid-template-columns:repeat(5,minmax(200px,1fr));gap:12px;overflow-x:auto;padding-bottom:6px}
.adm-kanban-col{min-width:200px;border:1px solid var(--line);border-radius:16px;background:var(--bg-2);display:flex;flex-direction:column;max-height:72vh}
.adm-kanban-col>header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 12px 8px;border-bottom:1px solid var(--line)}
.adm-kanban-col>header b{font-size:.78rem;color:var(--navy)}
.adm-kanban-cards{overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:10px}
.adm-kanban-card{padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:0 4px 14px rgba(3,36,92,.04)}
.adm-kanban-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.adm-kanban-top b{font-size:.82rem;color:var(--navy)}
.adm-kanban-top small,.adm-kanban-meta span,.adm-kanban-items small{display:block;color:var(--dim);font-size:.68rem}
.adm-kanban-meta{margin-top:6px;display:flex;flex-direction:column;gap:2px}
.adm-kanban-items{margin:8px 0 0;padding:0;list-style:none}
.adm-kanban-items li{padding:4px 0;border-top:1px dashed var(--line);font-size:.72rem}
.adm-kanban-money{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.spag-company-searchable{position:relative;align-items:center}
.spag-emp-combo{position:relative;min-width:0}
/* padding-right: lo que ocupa el contador «209 empresas» (.spag-emp-cuenta),
   para que lo tecleado no se meta debajo de él. La ✕ nativa del type=search
   se quita porque salía EN EL MISMO SITIO que el contador, una encima de la
   otra (mismo criterio que .adm-navfil-in en nav.css: «la ✕ es nuestra»). */
.spag-emp-combo input[type=search]{width:min(220px,28vw);height:34px;padding:4px 78px 4px 10px;border:1px solid #9edcff;border-radius:10px;background:#fff;color:var(--navy);font-size:.74rem;font-weight:750}
.spag-emp-combo input[type=search]::-webkit-search-cancel-button{display:none}
/* height:auto es IMPRESCINDIBLE: .spag-company-switch select fija 30px y dejaba
   la lista desplegada en UNA fila con scroll, aunque hubiera 60 empresas.
   max-width:none también: el max-width:240px de .spag-company-switch select
   (pensado para el select CERRADO del perfil) recortaba esta lista desplegada
   a 240px y quedaba ASOMANDO por debajo del panel de resultados, que mide lo
   suyo — era el «doble desplegable» roto que se veía al buscar. */
.spag-emp-combo select{display:none;position:absolute;left:0;top:calc(100% + 4px);z-index:40;width:min(320px,70vw);max-width:none;height:auto;max-height:280px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:0 16px 40px rgba(2,20,50,.18);font-size:.74rem;overflow-y:auto}
/* Navegando con ↓/↑ la lista larga pasa al frente: si se quedara debajo del
   panel de resultados, las flechas moverían una selección invisible. */
.spag-emp-combo select.open:focus{z-index:70}
.spag-emp-cuenta{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--dim);font-size:.62rem;font-weight:700;
  max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spag-company-switch #spagPerfil{max-width:190px;font-size:.72rem;color:var(--navy);border-left:1px solid var(--line);padding-left:8px}
.spag-company-switch #spagPerfil:disabled{opacity:.45}
.spag-emp-combo select.open{display:block}
.spag-emp-combo select option{padding:7px 8px;border-radius:8px}
@media(max-width:1100px){.adm-kanban{grid-template-columns:repeat(5,minmax(220px,1fr))}}
@media(max-width:700px){.adm-kanban{grid-template-columns:1fr}.adm-kanban-col{max-height:none}
  /* En angosto el contador se comería medio campo: se va, y el padding vuelve */
  .spag-emp-combo input[type=search]{width:min(160px,42vw);padding-right:10px}
  .spag-emp-cuenta{display:none}}
.cb-hilo{display:flex;flex-direction:column;gap:8px;max-height:55vh;overflow-y:auto;padding:4px}
.cb-bubble{max-width:85%;padding:10px 12px;border-radius:14px;font-size:.88rem;line-height:1.45}
.cb-bubble small{display:block;margin-top:4px;opacity:.65;font-size:.68rem}
.cb-bubble.user{align-self:flex-end;background:var(--navy);color:#fff}
.cb-bubble.bot{align-self:flex-start;background:var(--bg-2);border:1px solid var(--line)}
/* Corte de persona dentro del hilo: una misma sesión puede contener a más
   de un visitante (ver includes/admin/chatbot.php). Sin esta marca las dos
   conversaciones se leían como una sola. */
.cb-corte{align-self:stretch;display:flex;align-items:center;gap:10px;margin:6px 0 2px;
  font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cb-corte::before,.cb-corte::after{content:"";flex:1;height:1px;background:var(--line)}
.cb-corte span{flex:none;padding:2px 9px;border:1px solid var(--line);border-radius:999px;background:var(--bg-2)}
.cb-hilo-pag{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-bottom:8px;font-size:.78rem;color:var(--muted)}
.cb-hilo-pag-btns{display:flex;gap:4px;flex-wrap:wrap}
.btn-mini{padding:2px 8px;font-size:.74rem;line-height:1.6;border-radius:8px}
.cb-bubble .cb-ver-todo{margin-top:7px}
/* Los saltos ya vienen como <br> desde el servidor (nl2br): con pre-wrap
   además se duplicarían y el texto saldría con el doble de aire. */
.cb-texto-full{word-break:break-word;font-size:.88rem;line-height:1.5}

/* Plan gratuito + rubro en shell ERP */
.platform-rubro-tag,.platform-plan-tag{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;font-size:.62rem;font-weight:800;letter-spacing:.02em}
.platform-rubro-tag{background:#e8f4ff;color:#0a5f8c}
.platform-plan-tag{background:#e8fbf4;color:#0a7d52}
.platform-plan-tag.is-free{background:#fff4e5;color:#b45309}
.platform-free-banner{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:10px 14px;border:1px solid #f0c98a;border-radius:12px;background:linear-gradient(100deg,#fff8ec,#fff);font-size:.8rem;color:var(--navy)}
.platform-free-banner b{color:#9a3412}
.platform-free-banner .btn{margin-left:auto;flex:none;white-space:nowrap}
@media(max-width:700px){.platform-free-banner{flex-wrap:wrap}.platform-free-banner .btn{margin-left:0;width:100%}}
/* Bloqueos de plan (upsell Pyme / Corporativo) */
.plan-lock-box{display:flex;gap:18px;align-items:flex-start;margin:0 0 16px;padding:20px 22px;border:1px solid #f0c98a;border-radius:18px;background:linear-gradient(120deg,#fff8ec,#fff)}
.plan-lock-ico{font-size:2rem;line-height:1}
.plan-lock-box h3{margin:0 0 8px;color:var(--navy)}
.plan-lock-box p{margin:0 0 10px;color:var(--muted);font-size:.88rem;line-height:1.55}
.plan-lock-ofertas{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px!important}
.plan-lock-preview{opacity:.92}
.adm-nav-link.is-locked{opacity:.72}
.adm-nav-link.is-locked .adm-nav-txt{color:#f0d9a8}
@media(max-width:620px){.plan-lock-box{flex-direction:column}}

/* Vista demo de módulos bloqueados por plan (2026-08-21): se ve todo, no se guarda */
.plan-demo-banner{display:flex;gap:18px;align-items:flex-start;margin:0 0 16px;padding:20px 22px;border:1px solid #9ec5f2;border-radius:18px;background:linear-gradient(120deg,#eef6ff,#fff)}
.plan-demo-ico{font-size:1.9rem;line-height:1}
.plan-demo-banner h3{margin:0 0 8px;color:var(--navy)}
.plan-demo-banner p{margin:0 0 10px;color:var(--muted);font-size:.88rem;line-height:1.55}
.plan-demo-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:.25s;background:rgba(15,35,66,.94);color:#fff;padding:12px 18px;border-radius:12px;font-size:.9rem;z-index:9999;max-width:min(480px,90vw);box-shadow:0 12px 30px rgba(0,0,0,.25)}
.plan-demo-toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.plan-demo-toast a{color:#ffd57a}
@media(max-width:620px){.plan-demo-banner{flex-direction:column}}

/* Badge de plan en la web pública (header, sesión activa) */
.nav-plan-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;
  border:1px solid rgba(3,36,92,.12);background:linear-gradient(120deg,#f4f8ff,#fff);text-decoration:none;
  font-size:.78rem;color:var(--navy);font-weight:700;white-space:nowrap;margin-right:4px}
.nav-plan-badge:hover{border-color:var(--acc);box-shadow:0 4px 14px rgba(3,36,92,.08)}
.nav-plan-badge .npb-lbl{font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);font-weight:800}
.nav-plan-badge .npb-val{color:var(--navy)}
.nav-plan-badge .npb-cta{padding:2px 8px;border-radius:12px;background:var(--acc);color:#02252b;font-size:.68rem;font-weight:800}
.nav-plan-badge.is-free{border-color:#f0c98a;background:linear-gradient(120deg,#fff8ec,#fff)}
.nav-plan-badge.is-free .npb-cta{background:linear-gradient(135deg,var(--acc),var(--acc-2))}
@media(max-width:900px){.nav-plan-badge .npb-lbl{display:none}}
.plan-card.is-current{border-color:var(--acc);box-shadow:0 0 0 2px rgba(0,180,200,.12)}
.platform-plan-tag{display:inline-block;margin-top:3px;padding:2px 8px;border-radius:10px;font-size:.68rem;font-weight:800;
  background:#e8f0ff;color:var(--navy)}
.platform-plan-tag.is-free{background:#fff3d6;color:#8a5a00}

/* Matriz de planes / upgrade */
.plan-matrix-table{width:100%;border-collapse:collapse}
.plan-matrix-table th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--dim)}
.plan-matrix-table td,.plan-matrix-table th{padding:10px 12px;border-bottom:1px solid var(--line,#e6ebf4);vertical-align:top}
.plan-row-ok{background:rgba(46,160,100,.04)}
.plan-row-lock{background:rgba(200,140,40,.05)}
.plan-check.ok{color:#1a7a45;font-weight:700}
.plan-check.lock{color:#a06a10;font-weight:700}
.plan-grp{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);font-weight:700}
.plan-upgrade-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:12px}
.plan-upgrade-card{border:1px solid var(--line,#e6ebf4);border-radius:16px;padding:16px 18px;background:#fff;display:flex;flex-direction:column;gap:8px}
.plan-upgrade-card.is-current{border-color:var(--acc);box-shadow:0 0 0 2px rgba(0,180,200,.12)}
.plan-up-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.plan-up-head h4{margin:0;color:var(--navy)}
.plan-up-price{font-family:var(--display,inherit);font-size:1.6rem;font-weight:800;color:var(--navy)}
.plan-up-price small{font-size:.75rem;font-weight:600;color:var(--dim);margin-left:2px}
.plan-up-list{margin:0;padding-left:1.1rem;color:var(--muted,#42506a);font-size:.86rem;line-height:1.55}
.plan-up-list li{margin:2px 0}
[data-theme="dark"] .plan-upgrade-card{background:#0f1a2e;border-color:#243352}
[data-theme="dark"] .plan-row-ok{background:rgba(46,160,100,.08)}
[data-theme="dark"] .plan-row-lock{background:rgba(200,140,40,.08)}
table .num,td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* Módulos de rubro + listados genéricos en móvil (tarjetas) */
@media(max-width:620px){
  .module-list-table.adm-dt thead{display:none}
  .module-list-table.adm-dt,.module-list-table.adm-dt tbody{display:block;width:100%}
  /* Ficha por registro en móvil. Con 12 px de padding y 6 px por celda, DOS
     registros llenaban la pantalla y había que hacer scroll para contar cuatro
     ventas. Etiqueta y dato en la misma línea, ajustados, y una separación fina
     entre campos en vez de aire. */
  .module-list-table.adm-dt tr{display:block;margin-bottom:8px;padding:8px 10px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}
  .module-list-table.adm-dt td{display:flex;justify-content:space-between;gap:8px;padding:3px 0!important;border:0!important;font-size:.78rem;line-height:1.35}
  .module-list-table.adm-dt td+td{border-top:1px dotted var(--line)!important}
  .module-list-table.adm-dt td:before{content:attr(data-label);color:var(--dim);font-size:.6rem;font-weight:800;text-transform:uppercase;flex:none;max-width:38%;align-self:center}
  .module-list-table.adm-dt td small{font-size:.66rem;margin-top:0}
  /* Un registro sin dato no merece una línea: «— · Todas · 0» repetido tres
     veces es lo que hacía la ficha larga y vacía. */
  .module-list-table.adm-dt td:empty{display:none}
  .module-list-table.adm-dt .module-row-actions{flex-wrap:wrap;width:100%}
  .module-list-hero{flex-direction:column;align-items:stretch}
  .module-list-hero>.btn{width:100%;justify-content:center}
  .platform-quickbar{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .platform-quickbar a{flex:none;white-space:nowrap}
  .platform-context{flex-wrap:wrap}
  .platform-plan-tag,.platform-rubro-tag{font-size:.58rem}
}

.erp-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.13);background:linear-gradient(115deg,#042451,#087684);color:#fff}.erp-modal-head h2{margin:3px 0 4px;color:#fff;font-size:1.4rem}.erp-modal-head p{margin:0;color:rgba(232,249,255,.7);font-size:.73rem}.erp-modal-head .erp-eyebrow{color:#76e8e9}.erp-modal-close{width:38px;height:38px;display:grid;place-items:center;flex:none;border:1px solid rgba(255,255,255,.2);border-radius:11px;background:rgba(255,255,255,.1);color:#fff;font-size:1.4rem;cursor:pointer}.erp-modal-close:hover{background:rgba(255,255,255,.2)}
/* 🔴 EL CUERPO ES EL ÚNICO QUE SCROLLEA, y tiene que poder encogerse.
   `flex:1 1 auto` + `min-height:0`: en una columna flex un hijo NO baja de
   la altura de su contenido salvo que se le diga, y sin eso el modal recorta
   y no hay forma de llegar al final. Hoy funciona de rebote —cuando el
   `overflow` no es `visible` el navegador resuelve `min-height:auto` como 0—
   pero eso se rompe en cuanto alguien le devuelva el overflow, así que se
   declara. `overscroll-behavior:contain` evita que al llegar al final el
   gesto se lo lleve la página de detrás. */
.erp-modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:20px 24px 0;scrollbar-width:auto;scrollbar-color:var(--navy) var(--bg-2)}
/* 🔴 BARRA DE SCROLL GRUESA Y AGARRABLE dentro del modal.
   Llevaba `scrollbar-width:thin`, que en Chrome deja un hilo de ~6 px:
   se veía que había más contenido pero no había forma cómoda de arrastrarlo
   con el ratón, y como el modal no scrollea la página de detrás, la
   sensación era «esto no baja». 14 px, con contraste y margen para el
   pulgar. Va con `!important` porque la regla corta de arriba se declara
   en la misma línea que media docena de selectores y cualquier retoque
   futuro allí la pisaría sin querer. */
.erp-modal-body::-webkit-scrollbar{width:14px!important;height:14px}
.erp-modal-body::-webkit-scrollbar-track{background:var(--bg-2);border-radius:0 22px 22px 0}
.erp-modal-body::-webkit-scrollbar-thumb{background:linear-gradient(var(--navy),var(--acc));
  border-radius:9px;border:3px solid var(--bg-2);min-height:44px}
.erp-modal-body::-webkit-scrollbar-thumb:hover{background:linear-gradient(var(--navy-2),var(--acc))}
/* Y que se note que hay más abajo: un velo degradado en el borde inferior
   mientras no se haya llegado al final. */
.erp-modal[open]{position:relative}
.purchase-form-section{position:relative;margin-bottom:16px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--bg-2)}.purchase-step{display:flex;align-items:center;gap:9px;margin-bottom:14px;color:var(--navy);font-size:.82rem;font-weight:850}.purchase-step b{width:25px;height:25px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(135deg,var(--navy),var(--acc));color:#fff;font:750 .67rem var(--mono)}
.purchase-provider-select{display:flex;gap:7px}.purchase-provider-select select{min-width:0;flex:1}.purchase-new-provider{margin:4px 0 10px;padding:12px;border:1px dashed rgba(11,182,196,.45);border-radius:12px;background:rgba(11,182,196,.045)}.purchase-new-provider[hidden]{display:none!important}
.erp-modal-actions{position:sticky;z-index:3;bottom:0;display:flex;justify-content:flex-end;gap:9px;margin:0 -24px;padding:14px 24px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(10px)}.erp-modal-actions .btn{display:inline-flex;align-items:center;gap:7px}.erp-modal-actions .ui-line-icon{width:17px;height:17px}
.erp-doc-top+.erp-doc-cli{margin-top:15px}.erp-fe-btns .btn .ui-line-icon{width:16px;height:16px}

@media(max-width:820px){.purchase-list-head{align-items:flex-start;padding:18px}.purchase-table-head{align-items:stretch;flex-direction:column}.purchase-filter input{width:100%}.purchase-actions{flex-wrap:wrap}.erp-modal{width:calc(100vw - 18px);max-height:94vh;border-radius:18px}.erp-modal-head{padding:17px}.erp-modal-body{padding:15px 15px 0}.purchase-form-section{padding:14px}.erp-modal-actions{margin:0 -15px;padding:12px 15px}}
@media(max-width:560px){.purchase-list-head{flex-direction:column}.purchase-list-head>.btn{width:100%;justify-content:center}.purchase-table .purchase-actions{min-width:190px}.purchase-provider-select{flex-direction:column}.erp-modal{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}.erp-modal-head h2{font-size:1.2rem}.erp-modal-head p{display:none}.purchase-form-section{border-radius:13px}.erp-modal-actions .btn{flex:1;justify-content:center}}

/* Mantener las superficies del inventario por encima de las reglas generales
   de .panel-box y .erp-modal definidas en este archivo. */
.panel-box.inventory-hero{padding:28px 30px;background:linear-gradient(125deg,#fff 0%,#f4fbff 55%,#e8fbfa 100%);overflow:hidden}
.panel-box.inventory-list-card,.panel-box.inventory-kardex-card{padding:0;overflow:hidden}
.erp-modal.inventory-modal{width:min(1120px,calc(100vw - 28px));max-height:92vh}
.erp-modal.stock-modal{width:min(850px,calc(100vw - 28px))}
.erp-modal.barcode-modal{width:min(720px,calc(100vw - 28px))}
@media(max-width:720px){.panel-box.inventory-hero{padding:22px 19px}.erp-modal.inventory-modal,.erp-modal.stock-modal,.erp-modal.barcode-modal{width:calc(100vw - 14px);height:auto;max-height:96vh;border-radius:18px}}
@media(max-width:560px){.erp-modal.inventory-modal,.erp-modal.stock-modal,.erp-modal.barcode-modal{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}}

/* Alcance visible al actuar como un perfil: azul claro para SPAG y etiquetas
   inequívocas para SPAL, GA y Caja. */
.spag-sim-card{border:2px solid #8ed8ff;box-shadow:0 0 0 4px rgba(78,178,235,.08)}
.spag-sim-form .btn,.spag-simulation-bar button{border:2px solid #9be2ff!important}
.platform-scope-badge{display:inline-flex;align-items:center;margin-right:7px;padding:3px 8px;border:1px solid #a5e7ff;border-radius:999px;background:rgba(183,235,255,.16);color:#e0f8ff;font-size:.65rem;letter-spacing:.08em}
.spag-simulation-bar.role-spal{background:linear-gradient(90deg,#075985,#0c75a8,#0b8490)}
.spag-simulation-bar.role-ga{background:linear-gradient(90deg,#174a7c,#2869a1,#257b9a)}
.spag-simulation-bar.role-caja{background:linear-gradient(90deg,#334155,#3d5f78,#416b7b)}
.spag-simulation-bar.role-spag-empresa{background:linear-gradient(90deg,#075985,#087aa5,#0b8994);border-bottom:2px solid #8ed8ff}
/* Selector de usuario empresarial: compacto en escritorio y tipo app en PWA. */
.platform-user-switch{display:flex;align-items:center;gap:6px;min-width:0;padding:3px 6px;border:1px solid #9edcff;border-radius:11px;background:#f4fbff}
.platform-user-switch label{display:flex;align-items:center;gap:4px;color:#176b93;font-size:.65rem;font-weight:850;white-space:nowrap}.platform-user-switch label .ui-line-icon{width:16px;height:16px}
.platform-user-switch select{width:190px;max-width:22vw;height:32px;padding:3px 24px 3px 7px;border:0;background-color:transparent;color:var(--navy);font-size:.72rem;font-weight:800}
@media(max-width:900px){.platform-user-switch label span{display:none}.platform-user-switch select{width:154px;max-width:36vw}.adm-top-heading small{display:none}}
@media(max-width:560px){.platform-user-switch{order:3;width:100%;margin-top:5px}.platform-user-switch label span{display:inline}.platform-user-switch select{flex:1;width:auto;max-width:none}.adm-top{flex-wrap:wrap;height:auto;min-height:58px;padding-top:7px;padding-bottom:7px}}
@media(display-mode:standalone) and (max-width:700px){.platform-user-switch{position:sticky;top:0;border-radius:12px;box-shadow:0 4px 14px rgba(11,88,125,.12)}}
/* Patrón liviano para módulos: lista primero, alta/edición en modal. */
.module-list-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px;padding:20px 22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(120deg,var(--panel),rgba(31,154,218,.06))}
.module-list-hero h2{margin:2px 0 5px}.module-list-hero p{margin:0;color:var(--muted);font-size:.8rem}.module-list-hero>.btn{flex:none;align-self:center}
.module-kpis{margin-bottom:14px}.kpi-money{font-size:1.25rem!important}.module-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.module-list-head h3{margin:0}.module-list-head small,.module-list-table td small{display:block;color:var(--dim);font-size:.67rem;margin-top:2px}
.module-inline-search{display:flex;gap:6px}
/* La piel del kit también para estos campos: los type=month/date de estas
   barras (asistencias, caja y bancos…) salían con el marco cuadrado gris de
   fábrica del navegador, el único campo «de otra casa» en toda la pantalla. */
.module-inline-search input{min-width:230px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);color:var(--text);font-family:var(--body);font-size:.85rem}
.module-inline-search input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(11,182,196,.12)}
/* 🔴 Solo los botones PELADOS de la barra de búsqueda. El selector iba a
   `button` a secas y ganaba por especificidad a `.btn-primary`: le pisaba
   el fondo azul con `var(--bg-2)` pero NO su `color:#fff`, así que el
   «⬇ Descargar TXT» y sus hermanos salían en BLANCO SOBRE BLANCO en 37
   pantallas (EE.FF., SIRE, viajes, matrículas, activo fijo…). Un botón
   que ya se declara `.btn` trae su propio color de fondo y de letra y
   aquí no se le toca. */
.module-inline-search button:not(.btn){border:1px solid var(--line);border-radius:9px;background:var(--bg-2);padding:7px 10px;font-weight:800}
.module-list-table td{vertical-align:middle}
.calendar-box{padding:17px}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.calendar-week{margin-bottom:6px;text-align:center;color:var(--dim);font-size:.68rem}.calendar-day,.calendar-empty{min-height:68px;padding:7px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2)}.calendar-day{color:var(--text);text-decoration:none}.calendar-day b{display:block}.calendar-day em{display:inline-block;margin-top:7px;padding:2px 6px;border-radius:999px;background:#def4ff;color:#0878a7;font-size:.61rem;font-style:normal}.calendar-day.today{border-color:#35aee4;box-shadow:inset 0 0 0 1px #35aee4}.calendar-day.selected{background:#eaf8ff}.quick-client-modal{max-width:640px}
.dashboard-fit{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(250px,.7fr);gap:18px;margin:0 0 16px;padding:18px 20px;border:1px solid #a8ddf6;border-radius:16px;background:linear-gradient(125deg,#f4fbff,var(--panel))}.dashboard-fit h3{margin:3px 0 6px}.dashboard-fit p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.5}.dashboard-fit-actions{display:flex;flex-wrap:wrap;align-content:center;gap:7px}.dashboard-fit-actions>span,.dashboard-fit-actions>small{width:100%}.dashboard-fit-actions>span{font-weight:850;color:var(--navy)}.dashboard-fit-actions>small{color:var(--muted)}
@media(max-width:700px){.module-list-hero{align-items:stretch;flex-direction:column;padding:16px}.module-list-hero>.btn{align-self:center;width:min(100%,230px)}.module-list-head{align-items:stretch;flex-direction:column}.module-inline-search{width:100%}.module-inline-search input{min-width:0;flex:1}.calendar-grid{gap:3px}.calendar-day,.calendar-empty{min-height:50px;padding:5px;font-size:.72rem}.calendar-day em{margin-top:4px;font-size:.55rem}.dashboard-fit{grid-template-columns:1fr;padding:15px}.dashboard-fit-actions .btn{flex:1}.module-list-table td{white-space:normal}}
@media(display-mode:standalone) and (max-width:700px){.module-list-hero{border-radius:14px}.calendar-box{padding:12px}.erp-modal{max-height:calc(100dvh - 20px)}}
/* Listas operativas compactas: guías, servicios y agenda */
.module-row-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.module-row-actions .mini-form{margin:0}.module-row-actions .btn{white-space:nowrap}
.dashboard-agenda{display:grid;grid-template-columns:minmax(130px,.45fr) minmax(260px,1.55fr) auto;align-items:center;gap:16px;margin:0 0 14px;padding:16px 18px;border:1px solid #b8e2f5;border-radius:17px;background:linear-gradient(120deg,#edf9ff,var(--panel));box-shadow:0 8px 24px rgba(3,36,92,.05)}
.dashboard-agenda span,.dashboard-agenda small{display:block;color:var(--muted);font-size:.71rem}.dashboard-agenda b{display:block;margin:3px 0;color:var(--navy)}.dashboard-agenda-count b{font-size:1.9rem;line-height:1}.dashboard-agenda>.btn{justify-self:end}
@media(max-width:760px){.dashboard-agenda{grid-template-columns:1fr auto}.dashboard-agenda-next{grid-column:1/-1;grid-row:2}.dashboard-agenda>.btn{grid-column:2;grid-row:1}.module-row-actions{min-width:145px}}

/* ============================================================
   CLIENTES · fichas completas, alta/edición modal y móvil
   ============================================================ */
.client-list-hero{background:linear-gradient(118deg,var(--panel),rgba(10,174,181,.085))}.client-kind{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:.63rem;font-weight:850}.client-kind.is-person{background:#e8f6ff;color:#126b95}.client-kind.is-company{background:#e8fbf4;color:#14725c}.client-access-state{color:#087b86!important;font-weight:750}.client-table td:first-child{min-width:185px}.client-table td:nth-child(3){min-width:155px}.client-table td:nth-child(4){max-width:230px}
.erp-modal.client-modal{width:min(1120px,calc(100vw - 28px));max-height:94vh}.client-form{padding:0}.client-form>.erp-modal-actions{margin:0;padding:14px 24px}.client-form-section{padding:20px 24px;border-bottom:1px solid var(--line)}.client-form-section:last-of-type{border-bottom:0}.client-form-section>.field-row{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px}.client-form .field{min-width:0}.client-form .field small{display:block;margin-top:5px;color:var(--dim);font-size:.65rem;line-height:1.35}.client-form textarea{width:100%;resize:vertical}
.client-section-title{display:flex;align-items:center;gap:10px;color:var(--navy)}.client-section-title>span{width:27px;height:27px;display:grid;place-items:center;flex:none;border-radius:9px;background:linear-gradient(135deg,var(--navy),var(--acc));color:#fff;font:800 .7rem var(--mono)}.client-section-title>div{min-width:0}.client-section-title b,.client-section-title small{display:block}.client-section-title small{margin-top:2px;color:var(--muted);font-size:.69rem;font-weight:550}.client-section-with-action>.btn{margin-left:auto;white-space:nowrap}
.client-addresses{display:flex;flex-direction:column;gap:12px;margin-top:14px}.client-address-row{padding:14px;border:1px solid var(--line);border-radius:15px;background:var(--bg-2)}.client-address-row>.field-row{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:10px}.client-address-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.client-primary{display:flex;align-items:center;gap:7px;color:var(--navy);font-size:.72rem;font-weight:850}.client-primary input{width:17px;height:17px;accent-color:var(--acc)}.client-address-remove{width:30px;height:30px;border:0;border-radius:9px;background:#fff0f0;color:#c84949;font-size:1.15rem;cursor:pointer}.client-address-remove:hover{background:#ffe0e0}.client-access-toggle{display:flex;align-items:center;gap:10px;align-self:end;min-height:42px;padding:9px 11px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2);cursor:pointer}.client-access-toggle input{width:18px;height:18px;accent-color:var(--acc)}.client-access-toggle b,.client-access-toggle small{display:block}.client-access-toggle small{margin-top:2px;color:var(--dim);font-size:.62rem;font-weight:550}
@media(max-width:820px){.erp-modal.client-modal{width:calc(100vw - 14px);max-height:97vh}.client-form-section{padding:17px}.client-form-section>.field-row,.client-address-row>.field-row{grid-template-columns:repeat(2,minmax(0,1fr))}.client-form>.erp-modal-actions{margin:0;padding-left:17px;padding-right:17px}}
@media(max-width:620px){.erp-modal.client-modal{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}.client-form-section{padding:15px}.client-form-section>.field-row,.client-address-row>.field-row{grid-template-columns:1fr}.client-form .field[style]{grid-column:auto!important}.client-section-title{align-items:flex-start}.client-section-title small{line-height:1.35}.client-section-with-action{flex-wrap:wrap}.client-section-with-action>.btn{width:100%;margin:7px 0 0;justify-content:center}.client-address-row{padding:12px}.client-form>.erp-modal-actions{margin:0;padding-left:15px;padding-right:15px}.client-table-wrap{overflow:visible}.client-table,.client-table tbody,.client-table tr,.client-table td{display:block;width:100%}.client-table thead{display:none}.client-table tr{margin-bottom:12px;padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}.client-table td{display:grid;grid-template-columns:105px minmax(0,1fr);gap:9px;padding:8px 0!important;border:0!important;max-width:none!important}.client-table td:before{content:attr(data-label);color:var(--dim);font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.client-table td>*{min-width:0}.client-table td .btn{width:100%;justify-content:center}.client-table td:first-child{min-width:0}.client-list-hero>.btn{width:100%}}

/* ============================================================
   CATÁLOGO CON IMAGEN — miniatura en la lista, visor y galería
   La lista pinta SIEMPRE la miniatura (unos KB); la foto grande
   solo se descarga cuando alguien la amplía.
   ============================================================ */
.inventory-thumb{flex:0 0 auto;position:relative;width:44px;height:44px;padding:0;border:1px solid var(--line,#e0e8ef);border-radius:10px;background:#fff;overflow:hidden;cursor:zoom-in;line-height:0}
.inventory-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.inventory-thumb em{position:absolute;right:0;bottom:0;padding:0 4px;border-radius:6px 0 0 0;background:rgba(0,40,99,.82);color:#fff;font:700 .58rem/1.5 var(--mono,monospace);font-style:normal}
.inventory-thumb:hover{border-color:var(--acc-2,#2f7ff0)}
.inventory-foto-grande{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.inventory-foto-grande img{width:100%;border-radius:12px;border:1px solid var(--line,#e0e8ef);background:#fff}
.inventory-foto-grande img:first-child{grid-column:1/-1;max-height:60vh;object-fit:contain}
.inventory-foto-grande b{grid-column:1/-1;color:var(--navy,#002863)}
.inventory-fotos{border:0;padding:0;margin:0;min-width:0}
.inventory-fotos[disabled]{opacity:.55}
.inventory-foto-actual img{max-width:150px;border-radius:12px;border:1px solid var(--line,#e0e8ef);margin-bottom:8px}
.inventory-foto-quitar{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:.8rem;color:var(--dim,#708397)}
.inventory-galeria{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.inventory-galeria-item{width:78px;text-align:center;font-size:.66rem;color:var(--dim,#708397)}
.inventory-galeria-item img{width:78px;height:78px;object-fit:cover;border-radius:10px;border:1px solid var(--line,#e0e8ef);display:block}
.inventory-galeria-item span{display:flex;align-items:center;justify-content:center;gap:3px;margin-top:3px}
/* Sección bloqueada por plan: se ve, se entiende y no se puede usar */
.inventory-locked{position:relative;background:repeating-linear-gradient(135deg,#fbfdff,#fbfdff 10px,#f4f8fc 10px,#f4f8fc 20px);border-radius:14px}

/* ============================================================
   MODALES SIEMPRE AL CENTRO
   El reset «*{margin:0}» de la línea 66 pisaba el `margin:auto`
   con el que el navegador centra un <dialog> modal, así que en
   escritorio salían pegados arriba a la izquierda. En móvil no
   se notaba porque una media query reponía margin:auto.
   ============================================================ */
dialog{margin:auto}
dialog.erp-modal,dialog.client-modal,dialog.adm-client-modal{position:fixed;inset:0;margin:auto}

/* ── Vista previa de PDF dentro del panel ──
   El documento se ve en un iframe con el PDF servido inline: se revisa antes
   de mandarlo y solo se descarga si de verdad hace falta. */
.pdf-modal{width:min(1000px,calc(100vw - 32px))}
.pdf-modal .pdf-modal-body{padding:0;background:#eef2f7;flex:1;min-height:0}
.pdf-modal iframe{display:block;width:100%;height:min(70vh,740px);border:0;background:#eef2f7}
@media(max-width:700px){.pdf-modal iframe{height:70dvh}}
/* Presentación vendida (caja x12) en la línea del mostrador */
.pos-pres{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:20px;background:#e8f4ff;color:#0a4d8c;font-size:.66rem;font-weight:700}

/* ============================================================
   PANTALLA DE DOCUMENTO (venta · compra · cotización · órdenes)
   Un solo orden para las cinco: 1 a quién · 2 qué lleva · 3 cómo
   se paga. En el celular se comporta como app: campos a ancho
   completo, cada ítem como tarjeta y la acción principal fija
   abajo, al alcance del pulgar.
   ============================================================ */
.doc-bloque{border:1px solid var(--line,#e0e8ef);border-radius:16px;background:var(--panel,#fff);padding:18px 20px;margin-bottom:14px}
.doc-bloque-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.doc-bloque-head h4{margin:0;font-size:1.02rem;color:var(--navy,#0a315d)}
.doc-bloque-head .doc-nuevo{margin-left:auto}
.doc-paso{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--navy,#002863);color:#fff;font:800 .78rem/1 var(--mono,monospace);flex:0 0 auto}
.doc-aviso{display:block;margin-top:5px;color:#a5641b;font-size:.76rem}

/* Ítems */
.doc-items{width:100%;border-collapse:collapse}
.doc-items th{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:#6f8396;background:#f8fbfd;text-align:left;padding:9px 8px}
.doc-items td{padding:8px;border-bottom:1px solid #eef2f7;vertical-align:middle}
.doc-items input,.doc-items select{width:100%}
.doc-items .doc-sub{font-weight:800;color:var(--navy,#0a315d);white-space:nowrap;text-align:right}
.doc-items .doc-detalle{font-size:.82rem;color:var(--dim,#708397)}
.doc-item-quitar{border:0;background:none;color:#c0392b;font-size:1.1rem;cursor:pointer;line-height:1}

/* Comentarios: el interno se distingue del que ve el cliente */
.doc-notas{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.doc-nota-interna label:after{content:' · no se imprime';color:var(--dim,#708397);font-weight:400;font-size:.74rem}
.doc-nota-ticket label:after{content:' · sale en el comprobante';color:#0a7d52;font-weight:400;font-size:.74rem}

/* Barra de acción: en escritorio va en el flujo; en móvil se pega abajo */
.doc-acciones{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}

@media(max-width:820px){
  .doc-notas{grid-template-columns:1fr}
}
@media(max-width:720px){
  .doc-bloque{padding:15px 14px;border-radius:14px}
  .doc-bloque .field-row{flex-direction:column;gap:10px}
  .doc-bloque .field{width:100%;flex:1 1 auto!important}
  .doc-bloque input,.doc-bloque select,.doc-bloque textarea{width:100%;font-size:16px;min-height:44px}  /* 16px: iOS no hace zoom */
  /* Cada ítem pasa a ser una tarjeta legible en vertical.
     OJO: el panel marca todas sus tablas con `adm-cards` (admin_ui.php) y ese
     bloque tiene MÁS especificidad, así que cada regla se repite con el mismo
     peso para que gane esta —si no, las filas que el JS añade después salen
     como bloques sin etiqueta. La etiqueta es `data-lbl`, la de la casa. */
  .doc-items,.doc-items tbody,.doc-items tr,.doc-items td{display:block;width:100%}
  .doc-items thead,.adm-body table.doc-items thead{display:none}
  .doc-items tr,
  .adm-body table.doc-items tr{border:1px solid #e0e9ef;border-radius:14px;padding:12px;margin-bottom:10px;background:#fff;box-shadow:0 4px 14px rgba(9,46,81,.05)}
  .doc-items td,
  .adm-body table.doc-items td{border:0;padding:6px 0;display:grid;grid-template-columns:104px minmax(0,1fr);gap:8px;align-items:center;text-align:left}
  .doc-items td:before,
  .adm-body table.doc-items td::before{content:attr(data-lbl);display:block;margin:0;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#8192a2}
  .doc-items td[data-lbl=""]:before,
  .adm-body table.doc-items td[data-lbl=""]::before{content:"";display:none}
  .doc-items td.doc-sub,
  .adm-body table.doc-items td.doc-sub{text-align:left;font-size:1.05rem}
  .doc-items td+td,
  .adm-body table.doc-items td+td{border-top:0}
  .doc-items .doc-item-quitar{justify-self:start}
  /* La acción principal, siempre a mano */
  .doc-acciones{position:sticky;bottom:0;z-index:5;margin:0 -14px -15px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(255,255,255,.6),var(--panel,#fff) 32%);border-top:1px solid var(--line,#e0e8ef)}
  .doc-acciones .btn{flex:1;justify-content:center;min-height:48px}
}

/* ============================================================
   Buscador de cliente / proveedor con lista visible
   ------------------------------------------------------------
   El <datalist> del navegador no servía: solo aparece a veces, no
   deja pintar dos datos por fila y obliga a saber si lo que uno
   tiene en la mano es el nombre o el documento. Aquí se escribe
   cualquiera de los dos y la lista se ve siempre.
   ============================================================ */
.bc-caja{position:relative}
.bc-input{width:100%}
/* La lista va `absolute` colgada del campo a propósito: dentro del panel
   quien desplaza es `.adm-body` (y dentro de un modal, `.erp-modal-body`),
   nunca la ventana; colgada del campo acompaña al campo sola y no hace
   falta recolocarla en cada scroll. Lo que sí hace falta es que no se
   salga de ese contenedor: `--bc-alto` lo calcula el JS de `.erp-ref`
   (includes/panel/_ref_buscar.php) midiendo el hueco real, y `.bc-arriba`
   le da la vuelta cuando abajo no cabe. Sin JS quedan los 288 px de
   siempre, que es como se comportan mostrador y vender.php. */
/* 45: por encima del desplegable de «filtrar por columna» (tabla.css, 40) y
   de las barras pegadas del formulario (.doc-acciones 5, .erp-modal-actions 3),
   pero por debajo de .adm-top (50) para no taparle la barra superior. */
.bc-lista{position:absolute;z-index:45;left:0;right:0;top:calc(100% + 4px);max-height:var(--bc-alto,288px);overflow:auto;
  background:var(--panel,#fff);border:1px solid var(--line,#dbe4ee);border-radius:14px;
  box-shadow:0 18px 44px rgba(9,46,81,.16);padding:6px}
.bc-lista.bc-arriba{top:auto;bottom:calc(100% + 4px);box-shadow:0 -18px 44px rgba(9,46,81,.16)}
.bc-lista[hidden]{display:none}
.bc-op{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;width:100%;
  padding:9px 11px;border:0;border-radius:10px;background:none;text-align:left;cursor:pointer;font:inherit}
.bc-op:hover,.bc-op.sel{background:var(--bg-2,#f2f7fb)}
.bc-op b{font-size:.9rem;color:var(--navy,#0a315d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-op .bc-doc{font-family:var(--mono,monospace);font-size:.76rem;color:var(--dim,#708397);white-space:nowrap}
.bc-op small{grid-column:1/-1;font-size:.7rem;color:var(--dim,#708397)}
.bc-op mark{background:#fff3bf;color:inherit;border-radius:3px;padding:0 1px}
.bc-vacio{padding:12px 11px;font-size:.83rem;color:var(--dim,#708397)}
.bc-vacio b{display:block;color:var(--navy,#0a315d);margin-bottom:3px}
.bc-nuevo{width:100%;margin-top:6px}

/* Persona natural o empresa: el documento cambia con el tipo */
.dr-tipo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.dr-tipo label{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid var(--line,#dbe4ee);
  border-radius:13px;cursor:pointer;background:var(--panel,#fff)}
.dr-tipo label.on,
.dr-tipo label:has(input:checked){border-color:var(--acc,#0a84ff);background:var(--bg-2,#f2f7fb);box-shadow:0 0 0 2px rgba(10,132,255,.12)}
.dr-tipo b{display:block;font-size:.88rem;color:var(--navy,#0a315d)}
.dr-tipo small{display:block;font-size:.7rem;color:var(--dim,#708397)}
.dr-doc-row{display:flex;gap:8px;align-items:flex-end}
.dr-doc-row .field{flex:1}
.dr-consulta{white-space:nowrap}
@media(max-width:620px){ .dr-tipo{grid-template-columns:1fr} }

/* ============================================================
   Formularios del panel: compactos
   ------------------------------------------------------------
   El tamaño de `.field` está pensado para las tarjetas del sitio
   público (ingresar, wizard), donde hay cuatro campos y mucho
   aire. En el panel se llenan documentos de veinte campos y esa
   misma altura obliga a hacer scroll para ver una cotización.
   Aquí se aprieta; en el móvil siguen mandando los 44 px y los
   16 px de tipografía (si no, iOS hace zoom al tocar).
   ============================================================ */
.panel-box .field,.erp-modal .field,.doc-bloque .field{margin-bottom:11px}
.panel-box .field label,.erp-modal .field label,.doc-bloque .field label{font-size:.72rem;margin-bottom:4px;letter-spacing:.01em}
.panel-box .field input,.panel-box .field select,.panel-box .field textarea,
.erp-modal .field input,.erp-modal .field select,.erp-modal .field textarea,
.doc-bloque input,.doc-bloque select,.doc-bloque textarea,
.doc-items input,.doc-items select{
  padding:7px 10px;border-radius:9px;font-size:.85rem;line-height:1.35}
/* ── CAMPOS DENTRO DE UNA TABLA DEL PANEL ──────────────────────────────
   🔴 No existía NINGUNA regla para ellos: el reset global `*{padding:0}`
   les quitaba el relleno y nadie se lo devolvía, así que el número salía
   pegado al borde y con el marco gris de fábrica del navegador (2 px, sin
   redondeo). Se ve en Asistencia, donde hay ocho por fila, y en toda
   tabla que se edite en línea. Se les da el mismo aire que a los campos
   de `.field`, un punto más compactos porque van dentro de una celda.
   Los numéricos van a la DERECHA: una columna de cifras solo se compara
   de un vistazo si las unidades están alineadas. */
.module-list-table td input:not([type=checkbox]):not([type=radio]),
.module-list-table td select,
.tabla-scroll table td input:not([type=checkbox]):not([type=radio]),
.tabla-scroll table td select{
  padding:6px 9px;border:1px solid var(--line-2);border-radius:8px;
  background:var(--bg);color:var(--text);font-family:var(--body);
  font-size:.83rem;line-height:1.3;transition:border-color .15s,box-shadow .15s}
.module-list-table td input[type=number],
.tabla-scroll table td input[type=number]{text-align:right;font-family:var(--mono);font-size:.8rem}
.module-list-table td input:focus,.module-list-table td select:focus,
.tabla-scroll table td input:focus,.tabla-scroll table td select:focus{
  outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(11,182,196,.12);background:#fff}
.module-list-table td input[readonly],.tabla-scroll table td input[readonly]{
  background:var(--bg-2);color:var(--dim)}
.module-list-table td input[type=checkbox],.tabla-scroll table td input[type=checkbox]{
  width:auto;padding:0;accent-color:var(--acc,#0bb6c4)}
.panel-box .field textarea,.erp-modal .field textarea,.doc-bloque textarea{min-height:58px}
.panel-box .field input[type=checkbox],.erp-modal .field input[type=checkbox],
.doc-items input[type=checkbox]{width:auto;padding:0;accent-color:var(--acc,#0bb6c4)}
.panel-box .erp-filtros .field,.erp-modal .field-row .field{margin-bottom:0}
/* El texto de ayuda dentro del campo se insinúa, no compite con lo escrito */
.panel-box ::placeholder,.erp-modal ::placeholder,.doc-bloque ::placeholder{color:var(--dim,#708397);opacity:.42;font-weight:400}
.panel-box .bc-input,.erp-modal .bc-input{font-size:.88rem}

/* ── Mostrador: campos a la medida de lo que llevan ──
   «Cantidad» ocupaba lo mismo que el nombre del producto. Cada casilla
   pide el ancho de su contenido: 3 dígitos la cantidad, 2 el descuento. */
.pos-buscar .pos-f-cant{flex:0 0 86px}
.pos-buscar .pos-f-desc{flex:0 0 86px}
.pos-buscar .pos-f-pre{flex:0 0 110px}
.pos-buscar .pos-f-imp{flex:0 0 128px}
.pos-buscar .pos-f-imp input{background:var(--bg-2,#f2f7fb);font-weight:800;color:var(--navy,#0a315d)}
.pos-tabla .pos-in-cant{max-width:84px}
.pos-tabla .pos-in-desc{max-width:78px}
.pos-tabla .pos-in-pre{max-width:104px}
.pos-totales span small{display:block;font-weight:600;color:var(--dim,#708397);font-size:.66rem;margin-top:2px}
/* Lo que se va a cobrar, repetido en el bloque de pago */
.pos-resumen-pago{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px;
  padding:12px 16px;border-radius:14px;background:var(--navy,#002863);color:#fff}
.pos-resumen-pago span{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;opacity:.78}
.pos-resumen-pago b{font-size:1.42rem;font-family:var(--mono,monospace)}
@media(max-width:720px){
  .pos-buscar .pos-f-cant,.pos-buscar .pos-f-desc,.pos-buscar .pos-f-pre,.pos-buscar .pos-f-imp{flex:1 1 46%}
  .pos-tabla .pos-in-cant,.pos-tabla .pos-in-desc,.pos-tabla .pos-in-pre{max-width:none}
}

/* ── «Adiabot está escribiendo…» ──
   Antes eran tres puntos sueltos que podían pasar por adorno. Ahora se ve
   quién escribe y qué está haciendo; el texto cambia solo si la respuesta
   tarda (cuando la pregunta sube al segundo nivel). */
.chat-typing{display:flex;gap:8px;align-items:center;width:auto;padding:9px 13px}
.chat-typing .ct-av{display:inline-flex;line-height:0}
.chat-typing .ct-dots{display:inline-flex;gap:4px;align-items:center}
.chat-typing .ct-txt{font-size:.74rem;font-weight:600;color:var(--dim,#708397);white-space:nowrap}
.chat-typing.ct-pensando .ct-av{animation:ctPensar 1.6s ease-in-out infinite}
@keyframes ctPensar{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-6deg)}}
@media(max-width:420px){ .chat-typing .ct-txt{font-size:.68rem} }

/* ── Interruptor y configuración del segundo nivel del chatbot ── */
.ia-switch{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 18px;border-radius:16px;border:1px solid var(--line,#e0e8ef);background:var(--bg-2,#f2f7fb);margin-bottom:12px}
.ia-switch.on{border-color:#bfe4c9;background:#f2fbf5}
.ia-switch.off{border-color:#f0d9d9;background:#fdf6f6}
.ia-switch b{display:block;font-size:.98rem;color:var(--navy,#0a315d)}
.ia-switch small{display:block;color:var(--dim,#708397);font-size:.76rem;margin-top:2px}
.ia-cfg{border:1px solid var(--line,#e0e8ef);border-radius:16px;background:var(--panel,#fff);margin-bottom:14px}
.ia-cfg>summary{cursor:pointer;padding:13px 18px;font-weight:800;color:var(--navy,#0a315d);font-size:.92rem;list-style:none}
.ia-cfg>summary::-webkit-details-marker{display:none}
.ia-cfg>summary::before{content:"▸ ";color:var(--acc,#0bb6c4)}
.ia-cfg[open]>summary::before{content:"▾ "}
.ia-form{padding:0 18px 16px}
.ia-form h4{margin:14px 0 8px;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--dim,#708397)}
.ia-check{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:var(--text);margin-top:6px}
.ia-check input{width:auto!important;min-height:0!important;accent-color:var(--acc,#0bb6c4)}

/* ── El robot del «está escribiendo…» ──
   Aquí ya no hay un cerebro con hilos y nodos: es EL MISMO robot del botón
   flotante, a 24 px dentro de la burbuja. Lo único que cambia es el color,
   porque el fondo de la burbuja es claro. */
.chat-typing .ct-av .adiabot-line{color:var(--navy,#002863);width:24px;height:24px}
/* Mientras «piensa» parpadea más seguido (la inclinación del avatar la pone
   ctPensar, más arriba). */
.chat-typing.ct-pensando .ct-av .adiabot-line .abl-ojos{animation-duration:2.4s}

/* ── Estadísticas del segundo nivel del chatbot ── */
.ia-stats{border:1px solid var(--line,#e0e8ef);border-radius:16px;padding:16px 18px;margin:12px 0;background:var(--panel,#fff)}
.ia-stats h4{margin:0 0 4px;font-size:.86rem;color:var(--navy,#0a315d)}
.ia-stats-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.ia-stats-cab small{color:var(--dim,#708397);font-size:.76rem}
.ia-proy{text-align:right;padding:8px 12px;border-radius:12px;background:var(--bg-2,#f2f7fb);min-width:210px}
.ia-proy span{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--dim,#708397)}
.ia-proy b{display:block;font-size:1rem;color:var(--navy,#0a315d);font-family:var(--mono,monospace)}
.ia-proy small{display:block;font-size:.68rem;color:var(--dim,#708397);margin-top:2px}
.ia-barras{width:100%;height:130px;display:block}
.ia-barras .ia-b{fill:var(--acc,#0bb6c4)}
.ia-barras .ia-b-fin{fill:#8ab6d6}
.ia-barras .ia-b0{fill:#e3ecf3}
.ia-barras .ia-eje{font-size:9px;fill:#8192a2;font-family:var(--mono,monospace)}
.ia-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
.ia-mini{width:100%;border-collapse:collapse;font-size:.8rem}
.ia-mini td{padding:5px 0;border-bottom:1px dashed var(--line,#e8eef4)}
.ia-mini td small{display:block;color:var(--dim,#708397);font-size:.68rem}
.ia-mini td+td{text-align:right;white-space:nowrap}
.ia-horas{display:flex;align-items:flex-end;gap:2px;height:50px;padding-top:6px}
.ia-horas span{flex:1;background:var(--acc,#0bb6c4);border-radius:2px 2px 0 0;min-height:2px}
.ia-horas span.v{background:#e3ecf3}
.ia-horas-eje{display:flex;justify-content:space-between;font:10px var(--mono,monospace);color:#8192a2;margin-top:3px}
.ia-prod{border-radius:16px;padding:14px 18px;margin:12px 0;border:1px solid}
.ia-prod.si{border-color:#bfe4c9;background:#f2fbf5}
.ia-prod.no{border-color:#f2e2c4;background:#fdf9f0}
.ia-prod h4{margin:0 0 8px;font-size:.95rem;color:var(--navy,#0a315d)}
.ia-prod ul{margin:0 0 8px;padding-left:2px;list-style:none}
.ia-prod li{font-size:.82rem;padding:3px 0;color:var(--text)}
.ia-prod li.ok{color:#1c7a4a}
.ia-prod li.falta{color:#96591a}
@media(max-width:820px){ .ia-stats-grid{grid-template-columns:1fr} .ia-proy{text-align:left} }

/* ============================================================
   PASARELAS DE PAGO — /pagar y la pestaña Pagos de /adiasis
   ============================================================ */
.pg-hero h1{margin-bottom:6px}
.pg-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 26px 24px;margin:0 0 20px;
  box-shadow:0 10px 34px rgba(10,49,93,.07)}
.pg-card .wz-title{margin-bottom:6px}
.pg-resumen{margin-bottom:20px}
.pg-mini{font-size:.8rem;color:var(--muted);line-height:1.55;margin-top:10px}
.pg-alert{border-radius:14px;padding:13px 17px;margin:0 0 18px;font-size:.9rem;line-height:1.5;border:1px solid}
.pg-alert.ok{background:#eefbf3;border-color:#bfe4c9;color:#1c6b43}
.pg-alert.err{background:#fdf3f0;border-color:#f0cfc4;color:#9c3b1e}
[data-theme="dark"] .pg-alert.ok{background:#12281d;color:#8ee0ae}
[data-theme="dark"] .pg-alert.err{background:#2a1713;color:#f0a68c}
/* Botón-tarjeta de cada pasarela (es un <button>, no un label) */
.pg-methods{gap:12px}
.pg-opt{grid-template-columns:auto 1fr auto;text-align:left;background:var(--panel);font:inherit;width:100%}
.pg-opt .pay-ic{grid-row:1/3;font-size:1.5rem}
.pg-opt .pay-name{font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pg-opt .pay-desc{color:var(--muted);font-size:.84rem;line-height:1.45}
.pg-opt .pg-go{grid-row:1/3;grid-column:3;font-size:1.3rem;color:var(--acc);transition:transform .2s}
.pg-opt:hover .pg-go{transform:translateX(4px)}
.pg-tag{font:600 .66rem/1 var(--mono,monospace);letter-spacing:.06em;text-transform:uppercase;
  padding:4px 7px;border-radius:6px;background:var(--bg-2);color:var(--muted);font-style:normal}
.pg-tag.on{background:rgba(11,182,196,.14);color:#0b7f89}
.pg-datos{background:var(--bg-2);border:1px dashed var(--line-2);border-radius:14px;padding:14px 16px;margin:6px 0 14px}
.pg-dato{font:600 .92rem/1.7 var(--mono,monospace);color:var(--navy);word-break:break-word}
[data-theme="dark"] .pg-dato{color:#dbe6f7}
.pg-qr{display:block;margin:0 auto 16px;max-width:230px;border-radius:14px;border:1px solid var(--line)}
.pg-voucher{display:block;margin:12px auto 0;max-width:320px;border-radius:12px;border:1px solid var(--line)}
.pg-form .field{margin-bottom:12px}
.pg-culqi-box{text-align:center;padding:10px 0 4px}
.pg-culqi-msg{margin-top:12px;font-size:.88rem;color:var(--muted);min-height:20px}
.pg-culqi-msg .err{color:#b4441f}
.pg-spin{display:inline-block;width:13px;height:13px;border:2px solid var(--line-2);border-top-color:var(--acc);
  border-radius:50%;animation:pgspin .7s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes pgspin{to{transform:rotate(360deg)}}
.pg-done .wz-done-ico{margin:0 auto 10px}
.pg-seguro{text-align:center;font-size:.82rem;color:var(--muted);line-height:1.6;margin-top:6px}
.pg-seguro a{color:var(--acc);font-weight:600}
/* --- Panel: configuración de pasarelas --- */
.pas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px;margin-top:6px}
.pas-card{border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px;background:var(--panel)}
.pas-card.on{border-color:#9fdcc4;box-shadow:0 0 0 3px rgba(28,122,74,.07)}
.pas-head{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.pas-head .ic{font-size:1.5rem;line-height:1}
.pas-head h4{margin:0;font-size:1.02rem;color:var(--navy)}
.pas-head .badge{margin-left:auto}
.pas-res{font-size:.83rem;color:var(--muted);line-height:1.5;margin-bottom:12px}
.pas-nota{font-size:.78rem;color:var(--muted);background:var(--bg-2);border-radius:10px;padding:9px 11px;line-height:1.5;margin:10px 0}
.pas-card .field{margin-bottom:10px}
.pas-card label{display:block;font-size:.78rem;font-weight:700;color:var(--navy);margin-bottom:4px}
.pas-card input,.pas-card select,.pas-card textarea{width:100%;padding:8px 10px;border:1px solid var(--line-2);
  border-radius:9px;font:inherit;font-size:.85rem;background:var(--panel);color:var(--text)}
.pas-card small{display:block;font-size:.73rem;color:var(--dim);line-height:1.45;margin-top:3px}
.pas-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pas-sw{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;color:var(--navy);margin-bottom:10px}
.pas-sw input{width:auto}
/* Doble check de la Comunidad: bloque de compra dentro de Mi perfil */
.pf-verif.on{background:#eefbf3;border-color:#bfe4c9}
[data-theme="dark"] .pf-verif.on{background:#12281d;border-color:#2c5b41}
.pf-verif form{margin-top:10px}
.pf-verif-precio{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:10px 0 2px}
.pf-verif-precio span{font-family:var(--display);font-size:1.5rem;font-weight:800;color:var(--navy)}
[data-theme="dark"] .pf-verif-precio span{color:#dbe6f7}
.pf-verif-precio small{color:var(--muted);font-size:.78rem;line-height:1.45}
.pf-verif-mini{display:block;color:var(--dim);font-size:.75rem;line-height:1.5;margin-top:8px}
.pg-pasos{margin:6px 0 16px;padding-left:20px;color:var(--muted);font-size:.86rem;line-height:1.7}
.pg-pasos li{margin-bottom:2px}
.pg-pasos b{color:var(--navy)}
[data-theme="dark"] .pg-pasos b{color:#dbe6f7}
.pg-yape .field-row{display:flex;gap:12px;flex-wrap:wrap}
.pg-yape .field{flex:1;min-width:150px}
.pg-yape input{width:100%;padding:11px 13px;border:1px solid var(--line-2);border-radius:10px;font:inherit;
  background:var(--panel);color:var(--text)}
.pg-yape input.pf-codigo{letter-spacing:.35em;text-align:center;font-family:var(--mono,monospace);font-size:1.15rem}
/* Banco de pruebas de las pasarelas */
.pg-tag.test{background:#fff4e0;color:#9a6412}
[data-theme="dark"] .pg-tag.test{background:#3a2c14;color:#f0c479}
.pg-sim{border:2px dashed #e0b25e;position:relative}
.pg-sim-cinta{position:absolute;top:-1px;right:-1px;background:#e0b25e;color:#3a2c14;
  font:700 .7rem/1 var(--mono,monospace);letter-spacing:.06em;padding:7px 12px;border-radius:0 16px 0 12px}
.pg-sim-acts{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 4px}
.pg-sim-acts form{margin:0}
/* Guía de configuración de cada pasarela (modal del SPAG) */
.pas-modal{border:0;border-radius:20px;padding:0;max-width:720px;width:calc(100% - 32px);
  background:var(--panel);color:var(--text);box-shadow:0 30px 90px rgba(8,32,64,.3)}
.pas-modal::backdrop{background:rgba(8,32,64,.55)}
.pas-modal-head{display:flex;align-items:flex-start;gap:14px;padding:22px 24px 14px;border-bottom:1px solid var(--line)}
.pas-modal-head h3{margin:2px 0 0;font-size:1.25rem;color:var(--navy)}
.pas-modal-head .erp-modal-close{margin-left:auto}
.pas-modal-cuerpo{padding:18px 24px 8px;max-height:66vh;overflow-y:auto}
.pas-modal-cuerpo h4{margin:20px 0 8px;font-size:.95rem;color:var(--navy);
  padding-bottom:6px;border-bottom:2px solid var(--line)}
[data-theme="dark"] .pas-modal-head h3,[data-theme="dark"] .pas-modal-cuerpo h4{color:#dbe6f7}
.pas-para{font-size:.92rem;line-height:1.6;color:var(--text);background:var(--bg-2);
  border-radius:12px;padding:13px 15px;margin-bottom:14px}
.pas-p{font-size:.87rem;line-height:1.65;color:var(--muted)}
.pas-tiempos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 4px}
.pas-tiempos div{background:var(--bg-2);border-radius:12px;padding:12px 14px}
.pas-tiempos span{display:block;font-size:.73rem;text-transform:uppercase;letter-spacing:.05em;color:var(--dim)}
.pas-tiempos b{font-family:var(--display);font-size:1.02rem;color:var(--navy)}
[data-theme="dark"] .pas-tiempos b{color:#dbe6f7}
.pas-pasos{margin:0;padding-left:22px;font-size:.87rem;line-height:1.65;color:var(--text)}
.pas-pasos li{margin-bottom:9px}
.pas-lista{margin:0;padding-left:20px;font-size:.85rem;line-height:1.6;color:var(--muted)}
.pas-lista li{margin-bottom:5px}
.pas-url{font:600 .8rem/1.5 var(--mono,monospace);background:var(--navy);color:#dff3ff;
  border-radius:10px;padding:10px 13px;margin:8px 0 4px;word-break:break-all}
.pas-tabla{width:100%;border-collapse:collapse;font-size:.85rem}
.pas-tabla th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--dim);padding:6px 8px;border-bottom:1px solid var(--line)}
.pas-tabla td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.pas-tabla td small{color:var(--dim);font-size:.72rem;word-break:break-all}
.pas-comision-adia{margin:20px 0 6px;padding:14px 16px;border-radius:12px;
  background:rgba(11,182,196,.08);border:1px solid rgba(11,182,196,.28)}
.pas-comision-adia b{color:var(--navy);display:block;margin-bottom:5px}
[data-theme="dark"] .pas-comision-adia b{color:#7fe3ec}
.pas-comision-adia p{font-size:.84rem;line-height:1.6;color:var(--muted);margin:0}
.pas-modal-pie{display:flex;gap:10px;justify-content:flex-end;padding:14px 24px 20px;border-top:1px solid var(--line)}
.pas-card.es-test{border-color:#e0b25e;box-shadow:0 0 0 3px rgba(224,178,94,.12)}
.pas-estado select{font-weight:700}
@media(max-width:600px){ .pas-tiempos{grid-template-columns:1fr} }
/* Aviso de vencimiento del plan (panel del cliente) */
.plan-vence{display:flex;align-items:flex-start;gap:14px;margin:14px 0;padding:14px 18px;border-radius:14px;
  background:#fff8ec;border:1px solid #f0d9ac}
.plan-vence.urge{background:#fdf1ee;border-color:#f0c4b8}
[data-theme="dark"] .plan-vence{background:#2c2413;border-color:#5c4a24}
[data-theme="dark"] .plan-vence.urge{background:#2e1a15;border-color:#66392c}
.plan-vence .pv-ico{font-size:1.4rem;line-height:1.2}
.plan-vence b{display:block;color:var(--navy);font-size:.95rem;margin-bottom:3px}
[data-theme="dark"] .plan-vence b{color:#f0dcb4}
.plan-vence small{display:block;color:var(--muted);font-size:.81rem;line-height:1.55}
.plan-vence .btn{margin-left:auto;flex-shrink:0;align-self:center}
@media(max-width:640px){ .plan-vence{flex-wrap:wrap} .plan-vence .btn{margin-left:0;width:100%;justify-content:center} }
/* Resumen de la suscripción en el panel del cliente */
.susc-linea{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:2px;
  background:var(--line);border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.susc-linea>div{background:var(--panel);padding:12px 14px}
.susc-linea span{display:block;font-size:.71rem;text-transform:uppercase;letter-spacing:.05em;color:var(--dim);margin-bottom:3px}
.susc-linea b{font-family:var(--display);font-size:.98rem;color:var(--navy)}
[data-theme="dark"] .susc-linea b{color:#dbe6f7}
.susc-linea.avisa{border-color:#e0b25e}
.susc-linea.vencida{border-color:#d98a72}
/* Recorrido del pedido (línea de tiempo en el panel SPAG) */
.adm-tl{margin-top:8px;font-size:.8rem}
.adm-tl summary{cursor:pointer;color:var(--acc);font-weight:600;list-style:none}
.adm-tl summary::-webkit-details-marker{display:none}
.adm-tl summary::before{content:'▸ ';transition:.15s}
.adm-tl[open] summary::before{content:'▾ '}
.adm-tl ol{margin:8px 0 0;padding-left:16px;border-left:2px solid var(--line-2);list-style:none}
.adm-tl li{position:relative;padding:4px 0 4px 10px;color:var(--text);line-height:1.5}
.adm-tl li::before{content:'';position:absolute;left:-21px;top:10px;width:7px;height:7px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 0 3px var(--panel)}
.adm-tl li span{color:var(--dim);font-family:var(--mono,monospace);font-size:.72rem;margin-right:6px}
.adm-tl li small{display:block;color:var(--muted);font-size:.74rem}
/* «Ya tenemos tus datos» — evita repetir el asistente al subir de plan */
.datos-conocidos{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.datos-conocidos>div{background:var(--panel);padding:10px 13px}
.datos-conocidos span{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--dim);margin-bottom:2px}
.datos-conocidos b{font-size:.9rem;color:var(--navy);word-break:break-word}
[data-theme="dark"] .datos-conocidos b{color:#dbe6f7}
/* Pantalla de suspensión por falta de pago */
.susp-caja{max-width:600px;margin:0 auto;background:var(--panel);border:1px solid var(--line);
  border-radius:22px;padding:36px 32px;text-align:center;box-shadow:0 18px 50px rgba(10,49,93,.1)}
.susp-ico{font-size:3rem;line-height:1;margin-bottom:10px}
.susp-caja h1{font-size:1.6rem;color:var(--navy);margin-bottom:10px}
[data-theme="dark"] .susp-caja h1{color:#dbe6f7}
.susp-sub{color:var(--muted);font-size:.94rem;line-height:1.65;margin-bottom:20px}
.susp-tranquilo{background:#eefbf3;border:1px solid #bfe4c9;border-radius:14px;padding:16px 18px;text-align:left;margin-bottom:18px}
[data-theme="dark"] .susp-tranquilo{background:#12281d;border-color:#2c5b41}
.susp-tranquilo b{display:block;color:#1c6b43;margin-bottom:5px}
[data-theme="dark"] .susp-tranquilo b{color:#8ee0ae}
.susp-tranquilo p{color:var(--muted);font-size:.87rem;line-height:1.6;margin:0}
.susp-importe{display:inline-flex;align-items:baseline;gap:10px;background:var(--bg-2);border-radius:12px;
  padding:12px 20px;margin-bottom:18px}
.susp-importe span{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--dim)}
.susp-importe b{font-family:var(--display);font-size:1.5rem;color:var(--navy)}
[data-theme="dark"] .susp-importe b{color:#dbe6f7}
.susp-acts{margin-bottom:24px}
.susp-ayuda{border-top:1px solid var(--line);padding-top:20px;text-align:left}
.susp-ayuda b{color:var(--navy);display:block;margin-bottom:5px}
[data-theme="dark"] .susp-ayuda b{color:#dbe6f7}
.susp-ayuda p{color:var(--muted);font-size:.87rem;line-height:1.6;margin-bottom:12px}
.susp-canales{display:flex;gap:10px;flex-wrap:wrap}
.susp-ayuda small{display:block;color:var(--dim);font-size:.76rem;line-height:1.5;margin-top:10px}
.susp-pie{margin-top:20px;font-size:.82rem}
.susp-pie a{color:var(--dim)}
@media(max-width:560px){ .susp-caja{padding:26px 20px} .susp-canales .btn{width:100%;justify-content:center} }
.wa-msg{max-width:340px;font-size:.85rem;line-height:1.5;color:var(--text);
  background:#eefbf3;border-radius:10px 10px 10px 2px;padding:9px 12px;border:1px solid #cfe9d8}
[data-theme="dark"] .wa-msg{background:#12281d;border-color:#2c5b41}
/* Buscador global del SPAG: bloque de secciones bajo la lista de empresas.
   🔴 Mismo cajón EXACTO que la lista larga (.spag-emp-combo select): mismo
   ancho, mismo top y misma altura máxima. Este panel TAPA a esa lista mientras
   se busca (z-index 60 contra 40); con medidas distintas la lista asomaba por
   la derecha y por debajo — se veían dos desplegables encimados y descuadrados,
   que fue justo lo que reportó el dueño. */
.spag-emp-secciones{position:absolute;left:0;width:min(320px,70vw);top:calc(100% + 4px);z-index:60;background:var(--panel);
  border:1px solid var(--line-2);border-radius:12px;box-shadow:0 14px 34px rgba(10,49,93,.16);
  max-height:280px;overflow-y:auto;padding:6px}
.spag-emp-secciones .ses-tit{display:block;font:700 .66rem/1 var(--mono,monospace);letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);padding:7px 10px 5px}
.spag-emp-secciones a{display:flex;align-items:baseline;gap:8px;padding:8px 10px;border-radius:8px;
  text-decoration:none;color:var(--text)}
.spag-emp-secciones a:hover{background:var(--bg-2)}
.spag-emp-secciones a b{font-size:.87rem;color:var(--navy);font-weight:600}
[data-theme="dark"] .spag-emp-secciones a b{color:#dbe6f7}
.spag-emp-secciones a small{font-size:.72rem;color:var(--dim);margin-left:auto}
/* 76.ª (27/08) · El grupo EMPRESAS dentro de ese mismo panel.
   Las filas de empresa se apilan (nombre arriba, «rubro · país · plan» debajo)
   en vez de ir en una línea como las de sección: la ficha son tres datos y a la
   derecha no caben sin cortarse justo donde importa. Se distinguen por
   [data-emp], que sólo llevan ellas, así que las secciones no se enteran. */
.spag-emp-secciones a[data-emp]{display:block}
.spag-emp-secciones a[data-emp] small{display:block;margin-left:0;margin-top:2px}
/* Lo que coincidió. Sin fondo chillón: un subrayado grueso en el color de
   acento marca sin romper la lectura del nombre, y funciona igual en el tema
   oscuro porque el token ya está redefinido más arriba. */
.spag-emp-secciones mark{background:none;color:inherit;font-weight:800;
  box-shadow:inset 0 -.42em 0 var(--acc-soft,#cfe6ff);border-radius:2px}
[data-theme="dark"] .spag-emp-secciones mark{box-shadow:inset 0 -.42em 0 rgba(47,127,240,.28)}

/* ============================================================
   BUSINESS INTELLIGENCE  (?s=bi)
   ------------------------------------------------------------
   Todo con los tokens del tema (--line, --dim, --acc…), que ya
   están redefinidos para el modo oscuro más arriba: si aquí se
   escribiera un #fff suelto, la pantalla se rompería en oscuro.
   ============================================================ */
.bi-svg{margin-top:2px}
.bi-tendencia{stroke:var(--acc-2);stroke-width:2.2;stroke-dasharray:6 4;fill:none;stroke-linecap:round}
.bi-bar-vacia{fill:var(--line-2);opacity:.5}
.tab-leyenda .bi-c-tend{background:var(--acc-2)}
.tab-leyenda .bi-c-vacia{background:var(--line-2);height:8px;border-radius:2px}

/* Variación contra el periodo anterior */
.bi-d{display:block;font-size:.76rem;font-weight:800;margin-top:2px}
.bi-d-up{color:var(--ok,#178f4e)}
.bi-d-down{color:var(--err,#c0392b)}
.bi-d-flat{color:var(--dim)}
.bi-d-na{color:var(--dim);font-weight:600;font-style:italic}
.bi-kpis .num{font-size:1.45rem}
.bi-ant{display:block;color:var(--dim);font-size:.72rem;margin-top:2px;line-height:1.3}

/* Avisos */
.bi-alertas{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.bi-alerta{padding:11px 13px;border-radius:11px;border:1px solid var(--line);
  background:var(--bg-2);border-inline-start-width:4px}
.bi-alerta b{display:block;font-size:.9rem;color:var(--navy);margin-bottom:3px}
[data-theme="dark"] .bi-alerta b{color:#dbe6f7}
.bi-alerta span{display:block;font-size:.82rem;color:var(--muted);line-height:1.45}
.bi-a-alta{border-inline-start-color:var(--err,#c0392b)}
.bi-a-media{border-inline-start-color:#e08b1f}
.bi-a-info{border-inline-start-color:var(--acc)}
.bi-a-ok{border-inline-start-color:var(--ok,#178f4e)}

/* Proyección */
.bi-proy{display:grid;gap:14px;grid-template-columns:minmax(200px,260px) 1fr;align-items:start;margin:8px 0}
.bi-proy-num{padding:14px;border-radius:13px;border:1px solid var(--acc);
  background:linear-gradient(135deg,rgba(0,178,214,.12),rgba(3,36,92,.08))}
.bi-proy-num span{display:block;color:var(--dim);font-size:.76rem;text-transform:uppercase;letter-spacing:.04em}
.bi-proy-num b{display:block;font-size:1.6rem;color:var(--navy);line-height:1.15;margin:2px 0}
[data-theme="dark"] .bi-proy-num b{color:#eaf2ff}
.bi-proy-num small{display:block;color:var(--muted);font-size:.76rem}
.bi-proy-det{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.bi-proy-det>div{padding:9px 11px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line)}
.bi-proy-det span{display:block;color:var(--dim);font-size:.74rem}
.bi-proy-det b{font-size:.95rem;color:var(--navy)}
[data-theme="dark"] .bi-proy-det b{color:#dbe6f7}
@media(max-width:760px){ .bi-proy{grid-template-columns:1fr} }

/* Nota metodológica: se lee, pero no compite con los números */
.bi-nota{color:var(--muted);font-size:.8rem;line-height:1.5;margin:8px 0 0}
.bi-nota code{font-size:.76rem;padding:1px 4px;border-radius:4px;background:var(--bg-2);border:1px solid var(--line)}
.bi-warn{color:var(--err,#c0392b)}
.bi-h-sub{font-weight:500;color:var(--dim);font-size:.82rem}
.bi-poco-dato{border-inline-start:4px solid #e08b1f}

/* ABC */
.bi-abc-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0 12px}
.bi-abc-res{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-bottom:12px}
.bi-abc-card{padding:11px 13px;border-radius:11px;border:1px solid var(--line);background:var(--bg-2)}
.bi-abc-card span{display:block;color:var(--dim);font-size:.74rem}
.bi-abc-card b{display:block;font-size:1.05rem;color:var(--navy)}
[data-theme="dark"] .bi-abc-card b{color:#dbe6f7}
.bi-abc-card small{display:block;color:var(--muted);font-size:.78rem}
.bi-abc-A{border-color:var(--ok,#178f4e)}
.bi-abc-B{border-color:#e08b1f}
.bi-abc-C{border-color:var(--line-2)}
.bi-tag{display:inline-block;padding:2px 8px;border-radius:11px;font-size:.7rem;font-weight:800;
  border:1px solid var(--line-2);color:var(--muted);white-space:nowrap}
.bi-tag-A{border-color:var(--ok,#178f4e);color:var(--ok,#178f4e)}
.bi-tag-B{border-color:#e08b1f;color:#e08b1f}
.bi-tag-C{border-color:var(--line-2);color:var(--dim)}
.bi-cod{display:block;color:var(--dim);font-size:.72rem}
.bi-fila-A td{background:rgba(23,143,78,.045)}

/* Barras horizontales de horas / semana / categorías */
.bi-bh{display:block;height:9px;border-radius:5px;background:var(--line-2);min-width:60px;overflow:hidden}
.bi-bh i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--acc),var(--acc-2))}
.bi-bh-td{width:34%;min-width:70px}
.bi-mini{width:100%;border-collapse:collapse}
.bi-mini th{text-align:start;font-weight:700;font-size:.8rem;color:var(--muted);padding:4px 8px 4px 0;white-space:nowrap}
.bi-mini td{padding:4px 8px 4px 0;font-size:.82rem;color:var(--text);white-space:nowrap}
.bi-dos{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.bi-dos h4{margin:0 0 8px;font-size:.95rem}
.bi-fuentes .plan-up-list li{font-size:.82rem;line-height:1.55}

/* ============================================================
   OCR DE DOCUMENTOS — modal de «Leer factura con una foto»
   ============================================================ */
.ocr-modal{max-width:1080px;width:min(96vw,1080px)}
.ocr-drop{border:2px dashed var(--line-2);border-radius:14px;background:var(--bg-2);
  padding:26px 18px;text-align:center;transition:border-color .18s,background .18s}
.ocr-drop.is-over{border-color:var(--acc);background:rgba(0,178,214,.08)}
.ocr-drop-in b{display:block;font-size:1.05rem;color:var(--navy);margin-bottom:4px}
[data-theme="dark"] .ocr-drop-in b{color:#dbe6f7}
.ocr-drop-in>span{display:block;color:var(--dim);font-size:.82rem;margin:4px 0}
.ocr-drop-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:8px 0 6px}
.ocr-drop-in small{display:block;color:var(--dim);font-size:.76rem;margin-top:6px}
.ocr-consejo{color:var(--muted);font-size:.82rem;line-height:1.5;margin:10px 0 2px}
.ocr-cupo{color:var(--dim);font-size:.76rem;margin:0 0 8px}

.ocr-estado{margin:12px 0;padding:11px 13px;border-radius:11px;border:1px solid var(--line);
  background:var(--bg-2);font-size:.87rem;color:var(--text)}
.ocr-estado.is-err{border-color:var(--err,#c0392b);color:var(--err,#c0392b)}
.ocr-estado.is-load{border-color:var(--acc)}
.ocr-spin{display:inline-block;width:13px;height:13px;margin-inline-end:7px;vertical-align:-2px;
  border:2px solid var(--line-2);border-top-color:var(--acc);border-radius:50%;
  animation:ocrspin .8s linear infinite}
@keyframes ocrspin{to{transform:rotate(360deg)}}

/* Foto y datos, uno al lado del otro: comparar con el papel es lo que
   hace fiable un OCR, y para eso hay que ver las dos cosas a la vez. */
.ocr-dos{display:grid;gap:16px;grid-template-columns:minmax(240px,360px) 1fr;align-items:start;margin:12px 0}
@media(max-width:820px){ .ocr-dos{grid-template-columns:1fr} }
.ocr-foto{margin:0;position:sticky;top:0}
.ocr-foto img{width:100%;height:auto;max-height:60vh;object-fit:contain;border-radius:11px;
  border:1px solid var(--line);background:#fff}
.ocr-foto figcaption{color:var(--dim);font-size:.76rem;margin-top:6px;line-height:1.45}
.ocr-datos{min-width:0}

/* El bloque del duplicado: es lo primero que se lee */
.ocr-dup{padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  border-inline-start-width:4px;background:var(--bg-2);margin-bottom:12px}
.ocr-dup>b{display:block;font-size:1rem;color:var(--navy);margin-bottom:3px}
[data-theme="dark"] .ocr-dup>b{color:#dbe6f7}
.ocr-dup>span{display:block;color:var(--muted);font-size:.84rem;line-height:1.45}
.ocr-dup-exacta{border-inline-start-color:var(--err,#c0392b);background:rgba(192,57,43,.07)}
.ocr-dup-probable,.ocr-dup-parecida{border-inline-start-color:#e08b1f;background:rgba(224,139,31,.07)}
.ocr-dup-nueva{border-inline-start-color:var(--ok,#178f4e)}
.ocr-dup-ficha{display:grid;gap:7px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin:9px 0 6px}
.ocr-dup-ficha>div{padding:6px 9px;border-radius:8px;background:var(--panel);border:1px solid var(--line)}
.ocr-dup-ficha span{display:block;color:var(--dim);font-size:.7rem}
.ocr-dup-ficha b{font-size:.86rem;color:var(--navy)}
[data-theme="dark"] .ocr-dup-ficha b{color:#dbe6f7}
.ocr-dup-consejo{display:block;font-size:.82rem;font-weight:700;color:var(--navy)}
[data-theme="dark"] .ocr-dup-consejo{color:#dbe6f7}

.ocr-conf{margin:0 0 8px;color:var(--dim)}
.ocr-conf small{font-size:.76rem;margin-inline-start:6px}
.ocr-notas{color:var(--muted);font-size:.8rem;line-height:1.45;margin:5px 0 0}

/* La tabla de campos leídos */
.ocr-tabla{width:100%;border-collapse:collapse;margin-bottom:10px}
.ocr-tabla th{text-align:start;font-weight:600;font-size:.79rem;color:var(--dim);
  padding:5px 10px 5px 0;white-space:nowrap;vertical-align:top;width:40%}
.ocr-tabla td{padding:5px 0;font-size:.87rem;color:var(--text);word-break:break-word}
.ocr-tabla tr:not(:last-child) th,.ocr-tabla tr:not(:last-child) td{border-bottom:1px solid var(--line)}
.ocr-tabla .ocr-vacio{color:var(--err,#c0392b);font-style:italic;font-size:.8rem}
.ocr-tabla tr.ocr-total th,.ocr-tabla tr.ocr-total td{font-weight:800;font-size:1rem;color:var(--navy)}
[data-theme="dark"] .ocr-tabla tr.ocr-total th,[data-theme="dark"] .ocr-tabla tr.ocr-total td{color:#eaf2ff}

.ocr-sunat{padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg-2);margin-bottom:10px}
.ocr-sunat.is-ok{border-color:var(--ok,#178f4e)}
.ocr-sunat.is-err{border-color:var(--err,#c0392b)}
.ocr-sunat b{display:block;font-size:.87rem;color:var(--navy)}
[data-theme="dark"] .ocr-sunat b{color:#dbe6f7}
.ocr-sunat span{display:block;font-size:.84rem;color:var(--text);margin:2px 0}
.ocr-sunat small{display:block;font-size:.75rem;color:var(--dim);line-height:1.45;margin-top:3px}

.ocr-avisos{padding:10px 12px;border-radius:10px;border:1px solid #e08b1f;
  background:rgba(224,139,31,.07);margin-bottom:10px}
.ocr-avisos.is-ok{border-color:var(--ok,#178f4e);background:rgba(23,143,78,.06)}
.ocr-avisos b{display:block;font-size:.87rem;color:var(--navy);margin-bottom:4px}
[data-theme="dark"] .ocr-avisos b{color:#dbe6f7}
.ocr-avisos span{display:block;font-size:.82rem;color:var(--muted);line-height:1.5}
.ocr-avisos ul{margin:0;padding-inline-start:18px}
.ocr-avisos li{font-size:.82rem;color:var(--muted);line-height:1.5;margin-bottom:3px}

.ocr-tabla-items{width:100%;border-collapse:collapse;font-size:.81rem}
.ocr-tabla-items th{text-align:start;color:var(--dim);font-weight:700;padding:5px 8px 5px 0;white-space:nowrap}
.ocr-tabla-items td{padding:5px 8px 5px 0;border-top:1px solid var(--line)}
.ocr-ded{color:var(--dim);font-size:.7rem}
.ocr-nota{color:var(--muted);font-size:.79rem;line-height:1.5;margin:8px 0 0}
.ocr-hist{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.ocr-hist summary{cursor:pointer;font-weight:700;font-size:.87rem;color:var(--navy)}
[data-theme="dark"] .ocr-hist summary{color:#dbe6f7}
.pos-aviso.is-warn{color:#e08b1f;font-weight:700}

/* ============================================================
   RUBRO FARMACÉUTICO — lotes, vencimientos y DIGEMID
   ============================================================ */
/* Semáforo de vencimientos */
.fa-semaforo{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:10px 0}
.fa-sem{display:block;padding:11px 13px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg-2);text-decoration:none;border-inline-start-width:4px;
  transition:transform .16s,box-shadow .16s}
.fa-sem:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(3,36,92,.10)}
.fa-sem.is-on{border-color:var(--acc);box-shadow:0 0 0 2px rgba(0,178,214,.18)}
.fa-sem span{display:block;color:var(--dim);font-size:.75rem;line-height:1.3}
.fa-sem b{display:block;font-size:1.5rem;color:var(--navy);line-height:1.15}
[data-theme="dark"] .fa-sem b{color:#eaf2ff}
.fa-sem small{display:block;color:var(--muted);font-size:.76rem}
.fa-sem-err{border-inline-start-color:var(--err,#c0392b)}
.fa-sem-warn{border-inline-start-color:#e08b1f}
.fa-sem-ok{border-inline-start-color:var(--ok,#178f4e)}

/* Etiqueta del tramo de vencimiento */
.fa-t{display:inline-block;padding:2px 9px;border-radius:11px;font-size:.71rem;font-weight:800;
  border:1px solid var(--line-2);color:var(--muted);white-space:nowrap}
.fa-t-vencido{border-color:var(--err,#c0392b);color:var(--err,#c0392b);background:rgba(192,57,43,.08)}
.fa-t-critico{border-color:var(--err,#c0392b);color:var(--err,#c0392b)}
.fa-t-proximo,.fa-t-canje{border-color:#e08b1f;color:#e08b1f}
.fa-t-vigente{border-color:var(--ok,#178f4e);color:var(--ok,#178f4e)}
.fa-t-sin_fecha{border-color:var(--line-2);color:var(--dim);font-style:italic}
.fa-fila-vencido td{background:rgba(192,57,43,.05)}
.fa-fila-critico td{background:rgba(224,139,31,.06)}

/* Lote y vencimiento dentro de la línea de compra */
.fa-linea-lote{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.fa-linea-lote input{flex:1;min-width:110px;padding:5px 8px;border-radius:7px;
  border:1px solid var(--line-2);background:var(--panel);color:var(--text);font-size:.8rem}
.fa-linea-lote input:focus{outline:none;border-color:var(--acc)}

/* Ficha normativa de DIGEMID */
.fa-norma{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:6px 0 12px}
.fa-norma>div{padding:9px 12px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line)}
.fa-norma span{display:block;color:var(--dim);font-size:.73rem;text-transform:uppercase;letter-spacing:.04em}
.fa-norma b{font-size:.87rem;color:var(--navy);line-height:1.4;word-break:break-word}
[data-theme="dark"] .fa-norma b{color:#dbe6f7}
.fa-norma a{color:var(--acc)}
.fa-limite{margin-top:14px;padding:12px 14px;border-radius:12px;
  border:1px solid var(--err,#c0392b);border-inline-start-width:4px;background:rgba(192,57,43,.06)}
.fa-limite b{display:block;font-size:.9rem;color:var(--navy);margin-bottom:4px}
[data-theme="dark"] .fa-limite b{color:#dbe6f7}
.fa-limite p{font-size:.84rem;color:var(--muted);line-height:1.55;margin:0 0 6px}
.fa-pendiente{border-inline-start:4px solid var(--err,#c0392b)}

/* ============================================================
   PANEL SPAG · empresas, perfiles, comunidad y jerarquía
   ============================================================ */
/* KPI que además filtra */
.kpi-link{text-decoration:none;display:block;transition:transform .16s,box-shadow .16s,border-color .16s}
.kpi-link:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(3,36,92,.10);border-color:var(--acc)}
.kpi-link.on{border-color:var(--acc);box-shadow:0 0 0 2px rgba(0,178,214,.20)}
.kpi-link.on .lbl::after{content:' ●';color:var(--acc)}

/* Barra de rubros */
.emp-rubros{display:flex;flex-wrap:wrap;gap:6px}
.emp-rubro-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:14px;
  border:1px solid var(--line-2);background:var(--bg-2);text-decoration:none;font-size:.78rem;color:var(--muted)}
.emp-rubro-chip:hover{border-color:var(--acc);color:var(--navy)}
[data-theme="dark"] .emp-rubro-chip:hover{color:#dbe6f7}
.emp-rubro-chip.on{border-color:var(--acc);background:rgba(0,178,214,.12);color:var(--navy);font-weight:700}
[data-theme="dark"] .emp-rubro-chip.on{color:#eaf2ff}
.emp-rubro-chip b{font-size:.74rem;opacity:.75}

/* Desglose de perfiles por empresa */
.emp-perf-dots{display:flex;flex-wrap:wrap;gap:3px;margin:4px 0 2px}
.emp-perf-dot{position:relative;display:inline-block;padding:1px 5px;border-radius:5px;font-size:.62rem;
  font-weight:800;letter-spacing:.02em;border:1px solid var(--line-2);color:var(--dim);background:var(--bg-2)}
.emp-perf-dot.on{border-color:var(--ok,#178f4e);color:var(--ok,#178f4e);background:rgba(23,143,78,.10)}
.emp-perf-dot i{font-style:normal;font-size:.55rem;vertical-align:super;margin-inline-start:1px}
.emp-perf-seed{display:inline-block;margin-top:2px;font-size:.72rem;font-weight:700;color:var(--acc);
  text-decoration:none;border-bottom:1px dashed var(--acc)}
.emp-perf-seed:hover{color:var(--acc-2);border-color:var(--acc-2)}
.emp-perf-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.emp-perf-chip{display:inline-flex;flex-direction:column;padding:5px 9px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel)}
.emp-perf-chip b{font-size:.7rem;color:var(--dim)}
.emp-perf-chip code{font-size:.74rem;cursor:pointer}
.emp-seed-urg{border-color:var(--err,#c0392b) !important}
.emp-seed-ok{color:var(--ok,#178f4e);font-weight:700;font-size:.82rem;margin:6px 0 0}

/* Copiar correo / clave rápida en el listado de usuarios */
.usr-mail{word-break:break-all}
.usr-copy{margin-inline-start:6px;padding:1px 7px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--bg-2);color:var(--dim);
  font-size:.66rem;font-weight:800;font-family:var(--body);vertical-align:middle}
.usr-copy:hover{border-color:var(--acc);color:var(--acc)}
.usr-copy.is-ok{border-color:var(--ok,#178f4e);color:var(--ok,#178f4e)}
.usr-key:hover{border-color:var(--acc-2);color:var(--acc-2)}
/* El correo ENTERO es el botón (equipo): se pulsa el dato, no una pastilla al
   lado. Sin borde hasta que se pasa por encima, para que siga leyéndose como
   texto y no ensucie la lista. */
.usr-copy-mail{margin-inline-start:0;max-width:100%;overflow-wrap:anywhere;text-align:start;
  border-color:transparent;background:transparent;font-size:inherit;font-weight:inherit;
  color:inherit;padding:1px 4px}
.usr-copy-mail:hover{border-color:var(--line-2);background:var(--bg-2)}
/* En la barra de contexto del panel la pastilla va suelta, sin margen heredado. */
.adm-res .usr-copy{margin-inline-start:0;font-family:var(--mono,monospace);letter-spacing:.02em}
.usr-spal-warn{display:flex;gap:9px;align-items:flex-start;margin-top:10px;padding:10px 12px;
  border-radius:10px;border:1px solid var(--err,#c0392b);background:rgba(192,57,43,.07)}
.usr-spal-warn input{margin-top:3px;flex:0 0 auto}
.usr-spal-warn span{font-size:.82rem;color:var(--muted);line-height:1.5}
.usr-spal-warn b{color:var(--navy)}
[data-theme="dark"] .usr-spal-warn b{color:#dbe6f7}

/* Entorno Comunidad */
.spag-side-company.is-comunidad{border-color:var(--acc);
  background:linear-gradient(135deg,rgba(0,178,214,.14),rgba(3,36,92,.08))}
.com-hero h2{margin:0}
.com-aviso{border-inline-start:4px solid var(--acc)}
.com-fila-prio td{background:rgba(0,178,214,.055)}
.com-fila-urg td{background:rgba(192,57,43,.07)}

/* Permisos temporales */
.jer-temp{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:8px 0}
.jer-temp-card{padding:10px 12px;border-radius:11px;border:1px solid var(--line);
  border-inline-start-width:4px;background:var(--bg-2)}
.jer-temp-card.on{border-inline-start-color:var(--acc-2)}
.jer-temp-card.off{border-inline-start-color:var(--line-2);opacity:.62}
.jer-temp-card b{display:block;font-size:.85rem;color:var(--navy)}
[data-theme="dark"] .jer-temp-card b{color:#dbe6f7}
.jer-temp-card small{display:block;font-size:.74rem;color:var(--dim);line-height:1.45}
.jer-nivel{display:inline-block;padding:1px 7px;border-radius:9px;font-size:.66rem;font-weight:800;
  border:1px solid var(--line-2);color:var(--muted)}

/* ============================================================
   PANEL CENTRAL · menú de cuenta, notificaciones y chat
   ============================================================ */
/* ── Menú de la persona (esquina) ── */
.adm-yo{position:relative}
.adm-yo-btn{display:flex;align-items:center;gap:8px;padding:5px 9px;border-radius:24px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--panel);font-family:var(--body);text-align:start;
  transition:border-color .18s,box-shadow .18s}
.adm-yo-btn:hover{border-color:var(--acc);box-shadow:0 6px 16px rgba(3,36,92,.10)}
.adm-yo-btn.en-comunidad{border-color:var(--acc);
  background:linear-gradient(135deg,rgba(0,178,214,.14),rgba(3,36,92,.06))}
.adm-yo-av{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--acc-2));color:#fff;
  font-size:.72rem;font-weight:800;overflow:hidden;flex:0 0 auto;position:relative}
.adm-yo-av.has-foto{background:var(--bg-2)}
.adm-yo-av img{width:100%;height:100%;object-fit:cover}
.adm-yo-txt b{display:block;font-size:.8rem;color:var(--navy);line-height:1.2}
[data-theme="dark"] .adm-yo-txt b{color:#dbe6f7}
.adm-yo-txt small{display:block;font-size:.68rem;color:var(--dim);line-height:1.2}
.adm-yo-flecha{color:var(--dim);font-size:.7rem}
@media(max-width:760px){ .adm-yo-txt{display:none} }

.adm-yo-menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);width:min(340px,92vw);z-index:60;
  border-radius:14px;border:1px solid var(--line);background:var(--panel);
  box-shadow:0 18px 44px rgba(3,36,92,.20);overflow:hidden}
.adm-yo-cab{display:flex;gap:10px;align-items:center;padding:13px 14px;border-bottom:1px solid var(--line);
  background:var(--bg-2)}
.adm-yo-cab b{display:block;font-size:.9rem;color:var(--navy)}
[data-theme="dark"] .adm-yo-cab b{color:#dbe6f7}
.adm-yo-cab small{display:block;font-size:.74rem;color:var(--dim);word-break:break-all}
.adm-yo-cab .badge{margin-top:4px}
.adm-yo-entorno{padding:11px 14px;border-bottom:1px solid var(--line);border-inline-start:4px solid var(--line-2)}
.adm-yo-entorno span{display:block;font-size:.68rem;color:var(--dim);text-transform:uppercase;letter-spacing:.05em}
.adm-yo-entorno b{display:block;font-size:.9rem;color:var(--navy);margin:1px 0 3px}
[data-theme="dark"] .adm-yo-entorno b{color:#dbe6f7}
.adm-yo-entorno small{display:block;font-size:.75rem;color:var(--muted);line-height:1.45}
.adm-yo-entorno.es-com{border-inline-start-color:var(--acc);background:rgba(0,178,214,.07)}
.adm-yo-entorno.es-emp{border-inline-start-color:var(--acc-2);background:rgba(255,157,0,.05)}
.adm-yo-entorno.es-central{border-inline-start-color:var(--ok,#178f4e)}
.adm-yo-acciones{padding:6px}
.adm-yo-acciones form{margin:0}
.adm-yo-link{display:block;width:100%;padding:8px 10px;border-radius:9px;cursor:pointer;
  border:0;background:transparent;text-align:start;text-decoration:none;
  font-size:.85rem;font-weight:600;color:var(--navy);font-family:var(--body)}
[data-theme="dark"] .adm-yo-link{color:#dbe6f7}
.adm-yo-link:hover{background:var(--bg-2)}
.adm-yo-link small{display:block;font-size:.72rem;font-weight:400;color:var(--dim);line-height:1.35;margin-top:1px}
.adm-yo-link.destacado{background:rgba(0,178,214,.10);border:1px solid var(--acc)}
.adm-yo-link.destacado:hover{background:rgba(0,178,214,.18)}
.adm-yo-link.salir{color:var(--err,#c0392b);border-top:1px solid var(--line);border-radius:0;margin-top:4px;padding-top:10px}

/* ── Campana ── */
.adm-noti-sec{padding:8px 12px 4px;font-size:.68rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);border-top:1px solid var(--line)}
.adm-noti-sec:first-child{border-top:0}
.adm-noti-pend{border-inline-start:3px solid var(--line-2)}
.adm-noti-pend.n-alta{border-inline-start-color:var(--err,#c0392b)}
.adm-noti-pend.n-media{border-inline-start-color:#e08b1f}
.adm-noti-pend.n-baja{border-inline-start-color:var(--acc)}
.adm-noti-n{display:inline-block;margin-inline-start:6px;padding:0 6px;border-radius:9px;
  background:var(--err,#c0392b);color:#fff;font-size:.66rem;font-weight:800}
.adm-noti-todo{display:block;padding:9px 12px;text-align:center;font-size:.78rem;font-weight:700;
  color:var(--acc);text-decoration:none;border-top:1px solid var(--line);background:var(--bg-2)}
.adm-noti-todo:hover{background:rgba(0,178,214,.10)}

/* ── Página de notificaciones ── */
.noti-pend-box{border-inline-start:4px solid var(--err,#c0392b)}
.noti-pend{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.noti-pend-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;
  border:1px solid var(--line);border-inline-start-width:4px;background:var(--bg-2);text-decoration:none;
  transition:transform .16s,box-shadow .16s}
.noti-pend-card:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(3,36,92,.10)}
.noti-pend-card.n-alta{border-inline-start-color:var(--err,#c0392b)}
.noti-pend-card.n-media{border-inline-start-color:#e08b1f}
.noti-pend-card.n-baja{border-inline-start-color:var(--acc)}
.noti-pend-ico{font-size:1.25rem;flex:0 0 auto}
.noti-pend-txt{flex:1;min-width:0}
.noti-pend-txt b{display:block;font-size:.85rem;color:var(--navy);line-height:1.25}
[data-theme="dark"] .noti-pend-txt b{color:#dbe6f7}
.noti-pend-txt small{display:block;font-size:.74rem;color:var(--muted);line-height:1.35}
.noti-pend-n{flex:0 0 auto;min-width:26px;padding:2px 7px;border-radius:11px;text-align:center;
  background:var(--err,#c0392b);color:#fff;font-size:.8rem;font-weight:800}

.noti-tipos{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 14px}
.noti-tipo{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:14px;
  border:1px solid var(--line-2);background:var(--bg-2);text-decoration:none;font-size:.78rem;color:var(--muted)}
.noti-tipo:hover{border-color:var(--acc);color:var(--navy)}
[data-theme="dark"] .noti-tipo:hover{color:#dbe6f7}
.noti-tipo.on{border-color:var(--acc);background:rgba(0,178,214,.12);color:var(--navy);font-weight:700}
[data-theme="dark"] .noti-tipo.on{color:#eaf2ff}
.noti-tipo b{font-size:.72rem;opacity:.75}

.noti-dia{display:flex;align-items:center;gap:10px;margin:14px 0 6px;color:var(--dim);
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.noti-dia::before,.noti-dia::after{content:"";flex:1;height:1px;background:var(--line)}
.noti-item{display:flex;gap:11px;align-items:flex-start;padding:9px 11px;border-radius:10px;
  text-decoration:none;border:1px solid transparent;transition:background .16s,border-color .16s}
.noti-item:hover{background:var(--bg-2);border-color:var(--line)}
.noti-item.sin-leer{background:rgba(0,178,214,.055);border-color:rgba(0,178,214,.28)}
.noti-item-ico{font-size:1.05rem;flex:0 0 auto;margin-top:1px}
.noti-item-cuerpo{flex:1;min-width:0}
.noti-item-cuerpo b{display:block;font-size:.86rem;color:var(--navy);line-height:1.3}
[data-theme="dark"] .noti-item-cuerpo b{color:#dbe6f7}
.noti-item-cuerpo small{display:block;font-size:.78rem;color:var(--muted);line-height:1.4}
.noti-item-meta{flex:0 0 auto;text-align:end}
.noti-item-cuando{display:block;font-size:.73rem;color:var(--dim);white-space:nowrap}
.noti-item-flag{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:9px;
  background:rgba(0,178,214,.16);color:var(--acc);font-size:.66rem;font-weight:800}
.noti-acc{display:inline-block;padding:2px 8px;border-radius:10px;border:1px solid var(--line-2);
  font-size:.73rem;color:var(--muted);white-space:nowrap}

/* ── Chat en dos paneles ── */
.chat2{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:0;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);
  height:min(70vh,640px);min-height:420px}
@media(max-width:820px){ .chat2{grid-template-columns:1fr;height:auto}
  .chat2-lista{max-height:280px}
  .chat2-hilo{min-height:420px} }
.chat2-lista{display:flex;flex-direction:column;border-inline-end:1px solid var(--line);background:var(--bg-2);min-width:0}
.chat2-buscar{padding:10px 10px 6px}
.chat2-buscar input{width:100%;padding:7px 11px;border-radius:18px;border:1px solid var(--line-2);
  background:var(--panel);color:var(--text);font-size:.82rem}
.chat2-buscar input:focus{outline:none;border-color:var(--acc)}
.chat2-filtros{display:flex;gap:5px;padding:0 10px 8px;flex-wrap:wrap}
.chat2-filtros a{padding:3px 9px;border-radius:12px;font-size:.72rem;font-weight:700;
  text-decoration:none;color:var(--dim);border:1px solid transparent}
.chat2-filtros a:hover{color:var(--navy)}
[data-theme="dark"] .chat2-filtros a:hover{color:#dbe6f7}
.chat2-filtros a.on{background:var(--panel);border-color:var(--acc);color:var(--acc)}
.chat2-personas{flex:1;overflow-y:auto;min-height:0}
.chat2-persona{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;text-decoration:none;
  border-inline-start:3px solid transparent;border-bottom:1px solid var(--line)}
.chat2-persona:hover{background:var(--panel)}
.chat2-persona.on{background:var(--panel);border-inline-start-color:var(--acc)}
.chat2-persona.sin-leer{background:rgba(0,178,214,.07)}
.chat2-av{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  background:linear-gradient(135deg,var(--acc),var(--acc-2));color:#fff;font-size:.74rem;font-weight:800}
.chat2-av.has-foto{background:var(--line-2)}
.chat2-av img{width:100%;height:100%;object-fit:cover}
.chat2-av.grande{width:44px;height:44px;font-size:.86rem}
.chat2-on{position:absolute;inset-block-end:0;inset-inline-end:0;width:9px;height:9px;border-radius:50%;
  background:var(--ok,#178f4e);border:2px solid var(--bg-2)}
.chat2-persona-txt{flex:1;min-width:0}
.chat2-persona-l1{display:flex;justify-content:space-between;gap:6px;align-items:baseline}
.chat2-persona-l1 b{font-size:.83rem;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-theme="dark"] .chat2-persona-l1 b{color:#dbe6f7}
.chat2-persona-l1 time{font-size:.68rem;color:var(--dim);white-space:nowrap;flex:0 0 auto}
.chat2-persona-l2{display:flex;justify-content:space-between;gap:6px;align-items:center;margin-top:1px}
.chat2-persona-l2 small{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat2-tu{color:var(--dim);font-weight:700}
.chat2-n{flex:0 0 auto;min-width:17px;padding:0 5px;border-radius:9px;text-align:center;
  background:var(--err,#c0392b);color:#fff;font-size:.66rem;font-weight:800;font-style:normal}
.chat2-persona-l3{display:flex;gap:6px;align-items:center;margin-top:2px}
.chat2-persona-l3 small{font-size:.7rem;color:var(--dim)}

.chat2-hilo{display:flex;flex-direction:column;min-width:0;min-height:0}
.chat2-cab{display:flex;gap:11px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line);
  background:var(--panel);flex:0 0 auto;flex-wrap:wrap}
.chat2-cab-txt{flex:1;min-width:0}
.chat2-cab-txt b{display:block;font-size:.95rem;color:var(--navy)}
[data-theme="dark"] .chat2-cab-txt b{color:#dbe6f7}
.chat2-cab-txt small{display:block;font-size:.74rem;color:var(--dim);word-break:break-word}
.chat2-estado{color:var(--dim)}
.chat2-estado.on{color:var(--ok,#178f4e);font-weight:700}
.chat2-cab-acc{display:flex;gap:6px;flex-wrap:wrap;flex:0 0 auto}
.chat2-mensajes{flex:1;overflow-y:auto;padding:14px;min-height:0;background:var(--bg-2)}
.chat2-dia{display:flex;align-items:center;gap:10px;margin:12px 0;color:var(--dim);
  font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.chat2-dia::before,.chat2-dia::after{content:"";flex:1;height:1px;background:var(--line)}
.chat2-msg{display:flex;margin-bottom:8px}
.chat2-msg.nuestro{justify-content:flex-end}
.chat2-burbuja{max-width:min(72%,520px);padding:8px 12px;border-radius:14px;
  border:1px solid var(--line);background:var(--panel)}
.chat2-msg.nuestro .chat2-burbuja{background:linear-gradient(135deg,rgba(0,178,214,.16),rgba(3,36,92,.10));
  border-color:rgba(0,178,214,.35);border-end-end-radius:4px}
.chat2-msg.suyo .chat2-burbuja{border-end-start-radius:4px}
.chat2-texto{font-size:.86rem;line-height:1.5;color:var(--text);word-break:break-word}
.chat2-meta{display:flex;gap:7px;align-items:center;justify-content:flex-end;margin-top:3px}
.chat2-quien{font-size:.68rem;color:var(--dim)}
.chat2-meta time{font-size:.68rem;color:var(--dim)}
.chat2-visto{font-size:.68rem;color:var(--acc)}
.chat2-vacio{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:40px 20px;text-align:center}
.chat2-vacio b{font-size:.95rem;color:var(--navy)}
[data-theme="dark"] .chat2-vacio b{color:#dbe6f7}
.chat2-vacio span{font-size:.82rem;color:var(--muted);max-width:320px}
.chat2-responder{display:flex;gap:8px;align-items:flex-end;padding:11px 14px;
  border-top:1px solid var(--line);background:var(--panel);flex:0 0 auto}
.chat2-responder textarea{flex:1;resize:none;min-height:38px;max-height:160px;padding:9px 13px;
  border-radius:19px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--text);
  font-family:var(--body);font-size:.86rem;line-height:1.4}
.chat2-responder textarea:focus{outline:none;border-color:var(--acc)}

/* ============================================================
   AVISOS FLOTANTES Y CONTEXTO DE SESIÓN  (2026-08)
   ------------------------------------------------------------
   Sustituyen a dos cosas que ocupaban de extremo a extremo arriba del panel:
   la barra `.spag-simulation-bar` (48 px que tapaban el logo en el móvil) y el
   `.wrap > .alert` de los flash, que empujaba la página al cargar.

   OJO: `.alert` NO se toca. Lo usan decenas de pantallas EN LÍNEA dentro del
   contenido —«Faltan materiales para terminar esta orden», «Estructura circular
   detectada»— y ahí un aviso flotante sería un error: pertenece al sitio donde
   está. Lo que flota es solo el flash de sesión, que ahora tiene sus clases.
   ============================================================ */

/* ── Toasts ── */
.toast-stack{position:fixed;z-index:1200;top:calc(12px + env(safe-area-inset-top,0px));right:14px;
  display:flex;flex-direction:column;gap:9px;width:min(380px,calc(100vw - 28px));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;padding:12px 13px;
  border-radius:14px;font-size:.88rem;font-weight:600;line-height:1.35;
  /* Casi semitransparente: deja ver que hay página debajo sin perder contraste. */
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(0,40,99,.14);box-shadow:0 10px 30px rgba(10,25,60,.18);
  animation:toast-in .22s ease both}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.toast.is-out{opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .3s ease}
.toast-ico{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;
  font-size:.8rem;font-weight:900}
.toast-msg{flex:1;min-width:0;overflow-wrap:anywhere}
.toast-x{flex:none;border:0;background:transparent;cursor:pointer;font-size:1.15rem;line-height:1;
  padding:0 2px;color:inherit;opacity:.55;border-radius:6px}
.toast-x:hover,.toast-x:focus-visible{opacity:1}
.toast-x:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.toast-ok{color:#08653f;border-color:rgba(12,140,90,.32);background:rgba(233,251,243,.9)}
.toast-ok .toast-ico{background:rgba(12,140,90,.15);color:#08653f}
.toast-err{color:#96271c;border-color:rgba(192,57,43,.32);background:rgba(254,240,239,.92)}
.toast-err .toast-ico{background:rgba(192,57,43,.15);color:#96271c}
/* El que se queda lo dice: barra lateral y sin desvanecerse. */
/* AVISO: se guardó, pero hay algo que mirar. Ni verde ni rojo, porque no es
   ni un exito limpio ni un fallo: es una consecuencia. */
.toast-warn{color:#8a5300;border-color:rgba(196,124,0,.34);background:rgba(255,247,232,.94)}
.toast-warn .toast-ico{background:rgba(196,124,0,.16);color:#8a5300;font-weight:900}
.toast.is-fijo{border-left-width:4px}
@media (prefers-color-scheme:dark){
  .toast{background:rgba(20,28,46,.9);border-color:rgba(255,255,255,.14);color:#eaf1ff}
  .toast-ok{background:rgba(12,58,44,.92);color:#b7f2d8}
  .toast-err{background:rgba(66,22,20,.92);color:#ffc9c4}
  .toast-warn{background:rgba(60,44,12,.94);color:#ffdca8}
}
@media(max-width:700px){
  /* En el móvil abajo: arriba están la cabecera y el logo, que es justo lo que
     no se puede tapar. Se respeta el hueco de la barra de gestos del sistema. */
  .toast-stack{top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));left:10px;right:10px;
    width:auto;flex-direction:column-reverse}
  /* Medido a 390px: el toast (bottom 12, alto 63) y el botón de contexto
     (bottom 12, alto 42) se pisaban en la misma esquina, y como el toast va por
     encima tapaba justo el aviso de que estás simulando a otra persona. Cuando
     hay botón, la pila sube por encima de él. La clase la pone initCtxFab(). */
  body.has-ctx-fab .toast-stack{bottom:calc(66px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.toast{animation:none}.toast.is-out{transition:none}}

/* ── Botón flotante de contexto (vista simulada / SPAG en empresa) ── */
.ctx-fab{position:fixed;z-index:1150;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:9px;padding:10px 15px 10px 12px;
  border:1px solid rgba(255,255,255,.26);border-radius:999px;cursor:pointer;
  background:linear-gradient(90deg,#4b2e83,#263f85,#066e87);color:#fff;
  font-family:inherit;font-size:.78rem;font-weight:800;letter-spacing:.01em;
  box-shadow:0 10px 28px rgba(18,24,66,.34)}
.ctx-fab:hover{filter:brightness(1.08)}
.ctx-fab:focus-visible{outline:3px solid #9be2ff;outline-offset:2px}
.ctx-fab.is-emp{background:linear-gradient(90deg,#0b5c74,#116e8a)}
.ctx-fab-ico{display:grid;place-items:center}
.ctx-fab .ui-line-icon{width:18px;height:18px}
/* Punto que late: que no pase desapercibido que NO eres tú quien opera. */
.ctx-fab-dot{width:9px;height:9px;border-radius:50%;background:#7ef0c0;box-shadow:0 0 0 0 rgba(126,240,192,.7);
  animation:ctx-dot 2s ease-out infinite}
@keyframes ctx-dot{0%{box-shadow:0 0 0 0 rgba(126,240,192,.65)}70%{box-shadow:0 0 0 9px rgba(126,240,192,0)}100%{box-shadow:0 0 0 0 rgba(126,240,192,0)}}
@media (prefers-reduced-motion:reduce){.ctx-fab-dot{animation:none}}
@media(max-width:700px){
  /* Solo el icono y el punto: en pantalla estrecha el texto ocuparía media
     línea sin decir nada que el modal no diga mejor. */
  .ctx-fab{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:11px;gap:7px}
  .ctx-fab-txt{display:none}
}

/* ── Modal del contexto ── */
dialog.ctx-modal{position:fixed;inset:0;margin:auto;width:min(440px,calc(100vw - 26px));padding:0;
  border:0;border-radius:18px;background:var(--panel,#fff);color:var(--text,#0d1b33);
  box-shadow:0 26px 70px rgba(8,20,50,.34)}
dialog.ctx-modal::backdrop{background:rgba(8,17,40,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.ctx-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line,#e3e8ef)}
.ctx-modal-head h2{margin:5px 0 0;font-size:1.08rem}
.ctx-modal-head .platform-scope-badge{border-color:#9fd9ee;background:rgba(11,92,116,.1);color:#0b5c74}
.ctx-modal-x{border:0;background:transparent;font-size:1.5rem;line-height:1;cursor:pointer;color:inherit;opacity:.6;border-radius:8px}
.ctx-modal-x:hover,.ctx-modal-x:focus-visible{opacity:1}
.ctx-modal-x:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.ctx-modal-body{padding:16px 18px 18px;display:grid;gap:14px}
.ctx-row{display:flex;gap:11px;align-items:flex-start}
.ctx-row-ico{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:11px;
  background:rgba(0,40,99,.07);color:var(--navy,#002863)}
.ctx-row .ui-line-icon{width:19px;height:19px}
.ctx-row p{margin:3px 0 0;font-size:.9rem;opacity:.85}
.ctx-modal-act{margin:0}
.ctx-modal-act .btn{width:100%;justify-content:center;display:inline-flex;align-items:center;gap:8px}

/* Marca de campo obligatorio del documento de compra (2026-08-21) */
.doc-oblig{color:#c0392b;font-weight:700}

/* ── Desplegables con buscador (assets/app.js · «escribe las iniciales») ──
   El <select> real sigue en el formulario y se envía como siempre: solo se
   oculta y se le pinta encima un botón con su rótulo. Por eso aquí no hay
   ningún estilo de «select falso» que haya que mantener en dos sitios. */
.bsel{position:relative;display:inline-block;max-width:100%;min-width:0}
.bsel-native{display:none!important}
.bsel-btn{display:flex;align-items:center;gap:8px;width:100%;min-width:0;cursor:pointer;
  padding:7px 11px;border:1px solid var(--line-2);border-radius:9px;
  background:var(--panel);color:var(--text);font-family:var(--body);font-size:.82rem;
  text-align:start}
.bsel-btn:hover{border-color:var(--acc)}
.bsel-btn[aria-expanded="true"]{border-color:var(--acc);box-shadow:0 0 0 3px rgba(11,182,196,.12)}
.bsel-btn:disabled{opacity:.55;cursor:not-allowed}
.bsel-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bsel-flecha{flex:none;font-style:normal;font-size:.62rem;color:var(--dim);transform:scaleX(1.4)}

/* position:fixed y no absolute: estos desplegables viven dentro de .tabla-scroll
   y de <dialog>, que recortan lo que se sale de su caja. */
.bsel-pop{position:fixed;z-index:9999;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line-2);border-radius:12px;background:var(--panel);
  box-shadow:0 18px 44px rgba(3,26,60,.22)}
.bsel-pop[hidden]{display:none}
.bsel-q{flex:none;width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:10px 12px;background:var(--bg-2);color:var(--text);
  font-family:var(--body);font-size:.84rem}
.bsel-q:focus{outline:none;background:var(--panel)}
.bsel-list{overflow-y:auto;overscroll-behavior:contain;padding:4px;scrollbar-width:thin}
.bsel-op{padding:7px 10px;border-radius:8px;cursor:pointer;font-size:.82rem;line-height:1.35;
  overflow-wrap:anywhere}
.bsel-op[hidden]{display:none}
.bsel-op.marcada{background:var(--bg-2)}
.bsel-op.on{font-weight:800;color:var(--navy)}
[data-theme="dark"] .bsel-op.on{color:#9dbef5}
.bsel-op.on::after{content:' ✓';color:var(--acc)}
.bsel-op.off{opacity:.45;cursor:not-allowed}
.bsel-vacio{padding:14px 12px;color:var(--dim);font-size:.78rem;text-align:center}

/* El botón hereda el sitio donde cae: campo de formulario, barra pequeña o
   la cabecera del panel. Sin esto un buscador dentro de .field salía a la
   mitad del ancho y rompía la rejilla. */
.field .bsel{display:block;width:100%}
.field .bsel-btn{padding:12px 14px;border-radius:11px;background:var(--bg);font-size:.92rem}
.mini-form .bsel-btn{padding:7px 10px;border-radius:8px;font-size:.82rem}
.platform-company-switch .bsel-btn,.spag-company-switch .bsel-btn,
.platform-user-switch .bsel-btn{border:0;background:transparent;padding:4px 6px;
  color:var(--navy);font-weight:700;font-size:.78rem}
[data-theme="dark"] .platform-company-switch .bsel-btn,
[data-theme="dark"] .spag-company-switch .bsel-btn,
[data-theme="dark"] .platform-user-switch .bsel-btn{color:#dbe6f7}
.com-selects .bsel-btn,.muro-form-pie .bsel-btn{padding:9px 12px;border-radius:10px}
@media(max-width:620px){ .bsel{width:100%} .bsel-btn{width:100%} }
/* Cartel de «esta lista es de UNA empresa» (adiasis?tab=usuarios&emp=N) */
.usr-emp-filtro{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-inline-start:4px solid var(--acc)}
.usr-emp-filtro h3{margin:0}
.usr-emp-filtro small{color:var(--muted);font-size:.76rem}
/* Segundo nivel del menú: los catálogos cuelgan de «Inventario y almacén» y
   tienen que leerse como hijos, no como hermanos de Kárdex o Traslados. */
.adm-nav-sub2{padding-inline-start:26px!important;font-size:.78rem;opacity:.92}
.adm-nav-sub2 .adm-nav-ico{font-size:.85rem;opacity:.85}
.adm-nav-sub2::before{content:'';position:absolute;inset-inline-start:14px;top:50%;
  width:6px;height:1px;background:var(--line-2)}
.adm-nav-sub2{position:relative}

/* Pestañas de los maestros de inventario */
.maestro-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.maestro-tabs a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:var(--muted);
  font-size:.78rem;font-weight:700;text-decoration:none}
.maestro-tabs a:hover{border-color:var(--acc);color:var(--acc)}
.maestro-tabs a.on{border-color:var(--navy);background:var(--navy);color:#fff}
[data-theme="dark"] .maestro-tabs a.on{background:var(--acc);border-color:var(--acc);color:#04121f}
.maestro-tabs a i{font-style:normal;min-width:19px;padding:0 5px;border-radius:9px;
  background:var(--bg-2);color:var(--dim);font-size:.68rem;text-align:center}
.maestro-tabs a.on i{background:rgba(255,255,255,.22);color:#fff}
[data-theme="dark"] .maestro-tabs a.on i{background:rgba(0,0,0,.22);color:#04121f}
/* Ruta de la empresa al pie del menú: se copia al pulsarla, la flecha la abre
   en otra pestaña. Va pegada a «Cerrar sesión» porque es el otro dato que se
   busca al final de la sesión: «¿cuál era mi dirección?». */
.adm-ruta{display:flex;align-items:center;gap:4px;margin:10px 8px 2px;padding:5px 6px;
  border:1px dashed var(--line-2);border-radius:10px;background:var(--bg-2)}
.adm-ruta-txt{display:flex;align-items:center;gap:7px;flex:1;min-width:0;cursor:pointer;
  padding:2px 4px;border:0;border-radius:7px;background:transparent;color:var(--muted);
  font-family:var(--body);font-size:.72rem;font-weight:700;text-align:start}
.adm-ruta-txt:hover{color:var(--acc)}
.adm-ruta-txt.is-ok{color:var(--ok,#178f4e)}
.adm-ruta-ico{flex:none;font-size:.8rem}
.adm-ruta-slug{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-ruta-abrir{flex:none;padding:2px 7px;border-radius:7px;color:var(--muted);
  font-size:.8rem;font-weight:800;text-decoration:none}
.adm-ruta-abrir:hover{background:var(--panel);color:var(--acc)}
/* Aviso de copiado para botones que llevan icono + texto (no se les puede
   pisar el textContent sin destruirles los hijos). */
[data-copiado="1"]::after{content:' ✓ copiado';font-size:.66rem;font-weight:800;color:var(--ok,#178f4e)}
/* Presentaciones de venta: la unidad BASE como fila fija y marcada, y un radio
   por presentación para decir cuál se ofrece primero en el mostrador. */
.unidad-base-fila{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px;
  padding:12px 14px;border:1px solid var(--acc);border-radius:13px;
  background:color-mix(in srgb,var(--acc) 7%,transparent)}
.unidad-base-datos{display:flex;gap:22px;flex-wrap:wrap;flex:1;min-width:0}
.unidad-base-datos span{display:flex;flex-direction:column;gap:1px;min-width:0}
.unidad-base-datos small{color:var(--dim);font-size:.62rem;text-transform:uppercase;letter-spacing:.05em}
.unidad-base-datos b{color:var(--navy);font-size:.9rem}
[data-theme="dark"] .unidad-base-datos b{color:#dbe6f7}
.unidad-default{display:flex;align-items:center;gap:6px;flex:none;cursor:pointer;
  color:var(--muted);font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.unidad-default input{width:16px;height:16px;accent-color:var(--acc);cursor:pointer}
.unidad-default input:checked+span{color:var(--acc)}
.inventory-unit-row .unidad-default{align-self:center;margin-inline-end:2px}
@media(max-width:620px){.unidad-base-fila{flex-direction:column;align-items:flex-start}
  .unidad-base-datos{gap:14px}}
/* ── Variantes de prenda (color x talla) ── */
.var-muestra{display:block;flex:none}
.var-foto{flex:none;border-radius:8px;object-fit:cover;background:var(--bg-2)}
.var-picker{margin:14px 0}
.var-picker-tit{display:flex;align-items:center;gap:8px;margin-bottom:7px;
  color:var(--muted);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.var-chips{display:flex;flex-wrap:wrap;gap:7px}
.var-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);font-size:.8rem;font-weight:700}
.var-chip:hover{border-color:var(--acc)}
.var-chip input{accent-color:var(--acc);cursor:pointer}
.var-chip:has(input:checked){border-color:var(--navy);background:color-mix(in srgb,var(--navy) 8%,transparent)}
[data-theme="dark"] .var-chip:has(input:checked){border-color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent)}
.var-punto{width:15px;height:15px;border-radius:50%;border:1px solid rgba(0,0,0,.18);flex:none}

/* Rejilla de existencias: una fila por color, sus tallas al lado. */
.var-fila{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line)}
.var-fila:last-of-type{border-bottom:0}
.var-fila-color{display:flex;align-items:center;gap:9px;min-width:170px;flex:none}
.var-fila-color b{font-size:.9rem;color:var(--navy)}
[data-theme="dark"] .var-fila-color b{color:#dbe6f7}
.var-fila-color small{color:var(--dim);font-size:.68rem}
.var-tallas{display:flex;flex-wrap:wrap;gap:7px;flex:1;min-width:0}
.var-talla{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:62px;padding:7px 10px;
  border:1px solid var(--line);border-radius:11px;background:var(--panel);text-decoration:none}
.var-talla b{color:var(--navy);font-size:.86rem}
[data-theme="dark"] .var-talla b{color:#dbe6f7}
.var-talla span{color:var(--ok,#178f4e);font-size:.68rem;font-weight:800}
.var-talla:hover{border-color:var(--acc)}
/* Sin stock: la talla existe pero no hay prenda. Se ve, no se esconde: que no
   haya M en azul es información de venta, no un error que tapar. */
.var-talla.sin{background:var(--bg-2);border-style:dashed}
.var-talla.sin b{color:var(--dim)}
.var-talla.sin span{color:var(--dim);font-weight:600}
@media(max-width:620px){.var-fila-color{min-width:100%}.var-talla{min-width:56px}}
/* Selector de prenda en el mostrador: ocupa su propia línea. Metido en la
   rejilla de campos, los colores y las tallas se apilaban en una columna de
   80 px y había que leerlos en vertical. */
.pos-variantes{flex:1 0 100%;order:-1}
.pos-variantes .var-chips{gap:6px}
.pos-variantes .var-chip{padding:5px 10px;font-size:.76rem}
.pos-variantes .var-tallas{gap:6px}
.pos-variantes .var-talla{min-width:56px;padding:5px 9px}
.pos-variantes .var-talla:disabled{cursor:not-allowed}
/* ── Variantes colgando del modelo, en el listado de inventario ── */
.inv-variantes{margin-top:6px}
.inv-variantes>summary{cursor:pointer;color:var(--acc);font-size:.7rem;font-weight:800;list-style:none}
.inv-variantes>summary::-webkit-details-marker{display:none}
.inv-variantes>summary::before{content:'▸ ';display:inline-block;transition:transform .15s}
.inv-variantes[open]>summary::before{content:'▾ '}
.inv-var-pend{font-style:normal;color:var(--acc-2,#b06a12);font-weight:800}
.inv-var-fila{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:6px 0 0}
.inv-var-fila>b{font-size:.72rem;min-width:82px}
.inv-var-talla{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel);font-size:.68rem;font-weight:800;
  color:var(--navy);text-decoration:none}
[data-theme="dark"] .inv-var-talla{color:#dbe6f7}
.inv-var-talla i{font-style:normal;color:var(--ok,#178f4e)}
.inv-var-talla.sin{background:var(--bg-2);border-style:dashed;color:var(--dim)}
.inv-var-talla.sin i{color:var(--dim)}
.var-foto.es-heredada{opacity:.9;outline:1px dashed var(--line-2);outline-offset:1px}

/* ── Reparto de la prenda que ya estaba en el modelo ── */
.var-repartir{border-inline-start:4px solid var(--acc-2,#b06a12)}
.var-rep-suc{margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--bg-2)}
.var-rep-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.var-rep-cab span{color:var(--muted);font-size:.76rem}
.var-rep-rejilla{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.var-rep-celda{display:flex;align-items:center;gap:8px;padding:6px 9px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel)}
.var-rep-et{display:flex;align-items:center;gap:6px;flex:1;min-width:0;font-size:.76rem;font-weight:700}
.var-rep-et>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.var-rep-celda input{width:72px;flex:none}

/* ── ALERTAS DE ALMACÉN (?s=alertas) y su aviso en Lotes ──
   Las filas se tiñen porque la tabla se lee de un vistazo y de pie: el color
   dice «esto está en cero» antes de que nadie llegue a la columna Estado. */
.alr-aviso{display:block;border-inline-start:4px solid var(--err,#c0392b)}
.alr-aviso a{white-space:nowrap}
.alr-tranquilo{border-inline-start:4px solid var(--ok,#178f4e)}
.alr-fila-agotado td{background:rgba(192,57,43,.07)}
.alr-fila-bajo td{background:rgba(224,139,31,.06)}
/* ── Empresa de demostración ──
   Línea naranja finísima y permanente arriba del todo: quien mira el ejemplo
   tiene que saberlo en cualquier pantalla y sin leer. No se puede cerrar a
   propósito; un aviso que se cierra se olvida. */
/* ── EL AVISO GLOBAL VA ABAJO ────────────────────────────────────────────
   Arriba competía con la cabecera y con la barra de accesos rápidos, y
   empujaba el contenido de todas las pantallas hacia abajo. Abajo se lee
   igual —es la misma franja de lado a lado— y no le quita sitio a nada.
   Fondo SEMITRANSPARENTE con desenfoque: deja ver que hay página debajo,
   así se entiende que es una capa de aviso y no parte del documento.
   🔴 `position:fixed`, no `sticky`: pegado al pie de la VENTANA. Con
   sticky se quedaría al final del documento y habría que bajar del todo
   para verlo, que es justo lo contrario de lo que hace un aviso. */
/* 🔴 La franja naranja NO se posiciona por su cuenta. Antes iba a una
   distancia fija del suelo que había que mantener a mano cada vez que el
   aviso cambiaba de alto (en móvil se le esconde el texto y encoge), y se
   solapaba por unos píxeles. Ahora es el borde superior DEL PROPIO aviso
   (`.demo-aviso::before`), así que encaja a cualquier altura y en
   cualquier pantalla sin un solo número mágico. El div sigue existiendo
   —lo emite platform_shell.php— pero ya no pinta nada. */
.demo-linea{display:none}
.demo-aviso::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#e8820c,#f5a623,#e8820c)}
/* El bloque «Editores de este ejemplo» reaprovecha esta piel pero va en el
   flujo de la página (position:static en línea): ahí la franja naranja no
   pinta nada y además se colocaría contra otro ancestro. */
details.demo-aviso::before{display:none}
details.demo-aviso{position:static;box-shadow:none}
/* 🔴 Este bloque se emite ANTES del shell, como hermano, y el menú lateral es
   position:fixed: sin este margen la mitad izquierda del rótulo («Editores de
   este ejemplo») quedaba ESCONDIDA DEBAJO del menú y arriba solo se veía una
   franja beige vacía de lado a lado. El margen es el ancho del aside (252px,
   --adm-side vive en .adm-shell y aquí no alcanza); con el menú encogido
   (.mini) baja a 66px, y en pantallas angostas el menú es un cajón que se
   guarda, así que no hace falta ninguno. */
@media(min-width:1025px){
  details.demo-aviso{margin-left:252px}
  body:has(.adm-shell.mini) details.demo-aviso{margin-left:66px}
}
/* Los campos del formulario «Nombrar editor» iban en crudo: marco gris de
   fábrica del navegador, esquinas cuadradas y texto pegado al borde — no se
   parecían a NINGÚN otro campo del sistema. Misma piel que el kit, con el
   borde en el ámbar del propio aviso para no desentonar con su fondo. */
details.demo-aviso input{padding:6px 10px;border:1px solid rgba(138,83,0,.35);border-radius:9px;
  background:#fff;color:var(--text);font:inherit;font-size:.8rem}
details.demo-aviso input:focus{outline:none;border-color:#c87f1a;box-shadow:0 0 0 3px rgba(232,130,12,.16)}
[data-theme="dark"] details.demo-aviso input{background:#241a0d;color:#ffd79a;border-color:rgba(232,130,12,.45)}
.demo-aviso{position:fixed;left:0;right:0;bottom:0;z-index:79;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:7px 16px;padding-bottom:calc(7px + env(safe-area-inset-bottom,0px));
  background:rgba(255,246,232,.82);-webkit-backdrop-filter:blur(12px) saturate(1.4);
  backdrop-filter:blur(12px) saturate(1.4);
  border-top:1px solid rgba(232,130,12,.34);border-bottom:0;color:#8a5300;
  box-shadow:0 -6px 22px rgba(138,83,0,.10);font-size:.76rem}
/* Sitio al final de la página para que la franja no tape la última fila
   de una tabla ni el botón de guardar de un formulario largo.
   Se cuelga de `.es-demo`, la clase que ya pone platform_shell.php en el
   shell, y no de `:has()`: es el mismo dato y no depende del soporte del
   selector en el navegador del cliente. */
.es-demo .adm-body{padding-bottom:58px}
/* Los avisos flotantes de la esquina no pueden caer bajo la franja. El
   stack tampoco cuelga del shell, así que se usa `:has()` sobre <body>:
   es un detalle de comodidad y si el navegador no lo soporta los toasts
   se quedan donde estaban, sin romper nada. */
@media(max-width:700px){body:has(.demo-aviso) .toast-stack{bottom:calc(104px + env(safe-area-inset-bottom,0px))}}
.demo-aviso b{font-size:.78rem;letter-spacing:.01em}
.demo-aviso span{font-weight:800}
.demo-aviso small{color:#a06a1c;flex:1;min-width:200px}
.demo-salir{flex:none;padding:4px 11px;border-radius:999px;background:#8a5300;color:#fff;
  font-size:.72rem;font-weight:800;text-decoration:none}
.demo-salir:hover{background:#6d4100;color:#fff}
[data-theme="dark"] .demo-aviso{background:rgba(44,33,16,.86);border-top-color:rgba(232,130,12,.4);color:#ffd79a}
[data-theme="dark"] .demo-aviso small{color:#e0b478}
@media(max-width:700px){.demo-aviso{padding:6px 12px;font-size:.72rem}.demo-aviso small{display:none}
  /* 🔴 En móvil la barra de pestañas también vive pegada abajo (.app-tabbar,
     z-index 260). El aviso se sube POR ENCIMA de ella en vez de taparla:
     la barra es navegación y el aviso es informativo, así que el que cede
     sitio es el aviso. Sin esto uno de los dos quedaba inservible. */
  /* 🔴 Se apunta a `.demo-aviso` A SECAS, no a `.es-demo .demo-aviso`:
     el aviso lo pinta platform_shell.php como hijo directo de <body>, es
     HERMANO del shell y no descendiente suyo, así que ese selector no
     casaba con nada. Y como el aviso solo existe en modo demostración,
     apuntarlo directo es exacto. */
  .demo-aviso{bottom:calc(58px + env(safe-area-inset-bottom,0px))}

  /* El botón flotante de contexto vive en la esquina inferior: se sube
     para que no quede debajo de la franja. */
  .es-demo .ctx-fab{bottom:calc(44px + env(safe-area-inset-bottom,0px))}}
/* Aviso ámbar: ni «todo bien» ni «error». Lo usa el poblado de ejemplos cuando
   la empresa quedó rellenada pero algún módulo se queda corto: hay que verlo,
   no hay que asustarse. */
.alert.warn{background:#fff6e8;color:#8a5300;border:1px solid rgba(232,130,12,.35)}
[data-theme="dark"] .alert.warn{background:#2c2110;color:#ffd79a;border-color:rgba(232,130,12,.45)}

/* ==========================================================================
   MÓVIL · repaso 2026-08-22
   Auditoría a 360×740 y 390×844. Todo lo de aquí abajo son CORRECCIONES a
   reglas que ya existían más arriba y que se anulaban entre sí; se repiten
   con la especificidad justa para ganar, sin tocar el escritorio.
   ========================================================================== */

/* ── 1) 🔴 EL FALLO GORDO DEL ERP ──────────────────────────────────────────
   `.tabla-scroll table{min-width:560px}` (más arriba) seguía en pie DENTRO
   del modo ficha de `@media(max-width:760px)`. Ese bloque convierte la tabla
   en tarjetas con `display:block;width:100%;max-width:100%`… pero min-width
   se impone SIEMPRE a width y a max-width, así que la pila de fichas medía
   560px en una pantalla de 360 y los 231px sobrantes los tragaba en silencio
   `body{overflow-x:hidden}`: no había barra que mover, el contenido estaba
   sencillamente cortado. Afectaba a tablero, ventas, vender (el POS entero:
   #posBloqueCliente/Items/Pago heredaban los 560px + padding = 594),
   compras, clientes, caja, eeff, cotizaciones, kardex, bi y contabilidad.
   Medido antes: body.scrollWidth 591-608 con viewport de 360.            */
@media (max-width:760px){
  .adm-body table.adm-cards{min-width:0;width:100%;max-width:100%}
  .adm-body .tabla-scroll table.adm-cards{min-width:0}
  /* Las tablas que NO se convierten en fichas (siguen siendo tabla de verdad)
     sí necesitan su propio carril horizontal: `.adm-body .tabla-scroll
     {overflow:visible}` se lo había quitado a todas por igual. Si el navegador
     no entiende :has() la regla se descarta entera y queda el estado anterior,
     que es justo lo que había: no hay regresión posible. */
  .adm-body .tabla-scroll:not(:has(table.adm-cards)){overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Cinturón: ningún hijo del cuerpo del panel puede empujar la página. */
  .adm-body .panel-box,
  .adm-body .module-list-table,
  .adm-body .tabla-scroll{max-width:100%}
}

/* ── 2) Título de la barra superior recortado a 50px ───────────────────────
   `.adm-top-heading{min-width:0;flex:1}` lo dejaba encogerse sin suelo: con
   el selector de empresa (142px) y el de cuenta (67px) en la misma fila,
   "Tablero ERP" (94px de texto) se quedaba en 50px → "Tabl…" en TODAS las
   pantallas del panel. Los selectores se van a la fila siguiente (la barra ya
   es flex-wrap) y el título recupera la fila del burger. */
@media (max-width:760px){
  .adm-top-heading{flex:1 1 auto;min-width:120px}
  .adm-top .adm-top-title{max-width:none}
  .adm-top .platform-user-switch,
  .adm-top .spag-company-switch{order:9}
}

/* ── 3) /precios: las 4 tarjetas de plan se quedaban en 2 columnas ─────────
   Las reglas de móvil de más arriba usan `.plans` (0,1,0) y perdían por
   especificidad contra `.plans.plans-4` (0,2,0) del @media(max-width:1200px).
   Resultado medido a 360px: cuatro tarjetas de 146px con la lista de
   características desbordada (ul.p-features 109px de caja, 133px de texto). */
@media (max-width:720px){
  .plans.plans-4{grid-template-columns:1fr;max-width:470px;margin-left:auto;margin-right:auto;gap:18px}
  .plans.plans-4 .plan{padding:26px 22px}
  .plans.plans-4 .p-features{font-size:.9rem}
}

/* ── 4) Objetivos táctiles por debajo del pulgar ───────────────────────────
   Medidos a 360px: la X que cierra el menú lateral daba 24×34. */
@media (max-width:1024px){
  .adm-side-close{width:40px;height:40px;font-size:1.5rem}
}

/* ── 5) 🔴 EL POS (?s=vender), que es la pantalla más usada en un móvil ─────
   `.pos-grid{grid-template-columns:1fr}`: una pista `1fr` tiene mínimo
   automático `min-content`, y el min-content de un <select> es su opción MÁS
   LARGA. Con los desplegables de tipo de documento el suelo quedaba en 514px
   dentro de un contenedor de 317: los tres bloques del POS (#posBloqueCliente,
   #posBloqueItems, #posBloquePago) medían 514px y se salían 168px, otra vez
   recortados en silencio por body{overflow-x:hidden}.
   `minmax(0,1fr)` quita ese mínimo automático; es la forma canónica y no
   cambia nada en escritorio (1fr y minmax(0,1fr) coinciden cuando sobra
   sitio). El max-width de los controles es el cinturón. */
.pos-grid{grid-template-columns:minmax(0,1fr)}
#posForm select,#posForm input,#posForm textarea{max-width:100%}
@media (max-width:760px){
  .adm-body select,.adm-body input,.adm-body textarea{max-width:100%}
  .adm-body .field{min-width:0}
}

/* ── 6) Filas flex del POS que no sabían partirse ──────────────────────────
   `.pos-pago` (medio de pago + monto + referencia) es flex SIN wrap y con
   bases fijas de 130px y 110px: 311px de contenido en una caja de 283. Lo
   mismo en `.pos-buscar` (322 en 283) y en `.alert` (320 en 315). El
   `min-width:0` es imprescindible: los <input> traen min-width:auto y por eso
   `flex:1` no los dejaba encoger. */
@media (max-width:760px){
  .pos-pago{flex-wrap:wrap}
  .pos-pago select{flex:1 1 130px}
  .pos-pago input[name="monto[]"]{flex:1 1 110px}
  .pos-pago input[name="referencia[]"]{flex:1 1 100%;min-width:0}
  .adm-body .alert{flex-wrap:wrap;min-width:0}
}

/* ── 7) La fila de alta de ítem del POS, en rejilla ────────────────────────
   En flex se deformaba: medido a 360px daba campos de 25px y 49px (la casilla
   de «Cant.» quedaba en 25px, imposible de usar) y aun así se salía 39px de su
   caja (322 de contenido en 283). El culpable es que «Producto» y «Detalle»
   llevan un style="flex:2" EN LÍNEA que ninguna hoja puede sobrescribir sin
   !important. En cuadrícula el problema desaparece solo: los elementos de un
   grid ignoran `flex`, así que el estilo en línea deja de estorbar y cada
   campo ocupa lo que le toca. Seis columnas para poder repartir en medios y
   en tercios sin recurrir a nth-child (los bloques opcionales de variantes y
   listas de precio cambian el número de hijos según el rubro). */
@media (max-width:760px){
  .pos-buscar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:end}
  .pos-buscar>*{grid-column:span 6;min-width:0}
  .pos-buscar>.field{margin:0}
  /* Cantidad, precio y descuento en tercios: son numéricos y cortos. */
  .pos-buscar .pos-f-cant,
  .pos-buscar .pos-f-pre,
  .pos-buscar .pos-f-desc{grid-column:span 2}
  .pos-buscar input,.pos-buscar select{width:100%;min-width:0}
  /* El botón de añadir es el gesto que más se repite en un mostrador. */
  .pos-buscar>.btn{width:100%;min-height:44px}
}

/* ── 8) /adiasis en el móvil ───────────────────────────────────────────────
   El centro SPAG no desbordaba la página (body.scrollWidth 345 sobre 360),
   pero recortaba datos que son justamente el dato: el nombre de la empresa y
   el correo del usuario en el muro de actividad. Medido a 360px:
   `.spag-feed-row b` 154px de caja para 237px de texto («#213 · Planta
   Industrial S…») y `.spag-feed-row small` 180px para 318px
   («vend.demo-produccion-pe@ad…»). En un escritorio la columna es ancha y la
   elipsis es correcta; en un móvil dejaba la fila sin identificar.
   OJO: no se toca includes/admin/* (lo lleva otro agente). Estas reglas
   ganan por especificidad desde la hoja, no por orden. */
@media (max-width:760px){
  /* `.adm-ult-grid .spag-feed-row small` (0,2,1) le ganaba a `.spag-feed-row
     small` (0,1,1) y el correo seguía cortado aunque el nombre ya no. Se sube
     la especificidad a (0,3,1) para pasar por encima de las dos. */
  .adm-body .adm-ult-grid .spag-feed-row b,
  .adm-body .adm-ult-grid .spag-feed-row small,
  .adm-body .spag-feed .spag-feed-row b,
  .adm-body .spag-feed .spag-feed-row small{white-space:normal;overflow:visible;overflow-wrap:anywhere}
  .spag-feed-row{align-items:flex-start}
  .adm-body .spag-feed .spag-feed-row small{font-size:.7rem}
  .spag-emp-cuenta{font-size:.7rem}
}

/* La leyenda del gráfico de dona se comía sus propias etiquetas: 77px de caja
   para 118px de texto («Otros / desconocido»). El SVG ocupa 148px fijos y la
   leyenda se conformaba con lo que sobraba. Debajo de 560px la leyenda pasa a
   ocupar la fila entera (el contenedor ya es flex-wrap, solo hay que obligarlo
   a partir). `.adm-g-dona .adm-g-ley` (0,2,0) hace falta para ganarle al
   <style> de includes/admin/_graficos.php, que va después en el documento. */
@media (max-width:560px){
  .adm-g-dona{justify-content:center}
  .adm-g-dona .adm-g-ley{flex:1 1 100%}
  .adm-g-dona .adm-g-ley span{white-space:normal;overflow:visible}
}

/* Objetivos táctiles del centro SPAG por debajo del pulgar. Medidos a 360px:
   el selector de idioma 72×25, el botón «Ocultar» 64×24, «Ver actividad…»
   283×18 y los «Ver todas / Ver todos» 55×19. */
@media (max-width:1024px){
  .adm-top select,#admUiLang{min-height:36px}
  .adm-blk-tog{min-height:34px;padding-left:10px;padding-right:10px}
  .spag-today-row a,.spag-today-link,
  .spag-box-head a,.adm-blk-head a{display:inline-flex;align-items:center;min-height:34px}
}

/* Últimos objetivos táctiles cortos del centro SPAG y de los módulos:
   los filtros de periodo daban 32px de alto y las casillas de las tablas
   13×13 (imposibles de marcar con el pulgar sin ampliar). */
@media (max-width:1024px){
  .rango-presets a{min-height:36px;display:inline-flex;align-items:center}
  .adm-body input[type=checkbox],.adm-body input[type=radio]{width:20px;height:20px}
  .adm-body .btn,.adm-body button.btn,.adm-body a.btn{min-height:36px}
}

/* ── 9) Pie de página: el rótulo del mapa se cortaba ───────────────────────
   `.foot-map-cap` es una fila flex con `flex-wrap:nowrap` y `width:fit-content`.
   El texto no puede partirse, así que su min-content son 443px y fit-content
   no baja de ahí: en una pantalla de 360 el <footer> (overflow:hidden) se
   comía los últimos 114px — «Operaciones en 5 continentes · +5K clientes en
   todo el mundo» terminaba en «…+5K client». Medido: caja 345, contenido 459. */
@media (max-width:820px){
  .foot-map-cap{flex-wrap:wrap;justify-content:center;text-align:center;max-width:100%;width:auto}
}

/* ── 10) La etiqueta del héroe de portada ──────────────────────────────────
   `.hero.country-photo-hero .slide-tag` se quedaba en .61rem (9,76px reales,
   por debajo de lo legible) y encima con nowrap + ellipsis: medido a 360px,
   «Asistente Claude · Estadística explicable» tenía 337px de texto en 295px
   de caja y se leía «…Estadística explicab». Dos líneas y un punto más de
   cuerpo lo arreglan sin tocar el escritorio (la regla original solo actúa en
   móvil). Se repite la especificidad (0,3,0) para poder ganarle. */
@media (max-width:560px){
  .hero.country-photo-hero .slide-tag{font-size:.68rem;white-space:normal;overflow:visible;
    max-width:100%;text-align:left;line-height:1.5;letter-spacing:.1em}
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-08-22 · CABECERA DEL PANEL DESPEJADA (platform_shell.php)
   Lupa que abre el buscador en modal, chip mínimo «País · ES» en la esquina,
   ficha de contexto en el desplegable del perfil y accesos rápidos editables.
   Solo clases NUEVAS (+ .adm-buscar-res únicamente DENTRO de .buscar-modal):
   no pisa nada de lo de arriba ni los 10 arreglos móviles anteriores.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La lupa de la barra superior ── */
.adm-lupa{flex:0 0 auto;display:inline-grid;place-items:center;width:38px;height:38px;margin-left:auto;
  border:1px solid var(--line-2);border-radius:999px;background:var(--bg-2);cursor:pointer;color:var(--navy)}
.adm-lupa .ui-line-icon{width:17px;height:17px}
.adm-lupa:hover,.adm-lupa:focus-visible{border-color:var(--acc);background:var(--panel)}
.adm-lupa:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
[data-theme="dark"] .adm-lupa{color:#dbe6f7}

/* ── Chip mínimo de contexto: país · idioma, pegado a la derecha ── */
.adm-ctx-min{flex:0 0 auto;display:inline-flex;align-items:center;height:30px;padding:0 12px;
  border:1px solid var(--line-2);border-radius:999px;background:var(--bg-2);
  font-size:.72rem;font-weight:750;color:var(--dim);white-space:nowrap}
@media (max-width:560px){ .adm-ctx-min{display:none} }

/* ── Modal del buscador de módulos ── */
dialog.buscar-modal{position:fixed;inset:0;margin:9vh auto auto;width:min(560px,calc(100vw - 26px));
  padding:0;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text);
  box-shadow:0 24px 70px rgba(8,17,40,.35)}
dialog.buscar-modal::backdrop{background:rgba(8,17,40,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.buscar-modal-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.buscar-modal-ico{display:grid;place-items:center;color:var(--dim)}
.buscar-modal-ico .ui-line-icon{width:18px;height:18px}
.buscar-modal-head input{flex:1;min-width:0;height:44px;border:0;background:transparent;
  font-size:1.02rem;color:var(--text);outline:none}
.buscar-modal-head input::placeholder{color:var(--dim)}
/* El listado de resultados: mismo #admBuscarRes de siempre, pero anclado al
   modal (la regla base lo posiciona absoluto bajo el input de la barra). */
.buscar-modal .adm-buscar-res{position:static;top:auto;left:auto;right:auto;margin:0;
  max-height:min(52vh,430px);overflow-y:auto;border:0;border-radius:0;box-shadow:none;background:transparent}
.buscar-modal .adm-buscar-res[hidden]{display:none}
.buscar-modal .adm-buscar-res a{padding:12px 18px;font-size:.95rem;border-bottom:1px solid var(--line)}
.buscar-modal .adm-buscar-res a:last-child{border-bottom:0}
.buscar-modal .adm-buscar-nada{padding:14px 18px;font-size:.9rem}
.buscar-modal-pie{padding:9px 16px;border-top:1px solid var(--line);background:var(--bg-2);
  border-radius:0 0 15px 15px;font-size:.7rem;color:var(--dim)}
.buscar-modal-pie b{color:var(--text)}

/* ── Ficha de contexto dentro del desplegable del perfil ── */
.adm-yo-datos{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;padding:11px 14px;
  border-bottom:1px solid var(--line)}
.adm-yo-datos span{display:flex;flex-direction:column;min-width:0}
.adm-yo-datos span.es-ancho{grid-column:1 / -1}
.adm-yo-datos small{font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.adm-yo-datos b{font-size:.8rem;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-theme="dark"] .adm-yo-datos b{color:#dbe6f7}

/* ── Accesos rápidos editables ── */
/* [hidden] tiene que PODER esconder: .platform-quickbar>a{display:inline-flex}
   le ganaba al atributo (mismo gotcha [hidden]-vs-grid ya visto). */
.platform-quickbar>a[hidden]{display:none}
.quick-edit{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px;
  margin-left:auto;border:1px dashed var(--line-2);border-radius:9px;background:transparent;
  color:var(--dim);font-size:.7rem;font-weight:750;cursor:pointer;white-space:nowrap}
.quick-edit:hover,.quick-edit:focus-visible{border-color:var(--acc);color:var(--navy);background:var(--bg-2)}
.quick-edit:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
[data-theme="dark"] .quick-edit:hover,[data-theme="dark"] .quick-edit:focus-visible{color:#dbe6f7}
@media (max-width:760px){ .quick-edit .quick-edit-txt{display:none} }

dialog.quick-modal{position:fixed;inset:0;margin:auto;width:min(460px,calc(100vw - 26px));
  padding:0;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text);
  box-shadow:0 24px 70px rgba(8,17,40,.35)}
dialog.quick-modal::backdrop{background:rgba(8,17,40,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.quick-modal-body{padding:14px 18px 18px}
.quick-modal-body>p{margin:0 0 12px;font-size:.82rem;color:var(--dim)}
.quick-modal-lista{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px;max-height:46vh;overflow-y:auto;
  margin-bottom:14px}
.quick-modal-lista label{display:flex;align-items:center;gap:8px;font-size:.84rem;cursor:pointer;min-width:0}
.quick-modal-lista label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quick-modal-lista input{accent-color:var(--acc);width:16px;height:16px;flex:0 0 auto}
.quick-modal-acts{display:flex;justify-content:space-between;gap:10px}
@media (max-width:430px){ .quick-modal-lista{grid-template-columns:1fr} }

/* ==========================================================================
   ESQUINAS Y SALIDAS · 2026-08-24
   ---------------------------------------------------------------------------
   · El flotante de contexto es ahora un GRUPO: texto (abre el modal) +
     «Regresar al SPAG» (POST spag_salir_entorno). Con palabras, no un rótulo.
   · Franja `.ctx-banda` al principio del contenido cuando el SPAG simula o
     está dentro de una empresa: dónde está, como quién y la vuelta.
   · Modal `#salirModal` («¿Qué quieres cerrar?») con dos opciones grandes.
   · SOLAPE resuelto: el flotante caía encima de «Volver a mi empresa» de la
     franja de demo (misma esquina, z 1150 sobre z 79) y la regla que lo subía
     estaba solo en móvil y colgada de `.es-demo .ctx-fab`, que no casa (el
     flotante es hermano del shell). Se cuelga de body:has(.demo-aviso), en
     todos los anchos. En el panel no hay .app-tabbar, así que la franja de
     demo vuelve al suelo (bottom:0) también en el móvil.
   ========================================================================== */
.ctx-fab{padding:0;overflow:hidden;gap:0}
.ctx-fab-abrir{display:inline-flex;align-items:center;gap:9px;padding:10px 13px 10px 12px;border:0;background:transparent;
  color:inherit;font:inherit;font-weight:800;cursor:pointer;max-width:min(52vw,360px)}
.ctx-fab-abrir .ctx-fab-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctx-fab-abrir:focus-visible{outline:3px solid #9be2ff;outline-offset:-3px}
.ctx-fab-volver{margin:0;display:flex;align-self:stretch;border-left:1px solid rgba(255,255,255,.28)}
.ctx-fab-volver button{border:0;background:rgba(255,255,255,.16);color:#fff;font:inherit;font-size:.74rem;font-weight:900;
  padding:0 13px;cursor:pointer;white-space:nowrap}
.ctx-fab-volver button:hover{background:rgba(255,255,255,.28)}
.ctx-fab-volver button:focus-visible{outline:3px solid #9be2ff;outline-offset:-3px}
@media(max-width:700px){
  .ctx-fab{right:12px}
  .ctx-fab-abrir{padding:11px}
  .ctx-fab-volver button{padding:0 10px;font-size:.7rem}
}
/* Por encima de la franja de demo, en TODOS los anchos. */
body:has(.demo-aviso) .ctx-fab{bottom:calc(50px + env(safe-area-inset-bottom,0px))}
body.panel-layout .demo-aviso,body.adm-layout .demo-aviso{bottom:0}
@media(max-width:700px){
  body:has(.demo-aviso) .ctx-fab{bottom:calc(46px + env(safe-area-inset-bottom,0px))}
  /* La franja «Volver a mi empresa» no debe quedar bajo el flotante: sitio a la derecha. */
  body.has-ctx-fab .demo-aviso{padding-right:12px}
}
/* Sin :has() (navegadores viejos): el flotante sube igual dentro de un demo
   porque platform_shell.php marca el body por JS (ver abajo). */
body.es-demo-body .ctx-fab{bottom:calc(50px + env(safe-area-inset-bottom,0px))}

/* --- Franja de modo simulación / SPAG en empresa --- */
.ctx-banda{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:10px 14px;
  border-radius:12px;border:1px solid #b9a6e6;background:linear-gradient(90deg,rgba(75,46,131,.10),rgba(6,110,135,.08));
  color:var(--text);font-size:.82rem;line-height:1.4}
.ctx-banda.is-emp{border-color:#9fd9ee;background:rgba(11,92,116,.08)}
.ctx-banda-ico{font-size:1.25rem;flex:none}
.ctx-banda-txt{flex:1 1 320px;min-width:0}
.ctx-banda-volver{margin:0;flex:none}
.ctx-banda-volver .btn{background:#4b2e83;color:#fff;border-color:#4b2e83;font-weight:800}
.ctx-banda.is-emp .ctx-banda-volver .btn{background:#0b5c74;border-color:#0b5c74}
.ctx-banda-volver .btn:hover{filter:brightness(1.12);color:#fff}
[data-theme="dark"] .ctx-banda{border-color:#5b4a8a;background:rgba(75,46,131,.22)}
[data-theme="dark"] .ctx-banda.is-emp{border-color:#2c6f86;background:rgba(11,92,116,.22)}

/* --- Modal «¿Qué quieres cerrar?» --- */
.salir-modal .ctx-modal-body{gap:10px}
.salir-op{display:block;width:100%;text-align:left;padding:12px 14px;border:1px solid var(--line,#e3e8ef);border-radius:12px;
  background:var(--bg-2,#f6f8fb);color:var(--text,#0d1b33);text-decoration:none;font:inherit;cursor:pointer}
.salir-op b{display:block;font-size:.92rem;margin-bottom:2px}
.salir-op small{display:block;font-size:.76rem;opacity:.8;line-height:1.4}
.salir-op:hover,.salir-op:focus-visible{border-color:var(--acc,#0bb6c4);background:var(--panel,#fff);color:var(--text,#0d1b33)}
.salir-op-todo{border-style:dashed}
.salir-op-todo b{color:#b42318}
[data-theme="dark"] .salir-op-todo b{color:#ff9a8f}
.adm-yo-link.salir small{display:block;font-weight:500;opacity:.75;font-size:.7rem}

/* ==========================================================================
   FRANJAS COMPACTAS (includes/franjas.php) · 2026-08-24
   Una línea: icono · frase corta · «Detalles» · acción. El texto largo va en
   el modal .franja-modal (reusa la piel de .ctx-modal).
   ========================================================================== */
.franja{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:6px 12px;min-height:34px;
  border:1px solid var(--line);border-radius:10px;background:var(--bg-2,var(--panel));color:var(--text);font-size:.78rem;line-height:1.3}
.franja-ico{flex:none;font-size:1rem}
.franja-txt{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.franja-mas{flex:none;padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);
  font:inherit;font-size:.7rem;font-weight:800;cursor:pointer}
.franja-mas:hover{color:var(--navy);border-color:var(--acc)}
.franja-acc{flex:none;display:inline-flex}
.franja-acc .btn{padding:4px 10px;font-size:.72rem}
.franja.is-plan{border-color:#f0c98a;background:linear-gradient(100deg,#fff8ec,var(--panel))}
.franja.is-plan b{color:#9a3412}
.franja.is-sim{border-color:#b9a6e6;background:linear-gradient(90deg,rgba(75,46,131,.10),rgba(6,110,135,.06))}
.franja.is-emp{border-color:#9fd9ee;background:rgba(11,92,116,.07)}
.franja.is-sim .btn,.franja.is-emp .btn{background:#4b2e83;border-color:#4b2e83;color:#fff;font-weight:800}
.franja.is-emp .btn{background:#0b5c74;border-color:#0b5c74}
.franja-detalle p{margin:0 0 8px;font-size:.9rem;line-height:1.5}
.franja-acciones{display:flex;gap:8px;flex-wrap:wrap}
[data-theme="dark"] .franja.is-plan{background:rgba(240,201,138,.08)}
@media(max-width:700px){
  .franja{flex-wrap:wrap;padding:6px 10px}
  .franja-txt{white-space:normal;flex-basis:calc(100% - 34px)}
  .franja-acc{width:100%}
  .franja-acc .btn,.franja-acc form,.franja-acc form .btn{width:100%;justify-content:center}
}
/* La franja de demo (fixed abajo) también a una línea. */
.demo-aviso small{flex:0 0 auto;min-width:0;opacity:.85}
.demo-mas{flex:none;margin-left:auto;padding:3px 9px;border:1px solid rgba(138,83,0,.35);border-radius:999px;background:transparent;
  color:#8a5300;font:inherit;font-size:.7rem;font-weight:800;cursor:pointer}
.demo-mas:hover{background:rgba(138,83,0,.1)}
[data-theme="dark"] .demo-mas{color:#ffd79a;border-color:rgba(255,215,154,.4)}
@media(max-width:700px){.demo-aviso small{display:none}}
.franja.is-err{border-color:rgba(200,50,50,.4);background:rgba(220,60,60,.07)}
.franja.is-err b{color:#b42318}
[data-theme="dark"] .franja.is-err b{color:#ff9a8f}

/* ============================================================
   CRM adjuntos — galería de la oportunidad y chip 📎N del embudo
   (includes/panel/crm.php · includes/adjuntos.php)
   ============================================================ */
.crm-chip-adj{display:inline-block;margin-left:4px;padding:0 6px;border-radius:999px;background:var(--acc-soft,rgba(11,182,196,.14));color:var(--acc-dark,#087f8a);font-weight:700;text-decoration:none;font-size:.7rem;line-height:1.5}
.crm-chip-adj:hover{background:var(--acc,#0bb6c4);color:#fff}
.crm-adj-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.crm-adj-input{font-size:.8rem;max-width:280px}
.crm-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.crm-adj{margin:0;border:1px solid var(--line,#e3e8ef);border-radius:10px;background:var(--card,#fff);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.crm-adj img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#f2f4f8}
.crm-adj audio{width:100%;margin:10px 0 0;padding:0 6px;box-sizing:border-box}
.crm-adj video{display:block;width:100%;max-height:150px;background:#000}
.crm-adj-doc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;aspect-ratio:1/1;text-decoration:none;color:var(--muted,#667);font-size:.75rem;font-weight:700;background:#f6f8fb}
.crm-adj-doc span{font-size:2rem;line-height:1}
.crm-adj figcaption{padding:6px 8px;display:flex;flex-direction:column;gap:2px;font-size:.78rem}
.crm-adj figcaption b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-adj figcaption small{color:var(--muted,#667);font-size:.7rem}
.crm-adj-acc{display:flex;gap:6px;align-items:center;margin-top:2px}
.crm-adj-acc a,.crm-adj-acc button{border:1px solid var(--line,#e3e8ef);background:transparent;border-radius:6px;padding:1px 7px;font-size:.75rem;cursor:pointer;color:inherit;text-decoration:none;line-height:1.4}
.crm-adj-acc button:hover{border-color:#b42318;color:#b42318}
.crm-adj-acc form{margin:0;display:inline}
[data-theme="dark"] .crm-adj img,[data-theme="dark"] .crm-adj-doc{background:#1a2333}
/* ============================================================
   45.ª · UX COMPACTA Y CON MOVIMIENTO (2026-08-25)
   ------------------------------------------------------------
   1) Cabecera de modal COMPACTA en pantallas chicas: a 1.4rem con
      degradado ocupaba un tercio del teléfono antes de la primera
      pregunta del formulario. Estas reglas van al FINAL del
      archivo a propósito: pisan a las de arriba a igual
      especificidad.
   2) Movimiento: los modales, toasts y menús aparecían de golpe.
      Transiciones cortas (≤200 ms) y con el freno de
      prefers-reduced-motion: quien pidió quietud, quietud tiene.
   3) KPI del tablero con color e intención: cada tarjeta lleva su
      tono y, si el perfil puede abrir la sección, es un enlace.
   ============================================================ */
@media(max-width:820px){
  .erp-modal-head{padding:12px 14px;gap:10px}
  .erp-modal-head h2{font-size:1.02rem;margin:2px 0 2px}
  .erp-modal-head .erp-eyebrow{font-size:.58rem}
  .erp-modal-head p{font-size:.66rem;max-height:2.6em;overflow:hidden}
  .erp-modal-close{width:30px;height:30px;border-radius:9px;font-size:1.15rem}
  .ctx-modal-head{padding:10px 14px}
  .ctx-modal-head h2{font-size:1rem}
}
@media(max-width:560px){
  .erp-modal-head{padding:9px 12px}
  .erp-modal-head h2{font-size:.94rem}
  .erp-modal-head .erp-eyebrow{display:none}
  .erp-modal-head p{display:none}
  .erp-modal-close{width:28px;height:28px}
  .ctx-modal-head h2{font-size:.92rem}
  .module-list-hero h2{font-size:1.15rem}
}

/* Movimiento suave y uniforme */
dialog.erp-modal[open],dialog.ctx-modal[open],dialog.franja-modal[open]{animation:uxModalIn .18s ease-out}
@keyframes uxModalIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
dialog::backdrop{animation:uxVeloIn .18s ease-out}
@keyframes uxVeloIn{from{opacity:0}to{opacity:1}}
.toast{animation:uxToastIn .22s ease-out}
@keyframes uxToastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.btn,.kpi,.noti-item,.noti-pend-card,.adm-nav-link,.erp-modal-close,.ctx-modal-x,details.adm-blk summary{
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .18s ease,transform .15s ease}
.btn:active{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}
}

/* KPI del tablero: color, icono y salto a su sección */
.tab-kpis .kpi{position:relative;border-left:4px solid var(--kpi-tono,var(--line));overflow:hidden}
.tab-kpis .kpi .kpi-ico{position:absolute;top:9px;right:10px;font-size:1.05rem;opacity:.9;
  width:30px;height:30px;display:grid;place-items:center;border-radius:9px;
  background:color-mix(in srgb, var(--kpi-tono,#8aa) 14%, transparent)}
@supports not (background:color-mix(in srgb,red 10%,blue)){.tab-kpis .kpi .kpi-ico{background:rgba(120,140,170,.12)}}
.tab-kpis .kpi .num{color:var(--kpi-tono,var(--navy))}
.tab-kpis a.kpi{display:block;text-decoration:none;color:inherit;cursor:pointer}
.tab-kpis a.kpi:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(6,24,54,.13);border-color:var(--kpi-tono,var(--line))}
.tab-kpis a.kpi .kpi-ir{position:absolute;right:12px;bottom:8px;font-size:.62rem;color:var(--kpi-tono,var(--muted));
  opacity:0;transform:translateX(-4px);transition:opacity .15s ease,transform .15s ease}
.tab-kpis a.kpi:hover .kpi-ir{opacity:1;transform:none}
.kpi-t-teal{--kpi-tono:#0a8f9c}.kpi-t-azul{--kpi-tono:#2456b8}.kpi-t-verde{--kpi-tono:#178f4e}
.kpi-t-rojo{--kpi-tono:#c0392b}.kpi-t-morado{--kpi-tono:#7c3aed}.kpi-t-naranja{--kpi-tono:#c2620a}
.kpi-t-ambar{--kpi-tono:#a5641b}.kpi-t-cielo{--kpi-tono:#0369a1}

/* ── Panel en el CELULAR: los accesos rápidos son la barra inferior tipo app ──
   La tira ya existe, es del usuario (elige sus módulos con el lápiz) y solo
   ofrece lo que su perfil abre: es exactamente lo que una app pone abajo.
   En pantallas chicas baja al borde inferior con icono arriba y rótulo
   abajo; el botón «Menú» (lo añade el shell) abre el cajón completo, así
   NINGÚN menú queda escondido: lo frecuente a un toque, todo lo demás a dos. */
@media(max-width:740px){
  .platform-quickbar{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:260;
    border-top:1px solid var(--line);border-bottom:0;justify-content:space-around;gap:2px;
    padding:5px 6px calc(5px + env(safe-area-inset-bottom));
    background:var(--panel);box-shadow:0 -10px 28px rgba(0,30,70,.13)}
  .platform-quickbar>span{display:none}
  .platform-quickbar>a{flex:1 1 0;min-width:0;flex-direction:column;height:auto;gap:3px;
    padding:4px 2px;border:0;background:none;font-size:.56rem;border-radius:10px;
    text-align:center;color:#61738a;overflow:hidden;text-overflow:ellipsis}
  .platform-quickbar>a .ui-line-icon{width:20px;height:20px}
  .platform-quickbar>a.on{color:var(--navy);background:#e8f8fa}
  .platform-quickbar>a.primary{background:none;color:#075ba2}
  .platform-quickbar .quick-edit{flex:0 0 auto;display:flex;flex-direction:column;gap:2px;font-size:.56rem}
  .platform-quickbar .quick-edit-txt{display:none}
  .quick-menu{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:3px;
    border:0;background:none;color:#61738a;font:inherit;font-size:.56rem;font-weight:750;
    padding:4px 2px;border-radius:10px;cursor:pointer}
  .quick-menu>span{font-size:1.15rem;line-height:20px}
  .adm-shell.platform-shell .adm-body{padding-bottom:96px}
  body.es-demo-body .demo-aviso{bottom:58px}
  .adm-shell.platform-shell~.ctx-fab,.platform-shell .ctx-fab{bottom:80px}
}
@media(min-width:741px){.quick-menu{display:none}}

/* Listados server-side ([data-lista], 46.ª): paginador y estado de carga */
.lista-pager{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:12px}
.lista-pager-meta{margin-right:auto;color:var(--dim);font-size:.74rem}
.lista-pager a,.lista-pager span.off{min-width:30px;height:30px;display:inline-grid;place-items:center;padding:0 8px;
  border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--navy);font-size:.78rem;font-weight:700;text-decoration:none}
.lista-pager a:hover{border-color:var(--acc);background:#e8f8fa}
.lista-pager a.on{background:var(--navy);border-color:var(--navy);color:#fff}
.lista-pager span.off{opacity:.4}
[data-lista].lista-cargando{opacity:.5;pointer-events:none;transition:opacity .15s ease}

/* ✕ de limpiar campo (46.ª): discreta, solo cuando hay algo que borrar */
.campo-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:20px;height:20px;
  display:none;place-items:center;border:0;border-radius:50%;background:rgba(90,110,140,.14);
  color:#5a6e8c;font-size:.95rem;line-height:1;cursor:pointer;padding:0}
.campo-x:hover{background:rgba(90,110,140,.28);color:#233a58}

/* ── 54.ª · Módulo NUEVO en tu sistema (includes/erp_novedades.php) ──
   Fondo más luminoso + etiqueta «Nuevo» durante 24 h desde que el usuario
   lo vio. Pasado ese plazo la clase desaparece sola: no hay nada que limpiar. */
.adm-nav-link.es-nuevo{background:linear-gradient(90deg,rgba(118,232,233,.22),rgba(255,255,255,.06));color:#fff;border-left-color:#76e8e9;box-shadow:inset 0 0 0 1px rgba(118,232,233,.28)}
.adm-nav-link.es-nuevo:hover{background:linear-gradient(90deg,rgba(118,232,233,.32),rgba(255,255,255,.1))}
.adm-nav-link.es-nuevo .adm-nav-ico{color:#76e8e9}
.adm-nuevo{flex:0 0 auto;margin-left:auto;background:#76e8e9;color:#042451;border-radius:999px;padding:1px 8px;font-size:.62rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;animation:admNuevoLatido 2.4s ease-in-out infinite}
@keyframes admNuevoLatido{0%,100%{box-shadow:0 0 0 0 rgba(118,232,233,.55)}50%{box-shadow:0 0 0 6px rgba(118,232,233,0)}}
@media(prefers-reduced-motion:reduce){.adm-nuevo{animation:none}}
.adm-shell.mini .adm-nuevo{position:absolute;top:4px;right:6px;padding:0 4px;font-size:.5rem}
.nuevo-banda{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:10px 16px;border-radius:12px;border:1px solid rgba(8,118,132,.35);background:linear-gradient(115deg,rgba(118,232,233,.25),rgba(8,118,132,.08));color:var(--navy);font-size:.85rem}
.nuevo-banda b{font-family:var(--display)}
.nuevo-banda .adm-nuevo{margin-left:0;animation:none}
[data-theme="dark"] .nuevo-banda{color:#dbe6f7;background:linear-gradient(115deg,rgba(118,232,233,.16),rgba(8,118,132,.12))}

/* ── 56.ª · Avisos que no estorban + validación amable ──
   La pila de toasts iba pegada a la esquina superior derecha, ENCIMA del menú
   del perfil: había que cerrarla para poder ver el perfil o cerrar sesión.
   Ahora va centrada y, dentro del panel, por debajo de la barra superior. */
.toast-stack{right:auto;left:50%;transform:translateX(-50%);width:min(440px,calc(100vw - 28px));align-items:stretch}
body:has(.adm-top) .toast-stack{top:calc(var(--adm-top,64px) + 48px)}
.toast-err{animation:toast-in .22s ease both, toast-latido 1.2s ease .25s 2}
.toast-err .toast-ico{animation:toast-sacude .5s ease .2s 1}
@keyframes toast-latido{0%,100%{box-shadow:0 10px 30px rgba(10,25,60,.18)}50%{box-shadow:0 10px 30px rgba(192,57,43,.35),0 0 0 4px rgba(192,57,43,.12)}}
@keyframes toast-sacude{0%,100%{transform:none}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}
@media(max-width:700px){.toast-stack{left:10px;right:10px;transform:none;width:auto}}
/* Campo inválido: borde, temblor y tooltip pegado al campo. */
.campo-invalido{border-color:#c0392b!important;box-shadow:0 0 0 3px rgba(192,57,43,.16)!important}
.campo-tiembla{animation:campo-tiembla .4s ease}
@keyframes campo-tiembla{0%,100%{transform:none}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.campo-tip{position:absolute;left:0;top:100%;margin-top:6px;z-index:60;max-width:min(360px,90vw);padding:8px 11px;border-radius:10px;
  background:#c0392b;color:#fff;font-size:.78rem;font-weight:700;line-height:1.35;box-shadow:0 10px 26px rgba(192,57,43,.32);
  animation:campo-tip-in .2s ease both;pointer-events:none}
.campo-tip::before{content:"";position:absolute;left:16px;top:-6px;border:6px solid transparent;border-top:0;border-bottom-color:#c0392b}
.campo-tip-mas{display:block;margin-top:3px;font-weight:600;opacity:.85}
.campo-tip-warn{background:#c47c00;box-shadow:0 10px 26px rgba(196,124,0,.3)}.campo-tip-warn::before{border-bottom-color:#c47c00}
.campo-tip-ok{background:#178f4e;box-shadow:0 10px 26px rgba(23,143,78,.3)}.campo-tip-ok::before{border-bottom-color:#178f4e}
@keyframes campo-tip-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* Aviso grande y animado (window.adiaAlerta). */
.adia-alerta{width:min(440px,calc(100vw - 32px));border:0;border-radius:22px;padding:28px 26px 22px;background:var(--panel,#fff);color:var(--text,#12233d);
  box-shadow:0 32px 100px rgba(1,18,47,.4);text-align:center;animation:adia-alerta-in .32s cubic-bezier(.2,.9,.3,1.3) both}
.adia-alerta[open]{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}
.adia-alerta::backdrop{background:rgba(2,16,39,.6);backdrop-filter:blur(3px)}
.adia-alerta.is-out{animation:adia-alerta-out .2s ease both}
@keyframes adia-alerta-in{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes adia-alerta-out{to{opacity:0;transform:translate(-50%,-50%) scale(.92)}}
.adia-alerta-ico{width:76px;height:76px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font:900 2.2rem var(--display,sans-serif);color:#fff;
  animation:adia-ico-pop .5s cubic-bezier(.2,.9,.3,1.4) .1s both}
.adia-alerta-ok .adia-alerta-ico{background:#178f4e;box-shadow:0 0 0 10px rgba(23,143,78,.15)}
.adia-alerta-err .adia-alerta-ico{background:#c0392b;box-shadow:0 0 0 10px rgba(192,57,43,.15);animation:adia-ico-pop .5s cubic-bezier(.2,.9,.3,1.4) .1s both, campo-tiembla .5s ease .55s 1}
.adia-alerta-warn .adia-alerta-ico{background:#c47c00;box-shadow:0 0 0 10px rgba(196,124,0,.15)}
.adia-alerta-info .adia-alerta-ico{background:#087684;box-shadow:0 0 0 10px rgba(8,118,132,.15)}
@keyframes adia-ico-pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.adia-alerta h2{margin:0 0 6px;font-size:1.3rem}.adia-alerta p{margin:0;color:var(--muted,#5b6b7c);font-size:.9rem}
.adia-alerta-lista{text-align:left;margin:14px 0 0;padding:10px 14px 10px 30px;border-radius:12px;background:var(--bg-2,#eef2f7);font-size:.84rem;line-height:1.5}
.adia-alerta-acc{margin-top:18px}.adia-alerta-acc .btn{min-width:160px;justify-content:center}
@media(prefers-reduced-motion:reduce){.adia-alerta,.adia-alerta-ico,.campo-tiembla,.toast-err,.toast-err .toast-ico{animation:none!important}}
/* 56.ª · Los <dialog> del panel van FIJOS al viewport: con position absolute,
   enfocar un campo dentro del modal desplazaba la ventana y el modal se iba
   medio fuera de la pantalla (pasaba en CRM y Cobranzas). */
body:has(.adm-body) dialog.erp-modal[open],body:has(.adm-body) dialog.ctx-modal[open]{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}

/* QA71 · afectación por línea en el mostrador (catálogo 07): selector discreto
   junto al nombre; en naranja cuando la línea es GRATUITA (no se cobra). */
.pos-tabla .pos-af{display:inline-block;margin-left:6px;max-width:190px;padding:1px 4px;border:1px solid var(--line-2,#d7e0ea);border-radius:6px;background:transparent;color:var(--muted,#5b6b7c);font-size:.66rem;font-weight:700;vertical-align:middle;cursor:pointer}
.pos-tabla .pos-af:focus{outline:2px solid var(--acc,#0a4d8c);outline-offset:1px}
.pos-tabla .pos-af.es-grat{color:#b95c09;border-color:#ffd9a8;background:#fff8ef}
.pos-totales #tGratRow span{color:#b95c09}.pos-totales #tGratRow b{color:#b95c09}
@media(max-width:720px){.pos-tabla .pos-af{display:block;margin:4px 0 0;max-width:100%}}

/* ==========================================================================
   75.ª TANDA (26/08) · TABLAS QUE CABEN: EL «+» Y EL PIE «MOSTRANDO X A Y DE Z»
   --------------------------------------------------------------------------
   Todo lo de aquí abajo lo enciende assets/tabla.js SOLO en las tablas que lo
   piden con `data-tabla-plegable="si"` / `data-tabla-total="…"`. Ninguna de
   las otras 105 pantallas que usan `.tabla-scroll` gana ni pierde una regla.
   ========================================================================== */

/* 🔴 EL MÍNIMO DE 560px ERA MEDIA PARTE DEL PROBLEMA.
   `.tabla-scroll table{min-width:560px}` (muy arriba en este archivo) tiene
   sentido en las tablas normales: por debajo de eso una tabla de verdad se
   vuelve ilegible y es mejor un carril horizontal. Pero en una tabla plegable
   la respuesta al poco ancho ya no es la barra, es esconder columnas y
   ofrecerlas en el «+»: dejar el suelo de 560 obligaba a la barra igual, con
   tres columnas visibles y media pantalla vacía. Se le quita SOLO a estas.
   La especificidad (0,2,1) gana a la de la regla original (0,1,1) esté donde
   esté el archivo en el orden de carga. */
.tabla-scroll table.tabla-x-plegable{min-width:0;width:100%}

/* Modo de medición: la tabla se suelta un instante —sin ancho impuesto y sin
   partir palabras— para preguntarle a cada columna cuánto necesita DE VERDAD.
   Dura un solo reflujo dentro de la misma tarea de JS, así que no se llega a
   pintar nunca. */
table.tabla-x-midiendo{table-layout:auto!important;width:auto!important;min-width:0!important}
table.tabla-x-midiendo th,table.tabla-x-midiendo td{white-space:nowrap!important}

/* ── El botón «+» ────────────────────────────────────────────────────────
   Vive dentro de la primera celda de cada fila. Es un <button> de verdad, así
   que el foco, el Enter y el Espacio vienen del navegador y no hay que
   escribirlos. Solo se ve cuando hay algo que enseñar: la clase
   `.tabla-x-hay-mas` la pone y la quita tabla.js al recalcular el ancho. */
.tabla-x-mas{display:none}
table.tabla-x-hay-mas .tabla-x-mas{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;margin:0 7px 0 0;padding:0;flex:none;vertical-align:middle;
  border:1px solid var(--acc,#0bb6c4);border-radius:6px;
  background:var(--acc,#0bb6c4);color:#fff;
  font:800 .82rem/1 var(--body,system-ui);cursor:pointer;
}
table.tabla-x-hay-mas .tabla-x-mas:hover{filter:brightness(1.08)}
table.tabla-x-hay-mas .tabla-x-mas:focus-visible{outline:2px solid var(--navy,#002863);outline-offset:2px}
table.tabla-x-hay-mas .tabla-x-mas[aria-expanded="true"]{background:var(--navy,#002863);border-color:var(--navy,#002863)}

/* ── La fila hija que despliega el «+» ───────────────────────────────────
   Pares «etiqueta: valor», los mismos que la vista de fichas del móvil. En
   rejilla y no en columna para que en una tableta quepan dos por línea y el
   desplegable no sea un chorizo de quince renglones. */
tr.tabla-x-hija>td{padding:0!important;border-top:0!important;background:var(--bg-2,#f4f7fa)}
.tabla-x-detalle{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:2px 18px;padding:9px 12px 11px;
  border-left:3px solid var(--acc,#0bb6c4);
}
.tabla-x-par{display:flex;gap:8px;align-items:baseline;padding:3px 0;min-width:0}
.tabla-x-par+.tabla-x-par{border-top:1px dotted var(--line,#dde5ee)}
.tabla-x-et{
  flex:none;max-width:44%;color:var(--dim,var(--muted,#5b6b7c));
  font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
}
.tabla-x-val{flex:1;min-width:0;font-size:.78rem;line-height:1.35;overflow-wrap:anywhere}
.tabla-x-val:empty:before{content:'—';color:var(--dim,#8a97a6)}

/* ── El pie «Mostrando X a Y de Z» ───────────────────────────────────────
   Una sola celda con colspan a propósito. La regla que oculta columnas la
   excluye con :not(.tabla-x-pie) —si no, apagar la primera columna borraba el
   pie entero— y la exportación tampoco se la lleva a la hoja. */
tr.tabla-x-pie>td{
  padding:9px 12px!important;border-top:1px solid var(--line,#dde5ee)!important;
  background:var(--bg-2,#f4f7fa);color:var(--muted,#5b6b7c);
  font-size:.73rem;font-weight:700;text-align:left;white-space:normal;
}

/* ── «Visibilidad»: que el menú «Columnas» se encuentre ──────────────────
   El menú existía desde la 54.ª y nadie lo veía porque era un botón gris
   entre otros cinco. Cuando hay columnas sin ver, el botón lo dice con un
   número y se pinta con el color de acento. */
.tabla-x-cols-n{
  display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;
  margin-left:6px;padding:0 4px;border-radius:99px;
  background:var(--acc,#0bb6c4);color:#fff;font-size:.62rem;font-weight:800;line-height:1;
}
.tabla-x-cols-n[hidden]{display:none}
.tabla-x-btn.tabla-x-btn-marca{border-color:var(--acc,#0bb6c4);color:var(--navy,#002863)}

/* ── Móvil ───────────────────────────────────────────────────────────────
   Por debajo de 620px assets/tabla.css convierte la tabla en fichas y ahí ya
   se ve todo: tabla.js devuelve las columnas y no habría «+» que enseñar,
   pero se apaga también por CSS por si alguna pantalla llega aquí con la
   clase puesta. */
@media(max-width:620px){
  table.tabla-x-cards .tabla-x-mas{display:none!important}
  table.tabla-x-cards tr.tabla-x-hija{display:none!important}
  .tabla-x-detalle{grid-template-columns:1fr}
}

/* ============================================================
   80.ª (28/08) · LA BARRA DENTRO DE UNA EMPRESA
   ------------------------------------------------------------
   Cuando la página declara `$sitioEmpresa`, header.php pinta la marca de la
   EMPRESA y esconde la navegación de Adiasoft, que se va al menú ≡ en su
   propia pestaña. El defecto que corrige: en /{empresa}/tienda se apilaban
   dos navegaciones y mandaba la de Adiasoft, con «Nosotros» repetido
   queriendo decir dos cosas. Quien llega ahí es cliente, curioso de
   marketplace o alguien buscando trabajo: nunca un comprador de software.
   ============================================================ */
.hd-emp .nav{gap:.75rem}
.emp-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;min-width:0}
.emp-ava{width:34px;height:34px;border-radius:10px;flex:0 0 auto;overflow:hidden;
         background:var(--navy,#002863);color:#fff;display:grid;place-items:center;
         font-weight:800;font-size:.82rem;letter-spacing:.02em}
.emp-ava img{width:100%;height:100%;object-fit:contain;background:#fff}
.emp-nom{font-weight:700;color:var(--navy,#002863);font-size:1.02rem;line-height:1.15;
         white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
/* La marca de la casa: presente pero sin pelear. Es la puerta de una empresa a
   otra —el marketplace— y por eso no desaparece del todo. */
.emp-en-adiasoft{margin-left:auto;display:flex;align-items:center;gap:.4rem;
                 text-decoration:none;opacity:.62;transition:opacity .15s}
.emp-en-adiasoft:hover,.emp-en-adiasoft:focus-visible{opacity:1}
.emp-en-adiasoft>span{font-size:.72rem;color:var(--muted,#5c6773)}
.emp-en-adiasoft svg,.emp-en-adiasoft img{height:17px;width:auto}
/* Dentro de una empresa el ≡ se ve SIEMPRE: es el único acceso que queda a
   Adiasoft, y en escritorio estaría oculto por la regla de móvil. */
.burger-emp{display:flex !important}

/* --- Las dos pestañas del menú --- */
.mm-tabs>input{position:absolute;opacity:0;pointer-events:none}
.mm-tabbar{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;margin-bottom:.6rem;
           border-bottom:1px solid var(--line,#dce2e9)}
.mm-tab{padding:.6rem .5rem;text-align:center;cursor:pointer;font-weight:600;font-size:.9rem;
        color:var(--muted,#5c6773);border-bottom:2px solid transparent;margin-bottom:-1px;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-tab:hover{color:var(--navy,#002863)}
.mm-pane{display:none;flex-direction:column}
/* Sin JavaScript: el radio marcado decide qué panel se ve. El menú tiene que
   servir aunque el guion aún no haya cargado. */
#mmTabEmp:checked  ~ .mm-tabbar label[for="mmTabEmp"],
#mmTabAdia:checked ~ .mm-tabbar label[for="mmTabAdia"]{color:var(--navy,#002863);border-bottom-color:var(--navy,#002863)}
#mmTabEmp:checked  ~ .mm-pane-emp,
#mmTabAdia:checked ~ .mm-pane-adia{display:flex}
.mm-tabs>input:focus-visible ~ .mm-tabbar label{outline:2px solid var(--navy,#002863);outline-offset:2px}

@media(max-width:720px){ .emp-nom{max-width:38vw;font-size:.95rem} }
[data-theme="dark"] .emp-nom{color:#e6ecf3}
[data-theme="dark"] .mm-tab{color:#9ba7b5}
[data-theme="dark"] #mmTabEmp:checked ~ .mm-tabbar label[for="mmTabEmp"],
[data-theme="dark"] #mmTabAdia:checked ~ .mm-tabbar label[for="mmTabAdia"]{color:#8fb4e8;border-bottom-color:#8fb4e8}

/* 🔴 80.ª · EL MENÚ ≡ TAMBIÉN EN ESCRITORIO, pero solo dentro de una empresa.
   `.mobile-menu.show{display:flex}` vive dentro de @media(max-width:980px), así
   que el botón se veía y no abría nada: en la tienda de un cliente ese menú es
   el ÚNICO acceso que queda a Adiasoft, y tenía que funcionar en pantalla
   grande. Aquí no se toca la regla de siempre —el menú normal sigue siendo de
   móvil— sino que se añade el caso de empresa, que es nuevo. */
.mobile-menu.mm-emp.show{display:flex}
@media(min-width:981px){
  /* A pantalla completa un menú de cinco enlaces resulta violento y tapa la
     tienda entera. Aquí baja como panel pegado a la derecha, bajo el botón. */
  .mobile-menu.mm-emp{inset:64px 0 auto auto;width:min(340px,92vw);max-height:min(78vh,620px);
                      overflow-y:auto;border:1px solid var(--line);border-radius:14px;
                      box-shadow:0 18px 48px rgba(8,24,48,.16);padding:16px;margin-right:24px}
}

/* 80.ª · un post publicado POR LA EMPRESA se firma con su marca. */
.mp-av-emp{width:42px;height:42px;border-radius:11px;flex:0 0 auto;overflow:hidden;display:grid;
           place-items:center;background:var(--navy,#002863);color:#fff;font-weight:800;font-size:.82rem}
.mp-av-emp img{width:100%;height:100%;object-fit:contain;background:#fff}
.mp-esemp{font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
          padding:2px 6px;border-radius:5px;background:var(--bg-2,#eef2f7);color:var(--muted,#5c6773);
          vertical-align:2px;margin-left:.35rem}

/* 87.ª · El rótulo del perfil elegido («GA · Gerencia administrativa · … · Demo Perú»)
   empujaba la barra superior del SPAG: se acota y se recorta con «…». */
.spag-company-switch .bsel-btn{max-width:min(300px,26vw)}
.spag-company-switch .bsel-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}

/* ============================================================================
   92.ª · EL MODAL DEL ERP EN UN TELÉFONO (390 × 844)
   ----------------------------------------------------------------------------
   Todo lo de aquí abajo es NUEVO y va al final a propósito: pisa por posición,
   no por `!important`, a las reglas de `.erp-modal*` de más arriba (líneas
   4736-4959) y a las de cada pantalla (`.inventory-form{padding:0}` línea 54,
   `.client-form{padding:0}` línea 5011), que a igual especificidad ganaban por
   ir después. Ninguna regla vieja se ha tocado.

   ── P0 · EL PIE TAPABA LOS CAMPOS ─────────────────────────────────────────
   Síntoma medido en 390×844: en `dialog#inventoryModal` el rótulo «Código de
   barras» salía cortado y Unidad / Precio / Stock quedaban DEBAJO de la barra
   de botones. El pie es `position:sticky;bottom:0` DENTRO del propio elemento
   que desplaza (`.erp-modal-body`, que en estas dos pantallas es el <form>),
   así que se pinta encima de los últimos campos y el scroll no puede llevarte
   más allá de él: el contenedor no tiene nada que desplazar por debajo.

   🔴 ALTURAS MEDIDAS DEL PIE (`.erp-modal-actions`), calculadas sobre las
   reglas de esta hoja —no a ojo—:

     · botón dentro del panel: `.adm-shell .btn` (línea 639) = padding 8+8 px
       y font-size .83rem → 13.28 px × line-height 1.55 (body, línea 92)
       = 20.6 px de caja de línea  ⇒  ALTO DEL BOTÓN ≈ 36.6 px  (37 px)
     · pie de inventario ≤820px: padding 12+12 (línea 4948) + 37 + 1 de
       `border-top`                                    ⇒  62 px
     · pie del cliente ≤820px: `.client-form>.erp-modal-actions` conserva
       14+14 (línea 5014, solo cambia el lateral) + 37 + 1  ⇒  66 px
     · pie por defecto >820px: 14+14 + 37 + 1              ⇒  66 px

   El máximo real es 66 px. Se reserva 72 px —seis de holgura para el día en
   que alguien suba el tipo o meta un icono más alto— y se le suma el
   `env(safe-area-inset-bottom)` del iPhone, que en un 14/15 son otros 34 px
   que el sistema se queda para la barra de gestos. Con esto SIEMPRE se puede
   desplazar hasta por debajo del botón.

   Por qué en `.erp-modal .erp-modal-body` y no en `.erp-modal-body` a secas:
   `.client-form{padding:0}` (0,1,0, línea 5011) ganaría el `padding-bottom`
   por ser posterior; con dos clases (0,2,0) el pie deja de comerse los
   campos también en el alta de cliente.
   ========================================================================== */
.erp-modal{ --erp-pie: 72px }
.erp-modal .erp-modal-body{
  padding-bottom: calc(var(--erp-pie) + env(safe-area-inset-bottom, 0px));
}
/* El pie tampoco puede quedar debajo de la barra de gestos del teléfono: el
   botón se veía pero el dedo daba en el borde de la pantalla. */
.erp-modal .erp-modal-actions{
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
@media(max-width:820px){
  .erp-modal .erp-modal-actions{ padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) }
}

/* ── P0-bis · TELÉFONO: EL PIE DEJA DE SER PEGAJOSO ───────────────────────
   Por debajo de 700 px el modal ocupa la pantalla entera y un pie pegado se
   come 62-66 px de los 844 (un 8 %) durante TODO el formulario, que es
   justo el sitio donde caían Unidad, Precio y Stock. Aquí el pie va al final
   del contenido, como un botón más: nada se pinta encima de nada y el
   reservado de arriba se queda solo con lo que pide el sistema.
   El botón sigue siendo el último elemento del formulario, que es donde el
   dedo lo busca al terminar de rellenarlo. */
@media(max-width:700px){
  .erp-modal .erp-modal-actions{
    position:static;
    margin-top:14px;
    backdrop-filter:none;
    background:var(--panel);
  }
  .erp-modal .erp-modal-body{
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  /* Botones a lo ancho y con alto de dedo: 44 px es el mínimo que piden
     tanto Apple (HIG) como Material. */
  .erp-modal .erp-modal-actions .btn{ min-height:44px; flex:1; justify-content:center }
}

/* ── P2 · FONDO OPACO EN MÓVIL ────────────────────────────────────────────
   El velo era rgba(2,16,39,.68): en escritorio está bien —se ve de dónde
   sale el modal— pero en un teléfono el modal NO llega a ocupar el alto
   entero (`max-height:96vh` en ≤720px, línea 4958) y por los bordes se leía
   la tabla de artículos de detrás. Con un formulario delante, lo de detrás
   solo distrae. Se sube a .94 y se refuerza el desenfoque.
   `background-color` en vez de `background` para no borrar el `blur`. */
@media(max-width:820px){
  .erp-modal::backdrop{ background:rgba(2,16,39,.94); backdrop-filter:blur(7px) }
  /* Y la caja del modal, opaca de verdad: si `--panel` llegara con alfa
     (temas), aquí se fuerza el color de superficie. */
  .erp-modal{ background:var(--panel, #fff) }
}

/* ── P2 · LOS «+» DE FAMILIA / MARCA / ANAQUEL, A 44 × 44 ─────────────────
   `.ref-add` (los inyecta includes/panel/inventario.php sobre cada campo con
   `list=`) medía 34 px de ancho y el alto que le tocara de la fila flex: en
   un teléfono es un blanco de menos de la mitad del mínimo recomendado y se
   fallaba a la primera. El `.ref-wrap` es `align-items:stretch`, así que el
   alto lo marca el campo; el `min-height` lo asegura cuando el campo es más
   bajo (por ejemplo si mañana se compacta).
   Va también aquí y no solo en la <style> de la pantalla porque esta hoja se
   carga antes: si un día ese bloque se mueve a un parcial, la medida táctil
   sobrevive. */
.ref-add{ min-width:44px; min-height:44px }
@media(max-width:700px){
  .ref-add{ width:44px; min-width:44px; min-height:44px; font-size:1.25rem }
}

/* ── P1 · EL DESPLEGABLE CON BUSCADOR, POR ENCIMA DEL <dialog> ────────────
   assets/ux.js marca con `data-buscador` los <select> de dentro de un
   `.erp-modal` para que el widget de assets/app.js los monte (ahí vive; NO
   se toca). Ese widget cuelga su lista de <body> con `position:fixed`
   (app.js:6617), y un `<dialog>` abierto con `showModal()` vive en el TOP
   LAYER del navegador: pinta por encima de cualquier z-index del documento,
   así que la lista quedaba DETRÁS del velo. La única forma de subirla es
   meterla en el top layer también, y eso lo hace `popover` —el mismo truco
   de orden de apertura que ya usa `dialog.ref-mini` en inventario.php—.

   Lo que hay que apagar es la hoja del NAVEGADOR para `[popover]`, que trae
   `inset:0` + `margin:auto` (centraría la lista en la pantalla) y su propio
   borde y relleno. Se apaga aquí; el `left`/`top` en línea que escribe
   `colocar()` de app.js sigue mandando por ser estilo en línea. */
.bsel-pop[popover]{
  inset:auto; margin:0; padding:0;
  border:1px solid var(--line-2); border-radius:12px;
  background:var(--panel); color:var(--text);
  overflow:hidden;
}