/* SPECTER CONTROL · Punto de Venta · marca del PRODUCTO (Fase 5c). La usan POS, cocina, bar y meseros.
   No se personaliza por cliente (eso es la app de clientes, con la marca del negocio).
   Un solo juego de variables para los dos temas: <html data-tema="blanco|negro"> (lo pone marca/specter.js).
   Rojo #cc2200 solo en acciones y lo importante; en negro, #ff3b1f para texto rojo (contraste).
   Sin terracota, amarillo ni naranja. Logos tal cual: marca/logos/ (no se cambian colores ni proporciones). */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fuentes/inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(fuentes/inter-latin-800-normal.woff2) format('woff2')}

/* ---------- tema BLANCO (por omisión) ---------- */
:root, html[data-tema="blanco"]{
  --sc-fondo:#ffffff; --sc-panel:#f4f4f5; --sc-panel2:#ebebed; --sc-tarjeta:#ffffff;
  --sc-borde:#e4e4e7; --sc-borde2:#d4d4d8;
  --sc-texto:#0A0A0B; --sc-texto2:#3f3f46; --sc-texto3:#71717a;
  --sc-principal:#0A0A0B; --sc-sobre-principal:#ffffff;            /* botones principales: negros */
  --sc-rojo:#cc2200; --sc-rojo-txt:#cc2200; --sc-rojo-suave:#fdecea; --sc-sobre-rojo:#ffffff;
  --sc-ok:#0a7a3d; --sc-ok-relleno:#0a7a3d; --sc-ok-suave:#e9f6ee;  /* pagado, listo, pidió cuenta */
  --sc-aut:#6d28d9; --sc-aut-relleno:#6d28d9; --sc-aut-suave:#f1ecfd; /* por autorizar */
  --sc-prog:#1d4ed8; --sc-prog-relleno:#1d4ed8; --sc-prog-suave:#e9effd; /* programado */
  --sc-velo:rgba(10,10,11,.55); --sc-sombra:0 10px 30px rgba(10,10,11,.12);
  --sc-raya:4px;
  color-scheme:light;
}
/* ---------- tema NEGRO ---------- */
html[data-tema="negro"]{
  --sc-fondo:#0A0A0B; --sc-panel:#141417; --sc-panel2:#1c1c21; --sc-tarjeta:#141417;
  --sc-borde:#26262b; --sc-borde2:#3a3a41;
  --sc-texto:#f2f2f2; --sc-texto2:#c4c4cc; --sc-texto3:#8b8b95;
  --sc-principal:#f2f2f2; --sc-sobre-principal:#0A0A0B;            /* sobre fondo negro, el principal se invierte */
  --sc-rojo:#cc2200; --sc-rojo-txt:#ff3b1f; --sc-rojo-suave:#2a100b; --sc-sobre-rojo:#ffffff;
  --sc-ok:#35c47c; --sc-ok-relleno:#0a7a3d; --sc-ok-suave:#0f271b;
  --sc-aut:#b39cfb; --sc-aut-relleno:#6d28d9; --sc-aut-suave:#1f1836;
  --sc-prog:#7aa7ff; --sc-prog-relleno:#1d4ed8; --sc-prog-suave:#121f3a;
  --sc-velo:rgba(0,0,0,.72); --sc-sombra:0 10px 30px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* ---------- raya roja delgada arriba de cada app ---------- */
html.sc::after{content:"";position:fixed;left:0;right:0;top:0;height:var(--sc-raya);background:var(--sc-rojo);z-index:2147483000;pointer-events:none}
html.sc[data-sc-sin-raya]::after{display:none}   /* cocina y bar: su estilo de siempre, sin raya */

/* ---------- marca chica: encabezados y PIN ---------- */
.sc-marca{display:flex;align-items:center;gap:12px;min-width:0}
.sc-marca img{height:34px;width:auto;flex:none;display:block}
.sc-marca b{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--sc-texto);white-space:nowrap}
.sc-marca small{display:block;font-family:'Inter',system-ui,sans-serif;font-weight:500;font-size:12px;color:var(--sc-texto3);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-pin-marca{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.sc-pin-marca img{height:48px;width:auto;display:block}
.sc-pin-marca p{margin:0;font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:500;color:var(--sc-texto3);letter-spacing:.04em;white-space:nowrap}
.sc-pin-marca b{font-weight:700;letter-spacing:.2em;color:var(--sc-texto)}

/* ---------- pantalla de inicio (proporciones de pantalla-inicio-referencia.html, 1920×1080) ---------- */
.sc-splash{position:fixed;inset:0;z-index:2147483600;display:flex;align-items:center;justify-content:center;
  background:var(--sc-fondo);color:var(--sc-texto);font-family:'Inter',system-ui,sans-serif;overflow:hidden;transition:opacity .5s ease}
.sc-splash.sc-sale{opacity:0;pointer-events:none}
.sc-splash .sc-fondo{position:absolute;inset:0}
html[data-tema="negro"] .sc-splash .sc-fondo{background:
  radial-gradient(48.6vh 35.2vh at 50% 39.8%, rgba(204,34,0,.10), transparent 62%),
  radial-gradient(130vh 83.3vh at 50% 50%, #16161a 0%, #0A0A0B 70%)}
html[data-tema="blanco"] .sc-splash .sc-fondo{background:radial-gradient(120vh 83.3vh at 50% 50%, #ffffff 0%, #f1f1f3 80%)}
.sc-splash .sc-fondo:after{content:"";position:absolute;inset:0;background-size:5.93vh 5.93vh;
  -webkit-mask-image:radial-gradient(92.6vh 64.8vh at 50% 50%,#000 30%,transparent 80%);mask-image:radial-gradient(92.6vh 64.8vh at 50% 50%,#000 30%,transparent 80%)}
html[data-tema="negro"] .sc-splash .sc-fondo:after{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px)}
html[data-tema="blanco"] .sc-splash .sc-fondo:after{background-image:linear-gradient(rgba(10,10,11,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(10,10,11,.045) 1px,transparent 1px)}
.sc-splash .sc-top{position:absolute;left:0;right:0;top:0;height:6px;background:#cc2200}
.sc-splash .sc-lock{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}
.sc-splash .sc-embw{position:relative;line-height:0}
.sc-splash .sc-emb{height:min(19.44vh,30vw);width:auto;filter:drop-shadow(0 1.67vh 3.7vh rgba(0,0,0,.4))}
html[data-tema="blanco"] .sc-splash .sc-emb{filter:drop-shadow(0 1.48vh 2.6vh rgba(0,0,0,.12))}
.sc-splash .sc-txt{display:flex;flex-direction:column;align-items:center;margin-top:min(4.07vh,6.3vw)}
.sc-splash .sc-wm{height:min(10.93vh,14.4vw);width:auto}
.sc-splash .sc-nombre{font-weight:800;font-size:min(8vh,9vw);letter-spacing:-.01em;line-height:1}
.sc-splash .sc-prod{font-weight:600;font-size:min(3.7vh,4.4vw);letter-spacing:.62em;margin-right:-.62em;white-space:nowrap;margin-top:min(4.26vh,6.6vw)}
html[data-tema="negro"] .sc-splash .sc-prod{color:#cfcfd4}
html[data-tema="blanco"] .sc-splash .sc-prod{color:#3a3a40}
.sc-splash.sc-corto .sc-prod{font-size:min(4.44vh,6.2vw);letter-spacing:.9em;margin-right:-.9em}
.sc-splash .sc-pie{position:absolute;left:0;right:0;bottom:min(4.07vh,6vw);text-align:center;font-size:min(1.48vh,2.6vw);letter-spacing:.34em;font-weight:600;opacity:.35}
.sc-splash .sc-toca{position:absolute;right:2.2vh;bottom:2vh;font-size:12px;opacity:.0}
/* entrada suave: aparece el emblema, luego el nombre; el punto rojo late una vez */
.sc-splash .sc-emb{animation:sc-aparece .9s cubic-bezier(.2,.7,.2,1) both}
.sc-splash .sc-txt{animation:sc-aparece .9s .25s cubic-bezier(.2,.7,.2,1) both}
.sc-splash .sc-pie{animation:sc-pie 1s .5s ease both}
.sc-splash .sc-punto{position:absolute;left:51.75%;top:52.43%;width:14.2%;aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(220,20,10,.85) 0 45%,rgba(204,34,0,0) 70%);opacity:0;animation:sc-late 1.1s .95s ease-out 1 both}
@keyframes sc-aparece{from{opacity:0;transform:translateY(1vh) scale(.985)}to{opacity:1;transform:none}}
@keyframes sc-pie{from{opacity:0}to{opacity:.35}}
@keyframes sc-late{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}35%{opacity:.75;transform:translate(-50%,-50%) scale(1.35)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.9)}}
@media (prefers-reduced-motion:reduce){.sc-splash .sc-emb,.sc-splash .sc-txt,.sc-splash .sc-pie{animation:none}.sc-splash .sc-punto{display:none}}

/* ---------- Fase 6h · avisos: uno a la vez, chicos, sobre el encabezado (lo acomoda marca/specter.js) ---------- */
.sc-aviso{position:fixed;z-index:9999;display:none;align-items:center;gap:8px;box-sizing:border-box;padding:6px 8px 6px 12px;border-radius:12px;
  background:#0A0A0B;color:#fff;font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:600;line-height:1.25;
  box-shadow:0 6px 18px rgba(0,0,0,.28);cursor:pointer;-webkit-tap-highlight-color:transparent}
html[data-tema="negro"] .sc-aviso{background:#fff;color:#0A0A0B}
.sc-aviso.on{display:flex}
.sc-aviso span{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sc-aviso button{flex:none;height:30px;padding:0 10px;border-radius:8px;border:0;background:#fff;color:#0A0A0B;font:inherit;font-weight:800;cursor:pointer}
html[data-tema="negro"] .sc-aviso button{background:#0A0A0B;color:#fff}

/* ---------- 1 nov FORJA · Estilo GLASSY (Bryan) · 11 nov ARES: ahora se llama "FONDO" ----------
   Es el estilo PRINCIPAL: abre así si el aparato no escogió nada; "Normal" (blanco) es la segunda opción (botón Fondo/Normal).
   La imagen va atrás con un velo blanco 40% y TODO el sistema queda SÓLIDO, sin vidrio: barra, tarjetas, paneles y hojas.
   Solo en tema blanco; cocina y bar (data-sc-tema-fijo) nunca. Imagen: marca/fondo-hojas.jpg. Por dentro se sigue llamando "glassy". */
html[data-estilo="glassy"]{--sc-fondo:transparent;background:#eef0ec}
html[data-estilo="glassy"]::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.40),rgba(255,255,255,.40)),url(fondo-hojas.jpg) center/cover no-repeat #eef0ec}
html[data-estilo="glassy"] body{background:transparent!important}
html[data-estilo="glassy"] .top{background:#fff}
html[data-estilo="glassy"] .cuadro{background:#fff}