/* Sistema de diseño de CASTAiA (doc 14 §4, D-137, D-324). Extraído de Maquetas/fuente/base.html el 2026-09-30 (tokens, marco y componentes comunes). Desde aquí es la fuente: la app real lo usa tal cual; los estilos propios de cada pantalla van en app.css. */ /* ========================================================= TOKENS DE DISEÑO (doc 14 §4, D-130). Nada usa colores fijos. Colores de marca definidos por DESS; solo modo claro y oscuro, elegido por cada usuario (D-324). ========================================================= */ :root{ --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:28px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-full:999px; --mbar-h:calc(62px + env(safe-area-inset-bottom)); --nav-w:224px; --nav-w-min:64px; --agora-w:340px; --agora-w-min:64px; /* Marca CASTAiA (D-324): tinta, jade, cobre */ --c-brand-ink:#202B2B; --c-brand-jade:#278575; --c-brand-copper:#B66A45; --c-bg:#f4f5f2; --c-surface:#ffffff; --c-surface-2:#eef1ee; --c-border:#dfe4e1; --c-text:#202B2B; --c-text-2:#56625f; --c-text-3:#87918e; --c-primary:#278575; --c-primary-hover:#1f6d60; --c-primary-soft:#e2f1ed; --c-on-primary:#ffffff; --c-accent:#B66A45; --c-accent-soft:#f6e9e1; --c-nav-bg:#202B2B; --c-nav-text:#b9c4c1; --c-nav-active:#ffffff; --c-nav-active-bg:#2c3a3a; --c-success:#4d8a1f; --c-success-soft:#ebf4e1; --c-warning:#a87a00; --c-warning-soft:#fbf2d9; --c-danger:#c43d3d; --c-danger-soft:#fbe6e5; --c-info:#2f6f9f; --c-info-soft:#e3eef6; --c-ai:#B66A45; --c-ai-soft:#f6e9e1; /* insignia Agente IA = cobre */ --c-human:#3f5654; --c-human-soft:#e4eceb; /* insignia Humano = tinta */ --c-cat-1:#278575; --c-cat-2:#B66A45; --c-cat-3:#4a6fa5; --c-cat-4:#c9a227; --c-cat-5:#6b5b95; --c-cat-6:#87918e; /* series de datos */ --shadow-1:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08); --shadow-2:0 8px 24px rgba(16,24,40,.12); } [data-theme="dark"]{ --c-bg:#121817; --c-surface:#192120; --c-surface-2:#212b2a; --c-border:#2c3837; --c-text:#e7eceb; --c-text-2:#a4b0ad; --c-text-3:#74807d; --c-primary:#35a38f; --c-primary-hover:#45b8a3; --c-primary-soft:#17332e; --c-on-primary:#06110f; --c-accent:#d68a63; --c-accent-soft:#3a2419; --c-nav-bg:#0d1312; --c-nav-text:#97a4a1; --c-nav-active:#ffffff; --c-nav-active-bg:#1f2b2a; --c-success:#7cc24a; --c-success-soft:#1c2b12; --c-warning:#e0b341; --c-warning-soft:#33290e; --c-danger:#ef6b6b; --c-danger-soft:#3a1c1c; --c-info:#6fa8d6; --c-info-soft:#172636; --c-ai:#d68a63; --c-ai-soft:#3a2419; --c-human:#9fb9b6; --c-human-soft:#1f2d2c; --c-cat-1:#35a38f; --c-cat-2:#d68a63; --c-cat-3:#7b9fd4; --c-cat-4:#e0bf4f; --c-cat-5:#a292cc; --c-cat-6:#8d9895; --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 8px 24px rgba(0,0,0,.5); } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{font-family:var(--font);font-size:var(--fs-md);color:var(--c-text);background:var(--c-bg);-webkit-font-smoothing:antialiased} button,input,select{font:inherit;color:inherit} svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* ========================================================= ESTRUCTURA: Navegación | Área de trabajo | Ágora (D-151) Barra izquierda y Ágora a toda la altura. ========================================================= */ .app{display:grid;grid-template-columns:var(--nav-w) 1fr var(--agora-w);height:100vh;height:100dvh;overflow:hidden} .app.nav-min{grid-template-columns:var(--nav-w-min) 1fr var(--agora-w)} .app.agora-min{grid-template-columns:var(--nav-w) 1fr var(--agora-w-min)} .app.nav-min.agora-min{grid-template-columns:var(--nav-w-min) 1fr var(--agora-w-min)} /* ---------- Barra izquierda ---------- */ .nav{position:relative;background:var(--c-nav-bg);color:var(--c-nav-text);display:flex;flex-direction:column;padding:var(--sp-4) var(--sp-3);gap:var(--sp-1);overflow:hidden} .brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:var(--sp-1) var(--sp-3) var(--sp-5);color:#fff;white-space:nowrap} .brand svg{fill:none;stroke:none} .brand .logo-full{width:150px;height:auto} .brand .logo-sym{width:30px;height:auto;display:none} .brand small{font-weight:500;color:var(--c-nav-text);font-size:var(--fs-xs);padding-left:2px} .nav-item{text-decoration:none;display:flex;align-items:center;gap:var(--sp-3);padding:9px var(--sp-3);border-radius:var(--r-md);cursor:pointer;white-space:nowrap;border:0;background:none;text-align:left;width:100%;color:inherit;transition:background .15s} .nav-item:hover{background:var(--c-nav-active-bg)} .nav-toggle{position:absolute;top:18px;right:8px;width:28px;height:28px;border-radius:var(--r-md);border:0;background:none;color:var(--c-nav-text);display:grid;place-items:center;cursor:pointer;z-index:2} .nav-toggle:hover{background:var(--c-nav-active-bg);color:#fff} .nav-toggle svg{width:18px;height:18px} .app.nav-min .nav-toggle{position:static;margin:0 auto var(--sp-2)} .nav-item.active{background:var(--c-nav-active-bg);color:var(--c-nav-active);font-weight:600;box-shadow:inset 3px 0 0 var(--c-brand-jade)} .nav-item.active svg{color:#3fb8a1} .nav-spacer{flex:1} .nav-items{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--sp-1);margin:0 calc(-1 * var(--sp-1));padding:0 var(--sp-1);scrollbar-width:thin;scrollbar-color:var(--c-nav-active-bg) transparent} .nav-items::-webkit-scrollbar{width:6px}.nav-items::-webkit-scrollbar-thumb{background:var(--c-nav-active-bg);border-radius:3px} .nav>*:not(.nav-items){flex-shrink:0} .nav-news{display:flex;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3)} .news-ico{position:relative;width:34px;height:34px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--c-nav-active-bg);cursor:pointer} .news-ico .cnt{position:absolute;top:-5px;right:-5px;background:var(--c-primary);color:#fff;font-size:10px;font-weight:700;border-radius:var(--r-full);min-width:17px;height:17px;display:grid;place-items:center;padding:0 4px} .news-ico.alert{color:#ff7b7b} .news-ico.alert .cnt{background:var(--c-danger)} .news-ico.alert{animation:pulse 2.4s ease-in-out infinite} /* parpadeo suave y lento (D-143) */ @keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}} .nav-credits{font-size:var(--fs-xs);padding:var(--sp-2) var(--sp-3);white-space:nowrap} .nav-credits b{color:#fff;font-size:var(--fs-md)} .nav-user{border:0;background:none;color:inherit;font:inherit;cursor:pointer;width:100%;text-align:left;border-radius:var(--r-md);display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2);border-top:1px solid var(--c-nav-active-bg);margin-top:var(--sp-2);padding-top:var(--sp-3);white-space:nowrap} .nav-user .who{line-height:1.2;flex:1} .nav-user:hover{background:var(--c-nav-active-bg)} .nav-user .chev{width:16px;height:16px;opacity:.6} .umenu{position:fixed;left:12px;bottom:72px;width:310px;background:var(--c-surface);color:var(--c-text);border:1px solid var(--c-border);border-radius:var(--r-lg);box-shadow:var(--shadow-2);z-index:45;overflow:hidden} .um-head{display:flex;gap:var(--sp-3);align-items:center;padding:var(--sp-4)} .um-head b{display:block} .um-head small{display:block;color:var(--c-text-2);font-size:var(--fs-xs)} .um-sec{border-top:1px solid var(--c-border);padding:var(--sp-2)} .um-item{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:9px var(--sp-3);border-radius:var(--r-md);border:0;background:none;cursor:pointer;color:var(--c-text);text-decoration:none;font-size:var(--fs-md);text-align:left} .um-item:hover{background:var(--c-surface-2)} .um-item svg{width:18px;height:18px;color:var(--c-text-2)} .um-item .ext{margin-left:auto;width:15px;height:15px} .um-item.um-main{color:var(--c-primary);font-weight:600} .um-item.um-main svg{color:var(--c-primary)} .um-item small{display:block;font-size:var(--fs-xs);color:var(--c-text-2);font-weight:400} .um-demo{background:var(--c-surface-2);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-xs);color:var(--c-text-2);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2)} .nav-user .who small{display:block;font-size:var(--fs-xs);color:var(--c-nav-text)} .nav-user .who b{color:#fff;font-weight:600} .app.nav-min .nav .lbl,.app.nav-min .brand-text,.app.nav-min .nav-credits,.app.nav-min .nav-user .who,.app.nav-min .nav-news{display:none} .app.nav-min .nav-item{justify-content:center;padding:10px} .app.nav-min .nav-user{justify-content:center}.app.nav-min .nav-user .chev{display:none} .app.nav-min .logo-full{display:none}.app.nav-min .logo-sym{display:block} .app.nav-min .brand{align-items:center;padding:var(--sp-1) 0 var(--sp-5)} /* ---------- Columna central ---------- */ .main{display:grid;grid-template-rows:56px 1fr 48px;grid-template-columns:minmax(0,1fr);min-width:0;overflow:hidden} .main>*{min-width:0} .topbar{display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--sp-5);background:var(--c-surface);border-bottom:1px solid var(--c-border)} .icon-btn{width:36px;height:36px;border-radius:var(--r-md);border:0;background:none;display:grid;place-items:center;cursor:pointer;color:var(--c-text-2)} .icon-btn:hover{background:var(--c-surface-2);color:var(--c-text)} .search{flex:1;min-width:0;max-width:520px;display:flex;align-items:center;gap:var(--sp-2);background:var(--c-surface-2);border-radius:var(--r-md);padding:0 var(--sp-3);height:38px;color:var(--c-text-3)} .search input{border:0;background:none;outline:none;flex:1;color:var(--c-text)} .kbd{white-space:nowrap;font-size:11px;border:1px solid var(--c-border);border-radius:5px;padding:1px 6px;color:var(--c-text-3);background:var(--c-surface)} .topbar .spacer{flex:1} .selector{display:flex;align-items:center;gap:var(--sp-2);padding:6px var(--sp-3);border-radius:var(--r-md);border:1px solid var(--c-border);cursor:pointer;font-size:var(--fs-sm);white-space:nowrap} .selector small{color:var(--c-text-3)} .conn{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--c-success);white-space:nowrap} .dot{width:8px;height:8px;border-radius:50%;background:currentColor} .work{overflow:auto;padding:var(--sp-5);container-type:inline-size} .tabs{display:flex;align-items:stretch;gap:var(--sp-1);padding:0 var(--sp-4);background:var(--c-surface);border-top:1px solid var(--c-border);overflow-x:auto} .tab{text-decoration:none;display:flex;align-items:center;border:0;background:none;padding:0 var(--sp-4);cursor:pointer;color:var(--c-text-2);white-space:nowrap;border-top:2px solid transparent;font-size:var(--fs-sm)} .tab:hover{color:var(--c-text)} .tab.active{color:var(--c-primary);border-top-color:var(--c-primary);font-weight:600} /* ---------- Componentes comunes ---------- */ .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-5);flex-wrap:wrap} .page-head h1{font-size:var(--fs-xl);font-weight:700} .page-head p{color:var(--c-text-2);font-size:var(--fs-sm);margin-top:2px} .card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);box-shadow:var(--shadow-1)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:38px;padding:0 var(--sp-4);border-radius:var(--r-md);border:1px solid var(--c-border);background:var(--c-surface);cursor:pointer;font-weight:500;white-space:nowrap} .btn:hover{background:var(--c-surface-2)} .btn svg{width:18px;height:18px} .btn-primary{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary)} .btn-primary:hover{background:var(--c-primary-hover)} .btn-ghost{border-color:transparent;background:none;color:var(--c-text-2)} .btn-danger{color:var(--c-danger);border-color:var(--c-danger-soft);background:var(--c-danger-soft)} .btn-lg{height:52px;font-size:var(--fs-lg);font-weight:700;border-radius:var(--r-md)} .btn-sm{height:30px;padding:0 var(--sp-3);font-size:var(--fs-sm)} .field{display:flex;flex-direction:column;gap:4px} .field label,.field-label{font-size:var(--fs-xs);color:var(--c-text-2);font-weight:500} .field .check{font-size:var(--fs-sm);color:var(--c-text);font-weight:400} .input{height:38px;border:1px solid var(--c-border);border-radius:var(--r-md);padding:0 var(--sp-3);background:var(--c-surface);outline:none} .input:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-soft)} .pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--r-full)} .pill-ai{background:var(--c-ai-soft);color:var(--c-ai)} .pill-h{background:var(--c-human-soft);color:var(--c-human)} .pill-ok{background:var(--c-success-soft);color:var(--c-success)} .pill-warn{background:var(--c-warning-soft);color:var(--c-warning)} .pill-bad{background:var(--c-danger-soft);color:var(--c-danger)} .pill-muted{background:var(--c-surface-2);color:var(--c-text-2)} .muted{color:var(--c-text-2)} .num{font-variant-numeric:tabular-nums;text-align:right} table{width:100%;border-collapse:collapse} th{font-size:var(--fs-xs);font-weight:600;color:var(--c-text-2);text-align:left;padding:10px var(--sp-4);border-bottom:1px solid var(--c-border);white-space:nowrap} td{padding:11px var(--sp-4);border-bottom:1px solid var(--c-border)} tr:last-child td{border-bottom:0} tbody tr:hover{background:var(--c-surface-2)} tr.sel{background:var(--c-primary-soft)!important} .hidden{display:none!important} /* ========================================================= PANTALLA DE VENTAS (doc 16 §1) ========================================================= */ .pos{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--sp-4);align-items:start} .pos>*{min-width:0} @container (max-width:720px){.pos{grid-template-columns:1fr}} .pre-tabs{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-4)} .pre-chip{display:flex;align-items:center;gap:var(--sp-2);height:34px;padding:0 var(--sp-3);border-radius:var(--r-full);border:1px solid var(--c-border);background:var(--c-surface);cursor:pointer;font-size:var(--fs-sm)} .pre-chip.active{border-color:var(--c-primary);background:var(--c-primary-soft);color:var(--c-primary);font-weight:600} .pre-chip .n{font-size:11px;color:var(--c-text-3)} .pre-head{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--sp-3);padding:var(--sp-4);border-bottom:1px solid var(--c-border)} .code-row{display:flex;gap:var(--sp-3);padding:var(--sp-4);border-bottom:1px solid var(--c-border);align-items:center} .code-input{flex:1;display:flex;align-items:center;gap:var(--sp-2);height:48px;border:2px solid var(--c-primary);border-radius:var(--r-md);padding:0 var(--sp-3);background:var(--c-surface)} .code-input input{border:0;outline:none;background:none;flex:1;font-size:var(--fs-lg)} .lines td{font-size:var(--fs-md)} .lines .prod b{display:block;font-weight:600} .lines .prod small{color:var(--c-text-3);font-size:var(--fs-xs)} .qty{display:inline-flex;align-items:center;border:1px solid var(--c-border);border-radius:var(--r-sm)} .qty button{border:0;background:none;width:24px;height:28px;cursor:pointer;color:var(--c-text-2)} .qty span{min-width:28px;text-align:center;font-variant-numeric:tabular-nums} .shortcuts{display:flex;gap:var(--sp-4);flex-wrap:wrap;padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--c-border);font-size:var(--fs-xs);color:var(--c-text-3)} .shortcuts span{display:inline-flex;gap:6px;align-items:center} .empty{padding:var(--sp-6);text-align:center;color:var(--c-text-3)} .totals{padding:var(--sp-5)} .totals .row{display:flex;justify-content:space-between;padding:5px 0;color:var(--c-text-2);font-size:var(--fs-sm)} .totals .grand{display:flex;justify-content:space-between;align-items:baseline;padding-top:var(--sp-3);margin-top:var(--sp-2);border-top:1px dashed var(--c-border)} .totals .grand span{font-weight:600} .totals .grand b{font-size:var(--fs-2xl);font-variant-numeric:tabular-nums} .pay{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);padding:0 var(--sp-5) var(--sp-4)} .pay button{height:54px;border-radius:var(--r-md);border:1px solid var(--c-border);background:var(--c-surface);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:var(--fs-xs);color:var(--c-text-2)} .pay button b{font-size:var(--fs-md);color:var(--c-text)} .pay button.active{border-color:var(--c-primary);background:var(--c-primary-soft);color:var(--c-primary)} .pay button.active b{color:var(--c-primary)} .received{padding:0 var(--sp-5) var(--sp-4);display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)} .received .input,.pre-head .input{min-width:0;width:100%} .last-sale{margin-top:var(--sp-4);padding:var(--sp-4) var(--sp-5);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);font-size:var(--fs-xs);color:var(--c-text-2)} .last-sale b{display:block;font-size:var(--fs-lg);color:var(--c-text);font-variant-numeric:tabular-nums} /* ========================================================= ADMINISTRACIÓN > CUENTAS (doc 27, D-320) ========================================================= */ .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);margin-bottom:var(--sp-5)} .kpi{padding:var(--sp-4) var(--sp-5)} .kpi small{color:var(--c-text-2);font-size:var(--fs-xs);font-weight:500} .kpi b{display:block;font-size:22px;margin-top:4px;font-variant-numeric:tabular-nums} .kpi .delta{font-size:var(--fs-xs);margin-top:2px} .section-title{display:flex;align-items:center;justify-content:space-between;margin:var(--sp-5) 0 var(--sp-3)} .section-title h2{font-size:var(--fs-lg);font-weight:600} .cajas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:var(--sp-4)} @container (max-width:700px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}} @container (max-width:500px){.kpi{padding:var(--sp-3) var(--sp-4)}.kpi b{font-size:17px}} .caja{padding:var(--sp-5)} .caja-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--sp-3)} .caja-head h3{font-size:var(--fs-md);font-weight:600} .caja-head small{color:var(--c-text-3);font-size:var(--fs-xs)} .caja-total{font-size:var(--fs-2xl);font-weight:700;font-variant-numeric:tabular-nums;margin-bottom:var(--sp-3)} .fp{display:flex;justify-content:space-between;padding:7px 0;border-top:1px solid var(--c-border);font-size:var(--fs-sm)} .fp span{display:flex;align-items:center;gap:var(--sp-2);color:var(--c-text-2)} .fp i{width:8px;height:8px;border-radius:2px;display:inline-block} .caja-actions{display:flex;gap:var(--sp-2);margin-top:var(--sp-4);flex-wrap:wrap} /* Panel lateral de detalle (listado + panel, doc 14) */ .drawer{position:fixed;top:0;bottom:0;right:0;width:440px;max-width:100%;background:var(--c-surface);box-shadow:var(--shadow-2);transform:translateX(100%);transition:transform .22s ease;z-index:30;display:flex;flex-direction:column} .drawer.open{transform:none;visibility:visible;transition:transform .22s ease} /* Cerrada no se ve nada de ella (ni botones del pie que no cupieran) */ .drawer:not(.open){visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s} .drawer-head{padding:var(--sp-5);border-bottom:1px solid var(--c-border);display:flex;justify-content:space-between;align-items:flex-start} .drawer-head h3{font-size:var(--fs-lg)} .drawer-body{padding:var(--sp-5);overflow:auto;flex:1;display:flex;flex-direction:column;gap:var(--sp-4)} .drawer-body>*{flex-shrink:0} .drawer-foot{padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--c-border);display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:flex-end;align-items:center} .dist-row{display:grid;grid-template-columns:1fr 130px;gap:var(--sp-3);align-items:center} .dist-row .avail{font-size:var(--fs-xs);color:var(--c-text-3)} .scrim{position:fixed;inset:0;background:rgba(10,14,20,.35);opacity:0;pointer-events:none;transition:opacity .2s;z-index:25} .scrim.open{opacity:1;pointer-events:auto} .note{font-size:var(--fs-xs);color:var(--c-text-2);background:var(--c-surface-2);border-radius:var(--r-md);padding:var(--sp-3)} /* ========================================================= ÁGORA (columna derecha — D-128, directivas 03–05) ========================================================= */ .agora{position:relative;background:var(--c-surface);border-left:1px solid var(--c-border);display:flex;flex-direction:column;min-width:0;overflow:hidden} .ag-head{height:56px;display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-3) 0 var(--sp-4);border-bottom:1px solid var(--c-border)} .ag-head h2{font-size:var(--fs-lg);font-weight:700;flex:1} .ag-head .pend{font-size:var(--fs-xs);color:var(--c-text-2);display:flex;align-items:center;gap:6px} .ag-mini{position:relative;cursor:pointer;display:block} .ag-mini .avatar{width:26px;height:26px;font-size:10px} .ag-mini .avatar.ai{border-radius:8px} .ag-mini .avatar .st{display:none} .ag-mini .badge{position:absolute;top:-5px;right:-5px;background:var(--c-primary);color:#fff;border-radius:var(--r-full);font-size:9px;font-weight:700;min-width:15px;height:15px;display:grid;place-items:center;padding:0 3px;border:2px solid var(--c-surface)} .ag-resize{position:absolute;left:-3px;top:0;bottom:0;width:7px;cursor:col-resize;z-index:5} .ag-resize:hover,body.resizing .ag-resize{background:linear-gradient(90deg,transparent 2px,var(--c-primary) 2px,var(--c-primary) 4px,transparent 4px)} .app.agora-min .ag-resize{display:none} body.resizing{cursor:col-resize;user-select:none} .ag-seg{display:flex;margin:var(--sp-3) var(--sp-4) var(--sp-2);background:var(--c-surface-2);border-radius:var(--r-md);padding:3px} .ag-seg button{flex:1;border:0;background:none;height:30px;border-radius:8px;cursor:pointer;font-size:var(--fs-sm);color:var(--c-text-2)} .ag-seg button.active{background:var(--c-surface);color:var(--c-text);font-weight:600;box-shadow:var(--shadow-1)} .ag-list{overflow:auto;flex:1;padding:0 var(--sp-2)} .contact{display:flex;gap:var(--sp-3);padding:10px var(--sp-2);border-radius:var(--r-md);cursor:pointer;align-items:center} .contact:hover{background:var(--c-surface-2)} .avatar{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;flex:none;color:#fff} .avatar.ai{border-radius:12px} .avatar .st{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--c-surface);background:var(--c-success)} .avatar .st.away{background:var(--c-text-3)} .avatar .st.busy{background:var(--c-warning)} .contact .meta{flex:1;min-width:0} .contact .top{display:flex;align-items:center;gap:6px} .contact .top b{font-weight:600;font-size:var(--fs-md)} .contact .top time{margin-left:auto;font-size:11px;color:var(--c-text-3)} .contact .role{font-size:11px;color:var(--c-text-3)} .contact .last{font-size:var(--fs-sm);color:var(--c-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;gap:6px;align-items:center} .contact .last span{overflow:hidden;text-overflow:ellipsis} .unread{margin-left:auto;background:var(--c-primary);color:#fff;border-radius:var(--r-full);font-size:11px;font-weight:700;min-width:19px;height:19px;display:grid;place-items:center;padding:0 5px;flex:none} .act{display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-2);border-radius:var(--r-md);cursor:pointer} .act:hover{background:var(--c-surface-2)} .act-ico{width:34px;height:34px;border-radius:var(--r-md);display:grid;place-items:center;flex:none} .act small{display:block;font-size:11px;color:var(--c-text-3);font-weight:600;text-transform:uppercase;letter-spacing:.4px} .act p{font-size:var(--fs-sm)} /* Conversación */ .chat{display:flex;flex-direction:column;flex:1;min-height:0} .chat-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-3);border-bottom:1px solid var(--c-border)} .chat-head .who b{display:flex;align-items:center;gap:6px} .chat-head .who small{font-size:11px;color:var(--c-text-3)} .ctx{display:flex;gap:6px;flex-wrap:wrap;padding:var(--sp-2) var(--sp-4);border-bottom:1px solid var(--c-border);font-size:11px;color:var(--c-text-3)} .ctx span{background:var(--c-surface-2);padding:2px 8px;border-radius:var(--r-full)} .msgs{flex:1;overflow:auto;padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)} .msgs>*{flex-shrink:0} .msg{max-width:88%;padding:10px 12px;border-radius:14px;font-size:var(--fs-sm);line-height:1.45} .msg.me{align-self:flex-end;background:var(--c-primary);color:var(--c-on-primary);border-bottom-right-radius:4px} .msg.them{align-self:flex-start;background:var(--c-surface-2);border-bottom-left-radius:4px} .msg time{display:block;font-size:10px;opacity:.7;margin-top:4px} .acard{align-self:stretch;border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;background:var(--c-surface)} .acard-head{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-xs);color:var(--c-text-2);font-weight:600;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--c-border);background:var(--c-surface-2)} .acard-body{padding:var(--sp-3) var(--sp-4)} .acard-kpi{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums} .acard-sub{font-size:var(--fs-xs);color:var(--c-text-2);margin-bottom:var(--sp-2)} .alloc{display:grid;grid-template-columns:1fr auto auto;gap:4px var(--sp-3);font-size:var(--fs-sm);align-items:center} .alloc .pct{font-size:11px;color:var(--c-text-3);text-align:right} .bar{height:6px;border-radius:3px;background:var(--c-surface-2);grid-column:1/-1;overflow:hidden;margin-bottom:4px} .bar i{display:block;height:100%;border-radius:3px} .acard-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--c-border)} .confirm{margin:0 var(--sp-4) var(--sp-3);padding:var(--sp-3);border-radius:var(--r-md);background:var(--c-warning-soft);color:var(--c-warning);font-size:var(--fs-xs)} .composer{display:flex;gap:var(--sp-2);padding:var(--sp-3);border-top:1px solid var(--c-border);align-items:center} .composer input{flex:1;height:40px;border:1px solid var(--c-border);border-radius:var(--r-full);padding:0 var(--sp-4);background:var(--c-surface-2);outline:none} /* Ágora colapsada: franja de avatares con contador (D-128) */ .ag-strip{display:none;flex-direction:column;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 0;overflow:auto} .ag-strip .avatar{cursor:pointer} .ag-strip .avatar .badge{position:absolute;top:-4px;right:-6px;background:var(--c-primary);color:#fff;border-radius:var(--r-full);font-size:10px;font-weight:700;min-width:17px;height:17px;display:grid;place-items:center;padding:0 4px;border:2px solid var(--c-surface)} .ag-full{display:flex;flex-direction:column;flex:1;min-height:0} /* Solo en pantallas amplias: en el celular Ágora nunca se colapsa (D-340), aunque se haya colapsado antes en horizontal o tableta */ @media (min-width:768px){ .app.agora-min .ag-full{display:none!important} .app.agora-min .ag-strip{display:flex} .app.agora-min .ag-head h2,.app.agora-min .ag-head .pend{display:none} .app.agora-min .ag-head{justify-content:center;padding:0} .app.agora-min .ag-mbtn{display:none} } /* Placeholder de módulos sin maqueta */ .placeholder{display:grid;place-items:center;height:100%;text-align:center;color:var(--c-text-3)} .placeholder h2{color:var(--c-text);font-size:var(--fs-xl);margin-bottom:var(--sp-2)} /* ========================================================= RESPONSIVE - Tablet (≥ 768): como escritorio (D-135); el menú se colapsa a iconos. - Móvil (< 768): menú = barra inferior de iconos; pestañas del módulo = fila desplazable arriba del contenido (D-157); Ágora es app aparte (D-129). ========================================================= */ @media (max-width:1200px){ .pos{grid-template-columns:1fr} .kpis{grid-template-columns:repeat(2,1fr)} } @media (max-width:767px){ .app,.app.agora-min,.app.nav-min,.app.nav-min.agora-min{grid-template-columns:1fr;grid-template-rows:1fr;padding-bottom:var(--mbar-h)} .agora{display:none} .nav{display:none} .main{grid-row:1;grid-template-rows:52px 44px 1fr} .tabs{grid-row:2;border-top:0;border-bottom:1px solid var(--c-border)} .tab{border-top:0;border-bottom:2px solid transparent} .tab.active{border-bottom-color:var(--c-primary)} .work{grid-row:3;padding:var(--sp-4)} .topbar{padding:0 var(--sp-3)} .suc-t,.selector .chev,.conn .lbl,.search .kbd,#themeBtnTop,.nav-toggle,.code-row .btn,.page-head .btn{display:none} .main,.work{min-width:0;max-width:100vw} .lines th,.lines td{padding:10px 8px} .pre-head{grid-template-columns:1fr} .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .col-hide-m{display:none} .shortcuts{display:none} } .mobile-agora{display:none} /* ========================================================= COMPONENTES COMUNES PARA TODAS LAS PANTALLAS ========================================================= */ .pill-info{background:var(--c-info-soft);color:var(--c-info)} .pill-brand{background:var(--c-primary-soft);color:var(--c-primary)} .pill-accent{background:var(--c-accent-soft);color:var(--c-accent)} .drawer.wide{width:640px} /* Barra de filtros sobre un listado */ .toolbar{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--c-border)} .toolbar .search{height:36px;max-width:320px;background:var(--c-surface-2)} .toolbar .grow{flex:1} .chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 var(--sp-3);border-radius:var(--r-full);border:1px solid var(--c-border);background:var(--c-surface);cursor:pointer;font-size:var(--fs-sm);color:var(--c-text-2);white-space:nowrap} .chip:hover{background:var(--c-surface-2)} .chip.active{border-color:var(--c-primary);background:var(--c-primary-soft);color:var(--c-primary);font-weight:600} .chip .n{font-size:11px;opacity:.75} /* Listado + panel de detalle lateral (doc 14: "Listado general / Ficha individual" → listado con panel) */ .split{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--sp-4);align-items:start} .split>*{min-width:0} @container (max-width:900px){.split{grid-template-columns:1fr}} .detail{position:sticky;top:0;padding:0;overflow:hidden} .detail-head{padding:var(--sp-5);border-bottom:1px solid var(--c-border)} .detail-head h3{font-size:var(--fs-lg);font-weight:700} .detail-head .sub{color:var(--c-text-2);font-size:var(--fs-sm);margin-top:2px} .detail-body{padding:var(--sp-4) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)} .detail-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--c-border)} .dl{display:grid;grid-template-columns:auto 1fr;gap:6px var(--sp-4);font-size:var(--fs-sm)} .dl dt{color:var(--c-text-2)} .dl dd{text-align:right;font-variant-numeric:tabular-nums} .sub-title{font-size:var(--fs-xs);font-weight:700;color:var(--c-text-3);text-transform:uppercase;letter-spacing:.5px} /* Formularios */ .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)} .form-grid .full{grid-column:1/-1} @container (max-width:600px){.form-grid{grid-template-columns:1fr}} .form-section{padding:var(--sp-5)} .form-section+.form-section{border-top:1px solid var(--c-border)} .form-section h3{font-size:var(--fs-md);font-weight:600;margin-bottom:2px} .form-section .hint{font-size:var(--fs-sm);color:var(--c-text-2);margin-bottom:var(--sp-4)} textarea.input{height:auto;min-height:80px;padding:var(--sp-2) var(--sp-3);resize:vertical} /* Controles de formulario únicos para todo el sistema (D-434): casilla, opción, lista desplegable, fecha y número. :where() deja la especificidad en cero para que cada pantalla solo acomode (márgenes), nunca rediseñe. */ :where(input[type=checkbox],input[type=radio]){appearance:none;-webkit-appearance:none;margin:0;width:18px;height:18px;flex:none;display:inline-grid;place-content:center;vertical-align:middle;border:1.5px solid color-mix(in srgb,var(--c-text-3) 70%,transparent);background:var(--c-surface);cursor:pointer;transition:background .12s,border-color .12s,box-shadow .12s} :where(input[type=checkbox]){border-radius:5px} :where(input[type=radio]){border-radius:50%} :where(input[type=checkbox])::after{content:'';width:12px;height:12px;background:var(--c-on-primary);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6 9.6 3.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6 9.6 3.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transform:scale(0);transition:transform .12s} :where(input[type=radio])::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--c-on-primary);transform:scale(0);transition:transform .12s} :where(input[type=checkbox],input[type=radio]):hover{border-color:var(--c-primary)} :where(input[type=checkbox],input[type=radio]):focus-visible{outline:none;box-shadow:0 0 0 3px var(--c-primary-soft)} :where(input[type=checkbox],input[type=radio]):is(:checked,:indeterminate){background:var(--c-primary);border-color:var(--c-primary)} :where(input[type=checkbox],input[type=radio]):checked::after{transform:scale(1)} :where(input[type=checkbox]):indeterminate::after{transform:scale(1);-webkit-mask:none;mask:none;width:8px;height:2px;border-radius:1px} :where(input[type=checkbox],input[type=radio]):disabled{opacity:.45;cursor:not-allowed} /* Casilla u opción con su texto: un solo estilo («Ver inactivos», «Debajo del mínimo», almacenes, supervisores…) */ .check{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--c-text);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent} .check:has(input:disabled){color:var(--c-text-3);cursor:not-allowed} select.input{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2387918e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px;cursor:pointer} input.input[list]{padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2387918e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px} input.input[list]::-webkit-calendar-picker-indicator{opacity:0} input.input[type=number]{-moz-appearance:textfield} input.input[type=number]::-webkit-inner-spin-button,input.input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} input.input:is([type=date],[type=time],[type=datetime-local],[type=month]){min-width:0} input.input::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer} .input:disabled{background:var(--c-surface-2);color:var(--c-text-3);cursor:not-allowed} .input::placeholder{color:var(--c-text-3)} .switch{position:relative;width:38px;height:22px;flex:none;display:inline-block} .switch input{opacity:0;width:0;height:0} .switch i{position:absolute;inset:0;background:var(--c-border);border-radius:var(--r-full);transition:.2s;cursor:pointer} .switch i::after{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:var(--shadow-1)} .switch input:checked+i{background:var(--c-primary)} .switch input:checked+i::after{transform:translateX(16px)} .toggle-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) 0;border-bottom:1px solid var(--c-border)} .toggle-row:last-child{border-bottom:0} .toggle-row b{font-weight:500;display:block} .toggle-row small{color:var(--c-text-2);font-size:var(--fs-xs)} /* Control segmentado (incluye permisos de tres estados, D-168) */ .seg{display:inline-flex;background:var(--c-surface-2);border-radius:var(--r-md);padding:3px;gap:2px} .seg button{border:0;background:none;height:28px;padding:0 var(--sp-3);border-radius:7px;cursor:pointer;font-size:var(--fs-sm);color:var(--c-text-2);white-space:nowrap} .seg button.active{background:var(--c-surface);color:var(--c-text);font-weight:600;box-shadow:var(--shadow-1)} .tri button.active[data-v="no"]{color:var(--c-danger)} .tri button.active[data-v="si"]{color:var(--c-success)} .tri button.active[data-v="ap"]{color:var(--c-warning)} /* Indicadores / estadísticas */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--sp-4);margin-bottom:var(--sp-5)} .stat{padding:var(--sp-4) var(--sp-5)} .stat small{color:var(--c-text-2);font-size:var(--fs-xs);font-weight:500} .stat b{display:block;font-size:22px;margin-top:4px;font-variant-numeric:tabular-nums} .stat .delta{font-size:var(--fs-xs);margin-top:2px;color:var(--c-text-2)} .up{color:var(--c-success)} .down{color:var(--c-danger)} .progress{height:8px;border-radius:4px;background:var(--c-surface-2);overflow:hidden} .progress i{display:block;height:100%;background:var(--c-primary);border-radius:4px} /* Pasos (asistentes) */ .steps{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-5);flex-wrap:wrap} .step{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--c-text-3)} .step i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;background:var(--c-surface-2);color:var(--c-text-2)} .step.done i{background:var(--c-primary);color:var(--c-on-primary)} .step.now{color:var(--c-text);font-weight:600} .step.now i{background:var(--c-primary-soft);color:var(--c-primary);box-shadow:0 0 0 2px var(--c-primary)} .step+.step::before{content:"";width:28px;height:1px;background:var(--c-border);margin-right:var(--sp-2)} /* Zona para soltar archivos */ .dropzone{border:2px dashed var(--c-border);border-radius:var(--r-lg);padding:var(--sp-6);text-align:center;color:var(--c-text-2);background:var(--c-surface)} .dropzone b{color:var(--c-text);display:block;margin:var(--sp-2) 0 4px} .dropzone svg{width:32px;height:32px;color:var(--c-primary)} /* Línea de tiempo */ .timeline{display:flex;flex-direction:column;gap:var(--sp-3)} .tl{display:grid;grid-template-columns:12px 1fr;gap:var(--sp-3);font-size:var(--fs-sm)} .tl::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c-primary);margin-top:4px} .tl.ai::before{background:var(--c-ai)} .tl.warn::before{background:var(--c-warning)} .tl.bad::before{background:var(--c-danger)} .tl small{color:var(--c-text-3);display:block;font-size:var(--fs-xs)} /* Paginación */ .pager{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--c-border);font-size:var(--fs-sm);color:var(--c-text-2)} .pager .pages{display:flex;gap:4px} .pager .pages button{min-width:30px;height:30px;border-radius:var(--r-sm);border:1px solid var(--c-border);background:var(--c-surface);cursor:pointer} .pager .pages button.active{background:var(--c-primary);color:var(--c-on-primary);border-color:var(--c-primary)} /* Aviso en línea */ .callout{display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);font-size:var(--fs-sm);align-items:flex-start} .callout svg{width:18px;height:18px;margin-top:1px} .callout.info{background:var(--c-info-soft);color:var(--c-info)} .callout.warn{background:var(--c-warning-soft);color:var(--c-warning)} .callout.bad{background:var(--c-danger-soft);color:var(--c-danger)} .callout.ok{background:var(--c-success-soft);color:var(--c-success)} .callout.ai{background:var(--c-ai-soft);color:var(--c-ai)} .callout b{font-weight:600} .callout p{color:var(--c-text)} .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)} .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)} @container (max-width:800px){.grid-2,.grid-3{grid-template-columns:1fr}} .row-actions{display:flex;gap:4px;justify-content:flex-end} tr.clickable{cursor:pointer} /* Enlace: el mismo aspecto sea o