/* Estilos propios de la Calculadora de asado: el título y la pizarra. */

/* la segunda línea del título dice para cuántos es */
.para { display: block; color: var(--accent); line-height: 1.2; }

/* la hora de comer: mismo aspecto que los demás campos */
.hora {
  margin-top: 16px;
  min-height: 54px;
  padding: 8px 16px;
  background: var(--campo);
  border: 1.5px solid var(--borde-campo);
  border-radius: 12px;
  font: 700 1.5rem var(--f-display);
  font-variant-numeric: tabular-nums;
  outline: none;
}
.hora:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }

/* ---------- la pizarra de la carnicería ---------- */
.pizarra-marco {
  margin-top: clamp(44px, 11vw, 64px);
  padding: 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, #8d5c30, #6a4220 55%, #7c5029);
  box-shadow: 0 16px 24px -6px var(--sombra-ticket);
  transform: rotate(0.5deg);
}
.pizarra {
  position: relative;
  isolation: isolate;
  background: #1d2924;
  color: #f3f0e7;
  border-radius: 3px;
  padding: 20px 18px 18px;
  font: 700 1.6rem/1.2 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.5);
}
/* tiza mal borrada */
.pizarra::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--noise);
  mix-blend-mode: soft-light;
  opacity: 0.55;
  pointer-events: none;
}
.pizarra h2 { font: inherit; font-size: 2.1rem; text-align: center; letter-spacing: 0.01em; }
.pizarra h2::after { content: ""; display: block; width: 62%; height: 3px; margin: 2px auto 0; border-radius: 3px; background: currentColor; opacity: 0.55; transform: rotate(-0.8deg); }

.items { list-style: none; margin: 14px 0 0; padding: 0; }
.items button {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 2px 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: opacity 0.2s;
}
.items .puntos { flex: 1; min-width: 14px; border-bottom: 3px dotted currentColor; opacity: 0.3; transform: translateY(-0.2em); }
.items .cuanto { flex: none; color: #ffd98a; white-space: nowrap; }
.items button[aria-pressed="true"] { opacity: 0.42; }
.items button[aria-pressed="true"] .que, .items button[aria-pressed="true"] .cuanto { text-decoration: line-through; text-decoration-thickness: 3px; }
.items button:focus-visible { outline: 2px dashed #ffd98a; outline-offset: 2px; }
.pizarra h2.segundo { font-size: 1.8rem; margin-top: 22px; }
.horario li { display: flex; align-items: baseline; gap: 12px; min-height: 42px; padding: 2px 0; }
.horario .cuando { flex: none; color: #ffd98a; font-variant-numeric: tabular-nums; min-width: 3.1em; }
.horario li:first-child .que, .horario li:last-child .que { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.nota-tiza { margin-top: 10px; text-align: center; font-size: 1.15rem; opacity: 0.6; }

@keyframes tiza { from { opacity: 0.2; transform: translateX(6px); } }
@media (prefers-reduced-motion: no-preference) {
  .items .cuanto.cambia { animation: tiza 0.3s both; }
  .items .nuevo { animation: tiza 0.3s both; }
}