/* ERP La Madrid · Postrería & Café
   La pantalla es la mesa de trabajo: una tabla de madera con el recetario
   encima. El papel es cuadriculado igual que el cuaderno real de Casandra, y
   las secciones son las pestañas del recetario.
   Colores y tipografía del manual de marca v1.0 (2026). */

:root {
  /* Marca */
  --rosa:        #D9A6A0;
  --rosa-hondo:  #C4837B;
  --rosa-tenue:  #F4E3DF;
  --salvia:      #97A06B;
  --olivo:       #6F7A4C;
  --olivo-tenue: #EAEDDF;
  --dorado:      #E0C08A;
  --dorado-agua: #F7EFE0;
  --crema:       #F4ECDE;
  --arena:       #E9DCC7;
  --papel:       #FBF7EF;
  --cacao:       #4A3B34;
  --cacao-medio: #7A6960;
  --cacao-claro: #A2938A;
  --linea:       #E4D9C6;
  --linea-suave: #EFE6D6;

  /* Mesa */
  --madera-oscura: #3A2619;
  --cuadricula:    rgba(122, 150, 186, .26);

  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans:  'Poppins', 'Century Gothic', system-ui, sans-serif;
  --mano:  'Caveat', 'Segoe Script', cursive;

  --curva: 14px;
  --reja: 23px;   /* tamaño del cuadro del papel */
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  color: var(--cacao);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  background: var(--madera-oscura) url('madera.jpg') repeat;
  background-size: 450px auto;
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--rosa-hondo); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.005em; }
.oculto { display: none !important; }
img { max-width: 100%; }

:focus-visible { outline: 2px solid var(--rosa-hondo); outline-offset: 2px; border-radius: 6px; }

/* Papel cuadriculado: el mismo cuadro del cuaderno de Casandra. */
.cuadriculado {
  background-color: var(--papel);
  background-image:
    linear-gradient(var(--cuadricula) 1px, transparent 1px),
    linear-gradient(90deg, var(--cuadricula) 1px, transparent 1px);
  background-size: var(--reja) var(--reja);
}

/* ===================== Entrada ===================== */
#entrada {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 28px 18px;
}

.cuaderno-cerrado {
  width: 100%; max-width: 940px;
  display: grid; grid-template-columns: 1fr;
  border-radius: 6px 16px 16px 6px;
  overflow: hidden;
  box-shadow: 0 40px 80px -36px rgba(0,0,0,.75);
}
@media (min-width: 860px) { .cuaderno-cerrado { grid-template-columns: 1.1fr .9fr; } }

.tapa {
  background: linear-gradient(150deg, #B07E76, #9C6660 55%, #8A574F);
  padding: 44px 34px; display: grid; place-items: center; text-align: center;
  position: relative;
}
/* Los ojales del engargolado, como el cuaderno de espiral de la foto. */
.tapa::before {
  content: ''; position: absolute; left: 11px; top: 26px; bottom: 26px; width: 9px;
  background: radial-gradient(circle at 50% 8px, rgba(0,0,0,.42) 4px, transparent 4.5px) repeat-y;
  background-size: 9px 30px;
}
.tapa img {
  width: 100%; max-width: 330px; border-radius: 10px; display: block;
  box-shadow: 0 18px 36px -18px rgba(0,0,0,.6);
}
.tapa figcaption {
  margin-top: 16px; font-family: var(--serif); font-style: italic;
  color: #FBF2EC; font-size: 15.5px;
}

.hoja-entrada { padding: 44px 34px; display: grid; place-items: center; }
.tarjeta-entrada { width: 100%; max-width: 340px; }
.tarjeta-entrada .rotulo {
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--salvia); font-weight: 600; margin-bottom: 8px;
}
.tarjeta-entrada h1 { font-size: 29px; margin: 0 0 6px; line-height: 1.15; }
.tarjeta-entrada p.sub { color: var(--cacao-medio); margin: 0 0 24px; }

.campo { margin-bottom: 14px; }
.campo label {
  display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cacao-claro); font-weight: 600; margin-bottom: 5px;
}
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 10px 14px; border: 1px solid var(--linea);
  border-radius: 10px; background: rgba(255,255,255,.72); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.campo textarea { resize: vertical; min-height: 86px; font-family: var(--mano); font-size: 19px; line-height: 1.4; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--rosa); box-shadow: 0 0 0 3px var(--rosa-tenue);
}

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 22px; border-radius: 10px; border: 0; cursor: pointer;
  background: linear-gradient(160deg, #C98D85, var(--rosa-hondo) 60%, #AE7068);
  color: #fff; font-weight: 500;
  box-shadow: 0 6px 14px -8px rgba(122,66,58,.9);
  transition: transform .12s, filter .15s;
}
.boton:hover { transform: translateY(-1px); filter: brightness(1.05); }
.boton:active { transform: none; }
.boton[disabled] { opacity: .55; cursor: default; transform: none; }
.boton.ancho { width: 100%; }
.boton.suave {
  background: rgba(255,255,255,.6); color: var(--olivo);
  border: 1px solid var(--linea); box-shadow: none;
}
.boton.suave:hover { background: var(--olivo-tenue); border-color: var(--salvia); }
.boton.chico { padding: 6px 14px; font-size: 13px; }

.aviso {
  margin-top: 14px; padding: 10px 14px; border-radius: 10px;
  background: var(--rosa-tenue); color: #8E4E46; font-size: 13.5px;
}

/* ===================== La mesa ===================== */
#taller { display: none; }
#taller.visible { display: block; }

.mesa { max-width: 1120px; margin: 0 auto; padding: 22px 14px 44px; }
@media (min-width: 760px) { .mesa { padding: 30px 26px 56px; } }

/* --- Pestañas del recetario --- */
.pestanas {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px;
  padding-left: 10px; position: relative; z-index: 2;
}
.pestana {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px 11px; border: 0; cursor: pointer;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, #E4D5BD, #D6C4A8);
  color: #5E4A3A; font-size: 13.5px; font-weight: 500; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 -2px 6px -3px rgba(0,0,0,.4);
  transition: transform .14s, background .14s, color .14s;
  position: relative; top: 3px;
}
.pestana:hover { top: 0; background: linear-gradient(180deg, #EDE0CB, #DFCFB5); }
.pestana svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pestana .tx { display: none; }
@media (min-width: 620px) { .pestana .tx { display: inline; } }
.pestana.activa {
  top: 0; padding-bottom: 14px; color: var(--cacao);
  background: var(--papel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 -3px 10px -4px rgba(0,0,0,.35);
}
.pestana .aguja {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--rosa-hondo); color: #fff; font-size: 11px; font-weight: 600;
  display: grid; place-items: center;
}

/* --- La hoja --- */
.pliego {
  position: relative;
  border-radius: 0 3px 4px 4px;
  box-shadow:
    0 26px 52px -26px rgba(0,0,0,.72),
    0 60px 90px -60px rgba(0,0,0,.6);
  padding: 30px 22px 48px;
  min-height: 58vh;
}
@media (min-width: 760px) { .pliego { padding: 38px 42px 60px; } }
/* Margen del cuaderno: la línea que trae toda hoja de cuaderno. */
.pliego::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--rosa), var(--rosa-hondo));
  opacity: .55;
}

.encabezado-seccion { margin-bottom: 26px; }
.encabezado-seccion .migaja {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--salvia); font-weight: 600; margin-bottom: 6px;
}
.encabezado-seccion h2 { font-size: clamp(24px, 3.3vw, 32px); margin: 0 0 4px; text-wrap: balance; }
.encabezado-seccion p { color: var(--cacao-medio); margin: 0; max-width: 64ch; }
.filete { display: block; width: 130px; height: 12px; margin-top: 8px; overflow: visible; }
.filete path { fill: none; stroke: var(--dorado); stroke-width: 1.6; stroke-linecap: round; }

/* ===================== Portada / índice ===================== */
.portada { display: grid; gap: 28px; }
@media (min-width: 940px) { .portada { grid-template-columns: 1fr 1fr; gap: 42px; } }

.rotulo-casa { text-align: center; }
.rotulo-casa img {
  width: 100%; max-width: 380px; border-radius: 10px;
  box-shadow: 0 16px 34px -20px rgba(74,59,52,.7);
}
.rotulo-casa .lema {
  margin-top: 12px; font-family: var(--serif); font-style: italic;
  color: var(--olivo); font-size: 16px;
}
.rotulo-casa .saludo {
  margin-top: 16px; font-family: var(--mano); font-size: 27px;
  color: var(--cacao); line-height: 1.25;
}

.indice { list-style: none; margin: 0; padding: 0; }
.indice li { border-bottom: 1px dotted var(--linea); }
.indice button {
  display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  padding: 13px 6px; border: 0; background: transparent; cursor: pointer;
  transition: background .14s, padding-left .14s;
}
.indice button:hover { background: rgba(224,192,138,.16); padding-left: 12px; }
.indice .n {
  font-family: var(--serif); font-size: 13px; color: var(--rosa-hondo);
  min-width: 22px; font-variant-numeric: tabular-nums;
}
.indice .t { font-family: var(--serif); font-size: 18px; display: block; }
.indice .d { font-size: 12.5px; color: var(--cacao-medio); display: block; }
.indice .puntos { flex: 1; border-bottom: 1px dotted var(--linea); transform: translateY(-3px); min-width: 12px; }
.indice .marca { font-size: 12px; color: var(--rosa-hondo); font-weight: 500; white-space: nowrap; }

/* ===================== Piezas comunes ===================== */
.pulso { display: grid; gap: 13px; }
@media (min-width: 620px) { .pulso { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }

.dato { border-left: 3px solid var(--linea); padding: 4px 0 4px 15px; }
.dato.tibio { border-left-color: var(--dorado); }
.dato.verde { border-left-color: var(--salvia); }
.dato .et { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--salvia); font-weight: 600; }
.dato .v { font-family: var(--serif); font-size: 29px; line-height: 1.1; margin-top: 2px; font-variant-numeric: tabular-nums; }
.dato .n { font-size: 12.5px; color: var(--cacao-medio); margin-top: 1px; }

.anillo { width: 70px; height: 70px; }
.anillo circle { fill: none; stroke-width: 6.5; stroke-linecap: round; }
.anillo .fondo { stroke: var(--linea); }
.anillo text { font-family: var(--serif); font-size: 20px; fill: var(--cacao); }

/* Tablas: renglones del cuaderno, sin marco de tarjeta. */
.tabla-marco { border-top: 2px solid var(--cacao); }
.tabla-desliz { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: left; padding: 8px 12px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--olivo); font-weight: 600; white-space: nowrap;
  border-bottom: 1px solid var(--linea);
}
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--linea-suave); vertical-align: middle; }
tbody tr:hover td { background: rgba(224,192,138,.14); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr.suma td { border-top: 2px solid var(--cacao); border-bottom: 0; font-weight: 600; }
.apagado { color: var(--cacao-claro); }

.insignia {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
  border-radius: 999px; font-size: 11.5px; font-weight: 500; white-space: nowrap;
}
.insignia.ok    { background: var(--olivo-tenue); color: var(--olivo); }
.insignia.falta { background: var(--dorado-agua); color: #8A6A21; }
.insignia.alto  { background: var(--rosa-tenue); color: #96524A; }
.insignia.neutro{ background: rgba(233,220,199,.7); color: var(--cacao-medio); }

.punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.punto.ok { background: var(--salvia); }
.punto.falta { background: var(--dorado); }
.punto.alto { background: var(--rosa-hondo); }

.pildoras { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.pildora {
  padding: 5px 13px; border-radius: 999px; border: 1px solid var(--linea);
  background: rgba(255,255,255,.6); cursor: pointer; font-size: 13px; color: var(--cacao-medio);
  transition: all .14s;
}
.pildora:hover { border-color: var(--rosa); color: var(--cacao); }

.vacio {
  padding: 40px 22px; text-align: center; color: var(--cacao-claro);
  border: 1px dashed var(--linea); border-radius: var(--curva);
}
.vacio .t { font-family: var(--serif); font-size: 17px; color: var(--cacao-medio); margin-bottom: 4px; }

.cargando { padding: 40px; text-align: center; color: var(--cacao-claro); font-family: var(--mano); font-size: 22px; }
.error-caja { padding: 16px 18px; border-radius: var(--curva); background: var(--rosa-tenue); color: #8E4E46; }

/* ===================== Recetario ===================== */
.dos-columnas { display: grid; gap: 22px; align-items: start; }
@media (min-width: 980px) { .dos-columnas { grid-template-columns: 286px 1fr; } }

.grupo-titulo {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--olivo); font-weight: 600; margin: 18px 0 6px;
}
.lista-recetas { display: flex; flex-direction: column; }
.ficha-mini {
  display: flex; gap: 11px; align-items: center; width: 100%; text-align: left;
  padding: 9px 10px; border: 0; border-bottom: 1px dotted var(--linea);
  background: transparent; cursor: pointer; transition: background .14s;
}
.ficha-mini:hover { background: rgba(224,192,138,.18); }
.ficha-mini.activa { background: var(--rosa-tenue); }
.ficha-mini .clave {
  flex: none; width: 44px; padding: 3px 0; text-align: center;
  font-family: var(--serif); font-size: 11px; color: var(--olivo); font-weight: 600;
  border: 1px solid var(--linea); border-radius: 4px; background: rgba(255,255,255,.65);
  line-height: 1.15;
}
.ficha-mini .cuerpo { min-width: 0; }
.ficha-mini .nom { display: block; font-weight: 500; line-height: 1.25; }
.ficha-mini .sub { display: block; font-size: 12px; color: var(--cacao-medio); }

.hoja-cabeza { border-bottom: 2px solid var(--cacao); padding-bottom: 14px; margin-bottom: 20px; }
.hoja-cabeza .clave { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--salvia); font-weight: 600; }
.hoja-cabeza h3 { font-size: 26px; margin: 3px 0 6px; }
.hoja-cabeza .rinde { color: var(--cacao-medio); font-size: 13.5px; }
.hoja-cuerpo h4 {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--olivo); font-weight: 600; margin: 26px 0 9px;
}
.hoja-cuerpo h4:first-child { margin-top: 0; }

.escalador {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 14px; border-radius: 10px; background: var(--dorado-agua);
  border: 1px solid rgba(224,192,138,.6); margin-bottom: 18px;
}
.escalador label { font-size: 12.5px; color: #8A6A21; font-weight: 500; }
.escalador input[type=range] { flex: 1; min-width: 130px; accent-color: var(--rosa-hondo); }
.escalador .valor { font-family: var(--serif); font-size: 17px; min-width: 52px; text-align: right; }

.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0; }
.pasos li { counter-increment: paso; position: relative; padding: 0 0 13px 38px; color: var(--cacao-medio); }
.pasos li::before {
  content: counter(paso) '.'; position: absolute; left: 4px; top: 0;
  font-family: var(--serif); font-size: 15px; color: var(--rosa-hondo); font-weight: 600;
}

/* Anotación al margen: a mano, como en el cuaderno. */
.notas { display: flex; flex-direction: column; gap: 10px; }
.nota-margen {
  padding: 11px 15px; border-left: 3px solid var(--dorado);
  background: rgba(224,192,138,.13);
  font-family: var(--mano); font-size: 19px; line-height: 1.38; color: #5A4238;
}
.nota-margen .firma {
  font-family: var(--sans); font-size: 11.5px; color: var(--cacao-claro); margin-top: 4px;
}

.enlace-sub {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  color: var(--rosa-hondo); font-weight: 500; border-bottom: 1px solid transparent;
}
.enlace-sub:hover { border-bottom-color: var(--rosa); }
.quitar-sub {
  border: 0; background: transparent; color: var(--cacao-claro); cursor: pointer;
  font-size: 12.5px; padding: 3px 9px; border-radius: 999px;
}
.quitar-sub:hover { background: var(--rosa-tenue); color: #96524A; }

/* ===================== Bitácora ===================== */
.rejilla-categorias { display: grid; gap: 22px; }
@media (min-width: 700px) { .rejilla-categorias { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); } }

.categoria { border-top: 1px solid var(--linea); padding-top: 12px; }
.categoria.atrasada { border-top-color: var(--dorado); }
.categoria > .tit { display: flex; align-items: center; gap: 8px; }
.categoria > .tit .n { font-family: var(--serif); font-size: 17px; }
.categoria .frecuencia { font-size: 11.5px; color: var(--cacao-claro); margin-bottom: 8px; }
.punto-lista { display: flex; flex-direction: column; }
.punto-fila {
  display: flex; align-items: center; gap: 8px; padding: 6px 4px;
  border-bottom: 1px dotted var(--linea-suave); font-size: 13.5px;
}
.punto-fila .nom { flex: 1; min-width: 0; }
.punto-fila .val { color: var(--cacao-medio); font-variant-numeric: tabular-nums; font-size: 13px; }
.punto-fila .cuando { font-size: 11px; color: var(--cacao-claro); white-space: nowrap; }
.punto-fila button {
  border: 0; background: transparent; color: var(--rosa-hondo); cursor: pointer;
  font-size: 12.5px; padding: 2px 8px; border-radius: 999px;
}
.punto-fila button:hover { background: var(--rosa-tenue); }

/* Alexa: una notita pegada con cinta sobre la hoja. */
.alexa-panel {
  position: relative; margin: 0 0 26px; padding: 20px 22px;
  background: linear-gradient(170deg, #FBF1E4, #F5E6D3);
  border: 1px solid rgba(224,192,138,.7);
  box-shadow: 0 10px 24px -16px rgba(74,59,52,.7);
  transform: rotate(-.35deg);
}
.alexa-panel::before {
  content: ''; position: absolute; top: -11px; left: 50%; width: 92px; height: 22px;
  transform: translateX(-50%) rotate(-1.5deg);
  background: rgba(233,220,199,.75); border: 1px solid rgba(224,192,138,.6);
}
.alexa-panel .tit { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
.alexa-panel .tit h3 { font-size: 21px; margin: 0; }
.onda { display: flex; align-items: flex-end; gap: 3px; height: 21px; }
.onda i { width: 3px; border-radius: 999px; background: var(--rosa-hondo); display: block; animation: latir 1.5s ease-in-out infinite; }
.onda i:nth-child(1){height:40%;animation-delay:0s}
.onda i:nth-child(2){height:75%;animation-delay:.15s}
.onda i:nth-child(3){height:100%;animation-delay:.3s}
.onda i:nth-child(4){height:62%;animation-delay:.45s}
.onda i:nth-child(5){height:35%;animation-delay:.6s}
@keyframes latir { 0%,100%{transform:scaleY(.45)} 50%{transform:scaleY(1)} }
@media (prefers-reduced-motion: reduce) { .onda i { animation: none; } }

.frases { display: grid; gap: 7px; margin-top: 13px; }
@media (min-width: 720px) { .frases { grid-template-columns: 1fr 1fr; } }
.frase {
  padding: 7px 0 7px 16px; border-left: 2px solid var(--rosa);
  font-family: var(--mano); font-size: 19px; color: #5A4238; line-height: 1.3;
}
.frase b { font-weight: 700; color: var(--cacao); }

.canal { font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.canal.alexa { background: var(--rosa-tenue); color: #96524A; }
.canal.manual { background: var(--olivo-tenue); color: var(--olivo); }
.canal.whatsapp { background: var(--dorado-agua); color: #8A6A21; }

/* ===================== Procedimientos ===================== */
.poe { border-bottom: 1px solid var(--linea); }
.poe-cabeza {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 14px 6px; background: transparent; border: 0; cursor: pointer;
}
.poe-cabeza:hover { background: rgba(224,192,138,.15); }
.poe-cabeza .clave {
  flex: none; width: 54px; padding: 4px 0; text-align: center;
  font-family: var(--serif); font-size: 11.5px; color: var(--olivo); font-weight: 600;
  border: 1px solid var(--linea); border-radius: 4px; background: rgba(255,255,255,.65);
}
.poe-cabeza .cuerpo { flex: 1; min-width: 0; }
.poe-cabeza .t { font-family: var(--serif); font-size: 18px; line-height: 1.2; display: block; }
.poe-cabeza .m { font-size: 12.5px; color: var(--cacao-medio); display: block; }
.poe-cabeza .chevron { transition: transform .2s; color: var(--cacao-claro); }
.poe.abierto .chevron { transform: rotate(180deg); }
.poe-cuerpo { display: none; padding: 2px 8px 20px 73px; }
.poe.abierto .poe-cuerpo { display: block; }

/* ===================== Documentos ===================== */
.docs { display: grid; gap: 10px; }
@media (min-width: 720px) { .docs { grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); } }
.doc {
  display: flex; gap: 13px; align-items: flex-start; padding: 15px 16px;
  background: rgba(255,255,255,.62); border: 1px solid var(--linea);
  border-radius: 3px; text-decoration: none; color: inherit; transition: all .15s;
  box-shadow: 2px 3px 0 rgba(74,59,52,.07);
}
.doc:hover { border-color: var(--rosa); transform: translate(-1px,-1px); box-shadow: 4px 5px 0 rgba(74,59,52,.1); }
.doc .ic { flex: none; color: #8A6A21; }
.doc .ic svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.doc .t { display: block; font-family: var(--serif); font-size: 17px; line-height: 1.25; }
.doc .d { display: block; font-size: 13px; color: var(--cacao-medio); margin-top: 2px; }

/* ===================== Detalles ===================== */
.linea-acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.crecer { flex: 1; }
.celda-precio { display: flex; gap: 5px; align-items: center; justify-content: flex-end; }
.celda-precio input {
  width: 84px; padding: 5px 9px; border: 1px solid var(--linea); border-radius: 6px;
  background: rgba(255,255,255,.85); text-align: right; font-variant-numeric: tabular-nums;
}
.celda-precio input:focus { outline: none; border-color: var(--rosa); box-shadow: 0 0 0 3px var(--rosa-tenue); }

.pie-nota {
  margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--linea);
  font-size: 12.5px; color: var(--cacao-claro);
}
.pie-nota code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px;
  background: rgba(233,220,199,.6); padding: 1px 5px; border-radius: 4px;
}

/* Firma de la casa, sobre la madera */
.firma-mesa {
  text-align: center; margin-top: 16px; color: rgba(251,247,239,.55);
  font-family: var(--serif); font-style: italic; font-size: 13px;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.firma-mesa button {
  border: 0; background: none; color: rgba(251,247,239,.78); cursor: pointer;
  font: inherit; text-decoration: underline; margin-left: 8px;
}

/* ===================== Lo que falta, en rojo ===================== */
/* Un rojo apagado, de tinta, no de alarma de sistema: la marca no admite
   rojos fuertes y el punto es que se vea, no que grite. */
:root { --rojo: #A8433A; --rojo-agua: #F7E4E1; }

.ojo { color: var(--rojo); font-weight: 500; }
tbody tr.falla td { background: rgba(168,67,58,.055); }
tbody tr.falla:hover td { background: rgba(168,67,58,.1); }
tbody tr.falla td:first-child { box-shadow: inset 3px 0 0 var(--rojo); }

.dato.rojo { border-left-color: var(--rojo); }
.dato.rojo .v { color: var(--rojo); }

.alerta-roja {
  margin: 16px 0 0; padding: 11px 15px;
  border-left: 3px solid var(--rojo); background: var(--rojo-agua);
  color: #7E332C; font-size: 13.5px; border-radius: 0 8px 8px 0;
}

.pendientes-lista { margin: 0; padding-left: 20px; }
.pendientes-lista li { margin-bottom: 5px; color: var(--rojo); }
.pendientes-lista li b { color: var(--cacao); font-weight: 600; }

.ficha-mini.incompleta .clave { border-color: var(--rojo); color: var(--rojo); }

.pildora.activa {
  background: var(--cacao); border-color: var(--cacao); color: var(--papel);
}

/* ===================== Portada compacta ===================== */
/* Corrección tras revisarla: el logotipo ocupaba media pantalla en vertical y
   dejaba un hueco muerto al lado del índice. Ahora encabeza en horizontal y el
   índice usa todo el ancho. */
.portada { display: block; }

.cintillo {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding-bottom: 20px; margin-bottom: 8px; border-bottom: 2px solid var(--cacao);
}
.cintillo img {
  width: 190px; border-radius: 8px; flex: none;
  box-shadow: 0 10px 22px -16px rgba(74,59,52,.75);
}
.cintillo .dicho { min-width: 200px; flex: 1; }
.cintillo .saludo { font-family: var(--mano); font-size: 30px; line-height: 1.1; color: var(--cacao); }
.cintillo .lema { font-family: var(--serif); font-style: italic; color: var(--olivo); font-size: 15px; margin-top: 2px; }

@media (min-width: 880px) {
  .indice { columns: 2; column-gap: 40px; }
  .indice li { break-inside: avoid; }
}