/* marca.css — la identidad de Pastas La Sfoglia.
   La comparten la carta pública y el dashboard: los dos tienen que sentirse el
   mismo producto, el de ellos. Lo específico de cada uno va en su propio CSS.

   El tricolor italiano, pero de trattoria y no de bandera: verdes y rojos algo
   más hondos que los oficiales, sobre crema en vez de blanco puro. Da la onda
   sin quedar disfrazado.

   Cambiando los tokens de :root cambia la marca entera. */

:root {
  /* Tricolor */
  --verde:        #0f7a3d;
  --verde-hondo:  #0a5730;
  --verde-claro:  #e8f3ea;
  --rojo:         #c4161c;
  --rojo-hondo:   #8f1016;
  --rojo-claro:   #fdeceb;

  /* Papel */
  --crema:        #fbf7ef;
  --crema-honda:  #f4ebda;
  --superficie:   #fffdf8;
  --borde:        #e6dac4;
  --borde-fuerte: #d3c2a4;

  /* Tinta */
  --tinta:        #241c14;
  --tinta-media:  #5c4c3c;
  --tinta-suave:  #8a7663;

  /* Señales */
  --ambar:        #b8791a;
  --ambar-claro:  #fdf3e0;

  --ancho:    680px;
  --radio:    12px;
  --radio-ch: 8px;
  --sombra:   0 1px 2px rgba(36, 28, 20, .05), 0 8px 24px rgba(36, 28, 20, .05);
  --sombra-alta: 0 4px 12px rgba(36, 28, 20, .10), 0 16px 40px rgba(36, 28, 20, .10);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font: 16px/1.6 var(--sans);
  -webkit-text-size-adjust: 100%;
}

[hidden] { display: none !important; }

/* ── La bandera ───────────────────────────────────────────────────────────
   Franja tricolor de 5px. Va arriba de todo, en las dos aplicaciones: es la
   firma de la casa y lo primero que se ve al abrir cualquiera de las dos. */

.tricolor {
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--verde) 0 33.333%,
    #f7f4ec     33.333% 66.666%,
    var(--rojo)  66.666% 100%
  );
}

.tricolor--fino { height: 3px; }

/* Marquita tricolor para poner antes de un título. El borde es lo que hace
   que la banda del medio se vea sobre fondo crema. */
.marca-italia {
  display: inline-block;
  width: 18px;
  height: 12px;
  flex: 0 0 auto;
  border: 1px solid var(--borde-fuerte);
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--verde) 0 33.333%,
    #ffffff     33.333% 66.666%,
    var(--rojo)  66.666% 100%
  );
}

/* ── Tipografía ─────────────────────────────────────────────────────────── */

.titulo-serif {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.1;
  margin: 0;
}

.sobretitulo {
  margin: 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* ── Pastillas de estado ────────────────────────────────────────────────── */

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}

.pastilla::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.pastilla--sin-punto::before { display: none; }

.pastilla--verde { background: var(--verde-claro);  color: var(--verde-hondo); }
.pastilla--rojo  { background: var(--rojo-claro);   color: var(--rojo-hondo); }
.pastilla--ambar { background: var(--ambar-claro);  color: var(--ambar); }
.pastilla--gris  { background: var(--crema-honda);  color: var(--tinta-media); }

/* ── Botones ────────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radio-ch);
  background: var(--verde);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.boton:hover:not(:disabled) { background: var(--verde-hondo); }
.boton:disabled { opacity: .5; cursor: not-allowed; }

.boton--suave {
  background: var(--superficie);
  border-color: var(--borde-fuerte);
  color: var(--tinta-media);
}
.boton--suave:hover:not(:disabled) {
  background: var(--crema-honda);
  color: var(--tinta);
}

.boton--rojo { background: var(--rojo); }
.boton--rojo:hover:not(:disabled) { background: var(--rojo-hondo); }

.boton--chico { padding: 6px 12px; font-size: .84rem; }
.boton--ancho { width: 100%; }

/* ── Campos ─────────────────────────────────────────────────────────────── */

.campo {
  display: block;
  margin-bottom: 14px;
}

.campo__nombre {
  display: block;
  margin-bottom: 5px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--tinta-media);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-ch);
  background: var(--superficie);
  color: var(--tinta);
  font: inherit;
  font-size: .95rem;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: 2px solid var(--verde);
  outline-offset: -1px;
  border-color: var(--verde);
}

.campo textarea { resize: vertical; min-height: 72px; }

/* ── Accesibilidad ──────────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}