/*
 * El panel de gestión y el panel técnico: lo que lleva cada pantalla (el título,
 * las tarjetas y los avisos de arriba). Lo demás que comparten, por temas, va en
 * las hojas que se cargan justo después, siempre juntas y en este orden
 * (plantillas/comun/cabecera-html.php):
 *
 *   gestion-cifras.css       cifras y gráficos
 *   gestion-pestanas.css     los dos menús: el de la sección y las pestañas
 *   gestion-tablas.css       filtros, tablas y listas de un listado
 *   gestion-formularios.css  opciones, casillas, ventanas y subir archivos
 *   gestion-fichas.css       la ficha de un socio o de un evento
 *
 * El armazón (menú lateral y barra de arriba) vive en panel.css; los componentes
 * de toda la plataforma (botones, campos, tablas, avisos), en base.css; lo de una
 * sola pantalla, en la suya (socios.css, cuotas.css…).
 */

/* #region Los colores de las piezas del panel, en oscuro y en claro */
/*
 * Cada pieza se escribe una sola vez y saca de aquí lo que cambia con el tema
 * (4 nov 2026: antes, una capa entera de reglas repetidas para el modo claro).
 * Las de las pestañas y las tablas, en el principio de sus hojas.
 */
:root {
    /* Títulos y cifras grandes: con degradado en oscuro, lisos en claro. */
    --panel-titulo-fondo: linear-gradient(180deg, #FFFFFF 35%, #B9C3CF);
    --panel-cifra-fondo: linear-gradient(180deg, #FFFFFF 40%, #C7D0DA);
    --panel-titulo-texto: transparent;
    /* Las tarjetas: cristal oscuro con el canto que brilla arriba. */
    --panel-tarjeta-fondo:
        linear-gradient(165deg, rgb(23 29 39 / 0.74) 0%, rgb(13 16 22 / 0.86) 55%, rgb(9 11 16 / 0.92) 100%) padding-box,
        linear-gradient(160deg, rgb(255 255 255 / 0.11), rgb(255 255 255 / 0.03) 38%, rgb(255 255 255 / 0.025) 70%, rgb(241 199 110 / 0.14)) border-box;
    --panel-tarjeta-sombra: 0 18px 48px rgb(0 0 0 / 0.32), inset 0 1px 0 rgb(255 255 255 / 0.05);
    --panel-subtarjeta-borde: rgb(255 255 255 / 0.06);
    --panel-subtarjeta-fondo: rgb(255 255 255 / 0.025);
    --panel-aviso-borde: rgb(255 255 255 / 0.06);
    --panel-aviso-fondo: rgb(255 255 255 / 0.025);
}

:root[data-theme="light"] {
    --panel-titulo-fondo: none;
    --panel-cifra-fondo: none;
    --panel-titulo-texto: var(--rs-texto);
    --panel-tarjeta-fondo:
        linear-gradient(165deg, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.88)) padding-box,
        linear-gradient(160deg, rgb(16 20 26 / 0.09), rgb(16 20 26 / 0.04) 50%, rgb(168 117 36 / 0.16)) border-box;
    --panel-tarjeta-sombra: 0 12px 34px rgb(16 20 26 / 0.06), inset 0 1px 0 rgb(255 255 255 / 0.9);
    --panel-subtarjeta-borde: rgb(16 20 26 / 0.07);
    --panel-subtarjeta-fondo: rgb(16 20 26 / 0.02);
    --panel-aviso-borde: rgb(16 20 26 / 0.07);
    --panel-aviso-fondo: rgb(255 255 255 / 0.7);
}
/* #endregion */

/* #region Móvil: los botones de la cabecera */
@media (max-width: 767px) {
    .cabecera-pagina__acciones {
        width: 100%;
    }

    .cabecera-pagina__acciones .boton {
        flex: 1 1 auto;
    }

    /* Un botón de solo icono (el engranaje) no se estira: con él solo, la fila quedaba como una caja vacía. */
    .cabecera-pagina__acciones .boton--icono {
        flex: 0 0 auto;
    }
}
/* #endregion */

/* #region Aviso de soporte («Entrar como») */
/* Flotante y fijo: no toca la rejilla del armazón y no se puede perder de vista. */
.aviso-soporte {
    position: fixed;
    left: 50%;
    bottom: var(--espacio-4);
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    width: max-content;
    max-width: calc(100vw - 2 * var(--espacio-4));
    padding: var(--espacio-2) var(--espacio-2) var(--espacio-2) var(--espacio-4);
    border: 1px solid color-mix(in srgb, var(--rs-aviso) 55%, transparent);
    border-radius: var(--radio-lg);
    background: color-mix(in srgb, var(--rs-aviso) 16%, var(--rs-fondo));
    color: var(--rs-texto);
    box-shadow: var(--sombra-lg);
    font-size: var(--texto-etiqueta);
}

.aviso-soporte > .icono {
    flex-shrink: 0;
    color: var(--rs-aviso);
}

.aviso-soporte__texto {
    min-width: 0;
}

.aviso-soporte__salir {
    flex-shrink: 0;
}

.con-aviso-soporte .contenido-gestion {
    padding-bottom: calc(var(--espacio-8) * 2.5);
}

@media (max-width: 640px) {
    .aviso-soporte {
        left: var(--espacio-3);
        right: var(--espacio-3);
        bottom: var(--espacio-3);
        transform: none;
        width: auto;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        padding: var(--espacio-3);
    }

    .aviso-soporte__salir {
        grid-column: 1 / -1;
    }
}
/* #endregion */

/* #region Avisos de la plataforma arriba del panel de la Junta */
/*
 * Una franja fina por aviso (15 oct 2026: dos cajas de color grandes
 * empujaban la pantalla y en claro se veían sucias): la superficie de las
 * tarjetas, el color solo en la raya de la izquierda y en el icono, y el
 * título y la explicación en una línea si caben.
 */
.avisos-plataforma {
    display: grid;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-5);
}

.aviso-plataforma {
    --tono-aviso: var(--rs-azul);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--espacio-3);
    min-height: 48px;
    padding: var(--espacio-2) var(--espacio-2) var(--espacio-2) var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-left: 3px solid var(--tono-aviso);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-1);
    font-size: var(--texto-etiqueta);
}

:root[data-theme="light"] .aviso-plataforma {
    border-color: rgb(16 20 26 / 0.08);
    border-left-color: var(--tono-aviso);
    background: #FFFFFF;
    box-shadow: 0 4px 14px rgb(16 20 26 / 0.04);
}

.aviso-plataforma--aviso {
    --tono-aviso: var(--rs-aviso);
}

.aviso-plataforma--peligro {
    --tono-aviso: var(--rs-peligro);
}

/* El icono, en su cuadradito del color del aviso. */
.aviso-plataforma > .icono {
    box-sizing: content-box;
    padding: 6px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--tono-aviso) 14%, transparent);
    color: var(--tono-aviso);
}

/* Título y explicación seguidos; si no caben, la explicación baja. */
.aviso-plataforma > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--espacio-2);
}

.aviso-plataforma__titulo {
    margin: 0;
    font-weight: 600;
}

.aviso-plataforma__texto {
    margin: 0;
    color: var(--rs-texto-secundario);
    white-space: pre-line;
}

/* Sin «×» (el de la licencia no se cierra), el texto no deja hueco a la derecha. */
.aviso-plataforma:not(:has(> button)) {
    padding-right: var(--espacio-4);
}
/* #endregion */

/* #region Explicación del título en una línea */
.cabecera-pagina__descripcion--recogida {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*
 * En el móvil, una frase corta cabe en dos líneas: así no sale «Ver más» (17 oct 2026). Y en una pantalla ancha
 * también (3 nov 2026): con sitio de sobra, una explicación de dos líneas se lee entera, sin «Ver más».
 */
@media (max-width: 640px), (min-width: 1400px) {
    .cabecera-pagina__descripcion--recogida {
        display: -webkit-box;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

/* De su ancho, no del de la explicación (3 nov 2026: junto a la chapa, la cabecera es una rejilla y se estiraba). */
.cabecera-pagina__mas {
    justify-self: start;
    margin-top: var(--espacio-1);
    font-size: var(--texto-etiqueta);
}
/* #endregion */

/* #region El punto de «En directo» (en directo y lectores) */
.directo-estado {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rs-texto-tenue);
}

.directo-estado[data-estado="activa"] {
    background: var(--rs-exito);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--rs-exito) 20%, transparent);
}

.directo-estado[data-estado="tranquila"] {
    background: var(--rs-azul);
}

.directo-estado[data-estado="sin_senal"] {
    background: var(--rs-aviso);
}
/* #endregion */

/* #region Títulos y tarjetas del panel, con el lenguaje de la pantalla de entrar */
/*
 * El panel por dentro con el mismo lenguaje que la pantalla de entrar:
 * tarjetas de cristal con el canto que brilla y títulos con la letra de la
 * marca (el menú y la barra de arriba, en panel.css). Sobrio, como los mejores paneles (Linear, Stripe, Vercel): lo
 * importante se lee de un vistazo, sin ruido. Solo cambia la piel: cada
 * pantalla sigue siendo la misma. El modo claro tiene su versión al final.
 */

/* Títulos con la letra de la marca, como «Acceso de socio». */
.app-panel .cabecera-pagina h1 {
    font-family: var(--fuente-display);
    font-size: clamp(1.75rem, 2.4vw, 2.25rem);
    letter-spacing: -0.025em;
    background: var(--panel-titulo-fondo);
    -webkit-background-clip: text;
    background-clip: text;
    color: var(--panel-titulo-texto);
}

/* Las tarjetas: cristal oscuro con el canto que brilla arriba. */
.app-panel .contenido-gestion .tarjeta,
.app-panel .contenido-gestion .kpi {
    position: relative;
    border: 1px solid transparent;
    border-radius: 16px;
    background: var(--panel-tarjeta-fondo);
    box-shadow: var(--panel-tarjeta-sombra);
}

/* Tarjeta dentro de tarjeta: sin doble cristal. */
.app-panel .contenido-gestion .tarjeta .tarjeta {
    border: 1px solid var(--panel-subtarjeta-borde);
    background: var(--panel-subtarjeta-fondo);
    box-shadow: none;
}

.app-panel .contenido-gestion .tarjeta h2 {
    font-family: var(--fuente-display);
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

/* Con su icono: separado, centrado con el texto y en el tono de la sección (4 nov 2026). */
.app-panel .contenido-gestion .tarjeta h2:has(> .icono) {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.app-panel .contenido-gestion .tarjeta h2 > .icono {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--tono-seccion, var(--marca-acento));
}
/* #endregion */

/* #region Un aviso que lleva a su sitio */
/* Un aviso que lleva a su sitio: icono de color, qué pasa, una ayuda corta y la flecha. */
.aviso-accion {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-1);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--duracion-hover) var(--curva), background-color var(--duracion-hover) var(--curva), transform var(--duracion-hover) var(--curva);
}

a.aviso-accion:hover {
    border-color: var(--rs-borde);
    background: var(--rs-hover);
    text-decoration: none;
    transform: translateX(2px);
}

a.aviso-accion:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

.aviso-accion > .icono:first-child {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.5rem;
    border-radius: 10px;
}

.aviso-accion > span {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.aviso-accion small {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
}

/* Las filas de aviso: cristal muy suave, que se ilumina al pasar. */
.app-panel .contenido-gestion .aviso-accion {
    border-color: var(--panel-aviso-borde);
    border-radius: 12px;
    background: var(--panel-aviso-fondo);
}

.app-panel .contenido-gestion a.aviso-accion:hover,
.app-panel .contenido-gestion summary.aviso-accion:hover {
    border-color: color-mix(in srgb, var(--marca-acento) 40%, transparent);
    background: color-mix(in srgb, var(--marca-acento) 7%, rgb(255 255 255 / 0.02));
}
/* #endregion */

/* #region El título de cada pantalla */
/* Título de la pantalla: grande y con presencia, como el de la pantalla de entrar. */
.app-panel .cabecera-pagina {
    align-items: flex-end;
}
/* #endregion */

/* #region Móvil: la cabecera de página */
@media (max-width: 767px) {
    /* El título y, a su lado, «¿Cómo funciona?». */
    .app-panel .cabecera-pagina {
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    /* Con explicación o con botones, el título a lo ancho y lo demás debajo: si no, se corta («Socio…», «Las consumi…»). */
    .app-panel .cabecera-pagina:is(:has(.cabecera-pagina__descripcion), :has(> .cabecera-pagina__acciones)) {
        flex-wrap: wrap;
    }

    .app-panel .cabecera-pagina:is(:has(.cabecera-pagina__descripcion), :has(> .cabecera-pagina__acciones)) > .cabecera-pagina__textos {
        flex-basis: 100%;
    }

    /* Y debajo, los botones y «¿Cómo funciona?» en la misma línea. */
    .app-panel .cabecera-pagina:has(.cabecera-pagina__descripcion) > .cabecera-pagina__acciones {
        width: auto;
        flex: 1 1 0;
    }

    /* Sin más botones, Rasi va arriba a la derecha: solo no merece una línea para él. */
    .app-panel .cabecera-pagina:has(.cabecera-pagina__descripcion):has(> .enlace-ayuda, > .cabecera-pagina__acciones > .enlace-ayuda:only-child) {
        position: relative;
    }

    .app-panel .cabecera-pagina:has(.cabecera-pagina__descripcion) > .enlace-ayuda,
    .app-panel .cabecera-pagina:has(.cabecera-pagina__descripcion) > .cabecera-pagina__acciones:has(> .enlace-ayuda:only-child) {
        position: absolute;
        top: 0;
        right: 0;
        flex: none;
    }

    .app-panel .cabecera-pagina:has(> .enlace-ayuda, > .cabecera-pagina__acciones > .enlace-ayuda:only-child) > .cabecera-pagina__textos {
        padding-right: var(--espacio-10);
    }
}
/* #endregion */

/* #region Configuración en un solo sitio (vista-configuracion.js) */
/* Las pestañas que no van aquí: las de configurar en la pantalla de trabajo, y al revés. */
.pestanas__pestana--fuera,
.pestanas__panel--fuera,
.pestanas--una-sola {
    display: none !important;
}

/* Abierta desde Configuración, una pantalla de módulo enseña solo sus ajustes: sin los botones,
   las cifras ni los avisos del día a día. */
.vista-configuracion .cabecera-pagina__acciones,
.vista-configuracion .franja-cifras,
.vista-configuracion [data-solo-trabajo] {
    display: none !important;
}

/* Y al revés: lo de crear (los tipos de la primera vez), solo en Configuración; en la de trabajo, su enlace. */
:root:not(.vista-configuracion) [data-solo-configuracion],
.vista-configuracion [data-solo-trabajo-enlace] {
    display: none !important;
}

/* El engranaje junto al título: lleva a los ajustes de la pantalla. */
.engranaje-configuracion {
    flex: none;
}

/*
 * Los ajustes en rejilla (4 nov 2026): a lo ancho y a dos columnas en pantalla
 * grande, con las tarjetas de cada fila igual de altas, así que las dos columnas
 * acaban a la vez. Un formulario sin tarjeta propia no cuenta como caja: sus
 * tarjetas entran en la rejilla. Lo de guardar y los avisos, debajo, a lo ancho.
 */
.ajustes-rejilla:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espacio-4);
    align-content: start;
}

.ajustes-rejilla > form:not(.tarjeta, [hidden]) {
    display: contents;
}

.ajustes-rejilla .tarjeta,
:is(.ajustes-rejilla, .ajustes-rejilla > form) > :is(.formulario-acciones, .acciones-formulario) {
    margin: 0;
}

/* Una tarjeta estirada para igualar su fila no reparte su contenido: va arriba. */
.ajustes-rejilla .tarjeta {
    align-content: start;
}

/* Un número suelto, de su tamaño: ni 3 ni 500 piden media pantalla. También en las ventanas. */
.contenido-gestion :is(.ajustes-rejilla, .dialogo) :is(:not(.fila-campos), .fila-campos:has(> .campo:only-child)) > .campo > input:is([type="number"], [inputmode="decimal"], [inputmode="numeric"]) {
    max-width: 11rem;
}

/* Varias tarjetas en cada columna, cuando no van por filas; la última llega hasta abajo. */
.ajustes-columna {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-4);
    min-width: 0;
}

.ajustes-columna > :last-child {
    flex: 1;
}

@media (min-width: 1280px) {
    .ajustes-rejilla:not([hidden]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ajustes-rejilla__alta {
        grid-row: span 2;
    }

    :is(.ajustes-rejilla, .ajustes-rejilla > form) > :is(.formulario-acciones, .acciones-formulario, .cuotas-ajustes__pie, .aviso, .ajustes-rejilla__entero) {
        grid-column: 1 / -1;
    }
}
/* #endregion */

/* #region La chapa de cada pantalla, en el tono de su sección */
/*
 * Junto al título, el icono de la pantalla sobre el tono de su sección (comun.js, pintarChapaSeccion): se sabe
 * de un vistazo dónde se está, y cada sección se distingue de las demás. Los tonos salen de la familia de la
 * asociación (base.css): ninguno es azul de Rasedia. Lo de otra sección dentro de una pantalla (las tareas del
 * Inicio, los temas de la Ayuda) lleva `data-area` con su clave y toma su tono.
 */
body { --tono-seccion: var(--marca-acento); }
body[data-seccion="socios"], [data-area="socios"] { --tono-seccion: var(--color-personas); }
body[data-seccion="eventos"], [data-area="eventos"] { --tono-seccion: var(--color-eventos); }
body[data-seccion="secretaria"], [data-area="secretaria"] { --tono-seccion: var(--color-secretaria); }
body[data-seccion="fiesta"], [data-area="fiesta"] { --tono-seccion: var(--tono-2); }
body[data-seccion="roperia"], [data-area="roperia"] { --tono-seccion: var(--tono-4); }
body[data-seccion="monumento"], [data-area="monumento"] { --tono-seccion: var(--tono-5); }
body[data-seccion="competiciones"], [data-area="competiciones"] { --tono-seccion: var(--tono-2); }
body[data-seccion="comunicar"], [data-area="comunicar"] { --tono-seccion: var(--color-comunicar); }
body[data-seccion="comunidad"], [data-area="comunidad"] { --tono-seccion: var(--tono-6); }
body[data-seccion="tienda"], [data-area="tienda"] { --tono-seccion: var(--color-tienda); }
body[data-seccion="tesoreria"], [data-area="tesoreria"] { --tono-seccion: var(--color-dinero); }
body[data-seccion="estadisticas"], [data-area="estadisticas"] { --tono-seccion: var(--tono-3); }
[data-area="empezar"] { --tono-seccion: var(--marca-acento); }
[data-area="apps"] { --tono-seccion: var(--tono-6); }
body[data-seccion="configuracion"], [data-area="configuracion"] { --tono-seccion: color-mix(in srgb, var(--marca-acento) 55%, var(--rs-texto-secundario)); }

.cabecera-pagina__textos:has(> .cabecera-pagina__chapa) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--espacio-4);
    align-items: center;
}

/*
 * La chapa, centrada con todo el bloque: el título y su explicación (3 nov 2026, Sergi: «los iconos deben estar
 * alineados en el centro de los títulos y textos»). Ocupa tantas filas como textos hay al lado, nunca de más (una
 * fila vacía se llevaría parte del alto y separaría el título de su explicación).
 */
.cabecera-pagina__textos > .cabecera-pagina__chapa {
    grid-row: 1;
    align-self: center;
}

.cabecera-pagina__textos:has(> :nth-child(3)) > .cabecera-pagina__chapa {
    grid-row: 1 / span 2;
}

.cabecera-pagina__textos:has(> :nth-child(4)) > .cabecera-pagina__chapa {
    grid-row: 1 / span 3;
}

.cabecera-pagina__textos:has(> .cabecera-pagina__chapa) > h1 {
    grid-row: 1;
    line-height: 1.1;
}

.cabecera-pagina__textos:has(> .cabecera-pagina__chapa) > :not(.cabecera-pagina__chapa) {
    grid-column: 2;
}

.cabecera-pagina__chapa {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 16px;
    background:
        radial-gradient(circle at 30% 20%, color-mix(in srgb, white 28%, transparent), transparent 60%),
        linear-gradient(145deg, color-mix(in srgb, var(--tono-seccion) 88%, white), var(--tono-seccion));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--tono-seccion) 32%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.25);
    color: #FFFFFF;
}

.cabecera-pagina__chapa .icono {
    width: 24px;
    height: 24px;
}

@media (max-width: 760px) {
    .cabecera-pagina__chapa {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 12px;
    }

    .cabecera-pagina__chapa .icono {
        width: 20px;
        height: 20px;
    }
}
/* #endregion */