/* app/src/static/app.css
   Tokens extraídos del mockup aprobado (docs/mockups/propuesta-entregables.html) */

:root {
  --paper: #FFFEFA;
  --ink: #2E3A45;
  --muted: #68737F;
  --line: #E6E2D6;
  --grid: #F1EEE3;

  --primero: #D97B29;    /* zanahoria */
  --segundo: #B5484D;    /* tomate */
  --guarnicion: #5E9E4D; /* verde huerta */
  --postre: #7A63B0;     /* uva */
  --cena: #3E7CA6;       /* azul noche */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: var(--paper);
}

body {
  font-family: "Avenir Next", "Avenir", "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.45;
}

a {
  color: var(--primero);
}

/* ---------- cabecera ---------- */

.cabecera {
  display: flex;
  align-items: center;
  gap: 6mm;
  border-bottom: 2px solid var(--ink);
  padding: 4mm 6mm;
}

.cabecera .marca {
  font-size: 15px;
  letter-spacing: .06em;
  font-weight: 600;
  text-transform: uppercase;
}

.cabecera nav {
  margin-left: auto;
  display: flex;
  gap: 5mm;
}

.cabecera nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 1mm 0;
  border-bottom: 2px solid transparent;
}

.cabecera nav a:hover,
.cabecera nav a.activo {
  color: var(--primero);
  border-bottom-color: var(--primero);
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 6mm;
}

/* ---------- listado de platos ---------- */

.cabecera-listado {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4mm;
  margin-bottom: 4mm;
}

.barra-busqueda {
  margin-bottom: 4mm;
}

.cabecera-listado .barra-busqueda {
  margin-bottom: 0;
  flex: 1;
}

.boton-nuevo {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  padding: 2mm 4mm;
  border-radius: 2mm;
  color: #fff;
  background: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.barra-busqueda input[type="search"] {
  width: 100%;
  max-width: 360px;
  font-family: inherit;
  font-size: 14px;
  padding: 2mm 3mm;
  border: 1px solid var(--line);
  border-radius: 2mm;
  background: #fff;
  color: var(--ink);
}

.barra-busqueda input[type="search"]:focus {
  outline: 2px solid var(--primero);
  outline-offset: 1px;
}

table.tabla-platos {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
}

table.tabla-platos th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  background: var(--ink);
  padding: 2mm 3mm;
}

table.tabla-platos td {
  border-bottom: 1px solid var(--line);
  padding: 2.2mm 3mm;
  font-size: 14px;
}

table.tabla-platos tr:hover td {
  background: var(--grid);
}

table.tabla-platos a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

table.tabla-platos a:hover {
  color: var(--primero);
  text-decoration: underline;
}

.sin-resultados {
  padding: 6mm 0;
  color: var(--muted);
  font-style: italic;
}

/* categorías: acento de color al estilo del mockup */
.categoria {
  font-size: 12px;
  font-weight: 600;
}
.categoria-primero { color: var(--primero); }
.categoria-segundo { color: var(--segundo); }
.categoria-guarnicion { color: var(--guarnicion); }
.categoria-postre { color: var(--postre); }
.categoria-cena { color: var(--cena); }

/* ---------- badges de estado ---------- */

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .8mm 2.6mm;
  border-radius: 3mm;
  white-space: nowrap;
}

.estado-sin_receta {
  background: var(--grid);
  color: var(--muted);
}

.estado-borrador {
  background: #F6F4EC;
  color: var(--muted);
  border: 1px solid var(--line);
}

.estado-pendiente_revision {
  background: rgba(217, 123, 41, .15);
  color: var(--primero);
}

.estado-aprobado {
  background: rgba(94, 158, 77, .18);
  color: var(--guarnicion);
}

/* ---------- 404 ---------- */

.aviso-404 {
  padding: 8mm 0;
}

.aviso-404 h1 {
  margin-bottom: 3mm;
}

/* ---------- editor de plato ---------- */

.cabecera-editor {
  display: flex;
  align-items: center;
  gap: 4mm;
  margin-bottom: 4mm;
}

.cabecera-editor h1 {
  font-size: 20px;
}

.cabecera-editor .enlace-ficha {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
}

.flash {
  background: rgba(94, 158, 77, .18);
  color: var(--guarnicion);
  border: 1px solid var(--guarnicion);
  border-radius: 2mm;
  padding: 2mm 3mm;
  margin-bottom: 4mm;
  font-weight: 600;
}

.errores {
  background: rgba(181, 72, 77, .12);
  color: var(--segundo);
  border: 1px solid var(--segundo);
  border-radius: 2mm;
  padding: 2mm 3mm 2mm 6mm;
  margin-bottom: 4mm;
}

.cuerpo-editor {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 6mm;
  align-items: start;
}

.campo {
  margin-bottom: 4mm;
}

.campo label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 1.5mm;
}

.campo input[type="text"],
.campo input[type="number"],
.campo input[type="search"],
.campo select,
.campo textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: 2mm 3mm;
  border: 1px solid var(--line);
  border-radius: 2mm;
  background: #fff;
  color: var(--ink);
}

.campo textarea {
  resize: vertical;
}

table.tabla-ingredientes,
table.tabla-sustituciones {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2mm;
}

table.tabla-ingredientes th,
table.tabla-sustituciones th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 1mm 1.5mm;
}

table.tabla-ingredientes td,
table.tabla-sustituciones td {
  padding: 1mm 1.5mm;
  vertical-align: top;
}

.celda-centrada {
  text-align: center;
}

.celda-alimento {
  position: relative;
  min-width: 220px;
}

.alimento-elegido {
  font-size: 12px;
  color: var(--muted);
  margin-top: 1mm;
}

ul.resultados-alimento {
  list-style: none;
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  max-height: 160px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2mm;
  box-shadow: 0 2mm 4mm rgba(0, 0, 0, .08);
}

ul.resultados-alimento:empty {
  border: none;
  box-shadow: none;
}

.resultado-alimento,
.sin-resultados-alimento {
  padding: 1.5mm 2.5mm;
  font-size: 13px;
  cursor: pointer;
}

.resultado-alimento:hover {
  background: var(--grid);
}

.kcal-resultado {
  color: var(--muted);
}

.boton-quitar {
  background: none;
  border: 1px solid var(--line);
  border-radius: 2mm;
  color: var(--segundo);
  font-size: 12px;
  padding: 1mm 2mm;
  cursor: pointer;
}

.boton-guardar,
.boton-aprobar,
.acciones-estado button {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 2mm 4mm;
  border-radius: 2mm;
  border: none;
  cursor: pointer;
  color: #fff;
  background: var(--ink);
}

.boton-guardar {
  margin-top: 2mm;
}

.acciones-estado {
  display: flex;
  gap: 3mm;
  margin-top: 6mm;
}

.acciones-estado form {
  display: inline;
}

.boton-aprobar {
  background: var(--guarnicion);
}

/* ---------- panel de nutrición ---------- */

.panel-nutricion {
  background: var(--grid);
  border-radius: 3mm;
  padding: 4mm;
  position: sticky;
  top: 4mm;
}

.panel-nutricion h2 {
  font-size: 15px;
  margin-bottom: 2mm;
}

.panel-nutricion h3 {
  font-size: 13px;
  margin: 4mm 0 2mm;
}

.aviso-incompleto {
  background: rgba(217, 123, 41, .15);
  color: var(--primero);
  border: 1px solid var(--primero);
  border-radius: 2mm;
  padding: 2mm 3mm;
  font-size: 13px;
  margin-bottom: 3mm;
}

table.tabla-nutrientes {
  width: 100%;
  border-collapse: collapse;
}

table.tabla-nutrientes td {
  padding: 1mm 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.etiqueta-nutriente {
  color: var(--muted);
}

.valor-nutriente {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}

.celda-override {
  width: 22mm;
}

.celda-override input {
  width: 100%;
  font-size: 12px;
  padding: 1mm 1.5mm;
  border: 1px solid var(--line);
  border-radius: 1.5mm;
}

.badge-manual {
  background: rgba(122, 99, 176, .18);
  color: var(--postre);
  margin-left: 1.5mm;
}

.chips-alergenos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5mm;
}

.chip-alergeno {
  background: rgba(181, 72, 77, .12);
  color: var(--segundo);
  font-size: 12px;
  font-weight: 600;
  padding: .8mm 2.6mm;
  border-radius: 3mm;
}

.sin-alergenos {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

table.tabla-escandallo {
  width: 100%;
  border-collapse: collapse;
}

table.tabla-escandallo th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 1mm 0;
}

table.tabla-escandallo td {
  padding: 1mm 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

/* ---------- cola de revisión ---------- */

.subtitulo-revision {
  color: var(--muted);
  font-size: 13px;
  margin: -2mm 0 4mm;
}

.cola-vacia {
  padding: 8mm 0;
  color: var(--muted);
  font-style: italic;
}

table.tabla-revision .acciones-fila {
  display: flex;
  align-items: center;
  gap: 3mm;
  white-space: nowrap;
}

table.tabla-revision .acciones-fila form {
  display: inline;
}

table.tabla-revision .boton-aprobar {
  padding: 1mm 3mm;
  font-size: 12px;
}

.sin-mapear {
  background: rgba(181, 72, 77, .12);
  color: var(--segundo);
}

.sin-mapear-ok {
  color: var(--muted);
}