/* ══════════════════════════════════════════════════════════════
   DON MICHULE — Sistema visual
   Fuente única de la marca. Lo enlazan menu, pedidos, admin,
   estado y especiales. Antes este bloque estaba copiado en cada
   archivo y se desincronizaba solo: si tocás un color, tocalo acá.
   ══════════════════════════════════════════════════════════════ */

:root {
    /* ── Marca ───────────────────────────────────────────── */
    --negro:      #1A1A1A;
    --crema:      #FBF5EE;
    --nude:       #E8E0DF;
    --oro:        #D4A055;
    --marron:     #8B7355;   /* tal cual el menú. Queda pendiente subirle el contraste:
                                en 13px sobre crema no llega a 4.5:1 */
    --borde:      #DDD5D3;
    --verde:      #5B8C5A;

    /* Alias heredados: los usan reglas viejas de pedidos y admin */
    --bg:         var(--nude);
    --superficie: #FFFDFA;
    --oro-claro:  var(--crema);
    --gris-c:     #EDE6E5;
    --gris-m:     var(--marron);

    /* ── Estados ─────────────────────────────────────────────
       Seis, derivados de la familia cálida. Reemplazan los ~90
       colores sueltos del panel (violeta y azul de Flat UI,
       cuatro rojos, tres verdes). Cada uno: texto / fondo / borde.
       "Listo" es el único sólido: es el que exige acción. */
    --st-espera-tx:   #6E625F;  --st-espera-bg:   #EDE6E5;  --st-espera-bd: #DDD5D3;
    --st-prep-tx:     #8A6520;  --st-prep-bg:     #F7EDDC;  --st-prep-bd:   #E5CFA4;
    --st-listo-tx:    #D4A055;  --st-listo-bg:    #1A1A1A;  --st-listo-bd:  #1A1A1A;
    --st-ok-tx:       #3F6B3F;  --st-ok-bg:       #E9F0E8;  --st-ok-bd:     #C3D6C1;
    --st-error-tx:    #9B3A2F;  --st-error-bg:    #F7E7E4;  --st-error-bd:  #E3BDB6;
    --st-ext-tx:      #5A5570;  --st-ext-bg:      #ECEAF0;  --st-ext-bd:    #CFCADB;

    /* Rojo único de acción destructiva */
    --rojo:       #9B3A2F;
    --rojo-osc:   #E08C7E;   /* el mismo rojo, legible sobre negro */

    /* ── Superficies oscuras ─────────────────────────────────
       La barra del total y el cajón del carrito. Son negro de
       marca, no un tema aparte: acá quedan nombradas para que
       nadie vuelva a inventar un #232323 suelto. */
    --negro-2:    #232323;   /* elevada (botones dentro del cajón) */
    --negro-3:    #141414;   /* fondo del cajón */
    --linea-osc:  #3A3A3A;
    --tx-osc:     #EDE6E5;   /* texto principal sobre negro */
    --tx-osc-2:   #9A8F8C;   /* texto secundario sobre negro */

    /* ── Radios: cuatro, no diecisiete ───────────────────── */
    --r-chip:   4px;
    --r-int:    8px;
    --r-card:  10px;
    --r-pill: 999px;

    /* ── Escala tipográfica ──────────────────────────────────
       Nueve pasos. Venían 24 tamaños distintos en la app y 28 en
       el panel: por eso se veía artesanal aunque cada pantalla
       por separado estuviera bien. El modo cocina queda afuera a
       propósito (44 y 70px se leen a un metro de la hornalla). */
    --t-cap:     11px;   /* versalitas, chips */
    --t-lbl:     12px;   /* etiquetas */
    --t-sm:    13.5px;   /* texto secundario */
    --t-btn:     14px;   /* botones y filas */
    --t-body:    15px;   /* texto corriente */
    --t-sec:     15px;   /* título de sección */
    --t-input:   16px;   /* campos: menos que esto y iOS hace zoom solo */
    --t-h2:      22px;   /* título de pantalla */
    --t-display: 27px;   /* marca */
    --t-num:     30px;   /* cifras destacadas */
}

/* ── Tipografía ──────────────────────────────────────────────
   DM Sans en las cinco superficies. El menú usaba la fuente del
   sistema, así que se veía San Francisco en iPhone y Roboto en
   Android: dos identidades según el teléfono del cliente. */
body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.t-display { font-size: var(--t-display); font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; line-height: 1.1; }
.t-sec     { font-size: var(--t-sec);     font-weight: 800; letter-spacing: 2px;   text-transform: uppercase; }
.t-lbl     { font-size: var(--t-lbl);     font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; }
.t-cap     { font-size: var(--t-cap);     font-weight: 700; letter-spacing: .6px;  text-transform: uppercase; color: var(--marron); }
.t-sm      { font-size: var(--t-sm);      font-weight: 400; color: var(--marron); }

/* Cualquier cosa con dígitos que se lea en columna */
.num, .precio, [data-num] { font-variant-numeric: tabular-nums; }

/* ── Iconografía ─────────────────────────────────────────────
   Lucide, trazo 2px, licencia ISC. El sprite lo inyecta
   iconos.js; acá va solo cómo se dibujan. */
svg.ic {
    width: 1em; height: 1em;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    vertical-align: -.14em; flex: none;
}
svg.ic-lg { width: 1.25em; height: 1.25em; }

/* ── Estados: una clase por estado ───────────────────────── */
.est {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--t-cap); font-weight: 800; letter-spacing: .6px;
    text-transform: uppercase; padding: 4px 10px;
    border-radius: var(--r-pill); border: 1px solid;
}
.est-espera { color: var(--st-espera-tx); background: var(--st-espera-bg); border-color: var(--st-espera-bd); }
.est-prep   { color: var(--st-prep-tx);   background: var(--st-prep-bg);   border-color: var(--st-prep-bd); }
.est-listo  { color: var(--st-listo-tx);  background: var(--st-listo-bg);  border-color: var(--st-listo-bd); }
.est-ok     { color: var(--st-ok-tx);     background: var(--st-ok-bg);     border-color: var(--st-ok-bd); }
.est-error  { color: var(--st-error-tx);  background: var(--st-error-bg);  border-color: var(--st-error-bd); }
.est-ext    { color: var(--st-ext-tx);    background: var(--st-ext-bg);    border-color: var(--st-ext-bd); }

/* ── Los mismos seis estados, sobre negro ────────────────────
   Las tarjetas de pedido del panel son negras (superficie
   operativa densa, al estilo Toast): un chip claro ahí no se
   lee. Misma semántica, adaptada al fondo.
   Se invierte cuál es el sólido: sobre claro el sólido es
   negro, sobre negro es oro. La regla que importa se mantiene
   igual — "listo" es el único que pesa. */
.est-d-espera { color: #9A8F8C; background: #2A2A2A;                 border-color: #3A3A3A; }
.est-d-prep   { color: #E0B877; background: rgba(212,160,85,.16);    border-color: rgba(212,160,85,.42); }
.est-d-prep.fuerte { background: rgba(212,160,85,.30);               border-color: var(--oro); }
.est-d-listo  { color: #1A1A1A; background: var(--oro);              border-color: var(--oro); }
.est-d-ok     { color: #8FBF8D; background: rgba(91,140,90,.20);     border-color: rgba(91,140,90,.45); }
.est-d-error  { color: #E08C7E; background: rgba(155,58,47,.26);     border-color: rgba(224,140,126,.40); }
.est-d-ext    { color: #B6AEC9; background: rgba(90,85,112,.32);     border-color: rgba(182,174,201,.35); }

/* ── Botones ─────────────────────────────────────────────── */
.btn-m {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-family: inherit; font-size: 14px; font-weight: 700;
    padding: 13px 16px; border-radius: var(--r-card);
    border: 1px solid transparent; cursor: pointer;
    text-decoration: none; line-height: 1.2;
    transition: background .15s, color .15s, border-color .15s;
}
.btn-m-1 { background: var(--negro); color: var(--crema); }
.btn-m-2 { background: transparent; color: var(--marron); border-color: var(--borde); }
.btn-m-2:hover { border-color: var(--negro); color: var(--negro); }
.btn-m-del { background: transparent; color: var(--rojo); border-color: var(--st-error-bd); }
.btn-m-del:hover { background: var(--st-error-bg); }
.btn-m:disabled { opacity: .45; cursor: not-allowed; }

/* ── Tarjetas y campos ───────────────────────────────────── */
.card-m {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-card);
    overflow: hidden;
    /* Sin sombra, a propósito: el menú no tiene ninguna y por eso
       se ve limpio. La separación la hace el borde. */
}
.input-m {
    font-family: inherit; font-size: var(--t-input);
    color: var(--negro); background: transparent;
    border: 0; border-bottom: 1px solid var(--borde);
    padding: 8px 2px; width: 100%;
}
.input-m:focus { outline: none; border-bottom-color: var(--oro); }

/* ── Foco visible en todo lo que se navega con teclado ───── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--oro);
    outline-offset: 2px;
    border-radius: var(--r-chip);
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Pantallas completas (cerrado / pausa / confirmación) ────
   Las usan la app de pedidos y la de Especiales. Antes estaban
   maquetadas con style="" repetido bloque por bloque. */
.splash { display: none; position: fixed; inset: 0; background: var(--bg);
          flex-direction: column; align-items: center; justify-content: center;
          padding: 32px; text-align: center; }
.splash-cerrado { z-index: 500; }
.splash-pausa   { z-index: 600; }
/* Tapa la pantalla hasta saber si el local está abierto. Sin esto el cliente
   veía el menú y recién después se le encimaba el cartel de "estamos cerrados",
   que es la peor forma de enterarse. */
.splash-carga   { z-index: 650; }
.splash-carga .splash-logo { animation: splash-latido 1.4s ease-in-out infinite; margin-bottom: 0; }
@keyframes splash-latido { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .splash-carga .splash-logo { animation: none; } }
.splash-conf    { z-index: 700; justify-content: flex-start;
                  padding: 28px 22px; overflow-y: auto; }
.splash-logo    { width: 140px; height: 140px; border-radius: 50%;
                  object-fit: cover; margin-bottom: 28px; }
.splash-titulo  { font-size: var(--t-h2); font-weight: 800; margin-bottom: 12px; }
.splash-texto   { color: var(--marron); font-size: var(--t-body); line-height: 1.5; }
.splash-texto.con-aire { margin-bottom: 32px; }

/* ── Encabezado de marca ─────────────────────────────────────
   El mismo tratamiento en las cinco: logo redondo, la palabra
   en versalitas espaciadas y el filete dorado debajo.
   Cambia el tamaño según la superficie, no la identidad: el
   menú es una portada, las apps son herramientas. */
.marca-wordmark {
    font-size: var(--t-h2); font-weight: 800;
    letter-spacing: 2.5px; text-transform: uppercase; line-height: 1.15;
}
.marca-wordmark.compacta { font-size: var(--t-input); letter-spacing: 1.6px; }
.marca-bajada { font-size: var(--t-sm); color: var(--marron); margin-top: 4px; }
.filete {
    height: 2px; width: 48px; background: var(--oro);
    margin: 12px auto 0; border-radius: 2px;
}
.filete-sm { width: 34px; margin-top: 10px; }

/* ── Campos de fecha y hora ──────────────────────────────────
   iOS dibuja input[type=date] a su manera: centra el valor, le
   da un ancho propio que ignora el width:100% (por eso se salía
   de la tarjeta) y lo deja más bajo que el resto de los campos.
   Va acotado a .field-input para no tocar los filtros del panel,
   que son chicos a propósito. */
.field-input[type="date"],
.field-input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;          /* sin esto iOS impone su ancho y desborda */
    min-height: 46px;      /* misma caja que los campos de texto */
    text-align: left;
    font-family: inherit;
    line-height: 1.25;
}
.field-input[type="date"]::-webkit-date-and-time-value,
.field-input[type="time"]::-webkit-date-and-time-value {
    text-align: left;
    margin: 0;
}
/* appearance:none esconde el ícono en escritorio: se vuelve a mostrar */
.field-input[type="date"]::-webkit-calendar-picker-indicator,
.field-input[type="time"]::-webkit-calendar-picker-indicator {
    margin-left: auto;
    opacity: .5;
    cursor: pointer;
}