/* sitio/oracion.css — maria-medjugorge
 *
 * EL CALENDARIO DE ORACIÓN Y AYUNO (`oracion.html`). Va después de
 * `mensajes.css`, que trae los colores y tipografías de `diseno/identidad.md`
 * (regla U24): acá solo se arma esta pantalla, sin valores nuevos.
 */

/* Esta página sí se desplaza: mensajes.css la deja fija a la pantalla. */
html:has(.oracion), body:has(.oracion) { height: auto; min-height: 100%; overflow: auto; }

.oracion {
  width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 48px 48px;
  box-sizing: border-box; display: flex; flex-direction: column; gap: 24px;
}
.oracion-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.oracion-cabeza h1 { margin: 0; font: 500 36px/1.1 var(--serif); color: var(--primario); }
#lugar-calendario .aviso.error { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px; }
#lugar-calendario .aviso[hidden] { display: none; }
#lugar-calendario { display: flex; flex-direction: column; gap: 16px; }

.oracion-cuerpo { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.oracion-cuerpo[aria-busy="true"] .dias { opacity: 0.4; }

/* ------------------------------------------------------------- el mes --- */

.calendario { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.calendario-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.calendario-cabeza h2 { margin: 0; font: 500 36px/1.1 var(--serif); color: var(--texto-fuerte); }
.calendario-pasos { display: flex; align-items: center; gap: 8px; }
.calendario-pasos .redondo:disabled { opacity: 0.35; cursor: default; }

.leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 12px; color: var(--texto-suave); }
.leyenda li { display: flex; align-items: center; gap: 8px; }

.punto { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--primario); }
.marca-ayuno {
  display: inline-block; padding: 0 6px; border-radius: 4px;
  font-size: 12px; font-weight: 600; line-height: 1.5;
}
.marca-ayuno.cumplido { background: var(--borde-primario); color: var(--sobre-primario); }
.marca-ayuno.pendiente { border: 1px dashed var(--primario); color: var(--primario); }
.marca-ayuno.no_cumplido { border: 1px solid var(--borde); color: var(--texto-tenue); }
.marca-ayuno.futuro { border: 1px solid var(--borde); color: var(--texto-tenue); font-weight: 500; }

.semana, .dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.semana span {
  padding: 0 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--texto-tenue);
}
.semana .de-ayuno { color: var(--primario); }
.dias { list-style: none; margin: 0; padding: 0; }

.dia {
  width: 100%; height: 96px; box-sizing: border-box; padding: 8px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: stretch;
  border: 1px solid var(--hover); border-radius: 12px; background: var(--fondo);
  color: var(--texto); text-align: left; cursor: pointer;
}
.dia.de-ayuno { background: var(--panel); }
.dia:hover { border-color: var(--borde-primario); }
.dia[aria-pressed="true"] { background: var(--hover); border-color: var(--borde-primario); }
.dia.hoy { border: 2px solid var(--primario); }
.dia-arriba { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.dia-numero { font-size: 14px; font-weight: 600; color: var(--texto-fuerte); font-variant-numeric: tabular-nums; }
.dia.futuro .dia-numero { color: var(--texto-tenue); }
.dia-abajo { display: flex; flex-direction: column; gap: 4px; }
.puntos { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--primario); }
.dia-tiempo { font-size: 12px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ el resumen --- */

.resumen { flex: 1 1 320px; display: flex; flex-direction: column; gap: 16px; }
.tarjeta-resumen {
  display: flex; flex-direction: column; gap: 12px; padding: 20px;
  border: 1px solid var(--borde); border-radius: 16px;
}
.tarjeta-resumen:first-child { background: var(--panel); }
.resumen-etiqueta {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--primario);
}
.tarjeta-resumen h2 { margin: 0; font: 500 30px/1.1 var(--serif); color: var(--texto-fuerte); }
.numeros { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.numeros div { display: flex; flex-direction: column-reverse; gap: 4px; }
.numeros dt { font-size: 12px; color: var(--texto-suave); }
.numeros dd { margin: 0; font: 500 30px/1 var(--serif); color: var(--primario-claro); font-variant-numeric: tabular-nums; }

.dia-ayuno { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 12px; border-top: 1px solid var(--hover); }
.dia-ayuno p { margin: 0; font-size: 14px; }
.dia-ayuno .fuerte { font-weight: 600; color: var(--texto-fuerte); }
.dia-ayuno .suave { color: var(--texto-suave); }
.dia-ayuno .con-marca { display: flex; align-items: center; gap: 8px; }
.dia-ayuno .botones { display: flex; flex-wrap: wrap; gap: 8px; }
.dia-ayuno .secundario { min-height: 44px; }
.dia-ayuno .quitar:hover { color: var(--texto-fuerte); }

.barras { margin: 0; }
.barras ol {
  list-style: none; margin: 0; padding: 0; height: 80px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: end;
}
.barras li { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 4px; }
.barra { display: block; border-radius: 4px 4px 0 0; background: var(--borde-primario); }
.barras li.actual .barra { background: var(--primario); }
.inicial { text-align: center; font-size: 12px; color: var(--texto-tenue); }
.barras li.actual .inicial { color: var(--primario); }

/* ------------------------------------------------------------- celular --- */

@media (max-width: 900px) {
  .oracion { padding: 16px 16px 32px; gap: 16px; }
  .oracion-cabeza h1, .calendario-cabeza h2 { font-size: 30px; }
  .semana, .dias { gap: 4px; }
  .semana span { padding: 0; font-size: 12px; letter-spacing: 0; text-align: center; }
  .dia { height: 72px; padding: 4px; border-radius: 8px; }
  .dia-tiempo { display: none; }
  .puntos { gap: 2px; }
  .puntos .punto { width: 6px; height: 6px; }
  .marca-ayuno { padding: 0 4px; }
  .marca-ayuno.futuro { display: none; }
}