/**
 * PHP Study App — Calendario de estudio (página /calendar, cambio 24)
 *
 * Hoja propia: layout.php la carga DESPUÉS de app.css y solo en /calendar (variable $styles).
 * No redefine nada de app.css: la parte derecha de cada selector es siempre una clase calendar-*.
 * Misma paleta, Tahoma en px (11 contenido, 10 secundario, 9 micro-etiquetas), bordes de 1 px,
 * esquinas rectas y degradados verticales de 2 paradas con color de respaldo. Sin sombras,
 * sin radios, sin transiciones. Aspecto de los mods de calendario de phpBB: tabla con cabecera
 * gris, celdas con borde y semanas alternas (row1 blanco / row2 gris azulado).
 *
 * Un color = un significado, y siempre con texto (nunca solo color):
 *   Hoy          selección azul #e8f0f8 → #c8d8e8     marca "HOY"
 *   Hecha        verde de tag-badge-clean              "✔ Hecha"
 *   Atrasada     amarillo de aviso #fff8d0 / #e0c060   marca "ATRASADA" (sin culpa: no es un error)
 *   Simulacro    crema de welcome-card #f7f4e8         "Simulacro semanal" / "Simulacro final"
 *   Víspera      etiqueta neutra #ececec               marca "VÍSPERA" + "Repaso ligero"
 *   Entrevista   #fff8d0 + borde izquierdo 3 px #f0c040 (el dorado del menú)   marca "ENTREVISTA"
 *   Descanso     gris #eceff2                          "Descanso"
 * El rojo queda solo para los errores de verdad (alert-error de app.css).
 */

/* ==========================================================================
   Rejilla: tabla real (caption, th scope="col"/"row") con roles ARIA explícitos,
   porque en el móvil pasa a display:block y algunos lectores pierden la tabla.
   ========================================================================== */

.calendar-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0 0 8px 0;
}

.calendar-caption {
    padding: 0 0 4px 0;
    text-align: left;
    font-size: 11px;
    font-weight: bold;
    color: #1a3a5c;
}

/* Cabecera de días: el gris de interview-question-header, no una segunda barra azul */
.calendar-head {
    padding: 4px 6px;
    border: 1px solid #c0c8d0;
    background-color: #eceff2;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    color: #1a3a5c;
}

.calendar-head-week {
    width: 88px;
}

/* row2 de phpBB: una semana sí y otra no */
.calendar-row-alt {
    background-color: #f7f9fb;
}

/* Cabecera de fila: número de semana, fechas y progreso */
.calendar-week {
    padding: 4px 6px;
    border: 1px solid #c0c8d0;
    background-color: #eceff2;
    vertical-align: top;
    text-align: left;
    font-size: 11px;
    font-weight: bold;
    color: #1a3a5c;
}

.calendar-week-info {
    display: block;
    font-size: 10px;
    font-weight: normal;
    color: #555555;
    white-space: nowrap;
}

/* Celda de un día */
.calendar-day {
    height: 74px;
    padding: 3px 4px 5px 4px;
    border: 1px solid #c0c8d0;
    vertical-align: top;
    font-size: 11px;
    color: #222222;
    overflow-wrap: break-word;
}

.calendar-date {
    display: block;
    margin-bottom: 2px;
    font-weight: bold;
    color: #1a3a5c;
    white-space: nowrap;
}

/* "Lun " y "/09": solo en la lista del móvil (en escritorio los dice la cabecera) */
.calendar-date-extra {
    display: none;
}

/* El tema abre el detalle (modal): es un <button>, con aspecto de enlace del foro */
.calendar-topic {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    color: #0055aa;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
}

.calendar-topic:hover {
    color: #cc4400;
}

.calendar-topic:focus-visible {
    outline: 1px dotted #1a3a5c;
    outline-offset: 1px;
}

/* Datos secundarios: "60 min · 10 preg." */
.calendar-meta {
    display: block;
    font-size: 10px;
    color: #555555;
}

.calendar-rest {
    display: block;
    font-size: 10px;
    color: #444444;
}

/* "✔ Hecha" es tag-badge-clean de app.css; aquí solo se evita que se parta */
.calendar-done {
    white-space: nowrap;
}

/* ==========================================================================
   Micro-etiquetas de estado (mismo tamaño que plan-item-tag)
   ========================================================================== */

.calendar-mark {
    display: inline-block;
    padding: 0 4px;
    border: 1px solid #b0b8c0;
    background-color: #ececec;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    color: #444444;
    white-space: nowrap;
}

.calendar-mark-today {
    border-color: #3d6a94;
    background-color: #ffffff;
    color: #1a3a5c;
}

.calendar-mark-late {
    border-color: #e0c060;
    background-color: #fff8d0;
    color: #5a4a18;
}

.calendar-mark-interview {
    border-color: #f0c040;
    background-color: #ffffff;
    color: #5a4a18;
}

/* En la celda, HOY va en la esquina superior derecha */
.calendar-day .calendar-mark-today {
    float: right;
}

/* ==========================================================================
   Estados del día: el fondo acompaña al texto de la celda
   ========================================================================== */

.calendar-day-rest,
.calendar-day-out {
    background-color: #eceff2;
}

.calendar-day-mock {
    background-color: #f7f4e8;
}

.calendar-day-late {
    background-color: #fff8d0;
}

/* El borde de 3 px va en la celda: con border-collapse queda dentro de la tabla */
.calendar-day-interview {
    border-left: 3px solid #f0c040;
    background-color: #fff8d0;
    color: #5a4a18;
}

/* Hoy va el último: si hoy es también descanso, gana el azul */
.calendar-day-today {
    background-color: #dce8f4;
    background-image: linear-gradient(to bottom, #e8f0f8, #c8d8e8);
}

.calendar-interview-text {
    display: block;
    font-size: 11px;
    font-weight: bold;
}

.calendar-interview-note {
    display: block;
    font-size: 11px;
    font-weight: normal;
}

/* ==========================================================================
   Texto de ayuda, leyenda y botón de plegado
   ========================================================================== */

.calendar-help {
    margin: 0 0 8px 0;
    font-size: 11px;
    color: #555555;
}

.calendar-legend {
    margin: 0 0 12px 0;
    font-size: 10px;
    color: #555555;
}

.calendar-key {
    display: inline-block;
    margin: 0 10px 4px 0;
    white-space: nowrap;
}

/* Muestra con texto (no un cuadrito mudo): en alto contraste sigue diciendo qué es */
.calendar-swatch {
    display: inline-block;
    padding: 0 4px;
    border: 1px solid #9aa4ae;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    color: #444444;
}

.calendar-swatch-mock {
    background-color: #f7f4e8;
}

.calendar-swatch-rest {
    background-color: #eceff2;
}

/* "Ver días anteriores": solo existe en la lista del móvil */
.calendar-past-toggle {
    display: none;
    margin: 0 0 8px 0;
}

/* ==========================================================================
   Tabla "Reparto": por qué un tema recibe más sesiones que otro
   ========================================================================== */

.calendar-share {
    width: 100%;
    max-width: 600px;
    border-collapse: collapse;
    margin: 0 0 4px 0;
}

.calendar-share-caption {
    padding: 0 0 4px 0;
    text-align: left;
    font-size: 11px;
    font-weight: bold;
    color: #1a3a5c;
}

.calendar-share-head {
    padding: 3px 6px;
    border: 1px solid #c0c8d0;
    background-color: #eceff2;
    text-align: left;
    font-size: 10px;
    font-weight: bold;
    color: #333333;
}

.calendar-share-cell {
    padding: 3px 6px;
    border: 1px solid #c0c8d0;
    text-align: left;
    font-size: 11px;
    font-weight: normal;
    color: #222222;
}

.calendar-share-topic {
    font-weight: bold;
    color: #1a3a5c;
}

.calendar-share-meta {
    font-size: 10px;
    font-weight: normal;
    color: #555555;
    white-space: nowrap;
}

.calendar-share-num {
    width: 64px;
    text-align: center;
    white-space: nowrap;
}

.calendar-share-note {
    margin: 4px 0 0 0;
    font-size: 10px;
    color: #555555;
}

/* ==========================================================================
   Alto contraste de Windows: los fondos desaparecen; los estados que se ven
   por el fondo llevan además un marco del color de selección del sistema.
   ========================================================================== */

@media (forced-colors: active) {
    .calendar-day-today,
    .calendar-day-late,
    .calendar-day-interview {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }
}

/* ==========================================================================
   Responsive: 900 px como app.css (la rejilla se compacta sin bajar la letra);
   por debajo de 740 px, la MISMA tabla se pliega en una lista por semanas.
   ========================================================================== */

@media (max-width: 900px) {
    .calendar-head-week {
        width: 72px;
    }

    .calendar-day {
        height: 62px;
        padding: 3px;
    }
}

/* Por qué 740 px y no 480: con menos, cada día mide menos de ~80 px y las palabras más
   largas de los temas ("Dependencias", "Programación": 78 px a 11 px en negrita) ya no
   caben sin partirse. La letra no se baja de 11 px para que quepan: es contenido. */
@media (max-width: 740px) {
    .calendar-table,
    .calendar-caption,
    .calendar-body,
    .calendar-row,
    .calendar-week,
    .calendar-day {
        display: block;
        width: auto;
    }

    .calendar-thead {
        display: none;
    }

    /* Cada semana, una caja con subcabecera gris */
    .calendar-row {
        margin-bottom: 6px;
        border: 1px solid #c0c8d0;
    }

    .calendar-week {
        border: 0;
        border-bottom: 1px solid #c0c8d0;
    }

    .calendar-week-info {
        display: inline;
    }

    .calendar-week-info::before {
        content: " · ";
    }

    /* Cada día, una fila: la fecha a la izquierda y el resto a la derecha */
    .calendar-day {
        position: relative;
        height: auto;
        min-height: 18px;
        padding: 5px 8px 5px 78px;
        border: 0;
        border-top: 1px solid #d0d6dc;
    }

    .calendar-day-interview {
        border-left: 3px solid #f0c040;
    }

    .calendar-date {
        position: absolute;
        top: 5px;
        left: 8px;
    }

    .calendar-date-extra {
        display: inline;
    }

    .calendar-day .calendar-mark-today {
        float: none;
        margin-right: 4px;
    }

    .calendar-rest {
        display: inline;
    }

    /* Se ocultan descansos y días fuera del plan (salvo hoy) y, plegado, lo ya pasado
       que no pide nada (hecho). Las atrasadas y hoy siempre se ven. */
    .calendar-day-rest,
    .calendar-day-out,
    .calendar-day-past,
    .calendar-row-past {
        display: none;
    }

    .calendar-day-rest.calendar-day-today,
    .calendar-table-expanded .calendar-day-past,
    .calendar-table-expanded .calendar-row-past {
        display: block;
    }

    .calendar-past-toggle {
        display: block;
    }
}