/* Identidad de cada módulo. <html data-marca="tnf|bowl|cocadas|buffet|central"> (lo pone caja.js o app.js).
   Solo cambia la imagen (colores, letras, franja de la marca); los botones y su lugar son los mismos.
   Los colores fijos de cada restaurante en los gráficos del Panel (--s-*) no se tocan. */

/* ---------- tokens comunes a todas las marcas ---------- */
:root{
  --f-num:var(--f-display);          /* números grandes: totales, precios */
  --r-tile:var(--r);                 /* esquinas de los botones de producto */
  --banda:#141b26; --banda-tinta:#eef2fb; --banda-suave:rgba(255,255,255,.72); --banda-linea:rgba(255,255,255,.22); --banda-acento:#8fa8ff;
  --fondo-dibujo:none;
  --sombra:0 1px 2px rgba(16,24,32,.06),0 2px 8px rgba(16,24,32,.05);
}

/* ---------- Central: renovación neutra (administrador, distribuidor) ---------- */
:root[data-marca="central"]{
  --bg:#F1F3F6; --surface:#FFFFFF; --surface-2:#E6EAF0; --ink:#141B26; --muted:#5A6577; --line:#D3D9E2;
  --accent:#2747C7; --accent-ink:#FFFFFF; --accent-soft:#E2E8FB;
  --banda:#141B26; --banda-tinta:#EEF2FB; --banda-acento:#8FA8FF;
}
@media (prefers-color-scheme: dark){:root[data-marca="central"]:not([data-theme="light"]){
  --bg:#0E121A; --surface:#161C27; --surface-2:#1E2633; --ink:#E7ECF4; --muted:#9AA6B8; --line:#2A3342;
  --accent:#8AA2FF; --accent-ink:#0B1230; --accent-soft:#1C2645; --banda:#0A0E15; color-scheme:dark}}
:root[data-marca="central"][data-theme="dark"]{
  --bg:#0E121A; --surface:#161C27; --surface-2:#1E2633; --ink:#E7ECF4; --muted:#9AA6B8; --line:#2A3342;
  --accent:#8AA2FF; --accent-ink:#0B1230; --accent-soft:#1C2645; --banda:#0A0E15; color-scheme:dark}

/* ---------- TNF LAB: del logo (círculo verde trébol con letras blancas de burbuja) ---------- */
:root[data-marca="tnf"]{
  --bg:#F2F7F2; --surface:#FFFFFF; --surface-2:#E3EFE4; --ink:#10261A; --muted:#55695B; --line:#CFE0D2;
  --accent:#1E6B30; --accent-ink:#FFFFFF; --accent-soft:#DEEFE1;
  --f-display:'Fredoka','Segoe UI Rounded','Segoe UI',system-ui,sans-serif;
  --r:14px; --r-tile:20px;
  --banda:#1E6B30; --banda-tinta:#FFFFFF; --banda-acento:#FFFFFF;
  --fondo-dibujo:radial-gradient(circle,rgba(30,107,48,.07) 2px,transparent 2.5px);
}
@media (prefers-color-scheme: dark){:root[data-marca="tnf"]:not([data-theme="light"]){
  --bg:#0D1610; --surface:#142019; --surface-2:#1B2B21; --ink:#E9F4EC; --muted:#9DB6A4; --line:#27392D;
  --accent:#5DBB72; --accent-ink:#06210E; --accent-soft:#163522; --banda:#15521F; color-scheme:dark}}
:root[data-marca="tnf"][data-theme="dark"]{
  --bg:#0D1610; --surface:#142019; --surface-2:#1B2B21; --ink:#E9F4EC; --muted:#9DB6A4; --line:#27392D;
  --accent:#5DBB72; --accent-ink:#06210E; --accent-soft:#163522; --banda:#15521F; color-scheme:dark}

/* ---------- Tropical Bowl: de su manual de marca (#0B3D23 verde oscuro, #4CAF16 verde, #FF8C00 naranja,
   #E53935 rojo, #8BC34A verde claro; Poppins + manuscrita). El naranja con letra blanca no se lee, así que los
   botones van en verde oscuro y el naranja queda para la pestaña activa, los títulos y los detalles. ---------- */
:root[data-marca="bowl"]{
  --bg:#F8F7F1; --surface:#FFFFFF; --surface-2:#EEF3E4; --ink:#0B3D23; --muted:#56685B; --line:#DCE5D0;
  --accent:#0B3D23; --accent-ink:#FFFFFF; --accent-soft:#E7F3DA;
  --naranja:#FF8C00; --naranja-tinta:#0B3D23; --verde:#4CAF16; --verde-claro:#8BC34A; --rojo:#E53935;
  --f-display:'Poppins','Segoe UI',system-ui,sans-serif; --f-script:'Kaushan Script','Segoe Script',cursive;
  --r:14px; --r-tile:18px;
  --banda:#0B3D23; --banda-tinta:#FFFFFF; --banda-acento:#FF8C00;
  --fondo-dibujo:radial-gradient(circle at 100% 0,rgba(255,140,0,.10),transparent 32%),radial-gradient(circle at 0 100%,rgba(76,175,22,.10),transparent 38%);
}
@media (prefers-color-scheme: dark){:root[data-marca="bowl"]:not([data-theme="light"]){
  --bg:#0B1710; --surface:#12221A; --surface-2:#1A2F23; --ink:#EEF6E9; --muted:#A3B9A8; --line:#25402F;
  --accent:#8BC34A; --accent-ink:#0B2A17; --accent-soft:#1B3A23; --naranja:#FF9F33; --banda:#072A17; color-scheme:dark}}
:root[data-marca="bowl"][data-theme="dark"]{
  --bg:#0B1710; --surface:#12221A; --surface-2:#1A2F23; --ink:#EEF6E9; --muted:#A3B9A8; --line:#25402F;
  --accent:#8BC34A; --accent-ink:#0B2A17; --accent-soft:#1B3A23; --naranja:#FF9F33; --banda:#072A17; color-scheme:dark}

/* ---------- Restaurante Cocadas: del logo (crema, verde bosque, vino, amarillo de la flor;
   letra Lexend, hecha para leerse fácil, en títulos, productos, precios y textos). La franja es crema en
   claro y en oscuro, para que el logo se vea igual. ---------- */
:root[data-marca="cocadas"]{
  --bg:#FBF4EF; --surface:#FFFFFF; --surface-2:#F3E6DD; --ink:#0F2A1C; --muted:#66705F; --line:#E6D5CA;
  --accent:#134A2C; --accent-ink:#FFFFFF; --accent-soft:#E3EFE6;
  --vino:#8B1E1E; --oro:#E9A514;
  --f-display:'Lexend','Segoe UI',system-ui,sans-serif; --f-body:'Lexend','Segoe UI',system-ui,sans-serif;
  --r:10px; --r-tile:12px;
  --banda:#F9EBE2; --banda-tinta:#0F3A24; --banda-suave:rgba(15,58,36,.72); --banda-linea:rgba(15,58,36,.28);
  --banda-hover:rgba(15,58,36,.08); --banda-acento:#8B1E1E;
}
@media (prefers-color-scheme: dark){:root[data-marca="cocadas"]:not([data-theme="light"]){
  --bg:#111A15; --surface:#18231D; --surface-2:#212E26; --ink:#F3ECE6; --muted:#A9B4AB; --line:#2E3B33;
  --accent:#6CC08F; --accent-ink:#0B2216; --accent-soft:#183626; --vino:#E8907F; color-scheme:dark}}
:root[data-marca="cocadas"][data-theme="dark"]{
  --bg:#111A15; --surface:#18231D; --surface-2:#212E26; --ink:#F3ECE6; --muted:#A9B4AB; --line:#2E3B33;
  --accent:#6CC08F; --accent-ink:#0B2216; --accent-soft:#183626; --vino:#E8907F; color-scheme:dark}

/* ---------- Cocadas Buffet: parrillada (ámbar brasa sobre carbón, letra de rótulo) ---------- */
:root[data-marca="buffet"]{
  --bg:#F3F1EF; --surface:#FFFFFF; --surface-2:#E9E5E1; --ink:#1F1A17; --muted:#6A5F57; --line:#DDD5CE;
  --accent:#B45309; --accent-ink:#FFFFFF; --accent-soft:#FBE9D2;
  --f-display:'Oswald','Arial Narrow','Segoe UI',system-ui,sans-serif;
  --r:8px; --r-tile:8px;
  --banda:#1F1A17; --banda-tinta:#F7EEE6; --banda-acento:#F59E0B;
  --brasa-fin:#9A3412;               /* final del degradado de brasa (con letra clara) */
}
@media (prefers-color-scheme: dark){:root[data-marca="buffet"]:not([data-theme="light"]){
  --bg:#141110; --surface:#1D1917; --surface-2:#27211E; --ink:#F1E9E3; --muted:#B3A59A; --line:#3A312B;
  --accent:#F59E0B; --accent-ink:#2B1600; --accent-soft:#3D2A12; --banda:#0D0B0A; --brasa-fin:#D97706; color-scheme:dark}}
:root[data-marca="buffet"][data-theme="dark"]{
  --bg:#141110; --surface:#1D1917; --surface-2:#27211E; --ink:#F1E9E3; --muted:#B3A59A; --line:#3A312B;
  --accent:#F59E0B; --accent-ink:#2B1600; --accent-soft:#3D2A12; --banda:#0D0B0A; --brasa-fin:#D97706; color-scheme:dark}

/* ---------- estructura renovada (igual para todas; cada marca la colorea) ---------- */
html{overflow-x:clip}
@supports not (overflow-x:clip){html{overflow-x:hidden}}
/* sin background-attachment:fixed: en celulares obliga a repintar toda la pantalla en cada toque y al desplazar */
body{background-color:var(--bg);background-image:var(--fondo-dibujo);background-size:24px 24px,24px 24px}
:root[data-marca="bowl"] body{background-size:auto}

/* franja de la marca arriba, de borde a borde */
.top{position:relative;color:var(--banda-tinta);padding-block:14px 14px;margin-bottom:14px;isolation:isolate}
.top::before{content:"";position:absolute;inset:0 -100vmax;background:var(--banda);z-index:-1}
.top .brand h1{color:var(--banda-tinta);font-size:24px;letter-spacing:.005em}
.top .brand .sub,.top .today{color:var(--banda-suave)}
.top .sm b,.top .sm{color:var(--banda-tinta)}
.top .sm .muted{color:var(--banda-suave)}
.top .btn{background:transparent;color:var(--banda-tinta);border-color:var(--banda-linea)}
.top .btn:hover{background:var(--banda-hover,rgba(255,255,255,.10))}
/* logo del restaurante en la franja (el nombre queda para lectores de pantalla) */
.top .logo{display:block;height:58px;width:auto;max-width:min(260px,52vw);object-fit:contain}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.top .btn.primary{background:var(--banda-acento);border-color:var(--banda-acento);color:var(--banda)}
.top :focus-visible{outline-color:var(--banda-acento)}
.mark{background:var(--banda-acento);color:var(--banda);width:46px;height:46px;font-size:15px;letter-spacing:.04em}

/* pestañas: la activa en el color de la marca */
/* fondo liso: el desenfoque (backdrop-filter) hacía lenta la pantalla en celulares */
.tabs{background:var(--bg);border-bottom-color:var(--line)}
.tab.on{background:var(--accent);color:var(--accent-ink)}

/* tarjetas y botones de producto con un poco de relieve */
.tile,.mesa,.stat,.kpi,.card,.panel,.tablewrap,.viz,.orow,.pick{box-shadow:var(--sombra)}
.tile,.mesa{border-radius:var(--r-tile)}
/* el relieve al pasar el mouse solo en pantallas con mouse; en celulares y tablets no hay "hover" */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .tile,.mesa,.pick{transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
  .tile:hover,.mesa:hover,.pick:hover{transform:translateY(-1px)}
}
/* toque inmediato: sin espera de doble toque para zoom, y el botón responde apenas se toca */
button,a,.btn,.tab,.chip,[data-act]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn:active,.tab:active,.chip:active,.seg button:active{filter:brightness(.92)}
.tile:active,.mesa:active,.pick:active{transform:scale(.97)}
.tile b{font-family:var(--f-display)}
.tile span,.tline .sub,.total,.grande,.stat .v,.kpi .v,.p-monto,.vuelto,.card .big{font-family:var(--f-num)}
/* el subtítulo de la franja comparte la clase .sub con los subtotales de la cuenta */
.top .brand .sub{min-width:0;text-align:left;font-weight:500;font-family:var(--f-body)}
.panel{border-top:4px solid var(--accent)}
.seg button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.stat.hero{background:var(--accent);border-color:var(--accent)}
.stat.hero .k,.stat.hero .v{color:var(--accent-ink)}
.mesa.ocupada{box-shadow:0 2px 10px rgba(0,0,0,.12)}

/* ---------- detalles de cada marca ---------- */
/* TNF LAB: marca redonda como el sello del logo; letra de burbuja; botones bien redondos */
:root[data-marca="tnf"] .mark{border-radius:50%;background:#FFFFFF;color:#1E6B30;font-family:var(--f-display);font-weight:700;font-size:13px;line-height:1;text-align:center;width:50px;height:50px}
:root[data-marca="tnf"] .top .brand h1{font-weight:700;font-size:26px}
:root[data-marca="tnf"] .tile b,:root[data-marca="tnf"] h2{font-weight:600}
:root[data-marca="tnf"] .btn,:root[data-marca="tnf"] .chip,:root[data-marca="tnf"] .tab{border-radius:999px}
:root[data-marca="tnf"] .tile.momento{border-left-color:var(--accent)}
:root[data-marca="tnf"] .tile .etq{color:var(--accent);background:var(--accent-soft)}
:root[data-marca="tnf"] body{background-size:22px 22px}

/* Tropical Bowl: sello redondo «TB» como su perfil de redes; naranja en lo activo; títulos manuscritos */
:root[data-marca="bowl"] .mark{border-radius:50%;background:#FFFFFF;color:#0B3D23;font-family:var(--f-script);font-size:20px;font-weight:400;letter-spacing:0}
:root[data-marca="bowl"] .top .brand h1{font-weight:700}
:root[data-marca="bowl"] .tab.on{background:var(--naranja);color:var(--naranja-tinta)}
:root[data-marca="bowl"] .panel{border-top-color:var(--naranja)}
:root[data-marca="bowl"] .group-h{font-family:var(--f-script);color:var(--naranja);font-size:22px;font-weight:400}
:root[data-marca="bowl"] .tile.listo{border-left-color:var(--verde)}
:root[data-marca="bowl"] .chip.on{background:var(--accent-soft);border-color:var(--verde);color:var(--accent)}
:root[data-marca="bowl"] .top::after{content:"";position:absolute;left:-100vmax;right:-100vmax;bottom:-6px;height:6px;z-index:-1;
  background:radial-gradient(circle at 6px 0,var(--banda) 6px,transparent 6.5px) 0 0/12px 6px repeat-x}
:root[data-marca="bowl"] .tab{border-radius:14px}
:root[data-marca="bowl"] .btn,:root[data-marca="bowl"] .chip{border-radius:999px}
:root[data-marca="bowl"] .tile b{font-weight:700;font-size:19px}

/* Restaurante Cocadas: franja crema con la línea vino del logo; categorías en letra manuscrita */
:root[data-marca="cocadas"] .top::after{content:"";position:absolute;left:-100vmax;right:-100vmax;bottom:0;height:3px;z-index:-1;background:var(--banda-acento)}
:root[data-marca="cocadas"] .top{border-bottom:0}
:root[data-marca="cocadas"] .top .btn.primary{color:#FFFFFF}
:root[data-marca="cocadas"] .group-h{color:var(--vino);font-size:18px;font-weight:600}
:root[data-marca="cocadas"] .group-h::before{content:"• ";color:var(--oro)}
:root[data-marca="cocadas"] .tile b{font-weight:700}
:root[data-marca="cocadas"] .tile span,:root[data-marca="cocadas"] .total,:root[data-marca="cocadas"] .grande{font-variant-numeric:lining-nums tabular-nums}
:root[data-marca="cocadas"] .tab.on{background:var(--accent)}
:root[data-marca="cocadas"] .tile.listo{border-left-color:var(--oro)}

/* Cocadas Buffet: carbón con línea de brasa; títulos en mayúsculas de rótulo */
:root[data-marca="buffet"] .mark{border-radius:6px;background:linear-gradient(160deg,#F59E0B,#DC2626);color:#1F1A17}
:root[data-marca="buffet"] .top::after{content:"";position:absolute;left:-100vmax;right:-100vmax;bottom:0;height:4px;z-index:-1;
  background:linear-gradient(90deg,#F59E0B,#DC2626 55%,#F59E0B)}
:root[data-marca="buffet"] h1,:root[data-marca="buffet"] h2,:root[data-marca="buffet"] .tile b,:root[data-marca="buffet"] .mesa b,
:root[data-marca="buffet"] .group-h,:root[data-marca="buffet"] .tab{text-transform:uppercase;letter-spacing:.03em}
:root[data-marca="buffet"] .tile.big{background:linear-gradient(160deg,var(--accent),var(--brasa-fin));border-color:var(--accent)}
:root[data-marca="buffet"] .mesa.ocupada{background:linear-gradient(160deg,var(--accent),var(--brasa-fin))}

@media print{body{background:#fff}.top::before,.top::after{display:none}.top,.top .brand h1{color:#000}}