:root{
/* Claro "suave" (pedido de Álvaro): tarjetas blanco tiza en vez de blanco
puro, fondo un punto más profundo y texto grafito en vez de casi negro.
Baja el encandilamiento sin perder contraste de lectura. */
--bg:#EEEEF2; --surface:#F9F9FB; --surface-2:#E9E9EE; --surface-3:#DEDEE5;
--ink:#23232B; --ink-dim:#5E5E6B; --ink-faint:#8B8B97;
--line:#D6D6DE; --line-soft:#E2E2E9;
/* Identidad falince (la misma de la web): un solo acento, dorado. En claro
va tostado (#8C6A2F) porque el #C9A96E de la web no se lee sobre blanco.
"Cuidado" es coral y no ámbar, para no confundirse con el dorado. */
--accent:#8C6A2F; --accent-ink:#FFFFFF; --accent-soft:#F1E9D8; --accent-soft-ink:#6B4F1E;
--pop:#8C6A2F; --pop-ink:#FFFFFF;
--good:#1C8F57; --good-soft:#E1F3E8;
--warn:#B5532A; --warn-soft:#F8E6DC;
--danger:#B23B3B; --danger-soft:#F7E4E2;
--bubble-in:#F9F9FB; --bubble-in-ink:#23232B;
--glow-accent: 0 0 0 1px rgba(140,106,47,.35);
--titulos:'Archivo', system-ui, sans-serif;
--glow-good: 0 0 0 2px rgba(28,163,98,.16);
--shadow: 0 1px 2px rgba(0,0,0,.04);
--rail:84px;
--r-sm:6px; --r-md:10px; --r-lg:14px;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--bg:#0E0E11; --surface:#17171B; --surface-2:#212127; --surface-3:#2A2A31;
--ink:#F4F4F6; --ink-dim:#A9A9B4; --ink-faint:#72727E;
--line:#31313A; --line-soft:#25252C;
--accent:#C9A96E; --accent-ink:#17130B; --accent-soft:#2A2418; --accent-soft-ink:#E3CB99;
--pop:#C9A96E; --pop-ink:#17130B;
--good:#5FC48E; --good-soft:#15301F;
--warn:#EE8C5A; --warn-soft:#3A2419;
--danger:#E58080; --danger-soft:#3A2020;
--bubble-in:#212127; --bubble-in-ink:#F4F4F6;
--glow-accent: 0 0 0 1px rgba(201,169,110,.4);
--glow-good: 0 0 0 2px rgba(46,204,113,.2);
--shadow: 0 1px 2px rgba(0,0,0,.25);
}
}
:root[data-theme="dark"]{
--bg:#0E0E11; --surface:#17171B; --surface-2:#212127; --surface-3:#2A2A31;
--ink:#F4F4F6; --ink-dim:#A9A9B4; --ink-faint:#72727E;
--line:#31313A; --line-soft:#25252C;
--accent:#C9A96E; --accent-ink:#17130B; --accent-soft:#2A2418; --accent-soft-ink:#E3CB99;
--pop:#C9A96E; --pop-ink:#17130B;
--good:#5FC48E; --good-soft:#15301F;
--warn:#EE8C5A; --warn-soft:#3A2419;
--danger:#E58080; --danger-soft:#3A2020;
--bubble-in:#212127; --bubble-in-ink:#F4F4F6;
--glow-accent: 0 0 0 1px rgba(201,169,110,.4);
--glow-good: 0 0 0 2px rgba(46,204,113,.2);
--shadow: 0 1px 2px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden;margin:0;scroll-behavior:smooth}
@keyframes popIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.msg-row{animation:popIn .25s ease both}
.bot-row,.conv-row,.nav-item,.detail-section,.stat-pill,button,.switch{transition:transform .12s ease,background-color .12s ease,box-shadow .12s ease}
.bot-row:hover,.conv-row:hover{background:var(--surface-2)}
button:active{transform:scale(.96)}
.pane-body,.messages{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums} /* estilo-v2-base aplicado */
.mono{font-family:'Manrope',system-ui,sans-serif; font-variant-numeric: tabular-nums;}
/* Títulos con la letra de la web falince: Archivo ancho. Solo títulos y
números grandes; el resto sigue en Manrope para leerse cómodo. */
h1,.brand,.home-greeting-title,.ini-titulo,.cocina-reloj,.comanda-num,.comanda-reloj{font-family:var(--titulos);font-stretch:125%}
h1,.home-greeting-title,.ini-titulo{font-weight:650;letter-spacing:-.025em}
/* ===== Portada de Inicio =====
El video de la portada de la web falince (nubes con luz) de fondo, el
saludo con la letra ancha y el día del negocio contado en palabras, con
invitaciones a lo que conviene mirar. Siempre oscura: es una ventana a la
marca, en tema claro y oscuro. La primera vez de la sesión entra despacio. */
.ini-portada{position:relative;margin:24px 28px 0;border-radius:var(--r-lg);overflow:hidden;background:#0B0B0E;color:#F4F4F6;min-height:clamp(360px,48vh,480px);display:flex;align-items:flex-end;isolation:isolate}
.ini-portada video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:0;transition:opacity 2.6s ease}
.ini-portada video.lista{opacity:.92}
.portada-velo{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,10,13,.9) 0%,rgba(10,10,13,.66) 42%,rgba(10,10,13,.12) 100%),linear-gradient(0deg,rgba(10,10,13,.55) 0%,rgba(10,10,13,0) 55%)}
.portada-cont{width:100%;padding:76px clamp(22px,4vw,48px) clamp(18px,2.2vw,28px);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px}
.portada-cont > :not(.portada-frase):not(.portada-arriba){grid-column:1}
/* La frase que rota va a la derecha, abajo, alineada con los botones. */
.portada-cont > .portada-frase{grid-column:2;grid-row:1 / span 3;align-self:end;justify-self:end;text-align:right;margin:0 0 4px}
.portada-arriba{position:absolute;top:18px;left:clamp(22px,4vw,48px);right:18px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.portada-negocio{display:inline-flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13.5px;font-weight:600;color:rgba(244,244,246,.74)}
.portada-local{display:inline-flex;align-items:center;gap:8px;padding-left:16px;border-left:1px solid rgba(244,244,246,.2);color:#F4F4F6}
.portada-local i{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.portada-local.abierto i{background:#7FD3A6;box-shadow:0 0 10px 1px rgb(127 211 166 / .6)}
.portada-local.cerrado i{background:#F2A07A;box-shadow:0 0 10px 1px rgb(242 160 122 / .45)}
.portada-acciones[hidden]{display:none}
.portada-ia{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:rgba(244,244,246,.8);background:rgba(14,14,17,.45);border:1px solid rgba(244,244,246,.16);border-radius:999px;padding:6px 8px 6px 13px;backdrop-filter:blur(8px)}
.portada-ia .estado{font-weight:700}
.portada-ia .estado.on{color:#7FD3A6}
.portada-ia .estado.off{color:#F2A07A}
.portada-saludo{margin:0 0 14px;font-family:var(--titulos);font-stretch:125%;font-weight:600;font-size:clamp(34px,5.4vw,66px);line-height:.98;letter-spacing:-.04em;text-wrap:balance;max-width:14ch}
/* Frase que va rotando debajo del saludo. Alto fijo para que no salte el resto. */
.portada-frase{margin:-4px 0 18px;min-height:2.5em;max-width:30ch;font-family:var(--titulos);font-stretch:112%;font-weight:500;font-size:clamp(17px,1.9vw,24px);line-height:1.25;letter-spacing:-.02em;color:#E3CB99;text-wrap:balance;transition:opacity .6s ease,transform .6s ease}
.portada-frase.cambiando{opacity:0;transform:translateY(6px)}
.portada-relato p{margin:0 0 6px;max-width:60ch;font-size:clamp(15px,1.35vw,17.5px);line-height:1.55;color:rgba(244,244,246,.86)}
.portada-relato b{color:#E3CB99;font-weight:600}
.portada-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.portada-acciones button{font:inherit;font-size:14.5px;font-weight:700;border-radius:12px;padding:12px 18px;cursor:pointer;border:1px solid rgba(244,244,246,.26);background:rgba(14,14,17,.35);color:#F4F4F6;backdrop-filter:blur(6px)}
.portada-acciones button:hover{border-color:#C9A96E}
.portada-acciones button.principal{background:#C9A96E;border-color:#C9A96E;color:#17130B}
.portada-acciones button.principal:hover{background:#D6B97F}
.portada-acciones button:focus-visible{outline:2px solid #E3CB99;outline-offset:3px}
/* Una sola secuencia, la primera vez de la sesión: saludo, el día y las invitaciones. */
.ini-portada [data-paso]{opacity:0;transform:translateY(12px);animation:portadaEntra 1.1s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes portadaEntra{to{opacity:1;transform:none}}
@media (max-width:700px){
.ini-portada{margin:14px 14px 0;min-height:0}
.portada-cont{padding-top:104px;grid-template-columns:minmax(0,1fr)}
.portada-cont > .portada-frase{grid-column:1;grid-row:auto;justify-self:start;text-align:left;margin:-4px 0 18px}
.portada-velo{background:linear-gradient(0deg,rgba(10,10,13,.92) 0%,rgba(10,10,13,.6) 60%,rgba(10,10,13,.35) 100%)}
}
@media (prefers-reduced-motion: reduce){
.ini-portada [data-paso]{animation:none;opacity:1;transform:none}
.ini-portada video{transition:none}
}
/* ===== Firmas de la web falince en toda la app (pedido 1/10) =====
1) La línea fina con el rombito dorado en el medio, que separa secciones.
2) Fotos de la web que se desvanecen hacia el fondo, sin bordes ni cortes. */
:root{ --linea-color: rgba(35,35,43,.18); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --linea-color: rgba(244,244,246,.2); } }
:root[data-theme="dark"]{ --linea-color: rgba(244,244,246,.2); }
.linea-rombo,.home-header::after{
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='2' y='2' width='6' height='6' transform='rotate(45 5 5)' fill='none' stroke='%23C9A96E' stroke-opacity='.8'/%3E%3C/svg%3E") center / 10px 10px no-repeat,
linear-gradient(90deg, transparent, var(--linea-color) 45%) left center / calc(50% - 9px) 1px no-repeat,
linear-gradient(270deg, transparent, var(--linea-color) 45%) right center / calc(50% - 9px) 1px no-repeat;
}
.linea-rombo{height:10px;margin:26px 28px}
/* Luz dorada que sigue al mouse en las tarjetas (la misma de la web falince). */
:is(.ini-kpi,.ini-card,.comanda,.admin-producto,.admin-tarjeta,.camp-box,.agot-tile,.tarde-item,.agent-card,.info-card,.faq-item){position:relative;isolation:isolate}
:is(.ini-kpi,.ini-card,.comanda,.admin-producto,.admin-tarjeta,.camp-box,.agot-tile,.tarde-item,.agent-card,.info-card,.faq-item)::before{
content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;
background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgb(201 169 110 / .13), transparent 60%)}
:is(.ini-kpi,.ini-card,.comanda,.admin-producto,.admin-tarjeta,.camp-box,.agot-tile,.tarde-item,.agent-card,.info-card,.faq-item):hover::before{opacity:1}
@media (hover:none){ :is(.ini-kpi,.ini-card,.comanda,.admin-producto,.admin-tarjeta,.camp-box,.agot-tile,.tarde-item,.agent-card,.info-card,.faq-item)::before{display:none} }
/* Encabezado de cada sección con su foto de la web. */
/* Fotos reales de alta calidad (las originales de la web, en blanco y negro).
Los cuadros sacados de los videos tenían la compresión del video. */
.pane[data-pane="agentes"]{--foto:url("/media/foto-agentes.jpg?v=4")}
.pane[data-pane="contactos"]{--foto:url("/media/foto-contactos.jpg?v=7")}
.pane[data-pane="campanas"]{--foto:url("/media/foto-campanas.jpg?v=4")}
.pane[data-pane="ayuda"]{--foto:url("/media/foto-ayuda.jpg?v=4")}
.pane[data-pane="novedades"]{--foto:url("/media/foto-cocina.jpg?v=7")}
.pane[data-pane="panelAdmin"]{--foto:url("/media/foto-admin.jpg?v=7")}
.pane[data-pane="panorama"]{--foto:url("/media/foto-panorama.jpg?v=4")}
.pane[data-pane="datos"]{--foto:url("/media/foto-pedidos.jpg?v=6")}
.pane[data-pane="cocina"]{--foto:url("/media/foto-cocina.jpg?v=7")}
.pane[data-pane] .home-header{position:relative;isolation:isolate;min-height:210px;padding:72px 28px 66px !important;align-items:flex-end}
.pane[data-pane] .home-header::before{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(90deg,rgba(10,10,13,.84) 0%,rgba(10,10,13,.45) 55%,rgba(10,10,13,.2) 100%), var(--foto) center 45% / cover no-repeat;
-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)}
.pane[data-pane] .home-header::after{content:"";position:absolute;left:28px;right:28px;bottom:16px;height:10px}
.pane[data-pane] .home-header .home-greeting-title{color:#F4F4F6;font-size:clamp(28px,3.2vw,40px) !important;line-height:1}
.pane[data-pane] .home-header p{color:rgba(244,244,246,.78) !important;max-width:560px}
/* Cocina: la misma foto arriba, más baja (es una pantalla de trabajo). */
/* Encabezado de Cocina como el de las demás secciones: foto oscura que se
desvanece, título grande y la línea con el rombo al pie. */
.cocina-top{position:relative;isolation:isolate;min-height:170px;align-items:flex-end !important;padding:60px 28px 46px !important;margin-bottom:6px}
.cocina-top::before{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(90deg,rgba(10,10,13,.88) 0%,rgba(10,10,13,.55) 55%,rgba(10,10,13,.35) 100%), var(--foto) center 55% / cover no-repeat;
-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)}
.cocina-top::after{content:"";position:absolute;left:28px;right:28px;bottom:12px;height:10px;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='2' y='2' width='6' height='6' transform='rotate(45 5 5)' fill='none' stroke='%23C9A96E' stroke-opacity='.8'/%3E%3C/svg%3E") center / 10px 10px no-repeat,
linear-gradient(90deg, transparent, var(--linea-color) 45%) left center / calc(50% - 9px) 1px no-repeat,
linear-gradient(270deg, transparent, var(--linea-color) 45%) right center / calc(50% - 9px) 1px no-repeat}
.cocina-top h1{color:#F4F4F6;font-size:clamp(28px,3.2vw,40px) !important;line-height:1}
.cocina-top .cocina-reloj{color:rgba(244,244,246,.62);font-size:clamp(20px,2vw,26px);font-weight:500;align-self:flex-end;margin-bottom:2px}
.cocina-top .cocina-tools{align-self:flex-end}
.cocina-top .quick-action{background:rgba(14,14,17,.45);border-color:rgba(244,244,246,.18);color:#F4F4F6;backdrop-filter:blur(6px)}
.cocina-top .quick-action:hover{border-color:var(--accent)}
/* Portada de Inicio en oscuro: como en la web, sin tarjeta y fundida con el fondo. */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .ini-portada{margin:0;border-radius:0;background:transparent}
:root:not([data-theme="light"]) .ini-portada video{-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 50%,transparent 100%)}
}
:root[data-theme="dark"] .ini-portada{margin:0;border-radius:0;background:transparent}
:root[data-theme="dark"] .ini-portada video{-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 50%,transparent 100%)}
/* El velo oscuro se funde igual que el video: si no, al pie quedaba un corte recto. */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .portada-velo{-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 50%,transparent 100%)} }
:root[data-theme="dark"] .portada-velo{-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 50%,transparent 100%)}
h1,h2,h3{text-wrap:balance;margin:0}
button{font-family:inherit}
.shell{display:flex;flex-direction:column;height:100vh;min-height:640px}
@supports (height: 100dvh){ .shell{height:100dvh} }
.shell{height:var(--app-height, 100vh)}
.topbar{display:flex;align-items:center;gap:14px;padding:9px 20px;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap;min-height:50px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:14.5px;letter-spacing:-.01em;color:var(--ink)}
.brand-sep{color:var(--ink-faint);font-weight:500}
#brandTenant{font-weight:600;color:var(--ink-dim)}
.brand-mark{width:24px;height:24px;border-radius:var(--r-sm);background:linear-gradient(155deg,var(--accent),var(--accent-soft-ink,var(--accent)));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brand-mark svg{width:13px;height:13px}
.topbar-controls{display:flex;align-items:center;gap:8px;margin-left:auto}
.live-dot{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--ink-faint);}
.live-dot i{width:7px;height:7px;border-radius:50%;background:var(--ink-faint);display:inline-block}
.live-dot.ok i{background:var(--good);box-shadow:var(--glow-good);animation:pulse 2s ease-in-out infinite}
.live-dot.bad i{background:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.refresh-btn{border:1px solid var(--line);background:var(--surface);color:var(--ink-dim);border-radius:var(--r-sm);width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.refresh-btn:hover{color:var(--ink)}
.refresh-btn svg{width:14px;height:14px;transition:transform .5s ease}
.refresh-btn.spinning svg{animation:spin .7s linear infinite}
.stats{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.stat-pill{display:flex;align-items:baseline;gap:6px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:6px 12px}
.stat-pill b{font-family:'Manrope',system-ui,sans-serif;font-size:14px;font-weight:600}
.stat-pill span{font-size:11.5px;color:var(--ink-dim);}
.grid{flex:1;display:grid;grid-template-columns:170px 220px 300px 1fr 260px;min-height:0;position:relative;transition:grid-template-columns .18s ease}
.navrail{grid-column:1}
.pane[data-pane="bots"]{grid-column:2}
.pane[data-pane="list"]{grid-column:3}
.pane[data-pane="chat"]{grid-column:4}
.pane[data-pane="details"]{grid-column:5}
.grid.nav-collapsed{grid-template-columns:0px 220px 300px 1fr 260px}
.grid.bots-collapsed{grid-template-columns:170px 0px 300px 1fr 260px}
.grid.bots-collapsed .pane[data-pane="bots"]{display:none}
.grid.nav-collapsed.bots-collapsed{grid-template-columns:0px 0px 300px 1fr 260px}
.bots-edge-toggle{display:none}
@media (min-width:901px){
body:is([data-view="bots"],[data-view="list"],[data-view="chat"],[data-view="details"]) .bots-edge-toggle{
display:flex;align-items:center;justify-content:center;padding:0;
position:absolute;top:50%;transform:translateY(-50%);left:calc(var(--rail) + 220px);
width:14px;height:44px;border:1px solid var(--line);border-left:none;
background:var(--surface);border-radius:0 8px 8px 0;cursor:pointer;z-index:25;
color:var(--ink-dim);transition:left .18s ease;
}
.bots-edge-toggle svg{width:12px;height:12px;transition:transform .15s ease}
.grid.nav-collapsed .bots-edge-toggle{left:220px}
.grid.bots-collapsed .bots-edge-toggle{left:var(--rail)}
.grid.nav-collapsed.bots-collapsed .bots-edge-toggle{left:0px}
.grid.bots-collapsed .bots-edge-toggle svg{transform:rotate(180deg)}
}
.navrail{display:none}
.nav-toggle-btn{display:none}
@media (min-width:901px){
.nav-toggle-btn{display:inline-flex}
.navrail{display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--line);padding:12px 0;min-height:0;overflow-y:auto}
.navrail .nav-label{font-size:10px;color:var(--ink-faint);font-weight:700;padding:14px 16px 4px}
.navrail a, .navrail .nav-item{display:flex;align-items:center;gap:10px;padding:7px 10px;margin:2px 8px;border-radius:var(--r-md);font-size:13px;font-weight:600;color:var(--ink-dim);background:var(--surface-2);text-decoration:none;cursor:default}
.navrail .nav-item.active{color:var(--accent-ink);background:var(--accent)}
.navrail .nav-item.soon{opacity:.45;cursor:not-allowed;background:transparent}
.navrail svg{width:15px;height:15px;flex-shrink:0}
.grid.nav-collapsed .navrail{
position:absolute;left:0;top:0;bottom:0;width:var(--rail);z-index:30;
transform:translateX(-100%);opacity:0;pointer-events:none;
transition:transform .18s ease,opacity .18s ease;
box-shadow:0 2px 12px -4px rgba(0,0,0,.28);
}
.grid.nav-collapsed.nav-peek .navrail{transform:translateX(0);opacity:1;pointer-events:auto}
.grid.nav-collapsed.nav-peek::after{content:'';position:absolute;left:var(--rail);top:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:29;pointer-events:none;transition:opacity .18s ease}
.nav-hot-zone{display:none}
.grid.nav-collapsed .nav-hot-zone{display:block;position:absolute;left:0;top:0;bottom:0;width:18px;z-index:25}
}
.pane{min-width:0;min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--line)}
.pane:last-child{border-right:none}
.pane-head{padding:10px 16px 6px;flex-shrink:0}
.pane-head h2{font-size:11.5px;color:var(--ink-faint);font-weight:600}
.pane-body{flex:1;overflow-y:auto;min-height:0}
.bots{background:var(--surface)}
.bot-row{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;border-left:3px solid transparent}
.bot-row.active{background:var(--accent-soft);border-left-color:var(--accent)}
.bot-dot{width:8px;height:8px;border-radius:50%;background:var(--good);flex-shrink:0;box-shadow:0 0 0 3px var(--good-soft)}
.bot-info{min-width:0}
.bot-name{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bot-sub{font-size:11.5px;color:var(--ink-dim)}
.bot-row.placeholder{cursor:default;opacity:.55}
.bot-row.placeholder .bot-dot{background:var(--ink-faint);box-shadow:none}
.bot-row.placeholder .bot-name{border:1px dashed var(--line);border-radius:var(--r-sm);padding:2px 8px;font-weight:600;color:var(--ink-faint)}
.add-bot{margin:10px 16px 16px;padding:9px 12px;border:1.5px dashed var(--line);border-radius:var(--r-md);color:var(--ink-faint);font-size:12.5px;font-weight:600;text-align:center}
.unread-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pop);flex-shrink:0}
.unread-badge{margin-left:auto;background:var(--pop);color:var(--pop-ink);font-size:11px;font-weight:800;border-radius:var(--r-lg);min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.conv-search{margin:0 16px 10px;position:relative}
.conv-search input{width:100%;padding:8px 10px 8px 32px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);color:var(--ink);font-size:13px;font-family:inherit}
.conv-search svg{position:absolute;left:9px;top:9px;width:14px;height:14px;color:var(--ink-faint)}
.conv-row{display:flex;flex-direction:column;gap:4px;padding:11px 16px;cursor:pointer;border-bottom:1px solid var(--line-soft)}
.conv-row.active{background:var(--surface-2)}
.conv-row:hover{background:var(--surface-2)}
.conv-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.conv-name{font-weight:600;font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-time{font-size:11px;color:var(--ink-faint);font-family:'Manrope',system-ui,sans-serif;flex-shrink:0;white-space:nowrap}
.conv-preview{font-size:12.5px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-tags{display:flex;gap:6px;margin-top:2px}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:var(--r-lg);line-height:1.5}
.chip-good{background:var(--good-soft);color:var(--good)}
.chip-warn{background:var(--warn-soft);color:var(--warn)}
.chip-danger{background:var(--danger-soft);color:var(--danger)}
.chip-neutral{background:var(--surface-3);color:var(--ink-dim)}
.chat{background:var(--surface-2)}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;background:var(--surface);border-bottom:1px solid var(--line);flex-shrink:0}
.chat-head-info{display:flex;align-items:center;gap:10px;min-width:0}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent-soft-ink,var(--accent));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0}
.chat-head-name{font-weight:700;font-size:14.5px}
.chat-head-sub{font-size:12px;color:var(--ink-dim);font-family:'Manrope',system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-details{display:none;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:7px 11px;font-size:12.5px;font-weight:700;color:var(--ink);cursor:pointer}
.messages{flex:1;overflow-y:auto;padding:12px 20px;display:flex;flex-direction:column;gap:0}
.msg-row{display:flex}
.msg-row.out{justify-content:flex-end}
.bubble{max-width:72%;padding:6px 11px;border-radius:18px 18px 18px 5px;background:color-mix(in srgb, var(--bubble-in) 55%, transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);color:var(--bubble-in-ink);font-size:13.5px;line-height:1.45;box-shadow:var(--shadow)}
.bubble.bot{background:var(--accent-soft);border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);color:var(--ink);border-radius:18px 18px 5px 18px}
.bubble.bot .mtime{color:color-mix(in srgb, var(--ink) 75%, transparent)}
.bubble.humano{background:color-mix(in srgb, var(--pop) 14%, transparent);border:1px solid color-mix(in srgb, var(--pop) 30%, transparent);color:var(--ink);border-radius:18px 18px 5px 18px}
.bubble.humano .mtime{color:color-mix(in srgb, var(--ink) 75%, transparent)}
.bubble.placeholder{opacity:.6;font-style:italic}
.bubble .mtime{display:block;margin-top:2px;font-size:10.5px;color:var(--ink-faint);font-family:'Manrope',system-ui,sans-serif}
.bubble.audio{display:flex;align-items:flex-start;gap:8px}
.bubble.audio svg{flex-shrink:0;margin-top:2px;color:var(--ink-dim)}
.bubble.bot.placeholder{background:transparent;border:1.5px dashed var(--accent);color:var(--accent-soft-ink,var(--accent));font-style:italic}
.bubble.bot.placeholder .mtime{color:var(--accent-soft-ink,var(--accent))}
.sys-note{align-self:center;max-width:82%;text-align:center;font-size:11.5px;color:var(--accent-soft-ink,var(--accent));background:var(--accent-soft);border-radius:var(--r-lg);padding:6px 14px;font-weight:600}
.sys-block{display:flex;align-items:center;gap:12px;margin:5px 0;align-self:stretch}
.sys-block .line{flex:1;height:1px;background:var(--line)}
.sys-block .sys-block-body{text-align:center;flex-shrink:0}
.sys-block .sys-block-title{font-size:10.5px;color:var(--ink-faint);font-weight:700}
.sys-block .sys-block-text{font-size:12.5px;color:var(--ink-dim);font-weight:600;margin-top:2px}
.msg-sender{font-size:10px;color:var(--ink-faint);font-weight:700;margin:3px 3px 1px;align-self:flex-end}
.msg-row.out{margin-bottom:1px}
.msg-row.out .msg-sender{align-self:flex-end}
.composer-status{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 20px;flex-shrink:0;background:var(--surface-2);border-top:1px solid var(--line-soft)}
.composer-status .estado-txt{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink-dim)}
.composer-status .estado-txt i{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block}
.composer-status button{border:1.5px solid var(--accent);background:var(--accent-soft);color:var(--accent-soft-ink,var(--accent));padding:7px 16px;border-radius:var(--r-sm);font-size:12.5px;font-weight:800;cursor:pointer;font-family:inherit}
.composer-status button:hover{background:var(--accent);color:var(--accent-ink)}
.composer{display:flex;gap:8px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);flex-shrink:0}
.composer textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:var(--r-md);padding:9px 12px;font-family:inherit;font-size:13.5px;line-height:1.3;background:var(--surface-2);color:var(--ink);min-height:38px;max-height:90px;overflow-y:auto}
.composer button{border:none;background:var(--accent);color:var(--accent-ink);border-radius:var(--r-md);padding:0 18px;font-weight:700;font-size:13px;cursor:pointer;box-shadow:var(--glow-accent);transition:transform .12s ease,box-shadow .12s ease}
.composer button:hover:not(:disabled){transform:translateY(-1px)}
.composer button:disabled{opacity:.5;cursor:wait}
.details{background:var(--surface)}
.detail-section{padding:14px 16px;margin:0;border-top:1px solid var(--line-soft)}
.detail-section:first-child{border-top:none}
.detail-label{font-size:10.5px;color:var(--ink-faint);font-weight:600;margin-bottom:10px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:13px}
.kv span:first-child{color:var(--ink-dim);flex-shrink:0}
.kv span:last-child{font-weight:500;text-align:right;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv .mono{font-size:12.5px}
.status-banner{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-md)}
.status-banner.good{background:var(--good-soft);color:var(--good)}
.status-banner.warn{background:var(--warn-soft);color:var(--warn)}
.status-banner.danger{background:var(--danger-soft);color:var(--danger)}
.status-banner strong{font-size:13.5px}
.status-banner small{display:block;font-size:11px;font-weight:500;opacity:.85}
.resumen-text{font-size:12.5px;line-height:1.55;color:var(--ink-dim)}
.temas-list{margin:0;padding-left:18px;font-size:12px;line-height:1.6;color:var(--ink-dim)}
.temas-list li{margin-bottom:4px}
.ia-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ia-toggle-copy{min-width:0}
.ia-toggle-copy strong{display:block;font-size:13px}
.ia-toggle-copy small{display:block;font-size:11.5px;color:var(--ink-dim);margin-top:2px}
.switch{position:relative;width:42px;height:24px;flex-shrink:0;border:none;border-radius:var(--r-lg);background:var(--line);cursor:pointer;padding:0;transition:background .15s ease}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.18);transition:transform .15s ease}
.switch.on{background:var(--accent);box-shadow:var(--glow-accent)}
.switch.on::after{transform:translateX(18px)}
.switch:disabled{opacity:.5;cursor:wait}
.handoff-banner{display:flex;align-items:center;gap:8px;background:var(--warn-soft);color:var(--warn);border-radius:var(--r-md);padding:9px 12px;font-size:12px;font-weight:600;margin-top:10px}
.nav-footer-status{display:flex;align-items:center;gap:8px;margin:4px 16px 10px;padding:9px 12px;border-radius:var(--r-md);background:var(--surface-2);font-size:11.5px;font-weight:600;color:var(--ink-dim)}
.nav-footer-status .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.nav-footer-status .dot.ok{background:var(--good);box-shadow:var(--glow-good)}
.nav-footer-status .dot.bad{background:var(--danger)}
.health-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12.5px}
.health-row .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.health-row .dot.ok{background:var(--good)}
.health-row .dot.bad{background:var(--danger)}
.health-row span:last-child{margin-left:auto;color:var(--ink-dim);font-family:'Manrope',system-ui,sans-serif;font-size:11.5px}
.loading-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--ink-dim);font-size:13px;flex-direction:column;gap:14px;z-index:50}
.loading-screen.hidden{display:none}
.radar{position:relative;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line);overflow:hidden}
.radar::before{content:'';position:absolute;inset:11px;border-radius:50%;border:1.5px solid var(--line);z-index:1}
.radar::after{content:'';position:absolute;inset:0;background:conic-gradient(from 0deg, var(--accent) 0deg, transparent 75deg, transparent 360deg);animation:sweep 1.6s linear infinite;opacity:.85}
.radar i{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--accent);z-index:2}
@keyframes sweep{to{transform:rotate(360deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
.error-banner{margin:12px 16px 0;padding:10px 14px;border-radius:var(--r-md);background:var(--danger-soft);color:var(--danger);font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px}
.error-banner[hidden]{display:none}
.mobile-nav{display:none}
.mobile-nav-btn{display:none}
.nav-backdrop{display:none}
@media (max-width: 900px){
.kv span:last-child{white-space:normal;overflow:visible;text-overflow:clip}
.grid{display:block;overflow-y:auto;height:100%;position:static}
.pane{border-right:none;border-bottom:1px solid var(--line)}
.pane[data-pane="bots"],.pane[data-pane="list"],.pane[data-pane="chat"],.pane[data-pane="details"]{display:none;height:100%}
body[data-view="bots"] .pane[data-pane="bots"]{display:flex}
body[data-view="list"] .pane[data-pane="list"]{display:flex}
body[data-view="chat"] .pane[data-pane="chat"]{display:flex}
body[data-view="details"] .pane[data-pane="details"]{display:flex}
.btn-details{display:inline-flex}
.stats{display:none}
.back-btn{display:inline-flex!important;padding:8px 0}
.bot-row,.conv-row{padding-top:13px;padding-bottom:13px}
.switch{width:48px;height:28px}
.switch::after{width:22px;height:22px}
.switch.on::after{transform:translateX(20px)}
.topbar{padding:12px 14px}
.brand{font-size:15.5px}
.nav-toggle-btn{display:none!important}
.nav-hot-zone{display:none!important}
.mobile-nav-btn{display:inline-flex}
.navrail{display:flex!important;flex-direction:column;background:var(--surface);border-right:1px solid var(--line);padding:14px 0;
position:fixed;top:0;left:0;bottom:0;width:80vw;max-width:290px;z-index:110;
transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 2px 12px -4px rgba(0,0,0,.3);overflow-y:auto}
.navrail.mobile-open{transform:translateX(0)}
.navrail .nav-label{font-size:10px;color:var(--ink-faint);font-weight:700;padding:14px 16px 4px}
.navrail a, .navrail .nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;margin:2px 8px;border-radius:var(--r-md);font-size:13.5px;font-weight:600;color:var(--ink-dim);background:var(--surface-2);text-decoration:none}
.navrail .nav-item.active{color:var(--accent-ink);background:var(--accent)}
.navrail .nav-item.soon{opacity:.45}
.navrail svg{width:16px;height:16px;flex-shrink:0}
.nav-backdrop.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100}
.agent-card{flex-wrap:wrap}
.admin-input{width:80px}
.cards-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.cancha-row-info{flex:1 1 100%}
.cancha-row-actions{flex:1 1 100%;justify-content:space-between}
.contacto-col-actividad,.contacto-col-reserva{display:none}
}
.contactos-tabs{display:flex;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line-soft);padding-top:10px}
.contactos-tabs button{border:none;background:none;padding:0 0 4px;font-size:12.5px;font-weight:700;color:var(--ink-faint);cursor:pointer;font-family:inherit;border-bottom:2px solid transparent}
.contactos-tabs button.active{color:var(--ink);border-bottom-color:var(--accent)}
.contactos-tabs button span{color:inherit;opacity:.7;font-weight:500}
.contactos-head-row{display:flex;align-items:center;gap:12px;padding:0 32px 6px;margin:4px 20px 0;font-size:10.5px;color:var(--ink-faint);font-weight:700;border-bottom:1px solid var(--line-soft)}
.contactos-head-row span:first-child{flex:1}
.contactos-head-row .contacto-col-actividad{width:110px;flex-shrink:0}
.contactos-head-row .contacto-col-reserva{width:160px;flex-shrink:0}
.contactos-head-row span:last-child{width:120px;flex-shrink:0}
.back-btn{display:none;align-items:center;gap:6px;border:none;background:none;color:var(--ink-dim);font-size:12.5px;font-weight:700;cursor:pointer;padding:2px 0 8px}
.pane[data-pane="home"],.pane[data-pane="agentes"],.pane[data-pane="contactos"],.pane[data-pane="soon"],.pane[data-pane="campanas"],.pane[data-pane="panelAdmin"],.pane[data-pane="ayuda"],.pane[data-pane="novedades"],.pane[data-pane="panorama"],.pane[data-pane="datos"],.pane[data-pane="cocina"],.pane[data-pane="reparto"]{display:none;grid-column:2/-1;border-right:none}
body:is([data-view="home"],[data-view="agentes"],[data-view="contactos"],[data-view="soon"],[data-view="campanas"],[data-view="panelAdmin"],[data-view="ayuda"],[data-view="novedades"],[data-view="panorama"],[data-view="datos"],[data-view="cocina"],[data-view="reparto"]) .pane:is([data-pane="bots"],[data-pane="list"],[data-pane="chat"],[data-pane="details"]){display:none}
body[data-view="home"] .pane[data-pane="home"]{display:flex}
body[data-view="agentes"] .pane[data-pane="agentes"]{display:flex}
body[data-view="contactos"] .pane[data-pane="contactos"]{display:flex}
body[data-view="soon"] .pane[data-pane="soon"]{display:flex}
body[data-view="campanas"] .pane[data-pane="campanas"]{display:flex}
body[data-view="panelAdmin"] .pane[data-pane="panelAdmin"]{display:flex}
body[data-view="ayuda"] .pane[data-pane="ayuda"]{display:flex}
body[data-view="novedades"] .pane[data-pane="novedades"]{display:flex}
body[data-view="panorama"] .pane[data-pane="panorama"]{display:flex}
body[data-view="datos"] .pane[data-pane="datos"]{display:flex}
body[data-view="cocina"] .pane[data-pane="cocina"]{display:flex}
body[data-view="reparto"] .pane[data-pane="reparto"]{display:flex}
/* ===== Reparto, adentro de la app (usa los colores de cada negocio) ===== */
.rp{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px 22px;padding:6px 28px 28px;align-items:start;max-width:1120px;margin-inline:auto}
.rp > .rp-error,.rp > .rp-resumen,.rp > .rp-barra{grid-column:1 / -1}
.rp-col{display:grid;gap:18px;min-width:0}
.rp h2{margin:0 0 10px;display:flex;justify-content:space-between;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.rp h2 span{color:var(--ink-faint)}
.rp-error{margin:0;padding:10px 12px;border-radius:var(--r-md);background:var(--danger-soft);color:var(--danger);font-size:13.5px;font-weight:600}
.rp-resumen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg)}
.rp-resumen div{display:grid;gap:3px;min-width:0;padding:16px 22px}
.rp-resumen div + div{border-left:1px solid var(--line-soft)}
.rp-resumen b{font-size:24px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-resumen span{font-size:12px;color:var(--ink-dim);line-height:1.3}
.rp-resumen .cobrar b{color:var(--accent)}
.rp-lista{display:grid;gap:10px}
.rp-ped{display:grid;gap:8px;padding:14px 16px;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);font:inherit;color:inherit;text-align:left;width:100%}
.rp-cab{display:flex;align-items:baseline;gap:10px}
.rp-ped .num{font-size:17px;font-weight:800;color:var(--accent)}
.rp-ped .nombre{font-weight:700}
.rp-ped .hora{margin-left:auto;font-size:12.5px;color:var(--ink-dim);white-space:nowrap}
.rp-ped .dir{font-size:16px;font-weight:800;line-height:1.3}
.rp-ped .items{margin:0;font-size:13px;color:var(--ink-dim)}
.rp-ped .orden{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:800}
.rp-fila{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rp-chip{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-dim);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.rp-chip.listo{color:var(--good);border-color:var(--good)}
.rp-cobro{justify-self:start;font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:var(--r-md)}
.rp-cobro.efectivo{background:var(--accent-soft);color:var(--accent-soft-ink)}
.rp-cobro.pagado{background:var(--good-soft);color:var(--good)}
.rp-cobro.revisar{background:var(--danger-soft);color:var(--danger)}
.rp-ped.elegir{position:relative;padding-left:52px;cursor:pointer;transition:border-color .15s,background .15s}
.rp-ped.elegir:hover{border-color:var(--line)}
.rp-ped.elegir::before{content:"";position:absolute;left:16px;top:16px;width:22px;height:22px;border-radius:7px;border:2px solid var(--ink-faint)}
.rp-ped.elegir[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.rp-ped.elegir[aria-pressed="true"]::before{background:var(--accent);border-color:var(--accent)}
.rp-ped.elegir[aria-pressed="true"]::after{content:"";position:absolute;left:23px;top:20px;width:6px;height:11px;border:solid var(--accent-ink);border-width:0 3px 3px 0;transform:rotate(45deg)}
.rp-acciones{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:4px}
.rp-acciones a,.rp-acciones button{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:inherit;font-weight:700;font-size:13.5px;text-decoration:none;cursor:pointer}
.rp-acciones .llegue.hecho{color:var(--good);border-color:var(--good)}
.rp-acciones .entregado{grid-column:1 / -1;min-height:50px;border:0;background:var(--good);color:#0E1F15;font-weight:800;letter-spacing:.02em}
.rp-vacio{display:grid;justify-items:center;gap:6px;margin:0;padding:44px 20px;text-align:center;border:1px dashed var(--line);border-radius:var(--r-lg);color:var(--ink-dim);font-size:14px;line-height:1.5;background:var(--surface)}
.rp-vacio svg{width:72px;height:52px;margin-bottom:6px;color:var(--accent);opacity:.9}
.rp-vacio img{width:72px;height:72px;margin-bottom:6px}
.rp-vacio b{color:var(--ink);font-size:15px}
/* Estado del GPS y mapa */
.rp-vivo{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
.rp-vivo-cab{display:flex;align-items:center;gap:10px;padding:12px 14px;font-weight:800;font-size:13.5px}
.rp-vivo-cab i{width:10px;height:10px;border-radius:50%;background:var(--ink-faint);flex:none}
.rp-vivo.on .rp-vivo-cab{color:var(--good)} .rp-vivo.on .rp-vivo-cab i{background:var(--good);animation:rpLate 1.8s infinite}
.rp-vivo.mal .rp-vivo-cab{color:var(--danger)} .rp-vivo.mal .rp-vivo-cab i{background:var(--danger)}
.rp-vivo-cab small{margin-left:auto;font-weight:500;color:var(--ink-faint);font-size:12px}
@keyframes rpLate{0%{box-shadow:0 0 0 0 rgba(95,196,142,.6)}100%{box-shadow:0 0 0 10px rgba(95,196,142,0)}}
.rp-mapa{position:relative;height:250px;overflow:hidden;background:var(--surface-2)}
.rp-mapa .capa{position:absolute;inset:0;filter:invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.6)}
.rp-mapa img{position:absolute;width:256px;height:256px;max-width:none}
.rp-osm{position:absolute;right:6px;bottom:4px;font-size:10px;color:#ccc;background:rgba(0,0,0,.5);padding:1px 5px;border-radius:4px}
.rp-pin{position:absolute;width:28px;height:28px;margin:-28px 0 0 -14px;display:grid;place-items:center;transition:left .6s,top .6s}
.rp-pin::before{content:"";position:absolute;inset:0;background:var(--accent);border:2px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 3px 8px rgba(0,0,0,.45)}
.rp-pin b{position:relative;margin-top:-2px;font-size:12px;color:var(--accent-ink)}
.rp-punto{position:absolute;z-index:2;width:40px;height:40px;margin:-40px 0 0 -20px;transition:left .6s,top .6s}
.rp-punto .salto{display:block;width:100%;height:100%;filter:drop-shadow(0 5px 5px rgba(0,0,0,.55))}
.rp-mapa .rp-punto img{position:static;width:100%;height:100%;max-width:none;display:block;transition:transform .35s}
.rp-punto.oeste img{transform:scaleX(-1)}
.rp-punto::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#D62828;border:2px solid #fff;animation:rpLatido 1.8s ease-out infinite}
.rp-punto.salta .salto{animation:rpSalto .6s ease-out}
@keyframes rpSalto{0%,100%{transform:translateY(0)}38%{transform:translateY(-10px)}72%{transform:translateY(0)}86%{transform:translateY(-3px)}}
@keyframes rpLatido{0%{box-shadow:0 0 0 0 rgba(214,40,40,.65)}100%{box-shadow:0 0 0 18px rgba(214,40,40,0)}}
@media (prefers-reduced-motion:reduce){.rp-punto::after,.rp-punto.salta .salto{animation:none}}
.rp-ruta{display:flex;align-items:center;justify-content:center;min-height:46px;border-top:1px solid var(--line-soft);color:var(--ink);font-weight:700;font-size:13.5px;text-decoration:none}
.rp-ruta:hover{background:var(--surface-2)}
.rp-hechos{padding:4px 16px;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg)}
.rp-hechos summary{cursor:pointer;font-weight:800;padding:12px 0;color:var(--ink-dim)}
.rp-hechos .rp-lista{padding-bottom:12px;gap:0}
.rp-hecho{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line-soft);font-size:13px}
.rp-hecho span:last-child{color:var(--ink-dim);white-space:nowrap}
/* Tu celu como GPS: accesos directos a la app Traccar Client */
.rp-gps{padding:18px;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);display:grid;gap:14px;scroll-margin-top:16px}
.rp-gps h2{margin:0}
.rp-gps-txt{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-dim)}
.rp-gps-txt b{color:var(--ink)}
.rp-tiendas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rp-btn{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:8px 12px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:inherit;font-weight:700;font-size:13px;text-decoration:none;cursor:pointer}
.rp-btn:hover{border-color:var(--ink-faint)}
.rp-btn.peligro{background:transparent;border-color:var(--danger);color:var(--danger)}
.rp-btn.peligro:hover{background:var(--danger-soft);border-color:var(--danger)}
.rp-btn.principal{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.rp-datos{display:grid;gap:8px}
.rp-dato{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;align-items:center;padding:10px 12px;background:var(--surface-2);border-radius:var(--r-md)}
.rp-dato span{grid-column:1 / -1;font-size:12px;color:var(--ink-faint)}
.rp-dato code{font-size:12.5px;word-break:break-all;color:var(--ink)}
.rp-dato button{font:inherit;font-size:12.5px;font-weight:700;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.rp-pasos{margin:0;padding-left:20px;display:grid;gap:8px;font-size:13.5px;line-height:1.5;color:var(--ink-dim)}
.rp-pasos b{color:var(--ink)}
.rp-prueba{margin:0;font-size:13px;line-height:1.5;color:var(--ink-dim)}
.rp-prueba.ok{color:var(--good);font-weight:700} .rp-prueba.mal{color:var(--danger);font-weight:600}
/* Botón de salir: pegado abajo mientras se desliza la página */
.rp-barra{position:sticky;bottom:0;z-index:6;padding:14px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,var(--bg) 38%)}
.rp-barra button{display:block;width:100%;max-width:560px;margin:0 auto;padding:17px;border:0;border-radius:var(--r-lg);background:var(--accent);color:var(--accent-ink);font:inherit;font-size:15px;font-weight:800;letter-spacing:.02em;cursor:pointer}
.rp-barra button:disabled{background:var(--surface-2);color:var(--ink-faint);cursor:default}
.rp button:focus-visible,.rp a:focus-visible,.rp summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:900px){
.rp{grid-template-columns:minmax(0,1fr);padding:6px 16px 20px}
.rp-resumen{gap:8px}
.rp-resumen div{padding:11px 12px}
.rp-resumen b{font-size:19px}
}
@media (prefers-reduced-motion:reduce){.rp-vivo.on .rp-vivo-cab i{animation:none}}
/* Cocina: comandas grandes, para leer de lejos en la tablet de la cocina. */
/* Barra de arriba: título, reloj, contadores y herramientas en UNA fila. */
.cocina-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 20px 10px}
.cocina-top h1{margin:0}
.cocina-reloj{font-size:28px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cocina-cuentas{display:flex;gap:8px;flex-wrap:wrap}
.cocina-tools{margin-left:auto;display:flex;gap:8px}
/* Pestañas: Ahora / Más tarde / Listos / ¿Se acabó algo? (una vista a la vez). */
/* Pestañas como el menú de la web falince: solo texto, una línea dorada bajo
la activa y la cantidad chiquita en dorado. Nada de "pastillas". */
.cocina-tabs{display:flex;gap:30px;flex-wrap:wrap;margin:0 20px 18px;border-bottom:1px solid var(--line-soft)}
.cocina-tab{position:relative;border:0;background:none;color:var(--ink-faint);padding:10px 0 13px;font:inherit;font-size:15px;font-weight:600;letter-spacing:.01em;cursor:pointer;display:flex;gap:8px;align-items:baseline;transition:color .15s ease}
.cocina-tab:hover{color:var(--ink)}
/* La cantidad va en Manrope: en Archivo ancho el "0" parece una "o". */
.cocina-tab b{font-size:12.5px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.cocina-tab.activa{color:var(--ink)}
.cocina-tab.activa::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}
.cocina-tab:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
.cocina-tab .alerta{align-self:center;display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:var(--danger);color:#1A0E0E;font-size:10.5px;font-weight:800;line-height:1;margin-left:-2px}
.cocina-cuerpo{padding:0 20px 24px}
/* Tickets: angostos, en fila por orden de salida, con franja de estado arriba. */
/* Tickets minimalistas (pedido 1/10): ancho fijo, sin bloques de color, una
línea fina entre la cabecera y los productos, y el botón con borde dorado. */
.cocina-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,260px));gap:12px;align-items:stretch}
.comanda{background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;display:flex;flex-direction:column;overflow:hidden}
/* Cabecera: número y nombre a la izquierda; hora de salida y cuánto falta a
la derecha. Ámbar si faltan 5 min o menos, rojo si se pasó (solo el texto). */
.comanda-cab{margin:0 14px;padding:13px 0 11px;border-bottom:1px solid var(--line-soft);display:flex;align-items:flex-start;gap:10px}
.comanda-cab .izq,.comanda-cab .der{display:flex;flex-direction:column;gap:3px;min-width:0}
.comanda-cab .der{margin-left:auto;align-items:flex-end;flex-shrink:0}
.comanda-num{font-size:19px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1}
.comanda-cab .n{font-size:13px;font-weight:600;color:var(--ink-dim);text-transform:capitalize;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comanda-reloj{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.comanda-cab .s{font-size:12px;font-weight:600;color:var(--ink-faint);white-space:nowrap}
.comanda.pronto .comanda-reloj,.comanda.pronto .comanda-cab .s{color:var(--warn)}
.comanda.atrasada{border-color:color-mix(in srgb,var(--danger) 55%,transparent)}
.comanda.atrasada .comanda-reloj,.comanda.atrasada .comanda-cab .s{color:var(--danger)}
.comanda-cuerpo{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px;flex:1}
.comanda-items{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.comanda-items li{display:flex;gap:10px;font-size:15.5px;font-weight:600;line-height:1.3}
.comanda-items li b{min-width:18px;text-align:right;color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.comanda-items li small.gustos{display:block;margin-top:2px;font-size:13px;font-weight:500;color:var(--ink-dim)}
.comanda-nota{border-left:2px solid var(--accent);padding:2px 0 2px 10px;font-size:13.5px;font-weight:500;line-height:1.4;color:var(--ink-dim)}
.comanda .admin-save-btn{margin-top:auto;width:100%;padding:10px 14px;font-size:14px;font-weight:600;background:transparent;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:none}
.comanda .admin-save-btn:hover{background:var(--accent);color:var(--accent-ink)}
/* Más tarde: tarjetas en grilla que ocupan todo el ancho. */
.cocina-tarde{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:10px}
.cocina-sigue{margin-top:22px;display:grid;gap:10px;justify-items:start}
.cocina-sigue .cocina-tarde{width:100%}
.cocina-sigue h4{margin:0;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);display:flex;align-items:center;gap:8px}
.comanda-botones{display:flex;gap:8px;margin-top:10px}
.comanda-botones .admin-save-btn{flex:1;margin:0}
.comanda-listo-ya,.comanda-deshacer{border:1px solid var(--line);background:transparent;color:var(--ink-dim);border-radius:10px;padding:0 14px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.comanda-listo-ya:hover,.comanda-deshacer:hover{border-color:var(--accent);color:var(--ink)}
.cocina-listos{margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.cocina-listos h3{margin:0 0 4px;font-size:15px}
.cocina-listos p{margin:0 0 12px;font-size:13px;line-height:1.45;color:var(--ink-dim)}
.cocina-listo-fila{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.cocina-listo-fila .n{font-weight:700;white-space:nowrap}
.cocina-listo-fila .r{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--ink-dim)}
.cocina-listo-fila .comanda-deshacer{height:40px}
.comanda.empezada{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.comanda.empezada .comanda-cab .s{color:var(--accent);font-weight:700}
.stk-ayuda{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:var(--ink-dim);max-width:70ch}
.stk-lista{display:grid;gap:8px}
.stk-fila{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.stk-fila.poco{border-color:#C9A24A}
.stk-fila.no{border-color:var(--danger)}
.stk-nom{display:grid;gap:2px;min-width:0}
.stk-nom b{font-size:15px}
.stk-nom small{font-size:12.5px;color:var(--ink-dim)}
.stk-nom strong{color:var(--ink)}
.stk-fila.no .stk-nom strong{color:var(--danger)}
.stk-ctrl{display:flex;align-items:center;gap:6px}
.stk-ctrl button{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.stk-ctrl button:hover{border-color:var(--accent)}
.stk-ctrl input{width:64px;height:40px;text-align:center;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:inherit;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.stk-agot{height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--ink-dim);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.stk-agot:hover{border-color:var(--danger);color:var(--danger)}
.stk-agot.on{background:var(--danger);border-color:var(--danger);color:#1A0E0E}
@media (max-width:640px){.stk-fila{grid-template-columns:minmax(0,1fr) auto}.stk-agot{grid-column:1/-1;width:100%}}
.cocina-sigue h4 b{font-size:12px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:1px 8px}
.tarde-item{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:14px 16px;display:flex;gap:14px;align-items:flex-start}
.tarde-item .t{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.tarde-item .q{flex:1;min-width:0;font-size:16px;font-weight:700;text-transform:capitalize}
.tarde-item .q small{display:block;color:var(--ink-dim);font-size:14px;font-weight:600;text-transform:none;margin-top:4px;line-height:1.35}
/* ¿Se acabó algo?: una sección por categoría, con tarjetas grandes para tocar. */
/* ¿Se acabó algo? compacto: filtro por categoría y fichas de una línea. */
.agot-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--line-soft)}
.agot-estado{font-size:12.5px;color:var(--ink-faint);padding-bottom:13px}
.agot-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:start}
.agot-cats{position:relative;display:flex;flex-direction:column;gap:2px;padding:2px 0}
.agot-cats::before{content:"";position:absolute;left:4px;top:16px;bottom:16px;width:1px;background:linear-gradient(180deg,transparent,var(--linea-color,var(--line)) 10%,var(--linea-color,var(--line)) 90%,transparent)}
.agot-cats button{all:unset;cursor:pointer;position:relative;display:flex;flex-direction:column;gap:2px;padding:8px 0 8px 24px;color:var(--ink-faint);transition:color .2s}
.agot-cats button span{font-family:var(--titulos);font-stretch:112%;font-size:15.5px;font-weight:650;letter-spacing:-.01em}
.agot-cats button small{font-size:11.5px;font-weight:500;color:var(--ink-faint)}
.agot-cats button small b{color:var(--danger);font-weight:700}
.agot-cats button::before{content:"";position:absolute;left:0;top:15px;width:7px;height:7px;border:1px solid var(--linea-color,var(--line));background:var(--bg);transform:rotate(45deg);transition:background .2s,border-color .2s}
.agot-cats button:hover{color:var(--ink-dim)}
.agot-cats button.activo{color:var(--ink)}
.agot-cats button.activo::before{background:var(--accent);border-color:var(--accent)}
.agot-cats button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.agot-main .agot-estado{margin:0 0 14px;padding:0;font-size:13.5px}
@media (max-width:700px){
.agot-layout{grid-template-columns:minmax(0,1fr);gap:16px}
.agot-cats{flex-direction:row;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 0 2px}
.agot-cats::-webkit-scrollbar{display:none}
.agot-cats::before,.agot-cats button::before{display:none}
.agot-cats button{flex-shrink:0;flex-direction:row;align-items:baseline;gap:6px;padding:7px 13px;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
.agot-cats button span{font-size:13.5px}
.agot-cats button.activo{border-color:var(--accent);color:var(--accent)}
.agot-cats button small{display:none}
.agot-cats button small:has(b){display:inline}
}
.agot-estado.hay-agotados{color:var(--danger);font-weight:600}
.agot-fichas{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.agot-ficha{display:flex;align-items:center;gap:10px;min-width:0;padding:11px 14px;border-radius:10px;border:1px solid var(--line-soft);background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.agot-ficha:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line-soft))}
.agot-ficha i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--good)}
.agot-ficha span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agot-ficha em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--danger)}
.agot-ficha.no{border-color:color-mix(in srgb,var(--danger) 45%,transparent);background:var(--danger-soft)}
.agot-ficha.no i{background:var(--danger)}
.agot-ficha.no span{text-decoration:line-through;color:var(--ink-dim)}
.agot-ficha:disabled{opacity:.6;cursor:wait}
.agot-ficha:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.agot-resumen{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--danger-soft);color:var(--danger);border-radius:var(--r-lg);padding:12px 16px;font-weight:700;font-size:15px;margin-bottom:18px}
.agot-resumen.todo-ok{background:var(--good-soft);color:var(--good)}
.agot-seccion{margin-bottom:20px}
.agot-seccion h3{margin:0 0 10px;font-size:15px;font-weight:800;display:flex;gap:8px;align-items:baseline}
.agot-seccion h3 span{font-size:13px;font-weight:600;color:var(--ink-dim)}
.agot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.agot-tile{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:14px 16px;text-align:left;font:inherit;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;gap:6px;min-height:78px}
.agot-tile:hover{border-color:var(--accent)}
.agot-tile b{font-size:16px;font-weight:700;line-height:1.25}
.agot-tile span{font-size:13px;font-weight:700;color:var(--good)}
.agot-tile.no{background:var(--danger-soft);border-color:var(--danger)}
.agot-tile.no b{text-decoration:line-through;color:var(--danger)}
.agot-tile.no span{color:var(--danger)}
.agot-tile:disabled{opacity:.6;cursor:wait}
.cocina-vacio{padding:48px 20px;text-align:center;color:var(--ink-dim);background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-lg)}
.home-greeting{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px 4px;flex-wrap:wrap}
.home-eyebrow{font-size:11px;color:var(--ink-faint);font-weight:700;}
.home-greeting-title{font-size:26px;font-weight:800;letter-spacing:-.01em;margin-top:2px}
.home-greeting-date{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-faint);font-weight:600;margin-top:4px}
.home-greeting-date svg{width:13px;height:13px;flex-shrink:0}
.home-ia-toggle{display:flex;align-items:center;gap:10px}
.home-ia-toggle span{font-size:13px;font-weight:800}
.switch.status-switch.on{background:var(--good);box-shadow:var(--glow-good)}
.expandable{cursor:pointer}
.expandable.open .expand-chevron{transform:rotate(180deg)}
.expand-detail{max-height:0;overflow:hidden;transition:max-height .2s ease}
.expandable.open .expand-detail{max-height:280px;margin-top:10px}
.expand-detail .kv{padding:4px 0;font-size:12.5px}
/* Panel Admin (pedido 1/10, "distribuila mejor"): pestañas, tarjetas de a dos
para los datos del negocio y el menú en grilla de tarjetas chicas. */
.admin-tarjetas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 20px;align-items:start}
@media (max-width:980px){.admin-tarjetas{grid-template-columns:minmax(0,1fr)}}
/* Si queda una tarjeta sola en la última fila, ocupa todo el ancho (sin hueco al lado). */
.admin-tarjetas > .admin-tarjeta:last-child:nth-child(odd){grid-column:1/-1}
.admin-tarjetas > .admin-tarjeta:last-child:nth-child(odd) .admin-field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:620px){.admin-tarjetas > .admin-tarjeta:last-child:nth-child(odd) .admin-field-grid{grid-template-columns:minmax(0,1fr)}}
.admin-tarjeta{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:16px 18px 18px}
.admin-tarjeta .admin-group-label{margin-top:0 !important;padding-top:0 !important}
/* Campos de a dos, en pares (abre/cierra, demora retiro/delivery...); los
textos largos van a lo ancho. Las tarjetas de una fila tienen el mismo alto. */
.admin-tarjetas{align-items:stretch !important}
.admin-tarjeta .admin-field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.admin-tarjeta .admin-field.ancho{grid-column:1/-1}
.admin-switch-campo{display:flex;align-items:center;gap:10px;min-height:40px;font-size:13.5px;font-weight:600}
.admin-tarjeta-nota{margin:-4px 0 10px;font-size:12.5px;color:var(--ink-dim);line-height:1.45}
.admin-menu-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 20px 16px}
.admin-menu-disp{font-size:12px;color:var(--ink-faint);padding-bottom:13px}
/* Todas las tarjetas del mismo alto: nombre en una línea y siempre dos de ingredientes. */
.admin-menu-grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin:0 20px 28px;align-items:stretch}
.admin-producto{display:block;width:100%;background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;padding:13px 14px;text-align:left;font:inherit;color:var(--ink);cursor:pointer;transition:border-color .15s ease}
.admin-producto:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line-soft))}
.admin-producto:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.admin-producto-cab{display:flex;gap:12px;align-items:flex-start}
.admin-producto-txt{flex:1;min-width:0}
.admin-producto-txt h3{margin:0;font-size:14.5px;font-weight:650;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-producto-txt p{margin:4px 0 0;font-size:12px;line-height:1.4;min-height:2.8em;color:var(--ink-faint);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Panel del costado para editar un producto. */
.admin-drawer{width:420px}
.admin-drawer .datos-drawer-head h3{margin:0;font-family:var(--titulos);font-stretch:125%;font-size:18px;font-weight:650;letter-spacing:-.01em}
.admin-drawer-resumen{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.admin-drawer-resumen div{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:10px;padding:10px 12px}
.admin-drawer-resumen b{display:block;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.admin-drawer-resumen span{font-size:12px;color:var(--ink-faint)}
.admin-drawer-campos{display:flex;flex-direction:column;gap:12px}
.admin-drawer-par{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.admin-drawer textarea.admin-input{resize:vertical;min-height:72px;font:inherit;line-height:1.45;width:100%}
.admin-drawer-disp{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;padding:4px 0}
.admin-drawer-acciones{display:flex;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line-soft)}
.admin-drawer-acciones .admin-save-btn{flex:1;padding:11px 14px}
.admin-drawer-acciones .admin-danger-btn{background:transparent !important;color:var(--danger) !important;border:1px solid color-mix(in srgb,var(--danger) 55%,transparent) !important;box-shadow:none !important}
.admin-drawer-acciones .admin-danger-btn:hover{background:var(--danger-soft) !important}
.admin-producto-precio{text-align:right;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.admin-producto-precio span{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:4px;font-size:11.5px;font-weight:600;color:var(--ink-faint)}
.admin-producto-precio i{width:6px;height:6px;border-radius:50%;display:inline-block}
.admin-producto.sin-stock .admin-producto-txt h3{color:var(--ink-dim)}
.admin-producto-nuevo{display:flex;flex-direction:column;justify-content:center;gap:4px;border-style:dashed;cursor:pointer;min-height:68px}
.admin-producto-nuevo b{color:var(--accent);font-size:14px}
.admin-producto-nuevo span{font-size:12px;color:var(--ink-faint)}
.info-card.expandable{display:flex;flex-direction:column;gap:10px}
.info-card:hover{border-color:var(--line)}
.info-card-top{display:flex;align-items:center;gap:9px}
.info-card-icon{width:32px;height:32px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.info-card-icon svg{width:15px;height:15px}
.info-card-icon.icon-pop{background:color-mix(in srgb, var(--pop) 18%, var(--surface));color:var(--pop)}
.info-card-icon.icon-accent{background:var(--accent-soft);color:var(--accent-soft-ink,var(--accent))}
.info-card-icon.icon-danger{background:var(--danger-soft);color:var(--danger)}
.info-card-body{flex:1;min-width:0}
.info-card-body b{display:block;font-family:'Manrope',system-ui,sans-serif;font-size:17px;font-weight:700;line-height:1.1}
.info-card-body span{font-size:12px;color:var(--ink-dim);font-weight:600}
.info-card-body small{display:block;font-size:10.5px;color:var(--ink-faint);font-weight:500;margin-top:1px}
.info-card .expand-chevron{color:var(--ink-faint);flex-shrink:0;transition:transform .15s ease}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;padding:6px 20px 20px}
.info-card{border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:12px 14px}
.info-card b{display:block;font-family:'Manrope',system-ui,sans-serif;font-size:22px;font-weight:700}
.info-card span{font-size:12px;color:var(--ink-dim);font-weight:600}
.ct-resumen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);margin:0 20px 16px}
@media (max-width:700px){ .ct-resumen{margin-inline:0} }
.ct-dato{display:flex;flex-direction:column;gap:6px;padding:18px 22px;min-width:0}
.ct-dato + .ct-dato{border-left:1px solid var(--line-soft)}
.ct-etq{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-dim)}
.ct-etq svg{width:15px;height:15px;color:var(--ink-faint)}
.ct-dato b{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
.ct-dato small{font-size:12px;color:var(--ink-faint)}
.ct-alerta b{color:var(--warn)}
.ct-barra{height:5px;border-radius:999px;background:var(--surface-2);overflow:hidden;max-width:220px}
.ct-barra i{display:block;height:100%;border-radius:inherit;background:var(--accent)}
@media (max-width:700px){
.ct-resumen{grid-template-columns:1fr 1fr}
.ct-dato{padding:14px 14px}
.ct-dato b{font-size:24px}
.ct-dato:first-child{grid-column:1 / -1;border-bottom:1px solid var(--line-soft)}
.ct-dato:nth-child(2){border-left:0}
}
.info-card-warn{background:var(--warn-soft)}
.info-card-warn b,.info-card-warn span{color:var(--warn)}
.info-card-accent{background:var(--accent-soft)}
.info-card-accent b,.info-card-accent span{color:var(--accent-soft-ink,var(--accent))}
.quick-actions{display:flex;gap:8px;padding:12px 20px 4px;flex-wrap:wrap}
.quick-action{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r-lg);padding:7px 14px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.quick-action:hover{border-color:var(--accent);color:var(--accent-soft-ink,var(--accent))}
.quick-action svg{width:14px;height:14px;flex-shrink:0}
.home-columns{display:flex;gap:16px;padding:4px 0 12px;align-items:flex-start}
.home-column{flex:1;min-width:0}
@media (max-width:900px){ .home-columns{flex-direction:column} }
.home-panels{display:flex;gap:12px;padding:2px 20px 4px;flex-wrap:wrap}
.home-panel{flex:1;min-width:230px;border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:14px 16px}
.home-panel-title{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink-dim);margin-bottom:6px;}
.home-panel-title svg{width:13px;height:13px;flex-shrink:0}
.attn-count{background:var(--danger);color:#fff;font-size:10.5px;font-weight:800;border-radius:var(--r-lg);min-width:17px;height:17px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center}
.attn-item{display:flex;align-items:center;gap:10px;padding:9px 10px;margin-bottom:6px;border:1px solid var(--line-soft);border-radius:var(--r-md);cursor:pointer;background:var(--surface)}
.attn-item:last-child{margin-bottom:0}
.attn-item:hover{border-color:var(--accent)}
.attn-item-name{font-size:13px;font-weight:600}
.attn-item-status{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-dim);font-weight:600;margin-top:1px}
.attn-item-status .attn-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.attn-item-sub{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--ink-faint);margin-top:2px}
.attn-item-sub svg{width:11px;height:11px;flex-shrink:0}
.attn-item .expand-chevron{margin-left:auto;color:var(--ink-faint);flex-shrink:0}
.attn-ok{display:flex;align-items:center;gap:8px;padding:6px 0;color:var(--good);font-size:13px;font-weight:700}
.attn-ok svg{width:16px;height:16px;flex-shrink:0}
.rev-bar{height:7px;border-radius:var(--r-lg);background:var(--surface-3);overflow:hidden;margin-top:8px}
.rev-bar-fill{height:100%;background:var(--accent);border-radius:var(--r-lg)}
.home-panel-subtitle{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-faint);font-weight:700;margin-bottom:8px}
.home-panel-subtitle svg{width:12px;height:12px}
.ocup-ring{width:72px;height:72px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.ocup-ring-inner{width:56px;height:56px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-family:'Manrope',system-ui,sans-serif;font-size:17px;font-weight:800}
.empty-card{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:6px 20px 4px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--surface-2)}
.empty-card-icon{width:34px;height:34px;border-radius:var(--r-sm);background:var(--surface-3);color:var(--ink-faint);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.empty-card-icon svg{width:16px;height:16px}
.empty-card strong{display:block;font-size:12.5px}
.empty-card small{display:block;font-size:11px;color:var(--ink-faint);margin-top:1px}
.ver-todas{display:block;text-align:right;padding:8px 20px 4px;font-size:12px;font-weight:700;color:var(--accent);cursor:pointer}
.section-title{margin:18px 20px 4px;font-size:12px;font-weight:700;color:var(--ink-faint)}
/* Cada bloque arranca con la línea del rombo y el título con la letra de la web. */
.section-title{position:relative;padding-top:40px;margin-top:6px !important;font-family:var(--titulos);font-stretch:125%;font-size:15px !important;font-weight:650;color:var(--ink) !important;letter-spacing:-.01em}
.section-title::before{content:"";position:absolute;left:0;right:0;top:8px;height:10px;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='2' y='2' width='6' height='6' transform='rotate(45 5 5)' fill='none' stroke='%23C9A96E' stroke-opacity='.8'/%3E%3C/svg%3E") center / 10px 10px no-repeat,
linear-gradient(90deg, transparent, var(--linea-color) 45%) left center / calc(50% - 9px) 1px no-repeat,
linear-gradient(270deg, transparent, var(--linea-color) 45%) right center / calc(50% - 9px) 1px no-repeat}
/* El primer bloque, pegado al encabezado con foto, ya tiene la línea del encabezado. */
.home-header + .section-title,.home-header + * > .section-title:first-child{padding-top:8px}
.home-header + .section-title::before,.home-header + * > .section-title:first-child::before,.section-title.primero::before{display:none}
.section-title.primero{padding-top:8px}
.pane[data-pane="cocina"] .cocina-top::before{background-position:0 0, center 55%}
.chart-card{margin:6px 20px 6px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:14px 16px 8px}
.chart-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--ink-dim);font-weight:600;margin-bottom:8px}
.chart-head b{font-size:17px;color:var(--ink)}
.chart-modo{display:flex;gap:5px}
.chart-modo button{border:1px solid var(--line);background:var(--surface);color:var(--ink-dim);border-radius:var(--r-lg);padding:3px 10px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit}
.chart-modo button.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.agent-card{display:flex;gap:14px;align-items:flex-start;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:16px;margin:4px 20px 16px}
.agent-card.placeholder{opacity:.6;border-style:dashed}
.agent-icon{width:46px;height:46px;border-radius:var(--r-lg);background:var(--accent-soft);color:var(--accent-soft-ink,var(--accent));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;flex-shrink:0}
.agent-card h3{margin:0 0 3px;font-size:14.5px}
.agent-card p{margin:0 0 8px;font-size:12.5px;color:var(--ink-dim)}
.badge-good{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--good);background:var(--good-soft);border-radius:var(--r-lg);padding:3px 9px}
.home-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px 16px;flex-wrap:wrap}
.home-header p{margin:6px 0 0;font-size:13px;color:var(--ink-dim);max-width:460px;line-height:1.5}
.header-btn{display:inline-flex;align-items:center;gap:7px;border:none;background:var(--accent);color:var(--accent-ink);border-radius:var(--r-md);padding:9px 16px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:var(--glow-accent);white-space:nowrap}
.header-btn svg{width:14px;height:14px}
.agent-features{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px}
.agent-feature{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-dim);font-weight:600}
.agent-feature svg{width:14px;height:14px;color:var(--good);flex-shrink:0}
.agent-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.agent-stat{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:10px 14px;min-width:112px;flex:1}
.agent-stat-top{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-faint);font-weight:700;}
.agent-stat-top svg{width:12px;height:12px}
.agent-stat b{display:block;font-family:'Manrope',system-ui,sans-serif;font-size:19px;font-weight:700;margin-top:4px}
.agent-stat .delta{font-size:11px;font-weight:700}
.agent-stat .delta.up{color:var(--good)}
.agent-stat .delta.down{color:var(--danger)}
.agent-stat .delta.flat{color:var(--ink-faint)}
.channel-row{display:flex;gap:18px;flex-wrap:wrap}
.channel-item{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;color:var(--ink-faint);font-weight:600}
.channel-item .channel-icon{width:36px;height:36px;border-radius:var(--r-md);background:var(--surface-3);display:flex;align-items:center;justify-content:center;color:var(--ink-faint)}
.channel-item .channel-icon svg{width:16px;height:16px}
.channel-item.real .channel-icon{background:var(--good-soft);color:var(--good)}
.channel-item.real{color:var(--ink-dim)}
.contact-row{display:flex;align-items:center;gap:12px;padding:11px 20px;cursor:pointer;border-bottom:1px solid var(--line-soft)}
.contact-row:hover{background:var(--surface-2)}
.contact-row .bot-sub{font-size:11.5px}
.soon-view{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;padding:40px 20px;color:var(--ink-dim)}
.soon-view .soon-icon{width:52px;height:52px;border-radius:var(--r-lg);background:var(--surface-2);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--ink-faint)}
.soon-view .soon-icon svg{width:26px;height:26px}
.soon-view h3{margin:0 0 6px;color:var(--ink);font-size:16px}
.soon-view p{margin:0;font-size:13px;max-width:300px;line-height:1.5}
.faq-item{margin:6px 20px;border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--surface-2);overflow:hidden}
.faq-q{padding:12px 14px;font-size:13.5px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px}
.faq-q .chev{transition:transform .15s ease;flex-shrink:0;color:var(--ink-faint)}
.faq-item.open .faq-q .chev{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .2s ease}
.faq-item.open .faq-a{max-height:300px}
.tech-item.open .faq-a{max-height:600px}
.faq-a p{margin:0;padding:0 14px 14px;font-size:12.5px;color:var(--ink-dim);line-height:1.55}
.changelog-item{display:flex;gap:12px;margin:0 20px 16px}
.changelog-dot{width:7px;height:7px;border-radius:50%;background:var(--ink-faint);flex-shrink:0;margin-top:6px}
.changelog-item p{margin:0;font-size:13px;color:var(--ink);line-height:1.5}
.cancha-row{align-items:center;flex-wrap:wrap;row-gap:12px}
.cancha-row-info{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.cancha-row-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.admin-input{border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 10px;font-family:inherit;font-size:13px;background:var(--surface-2);color:var(--ink);width:110px}
.datos-tabs{display:flex;gap:20px;flex-wrap:wrap;padding:0 20px 14px;overflow-x:auto;border-bottom:1px solid var(--line-soft)}
.datos-tab{border:none;background:none;padding:0 0 10px;font-size:12.5px;font-weight:700;color:var(--ink-faint);cursor:pointer;font-family:inherit;border-bottom:2px solid transparent;flex-shrink:0;margin-bottom:-1px}
.datos-tab:hover{color:var(--ink-dim)}
.datos-tab.active{color:var(--ink);border-bottom-color:var(--accent)}
.datos-toolbar{display:flex;align-items:baseline;justify-content:space-between;padding:14px 20px 10px}
.datos-toolbar-titulo{font-size:13px;font-weight:800;letter-spacing:.03em;color:var(--ink)}
.datos-toolbar-count{font-size:11.5px;font-weight:500;letter-spacing:0;color:var(--ink-faint);margin-left:10px}
.datos-refresh-btn{display:inline-flex;align-items:center;gap:5px;border:none;background:none;color:var(--ink-faint);padding:0;font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer}
.datos-refresh-btn:hover{color:var(--accent)}
.datos-refresh-btn:disabled{opacity:.6;cursor:wait}
.datos-table-scroll{overflow-x:auto;margin:0 20px;border:1px solid var(--line);border-radius:var(--r-lg)}
.datos-table{border-collapse:collapse;width:100%;font-size:12.5px;white-space:nowrap}
.datos-table th{text-align:left;font-size:11px;color:var(--ink-dim);font-weight:800;padding:11px 14px;background:var(--surface-3, var(--surface-2));border-bottom:1px solid var(--line);position:sticky;top:0}
.datos-table td{padding:10px 14px;border-top:1px solid var(--line-soft);color:var(--ink);font-size:12.5px;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.datos-table td:first-child{font-weight:600}
.datos-table tbody tr{cursor:pointer}
.datos-table tbody tr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.datos-table tbody tr:nth-child(even){background:var(--surface-2)}
.datos-table tbody tr:hover{background:var(--accent-soft)}
.datos-drawer-catch{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .2s ease}
.datos-drawer-catch.show{opacity:1;pointer-events:auto}
.datos-drawer{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:92vw;background:var(--surface-2);border-left:1px solid var(--line);box-shadow:-4px 0 16px -6px rgba(0,0,0,.3);z-index:61;transform:translateX(100%);transition:transform .2s ease;overflow-y:auto;padding:20px}
.datos-drawer.open{transform:translateX(0)}
.datos-drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.datos-drawer-head h3{margin:0;font-size:15px}
.datos-drawer-grupo-label{font-size:10.5px;font-weight:800;color:var(--ink-faint);margin:16px 0 4px}
.datos-drawer-sep{border-top:1px solid var(--line-soft);margin:14px 0 2px}
@media (max-width:900px){
.datos-drawer{top:auto;left:0;right:0;bottom:0;width:100%;max-width:100%;max-height:85vh;border-left:none;border-top:1px solid var(--line);border-radius:16px 16px 0 0;transform:translateY(100%);padding-top:12px}
.datos-drawer.open{transform:translateY(0)}
.datos-drawer::before{content:'';display:block;width:36px;height:4px;border-radius:var(--r-lg);background:var(--line);margin:0 auto 14px}
}
.datos-estado-pill{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-weight:700;font-size:11.5px;padding:3px 10px 3px 8px;border-radius:var(--r-lg)}
.datos-pill-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.datos-estado-pill.good{color:var(--good);background:var(--good-soft)}
.datos-estado-pill.warn{color:var(--warn);background:var(--warn-soft)}
.datos-estado-pill.danger{color:var(--danger);background:var(--danger-soft)}
/* El destello dorado de la web ("Confirmado · en cocina"): cuando un pedido
entra o cambia de estado, la pastilla se ilumina y suelta una onda. */
.datos-estado-pill{position:relative}
.datos-estado-pill.oro{color:#F1E2BF;background:rgb(201 169 110 / .22);box-shadow:0 0 16px 1px rgb(201 169 110 / .32)}
.datos-estado-pill.oro .datos-pill-dot{background:#E7C98E}
.impacto{animation:chipImpacto 1.6s ease-out}
.impacto::after{content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;animation:chipOnda 1s ease-out forwards}
@keyframes chipImpacto{
0%{background:#FFF6DE;color:#1A160E;box-shadow:0 0 0 2px #fff,0 0 40px 12px rgb(231 201 142 / .9);transform:scale(1.15)}
12%{background:rgb(201 169 110 / .3);color:#F1E2BF;box-shadow:0 0 10px 2px rgb(231 201 142 / .4);transform:scale(1.04)}
20%{background:#F4E4BC;color:#1A160E;box-shadow:0 0 36px 10px rgb(231 201 142 / .85);transform:scale(1.1)}
100%{transform:none}
}
@keyframes chipOnda{0%{box-shadow:0 0 0 0 rgb(231 201 142 / .8)}100%{box-shadow:0 0 0 26px rgb(231 201 142 / 0)}}
/* En el ticket entero la onda es más suave: es una tarjeta, no una pastilla. */
.comanda.impacto{animation:comandaImpacto 1.6s ease-out}
.comanda.impacto::after{animation:chipOnda 1.1s ease-out forwards}
@keyframes comandaImpacto{0%{box-shadow:0 0 0 2px #E7C98E,0 0 50px 10px rgb(231 201 142 / .6)}30%{box-shadow:0 0 0 1px #C9A96E,0 0 30px 4px rgb(231 201 142 / .35)}100%{box-shadow:none}}
@media (prefers-reduced-motion: reduce){ .impacto,.impacto::after,.comanda.impacto,.comanda.impacto::after{animation:none} }
.datos-vacio{color:var(--ink-faint)}
.datos-bool-si{color:var(--good);font-weight:700}
.datos-bool-no{color:var(--ink-faint)}
.admin-group-label{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--ink-faint);padding:4px 4px 10px;border-bottom:1px solid var(--line-soft);margin-bottom:12px}
.admin-group-label svg{width:14px;height:14px;color:var(--ink-faint);flex-shrink:0}
.admin-field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 20px}
.admin-field-label{font-size:12.5px;font-weight:600;color:var(--ink-dim);margin-bottom:6px}
.admin-field-box{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:4px 12px}
.admin-field-box .admin-input{border:none;background:transparent;padding:6px 0;width:100%;font-size:14px;font-weight:600}
.admin-field-box .admin-input:focus{outline:none}
.admin-field-unit{font-size:12px;color:var(--ink-faint);font-weight:600;flex-shrink:0;white-space:nowrap}
/* Campos con opciones fijas: se elige de una lista, no se escribe. */
.admin-opc{position:relative}
.admin-tarjeta:has(.admin-opc.abierto){z-index:5}
.admin-opc-btn{width:100%;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink);padding:10px 12px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-align:left}
.admin-opc-btn:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.admin-opc-btn:focus-visible,.admin-opc.abierto .admin-opc-btn{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.admin-opc-btn span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-opc-btn span.vacio{color:var(--ink-faint);font-weight:500}
.admin-opc-btn svg{width:14px;height:14px;color:var(--ink-faint);flex-shrink:0;transition:transform .15s}
.admin-opc.abierto .admin-opc-btn svg{transform:rotate(180deg)}
.admin-opc-lista{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);max-height:260px;overflow-y:auto;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:5px;box-shadow:0 14px 34px rgba(0,0,0,.45);display:none}
.admin-opc.abierto .admin-opc-lista{display:block}
.admin-opc-lista button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;text-align:left}
.admin-opc-lista button small{font-size:11.5px;font-weight:500;color:var(--ink-faint)}
.admin-opc-lista button:hover,.admin-opc-lista button:focus-visible{outline:none;background:var(--accent-soft)}
.admin-opc-lista button.elegida{color:var(--accent)}
.admin-opc-lista button.elegida::after{content:'';width:6px;height:6px;transform:rotate(45deg);background:var(--accent);flex-shrink:0}
.cancha-row-cols{display:flex;align-items:center;gap:14px;width:100%;flex-wrap:wrap}
.cancha-col-nombre{display:flex;align-items:center;gap:14px;flex:1;min-width:150px}
.cancha-col-nombre h3{margin:0 0 2px}
.cancha-col-nombre p{margin:0}
.cancha-col-precio{text-align:right;flex-shrink:0}
.cancha-col-precio .admin-input{width:100px;text-align:right;font-family:'Manrope',system-ui,sans-serif;font-weight:700}
.cancha-col-precio-sub{font-size:10.5px;color:var(--ink-faint);margin-top:2px}
.cancha-col-estado{display:flex;align-items:center;gap:8px;flex-shrink:0;min-width:130px}
.cancha-col-acciones{display:flex;align-items:center;gap:8px;flex-shrink:0}
.admin-cancha-chevron{border:none;background:transparent;color:var(--ink-faint);cursor:pointer;padding:4px;display:flex;margin-left:2px;pointer-events:none}
.estado-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cancha-edit-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:10px}
.admin-cancha-add-card{display:flex;flex-direction:column;align-items:center;gap:2px;width:calc(100% - 40px);margin:8px 20px 4px;padding:16px;border:1px dashed var(--line);border-radius:var(--r-lg);background:transparent;color:var(--ink);cursor:pointer;font-family:inherit}
.admin-cancha-add-card:hover{border-color:var(--accent);background:var(--surface-2)}
.admin-cancha-add-title{font-size:14px;font-weight:700}
.admin-cancha-add-sub{font-size:12px;color:var(--ink-faint)}
.cancha-row.expandable .expand-chevron{transition:transform .15s ease}
.cancha-row.expandable.open .expand-chevron{transform:rotate(180deg)}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:60;padding:20px}
.modal-box{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:20px;width:100%;max-width:340px}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.modal-head h3{margin:0;font-size:16px}
.modal-close{border:none;background:transparent;color:var(--ink-faint);font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
.modal-field{display:block;font-size:12px;font-weight:600;color:var(--ink-dim);margin-bottom:12px}
.modal-field input{margin-top:5px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.admin-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line-soft)}
.admin-row:last-child{border-bottom:none}
.admin-row-label{font-size:13px;font-weight:600}
.admin-row-label small{display:block;font-weight:500;color:var(--ink-faint);font-size:11px;margin-top:1px}
.admin-save-btn{border:none;background:var(--accent);color:var(--accent-ink);border-radius:var(--r-sm);padding:6px 14px;font-weight:700;font-size:12.5px;cursor:pointer;flex-shrink:0;box-shadow:var(--glow-accent)}
.admin-save-btn:disabled{opacity:.5;cursor:wait;box-shadow:none}
.admin-danger-btn{background:var(--danger);box-shadow:none;margin-left:8px}
.admin-save-all{border:none;background:var(--accent);color:var(--accent-ink);border-radius:var(--r-md);padding:9px 18px;font-weight:700;font-size:13px;cursor:pointer;margin:12px 20px;box-shadow:var(--glow-accent)}
.admin-save-all:disabled{opacity:.5;cursor:wait;box-shadow:none}
.campana-textarea{width:calc(100% - 40px);margin:4px 20px;min-height:80px;border:1px solid var(--line);border-radius:var(--r-md);padding:12px;font-family:inherit;font-size:13.5px;background:var(--surface-2);color:var(--ink);resize:vertical}
.campana-list{margin:4px 20px 12px;border:1px solid var(--line-soft);border-radius:var(--r-md);max-height:260px;overflow-y:auto;background:var(--surface)}
.campana-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line-soft);font-size:13px}
.campana-item-lg{padding:14px 14px}
.campana-item:last-child{border-bottom:none}
.campana-send-btn{border:none;background:var(--accent);color:var(--accent-ink);border-radius:var(--r-md);padding:10px 20px;font-weight:700;font-size:13.5px;cursor:pointer;margin:4px 20px;box-shadow:var(--glow-accent)}
.campana-send-btn:disabled{opacity:.5;cursor:wait;box-shadow:none}
.campana-status{margin:0 20px 16px;font-size:12.5px;color:var(--ink-dim)}
.campana-grid{display:flex;gap:0;flex-wrap:wrap;padding:0}
.campana-col{flex:1;min-width:260px}
.campana-char-count{font-size:11px;color:var(--ink-faint);text-align:right;margin:0 20px 4px}
.campana-preview{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:14px}
.campana-preview-head{font-size:11px;color:var(--ink-faint);font-weight:700;margin-bottom:10px}
.campana-preview-phone{background:var(--surface-3);border-radius:var(--r-md);padding:16px;min-height:170px;display:flex;flex-direction:column;gap:8px;justify-content:flex-end}
.campana-preview-phone .bubble{white-space:pre-wrap;word-break:break-word}
.campana-preview-contact{display:flex;align-items:center;gap:9px;margin-bottom:10px;font-size:12.5px;font-weight:700;color:var(--ink-dim)}
.section-title-step{display:flex;align-items:center;gap:9px;margin:18px 20px 4px;font-size:14px;font-weight:800}
.step-badge{width:21px;height:21px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;flex-shrink:0}
.campana-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;margin-top:8px;border-top:1px solid var(--line-soft)}
.camp-shell{display:flex;gap:16px;padding:8px 20px 4px;align-items:stretch;flex-wrap:wrap}
.camp-main{flex:2;min-width:280px;display:flex;flex-direction:column;gap:14px}
.camp-side{flex:1;min-width:230px;display:flex;flex-direction:column;gap:14px}
.camp-main > .camp-box:last-child, .camp-side > .camp-box:last-child{flex:1;display:flex;flex-direction:column}
.camp-main > .camp-box:last-child .campana-list{flex:1}
.camp-box{border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:18px}
.camp-box-header{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:800}
.camp-box-header svg{width:15px;height:15px;color:var(--ink-faint);flex-shrink:0}
.camp-box-sub{font-size:12px;color:var(--ink-faint);margin:0 0 0 30px}
.camp-box .campana-textarea{background:var(--surface);min-height:110px}
.camp-box .campana-list{background:var(--surface)}
.camp-box .conv-search input{background:var(--surface)}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding:6px 20px 4px}
.tool-card{display:flex;gap:13px;align-items:center;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:14px;text-decoration:none;color:inherit;transition:transform .12s ease,border-color .12s ease}
.tool-card:hover{border-color:var(--ink-faint)}
.tool-card.disabled{opacity:.55;cursor:default;pointer-events:none;border-style:dashed}
.tool-icon{width:40px;height:40px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:800;font-size:14px;color:var(--accent-soft-ink,var(--accent));background:var(--accent-soft)}
.tool-icon svg{width:19px;height:19px}
.tool-copy{min-width:0;flex:1}
.tool-copy strong{display:block;font-size:13.5px;margin-bottom:2px}
.tool-copy small{display:block;font-size:11.5px;color:var(--ink-dim);line-height:1.4}
.tool-arrow{color:var(--ink-faint);flex-shrink:0}
.panorama-url-row{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:8px 10px;margin-top:8px}
.panorama-url-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.panorama-copy-btn{border:1px solid var(--line);background:var(--surface);color:var(--ink-dim);border-radius:var(--r-sm);padding:4px 9px;font-size:11px;font-weight:700;cursor:pointer;flex-shrink:0}
.panorama-copy-btn:hover{color:var(--ink)}
/* === REDISEÑO: barra flotante === */
/* La barra pasa a ser una "burbuja" oscura despegada del borde, solo con
iconos. El texto de cada item no está envuelto en ningún elemento propio,
así que se colapsa con font-size:0 en el item y se le devuelve tamaño al
svg: no hace falta tocar el HTML. En mobile la barra sigue siendo un cajón
ancho con las etiquetas, que es donde de verdad se necesitan. */
@media (min-width:901px){
:root{ --rail:84px; }
.grid{ grid-template-columns:var(--rail) 220px 300px 1fr 260px; }
.grid.nav-collapsed{ grid-template-columns:0px 220px 300px 1fr 260px; }
.grid.bots-collapsed{ grid-template-columns:var(--rail) 0px 300px 1fr 260px; }
.grid.nav-collapsed.bots-collapsed{ grid-template-columns:0px 0px 300px 1fr 260px; }
.navrail{
background:#141414;
border-right:none;
border-radius:14px;
margin:10px;
padding:10px 0;
align-items:center;
gap:4px;
overflow:visible;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .navrail{ background:#1C1C1C; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); } }
:root[data-theme="dark"] .navrail{ background:#1C1C1C; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.navrail .nav-label{
font-size:0; padding:0;
width:26px; height:1px; margin:8px 0;
background:rgba(255,255,255,.12);
flex-shrink:0;
}
.navrail a, .navrail .nav-item{
/* El nombre del item queda oculto acá y vuelve a aparecer al pasar el
mouse, en el globito de abajo. */
font-size:0;
width:40px; height:40px;
margin:0; padding:0;
flex-shrink:0;
justify-content:center;
/* gap:0 es el arreglo del descentrado: la regla original deja 10px entre el
icono y el texto oculto, y ese hueco corría el icono a la izquierda. */
gap:0;
border-radius:10px;
background:transparent;
color:#8A8A8A;
position:relative;
overflow:visible;
}
.navrail svg{ width:19px; height:19px; }
.navrail .nav-item:hover{ background:#202020; color:#FFFFFF; }
.navrail .nav-item.active{ background:var(--accent); color:var(--accent-ink); }
.navrail .nav-item.soon{ opacity:.32; background:transparent; }
/* Globito con el nombre: sin él, una barra de solo iconos obliga a adivinar. */
.navrail .nav-item::after{
content:attr(data-soon-title);
position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
background:#141414; color:#FFFFFF;
font-size:11.5px; font-weight:600; letter-spacing:0;
padding:6px 9px; border-radius:6px; white-space:nowrap;
box-shadow:0 4px 12px rgba(0,0,0,.16);
opacity:0; pointer-events:none; transition:opacity .12s ease; z-index:60;
}
.navrail .nav-item[data-nav="home"]::after{ content:'Inicio'; }
.navrail .nav-item[data-nav="agentes"]::after{ content:'Agentes'; }
.navrail .nav-item[data-nav="crm"]::after{ content:'CRM'; }
.navrail .nav-item[data-nav="campanas"]::after{ content:'Campañas'; }
.navrail .nav-item[data-nav="contactos"]::after{ content:'Contactos'; }
.navrail .nav-item[data-nav="panorama"]::after{ content:'Mi Panorama'; }
.navrail .nav-item[data-nav="panelAdmin"]::after{ content:'Panel Admin'; }
.navrail .nav-item[data-nav="datos"]::after{ content:'Datos'; }
.navrail .nav-item[data-nav="cocina"]::after{ content:'Cocina'; }
.navrail .nav-item[data-nav="ayuda"]::after{ content:'Centro de Ayuda'; }
.navrail .nav-item[data-nav="novedades"]::after{ content:'Novedades'; }
.navrail .nav-item:hover::after{ opacity:1; }
/* El estado del bot no entra en una barra angosta. */
.nav-footer-status{ display:none; }
.grid.nav-collapsed .navrail{ width:var(--rail); border-radius:14px; }
}
/* === REDISEÑO: sin colapsar === */
@media (min-width:901px){
.nav-toggle-btn{ display:none !important; }
.grid.nav-collapsed{ grid-template-columns:var(--rail) 220px 300px 1fr 260px; }
.grid.nav-collapsed.bots-collapsed{ grid-template-columns:var(--rail) 0px 300px 1fr 260px; }
.grid.nav-collapsed .navrail{
position:static; left:auto; top:auto; bottom:auto; width:auto; z-index:auto;
transform:none; opacity:1; pointer-events:auto; box-shadow:none;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .grid.nav-collapsed .navrail{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); } }
:root[data-theme="dark"] .grid.nav-collapsed .navrail{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.grid.nav-collapsed.nav-peek::after{ content:none; }
.grid.nav-collapsed .nav-hot-zone{ display:none; }
.grid.nav-collapsed .bots-edge-toggle{ left:calc(var(--rail) + 220px); }
.grid.nav-collapsed.bots-collapsed .bots-edge-toggle{ left:var(--rail); }
}
/* === INICIO v2 === */
/* Tendencias en gris para que no compitan con el número; solo "hoy" va en acento. */
:root{ --ini-spark-line:#BDB8AD; --ini-spark-area:rgba(140,106,47,.07); --ini-barra:#DDD6C8; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ini-spark-line:#57524A; --ini-spark-area:rgba(201,169,110,.08); --ini-barra:#3A352C; } }
:root[data-theme="dark"]{ --ini-spark-line:#57524A; --ini-spark-area:rgba(201,169,110,.08); --ini-barra:#3A352C; }
.ini{ display:flex; flex-direction:column; gap:16px; padding:24px 28px 32px; width:100%; box-sizing:border-box; font-variant-numeric:tabular-nums; }
.ini-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ini-titulo{ margin:0; font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.15; text-wrap:balance; }
.ini-fecha{ margin:4px 0 0; font-size:13px; color:var(--ink-dim); font-weight:500; }
.ini-ia{ display:flex; align-items:center; gap:10px; padding:7px 8px 7px 14px; background:var(--surface); border:1px solid var(--line-soft); border-radius:999px; font-size:13px; color:var(--ink-dim); font-weight:500; }
.ini-ia-estado{ min-width:58px; font-size:12.5px; font-weight:600; }
.ini-ia-estado.on{ color:var(--good); } .ini-ia-estado.off{ color:var(--warn); }
.ini-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.ini-kpi{ position:relative; display:flex; flex-direction:column; gap:6px; padding:16px 16px 0; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg); overflow:hidden; min-width:0; }
.ini-kpi-label{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-dim); font-weight:500; }
.ini-kpi-label svg{ width:16px; height:16px; flex-shrink:0; color:var(--ink-faint); }
.ini-kpi-valor{ font-size:30px; font-weight:650; letter-spacing:-.025em; line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ini-kpi-pie{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:20px; font-size:12.5px; }
.ini-kpi-extra{ color:var(--ink-faint); }
.ini-delta{ color:var(--ink-faint); font-weight:500; }
.ini-delta.bueno{ color:var(--good); } .ini-delta.malo{ color:var(--warn); }
.ini-kpi-alerta .ini-kpi-valor{ color:var(--warn); }
.ini-spark-wrap{ position:relative; height:40px; margin:4px -16px 0; }
.ini-spark{ display:block; width:100%; height:100%; }
.ini-spark-dot{ position:absolute; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px var(--surface); transform:translate(-50%,-50%); pointer-events:none; }
.ini-link{ all:unset; cursor:pointer; color:var(--accent); font-size:12.5px; font-weight:600; border-radius:4px; }
.ini-link:hover{ text-decoration:underline; }
.ini-link:focus-visible, .ini-aviso:focus-visible, .ini-act:focus-visible, .ini-seg button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* Las dos columnas terminan a la misma altura: la última tarjeta de cada una
se estira, así no queda un hueco debajo de la columna más corta. */
.ini-cuerpo{ display:grid; grid-template-columns:minmax(0,1fr) clamp(340px, 26%, 480px); gap:16px; align-items:stretch; }
.ini-col-principal > .ini-card:last-child, .ini-col-lateral > .ini-card:last-child{ flex:1; }
.ini-col-principal, .ini-col-lateral{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.ini-card{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:16px 18px; min-width:0; }
.ini-card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.ini-card-head h2{ margin:0; font-size:15px; font-weight:650; letter-spacing:-.01em; }
.ini-card-meta{ font-size:12.5px; color:var(--ink-faint); }
/* La agenda es la protagonista: la hora grande manda, como en una comanda. */
.ini-prox-lista{ display:flex; flex-direction:column; }
.ini-prox{ display:grid; grid-template-columns:76px minmax(0,1fr) auto auto; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--line-soft); }
.ini-prox:first-child{ border-top:0; padding-top:4px; }
.ini-prox-cuando{ display:flex; flex-direction:column; line-height:1.1; }
.ini-hora{ font-size:22px; font-weight:650; letter-spacing:-.02em; }
.ini-hora-ya{ color:var(--ink); }
.ini-hora-sub{ font-size:11.5px; color:var(--ink-faint); margin-top:2px; }
.ini-prox-info{ min-width:0; }
.ini-prox-nombre{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ini-prox-que{ font-size:12.5px; color:var(--ink-dim); margin-top:2px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ini-chip{ font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--ink-dim); white-space:nowrap; }
.ini-chip-acento{ background:var(--accent-soft); color:var(--accent-soft-ink); }
.ini-prox-monto{ font-size:14px; font-weight:600; min-width:84px; text-align:right; }
.ini-vacio{ display:flex; flex-direction:column; gap:4px; padding:18px 0 8px; font-size:13px; color:var(--ink-dim); }
.ini-vacio strong{ color:var(--ink); font-weight:600; font-size:14px; }
.ini-seg{ display:inline-flex; padding:3px; background:var(--surface-2); border-radius:999px; gap:2px; }
.ini-seg button{ all:unset; cursor:pointer; padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:500; color:var(--ink-dim); }
.ini-seg button.on{ background:var(--surface); color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.ini-total{ display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.ini-total b{ font-size:22px; font-weight:650; letter-spacing:-.02em; }
.ini-total span{ font-size:12.5px; color:var(--ink-faint); }
/* Gráfico de barras en HTML: el texto mide siempre lo mismo, a cualquier ancho. */
.ini-barras{ position:relative; padding-top:18px; margin-top:4px; }
.ini-max{ position:absolute; top:0; left:0; font-size:11px; color:var(--ink-faint); }
/* Sin gap: la línea de base tiene que ser continua; la separación entre barras
la da el ancho de cada barra (60% de su columna). */
.ini-cols{ display:grid; grid-template-columns:repeat(14, minmax(0,1fr)); gap:0; border-top:1px dashed var(--line-soft); }
.ini-col{ display:flex; flex-direction:column; align-items:stretch; border-radius:6px; cursor:default; }
.ini-col-area{ height:170px; display:flex; align-items:flex-end; justify-content:center; border-bottom:1px solid var(--line); }
.ini-col:hover .ini-col-area{ background:var(--surface-2); border-radius:6px 6px 0 0; }
.ini-barra{ width:min(22px, 60%); border-radius:4px 4px 0 0; background:var(--ini-barra); }
.ini-col.hoy .ini-barra{ background:var(--accent); }
.ini-col-dia{ margin-top:6px; text-align:center; font-size:11px; color:var(--ink-faint); }
.ini-col.hoy .ini-col-dia{ color:var(--ink); font-weight:600; }
/* Barras y tarjetas que se tocan para ver más. */
.ini-col[data-dia]{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ini-col.elegido .ini-col-area{ background:var(--surface-2); border-radius:6px 6px 0 0; }
.ini-col.elegido:not(.hoy) .ini-barra{ background:var(--ink-dim); }
.ini-col.elegido .ini-col-dia{ color:var(--ink); font-weight:700; }
.ini-col:focus-visible, .ini-kpi[role="button"]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ini-dia-info{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft); }
.dia-info-cab{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; font-size:13px; color:var(--ink-dim); font-variant-numeric:tabular-nums; }
.dia-info-cab b{ font-size:14.5px; color:var(--ink); margin-right:4px; }
.mini-lista{ list-style:none; margin:10px 0 0; padding:0; }
.mini-lista li{ display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--line-soft); font-size:13px; }
.mini-lista li:first-child{ border-top:0; }
.mini-ir{ cursor:pointer; border-radius:8px; }
.mini-ir:hover{ background:var(--surface-2); }
.mini-hora{ flex-shrink:0; min-width:42px; color:var(--ink-faint); font-variant-numeric:tabular-nums; font-size:12.5px; }
.mini-que{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.mini-que b{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-que small{ font-size:12px; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-estado{ flex-shrink:0; font-size:11.5px; padding:2px 8px; border-radius:999px; background:var(--surface-2); color:var(--ink-dim); white-space:nowrap; }
.mini-monto{ flex-shrink:0; font-weight:650; font-variant-numeric:tabular-nums; }
.mini-mas{ margin:10px 0 0; font-size:13px; color:var(--ink-dim); line-height:1.5; }
.mini-mas b{ color:var(--ink); }
.ini-kpi[role="button"]{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ini-kpi.abierta{ border-color:var(--accent); }
.ini-kpi.abierta{ background:var(--surface-2); }
/* Panel de una tarjeta del Inicio: entra desde la derecha (abajo en el celu). */
.datos-drawer.kpi-panel{ width:460px; padding:22px 24px 28px; display:flex; flex-direction:column; gap:20px; }
.kp-cab{ display:flex; align-items:center; gap:10px; }
.kp-cab h2{ flex:1; margin:0; font-size:14px; font-weight:600; color:var(--ink-dim); }
.kp-icono{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:var(--surface-2); color:var(--accent); flex-shrink:0; }
.kp-icono svg{ width:17px; height:17px; }
.kp-valor{ margin-top:-8px; font-family:var(--titulos); font-stretch:125%; font-size:44px; font-weight:650; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.kp-delta{ margin-top:-12px; font-size:13px; }
.kp-datos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line-soft); border-radius:12px; }
.kp-dato{ display:flex; flex-direction:column; gap:3px; padding:12px 14px; min-width:0; }
.kp-dato + .kp-dato{ border-left:1px solid var(--line-soft); }
.kp-dato span{ font-size:11.5px; color:var(--ink-faint); }
.kp-dato b{ font-size:17px; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kp-dato small{ font-size:11px; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kp-seccion h3{ margin:0 0 10px; font-size:13px; font-weight:650; color:var(--ink); }
.kp-detalle{ padding-top:18px; border-top:1px solid var(--line-soft); }
.kp-detalle .mini-lista{ margin-top:6px; }
.kp-detalle .ini-link{ margin-top:14px; }
.kp-grafico{ position:relative; padding-top:16px; }
.kp-max{ position:absolute; top:0; left:0; font-size:10.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.kp-cols{ display:grid; grid-template-columns:repeat(14,minmax(0,1fr)); border-top:1px dashed var(--line-soft); }
.kp-area{ height:110px; display:flex; align-items:flex-end; justify-content:center; border-bottom:1px solid var(--line); }
.kp-barra{ width:min(14px,62%); border-radius:3px 3px 0 0; background:var(--ini-barra); }
.kp-col.hoy .kp-barra{ background:var(--accent); }
.kp-col span{ display:block; margin-top:5px; text-align:center; font-size:10.5px; color:var(--ink-faint); }
.kp-col.hoy span{ color:var(--ink); font-weight:600; }
@media (max-width:900px){
.datos-drawer.kpi-panel{ padding:12px 18px calc(24px + env(safe-area-inset-bottom)); gap:16px; }
.kp-valor{ font-size:36px; }
.kp-dato{ padding:10px 10px; }
.kp-dato b{ font-size:15px; }
}
@media (max-width:600px){
.mini-estado{ display:none; }
.mini-hora{ min-width:36px; }
}
.ini-aviso{ display:flex; align-items:center; gap:12px; padding:10px 10px; margin:0 -10px; border-radius:var(--r-md); cursor:pointer; }
.ini-aviso:hover{ background:var(--surface-2); }
.ini-aviso > svg{ width:16px; height:16px; color:var(--ink-faint); flex-shrink:0; }
.ini-aviso-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ini-aviso-txt b{ font-size:13.5px; font-weight:600; }
.ini-aviso-txt span{ font-size:12.5px; color:var(--ink-faint); }
.ini-punto{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.ini-ok{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-dim); padding:6px 0; }
.ini-act{ display:flex; align-items:center; gap:11px; padding:9px 10px; margin:0 -10px; border-radius:var(--r-md); cursor:pointer; }
.ini-act:hover{ background:var(--surface-2); }
.ini-act .avatar{ width:32px; height:32px; font-size:12.5px; flex-shrink:0; }
.ini-act-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ini-act-txt b{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ini-act-txt span{ font-size:12.5px; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ini-act time{ font-size:12px; color:var(--ink-faint); white-space:nowrap; }
@media (max-width:1200px){
.ini-cuerpo{ grid-template-columns:minmax(0,1fr); }
.ini-col-lateral{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
}
@media (max-width:1000px){ .ini-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){
.ini{ padding:16px 16px 24px; gap:12px; }
.ini-kpis{ gap:10px; }
.ini-kpi{ padding:12px 12px 0; }
.ini-kpi-valor{ font-size:24px; }
.ini-spark-wrap{ margin:2px -12px 0; }
.ini-prox{ grid-template-columns:62px minmax(0,1fr) auto; gap:10px; }
.ini-prox .ini-chip{ display:none; }
.ini-hora{ font-size:19px; }
}
/* === ESTILO v2: toda la app ===
Una sola idea en todas las pantallas: fondo apenas frío, tarjetas blancas
con borde fino (no rellenos grises), etiquetas en oración y un solo acento.
Va al final a propósito: pisa las capas de estilos anteriores. */
/* Títulos de página y de sección */
.home-greeting-title, .home-header h1{ font-size:26px !important; font-weight:700 !important; letter-spacing:-.02em; }
.home-header p{ color:var(--ink-dim); font-size:13.5px; }
.section-title, .admin-group-label{ font-size:13px !important; font-weight:650 !important; color:var(--ink) !important; letter-spacing:0 !important; }
.detail-label{ font-size:12.5px !important; font-weight:600 !important; color:var(--ink-dim) !important; letter-spacing:0 !important; margin-bottom:8px; }
.contactos-head-row{ font-size:12px !important; font-weight:600 !important; color:var(--ink-faint) !important; }
.chip{ font-size:11.5px; font-weight:600; letter-spacing:0; }
h1, h2, h3, strong, b{ font-weight:650; }
/* Tarjetas: blancas con borde; el gris queda solo para hover y campos */
.agent-card, .faq-item, .tool-card, .chart-card, .empty-card, .campana-preview,
.admin-cancha-card, .modal-box, .datos-drawer{ background:var(--surface) !important; border:1px solid var(--line-soft) !important; box-shadow:none !important; }
.tool-card:hover, .agent-card:hover{ border-color:var(--line) !important; }
.faq-q{ font-weight:600; }
.admin-input, .conv-search input, .composer textarea, .campana-textarea{ background:var(--surface) !important; border-color:var(--line) !important; }
.admin-input:focus, .conv-search input:focus, .composer textarea:focus, .campana-textarea:focus{ outline:none; border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-soft); }
/* Links de texto: sin flechitas ↗ ni negritas pesadas */
.link-btn{ all:unset; cursor:pointer; margin-top:8px; display:inline-block; color:var(--accent); font-size:12.5px; font-weight:600; border-radius:4px; }
.link-btn:hover, .link-inline:hover{ text-decoration:underline; }
.link-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.link-inline{ color:var(--accent); text-decoration:none; font-weight:600; }
/* CRM: fila de conversación con el avatar al costado (antes quedaba arriba) */
.conv-row{ flex-direction:row !important; align-items:flex-start; gap:11px; padding:12px 16px !important; border-bottom:1px solid var(--line-soft); }
.conv-row.active{ background:var(--accent-soft) !important; }
.conv-row.active .conv-name{ color:var(--accent-soft-ink); }
.conv-row .conv-preview{ margin-top:1px; }
.chat{ background:var(--bg) !important; }
.bubble{ box-shadow:none !important; }
.detail-items{ font-size:13.5px; line-height:1.55; padding:2px 0 8px; margin-bottom:4px; border-bottom:1px dashed var(--line-soft); }
.kv-total{ font-weight:650; font-size:14px; padding-top:8px !important; }
.resumen-text{ font-size:13px; line-height:1.55; color:var(--ink-dim); }
.bot-row.active{ border-left-color:transparent !important; background:var(--accent-soft) !important; }
.bot-row{ border-radius:var(--r-md); margin:2px 8px; }
.agent-stat .ini-delta{ display:block; font-size:12px; margin-top:2px; }
/* Pantalla de carga: la marca, respirando despacio (sin el "radar") */
.carga-marca{ width:44px; height:44px; border-radius:12px; background:var(--ink); color:var(--surface); display:grid; place-items:center; font-weight:800; font-size:24px; animation:respira 1.6s ease-in-out infinite; }
@keyframes respira{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.55; transform:scale(.94); } }
@media (prefers-reduced-motion:reduce){ .carga-marca{ animation:none; } }
.carga-error{ display:flex; flex-direction:column; gap:6px; max-width:360px; text-align:center; }
.carga-error strong{ color:var(--ink); font-size:15px; font-weight:650; }
.carga-error span{ font-size:13px; line-height:1.55; color:var(--ink-dim); }
.carga-btn{ margin-top:6px; border:0; background:var(--accent); color:var(--accent-ink); border-radius:var(--r-md); padding:9px 18px; font-weight:600; font-size:13.5px; cursor:pointer; }
input[type=checkbox], input[type=radio], input[type=range]{ accent-color:var(--accent); }
.camp-sel{ display:flex; align-items:center; gap:14px; margin:0 0 10px; font-size:12.5px; color:var(--ink-dim); }
.camp-sel span{ margin-right:auto; }
.camp-sel button{ all:unset; cursor:pointer; font-weight:600; color:var(--accent); border-radius:4px; }
.camp-sel button:hover{ text-decoration:underline; }
.camp-sel button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.camp-sel button[hidden]{ display:none; }
.campana-send-btn:disabled{ opacity:.45; cursor:not-allowed; }
/* Campañas y Datos */
.campana-preview-phone{ background:var(--bg) !important; border:1px solid var(--line-soft); border-radius:var(--r-md); }
.campana-preview-phone .msg-row{ animation:none !important; opacity:1 !important; }
.campana-item{ border-color:var(--line-soft) !important; }
.campana-item-lg{ padding:10px 14px !important; }
.step-badge{ background:var(--ink) !important; color:var(--surface) !important; }
.datos-toolbar-titulo{ font-size:15px !important; font-weight:650 !important; }
.datos-table{ background:var(--surface); }
.datos-table thead th{ background:var(--surface-2) !important; font-weight:600 !important; color:var(--ink-dim) !important; }
.datos-table tbody tr:nth-child(even){ background:transparent !important; }
.datos-table tbody tr{ border-bottom:1px solid var(--line-soft); }
.datos-table tbody tr:hover{ background:var(--surface-2) !important; }
/* Líneas verticales entre columnas (pedido 1/10): nacen desde arriba en el
encabezado, siguen por todas las filas y se desvanecen al final. Donde
cruzan la línea del encabezado, un rombito dorado como el de la web. */
.datos-table thead th:not(:last-child){ position:sticky; background-image:linear-gradient(180deg, transparent 10%, var(--linea-color)) !important; background-size:1px 100% !important; background-position:right top !important; background-repeat:no-repeat !important; }
/* El rombito lo dibuja la celda de la DERECHA (si no, esa celda lo tapaba por la mitad). */
.datos-table thead th:not(:first-child)::before{ content:""; position:absolute; left:-4.5px; bottom:-4.5px; width:7px; height:7px; transform:rotate(45deg); border:1px solid rgb(201 169 110 / .75); background:var(--surface); z-index:2; }
.datos-table tbody td:not(:last-child){ background-image:linear-gradient(var(--linea-color), var(--linea-color)); background-size:1px 100%; background-position:right top; background-repeat:no-repeat; }
.datos-table tbody tr:last-child td:not(:last-child){ background-image:linear-gradient(180deg, var(--linea-color), transparent); }
.datos-table td,.datos-table th{ padding-left:18px !important; padding-right:18px !important; }
.msg-row{ animation-duration:.18s; }
@media (min-width:901px){
.navrail .nav-txt{ display:none; }
/* Pedido de Álvaro: el recuadro violeta se veía pasado a la derecha. Se le
sacan 3px de ese lado sin mover el icono (el padding-left lo compensa y el
margin-right mantiene el borde izquierdo en el mismo lugar). */
/* margin-right 1px (no 2): al angostar la barra 1px, el violeta quedaba medio
píxel corrido; así vuelve exactamente a donde estaba. */
/* Sin relleno ni margen de un solo lado: el ícono queda centrado en la caja dorada. */
.navrail .nav-item{ width:40px !important; padding:0 !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box; }
/* La barra negra, 1px más angosta del lado derecho (pedido de Álvaro). */
.navrail{ margin-right:11px !important; }
}
/* CRM v2 */
.crm-cabeza{ display:flex; align-items:center; gap:10px; padding:14px 16px 10px !important; }
.crm-agente{ position:relative; display:inline-flex; align-items:center; min-width:0; cursor:pointer; }
.crm-agente select{ appearance:none; -webkit-appearance:none; border:0; background:transparent; color:var(--ink); font:inherit; font-size:15px; font-weight:650; letter-spacing:-.01em; padding:4px 22px 4px 0; cursor:pointer; max-width:100%; text-overflow:ellipsis; }
.crm-agente select:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
.crm-agente svg{ position:absolute; right:0; width:16px; height:16px; color:var(--ink-faint); pointer-events:none; }
.crm-cuenta{ display:none; } /* el total ya está en la pestaña "Todas" */
/* "Ocultar bots" es solo de escritorio: en el celular esa columna es una pantalla más. */
@media (max-width:900px){ body[data-view="bots"] .grid.bots-collapsed .pane[data-pane="bots"]{ display:flex !important; } }
.msg-row:not(.out) .msg-sender{ align-self:flex-start !important; }
/* Lista y detalles un poco más anchos: la lista cortaba nombres y filtros. */
@media (min-width:901px){
.grid, .grid.nav-collapsed{ grid-template-columns:var(--rail) 220px 340px 1fr 300px !important; }
.grid.bots-collapsed, .grid.nav-collapsed.bots-collapsed{ grid-template-columns:var(--rail) 0px 340px 1fr 300px !important; }
}
#convFilters{ gap:2px 16px !important; padding:0 16px !important; border-bottom:1px solid var(--line-soft); flex-wrap:nowrap !important; overflow:visible !important; }
.crm-filtro{ all:unset; cursor:pointer; padding:8px 0; font-size:12.5px; font-weight:600; color:var(--ink-dim); border-bottom:2px solid transparent; white-space:nowrap; }
.crm-filtro span{ color:var(--ink-faint); font-weight:500; margin-left:2px; }
.crm-filtro.on{ color:var(--ink); border-bottom-color:var(--accent); }
.crm-filtro:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.crm-vacio{ padding:28px 16px; font-size:13px; color:var(--ink-faint); text-align:center; }
.conv-row{ padding:13px 16px !important; }
.conv-row .conv-name{ font-size:14px; font-weight:600; }
.conv-row .conv-time{ font-size:11.5px; }
.conv-row .conv-preview{ font-size:13px; color:var(--ink-dim); margin-top:2px; }
.conv-quien{ color:var(--ink-faint); }
.conv-row.no-leido .conv-name{ font-weight:700; }
.conv-row.no-leido .conv-preview{ color:var(--ink); }
.conv-pie{ display:flex; gap:6px; margin-top:6px; }
.conv-estado, .conv-nuevo{ font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:999px; }
.conv-estado.k-warn{ background:var(--warn-soft); color:var(--warn); }
.conv-estado.k-good{ background:var(--good-soft); color:var(--good); }
.conv-estado.k-danger{ background:var(--danger-soft); color:var(--danger); }
.conv-nuevo{ background:var(--accent-soft); color:var(--accent-soft-ink); }
.chat-head{ padding:14px 24px !important; }
.chat-head-name{ font-size:15px; font-weight:650; }
.chat-head-sub{ color:var(--ink-faint) !important; font-size:12.5px !important; }
.messages{ padding:18px 24px !important; }
.messages .msg-row{ animation:none !important; margin-bottom:4px; }
.messages .msg-row:last-child{ animation:popIn .2s ease both !important; }
@media (prefers-reduced-motion:reduce){ .messages .msg-row:last-child{ animation:none !important; } }
/* Burbujas sólidas: el efecto "vidrio" (transparencia + blur) las lavaba en modo claro. */
.bubble{ background:var(--surface) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border:1px solid var(--line-soft) !important; color:var(--ink) !important; font-size:14px !important; line-height:1.5 !important; padding:8px 12px !important; border-radius:16px 16px 16px 4px !important; max-width:min(72%, 560px) !important; white-space:pre-line; }
.bubble.bot{ background:var(--accent-soft) !important; border-color:transparent !important; border-radius:16px 16px 4px 16px !important; }
.bubble.humano{ background:color-mix(in srgb, var(--pop) 14%, var(--surface)) !important; border-color:transparent !important; border-radius:16px 16px 4px 16px !important; }
.bubble .mtime{ font-size:11px !important; margin-top:4px !important; text-align:right; color:var(--ink-faint) !important; }
.msg-sender{ font-size:11.5px !important; font-weight:600 !important; color:var(--ink-faint) !important; margin:12px 4px 4px !important; }
.composer-status{ background:var(--surface) !important; padding:10px 24px !important; }
.composer-status .estado-txt{ font-weight:500 !important; font-size:13px !important; }
.composer-status button{ all:unset; cursor:pointer; padding:7px 12px; border:1px solid var(--line); border-radius:var(--r-md); font-size:12.5px; font-weight:600; color:var(--ink); background:var(--surface); }
.composer-status button:hover{ background:var(--surface-2); }
.composer-status button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.composer{ padding:12px 24px calc(14px + env(safe-area-inset-bottom)) !important; border-top:1px solid var(--line-soft) !important; }
.composer button{ box-shadow:none !important; font-weight:600 !important; }
/* Agentes v2: planilla de "quién atiende" */
.ag-lista{ display:flex; flex-direction:column; gap:12px; margin:0 20px; }
.ag-card{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg); }
.ag-activo{ padding:20px 22px 18px; }
.ag-cabeza{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ag-titulo{ display:flex; gap:12px; align-items:flex-start; }
.ag-titulo h2{ margin:0; font-size:19px; font-weight:650; letter-spacing:-.015em; }
.ag-titulo p{ margin:2px 0 0; font-size:13px; color:var(--ink-dim); }
.ag-punto{ width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:8px; background:var(--ink-faint); }
.ag-punto.on{ background:var(--good); box-shadow:0 0 0 4px var(--good-soft); }
.ag-punto.off{ background:var(--warn); box-shadow:0 0 0 4px var(--warn-soft); }
.ag-punto.neutro{ margin-top:5px; background:var(--line); }
.ag-switch{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--ink-dim); }
.ag-datos{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px 24px; margin:20px 0 4px; padding:16px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.ag-dato{ display:flex; flex-direction:column; min-width:0; }
.ag-dato b{ font-size:26px; font-weight:650; letter-spacing:-.025em; line-height:1.1; }
.ag-dato > span:not(.ini-delta){ font-size:12.5px; color:var(--ink-dim); margin-top:2px; }
.ag-dato .ini-delta{ font-size:12px; margin-top:4px; }
.ag-ficha{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:10px 16px; margin:16px 0 0; font-size:13.5px; }
.ag-ficha dt{ color:var(--ink-faint); font-weight:500; }
.ag-ficha dd{ margin:0; color:var(--ink); line-height:1.5; }
.ag-abierto{ font-weight:600; }
.ag-abierto.si{ color:var(--good); } .ag-abierto.no{ color:var(--warn); }
.ag-acciones{ display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.ag-btn{ all:unset; box-sizing:border-box; cursor:pointer; padding:8px 14px; border:1px solid var(--line); border-radius:var(--r-md); font-size:13px; font-weight:600; color:var(--ink); background:var(--surface); }
.ag-btn:hover{ background:var(--surface-2); }
.ag-btn:focus-visible, .ag-otro:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ag-otro{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:12px; padding:14px 22px; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg); }
.ag-otro:hover{ border-color:var(--line); }
.ag-otro-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ag-otro-txt b{ font-size:15px; font-weight:650; }
.ag-otro-txt span{ font-size:12.5px; color:var(--ink-dim); }
.ag-otro-accion{ font-size:13px; font-weight:600; color:var(--accent); white-space:nowrap; }
.ag-nota{ margin:14px 20px 24px; max-width:900px; font-size:12.5px; line-height:1.55; color:var(--ink-faint); }
@media (max-width:700px){
.ag-datos{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.ag-ficha{ grid-template-columns:1fr; gap:2px; }
.ag-ficha dd{ margin-bottom:8px; }
}
/* Centro de Ayuda y Novedades */
/* Centro de Ayuda con el formato de "Preguntas" de la web falince: índice con
rombo a la izquierda y preguntas numeradas con un círculo +/− a la derecha. */
.faq-web{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;max-width:1080px;margin:8px auto 40px;padding:0 28px}
@media (max-width:900px){.faq-web{grid-template-columns:minmax(0,1fr);gap:24px}}
/* El índice acompaña al bajar y queda a media pantalla (no pegado arriba). */
.faq-web-lado{align-self:stretch;display:flex;flex-direction:column;gap:26px}
.faq-web-lado .faq-web-indice{position:sticky;top:50%;transform:translateY(-50%);margin-top:120px}
/* Índice anclado a una línea vertical: cada tema es un rombo sobre la línea. */
.faq-web-indice{position:relative;display:flex;flex-direction:column;gap:4px;padding:4px 0}
.faq-web-indice::before{content:"";position:absolute;left:5px;top:18px;bottom:18px;width:1px;background:linear-gradient(180deg,transparent,var(--linea-color,var(--line)) 12%,var(--linea-color,var(--line)) 88%,transparent)}
.faq-web-indice button{all:unset;cursor:pointer;position:relative;display:flex;flex-direction:column;gap:3px;padding:10px 0 10px 28px;font-family:var(--titulos);font-stretch:112%;font-size:19px;font-weight:650;letter-spacing:-.02em;color:var(--ink-faint);transition:color .2s ease}
.faq-web-indice button small{font-family:'Manrope',system-ui,sans-serif;font-stretch:100%;font-size:12px;font-weight:500;letter-spacing:0;color:var(--ink-faint)}
.faq-web-indice button:hover{color:var(--ink-dim)}
.faq-web-indice button.activo{color:var(--ink)}
.faq-web-indice button::before{content:"";position:absolute;left:1px;top:22px;width:7px;height:7px;border:1px solid var(--linea-color,var(--line));background:var(--bg);transform:rotate(45deg);transition:background .25s ease,border-color .25s ease}
.faq-web-indice button.activo::before{background:var(--accent);border-color:var(--accent)}
.faq-web-indice button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.faq-web-duda{display:flex;flex-direction:column;gap:6px;padding:20px 22px 22px;border-radius:16px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line-soft));background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface) 70%)}
.faq-web-duda b{font-size:17px;font-weight:700}
.faq-web-duda span{font-size:13.5px;color:var(--ink-dim);margin-bottom:10px}
.faq-web-duda a{align-self:flex-start;text-decoration:none;color:var(--ink);font-size:14px;font-weight:600;padding:10px 22px;border-radius:10px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 8%,transparent)}
.faq-web-duda a:hover{border-color:var(--accent)}
.faq-web-grupo{margin-bottom:34px}
.faq-web-grupo h2{margin:4px 0 14px;font-size:12px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--accent)}
.faq-web .faq-item{margin:0 0 10px !important;border:1px solid var(--line-soft) !important;border-radius:14px !important;background:var(--surface) !important;overflow:hidden;transition:border-color .2s ease,background-color .2s ease}
.faq-web .faq-item.open{border-color:color-mix(in srgb,var(--accent) 55%,var(--line-soft)) !important;background:color-mix(in srgb,var(--accent) 5%,var(--surface)) !important}
.faq-web .faq-q{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:16px;padding:22px 22px;cursor:pointer}
.faq-web .faq-q:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:14px}
.faq-n{font-size:13px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;min-width:20px}
.faq-t{flex:1;font-size:16px;font-weight:600;color:var(--ink);line-height:1.35}
.faq-mas{position:relative;flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line)}
.faq-mas::before,.faq-mas::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .2s ease}
.faq-mas::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-web .faq-item.open .faq-mas{border-color:var(--ink)}
.faq-web .faq-item.open .faq-mas::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq-web .faq-a p{margin:0;padding:0 22px 22px 58px;font-size:14.5px;line-height:1.65;color:var(--ink-dim);max-width:70ch}
.faq-lista{ margin:0 20px 24px; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg); overflow:hidden; }
.faq-lista .faq-item{ margin:0 !important; border:0 !important; border-bottom:1px solid var(--line-soft) !important; border-radius:0 !important; }
.faq-lista .faq-item:last-child{ border-bottom:0 !important; }
.faq-lista .faq-q{ all:unset; box-sizing:border-box; width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:15px 18px; font-size:14px; font-weight:600; cursor:pointer; }
.faq-lista .faq-q:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.faq-lista .faq-a p{ margin:0; padding:0 18px 16px; font-size:13.5px; line-height:1.6; color:var(--ink-dim); max-width:70ch; }
.nov-lista{ margin:0 20px 24px; display:flex; flex-direction:column; gap:14px; }
.nov-bloque{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:16px 20px; }
.nov-bloque h2{ font-size:14px; font-weight:650; margin:0 0 8px; }
.nov-bloque ul{ margin:0; padding-left:18px; }
.nov-bloque li{ font-size:13.5px; line-height:1.6; color:var(--ink-dim); padding:2px 0; }
.nov-bloque li::marker{ color:var(--ink-faint); }
/* Mi Panorama */
#panoramaBody{ padding-bottom:24px; }
#panoramaBody .ini-card{ margin:0 20px; }
.pan-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:16px; margin-bottom:16px; }
.pan-grid .ini-card{ margin:0 !important; }
.pan-grid{ padding:0 20px; }
.pan-fila{ display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--line-soft); }
.pan-fila:first-of-type{ border-top:0; }
.pan-fila-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.pan-fila-txt b{ font-size:13.5px; font-weight:600; }
.pan-fila-txt span{ font-size:12px; color:var(--ink-faint); }
.pan-fila-det{ font-size:12.5px; color:var(--ink-dim); }
.pan-nota{ margin:10px 0 0; font-size:12px; color:var(--ink-faint); }
.pan-numeros{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 16px; padding:4px 0 6px; }
.pan-numeros b{ display:block; font-size:24px; font-weight:650; letter-spacing:-.02em; }
.pan-numeros span{ font-size:12.5px; color:var(--ink-dim); }
.pan-tarea{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:16px; padding:11px 0; border-top:1px solid var(--line-soft); font-size:13px; }
.pan-tarea:first-of-type{ border-top:0; }
.pan-tarea b{ font-weight:600; }
.pan-tarea span{ color:var(--ink-dim); line-height:1.5; }
@media (max-width:700px){ .pan-tarea{ grid-template-columns:1fr; gap:2px; } }
/* Contactos: tabla en grilla fija */
.ct-tabla{ margin:8px 20px 24px; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg); overflow:hidden; }
.ct-fila{ display:grid !important; grid-template-columns:minmax(0,1.3fr) 130px minmax(0,1.6fr) 190px; gap:16px; align-items:center; padding:12px 16px !important; border-bottom:1px solid var(--line-soft); }
.ct-fila:last-child{ border-bottom:0; }
.ct-cabecera{ padding:10px 16px !important; font-size:12px; font-weight:600; color:var(--ink-faint); background:var(--surface-2); cursor:default; }
.ct-contacto{ display:flex; align-items:center; gap:11px; min-width:0; }
.ct-contacto .avatar{ width:34px; height:34px; font-size:13px; flex-shrink:0; }
.ct-dim{ font-size:12.5px; color:var(--ink-dim); }
.ct-detalle{ font-size:12.5px; color:var(--ink); line-height:1.4; min-width:0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ct-detalle small{ display:block; color:var(--ink-faint); font-size:11.5px; margin-top:1px; }
.contactos-tabs button span{ margin-left:3px; font-weight:500; }
@media (max-width:900px){
.ct-fila{ grid-template-columns:minmax(0,1fr) auto; }
.ct-fila > :nth-child(2), .ct-fila > :nth-child(3){ display:none; }
}
/* Panel Admin: el menú es una lista para escanear precios, no tarjetas gigantes */
.camp-box{ background:var(--surface) !important; border:1px solid var(--line-soft) !important; }
#panelAdminBody .cancha-row .agent-icon{ display:none; }
#panelAdminBody .cancha-row{ padding:11px 16px !important; margin-top:6px !important; border-radius:var(--r-md) !important; }
#panelAdminBody .cancha-row:hover{ border-color:var(--line) !important; }
#panelAdminBody .admin-group-label{ margin-top:18px; }
.agent-stat b{ font-size:22px !important; font-weight:650 !important; }
.agent-stat-top{ font-weight:500 !important; }
.add-bot{ border:0 !important; margin:12px 16px !important; padding:0 !important; text-align:left !important; font-weight:500 !important; font-size:12px !important; line-height:1.5; color:var(--ink-faint) !important; }
/* Campañas: la vista previa del teléfono usa el alto libre y el Resumen queda
compacto (antes el Resumen se estiraba y dejaba un hueco grande vacío). */
.camp-side > .camp-box:last-child{ flex:0 0 auto !important; }
.camp-side > .camp-box:first-child{ flex:1; display:flex; flex-direction:column; }
.camp-side > .camp-box:first-child .campana-preview-phone{ flex:1; }
/* Tarjetas de Inicio en 2 columnas: una etiqueta de dos renglones ("Conversaciones de hoy") bajaba el número y el gráfico. Con subgrid quedan alineados por fila. */
@media (max-width:1000px){ .ini-kpi{ display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:6px; } .ini-kpi-label{ align-self:start; } }
/* Avatares: versión oscura propia (ver avatarEstilo) */
:root{ --av-claro:100%; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --av-claro:0%; } }
:root[data-theme="dark"]{ --av-claro:0%; }
/* Bandeja del operador: quién atiende cada conversación */
.conv-pie{ flex-wrap:wrap; }
.conv-estado.k-vos{ background:color-mix(in srgb, var(--pop) 16%, var(--surface)); color:var(--pop); }
.conv-estado.k-canal{ background:var(--surface-2); color:var(--ink-dim); }
.conv-row:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.messages .msg-dia{ margin:14px 0 6px; }
.messages .msg-dia .sys-block-title{ font-size:11.5px; font-weight:600; color:var(--ink-faint); }
.bubble.enviando{ opacity:.65; }
.chat-nuevos{ position:sticky; bottom:6px; align-self:center; margin-top:8px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); border-radius:999px; padding:6px 14px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.15); z-index:2; }
.chat-nuevos[hidden]{ display:none; }
.composer-status button:disabled{ opacity:.55; cursor:wait; }
.composer textarea[readonly]{ opacity:.7; }
.nav-item:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.link-btn:disabled{ opacity:.6; cursor:wait; text-decoration:none; }
.topbar-salir{ text-decoration:none; }
.handoff-banner{ flex-wrap:wrap; column-gap:6px; row-gap:2px; }
.handoff-banner .link-btn{ white-space:nowrap; }
@media (max-width:900px){
.composer-status{ flex-wrap:wrap; padding:10px 14px !important; }
.composer-status .estado-txt{ flex:1 1 100%; }
.composer{ padding:10px 14px calc(12px + env(safe-area-inset-bottom)) !important; }
.messages{ padding:14px 12px !important; }
.chat-head{ padding:10px 12px !important; }
#chatStatusChip{ display:none; }
.bubble{ max-width:85% !important; }
}
/* =========================================================
FALINCE — PASADA VISUAL (propuesta de ChatGPT, 25/9/2026)
Solo CSS. No modifica HTML, JS, IDs ni data-*.
========================================================= */
:root{ --ui-radius-sm: var(--r-sm); --ui-radius-md: var(--r-md); --ui-radius-lg: var(--r-lg); }
button, input, textarea, select{ font-family:inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
button:active{ transform:none; }
.brand-mark{ background:var(--accent); }
/* Encabezado como la barra de la web falince (1/10): sin caja, un degradé que
se funde, el lince al centro con FALINCE fino y espaciado, el negocio a la
izquierda y "Salir" como texto con subrayado dorado. */
body .topbar{position:relative;z-index:30;min-height:64px;padding:0 clamp(16px,2.4vw,32px);gap:12px;border-bottom:0;
background:linear-gradient(180deg,#0A0A0C 0%,rgb(10 10 12 / .9) 60%,rgb(10 10 12 / .75) 100%)}
body .topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;pointer-events:none;
background:linear-gradient(90deg,transparent,rgb(244 244 246 / .1) 20%,rgb(244 244 246 / .1) 80%,transparent) center 4px/100% 1px no-repeat}
body .topbar .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
body .topbar .brand img{height:34px;width:auto;filter:drop-shadow(0 2px 10px rgb(0 0 0 / .6));transition:transform .3s}
body .topbar .brand:hover img{transform:scale(1.06)}
body .topbar .brand span{font-family:'Manrope',system-ui,sans-serif;font-stretch:100%;font-weight:300;font-size:12px;letter-spacing:.42em;text-transform:uppercase}
.topbar-negocio{display:inline-flex;align-items:center;gap:12px;font-family:var(--titulos);font-stretch:85%;font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);white-space:nowrap;max-width:32vw}
.topbar-negocio:empty{display:none}
.topbar-negocio::before{content:"";width:7px;height:7px;flex-shrink:0;background:var(--accent);transform:rotate(45deg)}
body .topbar .topbar-controls{margin-left:auto}
body .topbar .topbar-salir{display:inline-flex;align-items:center;padding:8px 0;text-decoration:none;font-family:var(--titulos);font-stretch:85%;font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);box-shadow:inset 0 -1px 0 rgb(201 169 110 / .7);transition:box-shadow .2s,color .2s}
body .topbar .topbar-salir:hover{color:#fff;box-shadow:inset 0 -2px 0 var(--accent)}
@media (max-width:700px){
body .topbar .brand span{display:none}
body .topbar .brand img{height:28px}
.topbar-negocio{display:none}
}
.pane-head h2, .detail-label, .live-dot, .stat-pill span, .navrail .nav-label, .chip, .msg-sender, .sys-block .sys-block-title, .contactos-head-row{ text-transform:none; letter-spacing:0; }
.home-panel, .agent-card, .camp-box, .info-card, .tool-card, .detail-section{ border-radius:var(--ui-radius-md); box-shadow:none; }
.detail-section{ padding:14px 16px; }
.detail-section + .detail-section{ border-top-color:var(--line-soft); }
.chip{ min-height:24px; padding:4px 8px; border-radius:var(--ui-radius-sm); font-size:11px; font-weight:700; line-height:1.2; letter-spacing:0; }
.chip-good{ background:var(--good-soft); color:var(--good); }
.chip-warn{ background:var(--warn-soft); color:var(--warn); }
.chip-danger{ background:var(--danger-soft); color:var(--danger); }
.chip-neutral{ background:var(--surface-3); color:var(--ink-dim); }
.chat{ background:var(--surface-2); }
.chat-head{ min-height:62px; padding:12px 18px; gap:12px; background:var(--surface); border-bottom:1px solid var(--line); }
.chat-head-info{ gap:10px; }
.avatar{ width:36px; height:36px; font-size:12.5px; }
.chat-head-name{ font-size:14px; font-weight:800; letter-spacing:-.01em; }
.chat-head-sub{ margin-top:2px; font-size:11px; color:var(--ink-faint); }
.btn-details{ border-radius:var(--ui-radius-sm); background:var(--surface-2); padding:7px 10px; font-size:12px; }
.btn-details:hover{ background:var(--surface-3); color:var(--ink); }
.messages{ padding:16px 20px 14px; gap:0; }
.msg-row{ animation:none; }
.bubble{ max-width:min(72%,520px); padding:8px 11px; border-radius:12px 12px 12px 4px; background:var(--bubble-in); border:1px solid var(--line-soft); color:var(--bubble-in-ink); box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; font-size:13px; line-height:1.48; }
.bubble.bot{ background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); color:var(--ink); border-radius:12px 12px 4px 12px; box-shadow:none; }
.bubble.humano{ background:color-mix(in srgb,var(--pop) 10%,var(--surface)); border:1px solid color-mix(in srgb,var(--pop) 28%,var(--line)); color:var(--ink); border-radius:12px 12px 4px 12px; box-shadow:none; }
.bubble .mtime{ margin-top:4px; font-size:10px; line-height:1; color:var(--ink-faint); }
.bubble.bot .mtime, .bubble.humano .mtime{ color:var(--ink-faint); }
.bubble.placeholder{ opacity:.75; }
.bubble.bot.placeholder{ background:transparent; border:1px dashed var(--accent); color:var(--accent-soft-ink,var(--accent)); box-shadow:none; }
.msg-sender{ margin:5px 4px 2px; font-size:10px; font-weight:700; color:var(--ink-faint); letter-spacing:0; }
.sys-note{ max-width:90%; padding:6px 10px; border-radius:var(--ui-radius-sm); font-size:11px; line-height:1.35; }
.sys-block{ margin:8px 0; gap:10px; }
.sys-block .sys-block-title{ font-size:10px; font-weight:700; }
.sys-block .sys-block-text{ font-size:11.5px; margin-top:2px; }
.composer-status{ min-height:46px; padding:7px 16px; gap:10px; background:var(--surface); border-top:1px solid var(--line-soft); }
.composer-status .estado-txt{ min-width:0; gap:7px; font-size:11.5px; font-weight:700; color:var(--ink-dim); }
.composer-status .estado-txt i{ width:7px; height:7px; }
.composer-status button{ flex-shrink:0; min-height:30px; padding:6px 10px; border:1px solid var(--accent); border-radius:var(--ui-radius-sm); background:var(--accent-soft); color:var(--accent-soft-ink,var(--accent)); font-size:11.5px; font-weight:800; box-shadow:none; }
.composer-status button:hover{ background:var(--accent); color:var(--accent-ink); }
.composer-status button{ box-sizing:border-box; display:inline-flex; align-items:center; font-weight:700; }
.composer{ gap:8px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--line); }
.composer textarea{ min-height:38px; padding:9px 11px; border-radius:var(--ui-radius-md); border-color:var(--line); background:var(--surface-2); font-size:13px; line-height:1.35; box-shadow:none; }
.composer textarea::placeholder{ color:var(--ink-faint); }
.composer textarea:hover{ border-color:var(--ink-faint); }
.composer textarea:focus{ border-color:var(--accent); outline:none; }
.composer button{ min-width:76px; min-height:38px; padding:0 14px; border-radius:var(--ui-radius-md); background:var(--accent); color:var(--accent-ink); box-shadow:none; }
.composer button:hover:not(:disabled){ transform:none; filter:brightness(1.03); }
.handoff-banner{ gap:8px; margin-top:10px; padding:9px 11px; border-radius:var(--ui-radius-sm); background:var(--warn-soft); color:var(--warn); font-size:11.5px; line-height:1.4; font-weight:700; }
.switch.on{ box-shadow:none; }
.switch::after{ box-shadow:none; }
.conv-search{ margin:0 14px 8px; }
.conv-search input{ min-height:36px; padding:8px 10px 8px 31px; border-radius:var(--ui-radius-md); background:var(--surface-2); box-shadow:none; }
.conv-row{ gap:3px; padding:10px 14px; border-bottom-color:var(--line-soft); }
.conv-row.active{ background:var(--accent-soft); }
.conv-row:hover{ background:var(--surface-2); }
.conv-name{ font-size:13px; font-weight:700; }
.conv-preview{ font-size:11.5px; line-height:1.35; }
.conv-time{ font-size:10px; }
.detail-label{ margin-bottom:8px; font-size:10.5px; font-weight:700; }
.kv{ padding:4px 0; font-size:12.5px; }
.kv span:first-child{ color:var(--ink-faint); }
.status-banner{ border-radius:var(--ui-radius-sm); padding:8px 10px; }
.status-banner strong{ font-size:12.5px; }
.status-banner small{ font-size:10.5px; }
.refresh-btn{ box-shadow:none; }
.stat-pill{ border-radius:var(--ui-radius-md); box-shadow:none; }
.add-bot{ border-radius:var(--ui-radius-md); box-shadow:none; }
@media (max-width:900px){
.chat-head{ min-height:58px; padding:10px 14px; }
.chat-head-name{ font-size:13.5px; }
.chat-head-sub{ max-width:46vw; }
.messages{ padding:12px 14px; }
.bubble{ max-width:82%; font-size:13px; }
.composer-status{ padding:7px 12px; }
.composer{ padding-left:12px; padding-right:12px; }
.composer-status .estado-txt{ font-size:11px; }
.composer-status button{ padding-left:9px; padding-right:9px; }
}
@media (max-width:520px){
.chat-head{ gap:8px; padding:9px 11px; }
.chat-head-info{ gap:8px; min-width:0; flex:1; }
.chat-head-name{ max-width:42vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-head-sub{ max-width:48vw; font-size:10px; }
.chat-head .chip{ flex-shrink:0; }
.avatar{ width:32px; height:32px; }
.messages{ padding:10px 10px 12px; }
.bubble{ max-width:88%; padding:8px 10px; font-size:12.5px; line-height:1.45; }
.msg-sender{ margin-left:3px; margin-right:3px; font-size:9.5px; }
.sys-note{ max-width:96%; font-size:10.5px; }
.composer-status{ min-height:44px; padding:6px 10px; }
.composer-status .estado-txt{ min-width:0; font-size:10.5px; }
.composer-status button{ min-height:30px; max-width:43%; padding:5px 8px; font-size:10.5px; white-space:nowrap; }
.composer{ gap:6px; padding:8px 9px calc(8px + env(safe-area-inset-bottom)); }
.composer textarea{ min-width:0; min-height:38px; padding:9px 10px; font-size:12.5px; }
.composer button{ min-width:62px; padding:0 10px; font-size:12px; }
.btn-details{ padding:6px 8px; font-size:11px; }
.handoff-banner{ align-items:flex-start; font-size:11px; }
}
@media (prefers-reduced-motion:reduce){
*, *::before, *::after{ scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
/* Botón "Entregado" en Próximos pedidos y estado en Detalles */
.ini-prox.ini-prox-ped{ grid-template-columns:76px minmax(0,1fr) auto auto auto; }
.ini-entregar{ border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:var(--r-md); padding:6px 11px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.ini-entregar:hover{ border-color:var(--good); color:var(--good); background:var(--good-soft); }
.ini-entregar:disabled{ opacity:.6; cursor:wait; }
.pedido-entregado{ display:flex; align-items:center; gap:6px; margin-top:10px; padding:8px 10px; border-radius:var(--r-sm); background:var(--good-soft); color:var(--good); font-size:12.5px; font-weight:700; }
@media (max-width:600px){ .ini-prox.ini-prox-ped{ grid-template-columns:56px minmax(0,1fr) auto; } .ini-prox.ini-prox-ped .ini-prox-monto{ display:none; } }
/* Botones principales sin brillo, como el resto de la app (Campañas, Panel Admin, encabezados). */
.campana-send-btn, .admin-save-btn, .admin-save-all, .header-btn{ box-shadow:none; }
/* === Mi Panorama: más aire en las tarjetas (propuesta ChatGPT, 25/9) === */
#panoramaBody{ padding-bottom:32px; }
#panoramaBody .home-header{ padding-bottom:14px; }
#panoramaBody .pan-grid{ gap:16px; margin-bottom:16px; }
#panoramaBody .pan-grid > .ini-card{ padding:18px 20px; }
#panoramaBody .pan-fila{ min-height:44px; padding:10px 0; }
#panoramaBody .pan-fila-txt b{ font-size:13px; }
#panoramaBody .pan-fila-det{ font-size:12px; white-space:nowrap; }
#panoramaBody .pan-numeros{ gap:22px 28px; padding:8px 0 10px; }
#panoramaBody .pan-numeros b{ font-size:25px; }
#panoramaBody .pan-numeros span{ display:block; margin-top:2px; font-size:12px; }
#panoramaBody .pan-tareas{ padding:18px 20px; }
#panoramaBody .pan-tareas .ini-card-head{ margin-bottom:12px; }
#panoramaBody .pan-tarea{ min-height:48px; padding:12px 0; align-items:center; }
#panoramaBody .pan-tarea b{ font-size:12.5px; }
#panoramaBody .pan-tarea span{ font-size:12px; line-height:1.45; }
@media (max-width:900px){ #panoramaBody .pan-fila{ min-height:42px; } #panoramaBody .pan-numeros{ gap:18px 16px; } }
@media (max-width:600px){
#panoramaBody .home-header{ padding-bottom:10px; }
#panoramaBody .pan-grid{ grid-template-columns:1fr; }
#panoramaBody .pan-grid > .ini-card{ padding:16px; }
#panoramaBody .pan-fila{ min-height:40px; gap:9px; }
#panoramaBody .pan-fila-det{ font-size:11.5px; }
#panoramaBody .pan-numeros{ gap:18px 12px; }
#panoramaBody .pan-numeros b{ font-size:23px; }
#panoramaBody .pan-tareas{ padding:16px; }
#panoramaBody .pan-tarea{ align-items:start; }
}
/* Mi Panorama: los dos agentes lado a lado */
.pan-agentes-card{ margin-bottom:16px !important; }
.pan-agentes{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0; }
.pan-ag{ padding:4px 24px 2px 0; min-width:0; }
.pan-ag + .pan-ag{ padding:4px 0 2px 24px; border-left:1px solid var(--line-soft); }
.pan-ag-cab{ display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; }
.pan-ag-cab .ag-punto{ margin-top:6px; }
.pan-ag-cab b{ display:block; font-size:14.5px; font-weight:650; }
.pan-ag-cab span:not(.ag-punto){ font-size:12.5px; color:var(--ink-faint); }
@media (max-width:700px){ .pan-agentes{ grid-template-columns:1fr; } .pan-ag, .pan-ag + .pan-ag{ padding:4px 0; border-left:0; } .pan-ag + .pan-ag{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft); } }
/* Barra lateral: por encima del contenido (en Firefox el contenido tapaba el
globito con el nombre) y botón para desplegarla con los nombres. */
@media (min-width:901px){
.navrail{ position:relative; z-index:40; }
.nav-expandir{ display:flex; align-items:center; justify-content:center; gap:10px; width:40px; height:32px; margin-top:8px; border:0; border-radius:10px; background:transparent; color:#8A8A8A; cursor:pointer; flex-shrink:0; font:inherit; }
.nav-expandir:hover{ background:#202020; color:#FFFFFF; }
.nav-expandir svg{ width:16px; height:16px; transition:transform .15s ease; }
.nav-expandir-txt{ display:none; }
/* Desplegada: la columna de la barra se agranda (todo el panel usa --rail). */
.grid.nav-expandida{ --rail:208px; }
.grid.nav-expandida .navrail{ align-items:stretch; padding:10px 10px; }
.grid.nav-expandida .navrail .nav-item{ width:auto !important; margin:0 !important; padding:0 12px !important; justify-content:flex-start; gap:11px; font-size:13px; font-weight:600; }
.grid.nav-expandida .navrail .nav-txt{ display:inline !important; white-space:nowrap; }
.grid.nav-expandida .navrail .nav-item::after{ display:none; }
.grid.nav-expandida .navrail .nav-label{ width:auto; height:auto; margin:10px 0 2px; padding:0 12px; background:none; font-size:11px; font-weight:600; color:#6E6E6E; }
.grid.nav-expandida .nav-expandir{ width:auto; justify-content:flex-start; padding:0 12px; }
.grid.nav-expandida .nav-expandir svg{ transform:rotate(180deg); }
.grid.nav-expandida .nav-expandir-txt{ display:inline; font-size:12.5px; font-weight:600; }
}
@media (max-width:900px){ .nav-expandir{ display:none; } }
/* Globito de pedidos nuevos en "Pedidos": sobre el ícono con el menú angosto,
al final del renglón con el menú expandido. Late para que se note. */
.navrail .nav-item[data-nav="datos"], .navrail .nav-item[data-nav="cocina"], .navrail .nav-item[data-nav="reparto"]{ position:relative; }
.nav-globo{ position:absolute; top:1px; right:-3px; min-width:17px; height:17px; padding:0 4px; border-radius:999px;
background:var(--accent); color:var(--accent-ink); font-size:10px; font-weight:800; line-height:17px; text-align:center;
box-shadow:0 0 0 2px var(--surface), var(--glow-accent); animation:globoLate 1.6s ease-in-out infinite; pointer-events:none; }
.grid.nav-expandida .navrail .nav-globo, .navrail.mobile-open .nav-globo{ position:static; margin-left:auto; height:19px; line-height:19px; padding:0 8px; font-size:11px; }
@keyframes globoLate{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.15); } }
@media (prefers-reduced-motion: reduce){ .nav-globo{ animation:none; } }
/* Clientes: solo lo de su negocio (las secciones internas de falince no). */
html[data-negocio] .nav-item:is([data-nav="campanas"],[data-nav="panorama"],[data-nav="novedades"],[data-nav="soon"],[data-nav="agentes"]){display:none !important}
/* Un cliente tiene un solo bot: la columna "Bots" y "Agentes" no le suman
(la pausa general está en Inicio). La columna se pliega (ver aplicarNegocioFijo). */
html[data-negocio] :is(.bots-edge-toggle,[data-back="bots"]){display:none !important}
html[data-negocio] .navrail .nav-item[data-nav="datos"]::after{ content:'Pedidos'; }
/* Un cliente tiene un solo negocio: el selector de agente del CRM no le sirve. */
html[data-negocio] .crm-agente{display:none !important}
/* ===== Piel de Pizza Crazy =====
Falince es una sola app para todos: cada cliente puede tener su piel. Cuando
entra Pizza Crazy (dueño o cocina) se ve con la identidad de su web: grafito,
rojo, crema y amarillo queso, con el damero de mantel. El admin y los demás
clientes siguen con el dorado de falince. Especificidad: html:root[...]
le gana a los :root / :root:not() / :root[data-theme] de arriba. */
html:root[data-negocio="pizzacrazy"]{
--bg:#F3ECDF; --surface:#FBF7EF; --surface-2:#EFE6D6; --surface-3:#E4D8C3;
--ink:#231A1A; --ink-dim:#6B5B55; --ink-faint:#958680;
--line:#DCCDB8; --line-soft:#E8DDCB;
--accent:#C81F27; --accent-ink:#FFFFFF; --accent-soft:#F7DCDC; --accent-soft-ink:#8E1419;
--pop:#C81F27; --pop-ink:#FFFFFF;
--bubble-in:#FBF7EF; --bubble-in-ink:#231A1A;
--glow-accent: 0 0 0 1px rgba(200,31,39,.35);
--queso:#C98A0E;
--damero:conic-gradient(#D7282F 90deg,transparent 90deg 180deg,#D7282F 180deg 270deg,transparent 270deg);
--ini-spark-line:#C9B8A6; --ini-spark-area:rgba(200,31,39,.07); --ini-barra:#E3D3BD;
}
@media (prefers-color-scheme: dark){
html:root[data-negocio="pizzacrazy"]:not([data-theme="light"]){
--bg:#121216; --surface:#1C1C22; --surface-2:#25252C; --surface-3:#2F2F37;
--ink:#F3EFE6; --ink-dim:#B4ADA3; --ink-faint:#7C766E;
--line:#34343C; --line-soft:#26262D;
--accent:#FF4A4F; --accent-ink:#FFFFFF; --accent-soft:#3A1A1C; --accent-soft-ink:#FF9EA1;
--pop:#F2B33D; --pop-ink:#1B1B20;
--bubble-in:#25252C; --bubble-in-ink:#F3EFE6;
--glow-accent: 0 0 0 1px rgba(255,74,79,.4);
--queso:#F2B33D;
--ini-spark-line:#4E4A46; --ini-spark-area:rgba(255,74,79,.08); --ini-barra:#3A2C2C;
}
}
html:root[data-negocio="pizzacrazy"][data-theme="dark"]{
--bg:#121216; --surface:#1C1C22; --surface-2:#25252C; --surface-3:#2F2F37;
--ink:#F3EFE6; --ink-dim:#B4ADA3; --ink-faint:#7C766E;
--line:#34343C; --line-soft:#26262D;
--accent:#FF4A4F; --accent-ink:#FFFFFF; --accent-soft:#3A1A1C; --accent-soft-ink:#FF9EA1;
--pop:#F2B33D; --pop-ink:#1B1B20;
--bubble-in:#25252C; --bubble-in-ink:#F3EFE6;
--glow-accent: 0 0 0 1px rgba(255,74,79,.4);
--queso:#F2B33D;
--ini-spark-line:#4E4A46; --ini-spark-area:rgba(255,74,79,.08); --ini-barra:#3A2C2C;
}
/* El damero de la web, como sello: debajo de la barra de arriba. */
html[data-negocio="pizzacrazy"] .topbar{position:relative}
html[data-negocio="pizzacrazy"] .topbar::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:8px;background:var(--damero) 0 0/8px 8px;pointer-events:none;z-index:5}
/* El comecocos al lado del nombre del local. */
html[data-negocio="pizzacrazy"] .topbar-negocio::before{content:"";display:inline-block;width:22px;height:22px;margin-right:8px;vertical-align:-6px;background:url(/pedir/pizzacrazy/logo-pc.png) center/contain no-repeat}
/* Lo que tenía el dorado escrito a mano. */
html[data-negocio="pizzacrazy"] :is(.portada-frase,.portada-relato b){color:var(--queso)}
html[data-negocio="pizzacrazy"] .portada-acciones button:hover{border-color:var(--accent)}
html[data-negocio="pizzacrazy"] .portada-acciones button.principal{background:var(--accent);border-color:var(--accent);color:#fff}
html[data-negocio="pizzacrazy"] .portada-acciones button:focus-visible{outline-color:var(--queso)}
/* Pedidos en joda: marca "Cliente nuevo" / "Bloqueado" y la caja para bloquear. */
.marca-cliente{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;vertical-align:1px;background:var(--warn-soft);color:var(--warn)}
.marca-cliente.bloq{background:var(--danger-soft);color:var(--danger)}
.comanda .marca-cliente{margin-left:0;align-self:flex-start}
.comanda .marcas{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px}
.marca-entrega{display:inline-flex;align-items:center;gap:5px;padding:1px 9px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--surface-2);color:var(--ink-dim)}
.marca-entrega.delivery{background:var(--accent);color:var(--accent-ink)}
.marca-entrega svg{width:13px;height:10px}
.comanda[data-comanda]{cursor:pointer}
.comanda.abierta{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.cd-marcas{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:14px}
.cd-hora{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--ink-dim)}
.cd-hora.pronto{color:var(--warn)} .cd-hora.atrasada{color:var(--danger)}
#cocinaDetalle .comanda-items{margin:8px 0 4px}
.verif-caja{display:grid;gap:7px;margin:0 0 16px;padding:12px 14px;border:1px solid var(--warn);background:var(--warn-soft);border-radius:var(--r-md);font-size:13px}
.verif-caja b{color:var(--warn);font-size:13.5px} .verif-caja span{color:var(--ink-dim);line-height:1.45}
.verif-caja .admin-save-btn{justify-self:start}
.verif-caja.ok{border-color:var(--good);background:var(--good-soft)} .verif-caja.ok b{color:var(--good)}
.bloqueo-caja{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 16px;padding:10px 12px;border:1px dashed var(--line);border-radius:var(--r-md);font-size:13px;color:var(--ink-dim)}
.bloqueo-caja .link-btn{margin:0;color:var(--danger)}
.bloqueo-caja.bloqueado{border-style:solid;border-color:var(--danger);background:var(--danger-soft);color:var(--danger)}
.bloqueo-caja.bloqueado .link-btn{color:var(--ink)}
/* Solo web: no hay campo para escribirle al cliente (salía por WhatsApp). */
html[data-negocio="pizzacrazy"] #composer{display:none !important}
html[data-negocio="pizzacrazy"] .portada-acciones button.principal:hover{background:#E8343B;border-color:#E8343B}
/* Pestañas (Ahora / Más tarde / Pedidos…): rojo con letra blanca, también al pasar el cursor. */
html[data-negocio="pizzacrazy"] .cocina-tab.activa{color:#fff}
html[data-negocio="pizzacrazy"] .cocina-tab.activa:hover{background:#E8343B}
html[data-negocio="pizzacrazy"] .cocina-tab.activa b{color:#fff}
/* Pastilla de estado que se ilumina al cambiar: en queso en vez de dorado. */
html[data-negocio="pizzacrazy"] .datos-estado-pill.oro{color:#FFE2A6;background:rgb(242 179 61 / .2);box-shadow:0 0 16px 1px rgb(242 179 61 / .3)}
html[data-negocio="pizzacrazy"] .datos-estado-pill.oro .datos-pill-dot{background:#F2B33D}
html[data-negocio="pizzacrazy"] .impacto{animation-name:chipImpactoPC}
html[data-negocio="pizzacrazy"] .impacto::after{animation-name:chipOndaPC}
@keyframes chipImpactoPC{
0%{background:#FFF1D2;color:#1B1B20;box-shadow:0 0 0 2px #fff,0 0 40px 12px rgb(255 74 79 / .7);transform:scale(1.15)}
12%{background:rgb(255 74 79 / .25);color:#FFE2A6;box-shadow:0 0 10px 2px rgb(255 74 79 / .4);transform:scale(1.04)}
20%{background:#F2B33D;color:#1B1B20;box-shadow:0 0 36px 10px rgb(255 74 79 / .6);transform:scale(1.1)}
100%{transform:none}
}
@keyframes chipOndaPC{0%{box-shadow:0 0 0 0 rgb(255 74 79 / .7)}100%{box-shadow:0 0 0 26px rgb(255 74 79 / 0)}}
@keyframes comandaImpactoPC{0%{box-shadow:0 0 0 2px #FF4A4F,0 0 50px 10px rgba(255,74,79,.5)}30%{box-shadow:0 0 0 1px #D7282F,0 0 30px 4px rgba(255,74,79,.3)}100%{box-shadow:none}}
html[data-negocio="pizzacrazy"] .comanda.impacto{animation-name:comandaImpactoPC}
/* Cocina: el menú muestra solo "Cocina" (y los títulos de grupo, vacíos, se van). */
html[data-rol="cocina"] .navrail .nav-item:not([data-nav="cocina"]),
html[data-rol="cocina"] .navrail :is(.nav-label,.nav-section,.nav-sep,hr){ display:none !important; }
/* ===== Celu y tablet (1/10) ===== */
.admin-guardar-barra{display:flex;justify-content:flex-end;margin:14px 20px 4px}
.composer-status[hidden]{display:none !important}
/* Detalles del CRM: cada parte en su tarjeta, con su título y aire entre una y otra. */
#detailsBody{display:flex;flex-direction:column;gap:10px;padding:12px !important}
#detailsBody > .det-cab, #detailsBody > .detail-section{margin:0 !important;padding:14px 14px 16px !important;border:1px solid var(--line-soft) !important;
border-radius:14px;background:var(--surface-2)}
#detailsBody > .detail-section + .detail-section{border-top:1px solid var(--line-soft) !important}
#detailsBody .detail-label{display:flex;align-items:center;gap:8px;margin:0 0 12px !important;font-size:12px !important;font-weight:700 !important;color:var(--ink-dim) !important;letter-spacing:.01em}
#detailsBody .detail-label::before{content:"";width:6px;height:6px;flex-shrink:0;background:var(--accent);transform:rotate(45deg)}
#detailsBody .ia-toggle-row{padding:0 !important}
.det-datos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.det-dato{display:flex;flex-direction:column;gap:3px;padding:9px 11px;border-radius:10px;background:var(--surface);border:1px solid var(--line-soft);min-width:0}
.det-dato.ancho{grid-column:1/-1}
.det-dato span{font-size:11px;color:var(--ink-faint)}
.det-dato b{font-size:13.5px;font-weight:650;overflow-wrap:anywhere}
.det-dato b.falta{color:var(--ink-faint);font-weight:500}
.det-total{display:flex;justify-content:space-between;align-items:baseline;padding:11px 12px;border-radius:10px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.det-total span{font-size:12.5px;color:var(--ink-dim);font-weight:600}
.det-total b{font-size:16px;font-weight:750;color:var(--accent)}
.det-cab{display:flex;flex-direction:column;gap:6px}
.det-cab-nombre{font-family:var(--titulos);font-stretch:112%;font-size:19px;font-weight:650;letter-spacing:-.01em;line-height:1.15;text-transform:capitalize}
.det-cab-linea{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px}
.det-cab-link{margin:0 !important;font-size:12.5px}
.det-cab-estado{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.det-cab-estado small{font-size:12px;color:var(--ink-faint)}
.det-pedido .kv{padding:5px 0}
.det-items{list-style:none;margin:0 0 10px;padding:12px 14px;display:flex;flex-direction:column;gap:7px;
background:var(--surface);border:1px solid var(--line-soft);border-radius:10px}
.det-items li{display:flex;gap:10px;align-items:baseline;font-size:14px;font-weight:600}
.det-items b{min-width:18px;color:var(--accent);font-variant-numeric:tabular-nums}
.det-vacio{font-size:13px;color:var(--ink-faint);margin-bottom:10px}
.det-pedido .kv-total{margin-top:6px;padding-top:10px;border-top:1px solid var(--line-soft)}
.det-pedido .kv-total span:last-child{font-size:15px;font-weight:700}
/* Pestañas principales como botones: un grupo dentro de una caja, el elegido en dorado. */
.cocina-tabs{display:flex;width:fit-content;max-width:calc(100% - 40px);gap:4px;padding:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
background:var(--surface);border:1px solid var(--line-soft) !important;border-radius:14px}
.cocina-tabs::-webkit-scrollbar{display:none}
.cocina-tab{flex-shrink:0;white-space:nowrap;align-items:center;padding:9px 16px;border-radius:10px;font-size:14px;transition:background-color .15s ease,color .15s ease}
.cocina-tab:hover{background:var(--surface-2)}
.cocina-tab.activa{background:var(--accent);color:#17130B}
.cocina-tab.activa:hover{background:#D6B97F}
.cocina-tab.activa b{color:#17130B;opacity:.72}
.cocina-tab.activa::after{display:none}
.cocina-tab:focus-visible{outline-offset:2px;border-radius:10px}
/* Categorías (filtro dentro de una pestaña): botones redondeados más chicos, solo con borde. */
.chips-cat{display:flex;gap:8px;flex-wrap:wrap}
.chips-cat .cocina-tab{padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;font-size:13.5px}
.chips-cat .cocina-tab:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:transparent}
.chips-cat .cocina-tab.activa{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.chips-cat .cocina-tab.activa b{color:var(--accent);opacity:1}
.chips-cat .chip-nueva{border-style:dashed;color:var(--accent)}
/* Formulario "Agregar producto / Nueva sección" (reemplaza los prompt del navegador). */
.form-producto{max-width:440px;width:100%;display:flex;flex-direction:column;gap:12px}
.form-producto .modal-head{margin-bottom:0}
.fp-ayuda{margin:-4px 0 2px;font-size:13px;color:var(--ink-dim);line-height:1.45}
.fp-campo{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink-dim)}
.fp-campo small{font-weight:500;color:var(--ink-faint)}
.fp-campo :is(input,select,textarea){font:inherit;font-size:14px;font-weight:500;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;width:100%}
.fp-campo textarea{resize:vertical;min-height:62px}
.fp-campo :is(input,select,textarea):focus{outline:none;border-color:var(--accent);box-shadow:var(--glow-accent)}
.fp-dos{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
.fp-plata{position:relative}
.fp-plata i{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--ink-faint);font-weight:600}
.fp-plata input{padding-left:24px;font-variant-numeric:tabular-nums}
.fp-check{flex-direction:row;align-items:center;gap:8px;padding-bottom:10px;color:var(--ink);font-weight:600}
.fp-check input{width:18px;height:18px;accent-color:var(--accent)}
.fp-error{margin:0;padding:8px 10px;border-radius:var(--r-md);background:var(--danger-soft);color:var(--danger);font-size:13px;font-weight:600}
@media (max-width:700px){
.cocina-tabs{max-width:calc(100% - 32px);gap:2px}
.cocina-tab{padding:8px 12px;font-size:13.5px}
.chips-cat{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.chips-cat::-webkit-scrollbar{display:none}
.chips-cat > *{flex-shrink:0;white-space:nowrap}
}
/* Pedidos en compu: el pedido y la dirección se cortan con "…" (el detalle
completo está al tocar la fila) para que el botón de la caja entre entero. */
@media (min-width:701px){
.datos-table td[data-col="items"]{max-width:230px}
.datos-table td[data-col="direccion"]{max-width:170px}
.datos-table td[data-col="accion"]{white-space:nowrap;max-width:none;overflow:visible;width:1%}
.datos-table td[data-col="pago"]{max-width:150px}
}
@media (min-width:701px) and (max-width:1500px){
.datos-table td,.datos-table th{padding-left:12px !important;padding-right:12px !important}
.datos-table td[data-col="items"]{max-width:200px}
.datos-table td[data-col="direccion"]{max-width:140px}
}
.admin-field-box .admin-textarea{resize:vertical;min-height:44px;line-height:1.45;padding:8px 0;white-space:pre-wrap}
.contactos-kpis{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
/* Portada: en pantallas altas (tablet parada) el alto mínimo dejaba un hueco vacío arriba. */
@media (max-width:1024px){ .ini-portada{min-height:0} .portada-cont{padding-top:96px} }
/* Tablet: en el CRM entran la lista y la charla una al lado de la otra. */
@media (min-width:701px) and (max-width:900px){
body:is([data-view="list"],[data-view="chat"]) .grid{display:grid;grid-template-columns:300px minmax(0,1fr);height:100%;overflow:hidden}
body:is([data-view="list"],[data-view="chat"]) .pane[data-pane="list"],
body:is([data-view="list"],[data-view="chat"]) .pane[data-pane="chat"]{display:flex;min-height:0;height:100%}
body:is([data-view="list"],[data-view="chat"]) .grid{grid-template-rows:100%}
body:is([data-view="list"],[data-view="chat"]) .pane[data-pane="list"]{grid-column:1;grid-row:1;border-right:1px solid var(--line);border-bottom:0}
body:is([data-view="list"],[data-view="chat"]) .pane[data-pane="chat"]{grid-column:2;grid-row:1}
.chat-head-info{min-width:0;overflow:hidden}
}
/* Laptop chica / tablet acostada: lista y detalles más angostos para que la charla respire. */
@media (min-width:901px) and (max-width:1200px){
.grid, .grid.nav-collapsed{ grid-template-columns:var(--rail) 220px 280px 1fr 260px !important; }
.grid.bots-collapsed, .grid.nav-collapsed.bots-collapsed{ grid-template-columns:var(--rail) 0px 280px 1fr 260px !important; }
}
@media (max-width:900px){
/* El cartelito de la barra angosta de la compu salía al lado del nombre en el
menú del celu ("Pedidos Pedidos"). */
.navrail .nav-item::after{ content:none !important; display:none !important; }
/* Ayuda: el índice pasa a una fila de pestañas que se desliza, como en la web. */
.faq-web-lado{position:static}
.faq-web-lado .faq-web-indice{position:static;transform:none;margin-top:0}
.faq-web-indice{flex-direction:row;gap:8px;overflow-x:auto;padding:0 0 4px;scrollbar-width:none}
.faq-web-indice::-webkit-scrollbar{display:none}
.faq-web-indice::before{display:none}
.faq-web-indice button{flex-shrink:0;flex-direction:row;align-items:baseline;gap:6px;padding:8px 14px;font-size:15px;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
.faq-web-indice button::before{display:none}
.faq-web-indice button.activo{border-color:var(--accent);color:var(--accent)}
.faq-web-indice button small{font-size:11.5px}
.faq-web-indice button small::before{content:"· "}
}
@media (max-width:700px){
/* Panel Admin: las listas cortas (horas, minutos) de a dos; los textos
(nombre, dirección, zona) a todo el ancho para que no se corten. */
.admin-tarjeta .admin-field-grid{gap:12px 12px}
.admin-tarjeta .admin-field:has(.admin-field-box input:not([data-solo-numeros])),
.admin-tarjeta .admin-field:has(textarea){grid-column:1/-1}
.admin-tarjeta{padding:14px 14px 16px}
.admin-tarjetas{gap:12px}
.admin-opc-btn{padding:10px 11px;font-size:13.5px}
/* Guardar siempre a mano: barra pegada abajo de la pantalla. */
.admin-guardar-barra{position:fixed;left:0;right:0;bottom:0;z-index:60;margin:0;padding:18px 16px calc(14px + env(safe-area-inset-bottom));
background:linear-gradient(180deg,transparent,var(--bg) 40%)}
[data-admin-panel="negocio"]{padding-bottom:84px}
.admin-guardar-barra .admin-save-all{width:100%;padding:13px}
/* Inicio: la fecha y el interruptor arriba, en su renglón, sin pisar el saludo. */
.portada-arriba{position:static;margin-bottom:22px;flex-direction:column;align-items:stretch;gap:12px}
.portada-cont{padding-top:18px !important;padding-left:18px !important;padding-right:18px !important}
.portada-negocio{font-size:13px;gap:12px}
.portada-local{padding-left:12px}
/* Interruptor a todo el ancho: texto a la izquierda, botón a la derecha. */
.portada-ia{font-size:13px;justify-content:space-between;padding:8px 10px 8px 16px;border-radius:14px}
.portada-ia > span:first-child{flex:1}
.portada-saludo{font-size:40px;margin-bottom:8px}
.portada-frase{font-size:16.5px;min-height:0;margin-bottom:18px !important;max-width:24ch}
.portada-relato{padding-left:12px;border-left:2px solid rgba(244,244,246,.18)}
.portada-relato p{font-size:14.5px;line-height:1.5;margin-bottom:4px}
/* Botones del mismo ancho, uno abajo del otro; el segundo, más liviano. */
.portada-acciones{flex-direction:column;gap:6px;margin-top:20px}
.portada-acciones button{width:100%;padding:12px 16px;font-size:14px;border-radius:12px;text-align:center}
.portada-acciones button:not(.principal){border-color:rgba(244,244,246,.14);background:rgba(244,244,246,.06)}
.portada-cont{padding-bottom:20px !important}
/* Tarjetas de arriba: más bajas y con la etiqueta en un renglón. */
.ini-kpi-label{font-size:12.5px;white-space:nowrap}
.ini-kpi-label .solo-ancho{display:none}
.ini-kpi-label span{overflow:hidden;text-overflow:ellipsis}
.ini-kpi-valor{font-size:26px}
.ini-kpi-pie{font-size:12px;min-height:0}
.ini-spark-wrap{height:30px;margin-top:auto}
.ini-kpi{display:flex !important;gap:4px;padding-bottom:0}
.ini-col-area{height:110px}
}
@media (max-width:1100px){
/* Pedidos (y las demás tablas): en celu y tablet cada fila es una tarjeta con todo
a la vista. Antes la tabla era más ancha que la pantalla y el estado y los
botones de la caja quedaban afuera. */
.datos-table-scroll{overflow:visible !important;border:0 !important;background:transparent !important;margin:0 16px !important}
.datos-table, .datos-table tbody{display:block;width:100%;min-width:0 !important}
.datos-table thead{display:none}
.datos-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:14px 14px 12px;margin-bottom:10px;
background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg)}
.datos-table td{display:flex;gap:10px;align-items:baseline;grid-column:1/-1;padding:0 !important;border:0 !important;min-width:0;white-space:normal !important;font-size:13.5px}
.datos-table td::before{content:attr(data-label);flex:0 0 74px;font-size:11.5px;color:var(--ink-faint)}
.datos-table td:first-child{grid-column:1;font-size:15.5px;font-weight:700}
.datos-table td:first-child::before,.datos-table td[data-col="items"]::before,.datos-table td[data-col="estado"]::before,.datos-table td[data-col="accion"]::before{display:none}
.datos-table td[data-col="estado"]{grid-column:2;grid-row:1;justify-self:end}
.datos-table td[data-col="items"]{font-size:14px;color:var(--ink);padding-bottom:4px !important;border-bottom:1px solid var(--line-soft) !important;margin-bottom:2px}
.datos-table td[data-col="accion"]{margin-top:6px}
.datos-table td[data-col="accion"] > *{flex:1}
.datos-table td[data-col="accion"] button{width:100%;padding:10px}
.datos-table td:empty{display:none}
.datos-table tbody td{background-image:none !important;max-width:none !important;overflow:visible;width:auto !important}
.datos-table tbody tr:nth-child(even){background:var(--surface) !important}
/* "Dirección: Retira en el local" repetía lo que ya dice "Entrega". */
.datos-table td[data-col="direccion"]:has(.datos-vacio){display:none}
}
/* Tablet: las tarjetas de a dos. */
@media (min-width:701px) and (max-width:1100px){
.datos-table tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.datos-table tr{margin-bottom:0;align-content:start}
.datos-table-scroll{margin:0 20px !important}
}
@media (max-width:700px){
.datos-toolbar-titulo{display:none}
.datos-toolbar{padding:4px 16px 12px !important;justify-content:flex-start !important}
/* Cocina: los tickets a todo el ancho. */
.cocina-grid{grid-template-columns:minmax(0,1fr)}
/* Encabezados con foto más bajos: antes ocupaban media pantalla. */
.pane[data-pane] .home-header{min-height:0;padding:34px 18px 44px !important}
.pane[data-pane] .home-header::after{left:16px;right:16px;bottom:12px}
.pane[data-pane] .home-header p{font-size:13.5px;line-height:1.45}
.pane{border-bottom:0 !important}
/* Menos aire entre secciones: las líneas con rombo dejaban huecos enormes. */
.linea-rombo{margin:14px 16px}
/* Pestañas: siempre en un renglón; si no entran, se deslizan. */
/* Cocina: el título con la hora y abajo las dos herramientas, chicas y a la izquierda. */
.cocina-top{min-height:0;padding:44px 18px 34px !important;gap:10px 14px}
.cocina-top .cocina-tools{margin-left:0;width:100%;align-self:auto}
.cocina-top .cocina-tools .quick-action{padding:7px 12px;font-size:12.5px}
/* Contactos: los tres números en una fila, sin el iconito. */
.contactos-kpis{gap:8px !important}
.contactos-kpis .info-card{padding:10px 12px}
.contactos-kpis .info-card-icon{display:none}
.faq-web{padding:0 16px}
.faq-web-indice button small{display:none}
}
/* ===== MINIMAL-1 · panel minimalista (19/10/2026) =====
Sin video de nubes ni fotos de paisaje: fondo liso con los colores del tema,
mucho aire, una línea fina y el dorado solo donde importa. */
.ini-portada{background:transparent !important;color:var(--ink);min-height:0;margin:0 !important;border-radius:0 !important;border-bottom:1px solid var(--line);align-items:flex-start}
.portada-velo{display:none !important}
.portada-cont{padding:30px clamp(22px,4vw,48px) 28px !important;display:block}
.portada-arriba{position:static !important;margin-bottom:26px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.portada-negocio{color:var(--ink-dim)}
.portada-local{border-left-color:var(--line);color:var(--ink)}
.portada-ia{background:transparent;border-color:var(--line);color:var(--ink-dim);backdrop-filter:none}
.portada-saludo{font-size:clamp(28px,3.4vw,42px);max-width:none;margin:0 0 8px;font-weight:650}
.portada-frase{color:var(--ink-dim);min-height:0;max-width:60ch;font-size:clamp(15px,1.5vw,18px);font-weight:400;margin:0 0 14px}
.portada-relato p{color:var(--ink-dim)}
.portada-relato b{color:var(--ink);font-weight:700}
.portada-acciones button{background:transparent;border-color:var(--line);color:var(--ink);backdrop-filter:none}
.portada-acciones button:hover{border-color:var(--accent)}
.portada-acciones button.principal{background:var(--accent);border-color:var(--accent);color:#17130B}
/* Encabezados de cada sección: sin foto, solo título y una línea fina al pie */
.pane[data-pane] .home-header::before,.cocina-top::before{display:none !important}
.pane[data-pane] .home-header::after,.cocina-top::after{display:none !important}
.pane[data-pane] .home-header{min-height:0 !important;padding:30px 28px 18px !important;align-items:flex-start !important;border-bottom:1px solid var(--line)}
.pane[data-pane] .home-header .home-greeting-title,.cocina-top h1{color:var(--ink) !important;font-size:clamp(24px,2.6vw,32px) !important}
.pane[data-pane] .home-header p{color:var(--ink-dim) !important}
.cocina-top{min-height:0 !important;padding:30px 28px 16px !important;align-items:flex-end !important;border-bottom:1px solid var(--line)}
.cocina-top .cocina-reloj{color:var(--ink-dim)}
.cocina-top .quick-action{background:transparent;border-color:var(--line);color:var(--ink);backdrop-filter:none}
.cocina-top .quick-action:hover{border-color:var(--accent)}
@media (max-width:760px){
.portada-cont{padding:20px 18px 22px !important}
.portada-arriba{margin-bottom:18px}
.pane[data-pane] .home-header{padding:22px 18px 14px !important}
.cocina-top{padding:22px 18px 14px !important}
}
/* ===== MINIMAL-2 · la frase del día, chica y abajo a la derecha ===== */
.ini-portada{position:relative}
.ini-portada .portada-cont{padding-bottom:50px !important}
.ini-portada .portada-frase{position:absolute;right:clamp(22px,4vw,48px);bottom:16px;margin:0 !important;min-height:0;max-width:34ch;text-align:right;font-size:12.5px !important;font-weight:500;line-height:1.35;letter-spacing:0;font-stretch:100%;color:var(--accent);opacity:.9}
.ini-portada .portada-frase.cambiando{opacity:0}
@media (max-width:760px){
.ini-portada .portada-cont{padding-bottom:46px !important}
.ini-portada .portada-frase{right:18px;bottom:14px;max-width:26ch;font-size:12px !important}
}
/* ===== MINIMAL-3 · botones del Inicio más abajo y frase del día un poco más grande ===== */
.ini-portada .portada-acciones{margin-top:40px}
.ini-portada .portada-frase{font-size:15px !important;max-width:38ch}
.ini-portada .portada-cont{padding-bottom:58px !important}
@media (max-width:760px){
.ini-portada .portada-acciones{margin-top:30px}
.ini-portada .portada-frase{font-size:14px !important;max-width:30ch}
.ini-portada .portada-cont{padding-bottom:68px !important}
}
/* ===== PULIDO 20/10 · tablet y PC: todo alineado y con el mismo orden ===== */
/* Inicio: la portada ya termina con su propia línea; la del rombo pegada debajo hacía "dos líneas juntas". */
#homeBody > .linea-rombo{display:none}
.portada-acciones[hidden]{display:none !important}
#homeBody > #homeResto{padding-top:22px}
/* Reparto: ocupa todo el ancho y arranca alineado con el título (antes quedaba centrado y flotando). */
.rp{max-width:none;margin-inline:0;padding:20px 28px 28px;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:20px 24px}
.rp-resumen div{padding:18px 24px}
.rp-resumen b{font-size:28px}
.rp > .rp-col:first-of-type{grid-column:1}
.rp-col:last-child{position:sticky;top:12px}
@media (max-width:900px){.rp{grid-template-columns:minmax(0,1fr);padding:16px 16px 24px}.rp-col:last-child{position:static}}
/* Cocina: la personalización de cada producto, ordenada */
.comanda-pers{display:grid;gap:10px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.pers-tit{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.pers-fila{display:grid;gap:5px}
.pers-prod{font-size:17px;font-weight:800;color:var(--ink);line-height:1.2}
.pers-mods{display:flex;flex-wrap:wrap;gap:6px}
.pers-mods i{font-style:normal;font-size:16px;font-weight:600;padding:3px 10px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink)}
/* Cocina → Stock: apagar / prender toda la sección */
.stk-masivo{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.stk-masivo b{display:block;font-size:17px}
.stk-masivo small{color:var(--ink-dim);font-size:13.5px}
.stk-masivo-bot{display:flex;gap:10px;flex-wrap:wrap}
.stk-masivo-bot .pr-btn:disabled{opacity:.4;cursor:default}
.rp-ref{margin:4px 0 2px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);font-size:14.5px;line-height:1.35}
.rp-ref b{color:var(--accent)}
/* Panel Admin → Promos */
.pr-cont{padding:0 20px 28px;display:grid;gap:16px}
.pr-intro{padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink-dim);font-size:14.5px;line-height:1.55}
.pr-intro b{color:var(--ink)}
.pr-lista{display:grid;gap:12px}
.pr-card{display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);flex-wrap:wrap}
.pr-card.pausada,.pr-card.vencida{opacity:.62}
.pr-sello{flex:none;display:grid;place-items:center;min-width:68px;height:68px;padding:0 10px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:20px;line-height:1;text-align:center}
.pr-info{flex:1 1 260px;min-width:0;display:grid;gap:3px}
.pr-nombre{font-size:18px;font-weight:700;color:var(--ink)}
.pr-estado{display:inline-block;margin-left:8px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;vertical-align:2px;background:#2E7D4F;color:#fff}
.pr-card.pausada .pr-estado{background:var(--surface-3,#333);color:var(--ink-dim)}
.pr-card.vencida .pr-estado{background:var(--danger);color:#1A0E0E}
.pr-det{font-size:14px;color:var(--ink-dim);line-height:1.45}
.pr-acc{display:flex;gap:8px;flex-wrap:wrap}
.pr-btn{min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.pr-btn:hover{border-color:var(--accent)}
.pr-btn.peligro{color:var(--danger)}
.pr-vacio{display:grid;gap:6px;justify-items:center;padding:46px 20px;border:1px dashed var(--line);border-radius:16px;text-align:center;color:var(--ink-dim)}
.pr-vacio b{font-size:20px;color:var(--ink)}
.pr-form{display:block}
.pr-form small{font-weight:500;color:var(--ink-faint)}
.pr-tipos{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.pr-tipo{display:grid;gap:3px;text-align:left;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.pr-tipo b{font-size:16px}.pr-tipo span{font-size:13px;color:var(--ink-dim)}
.pr-tipo.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.pr-solo[hidden]{display:none}
.pr-chks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.pr-chk{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:14.5px}
.pr-chk input,.pr-dia input{width:20px;height:20px;accent-color:var(--accent);flex:none}
.pr-prods{margin-top:10px}
.pr-prods summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--accent);font-weight:600}
.pr-prods .pr-chks{max-height:340px;overflow:auto;padding:4px}
.pr-dias{display:flex;gap:8px;flex-wrap:wrap}
.pr-dia{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:15px}
.pr-error{margin:14px 0 0;padding:10px 14px;border-radius:10px;background:var(--danger-soft);color:var(--danger);font-weight:600}
/* CRM, columna Detalles: el título "Detalles" no queda pegado al encabezado de arriba. */
.pane.details .pane-head{padding-top:22px}
.pane.details #detailsBody{padding-top:6px}
/* "Nada para llevar por ahora": grande, para verlo de lejos; sin la caja del GPS ocupa todo el ancho. */
.rp-vacio{padding:70px 24px;gap:10px;min-height:340px;align-content:center}
.rp-vacio svg{width:130px;height:94px;margin-bottom:10px}
.rp-vacio img{width:110px;height:110px;margin-bottom:10px}
.rp-vacio b{font-size:28px;letter-spacing:-.01em}
.rp-vacio span{font-size:18px;max-width:34ch}
@media (min-width:901px){body.rp-gps-oculto .rp{grid-template-columns:minmax(0,1fr)}}
.rp-gps-cab{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* Ocultar/Mostrar vive arriba, al lado de "Usar el celu como GPS"; oculta, la caja no deja ni rastro. */
.rp-gps-botones{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
/* Celu: los dos botones del GPS uno al lado del otro; arriba del Inicio todo alineado a la izquierda. */
@media (max-width:700px){
.rp-gps-botones{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;justify-content:stretch}
.rp-gps-botones .quick-action{width:100%;min-height:50px;padding:8px 10px;font-size:14px;text-align:center;line-height:1.2}
.rp-tiendas{grid-template-columns:1fr !important}
.rp-vacio{padding:36px 16px;min-height:0}
.rp-vacio svg{width:96px;height:70px}
.rp-vacio img{width:80px;height:80px}
.rp-vacio b{font-size:22px}
.rp-vacio span{font-size:15px}
.ini-portada .portada-arriba{align-items:flex-start;justify-content:flex-start}
.ini-portada .portada-arriba .portada-negocio{justify-content:flex-start;flex-wrap:wrap;text-align:left}
.ini-portada .portada-ia{align-self:flex-start}
}
.rp-gps-toggle .t-mostrar{display:none}
body.rp-gps-oculto .rp-gps-toggle .t-ocultar{display:none}
body.rp-gps-oculto .rp-gps-toggle .t-mostrar{display:inline}
.rp-gps.plegado{display:none}
/* Botón "Poner en pantalla completa", al lado de Salir. */
.topbar-full{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:border-color .2s,color .2s}
.topbar-full svg{width:16px;height:16px;flex:none}
.topbar-full:hover{border-color:var(--accent)}
.topbar-full.on{border-color:var(--accent);color:var(--accent)}
.topbar-full[hidden]{display:none}
body .topbar .topbar-controls{gap:18px}
@media (max-width:860px){.topbar-full span{display:none}.topbar-full{padding:9px}}
/* Inicio: saludo, frase, relato y botones en una sola columna, sin cosas flotando en las esquinas. */
.ini-portada{min-height:0 !important}
.ini-portada .portada-cont{padding:26px clamp(22px,4vw,40px) 30px !important}
.ini-portada .portada-arriba{margin-bottom:28px}
.ini-portada .portada-saludo{margin:0 0 8px}
.ini-portada .portada-frase{position:static !important;justify-self:start !important;align-self:auto !important;grid-column:auto !important;display:block;max-width:60ch;margin:0 0 16px !important;text-align:left !important;font-size:clamp(15px,1.5vw,18px) !important;line-height:1.4;color:var(--accent);opacity:1}
.ini-portada .portada-relato{margin-top:4px}
/* La frase del día va abajo a la derecha, en la misma fila que los botones. */
@media (min-width:761px){
.ini-portada .portada-cont{position:relative}
.ini-portada .portada-frase{position:absolute !important;right:clamp(22px,4vw,40px);bottom:40px;margin:0 !important;max-width:34ch;text-align:right !important;font-size:15px !important}
}
.ini-portada .portada-acciones{margin-top:22px}
/* Cabecera del chat del CRM: el texto largo se corta con "…" y la etiqueta nunca se pisa con él. */
.chat-head-info{flex:1 1 0;min-width:0}
.chat-head-info > div{min-width:0}
.chat-head > :not(.chat-head-info){flex:none}
.chat-head-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Cocina: tickets grandes, para leer de lejos y tocar con las manos ocupadas. */
.cocina-top{padding:22px 28px 14px !important}
.cocina-tabs{margin:0 28px 20px}
.cocina-tabs{gap:6px;padding:5px}
.cocina-tab{font-size:16px;padding:11px 22px;gap:10px;align-items:center}
.cocina-tab b{font-size:14px;margin-left:2px}
.chips-cat .cocina-tab{padding:8px 18px;font-size:14.5px}
.cocina-cuerpo{padding:0 28px 28px}
.cocina-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px}
.comanda{border-radius:16px}
.comanda-cab{margin:0 18px;padding:18px 0 14px;gap:14px}
.comanda-num{font-size:34px}
.comanda-num::before{content:"#";opacity:.45;font-weight:600;margin-right:2px}
.comanda-cab .n{font-size:19px}
.comanda-reloj{font-size:34px}
.comanda-cab .s{font-size:15px}
.comanda-cuerpo{padding:16px 18px 18px;gap:14px}
.comanda-items{gap:12px}
.comanda-items li{font-size:23px;font-weight:700;line-height:1.25;gap:14px}
.comanda-items li b{min-width:36px;font-size:27px}
.comanda-items li small.gustos{font-size:17px;margin-top:4px}
.comanda-nota{font-size:18px;border-left-width:4px;padding:4px 0 4px 12px}
.comanda .marca-entrega{font-size:15px}
.comanda .admin-save-btn{padding:17px 14px;font-size:19px}
.comanda-botones{gap:10px}
.comanda-listo-ya,.comanda-deshacer{font-size:16px;padding:0 18px}
.comanda-botones .comanda-listo-ya{flex:1;min-height:58px;font-size:19px}
/* Los botones siempre abajo de la tarjeta y a la misma altura que los de la comanda de al lado. */
.comanda-escuchar{margin-top:auto}
.comanda-botones{margin-top:auto}
.comanda-escuchar + .comanda-botones{margin-top:0}
.comanda-imprimir{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 20px;border-radius:12px;border:1.5px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:17px;font-weight:700;cursor:pointer}
.comanda-imprimir svg{width:24px;height:24px;flex:none}
.comanda-imprimir:hover{border-color:var(--accent)}
/* Las dos etiquetas de arriba (Retira / Cliente nuevo) del mismo tamaño y alineadas. */
.comanda .marca-entrega,.comanda .marca-cliente{display:inline-flex;align-items:center;font-size:13px;line-height:1;padding:7px 14px;border-radius:999px;letter-spacing:.05em}
.comanda .marca-cliente{border:1px solid color-mix(in srgb,var(--warn) 55%,transparent);background:transparent}
.comanda-listo-ya{background:#2E7D4F;border-color:#2E7D4F;color:#fff;font-weight:700}
.comanda-listo-ya:hover{background:#38925D;border-color:#38925D;color:#fff}
.comanda-escuchar{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:60px;border-radius:14px;border:1.5px solid var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font:inherit;font-size:20px;font-weight:700;cursor:pointer;transition:background .15s,color .15s}
.comanda-escuchar svg{width:28px;height:28px;flex:none}
.comanda-escuchar:hover{background:color-mix(in srgb,var(--accent) 26%,transparent)}
.comanda-escuchar .t-det{display:none}
.comanda-escuchar.leyendo{background:var(--accent);color:#17130B}
.comanda-escuchar.leyendo .t-esc{display:none}
.comanda-escuchar.leyendo .t-det{display:inline}
/* Stock: cada producto con su "Hay / Se acabó" bien claro y, abajo, las unidades (opcional). */
.stk-guia{margin:0 0 18px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.stk-guia-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.stk-guia-cab b{font-size:15px}
.stk-guia-btn{min-height:36px;padding:0 14px;font-size:14px}
.stk-guia.oculta{padding-top:10px;padding-bottom:10px}
.stk-guia.oculta .stk-guia-cab{margin-bottom:0}
.stk-guia.oculta ol{display:none}
.stk-guia ol{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.stk-guia li{display:flex;gap:12px;font-size:14px;line-height:1.5;color:var(--ink-dim)}
.stk-guia li > span{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#17130B;font-weight:800;font-size:13px}
.stk-guia strong{display:block;color:var(--ink);font-size:14.5px;margin-bottom:2px}
.stk-guia em{font-style:normal;color:var(--ink);font-weight:700}
.stk-fila{grid-template-columns:minmax(0,1fr) auto !important;gap:10px 16px !important;padding:14px 16px !important}
.stk-nom b{font-size:18px}
.stk-nom small{font-size:13.5px}
.stk-estado{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.stk-estado button{height:48px;padding:0 22px;border:0;background:transparent;color:var(--ink-dim);font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.stk-estado button.on.si{background:#2E7D4F;color:#fff}
.stk-estado button.on.no{background:var(--danger);color:#1A0E0E}
.stk-estado button:not(.on):hover{background:var(--surface-2);color:var(--ink)}
.stk-unid{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:10px;border-top:1px dashed var(--line-soft)}
.stk-unid > span{font-size:14px;color:var(--ink-dim);font-weight:600}
.stk-unid > span i{font-style:normal;font-weight:500;color:var(--ink-faint)}
.stk-ctrl button{width:48px;height:48px}
.stk-ctrl input{width:120px;height:48px}
.stk-ctrl input::placeholder{font-size:13px;font-weight:500;color:var(--ink-faint)}
/* Inicio: gráfico "Lo que más se vende". */
.ini-ventas .vent-total{display:flex;align-items:baseline;gap:10px;margin:2px 0 12px;flex-wrap:wrap}
.vent-total b{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1}
.vent-total span{font-size:13px;color:var(--ink-dim)}
.vent-apilada{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:2px;margin-bottom:14px}
.vent-apilada i{display:block;min-width:4px}
.vent-cats{display:grid;gap:9px;margin-bottom:18px}
.vent-cat{display:grid;grid-template-columns:12px 96px minmax(0,1fr) 40px;align-items:center;gap:10px;font-size:13.5px}
.vent-pto{width:10px;height:10px;border-radius:3px}
.vent-cat-nom{font-weight:600}
.vent-cat b{text-align:right;font-variant-numeric:tabular-nums}
.vent-barra{height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.vent-barra > div{height:100%;border-radius:5px}
.vent-sub{margin:4px 0 8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.vent-prod{padding:6px 0}
.vent-prod > div:first-child{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;margin-bottom:5px}
.vent-prod em{font-style:normal;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.vent-nota{margin:12px 0 0;font-size:12.5px;color:var(--ink-dim)}
/* ===== TEMA-GRIS-1 · negro y grises, minimalista (25/10/2026) =====
Pedido de Álvaro: tonos negros y grises, bordes finos, sin dorado, letra Inter.
Va al final para ganarle a las capas de arriba. El tema propio de un cliente
(html:root[data-negocio=...]) tiene más peso y sigue mandando sobre este. */
html:root[data-theme]{
--bg:#0A0A0A; --surface:#111111; --surface-2:#171717; --surface-3:#1F1F1F;
--ink:#EDEDED; --ink-dim:#A1A1A1; --ink-faint:#6B6B6B;
--line:#262626; --line-soft:#1C1C1C;
--accent:#FAFAFA; --accent-ink:#0A0A0A; --accent-soft:#1C1C1C; --accent-soft-ink:#EDEDED;
--pop:#FAFAFA; --pop-ink:#0A0A0A;
--good:#7CC9A0; --good-soft:#12201A;
--warn:#E3A27C; --warn-soft:#2A1D16;
--danger:#E58A8A; --danger-soft:#2A1717;
--bubble-in:#171717; --bubble-in-ink:#EDEDED;
--glow-accent:0 0 0 1px rgba(255,255,255,.28);
--glow-good:0 0 0 2px rgba(124,201,160,.18);
--shadow:none;
--titulos:'Inter',system-ui,sans-serif;
--r-sm:6px; --r-md:8px; --r-lg:14px;
--linea-color:rgba(255,255,255,.08);
--ini-spark-line:#7A7A7A; --ini-spark-area:rgba(255,255,255,.045); --ini-barra:#2A2A2A;
--borde-hover:#333333;
}
/* Una sola letra en todo el panel (también en los textos de los gráficos SVG). */
html:root body *{font-family:'Inter',system-ui,sans-serif !important;font-stretch:100% !important}
html:root *{scrollbar-color:#2A2A2A transparent}
::selection{background:rgba(255,255,255,.18)}
h1,.home-greeting-title,.ini-titulo,.portada-saludo{font-weight:600 !important;letter-spacing:-.035em}
.pane[data-pane] .home-header .home-greeting-title,.cocina-top h1{color:#FAFAFA !important}
/* Barra de arriba: lisa, con una línea fina al pie. */
body .topbar{background:var(--bg);box-shadow:inset 0 -1px 0 var(--line-soft)}
body .topbar::after{display:none}
html[data-negocio="pizzacrazy"] body .topbar::after{display:block}
body .topbar .brand img{filter:none}
body .topbar .brand span{font-weight:400;font-size:11.5px;letter-spacing:.42em;color:var(--ink)}
.topbar-negocio{font-size:12.5px;font-weight:600;letter-spacing:.08em}
.topbar-negocio::before{width:6px;height:6px;border-radius:50%;transform:none;background:var(--ink-dim)}
body .topbar .topbar-salir{font-size:12.5px;font-weight:600;letter-spacing:.08em;box-shadow:inset 0 -1px 0 rgba(255,255,255,.3)}
body .topbar .topbar-salir:hover{box-shadow:inset 0 -1px 0 #FAFAFA}
.topbar-full{border-radius:8px;padding:7px 12px;font-weight:500;border-color:var(--line)}
.topbar-full:hover{border-color:var(--borde-hover);background:var(--surface-2)}
.topbar-full.on{border-color:var(--ink-dim);color:var(--ink)}
/* Menú de iconos: el elegido se marca con un recuadro fino, no con un bloque de color. */
@media (min-width:901px){
html:root[data-theme] .navrail{background:#0D0D0D;box-shadow:inset 0 0 0 1px var(--line-soft)}
html:root[data-theme] .grid.nav-collapsed .navrail{box-shadow:inset 0 0 0 1px var(--line-soft)}
.navrail .nav-label{background:var(--line)}
.navrail a, .navrail .nav-item{color:#767676;border-radius:9px}
.navrail .nav-item:hover{background:var(--surface-2);color:var(--ink)}
.navrail .nav-item.active{background:var(--surface-3);color:#FAFAFA;box-shadow:inset 0 0 0 1px var(--borde-hover)}
.navrail .nav-item::after{background:var(--surface-3);color:var(--ink);box-shadow:0 0 0 1px var(--borde-hover),0 8px 24px rgba(0,0,0,.45)}
}
/* Celu: el cajón del menú igual que en la compu, sin una caja por opción. */
@media (max-width:900px){
.navrail{background:var(--bg)}
.navrail a, .navrail .nav-item{background:transparent;color:var(--ink-dim)}
.navrail .nav-item.active{background:var(--surface-3);color:#FAFAFA;box-shadow:inset 0 0 0 1px var(--borde-hover)}
}
/* Tarjetas: planas, borde de 1 px que se aclara al pasar el mouse y una luz blanca muy tenue. */
:is(.ini-kpi,.ini-card,.comanda,.admin-producto,.admin-tarjeta,.camp-box,.agot-tile,.tarde-item,.agent-card,.info-card,.faq-item){transition:border-color .2s ease}
:is(.ini-kpi,.ini-card,.comanda,.admin-producto,.admin-tarjeta,.camp-box,.agot-tile,.tarde-item,.agent-card,.info-card,.faq-item):hover{border-color:var(--borde-hover)}
:is(.ini-kpi,.ini-card,.comanda,.admin-producto,.admin-tarjeta,.camp-box,.agot-tile,.tarde-item,.agent-card,.info-card,.faq-item)::before{
background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.04), transparent 60%)}
/* Separadores: una línea fina que se desvanece en las puntas, sin rombo. */
.linea-rombo,.home-header::after,.section-title::before{background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent) center / 100% 1px no-repeat !important}
.datos-table thead th:not(:first-child)::before{display:none}
#detailsBody .detail-label::before{width:5px;height:5px;border-radius:50%;transform:none;background:var(--ink-faint)}
/* Inicio */
.portada-saludo{color:#FAFAFA;letter-spacing:-.04em}
.ini-portada .portada-frase{color:var(--ink-dim)}
.portada-acciones button{border-radius:8px}
.portada-acciones button:hover{border-color:var(--borde-hover);background:var(--surface-2)}
.portada-acciones button.principal{color:var(--accent-ink)}
.portada-acciones button.principal:hover{background:#D9D9D9;border-color:#D9D9D9}
.portada-ia,.ini-ia{border-radius:10px}
.ini-kpi-valor{font-weight:600;letter-spacing:-.035em;color:#FAFAFA}
.ini-spark-dot{background:#FAFAFA;box-shadow:0 0 0 3px var(--surface)}
/* La tendencia de cada tarjeta, un poco adentro: el punto de "hoy" ya no se corta en la esquina. */
.ini-spark-wrap{margin-left:0;margin-right:0;margin-bottom:14px}
.faq-web-grupo h2{color:var(--ink-faint)}
/* Avatares: todos en gris parejo con borde fino (antes, tonos tierra). */
.avatar{background:var(--surface-3) !important;color:#D4D4D4 !important;box-shadow:inset 0 0 0 1px var(--borde-hover)}
/* Etiquetas de estado: el color se queda (es información) pero con borde fino. */
.chip{border-radius:6px;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 24%,transparent)}
.chip-neutral{background:transparent;color:var(--ink-dim)}
.datos-estado-pill.oro{color:#F5F5F5;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.datos-estado-pill.oro .datos-pill-dot{background:#FAFAFA}
/* Interruptores: apagado, bolita gris clara; prendido, fondo blanco (o verde) y bolita negra. */
.switch{background:#2A2A2A;box-shadow:inset 0 0 0 1px var(--borde-hover)}
.switch::after{background:#BDBDBD}
.switch.on{background:var(--accent);box-shadow:none}
.switch.on::after{background:#0A0A0A}
.switch.status-switch.on{background:var(--good);box-shadow:none}
/* Textos que quedaban fijos en marrón oscuro o blanco sobre el acento. */
.cocina-tab.activa,.cocina-tab.activa b,.comanda-escuchar.leyendo,.stk-guia li > span,.pr-sello{color:var(--accent-ink)}
.cocina-tab.activa:hover{background:#D9D9D9}
/* "Pedido nuevo": el destello pasa de dorado a blanco. */
@keyframes chipImpacto{
0%{background:#FAFAFA;color:#0A0A0A;box-shadow:0 0 0 2px #fff,0 0 36px 10px rgba(255,255,255,.5);transform:scale(1.12)}
12%{background:rgba(255,255,255,.14);color:#F5F5F5;box-shadow:0 0 10px 2px rgba(255,255,255,.22);transform:scale(1.04)}
20%{background:#E5E5E5;color:#0A0A0A;box-shadow:0 0 30px 8px rgba(255,255,255,.4);transform:scale(1.08)}
100%{transform:none}
}
@keyframes chipOnda{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}100%{box-shadow:0 0 0 26px rgba(255,255,255,0)}}
@keyframes comandaImpacto{0%{box-shadow:0 0 0 2px #FAFAFA,0 0 50px 10px rgba(255,255,255,.3)}30%{box-shadow:0 0 0 1px #D4D4D4,0 0 30px 4px rgba(255,255,255,.18)}100%{box-shadow:none}}
/* ----- Mosaico y vidrio (segunda pasada, 25/10) -----
Cada parte es una baldosa: esquinas grandes, 10 px entre una y otra, translúcida
sobre un fondo con luz suave (sin algo detrás, el vidrio no se nota). */
html:root[data-theme]{
--r-lg:20px; --r-md:10px;
--vidrio:rgba(255,255,255,.035); --vidrio-borde:rgba(255,255,255,.085); --vidrio-borde-hover:rgba(255,255,255,.17);
--vidrio-brillo:inset 0 1px 0 rgba(255,255,255,.06); --vidrio-blur:blur(18px) saturate(140%);
--mosaico:10px; --mosaico-izq:0px;
}
@media (max-width:900px){ html:root[data-theme]{ --mosaico-izq:10px; } }
html:root body{background:
radial-gradient(1100px 700px at 6% -14%, rgba(255,255,255,.08), transparent 60%),
radial-gradient(900px 700px at 106% 110%, rgba(255,255,255,.05), transparent 60%),
radial-gradient(700px 520px at 60% 40%, rgba(255,255,255,.022), transparent 70%),
var(--bg)}
body .topbar{background:transparent;box-shadow:none}
.ini-kpi,.ini-card,.ag-card,.ag-otro,.agent-card,.ct-resumen,.ct-tabla,.camp-box,.tool-card,.nov-bloque,.admin-tarjeta,.admin-cancha-card,.pr-card,.pr-intro,.stk-masivo,.stk-guia,.comanda,.cocina-vacio,.rp-resumen,.rp-vacio,.rp-gps,.rp-hechos,.rp-vivo,.faq-web .faq-item{
background:var(--vidrio) !important;border:1px solid var(--vidrio-borde) !important;border-radius:20px !important;
box-shadow:var(--vidrio-brillo);-webkit-backdrop-filter:var(--vidrio-blur);backdrop-filter:var(--vidrio-blur)}
.ini-kpi:hover,.ini-card:hover,.ag-card:hover,.ag-otro:hover,.agent-card:hover,.ct-resumen:hover,.ct-tabla:hover,.camp-box:hover,.tool-card:hover,.nov-bloque:hover,.admin-tarjeta:hover,.admin-cancha-card:hover,.pr-card:hover,.pr-intro:hover,.stk-masivo:hover,.stk-guia:hover,.comanda:hover,.cocina-vacio:hover,.rp-resumen:hover,.rp-vacio:hover,.rp-gps:hover,.rp-hechos:hover,.rp-vivo:hover,.faq-web .faq-item:hover{border-color:var(--vidrio-borde-hover) !important}
.campana-list,.campana-preview,.info-card,.empty-card,.admin-producto,.agot-tile,.agot-ficha,.stk-fila,.rp-ped,.tarde-item,#detailsBody > .det-cab,#detailsBody > .detail-section{background:var(--vidrio) !important;border:1px solid var(--vidrio-borde) !important;border-radius:14px !important}
/* Encabezados: también son baldosas, con una luz en la esquina. */
.pane[data-pane] .home-header,.cocina-top,#homePortada.ini-portada{
margin:var(--mosaico) var(--mosaico) 0 var(--mosaico-izq) !important;border:1px solid var(--vidrio-borde) !important;border-radius:22px !important;
background:radial-gradient(900px 300px at 0% 0%, rgba(255,255,255,.06), transparent 70%), var(--vidrio) !important;
box-shadow:var(--vidrio-brillo);-webkit-backdrop-filter:var(--vidrio-blur);backdrop-filter:var(--vidrio-blur)}
.pane[data-pane] .home-header{padding:24px 26px 20px !important}
/* Todo alineado al mismo borde, con 10 px entre baldosas (antes 16 a 28 px según la sección). */
.pane-body > :is(.ag-lista,.ag-nota,.ct-resumen,.camp-box,.ct-tabla,.ini-card,.nov-lista){margin:var(--mosaico) var(--mosaico) 0 var(--mosaico-izq) !important}
.pane-body > :is(.camp-shell,.pan-grid,.datos-tabs,.campana-footer){padding-left:var(--mosaico-izq) !important;padding-right:var(--mosaico) !important}
.pane-body > :is(.camp-shell,.pan-grid){padding-top:var(--mosaico) !important;gap:var(--mosaico) !important}
.pane-body > .linea-rombo,.ini > .linea-rombo{display:none}
.ag-lista,.nov-lista{gap:var(--mosaico) !important}
#homeBody > #homeResto{padding-top:0 !important}
.ini{padding:var(--mosaico) var(--mosaico) 24px var(--mosaico-izq) !important;gap:var(--mosaico) !important}
.ini-kpis,.ini-cuerpo{gap:var(--mosaico) !important}
.datos-toolbar{padding-left:var(--mosaico-izq) !important;padding-right:var(--mosaico) !important}
/* Panel Admin: su contenido venía centrado en 1200 px (estilo inline); acá ocupa todo el ancho como las demás. */
#panelAdminBody > div[style*="max-width:1200px"]{max-width:none !important;margin:0 !important}
#panelAdminBody .pane-head,#panelAdminBody .home-header{margin-left:var(--mosaico-izq) !important}
.datos-tabs{padding-top:var(--mosaico) !important}
.cocina-tabs{margin:var(--mosaico) var(--mosaico) var(--mosaico) var(--mosaico-izq) !important}
.cocina-cuerpo{padding:0 var(--mosaico) 24px var(--mosaico-izq) !important}
.cocina-grid{gap:var(--mosaico) !important}
.rp{padding:var(--mosaico) var(--mosaico) 24px var(--mosaico-izq) !important;gap:var(--mosaico) !important}
@media (min-width:1101px){
.datos-table-scroll{margin:0 var(--mosaico) var(--mosaico) var(--mosaico-izq) !important;border:1px solid var(--vidrio-borde) !important;border-radius:20px !important;background:var(--vidrio)}
}
.datos-table thead th{background-color:rgba(18,18,18,.72) !important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* CRM: menú, lista, chat y detalles, cada uno en su baldosa. */
@media (min-width:901px){
html:root[data-theme] .navrail,html:root[data-theme] .grid.nav-collapsed .navrail{border-radius:20px;background:var(--vidrio);
box-shadow:var(--vidrio-brillo),inset 0 0 0 1px var(--vidrio-borde);-webkit-backdrop-filter:var(--vidrio-blur);backdrop-filter:var(--vidrio-blur)}
.pane:is([data-pane="bots"],[data-pane="list"],[data-pane="chat"],[data-pane="details"]){
margin:var(--mosaico) var(--mosaico) var(--mosaico) 0;border:1px solid var(--vidrio-borde) !important;border-radius:20px;overflow:hidden;
background:var(--vidrio) !important;box-shadow:var(--vidrio-brillo);-webkit-backdrop-filter:var(--vidrio-blur);backdrop-filter:var(--vidrio-blur)}
.pane[data-pane="chat"] :is(.chat,.messages){background:transparent !important}
.chat-head,.composer,.composer-status{background:transparent !important;border-color:var(--vidrio-borde) !important}
}
/* Ventanas y el cajón de detalle: vidrio más opaco, para leer cómodo. */
.modal-box,.datos-drawer{background:rgba(20,20,20,.84) !important;border-color:var(--vidrio-borde) !important;
-webkit-backdrop-filter:blur(28px) saturate(140%);backdrop-filter:blur(28px) saturate(140%)}
.modal-box{border-radius:20px !important}
@media (max-width:900px){ .navrail{background:rgba(10,10,10,.8);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)} }
/* Mi Panorama: cada agente en su propia tarjeta (con 3 o más, el tercero quedaba corrido y con borde suelto). */
.pan-agentes{grid-template-columns:repeat(auto-fit,minmax(320px,1fr)) !important;gap:14px !important}
.pan-ag,.pan-ag + .pan-ag{padding:16px 18px !important;border:1px solid var(--vidrio-borde) !important;border-radius:16px;background:rgba(255,255,255,.025)}
/* Selector de modo en la barra de arriba: tres puntitos de color. */
.modo-sel{display:inline-flex;align-items:center;gap:6px;padding:4px 6px;border:1px solid var(--line);border-radius:999px;margin-left:16px;flex:none}
.modo-sel button{width:18px;height:18px;border-radius:50%;border:1px solid var(--borde-hover);padding:0;cursor:pointer;transition:transform .15s}
.modo-sel button:hover{transform:scale(1.12)}
.modo-sel button[data-m="oscuro"]{background:#0A0A0A}
.modo-sel button[data-m="crema"]{background:#F3EEE3}
.modo-sel button[data-m="claro"]{background:#FFFFFF}
.modo-sel button.on{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--ink)}
/* ----- modo crema ----- */
html:root:root[data-modo="crema"]{color-scheme:light; --info:#2563EB;
--bg:#E7DDC7; --surface:#FFFDF7; --surface-2:#F6EEDC; --surface-3:#EADFC8;
--ink:#2B2620; --ink-dim:#645B4E; --ink-faint:#8F8576; --line:#D3C7AE; --line-soft:#E0D5BD;
--good:#2F7D55; --good-soft:#DDEBDD; --warn:#B0602F; --warn-soft:#F3E1D2; --danger:#B03A3A; --danger-soft:#F3DADA;
--bubble-in:#FFFDF7; --bubble-in-ink:#2B2620; --shadow:none;
--linea-color:rgba(43,38,32,.12); --ini-spark-line:#8F8576; --ini-spark-area:rgba(43,38,32,.06); --ini-barra:#D3C7AE; --borde-hover:#BDAE8F;
--vidrio:#FFFDF7; --vidrio-borde:rgba(90,65,20,.22); --vidrio-borde-hover:rgba(90,65,20,.42); --vidrio-brillo:0 1px 2px rgba(70,50,15,.10), 0 8px 22px rgba(70,50,15,.07);}
html:root:root[data-modo="crema"]{--accent:#2B2620; --accent-ink:#FFFDF7; --accent-soft:#EADFC8; --accent-soft-ink:#2B2620; --pop:#2B2620; --pop-ink:#FFFDF7; --glow-accent:0 0 0 1px rgba(43,38,32,.3);}
html:root:root[data-modo="crema"] body{background:radial-gradient(1000px 640px at 8% -12%, rgba(255,248,230,.95), transparent 62%), var(--bg)}
html:root:root[data-modo="crema"] body .topbar{background:var(--bg);box-shadow:inset 0 -1px 0 var(--line)}
html:root:root[data-modo="crema"] body .topbar .brand img{filter:invert(1) brightness(.25)}
html:root:root[data-modo="crema"] body .topbar .topbar-salir{box-shadow:inset 0 -1px 0 rgba(43,38,32,.35)}
html:root:root[data-modo="crema"] body .topbar .topbar-salir:hover{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
html:root:root[data-modo="crema"] .pane[data-pane] .home-header .home-greeting-title,html:root:root[data-modo="crema"] .cocina-top h1,html:root:root[data-modo="crema"] .portada-saludo,html:root:root[data-modo="crema"] .ini-kpi-valor{color:var(--ink) !important}
html:root:root[data-modo="crema"] .pane[data-pane] .home-header,html:root:root[data-modo="crema"] .cocina-top,html:root:root[data-modo="crema"] #homePortada.ini-portada{background:radial-gradient(900px 300px at 0% 0%, rgba(255,248,230,.95), transparent 70%), var(--vidrio) !important}
html:root:root[data-modo="crema"] .navrail,html:root:root[data-modo="crema"] .grid.nav-collapsed .navrail{background:var(--vidrio) !important;box-shadow:var(--vidrio-brillo),inset 0 0 0 1px var(--vidrio-borde) !important}
html:root:root[data-modo="crema"] .navrail a,html:root:root[data-modo="crema"] .navrail .nav-item{color:var(--ink-dim)}
html:root:root[data-modo="crema"] .navrail .nav-item:hover{background:var(--surface-3);color:var(--ink)}
html:root:root[data-modo="crema"] .navrail .nav-item.active{background:var(--surface-3);color:var(--ink);box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="crema"] .navrail .nav-item::after{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--borde-hover),0 8px 24px rgba(43,38,32,.12)}
html:root:root[data-modo="crema"] .campana-list,html:root:root[data-modo="crema"] .campana-preview,html:root:root[data-modo="crema"] .info-card,html:root:root[data-modo="crema"] .empty-card,html:root:root[data-modo="crema"] .admin-producto,html:root:root[data-modo="crema"] .agot-tile,html:root:root[data-modo="crema"] .agot-ficha,html:root:root[data-modo="crema"] .stk-fila,html:root:root[data-modo="crema"] .rp-ped,html:root:root[data-modo="crema"] .tarde-item,html:root:root[data-modo="crema"] #detailsBody > .det-cab,html:root:root[data-modo="crema"] #detailsBody > .detail-section{background:#F6EEDC !important}
html:root:root[data-modo="crema"] .navrail,html:root:root[data-modo="crema"] .grid.nav-collapsed .navrail{background:#F1E8D3 !important}
html:root:root[data-modo="crema"] .avatar{color:var(--ink-dim) !important;box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="crema"] .modal-box,html:root:root[data-modo="crema"] .datos-drawer{background:var(--surface) !important;border-color:var(--line) !important}
html:root:root[data-modo="crema"] .datos-table thead th{background-color:rgba(255,253,247,.96) !important}
html:root:root[data-modo="crema"] .datos-estado-pill.oro{color:var(--ink);background:rgba(43,38,32,.07);box-shadow:inset 0 0 0 1px rgba(43,38,32,.18)}
html:root:root[data-modo="crema"] .datos-estado-pill.oro .datos-pill-dot{background:var(--ink)}
html:root:root[data-modo="crema"] .switch{background:var(--line);box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="crema"] .switch::after{background:#FFFFFF;box-shadow:0 1px 2px rgba(43,38,32,.3)}
html:root:root[data-modo="crema"] .switch.on{background:var(--accent)}
html:root:root[data-modo="crema"] .switch.on::after{background:var(--accent-ink)}
html:root:root[data-modo="crema"] .switch.status-switch.on{background:var(--good)}
html:root:root[data-modo="crema"] .ini-spark-dot{background:var(--ink);box-shadow:0 0 0 3px var(--surface)}
html:root:root[data-modo="crema"] .portada-acciones button.principal:hover,html:root:root[data-modo="crema"] .cocina-tab.activa:hover{background:var(--ink-dim);border-color:var(--ink-dim)}
html:root:root[data-modo="crema"] .ini-portada video{opacity:.22}
html:root:root[data-modo="crema"] ::selection{background:rgba(43,38,32,.14)}
html:root:root[data-modo="crema"] *{scrollbar-color:var(--line) transparent}
/* ----- modo claro ----- */
html:root:root[data-modo="claro"]{color-scheme:light; --info:#2563EB;
--bg:#E4E8EE; --surface:#FFFFFF; --surface-2:#F3F5F8; --surface-3:#E7EBF0;
--ink:#17181A; --ink-dim:#555A63; --ink-faint:#858A94; --line:#D3D9E1; --line-soft:#E1E5EB;
--good:#1F7A4D; --good-soft:#DCEFE4; --warn:#B0602F; --warn-soft:#F5E3D6; --danger:#B3363A; --danger-soft:#F6DEDF;
--bubble-in:#FFFFFF; --bubble-in-ink:#17181A; --shadow:none;
--linea-color:rgba(23,24,26,.12); --ini-spark-line:#858A94; --ini-spark-area:rgba(23,24,26,.06); --ini-barra:#D3D9E1; --borde-hover:#B5BCC7;
--vidrio:#FFFFFF; --vidrio-borde:rgba(20,30,50,.14); --vidrio-borde-hover:rgba(20,30,50,.32); --vidrio-brillo:0 1px 2px rgba(20,30,50,.09), 0 8px 22px rgba(20,30,50,.07);}
html:root:root[data-modo="claro"]{--accent:#17181A; --accent-ink:#FFFFFF; --accent-soft:#E7EBF0; --accent-soft-ink:#17181A; --pop:#17181A; --pop-ink:#FFFFFF; --glow-accent:0 0 0 1px rgba(23,24,26,.3);}
html:root:root[data-modo="claro"] body{background:radial-gradient(1000px 640px at 8% -12%, rgba(255,255,255,.95), transparent 62%), var(--bg)}
html:root:root[data-modo="claro"] body .topbar{background:var(--bg);box-shadow:inset 0 -1px 0 var(--line)}
html:root:root[data-modo="claro"] body .topbar .brand img{filter:invert(1) brightness(.25)}
html:root:root[data-modo="claro"] body .topbar .topbar-salir{box-shadow:inset 0 -1px 0 rgba(23,24,26,.35)}
html:root:root[data-modo="claro"] body .topbar .topbar-salir:hover{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
html:root:root[data-modo="claro"] .pane[data-pane] .home-header .home-greeting-title,html:root:root[data-modo="claro"] .cocina-top h1,html:root:root[data-modo="claro"] .portada-saludo,html:root:root[data-modo="claro"] .ini-kpi-valor{color:var(--ink) !important}
html:root:root[data-modo="claro"] .pane[data-pane] .home-header,html:root:root[data-modo="claro"] .cocina-top,html:root:root[data-modo="claro"] #homePortada.ini-portada{background:radial-gradient(900px 300px at 0% 0%, rgba(255,255,255,.95), transparent 70%), var(--vidrio) !important}
html:root:root[data-modo="claro"] .navrail,html:root:root[data-modo="claro"] .grid.nav-collapsed .navrail{background:var(--vidrio) !important;box-shadow:var(--vidrio-brillo),inset 0 0 0 1px var(--vidrio-borde) !important}
html:root:root[data-modo="claro"] .navrail a,html:root:root[data-modo="claro"] .navrail .nav-item{color:var(--ink-dim)}
html:root:root[data-modo="claro"] .navrail .nav-item:hover{background:var(--surface-3);color:var(--ink)}
html:root:root[data-modo="claro"] .navrail .nav-item.active{background:var(--surface-3);color:var(--ink);box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="claro"] .navrail .nav-item::after{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--borde-hover),0 8px 24px rgba(23,24,26,.12)}
html:root:root[data-modo="claro"] .campana-list,html:root:root[data-modo="claro"] .campana-preview,html:root:root[data-modo="claro"] .info-card,html:root:root[data-modo="claro"] .empty-card,html:root:root[data-modo="claro"] .admin-producto,html:root:root[data-modo="claro"] .agot-tile,html:root:root[data-modo="claro"] .agot-ficha,html:root:root[data-modo="claro"] .stk-fila,html:root:root[data-modo="claro"] .rp-ped,html:root:root[data-modo="claro"] .tarde-item,html:root:root[data-modo="claro"] #detailsBody > .det-cab,html:root:root[data-modo="claro"] #detailsBody > .detail-section{background:#F3F5F8 !important}
html:root:root[data-modo="claro"] .navrail,html:root:root[data-modo="claro"] .grid.nav-collapsed .navrail{background:#EEF1F5 !important}
html:root:root[data-modo="claro"] .avatar{color:var(--ink-dim) !important;box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="claro"] .modal-box,html:root:root[data-modo="claro"] .datos-drawer{background:var(--surface) !important;border-color:var(--line) !important}
html:root:root[data-modo="claro"] .datos-table thead th{background-color:rgba(255,255,255,.97) !important}
html:root:root[data-modo="claro"] .datos-estado-pill.oro{color:var(--ink);background:rgba(23,24,26,.07);box-shadow:inset 0 0 0 1px rgba(23,24,26,.18)}
html:root:root[data-modo="claro"] .datos-estado-pill.oro .datos-pill-dot{background:var(--ink)}
html:root:root[data-modo="claro"] .switch{background:var(--line);box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="claro"] .switch::after{background:#FFFFFF;box-shadow:0 1px 2px rgba(23,24,26,.3)}
html:root:root[data-modo="claro"] .switch.on{background:var(--accent)}
html:root:root[data-modo="claro"] .switch.on::after{background:var(--accent-ink)}
html:root:root[data-modo="claro"] .switch.status-switch.on{background:var(--good)}
html:root:root[data-modo="claro"] .ini-spark-dot{background:var(--ink);box-shadow:0 0 0 3px var(--surface)}
html:root:root[data-modo="claro"] .portada-acciones button.principal:hover,html:root:root[data-modo="claro"] .cocina-tab.activa:hover{background:var(--ink-dim);border-color:var(--ink-dim)}
html:root:root[data-modo="claro"] .ini-portada video{opacity:.22}
html:root:root[data-modo="claro"] ::selection{background:rgba(23,24,26,.14)}
html:root:root[data-modo="claro"] *{scrollbar-color:var(--line) transparent}
/* ----- modo menta ----- */
html:root:root[data-modo="menta"]{color-scheme:light; --info:#2563EB;
--bg:#D9EBE1; --surface:#F7FCF9; --surface-2:#EBF6EF; --surface-3:#D8EADF;
--ink:#15261D; --ink-dim:#4D6659; --ink-faint:#7C9486; --line:#BFD9CA; --line-soft:#D2E6DA;
--good:#1F7A4D; --good-soft:#D8EEE0; --warn:#B0602F; --warn-soft:#F5E3D6; --danger:#B3363A; --danger-soft:#F6DEDF;
--bubble-in:#F7FCF9; --bubble-in-ink:#15261D; --shadow:none;
--linea-color:rgba(21,38,29,.12); --ini-spark-line:#7C9486; --ini-spark-area:rgba(21,38,29,.06); --ini-barra:#BFD9CA; --borde-hover:#9FC2AE;
--vidrio:#F7FCF9; --vidrio-borde:rgba(20,70,45,.18); --vidrio-borde-hover:rgba(20,70,45,.38); --vidrio-brillo:0 1px 2px rgba(15,60,35,.09), 0 8px 22px rgba(15,60,35,.07);}
html:root:root[data-modo="menta"]{--accent:#15261D; --accent-ink:#F7FCF9; --accent-soft:#D8EADF; --accent-soft-ink:#15261D; --pop:#15261D; --pop-ink:#F7FCF9; --glow-accent:0 0 0 1px rgba(21,38,29,.3);}
html:root:root[data-modo="menta"] body{background:radial-gradient(1000px 640px at 8% -12%, rgba(235,255,245,.95), transparent 62%), var(--bg)}
html:root:root[data-modo="menta"] body .topbar{background:var(--bg);box-shadow:inset 0 -1px 0 var(--line)}
html:root:root[data-modo="menta"] body .topbar .brand img{filter:invert(1) brightness(.25)}
html:root:root[data-modo="menta"] body .topbar .topbar-salir{box-shadow:inset 0 -1px 0 rgba(21,38,29,.35)}
html:root:root[data-modo="menta"] body .topbar .topbar-salir:hover{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
html:root:root[data-modo="menta"] .pane[data-pane] .home-header .home-greeting-title,html:root:root[data-modo="menta"] .cocina-top h1,html:root:root[data-modo="menta"] .portada-saludo,html:root:root[data-modo="menta"] .ini-kpi-valor{color:var(--ink) !important}
html:root:root[data-modo="menta"] .pane[data-pane] .home-header,html:root:root[data-modo="menta"] .cocina-top,html:root:root[data-modo="menta"] #homePortada.ini-portada{background:radial-gradient(900px 300px at 0% 0%, rgba(235,255,245,.95), transparent 70%), var(--vidrio) !important}
html:root:root[data-modo="menta"] .navrail,html:root:root[data-modo="menta"] .grid.nav-collapsed .navrail{background:var(--vidrio) !important;box-shadow:var(--vidrio-brillo),inset 0 0 0 1px var(--vidrio-borde) !important}
html:root:root[data-modo="menta"] .navrail a,html:root:root[data-modo="menta"] .navrail .nav-item{color:var(--ink-dim)}
html:root:root[data-modo="menta"] .navrail .nav-item:hover{background:var(--surface-3);color:var(--ink)}
html:root:root[data-modo="menta"] .navrail .nav-item.active{background:var(--surface-3);color:var(--ink);box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="menta"] .navrail .nav-item::after{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--borde-hover),0 8px 24px rgba(21,38,29,.12)}
html:root:root[data-modo="menta"] .campana-list,html:root:root[data-modo="menta"] .campana-preview,html:root:root[data-modo="menta"] .info-card,html:root:root[data-modo="menta"] .empty-card,html:root:root[data-modo="menta"] .admin-producto,html:root:root[data-modo="menta"] .agot-tile,html:root:root[data-modo="menta"] .agot-ficha,html:root:root[data-modo="menta"] .stk-fila,html:root:root[data-modo="menta"] .rp-ped,html:root:root[data-modo="menta"] .tarde-item,html:root:root[data-modo="menta"] #detailsBody > .det-cab,html:root:root[data-modo="menta"] #detailsBody > .detail-section{background:#EBF6EF !important}
html:root:root[data-modo="menta"] .navrail,html:root:root[data-modo="menta"] .grid.nav-collapsed .navrail{background:#E6F3EB !important}
html:root:root[data-modo="menta"] .avatar{color:var(--ink-dim) !important;box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="menta"] .modal-box,html:root:root[data-modo="menta"] .datos-drawer{background:var(--surface) !important;border-color:var(--line) !important}
html:root:root[data-modo="menta"] .datos-table thead th{background-color:rgba(247,252,249,.96) !important}
html:root:root[data-modo="menta"] .datos-estado-pill.oro{color:var(--ink);background:rgba(21,38,29,.07);box-shadow:inset 0 0 0 1px rgba(21,38,29,.18)}
html:root:root[data-modo="menta"] .datos-estado-pill.oro .datos-pill-dot{background:var(--ink)}
html:root:root[data-modo="menta"] .switch{background:var(--line);box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="menta"] .switch::after{background:#FFFFFF;box-shadow:0 1px 2px rgba(21,38,29,.3)}
html:root:root[data-modo="menta"] .switch.on{background:var(--accent)}
html:root:root[data-modo="menta"] .switch.on::after{background:var(--accent-ink)}
html:root:root[data-modo="menta"] .switch.status-switch.on{background:var(--good)}
html:root:root[data-modo="menta"] .ini-spark-dot{background:var(--ink);box-shadow:0 0 0 3px var(--surface)}
html:root:root[data-modo="menta"] .portada-acciones button.principal:hover,html:root:root[data-modo="menta"] .cocina-tab.activa:hover{background:var(--ink-dim);border-color:var(--ink-dim)}
html:root:root[data-modo="menta"] .ini-portada video{opacity:.22}
html:root:root[data-modo="menta"] ::selection{background:rgba(21,38,29,.14)}
html:root:root[data-modo="menta"] *{scrollbar-color:var(--line) transparent}
/* ----- modo lavanda ----- */
html:root:root[data-modo="lavanda"]{color-scheme:light; --info:#2563EB;
--bg:#E4DFF2; --surface:#FBFAFF; --surface-2:#F1EEFA; --surface-3:#E2DCF3;
--ink:#211A34; --ink-dim:#5C5278; --ink-faint:#8A81A3; --line:#D0C8E6; --line-soft:#DED8F0;
--good:#1F7A4D; --good-soft:#DCEFE4; --warn:#B0602F; --warn-soft:#F5E3D6; --danger:#B3363A; --danger-soft:#F6DEDF;
--bubble-in:#FBFAFF; --bubble-in-ink:#211A34; --shadow:none;
--linea-color:rgba(33,26,52,.12); --ini-spark-line:#8A81A3; --ini-spark-area:rgba(33,26,52,.06); --ini-barra:#D0C8E6; --borde-hover:#B3A8D6;
--vidrio:#FBFAFF; --vidrio-borde:rgba(60,40,120,.16); --vidrio-borde-hover:rgba(60,40,120,.36); --vidrio-brillo:0 1px 2px rgba(40,25,90,.09), 0 8px 22px rgba(40,25,90,.07);}
html:root:root[data-modo="lavanda"]{--accent:#211A34; --accent-ink:#FBFAFF; --accent-soft:#E2DCF3; --accent-soft-ink:#211A34; --pop:#211A34; --pop-ink:#FBFAFF; --glow-accent:0 0 0 1px rgba(33,26,52,.3);}
html:root:root[data-modo="lavanda"] body{background:radial-gradient(1000px 640px at 8% -12%, rgba(250,245,255,.95), transparent 62%), var(--bg)}
html:root:root[data-modo="lavanda"] body .topbar{background:var(--bg);box-shadow:inset 0 -1px 0 var(--line)}
html:root:root[data-modo="lavanda"] body .topbar .brand img{filter:invert(1) brightness(.25)}
html:root:root[data-modo="lavanda"] body .topbar .topbar-salir{box-shadow:inset 0 -1px 0 rgba(33,26,52,.35)}
html:root:root[data-modo="lavanda"] body .topbar .topbar-salir:hover{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
html:root:root[data-modo="lavanda"] .pane[data-pane] .home-header .home-greeting-title,html:root:root[data-modo="lavanda"] .cocina-top h1,html:root:root[data-modo="lavanda"] .portada-saludo,html:root:root[data-modo="lavanda"] .ini-kpi-valor{color:var(--ink) !important}
html:root:root[data-modo="lavanda"] .pane[data-pane] .home-header,html:root:root[data-modo="lavanda"] .cocina-top,html:root:root[data-modo="lavanda"] #homePortada.ini-portada{background:radial-gradient(900px 300px at 0% 0%, rgba(250,245,255,.95), transparent 70%), var(--vidrio) !important}
html:root:root[data-modo="lavanda"] .navrail,html:root:root[data-modo="lavanda"] .grid.nav-collapsed .navrail{background:var(--vidrio) !important;box-shadow:var(--vidrio-brillo),inset 0 0 0 1px var(--vidrio-borde) !important}
html:root:root[data-modo="lavanda"] .navrail a,html:root:root[data-modo="lavanda"] .navrail .nav-item{color:var(--ink-dim)}
html:root:root[data-modo="lavanda"] .navrail .nav-item:hover{background:var(--surface-3);color:var(--ink)}
html:root:root[data-modo="lavanda"] .navrail .nav-item.active{background:var(--surface-3);color:var(--ink);box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="lavanda"] .navrail .nav-item::after{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--borde-hover),0 8px 24px rgba(33,26,52,.12)}
html:root:root[data-modo="lavanda"] .campana-list,html:root:root[data-modo="lavanda"] .campana-preview,html:root:root[data-modo="lavanda"] .info-card,html:root:root[data-modo="lavanda"] .empty-card,html:root:root[data-modo="lavanda"] .admin-producto,html:root:root[data-modo="lavanda"] .agot-tile,html:root:root[data-modo="lavanda"] .agot-ficha,html:root:root[data-modo="lavanda"] .stk-fila,html:root:root[data-modo="lavanda"] .rp-ped,html:root:root[data-modo="lavanda"] .tarde-item,html:root:root[data-modo="lavanda"] #detailsBody > .det-cab,html:root:root[data-modo="lavanda"] #detailsBody > .detail-section{background:#F1EEFA !important}
html:root:root[data-modo="lavanda"] .navrail,html:root:root[data-modo="lavanda"] .grid.nav-collapsed .navrail{background:#ECE7F8 !important}
html:root:root[data-modo="lavanda"] .avatar{color:var(--ink-dim) !important;box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="lavanda"] .modal-box,html:root:root[data-modo="lavanda"] .datos-drawer{background:var(--surface) !important;border-color:var(--line) !important}
html:root:root[data-modo="lavanda"] .datos-table thead th{background-color:rgba(251,250,255,.96) !important}
html:root:root[data-modo="lavanda"] .datos-estado-pill.oro{color:var(--ink);background:rgba(33,26,52,.07);box-shadow:inset 0 0 0 1px rgba(33,26,52,.18)}
html:root:root[data-modo="lavanda"] .datos-estado-pill.oro .datos-pill-dot{background:var(--ink)}
html:root:root[data-modo="lavanda"] .switch{background:var(--line);box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="lavanda"] .switch::after{background:#FFFFFF;box-shadow:0 1px 2px rgba(33,26,52,.3)}
html:root:root[data-modo="lavanda"] .switch.on{background:var(--accent)}
html:root:root[data-modo="lavanda"] .switch.on::after{background:var(--accent-ink)}
html:root:root[data-modo="lavanda"] .switch.status-switch.on{background:var(--good)}
html:root:root[data-modo="lavanda"] .ini-spark-dot{background:var(--ink);box-shadow:0 0 0 3px var(--surface)}
html:root:root[data-modo="lavanda"] .portada-acciones button.principal:hover,html:root:root[data-modo="lavanda"] .cocina-tab.activa:hover{background:var(--ink-dim);border-color:var(--ink-dim)}
html:root:root[data-modo="lavanda"] .ini-portada video{opacity:.22}
html:root:root[data-modo="lavanda"] ::selection{background:rgba(33,26,52,.14)}
html:root:root[data-modo="lavanda"] *{scrollbar-color:var(--line) transparent}
/* ----- modo cielo ----- */
html:root:root[data-modo="cielo"]{color-scheme:light; --info:#2563EB;
--bg:#DAE8F5; --surface:#F8FBFF; --surface-2:#EAF2FB; --surface-3:#D7E5F4;
--ink:#13233A; --ink-dim:#4B6183; --ink-faint:#7B8FAD; --line:#C1D4EA; --line-soft:#D4E2F2;
--good:#1F7A4D; --good-soft:#DCEFE4; --warn:#B0602F; --warn-soft:#F5E3D6; --danger:#B3363A; --danger-soft:#F6DEDF;
--bubble-in:#F8FBFF; --bubble-in-ink:#13233A; --shadow:none;
--linea-color:rgba(19,35,58,.12); --ini-spark-line:#7B8FAD; --ini-spark-area:rgba(19,35,58,.06); --ini-barra:#C1D4EA; --borde-hover:#9DB8DA;
--vidrio:#F8FBFF; --vidrio-borde:rgba(20,60,120,.16); --vidrio-borde-hover:rgba(20,60,120,.36); --vidrio-brillo:0 1px 2px rgba(15,50,110,.09), 0 8px 22px rgba(15,50,110,.07);}
html:root:root[data-modo="cielo"]{--accent:#13233A; --accent-ink:#F8FBFF; --accent-soft:#D7E5F4; --accent-soft-ink:#13233A; --pop:#13233A; --pop-ink:#F8FBFF; --glow-accent:0 0 0 1px rgba(19,35,58,.3);}
html:root:root[data-modo="cielo"] body{background:radial-gradient(1000px 640px at 8% -12%, rgba(240,248,255,.95), transparent 62%), var(--bg)}
html:root:root[data-modo="cielo"] body .topbar{background:var(--bg);box-shadow:inset 0 -1px 0 var(--line)}
html:root:root[data-modo="cielo"] body .topbar .brand img{filter:invert(1) brightness(.25)}
html:root:root[data-modo="cielo"] body .topbar .topbar-salir{box-shadow:inset 0 -1px 0 rgba(19,35,58,.35)}
html:root:root[data-modo="cielo"] body .topbar .topbar-salir:hover{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
html:root:root[data-modo="cielo"] .pane[data-pane] .home-header .home-greeting-title,html:root:root[data-modo="cielo"] .cocina-top h1,html:root:root[data-modo="cielo"] .portada-saludo,html:root:root[data-modo="cielo"] .ini-kpi-valor{color:var(--ink) !important}
html:root:root[data-modo="cielo"] .pane[data-pane] .home-header,html:root:root[data-modo="cielo"] .cocina-top,html:root:root[data-modo="cielo"] #homePortada.ini-portada{background:radial-gradient(900px 300px at 0% 0%, rgba(240,248,255,.95), transparent 70%), var(--vidrio) !important}
html:root:root[data-modo="cielo"] .navrail,html:root:root[data-modo="cielo"] .grid.nav-collapsed .navrail{background:var(--vidrio) !important;box-shadow:var(--vidrio-brillo),inset 0 0 0 1px var(--vidrio-borde) !important}
html:root:root[data-modo="cielo"] .navrail a,html:root:root[data-modo="cielo"] .navrail .nav-item{color:var(--ink-dim)}
html:root:root[data-modo="cielo"] .navrail .nav-item:hover{background:var(--surface-3);color:var(--ink)}
html:root:root[data-modo="cielo"] .navrail .nav-item.active{background:var(--surface-3);color:var(--ink);box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="cielo"] .navrail .nav-item::after{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--borde-hover),0 8px 24px rgba(19,35,58,.12)}
html:root:root[data-modo="cielo"] .campana-list,html:root:root[data-modo="cielo"] .campana-preview,html:root:root[data-modo="cielo"] .info-card,html:root:root[data-modo="cielo"] .empty-card,html:root:root[data-modo="cielo"] .admin-producto,html:root:root[data-modo="cielo"] .agot-tile,html:root:root[data-modo="cielo"] .agot-ficha,html:root:root[data-modo="cielo"] .stk-fila,html:root:root[data-modo="cielo"] .rp-ped,html:root:root[data-modo="cielo"] .tarde-item,html:root:root[data-modo="cielo"] #detailsBody > .det-cab,html:root:root[data-modo="cielo"] #detailsBody > .detail-section{background:#EAF2FB !important}
html:root:root[data-modo="cielo"] .navrail,html:root:root[data-modo="cielo"] .grid.nav-collapsed .navrail{background:#E4EEF9 !important}
html:root:root[data-modo="cielo"] .avatar{color:var(--ink-dim) !important;box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="cielo"] .modal-box,html:root:root[data-modo="cielo"] .datos-drawer{background:var(--surface) !important;border-color:var(--line) !important}
html:root:root[data-modo="cielo"] .datos-table thead th{background-color:rgba(248,251,255,.96) !important}
html:root:root[data-modo="cielo"] .datos-estado-pill.oro{color:var(--ink);background:rgba(19,35,58,.07);box-shadow:inset 0 0 0 1px rgba(19,35,58,.18)}
html:root:root[data-modo="cielo"] .datos-estado-pill.oro .datos-pill-dot{background:var(--ink)}
html:root:root[data-modo="cielo"] .switch{background:var(--line);box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="cielo"] .switch::after{background:#FFFFFF;box-shadow:0 1px 2px rgba(19,35,58,.3)}
html:root:root[data-modo="cielo"] .switch.on{background:var(--accent)}
html:root:root[data-modo="cielo"] .switch.on::after{background:var(--accent-ink)}
html:root:root[data-modo="cielo"] .switch.status-switch.on{background:var(--good)}
html:root:root[data-modo="cielo"] .ini-spark-dot{background:var(--ink);box-shadow:0 0 0 3px var(--surface)}
html:root:root[data-modo="cielo"] .portada-acciones button.principal:hover,html:root:root[data-modo="cielo"] .cocina-tab.activa:hover{background:var(--ink-dim);border-color:var(--ink-dim)}
html:root:root[data-modo="cielo"] .ini-portada video{opacity:.22}
html:root:root[data-modo="cielo"] ::selection{background:rgba(19,35,58,.14)}
html:root:root[data-modo="cielo"] *{scrollbar-color:var(--line) transparent}
/* ----- modo durazno ----- */
html:root:root[data-modo="durazno"]{color-scheme:light; --info:#2563EB;
--bg:#F1DFD4; --surface:#FFF9F5; --surface-2:#FAEDE5; --surface-3:#F1DCCF;
--ink:#38201A; --ink-dim:#775A4F; --ink-faint:#A18A7F; --line:#E2C8BA; --line-soft:#EAD6CA;
--good:#2F7D55; --good-soft:#DDEBDD; --warn:#B0602F; --warn-soft:#F5E3D6; --danger:#B3363A; --danger-soft:#F6DEDF;
--bubble-in:#FFF9F5; --bubble-in-ink:#38201A; --shadow:none;
--linea-color:rgba(56,32,26,.12); --ini-spark-line:#A18A7F; --ini-spark-area:rgba(56,32,26,.06); --ini-barra:#E2C8BA; --borde-hover:#CBA897;
--vidrio:#FFF9F5; --vidrio-borde:rgba(110,50,25,.18); --vidrio-borde-hover:rgba(110,50,25,.38); --vidrio-brillo:0 1px 2px rgba(90,40,20,.09), 0 8px 22px rgba(90,40,20,.07);}
html:root:root[data-modo="durazno"]{--accent:#38201A; --accent-ink:#FFF9F5; --accent-soft:#F1DCCF; --accent-soft-ink:#38201A; --pop:#38201A; --pop-ink:#FFF9F5; --glow-accent:0 0 0 1px rgba(56,32,26,.3);}
html:root:root[data-modo="durazno"] body{background:radial-gradient(1000px 640px at 8% -12%, rgba(255,245,238,.95), transparent 62%), var(--bg)}
html:root:root[data-modo="durazno"] body .topbar{background:var(--bg);box-shadow:inset 0 -1px 0 var(--line)}
html:root:root[data-modo="durazno"] body .topbar .brand img{filter:invert(1) brightness(.25)}
html:root:root[data-modo="durazno"] body .topbar .topbar-salir{box-shadow:inset 0 -1px 0 rgba(56,32,26,.35)}
html:root:root[data-modo="durazno"] body .topbar .topbar-salir:hover{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
html:root:root[data-modo="durazno"] .pane[data-pane] .home-header .home-greeting-title,html:root:root[data-modo="durazno"] .cocina-top h1,html:root:root[data-modo="durazno"] .portada-saludo,html:root:root[data-modo="durazno"] .ini-kpi-valor{color:var(--ink) !important}
html:root:root[data-modo="durazno"] .pane[data-pane] .home-header,html:root:root[data-modo="durazno"] .cocina-top,html:root:root[data-modo="durazno"] #homePortada.ini-portada{background:radial-gradient(900px 300px at 0% 0%, rgba(255,245,238,.95), transparent 70%), var(--vidrio) !important}
html:root:root[data-modo="durazno"] .navrail,html:root:root[data-modo="durazno"] .grid.nav-collapsed .navrail{background:var(--vidrio) !important;box-shadow:var(--vidrio-brillo),inset 0 0 0 1px var(--vidrio-borde) !important}
html:root:root[data-modo="durazno"] .navrail a,html:root:root[data-modo="durazno"] .navrail .nav-item{color:var(--ink-dim)}
html:root:root[data-modo="durazno"] .navrail .nav-item:hover{background:var(--surface-3);color:var(--ink)}
html:root:root[data-modo="durazno"] .navrail .nav-item.active{background:var(--surface-3);color:var(--ink);box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="durazno"] .navrail .nav-item::after{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--borde-hover),0 8px 24px rgba(56,32,26,.12)}
html:root:root[data-modo="durazno"] .campana-list,html:root:root[data-modo="durazno"] .campana-preview,html:root:root[data-modo="durazno"] .info-card,html:root:root[data-modo="durazno"] .empty-card,html:root:root[data-modo="durazno"] .admin-producto,html:root:root[data-modo="durazno"] .agot-tile,html:root:root[data-modo="durazno"] .agot-ficha,html:root:root[data-modo="durazno"] .stk-fila,html:root:root[data-modo="durazno"] .rp-ped,html:root:root[data-modo="durazno"] .tarde-item,html:root:root[data-modo="durazno"] #detailsBody > .det-cab,html:root:root[data-modo="durazno"] #detailsBody > .detail-section{background:#FAEDE5 !important}
html:root:root[data-modo="durazno"] .navrail,html:root:root[data-modo="durazno"] .grid.nav-collapsed .navrail{background:#F6E6DC !important}
html:root:root[data-modo="durazno"] .avatar{color:var(--ink-dim) !important;box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="durazno"] .modal-box,html:root:root[data-modo="durazno"] .datos-drawer{background:var(--surface) !important;border-color:var(--line) !important}
html:root:root[data-modo="durazno"] .datos-table thead th{background-color:rgba(255,249,245,.96) !important}
html:root:root[data-modo="durazno"] .datos-estado-pill.oro{color:var(--ink);background:rgba(56,32,26,.07);box-shadow:inset 0 0 0 1px rgba(56,32,26,.18)}
html:root:root[data-modo="durazno"] .datos-estado-pill.oro .datos-pill-dot{background:var(--ink)}
html:root:root[data-modo="durazno"] .switch{background:var(--line);box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="durazno"] .switch::after{background:#FFFFFF;box-shadow:0 1px 2px rgba(56,32,26,.3)}
html:root:root[data-modo="durazno"] .switch.on{background:var(--accent)}
html:root:root[data-modo="durazno"] .switch.on::after{background:var(--accent-ink)}
html:root:root[data-modo="durazno"] .switch.status-switch.on{background:var(--good)}
html:root:root[data-modo="durazno"] .ini-spark-dot{background:var(--ink);box-shadow:0 0 0 3px var(--surface)}
html:root:root[data-modo="durazno"] .portada-acciones button.principal:hover,html:root:root[data-modo="durazno"] .cocina-tab.activa:hover{background:var(--ink-dim);border-color:var(--ink-dim)}
html:root:root[data-modo="durazno"] .ini-portada video{opacity:.22}
html:root:root[data-modo="durazno"] ::selection{background:rgba(56,32,26,.14)}
html:root:root[data-modo="durazno"] *{scrollbar-color:var(--line) transparent}
/* ----- modo medianoche ----- */
html:root:root[data-modo="medianoche"]{color-scheme:dark; --info:#8AB4F8;
--bg:#0A1020; --surface:#101A30; --surface-2:#15213D; --surface-3:#1C2B4D;
--ink:#E8EEFB; --ink-dim:#9FB0D3; --ink-faint:#6B7DA3; --line:#243556; --line-soft:#1A2845;
--good:#6FD1A0; --good-soft:#12281E; --warn:#E8A66F; --warn-soft:#2C1F14; --danger:#EE8E8E; --danger-soft:#2C1616;
--bubble-in:#101A30; --bubble-in-ink:#E8EEFB; --shadow:none;
--linea-color:rgba(255,255,255,.12); --ini-spark-line:#6B7DA3; --ini-spark-area:rgba(255,255,255,.06); --ini-barra:#243556; --borde-hover:#3A507F;
--vidrio:rgba(120,150,255,.06); --vidrio-borde:rgba(140,170,255,.16); --vidrio-borde-hover:rgba(140,170,255,.32); --vidrio-brillo:inset 0 1px 0 rgba(255,255,255,.06);}
html:root:root[data-modo="medianoche"]{--accent:#E8EEFB; --accent-ink:#0A1020; --accent-soft:#1C2B4D; --accent-soft-ink:#E8EEFB; --pop:#E8EEFB; --pop-ink:#0A1020; --glow-accent:0 0 0 1px rgba(255,255,255,.3);}
html:root:root[data-modo="medianoche"] body{background:radial-gradient(1000px 640px at 8% -12%, rgba(90,130,255,.14), transparent 62%), var(--bg)}
html:root:root[data-modo="medianoche"] body .topbar{background:var(--bg);box-shadow:inset 0 -1px 0 var(--line)}
html:root:root[data-modo="medianoche"] body .topbar .topbar-salir{box-shadow:inset 0 -1px 0 rgba(255,255,255,.35)}
html:root:root[data-modo="medianoche"] body .topbar .topbar-salir:hover{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
html:root:root[data-modo="medianoche"] .pane[data-pane] .home-header .home-greeting-title,html:root:root[data-modo="medianoche"] .cocina-top h1,html:root:root[data-modo="medianoche"] .portada-saludo,html:root:root[data-modo="medianoche"] .ini-kpi-valor{color:var(--ink) !important}
html:root:root[data-modo="medianoche"] .pane[data-pane] .home-header,html:root:root[data-modo="medianoche"] .cocina-top,html:root:root[data-modo="medianoche"] #homePortada.ini-portada{background:radial-gradient(900px 300px at 0% 0%, rgba(90,130,255,.14), transparent 70%), var(--vidrio) !important}
html:root:root[data-modo="medianoche"] .navrail,html:root:root[data-modo="medianoche"] .grid.nav-collapsed .navrail{background:var(--vidrio) !important;box-shadow:var(--vidrio-brillo),inset 0 0 0 1px var(--vidrio-borde) !important}
html:root:root[data-modo="medianoche"] .navrail a,html:root:root[data-modo="medianoche"] .navrail .nav-item{color:var(--ink-dim)}
html:root:root[data-modo="medianoche"] .navrail .nav-item:hover{background:var(--surface-3);color:var(--ink)}
html:root:root[data-modo="medianoche"] .navrail .nav-item.active{background:var(--surface-3);color:var(--ink);box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="medianoche"] .navrail .nav-item::after{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--borde-hover),0 8px 24px rgba(0,0,0,.5)}
html:root:root[data-modo="medianoche"] .campana-list,html:root:root[data-modo="medianoche"] .campana-preview,html:root:root[data-modo="medianoche"] .info-card,html:root:root[data-modo="medianoche"] .empty-card,html:root:root[data-modo="medianoche"] .admin-producto,html:root:root[data-modo="medianoche"] .agot-tile,html:root:root[data-modo="medianoche"] .agot-ficha,html:root:root[data-modo="medianoche"] .stk-fila,html:root:root[data-modo="medianoche"] .rp-ped,html:root:root[data-modo="medianoche"] .tarde-item,html:root:root[data-modo="medianoche"] #detailsBody > .det-cab,html:root:root[data-modo="medianoche"] #detailsBody > .detail-section{background:#15213D !important}
html:root:root[data-modo="medianoche"] .navrail,html:root:root[data-modo="medianoche"] .grid.nav-collapsed .navrail{background:#0D1528 !important}
html:root:root[data-modo="medianoche"] .avatar{color:var(--ink-dim) !important;box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="medianoche"] .modal-box,html:root:root[data-modo="medianoche"] .datos-drawer{background:var(--surface) !important;border-color:var(--line) !important}
html:root:root[data-modo="medianoche"] .datos-table thead th{background-color:rgba(16,26,48,.92) !important}
html:root:root[data-modo="medianoche"] .datos-estado-pill.oro{color:var(--ink);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
html:root:root[data-modo="medianoche"] .datos-estado-pill.oro .datos-pill-dot{background:var(--ink)}
html:root:root[data-modo="medianoche"] .switch{background:var(--s3,#1C2B4D);box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="medianoche"] .switch::after{background:#9FB0D3}
html:root:root[data-modo="medianoche"] .switch.on{background:var(--accent)}
html:root:root[data-modo="medianoche"] .switch.on::after{background:var(--accent-ink)}
html:root:root[data-modo="medianoche"] .switch.status-switch.on{background:var(--good)}
html:root:root[data-modo="medianoche"] .ini-spark-dot{background:var(--ink);box-shadow:0 0 0 3px var(--surface)}
html:root:root[data-modo="medianoche"] .portada-acciones button.principal:hover,html:root:root[data-modo="medianoche"] .cocina-tab.activa:hover{background:var(--ink-dim);border-color:var(--ink-dim)}
html:root:root[data-modo="medianoche"] .ini-portada video{opacity:.22}
html:root:root[data-modo="medianoche"] ::selection{background:rgba(255,255,255,.14)}
html:root:root[data-modo="medianoche"] *{scrollbar-color:var(--line) transparent}
/* ----- modo bosque ----- */
html:root:root[data-modo="bosque"]{color-scheme:dark; --info:#8AB4F8;
--bg:#08130D; --surface:#0F1D15; --surface-2:#14281D; --surface-3:#1B3527;
--ink:#E4F2E9; --ink-dim:#9DBAA7; --ink-faint:#648171; --line:#21402E; --line-soft:#183024;
--good:#7BDBA4; --good-soft:#12281C; --warn:#E3A870; --warn-soft:#2A2013; --danger:#EE8E8E; --danger-soft:#2B1717;
--bubble-in:#0F1D15; --bubble-in-ink:#E4F2E9; --shadow:none;
--linea-color:rgba(255,255,255,.12); --ini-spark-line:#648171; --ini-spark-area:rgba(255,255,255,.06); --ini-barra:#21402E; --borde-hover:#35604A;
--vidrio:rgba(110,200,150,.06); --vidrio-borde:rgba(130,210,165,.16); --vidrio-borde-hover:rgba(130,210,165,.32); --vidrio-brillo:inset 0 1px 0 rgba(255,255,255,.06);}
html:root:root[data-modo="bosque"]{--accent:#E4F2E9; --accent-ink:#08130D; --accent-soft:#1B3527; --accent-soft-ink:#E4F2E9; --pop:#E4F2E9; --pop-ink:#08130D; --glow-accent:0 0 0 1px rgba(255,255,255,.3);}
html:root:root[data-modo="bosque"] body{background:radial-gradient(1000px 640px at 8% -12%, rgba(80,190,130,.13), transparent 62%), var(--bg)}
html:root:root[data-modo="bosque"] body .topbar{background:var(--bg);box-shadow:inset 0 -1px 0 var(--line)}
html:root:root[data-modo="bosque"] body .topbar .topbar-salir{box-shadow:inset 0 -1px 0 rgba(255,255,255,.35)}
html:root:root[data-modo="bosque"] body .topbar .topbar-salir:hover{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
html:root:root[data-modo="bosque"] .pane[data-pane] .home-header .home-greeting-title,html:root:root[data-modo="bosque"] .cocina-top h1,html:root:root[data-modo="bosque"] .portada-saludo,html:root:root[data-modo="bosque"] .ini-kpi-valor{color:var(--ink) !important}
html:root:root[data-modo="bosque"] .pane[data-pane] .home-header,html:root:root[data-modo="bosque"] .cocina-top,html:root:root[data-modo="bosque"] #homePortada.ini-portada{background:radial-gradient(900px 300px at 0% 0%, rgba(80,190,130,.13), transparent 70%), var(--vidrio) !important}
html:root:root[data-modo="bosque"] .navrail,html:root:root[data-modo="bosque"] .grid.nav-collapsed .navrail{background:var(--vidrio) !important;box-shadow:var(--vidrio-brillo),inset 0 0 0 1px var(--vidrio-borde) !important}
html:root:root[data-modo="bosque"] .navrail a,html:root:root[data-modo="bosque"] .navrail .nav-item{color:var(--ink-dim)}
html:root:root[data-modo="bosque"] .navrail .nav-item:hover{background:var(--surface-3);color:var(--ink)}
html:root:root[data-modo="bosque"] .navrail .nav-item.active{background:var(--surface-3);color:var(--ink);box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="bosque"] .navrail .nav-item::after{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--borde-hover),0 8px 24px rgba(0,0,0,.5)}
html:root:root[data-modo="bosque"] .campana-list,html:root:root[data-modo="bosque"] .campana-preview,html:root:root[data-modo="bosque"] .info-card,html:root:root[data-modo="bosque"] .empty-card,html:root:root[data-modo="bosque"] .admin-producto,html:root:root[data-modo="bosque"] .agot-tile,html:root:root[data-modo="bosque"] .agot-ficha,html:root:root[data-modo="bosque"] .stk-fila,html:root:root[data-modo="bosque"] .rp-ped,html:root:root[data-modo="bosque"] .tarde-item,html:root:root[data-modo="bosque"] #detailsBody > .det-cab,html:root:root[data-modo="bosque"] #detailsBody > .detail-section{background:#14281D !important}
html:root:root[data-modo="bosque"] .navrail,html:root:root[data-modo="bosque"] .grid.nav-collapsed .navrail{background:#0B1810 !important}
html:root:root[data-modo="bosque"] .avatar{color:var(--ink-dim) !important;box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="bosque"] .modal-box,html:root:root[data-modo="bosque"] .datos-drawer{background:var(--surface) !important;border-color:var(--line) !important}
html:root:root[data-modo="bosque"] .datos-table thead th{background-color:rgba(15,29,21,.92) !important}
html:root:root[data-modo="bosque"] .datos-estado-pill.oro{color:var(--ink);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
html:root:root[data-modo="bosque"] .datos-estado-pill.oro .datos-pill-dot{background:var(--ink)}
html:root:root[data-modo="bosque"] .switch{background:var(--s3,#1B3527);box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="bosque"] .switch::after{background:#9DBAA7}
html:root:root[data-modo="bosque"] .switch.on{background:var(--accent)}
html:root:root[data-modo="bosque"] .switch.on::after{background:var(--accent-ink)}
html:root:root[data-modo="bosque"] .switch.status-switch.on{background:var(--good)}
html:root:root[data-modo="bosque"] .ini-spark-dot{background:var(--ink);box-shadow:0 0 0 3px var(--surface)}
html:root:root[data-modo="bosque"] .portada-acciones button.principal:hover,html:root:root[data-modo="bosque"] .cocina-tab.activa:hover{background:var(--ink-dim);border-color:var(--ink-dim)}
html:root:root[data-modo="bosque"] .ini-portada video{opacity:.22}
html:root:root[data-modo="bosque"] ::selection{background:rgba(255,255,255,.14)}
html:root:root[data-modo="bosque"] *{scrollbar-color:var(--line) transparent}
/* ----- modo cafe ----- */
html:root:root[data-modo="cafe"]{color-scheme:dark; --info:#8AB4F8;
--bg:#130D0A; --surface:#1D1410; --surface-2:#271B15; --surface-3:#33241C;
--ink:#F2E7DD; --ink-dim:#BCA897; --ink-faint:#86725F; --line:#3B2A20; --line-soft:#2E211A;
--good:#8AD4A0; --good-soft:#15271B; --warn:#E9AC6B; --warn-soft:#2D2013; --danger:#EE8E8E; --danger-soft:#2C1616;
--bubble-in:#1D1410; --bubble-in-ink:#F2E7DD; --shadow:none;
--linea-color:rgba(255,255,255,.12); --ini-spark-line:#86725F; --ini-spark-area:rgba(255,255,255,.06); --ini-barra:#3B2A20; --borde-hover:#5A4232;
--vidrio:rgba(255,190,140,.05); --vidrio-borde:rgba(255,200,160,.14); --vidrio-borde-hover:rgba(255,200,160,.30); --vidrio-brillo:inset 0 1px 0 rgba(255,255,255,.06);}
html:root:root[data-modo="cafe"]{--accent:#F2E7DD; --accent-ink:#130D0A; --accent-soft:#33241C; --accent-soft-ink:#F2E7DD; --pop:#F2E7DD; --pop-ink:#130D0A; --glow-accent:0 0 0 1px rgba(255,255,255,.3);}
html:root:root[data-modo="cafe"] body{background:radial-gradient(1000px 640px at 8% -12%, rgba(230,150,90,.12), transparent 62%), var(--bg)}
html:root:root[data-modo="cafe"] body .topbar{background:var(--bg);box-shadow:inset 0 -1px 0 var(--line)}
html:root:root[data-modo="cafe"] body .topbar .topbar-salir{box-shadow:inset 0 -1px 0 rgba(255,255,255,.35)}
html:root:root[data-modo="cafe"] body .topbar .topbar-salir:hover{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
html:root:root[data-modo="cafe"] .pane[data-pane] .home-header .home-greeting-title,html:root:root[data-modo="cafe"] .cocina-top h1,html:root:root[data-modo="cafe"] .portada-saludo,html:root:root[data-modo="cafe"] .ini-kpi-valor{color:var(--ink) !important}
html:root:root[data-modo="cafe"] .pane[data-pane] .home-header,html:root:root[data-modo="cafe"] .cocina-top,html:root:root[data-modo="cafe"] #homePortada.ini-portada{background:radial-gradient(900px 300px at 0% 0%, rgba(230,150,90,.12), transparent 70%), var(--vidrio) !important}
html:root:root[data-modo="cafe"] .navrail,html:root:root[data-modo="cafe"] .grid.nav-collapsed .navrail{background:var(--vidrio) !important;box-shadow:var(--vidrio-brillo),inset 0 0 0 1px var(--vidrio-borde) !important}
html:root:root[data-modo="cafe"] .navrail a,html:root:root[data-modo="cafe"] .navrail .nav-item{color:var(--ink-dim)}
html:root:root[data-modo="cafe"] .navrail .nav-item:hover{background:var(--surface-3);color:var(--ink)}
html:root:root[data-modo="cafe"] .navrail .nav-item.active{background:var(--surface-3);color:var(--ink);box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="cafe"] .navrail .nav-item::after{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--borde-hover),0 8px 24px rgba(0,0,0,.5)}
html:root:root[data-modo="cafe"] .campana-list,html:root:root[data-modo="cafe"] .campana-preview,html:root:root[data-modo="cafe"] .info-card,html:root:root[data-modo="cafe"] .empty-card,html:root:root[data-modo="cafe"] .admin-producto,html:root:root[data-modo="cafe"] .agot-tile,html:root:root[data-modo="cafe"] .agot-ficha,html:root:root[data-modo="cafe"] .stk-fila,html:root:root[data-modo="cafe"] .rp-ped,html:root:root[data-modo="cafe"] .tarde-item,html:root:root[data-modo="cafe"] #detailsBody > .det-cab,html:root:root[data-modo="cafe"] #detailsBody > .detail-section{background:#271B15 !important}
html:root:root[data-modo="cafe"] .navrail,html:root:root[data-modo="cafe"] .grid.nav-collapsed .navrail{background:#0F0A07 !important}
html:root:root[data-modo="cafe"] .avatar{color:var(--ink-dim) !important;box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="cafe"] .modal-box,html:root:root[data-modo="cafe"] .datos-drawer{background:var(--surface) !important;border-color:var(--line) !important}
html:root:root[data-modo="cafe"] .datos-table thead th{background-color:rgba(29,20,16,.92) !important}
html:root:root[data-modo="cafe"] .datos-estado-pill.oro{color:var(--ink);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
html:root:root[data-modo="cafe"] .datos-estado-pill.oro .datos-pill-dot{background:var(--ink)}
html:root:root[data-modo="cafe"] .switch{background:var(--s3,#33241C);box-shadow:inset 0 0 0 1px var(--borde-hover)}
html:root:root[data-modo="cafe"] .switch::after{background:#BCA897}
html:root:root[data-modo="cafe"] .switch.on{background:var(--accent)}
html:root:root[data-modo="cafe"] .switch.on::after{background:var(--accent-ink)}
html:root:root[data-modo="cafe"] .switch.status-switch.on{background:var(--good)}
html:root:root[data-modo="cafe"] .ini-spark-dot{background:var(--ink);box-shadow:0 0 0 3px var(--surface)}
html:root:root[data-modo="cafe"] .portada-acciones button.principal:hover,html:root:root[data-modo="cafe"] .cocina-tab.activa:hover{background:var(--ink-dim);border-color:var(--ink-dim)}
html:root:root[data-modo="cafe"] .ini-portada video{opacity:.22}
html:root:root[data-modo="cafe"] ::selection{background:rgba(255,255,255,.14)}
html:root:root[data-modo="cafe"] *{scrollbar-color:var(--line) transparent}
/* ----- Inicio estilo RIMUSITE (25/10): banner negro con fecha grande, anillos y meta del mes ----- */
html:root:root:root:root:root #homePortada.ini-banner{background:#0A0A0A !important;border:1px solid rgba(255,255,255,.08) !important;color:#F2F2F2;min-height:0 !important;align-items:stretch;overflow:hidden}
html:root:root #homePortada.ini-banner .portada-cont{padding:24px 30px 24px !important;display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:32px;row-gap:4px;align-items:center}
#homePortada.ini-banner .bn-fecha{grid-column:1;grid-row:1 / span 5;display:flex;align-items:center;gap:14px;padding-right:32px;border-right:1px solid rgba(255,255,255,.14);align-self:stretch}
#homePortada.ini-banner .bn-fecha b{font-size:78px;font-weight:600;letter-spacing:-.06em;line-height:.95;color:#FFFFFF}
#homePortada.ini-banner .bn-fecha span{font-size:15px;font-weight:600;line-height:1.25;color:#F2F2F2}
#homePortada.ini-banner .bn-fecha small{display:block;font-size:13px;font-weight:400;color:#9A9A9A}
html:root:root #homePortada.ini-banner .portada-arriba{position:static !important;grid-column:2 / span 2;grid-row:1;margin:0 0 6px !important;flex-direction:row !important;display:flex;justify-content:space-between;align-items:center;gap:12px}
#homePortada.ini-banner .portada-negocio{font-size:0;min-height:0}
#homePortada.ini-banner .portada-local{font-size:12.5px;color:#BDBDBD;margin:0}
html:root:root #homePortada.ini-banner .portada-saludo{grid-column:2;grid-row:2;font-size:30px;margin:0;color:#FFFFFF !important}
html:root:root #homePortada.ini-banner .portada-relato{grid-column:2;grid-row:3;margin:0}
html:root:root #homePortada.ini-banner .portada-acciones{grid-column:2;grid-row:4;margin-top:12px}
html:root:root #homePortada.ini-banner .portada-cont > .portada-frase{grid-column:3;grid-row:3 / span 2;align-self:end;justify-self:end;text-align:right;font-size:13px;color:#8F8F8F !important;margin:0}
#homePortada.ini-banner .portada-relato p{color:#CFCFCF;margin:0 0 4px}
#homePortada.ini-banner .portada-ia{border-color:rgba(255,255,255,.16);color:#DADADA}
#homePortada.ini-banner .portada-ia .estado.off{color:#E58A8A}
html:root:root #homePortada.ini-banner .portada-acciones button{color:#F2F2F2;border-color:rgba(255,255,255,.22);background:transparent}
html:root:root #homePortada.ini-banner .portada-acciones button.principal{background:#FFFFFF;color:#0A0A0A;border-color:#FFFFFF}
html:root:root #homePortada.ini-banner .portada-acciones button:hover{background:#2A2A2A;color:#FFFFFF}
html:root:root #homePortada.ini-banner .portada-acciones button.principal:hover{background:#D9D9D9;color:#0A0A0A}@media (max-width:760px){
html:root:root #homePortada.ini-banner .portada-cont{grid-template-columns:1fr}
#homePortada.ini-banner .bn-fecha{grid-column:1;grid-row:auto;border-right:0;padding:0 0 10px;border-bottom:1px solid rgba(255,255,255,.14)}
#homePortada.ini-banner .bn-fecha b{font-size:54px}
html:root:root #homePortada.ini-banner :is(.portada-arriba,.portada-saludo,.portada-relato,.portada-acciones,.portada-cont > .portada-frase){grid-column:1;grid-row:auto;justify-self:start;text-align:left}
}
/* Anillo de progreso en la esquina de las tarjetas. */
.ini-kpi{position:relative}
.kpi-anillo{position:absolute;top:12px;right:14px;width:42px;height:42px;display:grid;place-items:center}
.kpi-anillo svg{position:absolute;inset:0;width:100%;height:100%}
.kpi-anillo .a-pista{fill:none;stroke:var(--line);stroke-width:3}
.kpi-anillo .a-valor{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;transition:stroke-dasharray .6s ease}
.kpi-anillo b{font-size:10.5px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
/* Meta del mes */
.ini-meta .meta-fila{display:flex;align-items:center;gap:16px;padding:6px 0 4px}
.ini-meta .kpi-anillo{position:relative;top:0;right:0;width:64px;height:64px;flex:none}
.ini-meta .kpi-anillo b{font-size:14px}
.ini-meta .meta-txt{display:grid;gap:2px;min-width:0}
.ini-meta .meta-txt b{font-size:22px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.ini-meta .meta-txt span{font-size:13px;color:var(--ink-dim)}
.ini-meta .meta-txt small{font-size:12px;color:var(--ink-faint)}
.ini-meta .meta-barra{height:6px;border-radius:99px;background:var(--line);margin-top:12px;overflow:hidden}
.ini-meta .meta-barra i{display:block;height:100%;border-radius:inherit;background:var(--ink)}
.meta-form{display:flex;gap:8px;margin:8px 0 2px}
.meta-form input{flex:1;min-width:0;padding:9px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit}
.meta-form button{padding:9px 14px;border-radius:8px;border:0;background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:600;cursor:pointer}
/* Sin rayitas sueltas dentro del banner (venían de estilos de otras pantallas). */
html:root:root #homePortada.ini-banner :is(.portada-relato,.portada-local,.portada-negocio){border:0 !important;padding-left:0 !important}
#homePortada.ini-banner .portada-local::before,#homePortada.ini-banner .portada-negocio::before,#homePortada.ini-banner .portada-negocio::after{display:none !important}
/* Sin el cartelito de abierto/cerrado en el banner (pedido de Álvaro, 25/10). */
#homePortada .portada-local{display:none !important}
/* Sin la frase suelta del banner (pedido de Álvaro, 25/10). */
/* Saludo más arriba: el interruptor del asistente va en la esquina y el saludo arranca desde el borde de arriba. */
html:root:root #homePortada.ini-banner .portada-arriba{position:absolute !important;top:18px;right:22px;left:auto;margin:0 !important;grid-row:auto}
html:root:root #homePortada.ini-banner .portada-cont{align-content:center}
html:root:root #homePortada.ini-banner .portada-saludo{grid-row:1}
html:root:root #homePortada.ini-banner .portada-relato{grid-row:2}
html:root:root #homePortada.ini-banner .portada-acciones{grid-row:3}
html:root:root #homePortada.ini-banner .portada-cont > .portada-frase{grid-row:2 / span 2}
/* Dato interesante del día, debajo del texto del banner. */
html:root:root #homePortada.ini-banner .portada-acciones{grid-row:4}
#homePortada.ini-banner .bn-dato{grid-column:2;grid-row:3;display:flex;align-items:center;gap:10px;margin:8px 0 2px;font-size:14px;color:#D6D6D6}
#homePortada.ini-banner .bn-dato svg{width:18px;height:18px;flex:none;color:#E3CB99}
#homePortada.ini-banner .bn-dato span{min-width:0}
#homePortada.ini-banner .bn-otro{margin-left:6px;padding:3px 10px;border-radius:99px;border:1px solid rgba(255,255,255,.22);background:transparent;color:#BDBDBD;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
#homePortada.ini-banner .bn-otro:hover{background:#2A2A2A;color:#FFF}
/* El dato va a la derecha del botón "Avisar a los clientes", en la misma línea. */
html:root:root #homePortada.ini-banner .portada-acciones{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
#homePortada.ini-banner .bn-dato.en-acciones{grid-column:auto;grid-row:auto;margin:0 0 0 10px}
html:root:root #homePortada.ini-banner .portada-acciones .bn-otro{padding:3px 10px;font-size:12px;border-radius:99px;border:1px solid rgba(255,255,255,.22);background:transparent;color:#BDBDBD}
html:root:root #homePortada.ini-banner .portada-acciones .bn-otro:hover{background:#2A2A2A;color:#FFF}
/* Sin el párrafo "Todavía no escribió nadie hoy…" del banner (pedido de Álvaro, 25/10). */
#homePortada .portada-relato{display:none !important}
html:root:root #homePortada.ini-banner .portada-acciones{grid-row:2;margin-top:10px}
html:root:root #homePortada.ini-banner .portada-cont > .bn-dato{grid-row:2}
/* Las frases vuelven, abajo a la derecha del banner (debajo del interruptor del asistente). */
html:root:root #homePortada.ini-banner .portada-cont > .portada-frase{display:block !important;grid-column:3;grid-row:1 / span 2;align-self:end;justify-self:end;text-align:right;font-size:13.5px;color:#9A9A9A !important;margin:0 0 4px;max-width:34ch}
html:root:root #homePortada.ini-banner .portada-cont{min-height:176px;padding-bottom:20px !important}
html:root:root #homePortada.ini-banner .portada-cont > .portada-frase{margin-bottom:0}
/* Columna de la derecha del banner: el interruptor arriba y la frase abajo, apilados (nunca se pisan). */
html:root:root #homePortada.ini-banner .portada-arriba{position:static !important;grid-column:3;grid-row:1;justify-self:end;align-self:start;margin:0 !important}
html:root:root #homePortada.ini-banner .portada-cont > .portada-frase{grid-column:3;grid-row:2;align-self:end;justify-self:end;text-align:right;max-width:30ch;margin:10px 0 0}
html:root:root #homePortada.ini-banner .portada-cont{min-height:0;align-content:center;align-items:start}
#homePortada.ini-banner .bn-dato.en-acciones{flex:1 1 280px;min-width:0}
#homePortada.ini-banner .bn-dato.en-acciones span{flex:0 1 auto}
/* ----- Reparto: tablero con flujo, gráficas y atajos (25/10) ----- */
.rm-tablero{display:grid;gap:12px;margin:0 0 4px}
.rm-flujo{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:10px}
.rm-paso{padding:14px 16px;border-radius:16px;border:1px solid var(--vidrio-borde,var(--line));background:var(--vidrio,var(--surface));display:grid;gap:2px;position:relative;overflow:hidden}
.rm-paso::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--rm-c)}
.rm-paso b{font-size:34px;font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.rm-paso span{font-size:13px;color:var(--ink-dim)}
.rm-paso.llevar{--rm-c:#E3A27C}.rm-paso.camino{--rm-c:#8AB4F8}.rm-paso.hecho{--rm-c:#7CC9A0}
.rm-flecha{width:22px;height:22px;opacity:.5;background:currentColor;color:var(--ink-faint);-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.rm-progreso{display:flex;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.rm-progreso i{display:block;height:100%;transition:width .5s ease}
.rm-progreso .h{background:#7CC9A0}.rm-progreso .c{background:#8AB4F8}.rm-progreso .l{background:#E3A27C}
.rm-graficas{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr) minmax(0,1.2fr);gap:12px}
.rm-card{padding:14px 16px;border-radius:16px;border:1px solid var(--vidrio-borde,var(--line));background:var(--vidrio,var(--surface));min-width:0}
.rm-card h3{margin:0 0 10px;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint)}
.rm-avance{display:flex;align-items:center;gap:14px}
.rm-avance b{display:block;font-size:18px;font-weight:600;color:var(--ink)}
.rm-avance span:not(.rm-anillo){font-size:12.5px;color:var(--ink-dim)}
.rm-anillo{position:relative;width:68px;height:68px;flex:none;display:grid;place-items:center}
.rm-anillo svg{position:absolute;inset:0;width:100%;height:100%}
.rm-anillo .a-pista{fill:none;stroke:var(--line);stroke-width:6}
.rm-anillo .a-valor{fill:none;stroke:#7CC9A0;stroke-width:6;stroke-linecap:round;transition:stroke-dasharray .6s ease}
.rm-anillo b{font-size:15px;font-weight:600;color:var(--ink)}
.rm-cols{display:flex;gap:6px;align-items:flex-end;height:96px}
.rm-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.rm-col-area{flex:1;width:100%;display:flex;align-items:flex-end;border-radius:6px;background:var(--surface-2)}
.rm-col-area i{display:block;width:100%;border-radius:6px;background:#7CC9A0}
.rm-col span{font-size:11px;color:var(--ink-faint)}
.rm-sec{display:grid;grid-template-columns:78px minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:5px 0;font-size:13px}
.rm-sec-n{color:var(--ink-dim)}
.rm-sec-barra{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.rm-sec-barra i{display:block;height:100%;border-radius:inherit;background:#E3A27C}
.rm-sec b{color:var(--ink);min-width:18px;text-align:right}
.rm-sec small{color:var(--ink-faint);min-width:62px;text-align:right}
.rm-vacio{margin:0;font-size:13px;color:var(--ink-faint)}
/* El resumen viejo (3 números) queda como franja chica de plata, el tablero ya cuenta lo demás. */
#rp-resumen{margin-top:0}
.rm-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.rm-chip{font-size:11.5px;padding:3px 9px;border-radius:99px;background:var(--surface-3);color:var(--ink-dim);border:1px solid var(--line)}
.rm-todos{margin-left:10px;padding:5px 12px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;vertical-align:middle}
.rm-todos:hover{background:var(--surface-3)}
/* Pedidos para llevar más grandes de tocar y con la elección bien marcada. */
.rp-ped.elegir{min-height:92px;transition:transform .12s ease,border-color .15s}
.rp-ped.elegir:active{transform:scale(.99)}
.rp-ped.elegir[aria-pressed="true"]{border-color:var(--ink) !important;box-shadow:0 0 0 2px var(--ink)}
@media (max-width:1100px){.rm-graficas{grid-template-columns:1fr 1fr}.rm-graficas .rm-avance{grid-column:1 / -1}}
@media (max-width:640px){
.rm-flujo{grid-template-columns:1fr 1fr 1fr}.rm-flecha{display:none}
.rm-paso{padding:12px}.rm-paso b{font-size:28px}
.rm-graficas{grid-template-columns:1fr}
}
.rm-semana{grid-column:1 / -1}
.rm-sem-tot{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.rm-sem-tot b{font-size:26px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.rm-sem-tot span{font-size:13px;color:var(--ink-dim)}
.rm-cols-sem{height:120px}
.rm-col-n{font-size:12px;font-weight:600;color:var(--ink);min-height:15px}
.rm-col.hoy span{color:var(--ink);font-weight:600}
/* Reparto en dos sectores */
.rm-tabs{display:flex;gap:6px;padding:var(--mosaico) var(--mosaico) 0 var(--mosaico-izq)}
.rm-tabs button{padding:10px 22px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--ink-dim);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.rm-tabs button:hover{background:var(--surface-3)}
.rm-tabs button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.rp.rm-vista-envios #rm-tablero{display:none}
.rp.rm-vista-metricas > :not(#rm-tablero){display:none !important}
.rp.rm-vista-metricas #rm-tablero{display:grid}
/* El resumen de plata, bien a la vista arriba de lo operativo */
.rp.rm-vista-envios #rp-resumen{display:grid}
.rm-sub{display:flex;flex-wrap:wrap;gap:8px 18px;margin:-2px 0 10px;font-size:13.5px;color:var(--ink-dim)}
.rm-sub b{color:var(--ink);font-weight:600}
/* ----- Ajustes de alineación (25/10) ----- */
/* Panel Admin: el contenido de cada pestaña tenía 20 px de margen propio y quedaba corrido respecto del encabezado y las pestañas. */
#panelAdminBody :is(.admin-menu-cab,.admin-menu-grilla,.admin-tarjetas,.admin-guardar-barra,.admin-save-all,.status-banner,.pr-intro){margin-left:var(--mosaico-izq) !important;margin-right:var(--mosaico) !important}
#panelAdminBody .pr-cont{padding-left:var(--mosaico-izq) !important;padding-right:var(--mosaico) !important}
#panelAdminBody [style*="margin:0 20px"]{margin-left:var(--mosaico-izq) !important;margin-right:var(--mosaico) !important}
#panelAdminBody .admin-menu-cab{margin-top:var(--mosaico)}
/* Cocina > Stock: sin la caja "¿Para qué sirve?" (pedido de Álvaro, 25/10). */
.stk-guia{display:none !important}
/* Gráfico de 14 días: sin la pestaña 'Mensajes' (pedido de Álvaro, 25/10). */
.ini-seg [data-chart-modo="mensajes"]{display:none !important}
/* ----- Pizza Crazy sin rojo fijo (pedido de Álvaro, 25/10): mismo estilo neutro que el resto; el rojo se elige en Personalizar ----- */
html:root:root:root[data-negocio="pizzacrazy"]:not([data-modo]){
--bg:#0A0A0A; --surface:#111111; --surface-2:#171717; --surface-3:#1F1F1F;
--ink:#EDEDED; --ink-dim:#A1A1A1; --ink-faint:#6B6B6B; --line:#262626; --line-soft:#1C1C1C;
--accent:#FAFAFA; --accent-ink:#0A0A0A; --accent-soft:#1C1C1C; --accent-soft-ink:#EDEDED; --pop:#FAFAFA; --pop-ink:#0A0A0A;
--glow-accent:0 0 0 1px rgba(255,255,255,.28); --queso:#A1A1A1; --ini-spark-line:#7A7A7A; --ini-spark-area:rgba(255,255,255,.045); --ini-barra:#2A2A2A; --bubble-in:#171717; --bubble-in-ink:#EDEDED;
}
html[data-negocio="pizzacrazy"] .topbar::after{display:none !important}
html:root:root[data-negocio="pizzacrazy"] :is(.portada-frase,.portada-relato b){color:inherit}
html:root:root[data-negocio="pizzacrazy"] .cocina-tab.activa,html:root:root[data-negocio="pizzacrazy"] .cocina-tab.activa b{color:var(--accent-ink)}
html:root:root[data-negocio="pizzacrazy"] .cocina-tab.activa:hover{background:var(--ink-dim)}
html:root:root[data-negocio="pizzacrazy"] .portada-acciones button.principal{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
html:root:root[data-negocio="pizzacrazy"] .portada-acciones button.principal:hover{background:var(--ink-dim);border-color:var(--ink-dim)}
html:root:root[data-negocio="pizzacrazy"] .datos-estado-pill.oro{color:var(--ink);background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
html:root:root[data-negocio="pizzacrazy"] .datos-estado-pill.oro .datos-pill-dot{background:var(--ink)}
/* ----- Orden y prolijidad (25/10): chat de pedidos y panel de Detalles ----- */
/* Pedido hecho por la web, dentro del chat. */
.msg-row.pedido-web{display:flex;justify-content:center;padding:6px 0}
.pw-card{width:min(560px,94%);padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);text-align:left}
.pw-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pw-num{font-weight:600;font-size:14px;color:var(--ink)}
.pw-via{font-size:12px;color:var(--ink-faint)}
.pw-estado{font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:99px;background:var(--surface-3);color:var(--ink-dim)}
.pw-estado.good{background:var(--good-soft);color:var(--good)}
.pw-estado.warn{background:var(--warn-soft);color:var(--warn)}
.pw-estado.danger{background:var(--danger-soft);color:var(--danger)}
.pw-estado.info{background:color-mix(in srgb,var(--info,#8AB4F8) 16%,transparent);color:var(--info,#8AB4F8)}
.pw-total{margin-left:auto;font-size:15px;font-weight:600;color:var(--ink)}
.pw-items{list-style:none;margin:8px 0 0;padding:8px 0 0;border-top:1px solid var(--line);display:grid;gap:3px}
.pw-items li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:6px;font-size:13.5px;color:var(--ink)}
.pw-items li b{color:var(--ink-dim);font-weight:600;text-align:right}
.pw-items li span{overflow-wrap:anywhere}
/* Panel de Detalles: un solo estilo de tarjeta, de título y de fila. */
#detailsBody{display:grid;gap:10px;align-content:start}
#detailsBody > .det-cab,#detailsBody > .detail-section{margin:0 !important;padding:14px 16px !important}
#detailsBody .detail-label{display:block;margin:0 0 10px !important;font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
#detailsBody .detail-label::before{display:none !important}
/* Cabecera del cliente */
.det-cab-nombre{font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
.det-cab-linea{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 10px;flex-wrap:wrap}
.det-cab-linea .link-inline{font-size:13.5px;color:var(--ink-dim);text-decoration:none}
.det-cab-link{margin:0 !important;padding:4px 10px !important;border:1px solid var(--line);border-radius:99px;font-size:12px !important;text-decoration:none !important;color:var(--ink) !important}
.det-cab-link:hover{background:var(--surface-3)}
.det-cab-estado{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.det-cab-estado small{color:var(--ink-faint)}
/* Pedido */
.det-items{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px;background:none !important;border:0 !important}
.det-items li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:center;font-size:14px;color:var(--ink);padding:0 !important;background:none !important;border:0 !important}
.det-items li b{justify-self:start;min-width:26px;text-align:center;padding:2px 0;border-radius:8px;background:var(--surface-3);color:var(--ink);font-size:13px;font-weight:600}
.det-datos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.det-dato{padding:9px 12px !important;border:1px solid var(--line);border-radius:10px;background:var(--surface-2) !important;display:grid;gap:2px}
.det-dato.ancho{grid-column:1 / -1}
.det-dato span{font-size:11.5px;color:var(--ink-faint)}
.det-dato b{font-size:14px;font-weight:600;color:var(--ink)}
.det-total{display:flex;align-items:baseline;justify-content:space-between;padding:12px 2px 0 !important;border:0 !important;border-top:1px solid var(--line) !important;border-radius:0 !important;background:none !important}
.det-total span{font-size:13px;color:var(--ink-dim)}
.det-total b{font-size:22px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
/* Filas de dato (Cliente, Reserva) */
#detailsBody .kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
#detailsBody .kv:last-child{border-bottom:0;padding-bottom:0}
#detailsBody .kv span:first-child{color:var(--ink-dim)}
#detailsBody .kv span:last-child{color:var(--ink);font-weight:600;text-align:right}
/* Resumen */
#detailsBody .resumen-text{font-size:13.5px;line-height:1.55;color:var(--ink-dim);margin:0 0 8px}
#detailsBody .link-btn{margin:0;padding:6px 12px;border:1px solid var(--line);border-radius:99px;font-size:12.5px;text-decoration:none;color:var(--ink)}
#detailsBody .link-btn:hover{background:var(--surface-3)}
/* ----- Personalizar (25/10): la pantalla y los efectos de cada preferencia ----- */
.pane[data-pane="personalizar"]{display:none;grid-column:2/-1;border-right:none}
body[data-view="personalizar"] .pane:is([data-pane="bots"],[data-pane="list"],[data-pane="chat"],[data-pane="details"]){display:none}
body[data-view="personalizar"] .pane[data-pane="personalizar"]{display:flex}
.navrail .nav-item[data-nav="personalizar"]::after{content:'Personalizar'}
.pz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--mosaico);align-items:stretch;padding:var(--mosaico) var(--mosaico) var(--mosaico) var(--mosaico-izq)}
.pz-c{display:flex;flex-direction:column;gap:var(--mosaico);min-width:0}
.pz-c > .pz-card:last-child{flex:1}
.pz-card{padding:18px 20px;border-radius:20px;border:1px solid var(--vidrio-borde,var(--line));background:var(--vidrio,var(--surface));-webkit-backdrop-filter:var(--vidrio-blur);backdrop-filter:var(--vidrio-blur);box-shadow:var(--vidrio-brillo)}
.pz-card h3{margin:0 0 12px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.pz-sub{margin:-4px 0 12px;font-size:13px;color:var(--ink-dim)}
.pz-ops{display:flex;flex-wrap:wrap;gap:8px}
.pz-op{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s}
.pz-op:hover{background:var(--surface-3)}
.pz-op.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);font-weight:600}
.pz-mu{width:16px;height:16px;border-radius:50%;border:1px solid var(--borde-hover,var(--line));flex:none}
.pz-propio{position:relative}
.pz-propio input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.pz-grupo{display:grid;gap:8px;padding:10px 0;border-top:1px solid var(--line-soft)}
.pz-grupo:first-of-type{border-top:0;padding-top:0}
.pz-grupo > span{font-size:13px;color:var(--ink-dim)}
.pz-fila{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--line-soft)}
.pz-sub + .pz-fila{border-top:0}
.pz-fila b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.pz-fila small{display:block;font-size:12px;color:var(--ink-faint);margin-top:2px}
.pz-der{display:flex;align-items:center;gap:10px}
.pz-escuchar{padding:6px 12px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.pz-escuchar:hover{background:var(--surface-3)}
.pz-campo{display:grid;gap:6px;padding:10px 0 0;border-top:1px solid var(--line-soft);margin-top:4px}
.pz-campo span{font-size:13px;color:var(--ink-dim)}
.pz-campo input{padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:inherit}
#pzVol{width:min(220px,50%);accent-color:var(--accent,var(--ink))}
@media (max-width:900px){.pz{grid-template-columns:1fr;padding-left:var(--mosaico-izq,10px)}}
/* Qué se ve en el Inicio */
html[data-ocultar~="banner"] #homePortada{display:none !important}
html[data-ocultar~="kpis"] .ini-kpis{display:none !important}
html[data-ocultar~="meta"] #iniMeta{display:none !important}
html[data-ocultar~="grafico"] .ini-col-principal > .ini-card:has(.ini-barras){display:none !important}
html[data-ocultar~="ranking"] .ini-ventas{display:none !important}
html[data-ocultar~="actividad"] .ini-col-lateral > .ini-card:not(.ini-meta){display:none !important}
/* Tamaño de letra */
html[data-letra="chica"] body{zoom:.92}
html[data-letra="grande"] body{zoom:1.1}
html[data-letra="enorme"] body{zoom:1.22}
/* Espacio entre bloques */
html:root:root[data-densidad="compacta"]{--mosaico:5px}
/* Tarjetas sólidas (sin transparencia ni desenfoque) */
html:root:root[data-tarjetas="solido"]{--vidrio:var(--surface);--vidrio-blur:none}
/* Esquinas */
html:root:root[data-esquinas="suaves"] :is(.ini-kpi,.ini-card,.ag-card,.admin-tarjeta,.camp-box,.pane[data-pane] .home-header,.cocina-top,#homePortada,.rm-card,.rm-paso,.pw-card,.det-cab,.detail-section,.pz-card,.navrail,.comanda,.admin-producto,.agent-card,.info-card,.pr-card,.datos-table-scroll,.ct-resumen,.ct-tabla,.pane:is([data-pane="bots"],[data-pane="list"],[data-pane="chat"],[data-pane="details"])){border-radius:10px !important}
html:root:root[data-esquinas="rectas"] :is(.ini-kpi,.ini-card,.ag-card,.admin-tarjeta,.camp-box,.pane[data-pane] .home-header,.cocina-top,#homePortada,.rm-card,.rm-paso,.pw-card,.det-cab,.detail-section,.pz-card,.navrail,.comanda,.admin-producto,.agent-card,.info-card,.pr-card,.datos-table-scroll,.ct-resumen,.ct-tabla,.pane:is([data-pane="bots"],[data-pane="list"],[data-pane="chat"],[data-pane="details"])){border-radius:3px !important}
html:root:root[data-esquinas="suaves"] :is(.pz-op,.pz-escuchar,.cocina-tab,.quick-action,.portada-acciones button){border-radius:8px}
html:root:root[data-esquinas="rectas"] :is(.pz-op,.pz-escuchar,.cocina-tab,.quick-action,.portada-acciones button){border-radius:2px}
/* El color elegido también pinta anillos y barras de progreso. */
.kpi-anillo .a-valor{stroke:var(--acento-ui,var(--ink))}
.ini-meta .meta-barra i{background:var(--acento-ui,var(--ink))}
/* Modos de color con vista previa */
.pz-modos{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.pz-modo{display:grid;gap:7px;justify-items:center;padding:8px 8px 10px;border-radius:14px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s}
.pz-modo:hover{background:var(--surface-3)}
.pz-modo.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);font-weight:600}
.pz-prev{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4px;align-content:center;width:100%;height:54px;padding:8px;border-radius:9px;border:1px solid rgba(128,128,128,.28)}
.pz-prev i{display:block;height:14px;border-radius:4px;border:1px solid rgba(128,128,128,.22)}
.pz-prev b{grid-column:1 / -1;display:block;height:5px;width:46%;border-radius:3px;opacity:.85}
/* ----- Centro de Ayuda renovado (25/10) ----- */
.ay{padding:var(--mosaico) var(--mosaico) 32px var(--mosaico-izq);display:grid;gap:var(--mosaico)}
.ay-buscar{display:flex;align-items:center;gap:12px;padding:0 18px;border-radius:16px;border:1px solid var(--vidrio-borde,var(--line));background:var(--vidrio,var(--surface));-webkit-backdrop-filter:var(--vidrio-blur);backdrop-filter:var(--vidrio-blur);box-shadow:var(--vidrio-brillo)}
.ay-buscar svg{width:20px;height:20px;flex:none;color:var(--ink-faint)}
.ay-buscar input{flex:1;min-width:0;border:0;background:transparent;outline:0;color:var(--ink);font:inherit;font-size:16px;padding:17px 0}
.ay-buscar:focus-within{border-color:var(--ink)}
.ay-temas{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--mosaico)}
.ay-tema{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;padding:14px 16px;border-radius:16px;border:1px solid var(--vidrio-borde,var(--line));background:var(--vidrio,var(--surface));color:var(--ink);font:inherit;cursor:pointer;transition:border-color .15s,transform .12s;box-shadow:var(--vidrio-brillo)}
.ay-tema:hover{border-color:var(--ink-faint);transform:translateY(-1px)}
.ay-tema.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.ay-ic{grid-row:1 / span 2;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--surface-3);color:var(--ink)}
.ay-ic svg{width:19px;height:19px}
.ay-tema b{font-size:14px;font-weight:600;line-height:1.25}
.ay-tema small{font-size:12px;color:var(--ink-faint)}
.ay-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--mosaico);align-items:start}
.ay-lista{display:grid;gap:var(--mosaico);min-width:0}
.ay-grupo{padding:6px 6px 8px;border-radius:20px;border:1px solid var(--vidrio-borde,var(--line));background:var(--vidrio,var(--surface));box-shadow:var(--vidrio-brillo)}
.ay-grupo h2,.ay-rapidas h2{display:flex;align-items:baseline;gap:10px;margin:0;padding:14px 16px 8px;font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.ay-grupo h2 small{font-size:12px;letter-spacing:0;text-transform:none;font-weight:500}
.ay-grupo .faq-item{margin:0;border-radius:12px;border:0 !important;border-top:1px solid var(--line-soft) !important;background:transparent !important;box-shadow:none}
.ay-grupo .faq-item:first-of-type{border-top:0 !important}
.ay-grupo .faq-q{padding:14px 16px}
.ay-grupo .faq-item[hidden]{display:none}
.ay-resalta{background:var(--surface-3) !important;transition:background .4s}
.ay-rapidas{padding:6px 6px 14px;border-radius:20px;border:1px solid var(--vidrio-borde,var(--line));background:var(--vidrio,var(--surface))}
.ay-rapidas > div{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px}
.ay-rapidas button{padding:8px 14px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:13px;cursor:pointer;text-align:left}
.ay-rapidas button:hover{background:var(--surface-3)}
.ay-nada{margin:0;padding:28px 20px;text-align:center;color:var(--ink-dim);border-radius:20px;border:1px dashed var(--line)}
.ay-lado{position:sticky;top:12px;display:grid;gap:var(--mosaico)}
.ay-card{padding:18px;border-radius:20px;border:1px solid var(--vidrio-borde,var(--line));background:var(--vidrio,var(--surface));box-shadow:var(--vidrio-brillo)}
.ay-card h3{margin:0 0 6px;font-size:15px;font-weight:600;color:var(--ink)}
.ay-card p{margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--ink-dim)}
.ay-wa,.ay-sec{display:block;width:100%;padding:11px 14px;border-radius:12px;font:inherit;font-size:14px;font-weight:600;text-align:center;text-decoration:none;cursor:pointer;box-sizing:border-box}
.ay-wa{background:var(--accent);color:var(--accent-ink);border:0}
.ay-wa:hover{filter:brightness(1.08)}
.ay-sec{background:transparent;color:var(--ink);border:1px solid var(--line)}
.ay-sec:hover{background:var(--surface-3)}
@media (max-width:1000px){.ay-cuerpo{grid-template-columns:1fr}.ay-lado{position:static;grid-template-columns:1fr 1fr}}
@media (max-width:640px){.ay-temas{grid-template-columns:1fr 1fr}.ay-lado{grid-template-columns:1fr}.ay-tema{padding:12px}}
/* Preguntas desplegables (estilo propio, no dependen de la página vieja) */
.ay-grupo .faq-q{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:transparent !important;border:0 !important;color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer;border-radius:12px;box-shadow:none}
.ay-grupo .faq-q:hover{background:var(--surface-3) !important}
.ay-grupo .faq-n{flex:none;min-width:22px;font-size:12px;font-weight:600;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.ay-grupo .faq-t{flex:1;min-width:0}
.ay-grupo .faq-mas{position:relative;flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line)}
.ay-grupo .faq-mas::before,.ay-grupo .faq-mas::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.6px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .2s}
.ay-grupo .faq-mas::after{transform:translate(-50%,-50%) rotate(90deg)}
.ay-grupo .faq-item.open .faq-mas::after{transform:translate(-50%,-50%) rotate(0)}
.ay-grupo .faq-a{display:none;padding:0 18px 16px 52px;font-size:14px;line-height:1.65;color:var(--ink-dim)}
.ay-grupo .faq-item.open .faq-a{display:block}
.ay-grupo .faq-a p{margin:0;max-width:78ch}
.ay-cuerpo{grid-template-columns:minmax(0,1fr) !important}
/* Tarjeta de tema elegida: sin doble aro, con fondo suave; el ícono en círculo. */
.ay-tema.on{box-shadow:none;border-color:var(--ink);background:var(--surface-3)}
.ay-ic{border-radius:50%}
.ay-tema{min-height:62px}
.ay-tema b{align-self:end}
.ay-tema small{align-self:start}
/* ----- Celu y tablet (25/10): ajustes para pantallas chicas ----- */
/* Banner del Inicio en tablet y celu: todo en una columna y en orden (fecha, saludo, botón, interruptor). */
@media (max-width:1000px){
html:root:root #homePortada.ini-banner .portada-cont{display:flex !important;flex-direction:column;align-items:stretch;gap:12px;min-height:0 !important;padding:20px 22px 20px !important}
html:root:root #homePortada.ini-banner .bn-fecha{order:1;grid-column:auto;grid-row:auto;padding:0 0 12px;border:0;border-bottom:1px solid rgba(255,255,255,.14)}
html:root:root #homePortada.ini-banner .bn-fecha b{font-size:56px}
html:root:root #homePortada.ini-banner .portada-saludo{order:2;grid-column:auto;grid-row:auto;font-size:26px;line-height:1.15}
html:root:root #homePortada.ini-banner .portada-acciones{order:3;grid-column:auto;grid-row:auto;margin:0;flex-direction:row}
html:root:root #homePortada.ini-banner .bn-dato{grid-column:auto;grid-row:auto}
html:root:root #homePortada.ini-banner .bn-dato.en-acciones{flex:1 1 100%;margin:2px 0 0}
html:root:root #homePortada.ini-banner .portada-arriba{order:4;position:static !important;grid-column:auto;grid-row:auto;justify-self:start;align-self:stretch;justify-content:flex-start;margin:0 !important}
html:root:root #homePortada.ini-banner .portada-cont > .portada-frase{order:5;grid-column:auto;grid-row:auto;justify-self:start;text-align:left;max-width:none;margin:0}
}
/* Celu: menos información y más aire. */
@media (max-width:760px){
/* Banner: queda la fecha, el saludo, el botón y el interruptor. El dato y la frase se ven en tablet y compu. */
#homePortada.ini-banner .bn-dato{display:none !important}
html:root:root #homePortada.ini-banner .portada-cont > .portada-frase{display:none !important}
html:root:root #homePortada.ini-banner .portada-cont{gap:14px;padding:20px 18px !important}
html:root:root #homePortada.ini-banner .bn-fecha b{font-size:50px}
html:root:root #homePortada.ini-banner .portada-saludo{font-size:24px}
html:root:root #homePortada.ini-banner .portada-acciones button{flex:1 1 auto;padding:14px 16px}
/* Tarjetas de indicadores: sin el mini-gráfico, el anillo abajo a la derecha y todo más respirado. */
.ini-kpi{padding:16px 16px 18px !important;min-height:0}
.ini-kpi .ini-spark-wrap{display:none !important}
.ini-kpi-label{padding-right:0 !important}
.ini-kpi-valor{margin-top:6px}
.kpi-anillo{width:38px;height:38px;top:auto;bottom:14px;right:14px}
.kpi-anillo b{font-size:9.5px}
.ini-kpis{gap:12px !important}
.ini{gap:12px !important}
/* Pestañas que no entran: se deslizan hacia el costado en vez de cortarse. */
.cocina-tabs,.datos-tabs,.rm-tabs{max-width:100%;overflow-x:auto;flex-wrap:nowrap !important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cocina-tabs::-webkit-scrollbar,.datos-tabs::-webkit-scrollbar{display:none}
.cocina-tab,.datos-tab,.datos-tabs button{white-space:nowrap;flex:none}
.cocina-tab{padding:9px 14px !important;font-size:14px !important}
}
/* Personalizar: en tablet y celu, una sola columna. */
@media (max-width:900px){.pz{grid-template-columns:1fr}}
/* Pedidos (lo que ve el cliente) en celu y tablet */
@media (max-width:900px){
#datosBody .cocina-tabs,.pane[data-pane="datos"] .cocina-tabs{margin:0 var(--mosaico) 12px var(--mosaico-izq) !important;max-width:calc(100% - var(--mosaico) - var(--mosaico-izq));overflow-x:auto;flex-wrap:nowrap !important;scrollbar-width:none}
.pane[data-pane="datos"] .cocina-tabs::-webkit-scrollbar{display:none}
.pane[data-pane="datos"] .cocina-tab{flex:none;white-space:nowrap}
.pane[data-pane="datos"] .datos-toolbar{flex-wrap:wrap;gap:8px 12px;padding-left:var(--mosaico-izq) !important}
}
@media (max-width:760px){
.pane[data-pane="datos"] .datos-toolbar{align-items:flex-start}
.pane[data-pane="datos"] .datos-toolbar label,.pane[data-pane="datos"] .datos-toolbar .switch-row{flex:1 1 100%}
.pane[data-pane="datos"] .datos-table-scroll{margin:0 var(--mosaico) var(--mosaico) var(--mosaico-izq) !important}
}
/* ===== FIN TEMA-GRIS-1 ===== */
/*----*/
' +
'@page{size:80mm auto;margin:0}*{box-sizing:border-box;margin:0;padding:0}' +
'body{width:80mm;padding:4mm 4mm 8mm;background:#fff;color:#000;font:600 10pt/1.35 "Courier New",monospace;-webkit-print-color-adjust:exact;print-color-adjust:exact}' +
'.marca{display:flex;align-items:center;justify-content:center;gap:2.2mm;font:800 11pt/1 Arial,sans-serif;letter-spacing:.3em;text-transform:uppercase}.marca img{width:9mm;height:9mm;display:block}' +
'.tipo{display:flex;align-items:baseline;justify-content:space-between;margin:3mm 0 2mm;padding:2.2mm 3mm 1.8mm;background:#000;color:#fff;font-family:"Arial Narrow",Arial,sans-serif;text-transform:uppercase}' +
'.tipo span{font-size:17pt;font-weight:800;letter-spacing:.05em}.tipo b{font-size:26pt;font-weight:900;line-height:.9}' +
'.fecha{display:flex;justify-content:space-between;gap:2mm;font-size:8.5pt}.fecha .sale{font-weight:800}' +
'hr{border:0;border-top:1.5px dashed #000;margin:3mm 0}' +
'ul{list-style:none;display:grid;gap:1.6mm}li{display:grid;grid-template-columns:8mm 1fr auto;column-gap:1.5mm;align-items:baseline;font-size:10.5pt;font-weight:800;line-height:1.25;text-transform:uppercase}' +
'li .c{text-align:right}li .p{text-align:right;white-space:nowrap;font-size:10pt;font-weight:700}li.x{font-size:9.5pt;font-weight:600}li.g{display:block;padding-left:9.5mm;margin-top:-1mm;font-size:9.5pt;font-weight:600;text-transform:none}' +
'.nota{padding:1.6mm 2mm;border:1.5px solid #000;font-size:10pt;font-weight:700;line-height:1.3}.nota small{display:block;margin-bottom:.6mm;font-size:7.5pt;letter-spacing:.14em;text-transform:uppercase}' +
'.pers{padding:1.6mm 2mm;border:1.5px solid #000}.pers small{display:block;margin-bottom:.8mm;font-size:7.5pt;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.pers p{font-size:10pt;line-height:1.3;margin:.7mm 0}.pers b{text-transform:uppercase}' +
'.tot{display:flex;justify-content:space-between;align-items:baseline;font:900 22pt/1 "Arial Narrow",Arial,sans-serif;text-transform:uppercase}.tot span:first-child{font-size:13pt;letter-spacing:.12em}' +
'.inc{text-align:right;font-size:8.5pt;margin-top:.8mm}' +
'.pago{margin-top:2.4mm;padding:1.6mm 2mm 1.3mm;text-align:center;font:800 12pt/1.1 "Arial Narrow",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;border:2px solid #000}.pago.cobrar{background:#000;color:#fff}' +
'.cli .fila{display:flex;justify-content:space-between;align-items:baseline;gap:3mm}.cli b{font-size:12pt;font-weight:800;text-transform:uppercase}.cli .dir{display:block;margin-top:.6mm;font-size:11pt;font-weight:800;line-height:1.25}.cli .ref{display:block;margin-top:.8mm;font-size:10pt;font-weight:700;line-height:1.3}.cli small{font-size:9.5pt;font-weight:600;white-space:nowrap}' +
'.cli.largo{text-align:center}.cli.largo .fila{display:block}.cli.largo small{display:block;margin-top:.6mm}' +
'