/* La Marea: restaurante. Papel crema, azul de mar y teja, titulares con serifa
   como una carta impresa. La cocina cambia a pantalla oscura de alto contraste. */
:root {
  --primario: #b8431b;
  --primario-texto: #fff8f0;
  --mar: #14324a;
  --papel: #f7f0e3;
  --fondo: var(--papel);
  --superficie: #fffbf4;
  --superficie-2: #f3ead9;
  --borde: #e6d9c2;
  --texto: #2b2118;
  --texto-2: #6b5a48;
  --texto-3: #988670;
  --radio: 16px;
  --fuente-titulos: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --primario: #f0814f; --primario-texto: #1d0e06; --mar: #0d2234;
    --papel: #15110d; --superficie: #1f1914; --superficie-2: #29211a; --borde: #3a2f25;
    --texto: #f3e9da; --texto-2: #c4b19a; --texto-3: #97856f;
  }
}

/* Barra: azul de mar con el nombre en serifa */
.app-barra { background: var(--mar); border-bottom: 0; color: #f7f0e3; }
.app-logo { background: var(--primario); border-radius: 50%; font-family: var(--fuente-titulos); font-style: italic; }
.app-nombre { font-size: 1.2rem; font-style: italic; }
.app-tipo { color: #b9c7d3; }
.app-barra .btn-fantasma { color: #d9e2ea; }
.app-barra .btn-fantasma:hover { background: rgb(255 255 255 / .08); }
.pestanas a { color: #b9c7d3; }
.pestanas a[aria-current="page"] { color: #fff; border-bottom-color: var(--primario); }
h1, h2 { font-weight: 600; }

/* ---------- Carta (lo que ve el cliente) ---------- */
.contenido:has(.carta-movil) { padding-top: 0; }
.carta-movil { max-width: 680px; margin: 0 auto; }
.carta-portada {
  position: relative; text-align: center; color: #f7f0e3; background: var(--mar);
  margin: 0 -20px; padding: 26px 24px 46px;
}
@media (max-width: 599px) { .carta-portada { margin: 0 -16px; } }
.carta-sello { display: inline-block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: #e7b99f; border: 1px solid rgb(231 185 159 / .5); border-radius: 99px; padding: 3px 12px; }
.carta-portada h1 { font-size: clamp(2.6rem, 9vw, 3.6rem); font-style: italic; font-weight: 500; margin: 10px 0 6px; letter-spacing: -.01em; }
.carta-portada p { color: #c9d5df; max-width: 420px; margin: 0 auto; }
.carta-ola { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 24px; fill: var(--fondo); }

.carta-categorias { position: sticky; top: var(--alto-barra, 100px); z-index: 5; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 12px 0; background: var(--fondo); }
.carta-categorias a { flex: none; padding: 7px 14px; border-radius: 99px; border: 1.5px solid var(--texto); color: var(--texto); text-decoration: none; font-family: var(--fuente-titulos); font-size: .95rem; }
.carta-categorias a:hover { background: var(--texto); color: var(--fondo); }
.carta-seccion { scroll-margin-top: calc(var(--alto-barra, 100px) + 58px); margin-top: 22px; }
.carta-seccion h2 { font-size: 1.6rem; font-style: italic; display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.carta-seccion h2::after { content: ""; flex: 1; border-bottom: 1px dashed var(--texto-3); }

.plato { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px dotted var(--borde); }
.plato-dibujo { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--borde); }
.plato h3 { font-family: var(--fuente-titulos); font-size: 1.1rem; font-weight: 600; }
.plato p { color: var(--texto-2); font-size: .88rem; }
.plato .alergenos { color: var(--texto-3); font-size: .74rem; margin-top: 3px; text-transform: lowercase; letter-spacing: .02em; }
.plato[data-agotado="true"] { opacity: .5; }
.plato[data-agotado="true"] h3 { text-decoration: line-through; }
.plato-precio { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.plato-precio strong { font-family: var(--fuente-titulos); font-size: 1.15rem; color: var(--primario); }
.btn-anadir { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--primario); color: var(--primario-texto); display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 10px rgb(184 67 27 / .35); }
.btn-anadir:hover { transform: scale(1.06); }
.contador { display: inline-flex; align-items: center; gap: 6px; background: var(--primario); color: var(--primario-texto); border-radius: 99px; padding: 3px; }
.contador button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .18); color: inherit; display: grid; place-items: center; cursor: pointer; }
.contador span { min-width: 20px; text-align: center; font-weight: 700; }
.carrito-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--fondo) 35%); display: flex; justify-content: center; }
.carrito-barra .btn { width: min(620px, 100%); border-radius: 99px; background: var(--mar); border-color: var(--mar); color: #fff; box-shadow: var(--sombra-alta); }
body:has(.carrito-barra) .guia { bottom: 84px; }
.resumen-lineas { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.resumen-lineas li { display: flex; justify-content: space-between; gap: 12px; }

/* ---------- Cocina: pantalla oscura, letra grande, se lee de lejos ---------- */
body.modo-cocina { --fondo: #0e1116; --superficie: #171b22; --superficie-2: #11151b; --borde: #2a313c; --texto: #f2f4f7; --texto-2: #aab3c0; --texto-3: #7d8796; color-scheme: dark; }
.modo-cocina .cabecera h1 { font-family: var(--fuente); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; font-size: 1.4rem; }
.tablero { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
@media (max-width: 899px) { .tablero { grid-template-columns: minmax(0, 1fr); } }
.columna { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 12px; padding: 12px; display: grid; gap: 10px; border-top: 4px solid var(--info); }
.columna[data-estado="preparando"] { border-top-color: var(--aviso); }
.columna[data-estado="listo"] { border-top-color: var(--ok); }
.columna h2 { font-family: var(--fuente); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 8px; }
.pedido { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 14px; display: grid; gap: 8px; }
.pedido.tarde { border-color: var(--peligro); box-shadow: 0 0 0 1px var(--peligro); }
.pedido.tarde .pedido-tiempo { color: var(--peligro); font-weight: 800; }
.pedido-cab { display: flex; justify-content: space-between; align-items: center; }
.pedido-cab strong { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pedido-tiempo { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.pedido-tiempo .icono { width: 16px; height: 16px; }
.pedido-destino { font-size: .8rem; color: var(--texto-2); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.pedido-lineas { margin: 0; padding: 0; list-style: none; font-size: 1.02rem; display: grid; gap: 2px; }
.pedido-lineas strong { color: var(--primario); }
.pedido-nota { display: flex; gap: 6px; align-items: center; font-size: .85rem; font-weight: 700; color: #1a1205; background: #f0b45a; border-radius: 6px; padding: 5px 8px; }
.pedido-nota .icono { width: 15px; height: 15px; }
.modo-cocina .pedido .btn-primario { flex: 1; min-height: 44px; font-size: .95rem; }

.interruptor { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; cursor: pointer; }
.interruptor input { width: 18px; height: 18px; accent-color: var(--primario); }
@media (max-width: 599px) { .interruptor span { display: none; } }

/* Resumen y gestión: tarjetas de papel con titulares en serifa */
.kpi-valor { font-family: var(--fuente-titulos); font-weight: 600; }
.tarjeta h2 { font-style: italic; font-size: 1.2rem; }