/* ============================================================================
   estilos.css · Sistema de diseño compartido · POS-EMPRESA
   ----------------------------------------------------------------------------
   Fuente de verdad de la ESTRUCTURA compartida (fuentes, radios, componentes,
   layout). Los COLORES viven en temas.css (tokens por tema/acento/superficie):
   este archivo solo los USA con var(--...), nunca los define.
   Toda página interna enlaza AMBOS, en este orden, y luego temas.js:
       <link rel="stylesheet" href="assets/css/estilos.css">
       <link rel="stylesheet" href="assets/css/temas.css">
       <script src="assets/js/shared/temas.js"></script>
   No inventar colores ni fuentes sueltas: usar siempre las variables var(--...).
   ============================================================================ */

/* Las `@font-face` viven en `fuentes.css`, no aquí: el POS, la portada, la
   recepción pública y las aplicaciones NO cargan esta hoja y también las
   necesitan. Toda página que use var(--font) enlaza `fuentes.css`. */

:root{
  /* Tokens NO cromáticos (los cromáticos están en temas.css) */
  --font:'Geist',system-ui,sans-serif;
  --font-display:'Geist',system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;
  --r-xs:6px;--r-sm:8px;--r-md:12px;--r-lg:18px;--r-xl:24px;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{
  min-height:100dvh;padding:14px 13px 34px;position:relative;
  background:radial-gradient(ellipse 90% 55% at 50% -8%, rgba(var(--accent-rgb),.20) 0%, rgba(var(--accent-rgb),.07) 45%, transparent 72%), var(--bg);
}
/* Textura de ruido sutil del fondo */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:var(--noise-opacity);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
button,input,select{font-family:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}

.app{width:min(100%,760px);margin:0 auto;position:relative;z-index:1}
.muted{color:var(--ink-mute)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.hidden{display:none!important}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── Topbar ────────────────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:10;margin:-14px -13px 18px;padding:14px 13px 12px;
  background:linear-gradient(180deg, var(--topbar-start) 0%, var(--topbar-mid) 68%, var(--topbar-end) 100%);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.brand{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand-left{display:flex;align-items:center;gap:12px;min-width:0}
.brand h1{font-family:var(--font-display);font-size:20px;line-height:1;margin:0;font-weight:800;letter-spacing:-.03em}
.brand p{font-family:var(--mono);font-size:9.5px;line-height:1.4;color:var(--ink-mute);margin:4px 0 0;text-transform:uppercase;letter-spacing:.10em}

.logo{
  width:44px;height:44px;border-radius:15px;flex:none;display:grid;place-items:center;
  font-size:19px;font-weight:800;color:var(--accent-contrast);position:relative;overflow:hidden;
  background:linear-gradient(148deg, var(--accent-2) 0%, var(--accent) 52%, var(--accent-pressed) 100%);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.3), 0 4px 18px var(--accent-glow), var(--shadow-sm);
}
/* Residual permitido: brillo FÍSICO del logo (destello blanco sobre el gradiente
   de acento); no es color de marca y funciona igual en modo claro y oscuro. */
.logo::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(138deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.04) 45%, transparent 60%)}

/* ── Marca CL.Pos (hoy solo el panel) ──────────────────────────────────────
   NO usa .logo a propósito: ese escudo se pinta con el acento de la empresa y
   este logo ya trae su propio cuadrado naranja adentro, así que uno dentro del
   otro daría cuadrado sobre cuadrado — y naranja de CodeLab sobre azul en una
   empresa de tema azul. Sin animación: acá es marca, no adorno.
   Los dos PNG traen 16 px de aire transparente en los cuatro lados (el logo
   visible mide 113x60 dentro de 145x92, o sea la mitad del archivo). Por eso la
   altura de acá se ve más chica de lo que dice el número: a 58 px de caja, el
   logo se ve a 38 px, que es justo la altura del bloque de nombre + rol que
   tiene al lado.
   El margen negativo de -10 px NO es a ojo: son esos 16 px escalados a 58/92.
   Cancela el aire por los cuatro lados, así el elemento ocupa exactamente el
   logo que se ve. Sin eso la barra superior crecía 7 px en el celular (77 → 84)
   por sostener un aire que nadie ve, y la separación con el nombre era el gap
   más 10 px de nada. */
.marca-cl{height:58px;width:auto;flex:none;margin:-10px}
/* El tema oscuro es el que arranca (data-theme="dark" viene en el HTML), así que
   la versión de texto negro nace oculta y solo aparece si el tema es claro. */
.marca-cl-claro{display:none}
:root[data-theme="light"] .marca-cl-claro{display:block}
:root[data-theme="light"] .marca-cl-oscuro{display:none}

.navbtn,.logout{
  border:1px solid var(--border);background:rgba(var(--surface-2-rgb),.55);color:var(--ink-soft);
  border-radius:999px;padding:7px 13px;font-size:11px;font-weight:600;font-family:var(--font);
  cursor:pointer;white-space:nowrap;letter-spacing:.02em;text-decoration:none;
  transition:background .15s,border-color .15s,color .15s;
}
.navbtn:hover,.logout:hover{background:rgba(var(--border-rgb),.85);color:var(--ink)}
.navbtn.btn-volver-app{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 14px;font-size:12.5px;font-weight:750}
.navbtn.btn-volver-app:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Card ──────────────────────────────────────────────────────────────── */
.card{
  background:var(--card-bg);border:1px solid var(--border-soft);border-radius:var(--r-lg);
  padding:16px;box-shadow:var(--shadow-md);
  animation:fadeUp .38s ease both;
}
.card + .card{margin-top:12px}
.card:nth-child(1){animation-delay:.04s}
.card:nth-child(2){animation-delay:.11s}
.card:nth-child(3){animation-delay:.18s}
.card:nth-child(4){animation-delay:.24s}
.card:nth-child(5){animation-delay:.30s}
.card:nth-child(6){animation-delay:.36s}
.card:nth-child(7){animation-delay:.42s}

.section-title{
  font-size:10px;font-weight:700;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.18em;
  margin:0 0 12px;display:flex;align-items:center;gap:9px;
}
.section-title::before{content:'';width:5px;height:5px;background:var(--accent);border-radius:50%;flex:none;box-shadow:0 0 7px rgba(var(--accent-rgb),.55)}
/* span y .btn dentro de .section-title se empujan a la derecha */
.section-title > span{margin-left:auto;color:var(--ink-mute);font-weight:600;letter-spacing:0;text-transform:none;font-size:11.5px}
.section-title > .btn{margin-left:auto}

/* ── Formularios ───────────────────────────────────────────────────────── */
label{display:block;font-size:10px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.14em;font-weight:700;margin:0 0 6px}
input,select{
  width:100%;background:var(--surface-2);border:1px solid var(--border-soft);color:var(--ink);
  border-radius:var(--r-sm);padding:12px;font-size:15px;outline:none;
  transition:border-color .15s,background .15s;
}
input:focus,select:focus{border-color:var(--accent-soft);background:var(--surface-3)}
input::placeholder{color:var(--ink-faint)}
input[type=number]{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
textarea{
  width:100%;background:var(--surface-2);border:1px solid var(--border-soft);color:var(--ink);
  border-radius:var(--r-sm);padding:11px 12px;font-size:15px;outline:none;font-family:inherit;
  resize:vertical;min-height:68px;line-height:1.45;
  transition:border-color .15s,background .15s;
}
textarea:focus{border-color:var(--accent-soft);background:var(--surface-3)}
textarea::placeholder{color:var(--ink-faint)}
select{
  appearance:none;-webkit-appearance:none;padding-right:30px;
  background-image:var(--select-chevron);
  background-repeat:no-repeat;background-position:right 12px center;
}

/* ── Botones ───────────────────────────────────────────────────────────── */
.btn{
  border:0;border-radius:var(--r-sm);padding:11px 14px;
  background:linear-gradient(135deg, var(--accent-2), var(--accent));
  color:var(--accent-contrast);font-weight:800;font-family:var(--font);cursor:pointer;font-size:14px;letter-spacing:-.01em;
  transition:opacity .15s,box-shadow .15s,transform .12s;
}
.btn:hover:not(:disabled){opacity:.90;box-shadow:0 4px 14px rgba(var(--accent-rgb),.28)}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.55}
.btn.full{width:100%}
.btn.sm{padding:7px 11px;font-size:12.5px}
.btn.secondary{background:var(--surface-2);color:var(--ink);border:1px solid var(--border)}
.btn.secondary:hover:not(:disabled){background:var(--surface-3)}
.btn.ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--border)}
.btn.ghost:hover:not(:disabled){background:var(--surface-1)}
.btn.danger{background:transparent;border:1px solid var(--err);color:var(--err)}
.btn.danger:hover:not(:disabled){background:var(--err-tint)}
/* Botón de proveedor externo (Google) · Decisión 8 del plan de autenticación.
   Neutro y con borde: NUNCA lleva el degradado del acento, porque el naranja
   compite con la marca del proveedor y la "G" oficial no se recolorea.
   Lo usa registro.html (Bloque 5) y lo reutiliza login.html (Bloque 6). */
.btn.proveedor{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--surface-2);color:var(--ink);border:1px solid var(--border);font-weight:700;
}
/* transform:none anula el "levantar" que login.html le pone a sus .btn: el botón
   del proveedor no compite con la acción principal. */
.btn.proveedor:hover:not(:disabled){background:var(--surface-3);box-shadow:none;transform:none}
.btn.proveedor svg{width:18px;height:18px;flex:none}
/* Separador "o" entre dos métodos de acceso equivalentes. */
.sep-o{display:flex;align-items:center;gap:10px;margin:16px 0 2px;color:var(--ink-faint);font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em}
.sep-o::before,.sep-o::after{content:"";flex:1;height:1px;background:var(--border)}
.metodo-titulo{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--ink-soft);margin-top:12px}
.row{display:flex;gap:8px;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ── Pills / badges / estados ──────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 9px;
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  border:1px solid var(--border);color:var(--ink-mute);
}
.badge.ok{color:var(--ok);background:var(--ok-tint);border-color:var(--ok-soft)}
.badge.accent{color:var(--accent-2);background:var(--accent-tint);border-color:var(--accent-soft)}
.status-pill{
  font-family:var(--mono);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.10em;
  border-radius:999px;padding:5px 9px;white-space:nowrap;flex:none;
  border:1px solid var(--ok-soft);background:var(--ok-tint);color:var(--ok);
}
.status-pill.err{border-color:var(--err);background:var(--err-tint);color:var(--err)}
.status-pill.warn{border-color:rgba(var(--warn-rgb),.4);background:var(--warn-tint);color:var(--warn)}
/* Neutra: para lo que NO es un problema (por ejemplo, un local cerrado porque
   así lo dice su horario). En verde parecería un aviso y en rojo, una falla. */
.status-pill.mute{border-color:var(--border);background:var(--surface-3);color:var(--ink-mute)}
.switch{border:1px solid var(--border);background:var(--surface-1);color:var(--ink-soft);border-radius:999px;padding:6px 11px;font-size:11.5px;font-weight:700;transition:background .15s,border-color .15s,color .15s}
.switch.on{background:var(--ok-tint);border-color:var(--ok-soft);color:var(--ok)}

/* ── Identity card (encabezado de empresa en el panel) ─────────────────── */
.identity{display:grid;gap:12px}
.identity h2{font-family:var(--font-display);font-size:24px;line-height:1.05;margin:0;font-weight:800;letter-spacing:-.04em}
.identity .sub{font-size:12.5px;color:var(--ink-mute);line-height:1.5;margin-top:5px}

/* ── Stats ─────────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:4px}
.stat{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--r-md);padding:14px 12px 12px;min-height:76px;position:relative;overflow:hidden;transition:border-color .15s}
.stat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg, rgba(var(--border-rgb),.8) 0%, rgba(var(--border-rgb),.4) 100%)}
.stat b{display:block;font-family:var(--mono);font-size:21px;line-height:1.1;letter-spacing:-.03em;margin-bottom:5px;font-weight:600;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:11px;color:var(--ink-mute);line-height:1.35;letter-spacing:.01em}
.stat.alert{background:var(--warn-tint);border-color:rgba(var(--warn-rgb),.28)}
.stat.alert::before{background:linear-gradient(90deg, var(--warn) 0%, rgba(var(--warn-rgb),.25) 100%)}
.stat.alert b{color:var(--warn)}
.stat.warn{background:var(--warn-tint);border-color:rgba(var(--warn-rgb),.35)}
.stat.warn::before{background:linear-gradient(90deg,var(--warn),rgba(var(--warn-rgb),.25))}
.stat.warn b{color:var(--warn)}
.stat.err{background:var(--err-tint);border-color:rgba(var(--err-rgb),.35)}
.stat.err::before{background:linear-gradient(90deg,var(--err),rgba(var(--err-rgb),.2))}
.stat.err b{color:var(--err)}
.stat.good{background:var(--ok-tint);border-color:rgba(var(--ok-rgb),.28)}
.stat.good::before{background:linear-gradient(90deg,var(--ok-soft),rgba(var(--ok-rgb),.2))}
.stat.good b{color:var(--ok)}

/* Variante baja: el resumen del panel son dos números que se leen de un
   vistazo, no un tablero. Ocupa casi la mitad de alto sin achicar la cifra
   hasta volverla incómoda. Solo la usa el panel: Monitoreo y Maestra siguen
   con la altura normal. */
.stats.tight{gap:6px;margin-top:2px}
.stats.tight .stat{min-height:0;padding:9px 11px 8px}
.stats.tight .stat b{font-size:18px;margin-bottom:1px}
.stats.tight .stat span{font-size:10.5px}

/* ── Tira de sucursales (recepción web en el panel) ─────────────────────── */
/* Hasta tres entran repartidas; a partir de la cuarta la tira se desliza en
   vez de apilarse y empujar el resto del panel hacia abajo. */
.suc-strip{
  list-style:none;margin:0;padding:0 0 2px;display:flex;gap:8px;
  overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
.suc-strip::-webkit-scrollbar{height:4px}
.suc-strip::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}
.suc-strip > li{
  flex:1 0 0;min-width:92px;scroll-snap-align:start;
  background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--r-md);
  padding:9px 8px;display:flex;flex-direction:column;gap:6px;
}
.suc-strip .suc-nom{
  font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Insignia más chica que la de una fila normal: acá comparte ancho con otras
   dos y el estado se lee igual, porque es una sola palabra. */
.suc-strip .status-pill{align-self:flex-start;font-size:9px;padding:4px 7px;letter-spacing:.06em}
.suc-strip .suc-det{font-size:10.5px;color:var(--ink-mute);line-height:1.3}

/* ── Action tiles (botones grandes del panel) ──────────────────────────── */
.actions-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.action{
  position:relative;min-height:96px;text-decoration:none;background:var(--surface-2);
  border:1px solid var(--border-soft);border-radius:var(--r-md);padding:14px 13px 13px;color:var(--ink);
  display:flex;flex-direction:column;justify-content:flex-end;gap:3px;overflow:hidden;
  transition:transform .14s cubic-bezier(.2,.8,.4,1),border-color .15s,background .15s,box-shadow .18s;
}
.action::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 90% 10%, rgba(var(--accent-rgb),.07) 0%, transparent 65%);opacity:0;transition:opacity .22s;pointer-events:none}
.action:hover{background:var(--surface-3);border-color:var(--border);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.action:hover::after{opacity:1}
.action:active{transform:scale(.981) translateY(0)}
.action.primary{background:linear-gradient(148deg, var(--accent-2) 0%, var(--accent) 48%, var(--accent-pressed) 100%);color:var(--accent-contrast);border-color:transparent;box-shadow:0 4px 22px var(--accent-glow)}
.action.primary:hover{box-shadow:0 8px 32px rgba(var(--accent-rgb),.34);transform:translateY(-1px)}
.action.primary::after{display:none}
.action.primary .hint{color:var(--accent-contrast);opacity:.72}
.action.disabled{opacity:.36;pointer-events:none}
.action .name{font-size:14px;font-weight:800;letter-spacing:-.025em;line-height:1.15}
.action .hint{font-size:11px;color:var(--ink-mute);line-height:1.3}
.action .icon{display:block;font-size:19px;margin-bottom:8px;color:var(--accent);opacity:.85;line-height:1}
.action.primary .icon{color:var(--accent-contrast);opacity:1}

/* ── Tablas ────────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:var(--r-md);border:1px solid var(--border-soft);background:var(--surface-1)}
th,td{padding:9px 10px;border-bottom:1px solid var(--border-soft);text-align:left;vertical-align:middle}
th{font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-mute);font-weight:700;background:rgba(var(--surface-2-rgb),.55)}
tr:last-child td{border-bottom:0}
td{font-size:12.5px;color:var(--ink-soft);line-height:1.35}
td strong{font-size:13px;color:var(--ink)}
td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}

/* ── Listas / items ────────────────────────────────────────────────────── */
.list{display:grid;gap:8px}
.item{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--r-md);padding:11px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.item .t{font-weight:700;font-size:14px}
.item .s{font-size:11.5px;color:var(--ink-mute);font-family:var(--mono);margin-top:3px}
.item:hover{border-color:var(--border);background:var(--surface-3)}
.item .meta{min-width:0;flex:1}
.empty{text-align:center;color:var(--ink-mute);padding:24px 12px;font-size:13.5px}
/* Reserva el espacio de la lista de Monitoreo sin agrandar todos los estados
   vacíos del SaaS. La regla inline de monitoreo.html no define min-height. */
.suc-list{min-height:220px}

/* ── Avisos (notice) y mensajes (msg) ──────────────────────────────────── */
.notice{border:1px solid rgba(var(--warn-rgb),.28);background:var(--warn-tint);color:var(--ink-soft);border-radius:var(--r-md);padding:14px;font-size:13px;line-height:1.55;margin-bottom:12px}
.notice b{color:var(--warn)}
.msg{display:none;margin-top:12px;padding:11px 12px;border-radius:var(--r-sm);font-size:13px;line-height:1.4}
.msg.show{display:block}
.msg.err{background:var(--err-tint);border:1px solid rgba(var(--err-rgb),.5);color:var(--err)}
.msg.ok{background:var(--ok-tint);border:1px solid var(--ok-soft);color:var(--ok)}

/* ── Toast (inyectado por ui.js) ───────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--surface-4);border:1px solid var(--border);color:var(--ink);box-shadow:var(--shadow-lg);padding:11px 18px;border-radius:12px;font-weight:700;font-size:13.5px;z-index:80;max-width:90vw;text-align:center;display:none}

/* ── Aviso de pedidos fuera del POS (inyectado por aviso-pedidos.js) ────── */
/* Va abajo, usa el acento de la empresa (nunca un rojo propio) y se queda
   quieto: la animación `entra` dura menos de un segundo y solo corre cuando
   llega un pedido que antes no estaba. */
/* La altura sale de una variable porque hay pantallas con su propia barra fija
   abajo: Analítica tiene la barra de secciones y Administración la barra de
   borrador. Sin esto el aviso se les sentaba encima y tapaba sus botones.
   El toast sí puede quedar por delante unos segundos: es la respuesta a algo
   que la persona acaba de hacer, y el aviso no se va a ninguna parte. */
.aviso-pedidos{position:fixed;left:50%;bottom:var(--aviso-pedidos-bottom,16px);transform:translateX(-50%);z-index:70;width:min(calc(100% - 24px),440px)}
.ana-body{--aviso-pedidos-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
/* El Asistente IA se para encima de la barra de secciones de Analítica (antes
   tapaba la pestaña «Turnos») y, en cualquier pantalla, encima del aviso de
   pedidos cuando está a la vista. */
.ana-body{--ia-bottom:84px}
body:has(.aviso-pedidos:not(.oculto)){--ia-bottom:calc(var(--aviso-pedidos-bottom, 16px) + 76px)}
.aviso-pedidos.oculto{display:none}
.aviso-pedidos-btn{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  padding:12px 14px;border-radius:14px;font-family:var(--font);
  background:linear-gradient(135deg, var(--accent-2), var(--accent));
  color:var(--accent-contrast);border:1px solid transparent;
  box-shadow:0 6px 26px var(--accent-glow), var(--shadow-lg)}
.aviso-pedidos-texto{flex:1;min-width:0;font-weight:800;font-size:14px;letter-spacing:-.01em}
.aviso-pedidos-empresa{display:block;font-weight:600;font-size:11.5px;opacity:.78}
.aviso-pedidos-ver{font-weight:800;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;opacity:.85;flex:none}
.aviso-pedidos-punto{width:9px;height:9px;border-radius:50%;background:var(--accent-contrast);flex:none;opacity:.9}
.aviso-pedidos.entra .aviso-pedidos-btn{animation:aviso-pedidos-entra .85s ease}
@keyframes aviso-pedidos-entra{
  0%{transform:translateY(14px);opacity:0}
  55%{transform:translateY(-3px);opacity:1}
  100%{transform:translateY(0);opacity:1}
}
@media (prefers-reduced-motion: reduce){
  .aviso-pedidos.entra .aviso-pedidos-btn{animation:none}
}
.aviso-pedidos-modal .aviso-pedidos-lista{display:flex;flex-direction:column;gap:10px}
.aviso-pedidos-item{border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--surface-2)}
.aviso-pedidos-item-top{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin-bottom:8px}
.aviso-pedidos-item-top span{color:var(--ink-mute);font-family:var(--font-mono);font-size:11.5px}
.aviso-pedidos-items{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:4px}
.aviso-pedidos-items li{display:flex;justify-content:space-between;gap:8px;font-size:12.5px}
.aviso-pedidos-items li span{color:var(--ink-mute)}
.aviso-pedidos-total{display:flex;justify-content:space-between;gap:8px;font-size:13px;padding-top:8px;border-top:1px solid var(--border)}
.aviso-pedidos-datos{margin:8px 0 0;font-size:11.5px;color:var(--ink-mute);line-height:1.5}

/* ── Modal (overlay + caja) ────────────────────────────────────────────── */
.ov{position:fixed;inset:0;background:var(--overlay);z-index:60;display:flex;align-items:flex-end;justify-content:center;padding:14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal{width:min(100%,440px);max-height:88dvh;overflow:auto;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow-lg)}
.modal h3{font-family:var(--font-display);margin:0 0 12px;font-size:18px;font-weight:800;letter-spacing:-.02em}
.modal p{margin:0 0 14px;font-size:12.5px;color:var(--ink-mute);line-height:1.5}
.modal .fld + .fld{margin-top:10px}
.modal .row{display:flex;gap:8px;margin-top:12px}
.modal .row button{flex:1}

.footer-note{text-align:center;font-size:10.5px;color:var(--ink-faint);line-height:1.65;margin-top:22px;letter-spacing:.01em}

/* ── Selector de acento personalizado · Administración → Mi negocio ────── */
.accent-editor{margin-top:4px}
.accent-intro{margin-bottom:12px}
.accent-editor-grid{display:grid;grid-template-columns:minmax(170px,220px) minmax(0,1fr);gap:16px}
.accent-picker-column{min-width:0}
.accent-sv{
  --picker-hue:#f97316;position:relative;width:100%;aspect-ratio:1.2;
  border:1px solid var(--border);border-radius:var(--r-md);cursor:crosshair;
  touch-action:none;overflow:hidden;
  background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,var(--picker-hue));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)
}
.accent-sv i{position:absolute;width:18px;height:18px;border-radius:50%;border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.65);transform:translate(-50%,-50%);pointer-events:none}
.accent-hue-label,.accent-subtitle,.accent-hex-row>label{display:block;margin:10px 0 6px;color:var(--ink-mute);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.accent-hue{width:100%;height:12px;margin:0;appearance:none;border-radius:999px;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);cursor:pointer}
.accent-hue::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--surface-1);box-shadow:0 0 0 1px var(--border),var(--shadow-sm)}
.accent-hue::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--surface-1);box-shadow:0 0 0 1px var(--border),var(--shadow-sm)}
.accent-fields{min-width:0}
.accent-hex-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.accent-hex-row>label{grid-column:1;margin-top:0}
#accentHex{grid-column:1;padding:11px 12px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);font:800 15px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase}
#accentHex[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 2px rgba(var(--err-rgb),.12)}
.accent-current{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;gap:6px;align-items:center;color:var(--ink-mute);font-size:11px;font-weight:700}
.accent-current i{display:block;width:46px;height:46px;border-radius:var(--r-sm);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.accent-suggestions{display:flex;gap:8px;flex-wrap:wrap}
.accent-suggestion{width:32px;height:32px;padding:0;border-radius:9px;border:2px solid transparent;background:var(--suggestion);cursor:pointer;box-shadow:var(--shadow-sm)}
.accent-suggestion[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface-1),0 0 0 4px var(--accent)}
.accent-preview{grid-column:1/-1;padding:12px;border:1px solid var(--border-soft);border-radius:var(--r-md);background:var(--surface-2)}
.accent-preview .accent-subtitle{margin-top:0}
.accent-preview-row{display:grid;grid-template-columns:1fr 1fr auto minmax(72px,.7fr);gap:8px;align-items:center}
.accent-preview button{min-height:36px;border-radius:var(--r-sm);font-family:inherit;font-size:12px;font-weight:700}
.accent-preview-primary{border:1px solid var(--accent-fill);background:var(--accent-fill);color:var(--accent-contrast)}
.accent-preview-secondary{border:1px solid var(--accent);background:transparent;color:var(--accent)}
.accent-preview-chip{display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--accent-soft);border-radius:999px;color:var(--accent);font-size:11px;font-weight:700;white-space:nowrap}
.accent-preview-chip i{width:7px;height:7px;border-radius:50%;background:var(--accent-fill)}
.accent-preview-card{position:relative;display:flex;flex-direction:column;gap:5px;min-height:44px;padding:10px 10px 10px 15px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-1)}
.accent-preview-card i{position:absolute;inset:0 auto 0 0;width:4px;border-radius:var(--r-sm) 0 0 var(--r-sm);background:var(--accent-fill)}
.accent-preview-card b{display:block;width:76%;height:5px;border-radius:999px;background:var(--accent-tint)}
.accent-preview-card b+b{width:52%}
.accent-status{margin-top:12px;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--border);font-size:12px;line-height:1.35}
.accent-status.valido{color:var(--ok);border-color:var(--ok-soft);background:var(--ok-tint)}
.accent-status.moderado{color:var(--warn);border-color:var(--warn-soft);background:var(--warn-tint)}
.accent-status.insuficiente,.accent-status.invalido{color:var(--err);border-color:var(--err-soft);background:var(--err-tint)}
@media(max-width:620px){
  .accent-editor-grid{grid-template-columns:1fr}
  .accent-sv{aspect-ratio:1.5}
  .accent-preview{grid-column:1}
  .accent-preview-row{grid-template-columns:1fr 1fr}
}

/* ══════════════════════════════════════════════════════════════════════════
   MÓDULO ANALÍTICA (2026-08-01)
   ----------------------------------------------------------------------------
   Regla dura del módulo: NINGÚN dato se pinta con el color de acento. Una
   empresa puede elegir cualquier acento, y si el dato usa el mismo color, el
   dato y "lo que se toca" se confunden. Los datos usan la familia de dominio
   de temas.css (--pay-cash, --pay-qr, --sale-pos, --sale-web, --cyan).
   El acento se reserva para la navegación y el foco.
   ══════════════════════════════════════════════════════════════════════════ */

/* Espacio para la barra inferior fija, más el área segura del teléfono. */
.ana-body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}

/* ── Barra de secciones ────────────────────────────────────────────────── */
.ana-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
  background:rgba(var(--surface-1-rgb),.94);border-top:1px solid var(--border-soft);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.ana-nav-btn{
  flex:1;min-width:0;min-height:48px;border:1px solid transparent;background:transparent;
  border-radius:var(--r-md);color:var(--ink-mute);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;padding:6px 4px;
  font-family:var(--font);font-size:10.5px;font-weight:700;letter-spacing:.01em;
  transition:background .15s,color .15s,border-color .15s;
}
.ana-nav-btn:hover{background:var(--surface-2);color:var(--ink-soft)}
.ana-nav-btn.activa{background:var(--accent-tint);border-color:var(--accent-soft);color:var(--accent)}
.ana-nav-icono{font-size:16px;line-height:1}
.ana-nav-texto{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* ── Filtros ───────────────────────────────────────────────────────────── */
.ana-filtros{padding:12px}
.ana-filtros-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.ana-filtros-fila + .ana-filtros-fila{margin-top:8px}
.ana-filtro{min-width:0}
.ana-filtro select,.ana-filtro input{min-height:48px}

/* ── Tarjetas de número ────────────────────────────────────────────────── */
.ana-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:4px}
.ana-kpis-2{grid-template-columns:repeat(2,1fr)}
.ana-kpi{
  background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--r-md);
  padding:12px;display:flex;flex-direction:column;gap:4px;min-height:88px;
}
.ana-kpi-titulo{font-size:10px;text-transform:uppercase;letter-spacing:.13em;font-weight:700;color:var(--ink-mute)}
.ana-kpi-valor{font-size:20px;line-height:1.1;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.ana-kpi-pie{font-size:11.5px;color:var(--ink-mute);line-height:1.35}
.ana-kpi-nota{font-size:10.5px;color:var(--ink-faint);line-height:1.35}
.ana-var-sube{color:var(--ok);font-weight:700}
.ana-var-baja{color:var(--err);font-weight:700}
.ana-var-neutro{color:var(--ink-mute)}

/* ── Barra segmentada y leyenda ────────────────────────────────────────── */
.ana-seg{display:flex;height:16px;border-radius:999px;overflow:hidden;background:var(--surface-3);margin:2px 0 12px}
.ana-seg-parte{display:block;height:100%}
/* Línea de 1 px entre segmentos: el borde queda definido aunque dos colores
   vecinos se parezcan, y el reparto se lee sin depender solo del color. */
.ana-seg-parte + .ana-seg-parte{box-shadow:inset 1px 0 0 var(--surface-3)}
.ana-leyenda{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ana-leyenda-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft)}
/* El borde del cuadradito define su silueta contra la tarjeta, así un color
   claro no se pierde en el fondo del tema claro. */
.ana-leyenda-item i{width:10px;height:10px;border-radius:3px;flex:none;border:1px solid var(--border-soft)}
.ana-leyenda-nombre{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ana-leyenda-item b{margin-left:auto;color:var(--ink);font-size:12.5px}
.ana-leyenda-detalle{color:var(--ink-mute);font-size:11.5px;flex:none;min-width:78px;text-align:right}

/* ── Barras horizontales ───────────────────────────────────────────────── */
.ana-barras{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ana-barra{display:flex;align-items:center;gap:8px;font-size:12.5px}
.ana-barra-etiqueta{width:96px;flex:none;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ana-barra-pista{flex:1;min-width:0;height:10px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.ana-barra-valor{display:block;height:100%;border-radius:999px;min-width:2px}
.ana-barra-cifra{flex:none;color:var(--ink);font-size:12px}

/* ── Serie de columnas ─────────────────────────────────────────────────── */
.ana-serie{list-style:none;margin:2px 0 10px;padding:0;display:flex;align-items:flex-end;gap:3px;height:132px;overflow-x:auto}
.ana-col{flex:1;min-width:16px;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%}
.ana-col-pista{flex:1;width:100%;display:flex;align-items:flex-end;background:var(--surface-2);border-radius:var(--r-xs);overflow:hidden}
/* min-height 2px: un día sin venta se sigue viendo. Una columna que desaparece
   parecería un día que no se midió, y eso sería mentir por omisión. */
.ana-col-valor{display:block;width:100%;min-height:2px;border-radius:var(--r-xs)}
.ana-col-etiqueta{font-family:var(--mono);font-size:9.5px;color:var(--ink-mute);white-space:nowrap}

/* ── Textos del módulo ─────────────────────────────────────────────────── */
.ana-texto-grafico{font-size:12px;color:var(--ink-mute);line-height:1.5;margin:10px 0 0}
.ana-vacio{font-size:12.5px;color:var(--ink-mute);margin:0;padding:12px 0}
.ana-alcance{font-size:12px;color:var(--ink-soft);margin:0 0 12px;line-height:1.5}
.ana-fuente{font-size:11px;color:var(--ink-faint);line-height:1.5;margin:12px 0 0}

/* ── Productos y turnos ─────────────────────────────────────────────────── */
.ana-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px}
.ana-chip{
  flex:none;min-height:48px;padding:0 14px;border:1px solid var(--border-soft);
  border-radius:999px;background:var(--surface-2);color:var(--ink-soft);
  font:700 12px var(--font);
}
.ana-chip.activa{background:var(--accent-tint);border-color:var(--accent-soft);color:var(--accent)}
/* Marca de una fila del ranking: "solo plataformas". Va debajo del nombre para
   no empujar la columna ni cortar el producto en pantallas angostas. */
.ana-etiqueta{
  display:block;margin-top:3px;font:800 10px var(--font);letter-spacing:.06em;
  text-transform:uppercase;color:var(--warn)
}
.ana-plegable{border:1px solid var(--border-soft);border-radius:var(--r-md);padding:14px;background:var(--surface-2)}
.ana-plegable summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;color:var(--ink)}
.ana-plegable summary span{font-size:11px;color:var(--ink-mute)}
.ana-lista-simple{columns:2;column-gap:20px;margin:10px 0 0;padding-left:20px;color:var(--ink-soft);font-size:12.5px;line-height:1.7}
.ana-lista-simple li{break-inside:avoid}
.ana-turnos{display:grid;gap:8px}
.ana-turno{
  width:100%;min-height:64px;padding:10px 12px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;text-align:left;border:1px solid var(--border-soft);
  border-radius:var(--r-md);background:var(--surface-2);color:var(--ink);font-family:var(--font);
}
.ana-turno:hover,.ana-turno.activo{border-color:var(--accent-soft);background:var(--accent-tint)}
.ana-turno span:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.ana-turno small{color:var(--ink-mute);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ana-turno-total{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;font-size:13px}
.ana-estado{font:700 9.5px var(--font);font-style:normal;border:1px solid var(--border-soft);border-radius:999px;padding:3px 7px;color:var(--ink-mute)}
.ana-estado.info{color:var(--cyan)}
.ana-estado.ok{color:var(--ok)}
.ana-estado.warn{color:var(--warn)}
.ana-subtitulo{margin-top:18px}
.ana-kv{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--border-soft);font-size:12.5px;color:var(--ink-soft)}
.ana-kv b{text-align:right;color:var(--ink)}
.ana-movimientos{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ana-movimientos li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border-soft);font-size:12px}
.ana-movimientos span{display:flex;flex-direction:column;gap:3px}.ana-movimientos small{color:var(--ink-mute)}
.ana-irregularidades{display:grid;gap:8px}
.ana-irregularidades article{padding:12px;border:1px solid var(--border-soft);border-radius:var(--r-md);background:var(--surface-2)}
.ana-irregularidades p{margin:8px 0 0;color:var(--ink-soft);font-size:12px;line-height:1.5}
.ana-irregularidades small{display:block;margin-top:8px;color:var(--ink-mute);font-size:10.5px}
.ana-irregularidad-cab{display:flex;justify-content:space-between;gap:10px;font-size:12.5px}
.ana-irregularidad-cab span{color:var(--ink-mute);font-size:10.5px;white-space:nowrap}

/* ── Pedidos web, compartir y CSV ──────────────────────────────────────── */
.ana-franjas{display:grid;gap:8px}
.ana-franjas>div{
  min-height:48px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 12px;border:1px solid var(--border-soft);
  border-radius:var(--r-md);background:var(--surface-2);font-size:12px;color:var(--ink-soft);
}
.ana-franjas b{color:var(--ink);text-align:right}
.ana-exportar{display:flex;flex-direction:column;gap:12px}
.ana-exportar>div:first-child{display:flex;flex-direction:column;gap:3px;color:var(--ink)}
.ana-exportar>div:first-child span{font-size:11.5px;color:var(--ink-mute)}
.ana-exportar-botones{display:grid;grid-template-columns:1fr;gap:8px}
.ana-exportar-botones .btn{min-height:48px;margin:0}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media(min-width:640px){
  body{padding-top:20px}
  .topbar{margin-top:-20px;padding-top:20px}
  .actions-grid{grid-template-columns:repeat(3,1fr)}
  .stat b{font-size:23px}
  .ana-exportar{flex-direction:row;align-items:center;justify-content:space-between}
  .ana-exportar-botones{grid-template-columns:repeat(2,auto)}
}
@media(max-width:520px){ .grid2{grid-template-columns:1fr} }
@media(max-width:520px){
  .ana-lista-simple{columns:1}
  .ana-irregularidad-cab{flex-direction:column;gap:3px}
}

/* ══════════════════════════════════════════════════════════════════════════
   CAPA DESKTOP (2026-07-09)
   ----------------------------------------------------------------------------
   Todo lo de acá abajo actúa SOLO en pantallas ≥1024px: el móvil queda igual.
   Cada página "opta" agregando clases a su contenedor: `app-wide` (ancho
   normal de escritorio) o `app-xwide` (ancho extra), más una clase propia
   (app-dashboard, app-master, …) para sus reglas particulares.
   Breakpoints permitidos: 1024px (escritorio) y 1280px (escritorio ancho).
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --desktop-max:1180px;
  --desktop-wide:1320px;
  --desktop-gap:16px;
  --desktop-side:260px;
  --desktop-rail:340px;
}
/* ── Aplicaciones · mosaico de accesos ─────────────────────────────────────
   La lista de `aplicaciones.html`. Cada aplicación es un mosaico chico y
   tocable entero (no una tarjeta con botón aparte), para que las cuatro entren
   de un vistazo en el celular sin scroll.
   El cuadro del icono lleva el COLOR DE IDENTIDAD de cada aplicación, no el
   acento de la empresa: así el mosaico anticipa la pantalla que se va a abrir
   (Cuentas azul, Compras e Insumos verdes, Recetario claro). Por eso son HEX
   fijos y no tokens de tema: acompañan a `aplicaciones.css`, que tampoco cambia
   con el tema. Ver docs/tecnico/PLAN-ESCALABILIDAD-IA.md. */
.apps-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.app-tile{
  --app-tono:var(--surface-3);--app-tinta:var(--ink);
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  background:var(--card-bg);border:1px solid var(--border-soft);border-radius:var(--r-lg);
  padding:18px 12px 15px;box-shadow:var(--shadow-md);color:var(--ink);font-family:var(--font);
  cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .12s;
  animation:fadeUp .38s ease both;
}
.app-tile:hover:not(:disabled){border-color:var(--border);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.app-tile:active:not(:disabled){transform:scale(.985)}
.app-tile:disabled{cursor:default;opacity:.55}
.app-tile:nth-child(2){animation-delay:.06s}
.app-tile:nth-child(3){animation-delay:.12s}
.app-tile:nth-child(4){animation-delay:.18s}
.app-tile:nth-child(5){animation-delay:.24s}
.app-tile-icono{
  width:58px;height:58px;flex:none;border-radius:19px;display:grid;place-items:center;
  background:var(--app-tono);color:var(--app-tinta);box-shadow:0 4px 12px rgba(0,0,0,.18);
  /* El borde solo lo usa el cuadro claro (Recetario): sin él se confunde con
     la tarjeta cuando la empresa tiene tema claro. */
  border:1px solid var(--app-borde,transparent);
}
.app-tile-icono svg{width:30px;height:30px;display:block}
.app-tile-nombre{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.app-tile-detalle{font-size:12.5px;color:var(--ink-mute);line-height:1.35}
/* margin-top:auto: si un nombre ocupa dos líneas, las píldoras de esa fila
   siguen alineadas entre sí en vez de quedar a distinta altura. */
.app-tile .status-pill{margin-top:auto}
/* Colores de identidad: el mismo de la barra superior de cada aplicación. */
.app-tile[data-app="cuentas"]{--app-tono:#1D4ED8;--app-tinta:#FFFFFF}
.app-tile[data-app="compras"],
.app-tile[data-app="insumos"]{--app-tono:#087F3F;--app-tinta:#FFFFFF}
.app-tile[data-app="recetario"]{--app-tono:#F4F5FB;--app-tinta:#1F2937;--app-borde:#D9DEEE}
/* Nota al pie: solo aparece si hay alguna aplicación sin publicar todavía. */
.apps-nota{margin:14px 2px 0;font-size:11.5px;line-height:1.5;color:var(--ink-mute);text-align:center}

/* Tablas anchas: envolver en .table-wrap para que scrolleen solas (nunca la página) */
.table-wrap{overflow-x:auto;max-width:100%}

@media(min-width:1024px){
  /* Anchos de página */
  .app.app-wide{width:min(100%,var(--desktop-max))}

  /* Modales: en PC van centrados y un poco más anchos (en móvil siguen abajo) */
  .ov{align-items:center}
  .modal{width:min(100%,560px)}

  /* Tiles del panel: 4 columnas cuando la página es ancha */
  .app-wide .actions-grid{grid-template-columns:repeat(4,1fr)}
  .app-wide .apps-grid{grid-template-columns:repeat(4,1fr)}

  /* Panel (index): identidad a la izquierda, stats a la derecha */
  .app-dashboard .identity{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}
  .app-dashboard .identity .stats{margin-top:0}

  /* Analítica: la barra de secciones se centra con el ancho de la página y las
     tarjetas de número aprovechan el espacio en vez de estirarse. */
  .ana-nav{
    left:50%;right:auto;transform:translateX(-50%);bottom:16px;
    width:min(100%,var(--desktop-max));border:1px solid var(--border-soft);
    border-radius:999px;box-shadow:var(--shadow-lg);
  }
  .ana-nav-btn{flex-direction:row;gap:8px;font-size:12.5px}
  .ana-body{--ia-bottom:96px}
  .ana-kpis{grid-template-columns:repeat(4,1fr)}
  .ana-kpis-2{grid-template-columns:repeat(2,1fr)}
  .ana-serie{height:168px}
}

/* ── Foco visible y movimiento reducido (A17-H04 · A17-H05, 2026-08-17) ──────
   Dos reglas al final, a propósito: van últimas para que ganen sin subir la
   especificidad de nadie ni tocar los componentes de arriba.

   1) FOCO. `estilos.css` solo dibujaba el foco de `input` y `select`, así que
      quien recorre el panel con Tab pasaba por botones, pestañas y enlaces sin
      ver dónde estaba parado. `:focus-visible` (no `:focus`) es lo que evita
      que además aparezca el recuadro al hacer clic con el mouse.
   2) MOVIMIENTO. Solo el botón del aviso de pedidos respetaba
      `prefers-reduced-motion`. Quien lo activa lo hace por mareo o migraña, y
      lo activa para TODO el sistema, no para un botón. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent-2,var(--accent));
  outline-offset:2px;
  border-radius:var(--r-xs);
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}