/* ════════════════════════════════════════════════════════════════
   Karamel Pastry Shop — sistema visual
   ════════════════════════════════════════════════════════════════

   Tres reglas que ordenan todo lo demás:

   1. Una escala. Siete tamaños de letra, tres pesos, tres radios. Nada
      fuera de esa lista. La sensación de "sucio" casi nunca viene del
      color: viene de doce tamaños que se parecen entre sí.

   2. El color significa algo o no está. Menta = la marca y lo terminado.
      Arcilla = lo que se puede pulsar. Rojo = un problema de verdad.
      Un saldo pendiente no es un problema: es lo normal. No va en rojo.

   3. No todo es una tarjeta. Un borde dice "objeto aparte". Si todo lleva
      borde, nada destaca y la pantalla se lee como una reja.
   ════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:light;

  /* ── Marca ── */
  --menta:#9BD1B9;
  --menta-honda:#3C8265;   /* 4.59:1 sobre blanco */
  --menta-palida:#EDF6F1;
  --menta-fondo:#DFEFE7;
  --arcilla:#A57A64;
  --arcilla-honda:#7B5646;
  --arcilla-palida:#F5EDE8;

  /* ── Neutros. La base es blanca: el color entra por los filos, no por el suelo ── */
  --papel:#FFFFFF;
  --papel-2:#F7F9F8;
  --fondo:#FFFFFF;
  --linea:#E8ECEA;
  --linea-firme:#D6DCD9;

  --tinta:#2E2A26;
  --tinta-2:#6A645C;
  --tinta-3:#756F68;       /* era #9B948A = 3.00:1, ilegible en un mostrador con luz */

  /* ── Estados ── */
  --alerta:#A8453A;
  --alerta-palida:#FAECE9;
  /* Mostaza, no marrón. Al oscurecerlo para el contraste había quedado a 79 de
     distancia del terracota de los botones: «En cocina», «Retrasada» y «Marcar
     listo» se leían del mismo color a 60 px. Este está a 135 y pasa 4.68:1. */
  --horno:#8D6E00;
  --horno-palida:#FAF4E0;

  /* ── Escala tipográfica ──
     El suelo subió. Contados los usos, el 73% de la interfaz vivía en 11 y
     12,5 px, y --t-m —la "base" declarada— se usaba 15 veces contra 97. Una
     pantalla de mostrador se lee de pie, con prisa y con la luz de la calle
     encima: el tamaño base no puede ser el que menos se usa.
     El único por debajo de 12 px es --t-micro, y es solo para rótulos en
     versalitas con interletrado, que es donde 11 px todavía se sostiene. */
  --t-micro:11px;   /* ENTREGA, CLIENTE — rótulos en mayúsculas, nada más */
  --t-xs:12px;      /* rótulos, meta */
  --t-s:13px;       /* secundario */
  --t-m:14px;       /* texto base */
  --t-l:15.5px;     /* énfasis, título de fila */
  --t-xl:19px;      /* título de sección */
  --t-2xl:26px;     /* título de página */
  --t-cifra:18px;   /* números */

  /* ── Radios ── */
  --r-s:7px;
  --r-m:11px;
  --r-l:15px;

  /* ── Tipografías ── */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --sombra:0 1px 2px rgba(46,42,38,.04);
  --sombra-alta:0 12px 40px -14px rgba(46,42,38,.28);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--fondo);color:var(--tinta);
  font-family:var(--sans);font-size:var(--t-m);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.oculto{display:none !important}
button{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--menta-honda);outline-offset:2px;border-radius:var(--r-s)}
.sprite{display:none}
svg use,svg symbol{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Rótulo pequeño. Se usa poco a propósito: en versalitas todo, nada resalta. */
.rotulo{font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)}

/* ───────── El logo ─────────
   Recreado con tipografía: marco fino, nombre muy espaciado y "pastry shop"
   debajo, como en el rótulo del local. */
/* Sin recuadro: encerrado en un borde de un pixel parecía el hueco donde no
   cargó una imagen, no una marca. */
.marca{display:inline-flex;flex-direction:column;align-items:center;gap:3px;
  padding:0;color:var(--arcilla-honda);line-height:1}
.marca .nombre{font-family:var(--serif);font-size:18px;letter-spacing:.34em;text-indent:.34em;font-weight:400}
.marca .sub{font-family:var(--serif);font-size:9.5px;letter-spacing:.3em;text-indent:.3em;text-transform:lowercase}

/* ───────── Botones ───────── */
.btn{border:1px solid var(--linea-firme);background:var(--papel);color:var(--tinta);
  padding:8px 14px;border-radius:var(--r-s);cursor:pointer;font-size:var(--t-s);font-weight:500;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  transition:border-color .12s,background .12s,color .12s}
.btn:hover{border-color:var(--menta-honda);color:var(--menta-honda)}
.btn svg{width:15px;height:15px}
/* El botón de acción va en arcilla, y esto ya dio dos vueltas.
   Con el verde el problema no era el verde: era que hacía SEIS trabajos a la vez
   —botón, «listo», «pagado», fila seleccionada, canto de la tarjeta de hoy y
   subrayado de la pestaña activa—. Cuando un color significa seis cosas deja de
   significar ninguna y nada destaca.
   Repartido: el verde se queda para ESTADO (listo, pagado) y la arcilla para
   ACCIÓN. Además es lo único de la marca fuera del logo, así que Karamel vuelve
   a estar en la pantalla y no solo en el rótulo. */
/* Sobre la arcilla clara el texto blanco daba 3.77:1 — por debajo de lo legible.
   La arcilla honda del logo da 6.44:1 y es el mismo color de la marca. */
.btn.principal{background:var(--arcilla-honda);border-color:var(--arcilla-honda);color:#fff}
.btn.principal:hover{background:#69493C;border-color:#69493C;color:#fff}

.btn.ancho{width:100%;justify-content:center;padding:11px}
.btn.chico{padding:5px 11px;font-size:var(--t-xs);font-weight:500}
.btn.peligro:hover{border-color:var(--alerta);color:var(--alerta)}
.btn.sutil{border-color:transparent;background:var(--papel-2)}
.btn.sutil:hover{background:var(--menta-palida);color:var(--menta-honda)}
.btn[disabled]{opacity:.4;cursor:not-allowed}

/* ───────── Pastillas ─────────
   Sin punto de color: el punto repetía la información que ya da el color del
   texto, y en una lista de veinte filas eran veinte puntos de ruido. */
.pastilla{display:inline-flex;align-items:center;font-size:var(--t-xs);font-weight:700;
  padding:3px 9px;border-radius:999px;white-space:nowrap;letter-spacing:.01em}
.pastilla.pendiente{color:var(--tinta-2);background:var(--papel-2)}
.pastilla.cocina{color:var(--horno);background:var(--horno-palida)}
.pastilla.listo,.pastilla.si{color:var(--menta-honda);background:var(--menta-palida)}
.pastilla.entregado,.pastilla.no{color:var(--tinta-3);background:var(--papel-2)}

/* ───────── Formularios ───────── */
label.campo{display:block;margin-bottom:14px;font-size:var(--t-s);font-weight:500;color:var(--tinta-2)}
label.campo input,label.campo select,label.campo textarea{display:block;width:100%;margin-top:6px;
  padding:9px 11px;border:1px solid var(--linea-firme);border-radius:var(--r-s);font-size:var(--t-m);
  font-family:inherit;background:var(--papel);color:var(--tinta)}
label.campo input:focus,label.campo select:focus,label.campo textarea:focus{
  border-color:var(--menta-honda);outline:none}
label.campo textarea{min-height:74px;resize:vertical;line-height:1.5}
label.campo.mono input,label.campo.mono textarea{font-family:var(--mono);font-size:var(--t-s)}
label.linea{display:flex;align-items:flex-start;gap:9px;font-size:var(--t-m);font-weight:400;
  color:var(--tinta);margin-bottom:14px;cursor:pointer}
label.linea input{margin:2px 0 0;flex:0 0 auto;width:15px;height:15px;accent-color:var(--arcilla)}
label.linea small{display:block;color:var(--tinta-3);font-size:var(--t-s);margin-top:2px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:600px){.dos{grid-template-columns:1fr}}
.error{color:var(--alerta);font-size:var(--t-s);margin:0 0 12px}

/* ───────── Acceso ───────── */
.acceso{position:fixed;inset:0;display:grid;place-items:center;background:var(--menta-palida);z-index:100;padding:20px}
.acceso-caja{background:var(--papel);border-radius:var(--r-l);padding:34px 32px;width:min(390px,100%);
  border-top:2px solid var(--menta);box-shadow:var(--sombra-alta);text-align:center}
.acceso-caja form{text-align:left;margin-top:24px}
.acceso-caja h1{font-family:var(--serif);font-size:var(--t-xl);margin:20px 0 3px;font-weight:400}
.acceso-caja p.ayuda{margin:0;color:var(--tinta-3);font-size:var(--t-s)}

/* ───────── Modal ───────── */
.modal{position:fixed;inset:0;background:rgba(46,42,38,.4);display:grid;place-items:center;
  padding:20px;z-index:60;overflow-y:auto}
.modal-caja{background:var(--papel);border-radius:var(--r-l);width:min(560px,100%);padding:26px 28px;
  box-shadow:var(--sombra-alta);max-height:90vh;overflow-y:auto}
.modal-caja h2{font-family:var(--serif);margin:0 0 3px;font-size:22px;font-weight:400}
.modal-caja .ayuda{margin:0 0 22px;color:var(--tinta-2);font-size:var(--t-s)}
.modal-pie{display:flex;gap:9px;justify-content:flex-end;margin-top:22px}

/* ───────── Aviso flotante ───────── */
.aviso{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--tinta);
  color:#fff;padding:11px 22px;border-radius:999px;font-size:var(--t-s);z-index:120;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.4)}
.aviso.mal{background:var(--alerta)}

@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ───────── Foco visible ─────────
   No había ninguno. En una pantalla de mostrador, que se usa con prisa y a
   veces solo con el teclado, no saber dónde estás parado es un defecto de uso,
   no un detalle. */
:focus-visible{outline:2px solid var(--arcilla-honda);outline-offset:2px;border-radius:3px}
.btn:focus-visible{outline-offset:3px}