/* ===========================================================================
   Sistema visual «Mercado» — cartel de puesto de plaza.

   Tinta negra gruesa, tomate y albahaca, bloques planos de color y tipografía
   gorda. La razón no es estética sino de uso: esta web se abre a las 12:40, en
   la calle, andando y con sol en la pantalla. Ahí gana el contraste alto, el
   bloque grande y el precio que se lee de lejos.

   Todo el aspecto vive aquí. Para cambiar de estilo se reescribe este fichero,
   no las páginas.
   =========================================================================== */

:root {
  --ground: #fffbf4;        /* blanco cálido, no crema beige */
  --surface: #ffffff;
  --surface-2: #f6efe2;

  --ink: #16130f;           /* casi negro, en cálido */
  --ink-2: #4a423a;
  --ink-3: #7c7268;

  /* `line` es la línea discreta de tablas. `ink-line` es el trazo grueso de
     tarjetas y botones. Mezclarlas convierte cualquier tabla en una reja. */
  --line: #e6dccc;
  --ink-line: #16130f;

  --brand: #d94f2b;         /* tomate: acción y coincidencias */
  --brand-soft: #fdece6;
  --accent: #2f7a4a;        /* albahaca: precio */
  --accent-soft: #e6f2ea;
  --highlight: #ffd84d;     /* amarillo de cartel: subrayados */

  --warn: #8a5a0b;
  --warn-soft: #fdf1d8;
  --alert: #b3261e;
  --alert-soft: #fdeae8;

  --display: "Archivo Black", "Arial Black", "Helvetica Neue", Impact, sans-serif;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --radio: 16px;
  --sombra: 4px 4px 0 var(--ink-line);
  --sombra-sm: 3px 3px 0 var(--ink-line);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #12100e;
    --surface: #1b1815;
    --surface-2: #241f1a;
    --ink: #f7f1e7;
    --ink-2: #c4b8a9;
    --ink-3: #8d8276;
    --line: #332c25;
    --ink-line: #4a4038;
    --brand: #f07a55;
    --brand-soft: #2e1a13;
    --accent: #5fbf8a;
    --accent-soft: #14261c;
    --warn: #dcb768;
    --warn-soft: #2b2213;
    --alert: #e79383;
    --alert-soft: #2f1a16;
    /* Sobre fondo casi negro la sombra dura no se ve y el borde ya separa. */
    --sombra: none;
    --sombra-sm: none;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light dark; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); }

/* 16 px como mínimo en los campos: por debajo, iOS hace zoom al enfocarlos y
   la página salta. */
input, select, textarea, button { font: inherit; font-size: max(16px, 1rem); }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 3px; }

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

/* --- estructura --------------------------------------------------------- */

.envoltorio { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.envoltorio-ancho { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

.barra {
  background: var(--ink);
  color: var(--ground);
  border-bottom: 2px solid var(--ink-line);
}
.barra a { color: var(--ground); text-decoration: none; }
.barra-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap;
}
.marca {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.02em;
}
.marca img { flex: none; display: block; }
@media (max-width: 520px) {
  .marca { font-size: 19px; }
  .marca img { height: 22px; width: 22px; }
}
.barra nav { display: flex; gap: 14px; font-size: 14px; font-weight: 600; flex-wrap: wrap; }
.barra nav a:hover { color: var(--highlight); }

/* En pantallas estrechas el nombre y el menú no caben en la misma línea: el
   menú baja y se reparte a lo ancho. Antes, «Soy restaurante» se salía por el
   borde derecho — justo el enlace que más importa para captar restaurantes. */
@media (max-width: 560px) {
  .barra-fila { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .barra nav { justify-content: space-between; gap: 10px; font-size: 13px; }
}

main { padding: 24px 0 56px; }

footer {
  border-top: 2px solid var(--ink-line);
  background: var(--surface-2);
  padding: 24px 0;
  font-size: 13px;
  color: var(--ink-2);
}
footer a { color: var(--ink-2); }
.pie-fila { display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }

/* --- tipografía --------------------------------------------------------- */

h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -.02em; line-height: 1.1; margin: 0; }
h1 { font-size: clamp(27px, 6vw, 38px); }
h2 { font-size: clamp(20px, 4vw, 25px); }
h3 { font-size: 17px; }
p { margin: 0 0 12px; }
.apagado { color: var(--ink-3); }
.pequeño { font-size: 13px; }

.rotulo {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}

/* Subrayado de rotulador sobre una palabra del titular. */
.marca-texto {
  background: var(--highlight); color: #16130f;
  padding: 0 6px; border-radius: 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* --- tarjetas ----------------------------------------------------------- */

/* El elemento que más se repite: su peso define el producto. Borde de tinta y
   sombra desplazada, como un cartel pegado en la pared. */
.tarjeta {
  background: var(--surface);
  border: 2px solid var(--ink-line);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 18px;
  margin-bottom: 14px;
}
.tarjeta-plana { box-shadow: none; }
a.tarjeta { text-decoration: none; color: inherit; display: block; }
a.tarjeta:hover { background: var(--surface-2); }

.rejilla { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* --- botones y campos --------------------------------------------------- */

.boton {
  display: inline-block; text-align: center; text-decoration: none;
  background: var(--brand); color: #fff;
  border: 2px solid var(--ink-line); border-radius: 12px;
  box-shadow: var(--sombra-sm);
  padding: 12px 20px; font-weight: 700; cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
/* Al pulsar, el botón cae sobre su propia sombra. Detalle barato que hace que
   el cartel plano se sienta físico. */
.boton:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none; }
.boton:disabled { opacity: .55; cursor: default; }
.boton-grande { display: block; width: 100%; padding: 18px; font-size: 18px; }

.boton-sobrio {
  display: inline-block; text-align: center; text-decoration: none;
  background: var(--surface); color: var(--ink);
  border: 2px solid var(--ink-line); border-radius: 12px;
  padding: 11px 18px; font-weight: 700; cursor: pointer;
}
.boton-sobrio:active { transform: translate(2px, 2px); }

.boton-verde { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (prefers-color-scheme: dark) { .boton-verde { color: #0d1a12; } }
.boton-amarillo { background: var(--highlight); color: #16130f; border-color: var(--highlight); }

/* Fila de botones de acción de la ficha de restaurante: en escritorio van
   todos en una línea; en móvil, el de "menú del día" y el de "añadir a
   pantalla de inicio" fuerzan su propia línea entera (flex-basis: 100% hace
   que el contenedor flex-wrap corte antes y después de ellos), dejando
   teléfono/cómo llegar/página web juntos en medio. */
@media (max-width: 560px) {
  .fila-acciones .boton-menu-dia,
  .fila-acciones .boton-anadir-inicio {
    flex-basis: 100%;
  }
}

.campo {
  width: 100%; background: var(--surface); color: var(--ink);
  border: 2px solid var(--ink-line); border-radius: 12px;
  padding: 13px 14px;
}
.campo::placeholder { color: var(--ink-3); }
textarea.campo { min-height: 120px; resize: vertical; line-height: 1.5; }
label { display: block; font-weight: 700; margin: 14px 0 6px; }

.buscador { display: flex; gap: 10px; }
.buscador .campo { flex: 1; min-width: 0; }
@media (max-width: 460px) {
  .buscador { flex-direction: column; }
}

/* --- pastillas y precio ------------------------------------------------- */

/* El precio es el segundo dato que busca la gente después del plato. A un
   metro del ojo tiene que destacar sin necesidad de leerse. */
.precio {
  display: inline-block; background: var(--accent); color: #fff;
  border-radius: 9px; padding: 6px 14px;
  font-family: var(--display); font-size: 24px; white-space: nowrap;
}
@media (prefers-color-scheme: dark) { .precio { color: #0d1a12; } }

.pastilla {
  display: inline-block; background: var(--brand); color: #fff;
  border-radius: 999px; padding: 3px 10px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
@media (prefers-color-scheme: dark) { .pastilla { color: #1a0d08; } }

.pastilla-alt {
  display: inline-block; background: var(--highlight); color: #16130f;
  border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700;
}

.pastilla-sobria {
  display: inline-block; background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; font-size: 12px;
}

.pastillas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* --- avisos ------------------------------------------------------------- */

.aviso {
  border: 2px solid var(--ink-line); border-radius: 12px;
  padding: 13px 15px; margin-bottom: 16px; font-weight: 600;
}
.aviso-ok { background: var(--accent-soft); }
.aviso-atencion { background: var(--warn-soft); }
.aviso-error { background: var(--alert-soft); }

/* --- menú de un restaurante --------------------------------------------- */

.seccion-menu { margin-top: 18px; }
/* Las etiquetas "Primeros/Segundos/Postres" del menú necesitan marcar bien
   el corte entre secciones — el .rotulo normal (11px, gris) se usa para
   decenas de cosas pequeñas en el sitio, aquí hace falta que destaque más. */
.seccion-menu .rotulo {
  font-size: 15px; color: var(--ink); letter-spacing: .02em;
  border-bottom: 2px solid var(--ink-line); padding-bottom: 6px;
}
.fila-compartir .boton-sobrio {
  padding: 6px 12px; font-size: 13px; font-weight: 600; border-radius: 10px;
}
.seccion-menu ul { list-style: none; margin: 8px 0 0; padding: 0; }
.seccion-menu li {
  padding: 7px 0; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 12px;
}
.seccion-menu li:last-child { border-bottom: 0; }

.foto-menu {
  border: 2px solid var(--ink-line); border-radius: var(--radio);
  margin: 14px 0; width: 100%;
}

/* --- cabecera de la portada --------------------------------------------- */

.portada-titular {
  font-family: var(--display); font-size: clamp(30px, 7.5vw, 48px);
  line-height: 1.04; letter-spacing: -.03em; margin: 0 0 14px; text-wrap: balance;
}

.cifras { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.cifra {
  background: var(--surface); border: 2px solid var(--ink-line);
  border-radius: 12px; padding: 10px 14px; flex: 1; min-width: 120px;
}
.cifra b { font-family: var(--display); font-size: 22px; display: block; line-height: 1.1; }

/* --- listas de enlaces SEO ---------------------------------------------- */

.nube { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.nube a {
  background: var(--surface); border: 2px solid var(--ink-line);
  border-radius: 999px; padding: 5px 13px;
  text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600;
}
.nube a:hover { background: var(--highlight); }

/* --- tabla del panel de administración ---------------------------------- */

.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th, .tabla td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); }
.tabla th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.tabla-envoltorio { overflow-x: auto; }

/* --- utilidades --------------------------------------------------------- */

.fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fila-separada { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
.centrado { text-align: center; }
.mt { margin-top: 18px; }
.mt-g { margin-top: 32px; }
.oculto { display: none !important; }

/* Enlace para saltar al contenido: invisible salvo con el teclado. */
.saltar {
  position: absolute; left: -9999px;
  background: var(--highlight); color: #16130f; padding: 10px 16px;
  border-radius: 0 0 12px 0; font-weight: 700; z-index: 10;
}
.saltar:focus { left: 0; top: 0; }