/* El Día Grande — «hora dorada». Hereda los tokens; aquí solo lo suyo.
   El ÁMBAR es el color de la luz (la marca ya lo tiene); el azul sigue reservado a la lluvia,
   así que la hora azul va en un violeta apagado (--azul-hora) y se nombra en el texto. */
:root { --azul-hora: #6B6A9E; --resplandor: #E4C783; }

.dorada-zona { background: var(--ambar-suave); border-block: 1px solid #E6D2A8;
  padding-block: var(--e-3); margin-block: var(--e-3); }
.dorada-mandos .fila-mandos { display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.dorada-mandos label { font-family: var(--sans); font-size: var(--t-xs); font-weight: 600;
  color: #5B3F07; display: block; margin-bottom: .3rem; }
.dorada-mandos label small { font-weight: 500; color: #8A6A2A; }
.dorada-mandos .campo { width: 100%; background: #fff; }
.dorada-mandos .fila-hora { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.dorada-mandos .fila-hora select { min-width: 6.5rem; }
.dorada-mandos small { display: block; margin-top: .3rem; font-size: 11px; color: #6B4A08; line-height: 1.35; }
.afinar { margin-top: .9rem; font-family: var(--sans); font-size: var(--t-s); }
.afinar summary { cursor: pointer; color: #5B3F07; font-weight: 600; }
.afinar[open] summary { margin-bottom: .6rem; }
.peq-boton { margin-top: .5rem; font-size: var(--t-xs); padding: .45rem .8rem; }

.dorada-veredicto { margin-top: var(--e-3); background: #fff; border: 1px solid #E6D2A8;
  border-radius: 12px; padding: var(--e-3); display: grid; gap: var(--e-2); }
.d-titular { font-family: var(--display); font-size: var(--t-l); line-height: 1.3; margin: 0;
  max-width: none; text-wrap: pretty; }
.d-titular b { color: var(--verde-2); }

/* la línea de la tarde */
.linea { position: relative; height: 34px; border-radius: 8px; overflow: hidden; background: var(--hueso); }
.linea i { position: absolute; top: 0; height: 100%; }
.linea .dia { background: #FBF6E8; }
.linea .dorada { background: var(--ambar); }
.linea .resplandor { background: var(--resplandor); }
.linea .azul { background: var(--azul-hora); }
.linea .noche { background: var(--tinta); }
.linea .ceremonia { position: absolute; top: 6px; height: 22px; border: 2px solid var(--verde); border-radius: 5px;
  background: rgba(255,255,255,.55); }
.linea .ceremonia span { position: absolute; left: 3px; top: 2px; font-family: var(--sans); font-size: 10px; line-height: 14px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--verde-2); white-space: nowrap;
  background: rgba(255,255,255,.88); padding: 0 4px; border-radius: 3px; }
.marcas { position: relative; height: 3.2rem; font-family: var(--sans); font-size: 11px; color: var(--tinta-3); }
.marcas span { position: absolute; top: .3rem; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.marcas span:first-child { transform: translateX(-10%); }
.marcas span:last-child { transform: translateX(-90%); }
.marcas b { display: block; color: var(--tinta); font-size: 13px; font-variant-numeric: tabular-nums; }

.d-momentos { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem .9rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); font-family: var(--sans); font-size: var(--t-s); }
.d-momentos li { display: grid; grid-template-columns: 3.4rem 1fr; gap: .5rem; align-items: baseline;
  padding: .3rem 0; border-bottom: 1px dashed var(--linea); }
.d-momentos b { font-variant-numeric: tabular-nums; font-size: 1.05em; }
.d-momentos .clave b { color: var(--ambar); }
.d-momentos span { color: var(--tinta-2); }

.d-plan { margin: 0; padding: .8rem 1rem; border-radius: 8px; background: var(--verde-claro);
  border-left: 4px solid var(--verde); font-family: var(--sans); font-size: var(--t-s); color: var(--verde-2); max-width: none; }
.d-plan b { color: #0F2E22; }
.d-lluvia { margin: 0; font-family: var(--sans); font-size: var(--t-s); color: var(--tinta-2); max-width: none; }
.d-lluvia b { color: var(--tormenta-2); }
.d-donde { margin: 0; font-family: var(--sans); font-size: var(--t-xs); color: var(--tinta-3); max-width: none; }
.dorada-veredicto .acciones { margin-top: .2rem; }

/* las tablas: la columna de la hora dorada, en ámbar */
td.dorada { color: #6B4A08; font-weight: 700; white-space: nowrap; }

/* los cuatro momentos, explicados */
.momentos { list-style: none; padding: 0; margin: var(--e-2) 0 0; counter-reset: m; display: grid; gap: .7rem; }
.momentos li { counter-increment: m; display: grid; grid-template-columns: 2.2rem 1fr; gap: .8rem; align-items: baseline;
  padding: .7rem 0; border-top: 1px solid var(--linea); }
.momentos li::before { content: counter(m); font-family: var(--display); font-size: 1.4rem; font-weight: 700;
  color: var(--ambar); font-variant-numeric: tabular-nums; }
.momentos li > b { display: block; font-family: var(--display); font-size: var(--t-l); font-weight: 600; margin-bottom: .2rem; }
.momentos li > span { grid-column: 2; color: var(--tinta-2); font-size: var(--t-s); }
.momentos li > span b { color: var(--tinta); }

.lista-fincas { list-style: none; padding: 0; margin: var(--e-2) 0 0; display: grid; gap: .4rem; }
.lista-fincas li { padding: .45rem 0; border-bottom: 1px dashed var(--linea); }

.verificacion { list-style: none; padding: 0; margin: var(--e-2) 0; display: grid; gap: .7rem; }
.verificacion li { padding: .8rem 1rem; border: 1px solid var(--linea); border-radius: 8px; font-size: var(--t-s);
  background: var(--hueso); }
.verificacion li > b { display: block; font-family: var(--display); font-size: var(--t-base); margin-bottom: .2rem; }

.insertar { display: grid; gap: .8rem; }
.insertar .codigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; width: 100%;
  resize: vertical; white-space: pre; overflow-x: auto; background: var(--hueso); }
.insertar code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--hueso);
  padding: .05rem .3rem; border-radius: 4px; }

/* en móvil las tres marcas se pisan cuando la tarde es corta (octubre: 19:08 · 19:45 · 20:12 caben
   en un 20 % del ancho): pasan a ser una leyenda en fila, con el color de su tramo */
@media (max-width: 560px) {
  .dorada-veredicto { padding: var(--e-2); }
  .marcas { display: flex; justify-content: space-between; gap: .5rem; height: auto; font-size: 10px; margin-top: .2rem; }
  .marcas span { position: relative; left: auto !important; transform: none !important; text-align: left; padding-left: .9rem; }
  .marcas span::before { content: ''; position: absolute; left: 0; top: .35rem; width: .55rem; height: .55rem; border-radius: 50%; }
  .marcas span:nth-child(1)::before { background: var(--ambar); }
  .marcas span:nth-child(2)::before { background: var(--resplandor); }
  .marcas span:nth-child(3)::before { background: var(--tinta); }
  .d-momentos { grid-template-columns: 1fr; }
}