/*
 * El calendario de mes (calendario-mes.js): el del socio y la vista
 * «Calendario» de la lista de eventos de la Junta, con las mismas piezas en
 * los dos.
 *
 * Lo cargan plantillas/gestion/eventos.php y tipos-convocatoria.php (la
 * última, después de panel.css, gestion.css y la hoja de su pantalla),
 * plantillas/socio/calendario.php (la última, después de socio.css y
 * socio-eventos.css) y socio/ayuda.php (antes de ayuda.css, por las
 * muestras de la leyenda). No toma piezas de otras hojas.
 *
 * Índice:
 *   1. Colores de los tipos de convocatoria
 *   2. Barra del mes y leyenda
 *   3. Rejilla y días
 *   4. Señal de la persona
 *   5. Lo que hay cada día
 *   6. Barras de varios días (escritorio)
 *   7. Lo que hay un día: líneas de la agenda
 *   8. El día elegido, debajo del mes (móvil)
 *   9. La ventana del día (escritorio)
 *  10. «Nuevo evento este día» (solo la Junta)
 *  11. La etiqueta de cómo lo tiene la persona
 */

/* #region 1. Colores de los tipos de convocatoria */
/*
 * Un color por tipo (en el orden en que la asociación los creó) y otro para
 * la lotería; los mismos en el calendario, en las tarjetas y en la Ayuda
 * (--color-tipo, con la clase .color-tipo-N que pone el JS). Ninguno es el
 * verde (lo que ya tienes), el ámbar (lo que te falta) ni el de la
 * asociación (hoy).
 */
:root {
    --calendario-c0: #A57BF5;
    --calendario-c1: #3BB8D4;
    --calendario-c2: #EC6FA0;
    --calendario-c3: #F0894B;
    --calendario-loteria: #D9A520;
}

:root[data-theme="light"] {
    --calendario-c0: #7A4FD6;
    --calendario-c1: #0E7F99;
    --calendario-c2: #C2396F;
    --calendario-c3: #B85A16;
    --calendario-loteria: #8F6A00;
}

.color-tipo-0 {
    --color-tipo: var(--calendario-c0);
}

.color-tipo-1 {
    --color-tipo: var(--calendario-c1);
}

.color-tipo-2 {
    --color-tipo: var(--calendario-c2);
}

.color-tipo-3 {
    --color-tipo: var(--calendario-c3);
}

.color-tipo-loteria {
    --color-tipo: var(--calendario-loteria);
}

/*
 * El color que elige cada asociación para cada tipo: llega en
 * --color-tipo-base y se ajusta su luz para que se lea en el tema oscuro y
 * en el claro, como el color de la marca (sección 104).
 */
.color-tipo-propio {
    --color-tipo: var(--color-tipo-base);
}

@supports (color: oklch(from red l c h)) {
    .color-tipo-propio {
        --color-tipo: oklch(from var(--color-tipo-base) clamp(0.66, l, 0.84) min(c, 0.19) h);
    }

    :root[data-theme="light"] .color-tipo-propio {
        --color-tipo: oklch(from var(--color-tipo-base) clamp(0.4, l, 0.55) min(c, 0.2) h);
    }
}

.color-tipo-cancelado {
    --color-tipo: var(--rs-texto-tenue);
}
/* #endregion */

/* #region 2. Barra del mes y leyenda */
.calendario-mes__barra {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-4);
}

.calendario-mes__titulo {
    flex: 1;
    margin: 0;
    text-align: center;
    font-size: var(--texto-h3);
}

.calendario-mes__hoy {
    order: -1;
}

.calendario-mes__leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2) var(--espacio-4);
    margin: 0 0 var(--espacio-3);
    padding: 0;
    list-style: none;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.calendario-mes__leyenda li {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
}

.calendario-mes__marca {
    display: inline-block;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-tipo);
}

@media (max-width: 767px) {
    .calendario-mes__titulo {
        font-size: var(--texto-grande);
    }
}
/* #endregion */

/* #region 3. Rejilla y días */
.calendario-mes__rejilla {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-md);
    overflow: hidden;
}

.calendario-mes__dia-semana {
    padding: var(--espacio-2);
    background: var(--rs-superficie-2);
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;
}

.calendario-mes__dias {
    display: contents;
}

.calendario-mes__dia {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    min-height: 6.5rem;
    padding: var(--espacio-1);
    border-top: 1px solid var(--rs-borde-sutil);
    border-left: 1px solid var(--rs-borde-sutil);
}

.calendario-mes__dia:nth-child(7n + 1) {
    border-left: 0;
}

.calendario-mes__dia--fuera {
    background: color-mix(in srgb, var(--rs-superficie-2) 60%, transparent);
}

.calendario-mes__numero {
    align-self: flex-start;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: 0;
    border-radius: var(--radio-pildora);
    background: none;
    color: var(--rs-texto);
    font: inherit;
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

/* Solo con ratón: en el móvil el último día tocado se quedaba sombreado. */
@media (hover: hover) {
    .calendario-mes__numero:hover {
        background: var(--rs-hover);
    }
}

.calendario-mes__numero:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

.calendario-mes__dia--fuera .calendario-mes__numero {
    color: var(--rs-texto-tenue);
}

/* Hoy, con un anillo del color de la asociación (relleno se confundía con lo que hay ese día). */
.calendario-mes__dia--hoy .calendario-mes__numero {
    box-shadow: inset 0 0 0 2px var(--marca-acento);
    color: var(--marca-acento);
}

/* Lo que ya pasó, apagado: de un vistazo se ve lo que queda del mes. */
.calendario-mes__dia--pasado .calendario-mes__numero {
    color: var(--rs-texto-tenue);
    font-weight: 500;
}

/* Móvil: cada día es una casilla que se toca entera. */
@media (max-width: 767px) {
    .calendario-mes__dia-semana {
        padding: var(--espacio-1) 0;
        font-size: 11px;
    }

    .calendario-mes__dia {
        min-height: 3.25rem;
        align-items: center;
        padding: var(--espacio-1) 2px;
    }

    .calendario-mes__numero {
        position: static;
        align-self: center;
    }

    .calendario-mes__numero::after {
        content: "";
        position: absolute;
        inset: 0;
    }
}
/* #endregion */

/* #region 4. Señal de la persona */
/* ✓ si lo tiene resuelto (entrada, «Asistiré» o fue), «!» si le falta algo. */
.calendario-mes__senal {
    display: inline-grid;
    flex-shrink: 0;
    place-items: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.calendario-mes__senal .icono {
    width: 10px;
    height: 10px;
    stroke-width: 3;
}

.calendario-mes__senal--tuyo {
    background: var(--rs-exito-solido);
    color: #fff;
}

.calendario-mes__senal--falta {
    background: #F5B301;
    color: #1A1A1A;
}

/* En el escritorio la señal va dentro de cada chip; la del día es para el móvil. */
.calendario-mes__dia > .calendario-mes__senal {
    display: none;
}

@media (max-width: 767px) {
    .calendario-mes__dia > .calendario-mes__senal {
        display: inline-grid;
        position: absolute;
        top: 3px;
        right: 3px;
        pointer-events: none;
    }
}
/* #endregion */

/* #region 5. Lo que hay cada día */
.calendario-mes__elementos {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Arriba, la señal y la hora; debajo, el nombre. Con color de verdad: lo
 * próximo se ve vivo y lo pasado, apagado. El fondo es opaco (mezclado con
 * el de la tarjeta): los trozos de una barra se solapan sin que se vea la
 * costura entre dos días.
 */
.calendario-mes__chip {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    padding: 3px 6px;
    border: 0;
    border-left: 3px solid var(--color-tipo);
    border-radius: 4px;
    background: color-mix(in srgb, var(--color-tipo) 26%, var(--rs-superficie-1));
    color: var(--rs-texto);
    font: inherit;
    font-size: 12px;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

/* --encima: el ratón está sobre otro trozo de la misma barra de varios días. */
.calendario-mes__chip:hover,
.calendario-mes__chip--encima {
    background: color-mix(in srgb, var(--color-tipo) 38%, var(--rs-superficie-1));
    color: var(--rs-texto);
    text-decoration: none;
}

/* Lo cancelado, tachado (después del chip, para mandar sobre su «text-decoration»). */
.calendario-mes__chip.color-tipo-cancelado {
    text-decoration: line-through;
}

/* Lo tuyo se ve más lleno que lo que no va contigo. */
.calendario-mes__chip--tuyo {
    background: color-mix(in srgb, var(--color-tipo) 40%, var(--rs-superficie-1));
    font-weight: 600;
}

.calendario-mes__chip--tuyo:hover,
.calendario-mes__chip--tuyo.calendario-mes__chip--encima {
    background: color-mix(in srgb, var(--color-tipo) 52%, var(--rs-superficie-1));
}

/* Lo que ya terminó, apagado (no lo de un día pasado: una barra que sigue hoy va encendida entera). */
.calendario-mes__chip--pasado {
    opacity: 0.55;
}

.calendario-mes__chip-cabeza {
    display: flex;
    align-items: center;
    gap: var(--espacio-1);
}

.calendario-mes__chip-hora {
    color: var(--rs-texto-secundario);
    font-variant-numeric: tabular-nums;
}

/* El nombre entero en dos líneas como mucho. */
.calendario-mes__chip-nombre {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
}

/* El sitio de una barra que ese día no pasa: las demás siguen a su altura. */
.calendario-mes__hueco {
    height: calc(12px * 1.35 + 6px);
}

.calendario-mes__mas {
    padding: 0 6px;
    color: var(--rs-texto-tenue);
    font-size: 12px;
}

/* Móvil: cada cosa, un punto de su color (la señal ya está en la esquina del día). */
@media (max-width: 767px) {
    .calendario-mes__elementos {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 3px;
    }

    .calendario-mes__chip {
        width: 7px;
        height: 7px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--color-tipo);
        font-size: 0;
        pointer-events: none;
    }

    .calendario-mes__chip .calendario-mes__senal,
    .calendario-mes__mas,
    .calendario-mes__hueco {
        display: none;
    }
}
/* #endregion */

/* #region 6. Barras de varios días (escritorio) */
/*
 * Lo que dura varios días cruza las casillas como una barra. El nombre sale
 * el primer día y cada lunes, a lo largo de los días que cruza esa semana
 * (--dias lo pone calendario-mes.js); en los demás trozos está pero no se ve.
 */
@media (min-width: 768px) {
    .calendario-mes__chip--continua {
        width: calc(100% + var(--espacio-1) + 2px);
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .calendario-mes__chip--sigue {
        width: calc(100% + var(--espacio-1));
        margin-left: calc(-1 * var(--espacio-1));
        border-left-width: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .calendario-mes__chip--sigue.calendario-mes__chip--continua {
        width: calc(100% + 2 * var(--espacio-1) + 2px);
    }

    .calendario-mes__chip--sigue:not(.calendario-mes__chip--lunes) > * {
        visibility: hidden;
    }

    /*
     * Por encima de los bordes de las casillas, que también tienen posición
     * (si no, la raya entre dos días corta la barra)...
     */
    .calendario-mes__chip--continua,
    .calendario-mes__chip--sigue {
        position: relative;
        z-index: 1;
        /*
     * Cada trozo, de una línea y del mismo alto: la hora y el nombre, uno al
     * lado del otro (3 nov 2026, Sergi: el primer día llevaba dos líneas y
     * los demás una, y la barra salía con un escalón).
     */
        flex-direction: row;
        align-items: center;
        gap: var(--espacio-1);
        height: calc(1.35em + 6px);
        padding-block: 0;
    }

    /* ...y el trozo con nombre, por encima de los demás, para que se lea a lo largo. */
    .calendario-mes__chip--continua:is(:not(.calendario-mes__chip--sigue), .calendario-mes__chip--lunes) {
        z-index: 2;
    }

    :is(.calendario-mes__chip--continua, .calendario-mes__chip--sigue) .calendario-mes__chip-cabeza {
        flex: none;
    }

    :is(.calendario-mes__chip--continua, .calendario-mes__chip--sigue) .calendario-mes__chip-nombre {
        display: block;
        flex: 0 1 auto;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .calendario-mes__chip--continua .calendario-mes__chip-nombre {
        flex: none;
        width: calc(var(--dias) * (100% + 2 * var(--espacio-1) + 13px) - 2 * var(--espacio-1) - 13px);
    }

    /* Con la hora delante, el nombre cuenta con menos sitio: no se sale por el final de la barra. */
    .calendario-mes__chip--continua .calendario-mes__chip-cabeza + .calendario-mes__chip-nombre {
        width: calc(var(--dias) * (100% + 2 * var(--espacio-1) + 13px) - 2 * var(--espacio-1) - 13px - 3.75rem);
    }
}
/* #endregion */

/* #region 7. Lo que hay un día: líneas de la agenda */
.calendario-mes__agenda-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.calendario-mes__agenda-lista > li + li {
    border-top: 1px solid var(--rs-borde-sutil);
}

/* Una línea por evento, con el punto de su tipo: el mismo del mes y de la leyenda. */
.calendario-mes__agenda-elemento {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    width: 100%;
    padding: var(--espacio-3) 0;
    border: 0;
    background: none;
    color: var(--rs-texto);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.calendario-mes__agenda-elemento::before {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-tipo, var(--rs-borde));
}

.calendario-mes__agenda-elemento:hover {
    color: var(--rs-texto);
    text-decoration: none;
}

.calendario-mes__agenda-elemento:hover strong {
    color: var(--marca-acento);
}

.calendario-mes__agenda-elemento:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

.calendario-mes__agenda-elemento > .icono {
    width: 18px;
    height: 18px;
    color: var(--rs-texto-tenue);
}

.calendario-mes__agenda-hora {
    min-width: 3rem;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-variant-numeric: tabular-nums;
}

.calendario-mes__agenda-texto {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.calendario-mes__agenda-texto span {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.calendario-mes__agenda-texto .estado-evento {
    align-self: flex-start;
    margin-top: var(--espacio-1);
}

/* Lo cancelado se tacha en el nombre, no en todo (el «Cancelado» se tiene que leer). */
.calendario-mes__agenda-elemento.color-tipo-cancelado strong {
    color: var(--rs-texto-secundario);
    text-decoration: line-through;
}
/* #endregion */

/* #region 8. El día elegido, debajo del mes (móvil) */
.calendario-mes__dia-elegido {
    display: none;
}

.calendario-mes__dia-titulo {
    margin: 0 0 var(--espacio-3);
    font-size: var(--texto-grande);
}

.calendario-mes__nada {
    margin: 0;
    color: var(--rs-texto-secundario);
}

.calendario-mes__siguiente {
    margin: var(--espacio-4) 0 var(--espacio-2);
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

@media (max-width: 767px) {
    .calendario-mes__dia-elegido {
        display: block;
        margin-top: var(--espacio-5);
    }

    /* El día que se mira, relleno; hoy sigue con su anillo cuando no es el elegido. */
    .calendario-mes__dia--elegido .calendario-mes__numero {
        background: var(--rs-texto);
        box-shadow: none;
        color: var(--rs-fondo);
    }

    .calendario-mes__dia--elegido.calendario-mes__dia--hoy .calendario-mes__numero {
        background: var(--marca-fondo);
        color: var(--marca-sobre);
    }
}
/* #endregion */

/* #region 9. La ventana del día (escritorio) */
.calendario-mes__dialogo {
    width: min(28rem, calc(100vw - 2rem));
    padding: var(--espacio-4);
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-1);
    color: var(--rs-texto);
    box-shadow: var(--sombra-lg);
}

.calendario-mes__dialogo::backdrop {
    background: rgb(0 0 0 / 0.5);
}

.calendario-mes__dialogo-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-3);
}

.calendario-mes__dialogo-cabecera h3 {
    margin: 0;
    font-size: var(--texto-grande);
}
/* #endregion */

/* #region 10. «Nuevo evento este día» (solo la Junta) */
.calendario-mes__nuevo {
    justify-self: start;
    margin-top: var(--espacio-3);
}
/* #endregion */

/* #region 11. La etiqueta de cómo lo tiene la persona */
/* Los mismos colores que el recuadro de su tarjeta: verde lo tiene, ámbar le falta, el de la asociación le toca. */
.estado-evento {
    padding: 1px var(--espacio-2);
    border-radius: var(--radio-pildora);
    background: var(--rs-cian-suave);
    color: var(--rs-cian-texto);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.estado-evento.estado-evento--bien {
    background: color-mix(in srgb, var(--rs-exito) 14%, transparent);
    color: var(--rs-exito-texto);
}

.estado-evento.estado-evento--pendiente {
    background: color-mix(in srgb, var(--rs-aviso) 16%, transparent);
    color: var(--rs-aviso-texto);
}

.estado-evento.estado-evento--accion {
    background: color-mix(in srgb, var(--marca-acento) 14%, transparent);
    color: var(--marca-acento);
}

.estado-evento.estado-evento--cancelado {
    background: color-mix(in srgb, var(--rs-peligro) 14%, transparent);
    color: var(--rs-peligro);
}
/* #endregion */