/* En este diseño, los contenedores se expandirán al ancho máximo de la pantalla, pero el contenido principal estará centrado a un máximo de 1300 píxeles de ancho.
   Basándonos en las estadísticas de visitas, que tiene un perfil de visitantes parecido a esta web, vamos a probar esta maquetación hasta una resolución
   mínima de 360 píxeles de ancho.

   IMPORTANTE: En administración se cargarán los siguientes CSS:
   1) variables.css:   Esta hoja de estilo SÓLO contiene las variables relativas a colores, tamaños, fondos, bordes, etc. que se aplicarán a un ámbito. 
                       Por eso estará almacenada en /ambitos/idAmbitoOfuscado/css/variables.css.
                       Una vez configuradas, estas variables no van a cambiar, a no ser que se añadan nuevas. 
                       Por eso, porque no va a cambiar con frecuencia y para evitar tener que llevar un control de versiones, no vamos a añadir número de versión.
                       CUANDO HAY CAMBIOS EN LAS VARIABLES, este CSS se debe actualizar en todos los ámbitos.

   2) admEstiloVx.css: Esta hoja de estilo es común a todos los ámbitos y contiene toda la definición del estilo de la administración, excepto las variables. 
                       Este CSS si que cambiará, por eso tiene versión.

   En algunas páginas se cargarán CSS adicionales, por ejemplo, para el componente jqueryUI
*/

/*
Usar por defecto el modelo de caja "border-box". Es decir, que en el ancho de un elemento ya esté incluido el padding y el borde.
https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
*/

/* Variables para configurar el CSS  
  var(--nombreVariable)- Están en variables.css de cada ámbito /ambitos/idAmbitoOfuscado/css/variables.css 

  Estas son las que variables existentes. El valor de cada variable depende de la hoja de estilo propia de cada ámbito.
  Aquí indico las que son para poder usarlas en este CSS.
  Por ahora, como hay un único ámbito, también indico los valores

    Fondos -------------------------------------------
    --clFondoPagina: #F0F0F0;
    --clFondoTranslucido: #0C4E6C;
    --clFondoOscuro: #0C4E6C;
    --clFondoMuyClaro: #FFF;
    --clFondoMenu: #0C4E6C;
    --clResaltadoMenu: #116B97;
    --clFondoOK: #D5FFD5;
    --clFondoKO: #FFD2D2;
    --clFondoInfo: #D2E9FF;
    --clFondoWarning: #FFF6BD;
    --clFondoColor1: #D2E9FF42;
    --clNoDefinido: #f9f9f9;
    --clTotalDispo: #C8E6C9;
    --clParcialDispo: #FFF9C4;
    --clTotalOcupado: #BBDEFB;
    --clCerrado: #FFCDD2;
    --clColorCalendario1: #B3E5FC;
    --clColorCalendario2: #7CD1FA;
    --clColorCalendario3: #FFE082;
    --clColorCalendario4: #81C784;
    --clColorCalendario5: #E1BEE7;
    --clColorCalendario6: #E1A5C0;
    --clColorCalendario7: #F48FB1;
    --clColorCalendario8: #FFB74D;
    --clColorCalendario9: #AED581;
    --clColorCalendario10: #4DD0E1;

    Bordes -------------------------------------------
    --clBordeMuyClaro: #FFF;
    --clBordeClaro: #CCC;
    --clBordeOscuro: #0C4E6C;

    Letras -------------------------------------------
    --clLetraMuyOscura: #000;
    --clLetra: #0C4E6C;
    --clLetraClara: #CCC;
    --clLetraMuyClara: #FFF;
    --clLetraDeshabilitado: #B7B7B7;
    --clLetraOK: #3CB371;
    --letraS: 0.85rem;
    --letraM: 1rem;

    Sombra--------------------------------------------
    --sombra: 0 1px 5px 0 rgba(0, 0, 0, 0.2);

    Margin, padding, gap -----------------------------
    --espacioXL: 2rem;
    --espacioL: 1.5rem;
    --espacioM: 1rem;
    --espacioS: 0.5rem;
    --espacioXS: 0.3rem;

    Varios--------------------------------------------
    --clDestacado: #0080FF;
    --clInactivo: #EEE;
    --clDeshabilitado: #FAFAFA;
    --redondeado: 5px;
    --redondeadoL: 10px;

    Menú ---------------------------------------------
    --anchoMenuCerrado: 40px;
    --anchoMenuAbierto: 200px;
    --altoMenuTop: 55px;

    Formulario de entrada ----------------------------
   -- anchoFormEntrada: 282px;

*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* Elementos genéricos                                                                                                                           */
/* --------------------------------------------------------------------------------------------------------------------------------------------- */
body {
    background-color: var(--clFondoPagina);
    color: var(--clLetra);
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--letraM); 
    font-style: normal;
    font-weight: 400;
    overflow-wrap: anywhere; /* para "romper" palabras anormalmente largas en resoluciones pequeñas, por ejemplo, urls incluidas en los textos */
    text-align: start;
}

a {
    color: var(--clDestacado);
    cursor: pointer;
    text-decoration: none;
}

/*a:hover {
        color: var(--clLetraMuyClara);
    }*/

ul {
    list-style-type: none; 
}

h1, h2, h3 {
    font-weight: normal;
    line-height: normal;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* Layout especial para páginas sin menú, como la de login, los errores 404, 500, etc.                                                           */
/* --------------------------------------------------------------------------------------------------------------------------------------------- */
.noLayout {
    min-block-size: 100vh; /* Debe ocupar toda la altura de la pantalla. */
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* Layout de la página                                                                                                                           */
/* Div contenedor principal. Grid que contiene cabecera, contenido principal y pie de la página                                                  */
/* --------------------------------------------------------------------------------------------------------------------------------------------- */

/*
Maquetación de la página: grid con dos columnas, "menú" y "contenido". El div "contenido" es a su vez otro grid con menú superior, mensaje, contenido principal y pie.

Comportamiento del menú (que se consigue con CSS + javascript)
- Si el ancho de pantalla es mayor de 1000px, el menú se muestra "abierto" (icono + texto)
- Si no, el menú se muestra "cerrado" (sólo iconos)
- El icono "Menú" abre el menú si está cerrado y lo cierra si está abierto.
- Si el ancho de pantalla es menor de 1000px, cuando abrimos el menú, la columna de menú se muestra por encima de la columna de contenido.
- Cuando el menú está cerrado, al pinchar un icono se abrirá el menú, es decir, el enlace se comportará como el icono Menú.

<div class="layout">
    <menu class="layoutMenu">
        Menú
    </menu >
    <div class="layoutContenido">
        <header class="layoutHeader">
            Menú superior
        </header>
        <div class="layoutMensaje">
            Mensaje (opcional)
        </div >
        <main class='layoutMain'>
            Contenido principal
        </main >
        <footer class='layoutFooter centradoHV letraS' >
            Pie de página
        </footer >
    </div>
</div>
*/

.layout {
    min-block-size: 100vh; /* Queremos que, como mínimo, ocupe la altura de la pantalla. */
    /* configuración del grid */
    display: grid;
    grid-template-columns: var(--anchoMenuAbierto) auto; /* menu contenido*/
    justify-items: stretch;
    align-items: stretch;
}

/* Div contenedor del menú principal, que es lateral */
.layoutMenu {
    background-color: var(--clFondoMenu);
}

.layoutContenido {
    /* configuración del grid */
    border-inline-start: 1px solid var(--clBordeMuyClaro); /* "separar" de layoutMenu - NOTA: lo pongo aquí porque en layoutMenu afecta al ancho del menú que uso en javascript (admComunVx.js) */
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: min-content min-content auto min-content; /* header mensaje main footer */
    grid-template-areas: "header" "mensaje" "main" "footer";
    justify-items: stretch;
    align-items: stretch;
}

/* Div contenedor del menú superior */
.layoutHeader {
    grid-area: header;
    background-color: var(--clFondoMuyClaro);
    box-shadow: var(--sombra); /* sombra para "separar" de layoutMain */
    color: var(--clDestacado);
    padding: var(--espacioS);
    /* para maquetar los elementos dentro del header */
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    column-gap: var(--espacioXL);
}


/* Div contenedor de los mensajes. No siempre hay mensajes. */
.layoutMensaje {
    grid-area: mensaje;
}

/* Div contenedor del contenido principal de la página */
.layoutMain {
    grid-area: main;
    padding: var(--espacioM);
}

/* Div contenedor del pie de página */
.layoutFooter {
    grid-area: footer;
    background-color: var(--clFondoMuyClaro);
    box-shadow: var(--sombra); /* sombra para "separar" de layoutMain */
    padding: var(--espacioS);
}

/* Logos para la subvención. 
   Se maquetan de forma independiente, de forma que todo lo relativo a la subvención se pueda eliminar sin afectar a la maquetación del resto de elementos de la página.
*/

/* Clase que se aplica cuando se pintan en el formulario de entrada */
.layoutSubvencion_entrada{
    max-inline-size: 750px;
    padding: var(--espacioS);
}

    /* en este caso, queremos que la imagen con los logos se expanda todo el ancho del contenedor*/
    .subvencionLogos_entrada img {
        inline-size: 100%;
        block-size: auto;
    }

/* Clase que se aplica una vez que el usuario se ha identificado, en el pie de página. Añadimos una línea de separación.*/
.layoutSubvencion_pie{
    border-block-start: 1px solid var(--clBordeClaro);
    padding-block-start: var(--espacioS);
    text-align: center;
}

/* en este caso, queremos que la imagen con los logos tenga un alto máximo y el ancho sea proporcional */
.subvencionLogos_pie img {
    inline-size: auto;
    block-size: 50px;
}

/* en resoluciones más grandes, mostraremos una imagen con todos los logos. Ocultamos los logos individuales*/
.subvLogoUE, .subvLogoHaciendaFondo, .subvLogoJunta {
    display: none;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* MENÚ 

 Comportamiento del menú (que se consigue con CSS + javascript /comun/javascript/admComunVx.js)
 - El icono "Menú" abre el menú si está cerrado y lo cierra si está abierto.

 - Ancho de pantalla >= 1000px. Versión "desktop": 
   - El menú se muestra "abierto"(icono + texto)
   - En este caso, el menú y el contenido se muestran cada uno en su propia columna, sin que el menú esté por encima del contenido

 - Ancho de pantalla < 1000px. Versión "móvil" 
   - El menú se muestra "cerrado"(sólo iconos)
   - Cuando abrimos el menú, la columna de menú se muestra por encima de la columna de contenido, que queda oculto bajo un div translúcido.
   - Cuando el menú está cerrado, al pinchar un icono se abrirá el menú, es decir, el enlace se comportará como el icono Menú.

 - De forma automática, todo esto se controla por CSS. Sin embargo, al pichar el icono "Menú" se añaden clases adicionales. 
   Por eso cuando se reescala la pantalla (= resize) se deben comprobar estas clases y reajustar para que se corresponden con la versión que  se debe
   mostrar según el ancho de la pantalla despúes de reescalar. Es decir comprobamos si tras el cambio el menú está en versión "desktop" o "móvil" y 
   hacemos los cambios necesarios para que se muestre esta versión

   Clases que se aplicarán con javascript en admComunVx.js para conseguir este comportamiento del menú al pinchar el icono "Menú".

*/
/* Clase para abrir el menú con javascript (admComunVx.js) */
.layout.abierto {
    grid-template-columns: var(--anchoMenuAbierto) auto; /* ampliamos el espacio asignado a la columna de menú, para que se muestre tanto el icono como el texto */
}

/* Clase para comprimiar el menú con javascript (admComunVx.js) */
.layout.cerrado {
    grid-template-columns: var(--anchoMenuCerrado) auto; /* reducimos el espacio asignado a la columna de menú, para que sólo se muestra el icono */
}

/* Clase para mostrar los elementos ocultos del menú cuando lo desplegamos con javascript (admComunVx.js) */
.layoutMenu .abrir {
    display: block;
}

/* Clase para ocultar los elementos ocultos del menú cuando lo plegamos con javascript (admComunVx.js)  */
.layoutMenu .cerrar {
    display: none;
}

.layoutMenu.menuOver {
    grid-column: 1 / 3; /* que ocupe las dos columnas  */
    grid-row: 1 / 2; /* una fila */
    z-index: 20; /* para que el menú quede por encima del contenido */
    inline-size: var(--anchoMenuAbierto); /* su ancho debe ser el del menú abierto */
    /* Limitamos el alto del menú al alto de la página, con scroll para el menú si es necesario */
    /*overflow-y: scroll;
    max-block-size: 100vh;*/
}

.layoutContenido.menuOver {
    grid-column: 1 / 3; /* que ocupe las dos columnas  */
    grid-row: 1 / 2; /* una fila */
}

.cubreContenido {
    inline-size: 100%;
    block-size: 100%;
    position: fixed;
    inset-block-start: 0; /* = top */
    inset-inline-start: var(--anchoMenuAbierto);
    background-color: var(--clFondoTranslucido);
    z-index: 900; /* Debe salir por encima de cualquier elemento, salvo del díalogo de reinicio de sesión (1001). */
    filter: opacity(0.5);
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* Menú lateral                                                                                                                                  
   Menú con un máximo de 2 niveles, con un icono para cada opción de menú. Los submenús se maquetan con el tag detail que no requiere de javascript.
   Los elementos de nivel 1 puede tener o no submenú.

 ¡¡¡¡MUY IMPORTANTE!!!!                                                                                                                        
 - En la maquetación del menú hay divs para los elementos de nivel 1 sin submenú y para las opciones de nivel 2 y el tag detail + summary (con flecha personalizada para desplegar) 
   para los elementos de nivel 1 con submenú.
 - Esta maquetación está hecha por ensayo y error en el tema de los márgenes y paddings para conseguir que los distintos elementos queden igual, sobre todo cuando se hace "hover"
   o la opción está seleccionada y resaltada con la clase menuActivo. 
 - Si se cambia cualquier margin o padding hay que tener en cuenta el hover, la clase menuActivo y probar a desplegar los menús.
 --------------------------------------------------------------------------------------------------------------------------------------------- */

/* Queremos que el menú siempre esté alineado con el principio de la página así que lo mostramos dentro de este div contenedor cuya posición está fija */
.menuFijo {
    /* para que todo el menú quede alineado al principio de la página aplicamos el position y el top*/
    position: sticky;
    inset-block-start: 0; /* top */
    /* como máximo debe ocupar el alto de pantalla, con scroll vertical si es necesario */
    /*overflow-y: scroll;
    max-block-size: 100vh;*/
}


/* Icono menú + Logo */
.menuTop {
    /* Voy a establecer un alto para este div y así poder establecer que los ítems de menú ocupan el resto del espacio disponible
       IMPORTANTE: Si se cambia el valor, hay que cambiarlo en el block-size de .menuItems
    */
    block-size: var(--altoMenuTop);
    display: flex; /* Necesario para maquetar el icono */
    align-items: center;
    justify-content: flex-start;
    column-gap: var(--espacioM);
    padding: var(--espacioS);
    /* para que el logo y el icono Menú queden alineados al principio de la página aplicamos el position y el top*/
    position: sticky;
    inset-block-start: 0; /* top */
}

.menuItems {
    /* El alto de este div será el 100% disponible excepto el alto de .menuTop
       IMPORTANTE: El alto restado al total disponible debe ser el mismo que el block-size de .menuTop
    */
    block-size: calc(100vh - var(--altoMenuTop));
    overflow-y: auto; /* Uso "auto" en vez de "scroll" porque scroll mostraba siempre la barra de scroll, aunque hubiera espacio de sobra y quedaba feo en "desktop" */
    scrollbar-width: thin;
}

/* Asigno un margin al elemento
   Posteriormente asignaré padding al summary para que todos los elementos (details y div de nivel 1 y 2) se comporten de la misma forma
*/
.menuDetails {
    margin-block: var(--espacioS);
}

/* Asignamos color a enlaces*/
.menuSummary, .menuA {
    color: var(--clLetraMuyClara);
}

    /* The standard list-style: none works on all browsers except Safari. There’s a proprietary -webkit- option in this case. */
    .menuSummary::-webkit-details-marker {
        display: none;
    }

/* Elemento desplegable */
.menuSummary {
    cursor: pointer; /* Cambiamos el cursor */
    display: flex; /* Necesario para maquetar el icono y la flecha personalizada */
    align-items: center;
    column-gap: var(--espacioS);
    list-style: none; /* Vamos  eliminar el marcador por defecto del summary y luego lo sustituimos por una flecha personalizada */
    padding: var(--espacioS);
}

    /* Para cambiar la flecha estándar indicativa de que el elemento elemento details (accordeon sin javascript) se puede desplegar
        Vamos a poner una "flechita" que rota al desplegar.
        Hemos eliminado la flecha por defecto en el estilo .menuSummary
     */
    .menuSummary::after {
        content: '';
        inline-size: 12px;
        block-size: 12px;
        background: url('/imagenes/iconMenu/desplegar.png');
        background-size: cover;
        transition: 0.2s;
    }

    /* Para rotar la flecha al desplegar */
    .menuDetails[open] > summary::after {
        transform: rotate(180deg);
    }

/* Maquetamos los elementos del menú que no son desplegables: elementos de nivel 1 sin opciones y opciones de nivel 2*/
.menuNivel1, .menuNivel2 {
    display: flex; /* Necesario para maquetar el icono */
    align-items: center;
    column-gap: var(--espacioS);
    padding: var(--espacioS);
    margin-block: var(--espacioS);
}

/* Los elementos de nivel 2 necesitan "indentación" */
.menuNivel2 {
    padding-inline-start: var(--espacioL);
}

/* Cuando un ítem de menú no está seleccionado, damos un pequeño efecto al icono, un poco más oscuro. 
   El icono es blanco.
*/
.menuNivel1 img, .menuNivel2 img, .menuSummary img {
    filter: invert(0.2);
}

/* Cuando un ítem de menú está seleccionado o hacemos hover, cambiamos el color de fondo y de la letra */
.menuActivo, .menuNivel1:hover, .menuNivel2:hover, .menuSummary:hover {
    background-color: var(--clResaltadoMenu); /* gris resaltado del menú */
    color: var(--clLetraMuyClara);
}

/* Cuando un ítem de menú está seleccionado o hacemos hover, cambiamos el color del enlace */
.menuActivo a, .menuNivel1:hover a, .menuNivel2:hover a, .menuSummary:hover {
    color: var(--clLetraMuyClara);
}

/* Cuando un ítem de menú está seleccionado o hacemos hover, eliminamos el efecto de filtro del icono */
.menuActivo img, .menuNivel1:hover img, .menuNivel2:hover img, .menuSummary:hover img {
    filter: none;
}

.headerDiv {
    display: flex; /* Necesario para maquetar el icono y la flecha personalizada */
    align-items: flex-start;
    column-gap: var(--espacioXS);
}

.headerDiv:hover{
    text-decoration: underline;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- 
  Maquetación interior de la página (= columnas)                                                                                                
  Por defecto, el contenido de la página se maquetará dentro del div .layoutMain
  Vamos a incluir la posibilidad de maquetar de forma estándar por columnas:

  | ------------------| --------------- |
  | Columna izquierda | Columna derecha |
  | ------------------| --------------- |
  | 50%               | 50%             |
  | 30%               | 70%             |
  | 70%               | 30%             |
  | ------------------| --------------- |
 --------------------------------------------------------------------------------------------------------------------------------------------- */

.layoutColumnas {
    display: grid;
    column-gap: var(--espacioXL); /* misma separación que el padding layoutMain para que sean homogéneos */
    row-gap: var(--espacioM); /* separación entre filas cuando el tamaño de pantalla es más pequeno y los divs se muestran hacia abajo */
    justify-items: stretch; /* para que se ajuste a todo el alto */
    align-items: stretch; /* para que se ajuste a todo el ancho */
}

.layoutCols50-50 {
    grid-template-columns: repeat(2,1fr); /* dos columnas del mismo ancho*/
}

.layoutCols70-30 {
    grid-template-columns: 70% auto; /* La primera columna ocupa el 70%. La segunda es auto para que ocupe el espacio restante que será un 30% menos el column-gap */
}

.layoutCols30-70 {
    grid-template-columns: 30% auto; /* La primera columna ocupa el 30%. La segunda es auto para que ocupe el espacio restante que será un 70% menos el column-gap */
}

.layoutCols240-auto {
    grid-template-columns: 240px auto; /* La primera columna ocupa 240px. La segunda es auto para que ocupe el espacio restante.*/
}
/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* Icono para ir al inicio de página                                                                                                             */
/* --------------------------------------------------------------------------------------------------------------------------------------------- */
.subir {
    background-color: var(--clFondoMuyClaro);
    inline-size: 100%;
    display: none;
    /* Rubén 28/07/25: A mi me ocurría justo al contrario, con ese borde es cuando me genera el espacio al hacer el scroll hasta el final, y si lo quito, se ve bien (probado tanto en Chrome como en Firefox). */
    /* IMPORTANTE: No borrar el borde. 
       Es un trucazo para que se maquete bien. Si se elimina, se genera un espacio bajo el contenido de la página al hacer scroll y llegar la final.
       No he conseguido eliminarlo ajustando clases en subir o subir_img.
       No ocurre en otros proyectos donde uso estas clases, aquí debe ser por la maquetación de los grids.
    */
    /*border: 1px solid var(--clBordeMuyClaro);*/
}

.subir_img {
    position: fixed;
    inset-block-end: 0;
    inset-inline-end: 1%;
    z-index: 100000; /* Es así de alto para que quede por encima de cualquier elemento de la página... */
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* Entrada + reinicio de sesión                                                                                                                  */
/* --------------------------------------------------------------------------------------------------------------------------------------------- */
.formSesion {
    inline-size: var(--anchoFormEntrada); /* Establecemos un ancho fijo que depende del tamaño del logo, para que la maquetación quede bien  */
}

/* Vamos poner un icono dentro de los inputs para el email y la contraseña. 
   Esta es la solución obtenida mediante chatGPT para que los iconos sigan visibles cuando tenemos guardado el usuario y la contraseña en el navegador.
   En este caso, los navegadores aplican estilos propios a los inputs que cambian el color de fondo y también ocultan el icono si se ponen como un background del input.
   Por eso hay que colocarlos con el div que contiene el input.
*/
.formSesion input[type=text], .formSesion input[type=password] {
    padding-inline-start: var(--espacioXL); /* espacio para el icono */ 
}

/* div que contiene  el input */
.divInputSesion {
    position: relative;
    display: inline-block;
    inline-size: 100%;
}

    .divInputSesion::before {
        content: "";
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: var(--espacioS);
        transform: translateY(-50%);
        block-size: var(--espacioM);
        inline-size: var(--espacioM);
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;
    }

    .divInputSesion.iconEmail::before {
        background-image: url('/imagenes/icoEmail.png');
    }

    .divInputSesion.iconPassword::before {
        background-image: url('/imagenes/icoClave.png');
    }


.divTranslucido {
    inline-size: 100%;
    block-size: 100%;
    position: fixed;
    inset-block-start: 0; /* = top */
    background-color: var(--clFondoTranslucido);
    z-index: 1000; /* Debe salir por encima de cualquier elemento, salvo del díalogo de reinicio de sesión (1001). */
    filter: opacity(0.5);
}

#controlSesionAviso {
    background-color: var(--clFondoMuyClaro);
    border-radius: var(--redondeado);
    box-shadow: var(--sombra);
    inline-size: 700px;
    block-size: auto;
    padding: var(--espacioXL);
    position: fixed;
    inset-inline-start: calc(50% - 350px); /* = left - Borde izquierdo a la mitad de la pantalla y retrocede la mitad del ancho a la izquierda. De esta forma queda centrado. */
    inset-block-start: 4rem; /* = top */
    z-index: 1001; /* Por encima de la pantalla opaca. (1000) */
}


/* ------------------------------------------------------------------------------------------------ */
/* Mensajes de información                                                                          */
/* ------------------------------------------------------------------------------------------------ */
.mensajeInfo {
    border-radius: var(--redondeado);
    border: 1px solid var(--clBordeMuyClaro);
    padding: var(--espacioS);
    display: flex; /* para maquetar el icono y el texto*/
    align-items: flex-start;
    column-gap: var(--espacioM);
}

.menVerde, .fondoVerde {
    background-color: var(--clFondoOK);
}

.menRojo, .campoErroneo {
    background-color: var(--clFondoKO);
}

.menAzul {
    background-color: var(--clFondoInfo);
}

.menAmarillo {
    background-color: var(--clFondoWarning);
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* Cuadrícula de items (por ejemplo: gestión de permisos de un usuario                                                                           */
/* --------------------------------------------------------------------------------------------------------------------------------------------- */
.cuadricula {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--espacioM);
}

/* Esta clase se puede usar con otra clase como recuadroSombra o cuadroColor1, que le aplica borde, sombra, fondo y padding */
.cuadricula_columna {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: var(--espacioS);
}

/* Esta clase se puede usar con otra clase como recuadroSombra o cuadroColor1, que le aplica borde, sombra, fondo y padding */
.cuadricula_fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: var(--espacioS);
}

.disponibilidad_fila {
    display: grid;
    grid-template-columns: auto auto 20px 20px;
    align-items: end;
    column-gap: var(--espacioM);
}



/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* Paginación (bloques)                                                                                                                          */
/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* Para que los enlaces a los bloques se distribuyan de forma uniforme con respecto al ancho de pantalla */
.paginacion {
    display: flex;
    justify-content: flex-start;
    column-gap: var(--espacioM);
}

    .paginacion a {
        background-color: var(--clFondoOscuro);
        border: 1px solid var(--clBordeOscuro);
        border-radius: var(--redondeado);
        color: var(--clLetraMuyClara);
        padding: 0.3rem 0.6rem;
    }

        .paginacion a:hover {
            background-color: var(--clDestacado);
            border-color: var(--clDestacado);
            text-decoration: none;
        }

.paginaActual {
    color: var(--clDestacado);
}

.paginaDeshabilitada {
    background-color: var(--clDeshabilitado);
    border: 1px solid var(--clBordeClaro);
    border-radius: var(--redondeado);
    color: var(--clLetraDeshabilitado);
    padding: 0.3rem 0.6rem;
}

/* ------------------------------------------------------------------------------------------------ */
/* Menú de opciones                                                                                 */
/* ------------------------------------------------------------------------------------------------ */
.menuOpciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacioL) var(--espacioM); /*row column*/
}

    .menuOpciones a {
        background-color: var(--clFondoMuyClaro);
        border: 1px solid var(--clBordeClaro);
        border-radius: var(--redondeado);
        padding: 0.5rem 1rem;
    }

        .menuOpciones a:hover {
            background-color: var(--clDestacado);
            color: var(--clLetraMuyClara);
        }

    .menuOpciones .actual {
        background-color: var(--clDestacado);
        border: 1px solid var(--clBordeClaro);
        border-radius: var(--redondeado);
        color: var(--clLetraMuyClara);
        padding: 0.5rem 1rem;
    }



/* Esta funcionalidad para cambiar los tamaños de la letra no se está usando, pero puede ser útil y dejo aquí las clases originales con un borde para 
   que se mire el CSS si se usa por si hay que remaquetar
*/
.tamLetra {
    display: inline-block;
    padding: 1px;
    margin: 0 5px;
    border: 1px solid blue;
}

    .tamLetra:not(.tam_activo) {
        cursor: pointer;
    }

    .tamLetra.tam_activo {
        text-decoration: underline;
    }

/* ------------------------------------------------------------------------------------------------ */
/* Listados (= tablas)                                                                              */
/* ------------------------------------------------------------------------------------------------ */
.listado {
    border: 1px solid var(--clBordeClaro);
    border-radius: var(--redondeadoL);
    border-spacing: 0; /* Elimina el espacio entre celdas. */
    box-shadow: var(--sombra);
    inline-size: 100%;
    overflow: hidden; /* Esta propiedad es necesaria para que el background-color no salga por debajo del borde redondeado */
}

/* Se aplica a las celdas de la cabecera de los listados. */
    .listado th {
        background-color: var(--clFondoMuyClaro); /* Esta propiedad es necesaria para que cuando el th quede fijo no sea transparente */
        border-block-end: 1px solid var(--clBordeClaro);
        text-align: start; /* Si no incluimos esta propiedad, los títulos se centran... */
        padding: 0.7rem 1rem; /* debe ser el mismo que el asignado al td*/
        /* Queremos que el título de la tabla que muestra claves y valores esté fijo. Para ello debemos aplicar estas dos propiedades. */
        position: sticky;
        inset-block-start: 0; /* top */
        /* Las siguientes propiedades hacen que no se partan las palabras en la cabecera salvo que ya no quede espacio. */
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
    }

/* Se aplica a las celdas de la cabecera de los listados con la clase "alinDcha". */
    .listado th.alinDcha {
        text-align: right; /* Si no incluimos esta propiedad, los títulos se alinean a la izquierda */
    }

/* Se le aplica a todas las celdas del contenido de los listados. */
    .listado td {
        background-color: var(--clFondoMuyClaro);
        border-block-start: 1px solid var(--clBordeClaro);
        padding: 0.7rem 1rem; /* Debe ser el mismo padding que en la cabecera del listado. */
        /* Las siguientes propiedades hacen que no se partan las palabras en la cabecera salvo que ya no quede espacio. */
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
        /*overflow-wrap: anywhere; /* para que textos muy largos mantengan el ancho asignado y que la tabla no se desmaquete */
    }

.listado tr.inactivo {
    background-color: var(--clInactivo);
}

/* Para marcar las empresas pendientes de activación */
.listado tr.pendiente td{
    background-color: var(--clFondoWarning);
}

/* Anchos para los th 
   En general, las columnas de las tabla se distribuyen libremente sin asignar anchos específicos.
   Sin embargo, en la pantalla "Recursos para realizar el servicio" (empSolicitudRecursosServicio.aspx) se pintan varias tablas con los mismas columnas.
   En este caso, hay que asignar anchos específicos a las columnas para que las columnas de todas las tablas queden iguales y no de sensación de maquetación caótica.
   Voy a crear específicamente los anchos que necesito para este caso.
*/
    .listado th.unCuarto {
        inline-size: 25%;
    }

    .listado th.unOctavo {
        inline-size: 12.5%;
    }


/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* Formularios                                                                                                                                   */
/* --------------------------------------------------------------------------------------------------------------------------------------------- */

/* Maquetación genérica de inpust, selects, textareas */
input, select, textarea {
    border-radius: var(--redondeado);
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}

select {
    background-color: var(--clFondoMuyClaro); /* Asigna color blanco al fondo de los desplegables, ya que en algunos navegadores es gris por defecto y da efecto de estar deshabilitado. */
}

/* Evitar padding adicional de inputs y botones (Firefox). */
button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: 0;
}

*:focus {
    outline: none; /* Elimina los efectos en el borde de los campos de formulario. */
}

/* Borde, ancho completo y padding a todos los campos */
select,
textarea,
input[type=tel],
input[type=text],
input[type=date],
input[type=time],
input[type=email],
input[type=number],
input[type=password],
input[type=url] {
    border: 1px solid var(--clBordeClaro);
    padding: var(--espacioXS);
    inline-size: 100%;
    height: var(--espacioXL);
}

input[type=file] {
    min-height: var(--espacioXL);
}

input.inputAutocomplete {
    height: calc(var(--espacioXL) - 2px); /* Le quitamos los pixeles de los bordes del div padre (.iconosAutocomplete), que es el que ahora hace de input. */
}

textarea {
    height: initial; /* Los textarea no llevarán una altura fija. */
    resize: vertical;
}

/* Se aplica un color personalizado al borde del elemento que tiene el foco. */
    select:focus,
    textarea:focus,
    input[type=tel]:focus,
    input[type=text]:not(.inputAutocomplete):focus,
    input[type=date]:focus,
    input[type=time]:focus,
    input[type=email]:focus,
    input[type=number]:focus,
    input[type=password]:focus,
    input[type=url]:focus,
    .iconosAutocomplete.inputTieneFoco {
        border: 1px solid var(--clDestacado);
        box-shadow: 0 0 1px 0 var(--clDestacado);
    }

/* Quita las flechas que salen para bajar y subir un día en inputs de tipo "date" en Chrome. */
input[type=date]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}

/* Las dos siguientes propiedades hace que los desplegables con "disabled" no muestren la flecha para mostrar las opciones, 
   lo que hace que se muestre como un campo de texto de solo lectura. */
    select:disabled {
        -moz-appearance: none; /* for Firefox */
        -webkit-appearance: none; /* for Chrome */
    }

input[readonly] {
    pointer-events: none;
}

/* Color de fondo para los inputs deshabilitados */
input:disabled, select:disabled, textarea:disabled {
    background-color: var(--clDeshabilitado);
    opacity: 1;
}

/* Imagen "cargando" mientras se cargan los resultados del desplegable. */
select.cargando {
    background: url("/imagenes/cargando.gif") no-repeat local calc(100% - 20px); /* Deja un espacio de 20px a la derecha. "local" es la propiedad "background-attachment" y es necesario para que se vea en Edge. */
    background-color: var(--clFondoMuyClaro); /* Fondo blanco para el campo. Si no se indica, el fondo del desplegable será como el fondo de la página, en este caso, gris  */
}

label, .label {
    font-weight: bold;
    /*font-size: var(--letraS);*/ 
}

.boton {
    background-color: var(--clFondoOscuro);
    border: 1px solid var(--clBordeOscuro);
    color: var(--clLetraMuyClara);
    padding: 0.3rem 1rem;
    text-align: center;
    cursor: pointer;
    /* para que IOS respete el estilo, de formas cuadradas, no redondeadas
   IMPORTANTE: No se puede aplicar a checkbox o radio porque no se pinta el marcado del checbox en Ipad o navegador nativo móvil de Samsung por ejemplo.
   */
    -webkit-border-radius: var(--redondeado);
    -moz-border-radius: var(--redondeado);
    border-radius: var(--redondeado);
    -webkit-appearance: none;
    -moz-appearance: none;
}

    .boton:hover:not(.botonDeshabilitado) {
        /* Al pasar el ratón por encima de un botón principal, se intercambian los colores del fondo y el texto/borde. */
        background-color: var(--clDestacado);
        border-color: var(--clDestacado);
        box-shadow: var(--sombra);
        text-decoration: none;
    }


.botonDeshabilitado {
    /* Los botones que están deshabilitados son de color gris y con el puntero por defecto. */
    background-color: var(--clDeshabilitado);
    border: 1px solid var(--clBordeClaro);
    color: var(--clLetraDeshabilitado);
    cursor: default;
    pointer-events: none; /* Esto evita que puedas hacer click en el botón (y ejecutar su acción) mientras esté deshabilitado. */
}

    .botonDeshabilitado a, a.botonDeshabilitado {
        pointer-events: none; /* Anula el link del botón. */
    }

a.boton:not(.oculto) {
    /* Si queremos construir un enlace con forma de botón, para que la altura sea la misma que un botón "input", debemos añadirle estas propiedades al enlace. */
    display: inline-block;
}

/* Para el div que contiene el formulario.
   Dentro de este div, se debe anadir un div con class='filaForm' para cada fila del formulario
*/
.apartadoForm {
    background-color: var(--clFondoMuyClaro);
    border: 1px solid var(--clBordeClaro);
    border-radius: var(--redondeadoL);
    margin-block-end: var(--espacioM); /* equivalente a  margenInfM, pero lo añado aquí para simplificar la creación de formularios  */
    overflow: hidden;
    padding-inline: var(--espacioM); /* No añado padding-block porque filaForm separa las filas en vertical */
    box-shadow: var(--sombra);
}

/* Fila de un formulario */
.filaForm {
    margin-block: var(--espacioL); /*1.5rem;*/ /* para separar las filas de un formulario. Equivalente a margenInfL, lo añado aquí para simplificar la creación de formularios */
    display: flex; /* para maquetar los inputs que están en una misma fila*/
    /*IMPORTANTE
      Si se cambia el tamaño de este column-gap hay que aplicar el cambio en las clases relativas a anchos de campos: campoCompleto, 
      campoMitad, campoUnCuarto, campoUnOctavo, campoTresCuartos,  
      campoUnTercio, campoUnSexto, campoDosTercios. 
      En cada una de estas clases se explica el cambio a realizar.
    */
    column-gap: var(--espacioM); /*1rem;*/
    align-items: stretch; /* Queremos que ocupe todo el alto, porque en una fila hay varios campos que pueden tener altos diferentes */
}

/* Campo de un formulario (sin el ancho) */
.campoForm {
    display: flex;
    flex-direction: column;
    row-gap: 0.2rem;
    justify-content: end; /* Para que los inputs queden alineados por abajo. Sobre el input puede haber de forma opcional label, mensaje informativo, mensaje de error*/
}


/* Grid para el input decimal  
   Cuatro columnas: parte entera, separador decimal, parte decimal y caracter final (por ejemplo €) 
*/
.campoDecimal {
    display: grid;
    grid-template-columns: auto min-content 40px min-content; /* parte entera + separador decimal + parte decimal + caracter final (€)*/
    grid-column-gap: var(--espacioS); 
    align-items: center;
}

/* Grid para el campo fechaHora
   Tres columnas: Fecha, hora y minutos
*/
.campoFechaHora {
    display: grid;
    grid-template-columns: auto 60px min-content 60px; /* fecha + hora + : + minutos */
    grid-column-gap: var(--espacioXS);
    align-items: center;
}

/* Fecha con desplegables: día, mes y año */
.campoFechaDesplegable {
    display: flex;
    column-gap: var(--espacioS);
    justify-content: space-between; /* para que los tres desplegables se distribuyan uniformemente, una vez aplicado el column-gap */
}

/* Grid para el campo Hora
   Tres columnas: hora, separador y minutos
*/
.campoHora {
    display: grid;
    grid-template-columns: auto min-content auto; /* fecha + hora + : + minutos */
    grid-column-gap: var(--espacioXS);
    align-items: center;
}


/* Campos de tipo radio y checkbox */

/*
!!!!!NO BORRAR TODAVÍA!!!!!!
.campoRadio_original {
    /* Para maquetar los distintos elementos del radio button entre sí/
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* alineamos hacia arriba para conservar la maquetación si algún label ocupa más de una fila /
    column-gap: var(--espacioS);
    justify-content: space-between; /* para que elementos del radio button se distribuyan uniformemente, una vez aplicado el column-gap /
}*/

.campoRadioChk {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    /* NOTA: No asignamos row-gap porque la separación se va a establecer con el block-size de .campoRadioChk div, que debe indicarse para que el
       radio button tenga el mismo alto que el resto de inputs.
    */
    column-gap: var(--espacioM);
}

    .campoRadioChk div {
        block-size: var(--espacioXL);
        /* Para maquetar el elemento radio con respecto a su label*/
        display: flex;
        align-items: flex-start;
        column-gap: var(--espacioXS);
    }

/* En los campos de tipo checkbox y label aplicamos este estilo para indicar que al pinchar el label se marcará / desmarcará la opción seleccionada */
    .campoRadioChk label {
        cursor: pointer;
    }

/* Maquetación especial para los días de la semana de la disponibilidad 
Para mostrar esta maquetación hay que incluir el parámetro claseContenedor:="diasSemana" en la función pintaCampoListaCheckbox  */
.diasSemana .campoRadioChk {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacioS) var(--espacioS); /* Primer valor es el gap entre filas, y el segundo es entre columnas */
    justify-content: space-between; /* para que ocupe todo el ancho del div */
    /*border: 1px solid blue;*/
}

    .diasSemana .campoRadioChk div {
        /* Para maquetar el elemento radio con respecto a su label*/
        display: flex;
        /* column: para que label y checkbox queden uno bajo otro / reverse para que el label quede encima, ya que en código se pinta después. */
        flex-direction: column-reverse;
        row-gap: var(--espacioXS);
        align-items: center; /* para que el label quede centrado con respecto al checkbox*/
    }

/* Maquetación necesaria para que si un el label del checkbox ocupa varias líneas, el checkbox crezca la altura necesaria para mostrar todo el texto, 
sin pisar el resto de checkboxes. Lo ideal sería usar "min-block-size: var(--espacioXL);" en lugar de "block-size: var(--espacioXL);" en 
las propiedades de ".campoRadioChk div", pero por temor a desmaquetar en algún sitio que no controle, ya que se usa en varios sitios, 
solamente lo aplicaré en el formulario de participantes, que es donde he visto el bug (Rubén).
*/
#formParticipantes .campoRadioChk div {
    min-block-size: var(--espacioXL);
    block-size: auto;
}

/* Clases para el icono mostrar / ocultar en un campo de tipo "password". 
  Estas clases las añade automáticamente la función pintaCampoFormulario si tipoInput = "password" y mostrarOcultarPassword = True  
*/
.campoClave-container {
    position: relative;
}

.campoClave-toggle {
    position: absolute;
    right: var(--espacioS);
    transform: translateY(-50%);
    cursor: pointer;
}

/* Clases para el toggle Sí/No   
   Hecho con ChatGPT. Explicación:

   - display: grid estructura el espacio.
   - .thumb::before simula el pulgar deslizante con un fondo móvil.
   - Las transiciones (transform, opacity) crean el efecto visual de deslizamiento.

    HTML:
    <input type="checkbox"> es el interruptor real. Se oculta visualmente.
    <label> hace de contenedor interactivo. Se conecta al checkbox por for="switch".

    Dentro del label hay 3 hijos:
    .thumb: es la "pastilla" deslizante (el fondo que se mueve).
    .text.no y .text.si: son los textos "No" y "Sí" que aparecen en cada lado.

    CSS:
    .toggle - Define el tamaño del interruptor: el ancho es el doble del "thumb", para poder desplazarse de un lado al otro.
    .toggle label - Usa display: grid para dividir el botón en dos columnas (izquierda/derecha).
                Esto permite ubicar el thumb y los textos de forma natural en filas y columnas, sin position: absolute.
    .thumb - La parte móvil .thumb ocupa las dos columnas completas, pero:
	 Su pseudoelemento ::before (que actúa como el "pulgar" real) tiene un ancho del 50%, es decir, una columna.
	 Por defecto está en la izquierda (justify-content: flex-start).

    Al marcar el checkbox ("#switch:checked + label .thumb"  y  "#switch:checked + label .thumb::before")
         El .thumb se desplaza un 50% del ancho total (justo una columna), moviendo el pulgar a la derecha.
         Cambia el color de fondo del ::before a verde.

    Textos "Sí" y "No"
	Por defecto: "No" se muestra en la columna izquierda. "Sí" está oculto.
	Cuando el interruptor está activo: Se oculta el "No" (opacity: 0) y se muestra el "Sí" (opacity: 1).
	Ambos textos están centrados vertical y horizontalmente con flex.
*/
.campoSiNo-toggle {
    inline-size: calc(2 * 40px);
    block-size: var(--espacioXL);
    display: inline-block;
    user-select: none;
}

    .campoSiNo-toggle input {
        display: none;
    }

    .campoSiNo-toggle label {
        display: grid;
        grid-template-columns: 1fr 1fr;
        block-size: 100%;
        inline-size: 100%;
        border: 1px solid var(--clBordeClaro);
        border-radius: var(--redondeado);
        background: var(--clFondoMuyClaro);
        /*box-sizing: border-box;*/
        cursor: pointer;
        position: relative;
        overflow: hidden;
        font-weight: normal;
        color: var(--clLetra);
    }

/* Capa de fondo deslizante */
.campoSiNo-thumb {
    grid-column: 1 / span 2;
    grid-row: 1;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    transition: transform 0.3s ease;
    z-index: 0;
}

    .campoSiNo-thumb::before {
        content: "";
        width: 50%;
        background: var(--clFondoPagina);
        border-radius: var(--redondeado);
    }

/* Textos estáticos */
.campoSiNo-text {
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: opacity 0.3s ease;
}

    .campoSiNo-text.no {
        grid-column: 1;
        opacity: 1;
    }

    .campoSiNo-text.si {
        grid-column: 2;
        opacity: 0;
    }

/* Estado checked: mover el fondo y cambiar color */
.campoSiNo-switch:checked + label .campoSiNo-thumb {
    transform: translateX(50%);
}

.campoSiNo-switch:checked + label .campoSiNo-thumb::before {
    background: var(--clDestacado);
}

.campoSiNo-switch:checked + label .campoSiNo-text.si {
    opacity: 1;
    color: var(--clLetraMuyClara);
}

.campoSiNo-switch:checked + label .campoSiNo-text.no {
    opacity: 0;
}

/* Si el toggle está deshabilitado debemos aplicar estilos adicionales para lograr el aspecto deshabilitado */
.campoSiNo-deshabilitado label {
    cursor: default; /* eliminamos el cursor */
}

.campoSiNo-deshabilitado .campoSiNo-switch:checked + label .campoSiNo-thumb::before {
    background: var(--clFondoPagina); /* en vez de un fondo destacado, ponemos un fondo neutro */
}

.campoSiNo-deshabilitado .campoSiNo-switch:checked + label .campoSiNo-text.si {
    color: var(--clLetra); /* adaptamos el color de la letra al fondo neutro */
}

/* Campo del formulario que ocupa todo el ancho disponible */
.campoCompleto {
    inline-size: 100%; 
}

/* Campo que ocupa el 50% del ancho disponible. 
   Debido a la maquetación de filaForm a este ancho debemos descontarle el espacio proporcional del column-gap, que se reparte entre los campos.
   campoMitad _ campoMitad
   El ancho sería (100% / 2) - (column-gap / 2). En este caso 1 rem / 2 = 0.5 rem
     */
.campoMitad {
    inline-size: calc(calc(100% / 2) - 0.5rem);
}

/* Campo que ocupa un cuarto del ancho disponible. 
   Debido a la maquetación de filaForm a este ancho debemos descontarle el espacio proporcional de los column-gaps, que se reparten entre los campos.
   campoUnCuarto _ campoUnCuarto _ campoUnCuarto _ campoUnCuarto
   El ancho sería (100% / 4) - (3*column-gap / 4). En este caso 3*1 rem / 4 = 0.75 rem
*/
.campoUnCuarto {
    inline-size: calc(calc(100% / 4) - 0.75rem);
}

/* Campo que ocupa un octavo del ancho disponible. 
   Debido a la maquetación de filaForm a este ancho debemos descontarle el espacio proporcional de los column-gaps, que se reparten entre los campos.
   campoUnOctavo _ campoUnOctavo _ campoUnOctavo _ campoUnOctavo _ campoUnOctavo _ campoUnOctavo _ campoUnOctavo _ campoUnOctavo
   El ancho sería (100% / 8) - (7*column-gap / 8). En este caso 7*1 rem / 8 = 0.88 rem
*/
.campoUnOctavo {
    inline-size: calc(calc(100% / 8) - 0.88rem);
}

/* Campo que ocupa tres cuartos del ancho disponible. 
   Debido a la maquetación de filaForm a este ancho debemos descontarle el espacio proporcional de los column-gaps, que se reparten entre los campos.
   campoTresCuarto _ campoUnCuarto
*/
.campoTresCuartos {
    inline-size: calc(75% - 0.33rem);
}

/* Campo que ocupa un tercio del ancho disponible. 
   Debido a la maquetación de filaForm a este ancho debemos descontarle el espacio proporcional de los column-gaps, que se reparten entre los campos.
   campoUnTercio _ campoUnTercio _ campoUnTercio
   El ancho sería (100% / 3) - (2*column-gap / 3). En este caso 2*1rem / 3 = 0.67 rem
*/
.campoUnTercio {
    inline-size: calc(calc(100% / 3) - 0.67rem);
}

/* Campo que ocupa dos tercios del ancho disponible. 
   Debido a la maquetación de filaForm a este ancho debemos descontarle el espacio proporcional de los column-gaps, que se reparten entre los campos.
   campoDosTercio _ campoUnTercio
*/
.campoDosTercios {
    /*inline-size: calc(calc(200% / 3) - 0.33rem);*/
    inline-size: calc(66.7% - 0.33rem);
}

/* Campo que ocupa un sexto del ancho disponible. 
   Debido a la maquetación de filaForm a este ancho debemos descontarle el espacio proporcional de los column-gaps, que se reparten entre los campos.
   campoUnSexto _ campoUnSexto _ campoUnSexto _ campoUnSexto _ campoUnSexto _ campoUnSexto
   El ancho sería (100% / 6) - (5*column-gap / 6). En este caso 5*1 rem / 6 = 0.84 rem
*/
.campoUnSexto {
    inline-size: calc(calc(100% / 6) - 0.84rem);
}

/* Se comentan las clases para textarea ya que ahora se configura su altura al definir el campo en el html con el parámetro "rows". Para ello se usa GGTextAreaNumFilas. */
/* Alto de un textarea pequeño */
/*.textareaS {
    min-block-size: 4rem;
}*/

/* Alto de un textarea grande */
/*.textareaL {
    min-block-size: 8rem;
}*/

/* Para mostrar símbolos a la derecha de los input. 
   Estaba así remaquetado originalmente, y funciona así que no lo he cambiado.
*/
.simboloInput {
    position: relative;
    font-weight: normal;
}

    .simboloInput:after {
        position: absolute;
        content: attr(data-simbolo);
        inset-block-start: 0.7rem; /* = top */
        inset-inline-end: var(--espacioXS); /* = right */
    }

/* Para indicar que un campo está inactivo */
.inactivo {
    opacity: 0.6;
}

/* Para indicar que una opción de un select está inactiva */
option.inactivo {
    color: rgba(160, 160, 160, 1);
}

/* -------------------------------------------------------------------------------------------------------------------------- */
/* Autocomplete                                                                                                               */
/* ¡¡¡MUY IMPORTANTE!!!: Los nombres de las clases del autocompletable no se pueden cambiar porque se usan en autocomplete.js */
/* -------------------------------------------------------------------------------------------------------------------------- */
/* Permitir scroll en los autocompletables cuando hay muchos resultados. 
   Esta clase sobreescribe al CSS del jquery-ui
*/
.ui-autocomplete {
    /*max-inline-size: 300px;*/
    overflow-y: auto;
    overflow-x: hidden; /* prevent horizontal scrollbar */
}

/* El div se pone para que los iconos salgan siempre en la misma posición auque no tenga un label
 * Esta regla hace que ese div sea Relative para poner los icono en Absolute
*/
.wrapperAutocomplete > div {
    position: relative;
}

/* Maquetación con los iconos del autocomplete que iran alineados a la derecha (cargando y limpiar) 
   La clase iconosAutocomplete es un div maquetado con grid que va a contener al input y a los iconos. 
   Este div tiene un borde para simular el input, que rodea al input y a los iconos, lo que hace que parezca que los iconos están dentro del input, alineados a la derecha
*/
.iconosAutocomplete {
    align-items: center;
    background: var(--clFondoMuyClaro);
    border: 1px solid var(--clBordeClaro);
    border-radius: var(--redondeado);
    display: grid;
    grid-template-columns: 1fr auto;
    inline-size: 100%;
    padding: 0;
}

    /* eliminamos el borde del input*/
    .iconosAutocomplete input {
        border: none;
        outline: none;
    }

    /* maquetación del botón que contiene el icono */
    .iconosAutocomplete .iconos {
        padding: 0;
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

        /* No hay padding ni column-gap en iconosAutocomplete para que no haya márgenes cuando el input tiene el foco y se resalta.
           Para que el icono no quede pegado al input o al borde, le añadimos un pequeño margen.
        */
        .iconosAutocomplete .iconos img {
            margin-inline: var(--espacioXS);
        }

/*.iconosAutocomplete {
    position: absolute;
    inset-block-start: var(--espacioS); /* = top /
    inset-inline-end: var(--espacioS); /* = right /
}*/

    .iconosAutocomplete .imagenLimpiar {
        cursor: pointer;
    }

/* Icono que irá a la izquierda de una opción del autocomplete. Esto se usa ahora mismo en el buscador inteligente 
   ¡¡¡¡Esto no le he probado en la nueva maquetación porque en este proyecto no hay autocomplete con iconos. 
       Si se usan habrá que remaquetarlos. Le pongo el borde para que se note y lo busquemos en la hoja de estilo !!! 
*/
.iconoLeftAutocomplete {
    background-position: left;
    float: left;
    margin-inline-end: 4px;
    max-inline-size: 100%;
    max-block-size: 100%;
    border: 4px solid black; /* borde llamativo para que se remaquete esta clase si hace falta */
}

/* ------------------------------------------------------------------------------------------------ */
/* Fortaleza contraseña                                                                             */
/* ------------------------------------------------------------------------------------------------ */
#barraProgresoContrasena {
    /*border: 1px solid var(--clBordeClaro);*/
    /*border-block-start: 0;*/
    block-size: 8px;
    padding: 1px;
}

    #barraProgresoContrasena > div {
        background-color: var(--clLetraOK);
        inline-size: 0;
        block-size: 100%;
    }

/* Imagen "cargando" mientras se actualiza un contenido cargado por AJAX. */
/* Se usa en la página de entrada y en el cambio de contraseña */
.cargando {
    background: url("/imagenes/cargando.gif") no-repeat local; /* "local" es la propiedad "background-attachment" y es necesario para que se vea en Edge. */
    background-position: bottom;
    min-height: 16px; /* Se le da una altura mínima para que salga en el contenedor cuando este no tiene contenido aún. Altura del icono. */
    min-width: 26px; /* Se le da una anchura mínima para que salga en el contenedor cuando este no tiene contenido aún. */
    display: inline-block;
}

.divAccionesForm {
    display: flex;
    align-items: center;
}

.iconCargando {
    display: inline-block;
    /* Le damos un tamaño fijo para que aunque el icono esté oculto, el espacio lo ocupe, para que al mostrarlo, no se muevan el resto de elementos que haya alineados. */
    height: 16px; /* Altura del icono */
    width: 26px; 
}

/* Imagen "cargando" mientras se actualiza un contenido cargado por AJAX. */
/* ¡IMPORTANTE! Se usa en sustitución de la clase "cargando", por ahora cuando va asociado a un botón dentro de un div con la clase "divAccionesForm" que usa display flex.
   El icono debe llevar también la clase "iconCargando", y solo se añadirá "cargandoFlex" mientras queramos mostrarlo en pantalla.
*/
.cargandoFlex {
    background: url("/imagenes/cargando.gif") no-repeat local; /* "local" es la propiedad "background-attachment" y es necesario para que se vea en Edge. */
    background-position: center;
}

/* Para marcar condiciones que se cumplen */
.textoVerde {
    color: var(--clLetraOK);
}

/* Texto con la descripción del error al validar los formularios*/
.textoCampoErroneo {
    color: red;
    font-size: var(--letraS); 
}


/* Imagen "cargando" mientras se cargan los resultados del autocomplete. 
   Esta clase ya no se añade en autocomplete.js. Esta comentado, lo dejo aquí comentado por si acaso, pero parece que ya no es necesaria. 
*/
/*.inputAutocomplete.cargando {
    padding-right: 26px; /* Para que el texto no pise la imagen "cargando" #/
}*/


/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* Ficha de entidad o recurso                                                                                                                    */
/* --------------------------------------------------------------------------------------------------------------------------------------------- */

/* Para maquetar un icono que acompaña a un texto  */
.iconoTexto {
    display: flex;
    column-gap: var(--espacioS);
    align-items: center;
}

.recursoChkNombre {
    display: grid;
    grid-template-columns: min-content auto;
    column-gap: var(--espacioS); 
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* Conversaciones                                                                                                                                */
/* --------------------------------------------------------------------------------------------------------------------------------------------- */

#chatMensajes {
    display: flex;
    flex-direction: column; /* Con esto se van colocando los mensajes uno debajo de otro. */
    gap: var(--espacioM);
    padding: var(--espacioS);
}

#mensajesConvServRec #chatMensajes {
    padding: 0; /* Vamos a quitar el padding del chat cuando los mostramos en columnas de contenido, por ser más estrecho, y para que el espacio con el div superior se vea equilibrado con el resto de espacios. */
}

.chatMensaje {
    max-width: 70%;
    padding: var(--espacioM);
    border-radius: var(--espacioM);
}

.chatEmisor {
    align-self: flex-end;
    background-color: var(--clFondoOK);
    border-top-right-radius: 0;
}

.chatReceptor {
    align-self: flex-start;
    background-color: var(--clFondoMuyClaro);
    border-top-left-radius: 0;
}

.chatTexto {
    white-space: pre-wrap; /* Respeta saltos de línea */
    word-wrap: break-word; /* Si una palabra no cabe cogiendo todo el ancho posible, la parte en dos */
}

.chatInfo {
    display: flex;
    flex-direction: column;
    gap: var(--espacioXS); /* Distancia entre elementos de info. */
    font-size: var(--letraS);
    align-items: flex-end; /* Alinea la info a la derecha. */
    margin-top: var(--espacioM);
}

.iconMensajesInternos {
    margin: 0px 3px -2px 0;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* Otros estilos                                                                                                                                 */
/* --------------------------------------------------------------------------------------------------------------------------------------------- */

/*Formulario para que una empresa cree una cuenta en el sistema. Queremos que ocupe el 90% de la pantalla, hasta un máximo de 1000px */
.formAlta{
    inline-size: 90%;
    max-inline-size: 1000px;
}

/* Se debe aplicar a div contenedores para darle el mismo aspecto que los formularios y tablas en cuando a fondo, borde y sombra */
.recuadroSombra {
    background-color: var(--clFondoMuyClaro);
    border: 1px solid var(--clBordeClaro);
    border-radius: var(--redondeadoL);
    box-shadow: var(--sombra);
    padding: var(--espacioM);
}

.cuadroColor1 {
    background-color: var(--clFondoColor1);
    border: 1px solid var(--clBordeClaro);
    padding: var(--espacioM);
}

/* Similar al borde del th de listado */
.bordeInf {
    border-block-end: 2px solid var(--clBordeClaro);
    padding-block-end: var(--espacioS);
}

/* Similar al borde del th de listado */
.bordeSup {
    border-block-start: 2px solid var(--clBordeClaro);
    padding-block-start: var(--espacioS);
}

.bordeRecuadro {
    border: 2px solid var(--clBordeOscuro) !important;
}

tr.horaNoEnPunto td {
    border-top: none;
}

/* Cómo se hace la letra proporcional

   - Paso 1: Establecemos el font-size con el tamaño máximo deseado en rem y comprobamos en las herramientas de desarrollador el tamaño calculado en px de la letra. 
   Por ejemplo: font-size: 4rem; equivale a 64px.
   
   - Paso 2: Aplicamos la función calc(1rem + Xvw), modificando el número delante de vw hasta que obtengamos el tamaño deseado en px (comprobando como hemos hecho antes).
   Por ejemplo: font-size: calc(1rem + 2.5vw); equivale a 64px.

   - Paso 3. Aplicamos clamp para establecer el tamaño dentro un rango, es decir, para controlar que la letra no se haga ni muy grande ni muy pequeña.
   En este caso el máximo son los 4rem establecidos desde el principio. El rango inferior lo establecemos probando según el diseño de nuestra web hasta que nos guste
   como queda en ancho de pantalla más pequeño. En este caso hemos probado hasta un ancho de pantalla de 360 px.
   Finalmente, nuestra letra será: font-size: clamp(2.8rem, calc(1rem + 2.5vw), 4rem);

*/
.letraXL, h1 {
    /* letra proporcional */
    font-size: clamp(1.5rem, 0.75rem + 1.5vw, 1.8rem);
}

.letraL, h2 {
    /* letra proporcional */
    font-size: clamp(1.2rem, 0.75rem + 1.5vw, 1.4rem);
}

/* tamaño de la letra por defecto*/
.letraM, h3 {
    font-size: var(--letraM);
}

.letraS {
    font-size: var(--letraS);
}

.letraXS{
    font-size: 0.75rem;
}

.conCursor{
    cursor: pointer; 
}

.negrita{
    font-weight: bold;
}

.sinNegrita{
    font-weight: normal;
}

.centradoHV{
    display:grid;
    place-items: center;
}

.centradoH{
    text-align: center;
}

.centradoV {
    display: inline-block;
    vertical-align: middle;
}

.alineadoSup {
    vertical-align: top;
}

.alinDcha{
    text-align: end;
}

.alinIzda{
    text-align: start;
}

.sinSalto {
    white-space: nowrap;
}

/* Es necesario volver a especificar el estilo para la clase 'sinSalto' dentro de .listado para que tenga prioridad en los td y th. */
.listado .sinSalto {
    white-space: nowrap;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* Márgenes                                                                                                                                      */
/* --------------------------------------------------------------------------------------------------------------------------------------------- */
.margenXL {
    margin-block: var(--espacioXL);
}
.margenL {
    margin-block: var(--espacioL);
}
.margenM {
    margin-block: var(--espacioM);
}
.margenS {
    margin-block: var(--espacioS);
}
.margenXS {
    margin-block: var(--espacioXS);
}

.margenSupXL {
    margin-block-start: var(--espacioXL);
}
.margenSupL {
    margin-block-start: var(--espacioL);
}
.margenSupM {
    margin-block-start: var(--espacioM);
}
.margenSupS {
    margin-block-start: var(--espacioS);
}
.margenSupXS {
    margin-block-start: var(--espacioXS);
}

.margenInfXL {
    margin-block-end: var(--espacioXL);
}
.margenInfL {
    margin-block-end: var(--espacioL);
}
.margenInfM {
    margin-block-end: var(--espacioM);
}
.margenInfS {
    margin-block-end: var(--espacioS);
}
.margenInfXS {
    margin-block-end: var(--espacioXS);
}

.margenIzqXL {
    margin-inline-start: var(--espacioXL);
}
.margenIzqL {
    margin-inline-start: var(--espacioL);
}
.margenIzqM {
    margin-inline-start: var(--espacioM);
}
.margenIzqS {
    margin-inline-start: var(--espacioS);
}
.margenIzqXS {
    margin-inline-start: var(--espacioXS);
}

.margenDerXL {
    margin-inline-end: var(--espacioXL);
}
.margenDerL {
    margin-inline-end: var(--espacioL);
}
.margenDerM {
    margin-inline-end: var(--espacioM);
}
.margenDerS {
    margin-inline-end: var(--espacioS);
}
.margenDerXS {
    margin-inline-end: var(--espacioXS);
}

.paddingS {
    padding: var(--espacioS);
}
.paddingXL {
    padding: var(--espacioXL);
}

.animada {
    /* 
        https://www.w3schools.com/css/css3_transitions.asp
        La propiedad transition hace que una modificacion al elemento que la lleva se realice de forma animada.
        El valor all se refiere a que transformaciones se aplica la animacion. Si se pusiera width solo se animaria la propiedad width del elemento.
        transition: all 0.5s ease;
    */
    /*-webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;*/
    transition: all 0.2s linear;
}

.oculto {
    display: none;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* Calendario *** temporal                                                                                                                       */
/* --------------------------------------------------------------------------------------------------------------------------------------------- */

.mesCal {
    text-align: center;
    /*flex: 1; */
    flex: 1 1 100%; /* Para que todos los meses se repartan el mismo ancho. El 100% es para que se reparta por todo el ancho que tenga */
    /*max-width: 100%;*/
    padding-inline: 5px;
}

.cabeceraCal {
    display: grid;
    grid-template-columns: auto 1fr auto;
}

.nombreMesCal {
    font-weight: bold;
    padding: 0.2rem;
}

.diasCal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-top: 10px;
    align-items: baseline; /* Con esto conseguimos que siempre estén los días alineados, ya que al cambiar el grosor del borde si es un día con un estado concreto, puede ser que no consigamos alinearlo manualmente. */
}

.diaCal {
    padding: 10px 0px; /* Sólo le obligo el padding vertical porque el horizontal va a ocupar todo el espacio que tenga */
    white-space: nowrap;
    background-color: white;
    border: 1px solid #ddd;
}

.diaSemanaCal {
    /* Es importante que vaya después de .diaCal, para que se apliquen las propiedades. */
    font-weight: bold;
    background-color: #e9e9e9;
}

.diaPasado {
    /* Es importante que vaya después de .diaCal, para que se apliquen las propiedades. */
    background-color: #f1f1f1;
}

.diaOtroMesCal {
    /* Es importante que vaya después de .diaCal, para que se apliquen las propiedades. */
    color: #bbb;
    background-color: #f9f9f9;
}

.diaHoyCal {
    text-decoration: underline;
}

.diaSeleccionable {
    cursor: pointer;
}

.diaSeleccionado {
    font-weight: bold;
}
.diaNoDefinido, .listado td.diaNoDefinido {
    background-color: var(--clNoDefinido);
}

.diaTotalDisponible, .listado td.diaTotalDisponible {
    background-color: var(--clTotalDispo);
}

.diaParcialDisponible, .listado td.diaParcialDisponible {
    background-color: var(--clParcialDispo);
}

.diaTotalOcupado, .listado td.diaTotalOcupado {
    background-color: var(--clTotalOcupado);
}

.diaCerrado, .listado td.diaCerrado {
    background-color: var(--clCerrado);
}

.diaColorCalendario1, .listado td.diaColorCalendario1 {
    background-color: var(--clColorCalendario1);
}

.diaColorCalendario2, .listado td.diaColorCalendario2 {
    background-color: var(--clColorCalendario2);
}

.diaColorCalendario3, .listado td.diaColorCalendario3 {
    background-color: var(--clColorCalendario3);
}

.diaColorCalendario4, .listado td.diaColorCalendario4 {
    background-color: var(--clColorCalendario4);
}

.diaColorCalendario5, .listado td.diaColorCalendario5 {
    background-color: var(--clColorCalendario5);
}

.diaColorCalendario6, .listado td.diaColorCalendario6 {
    background-color: var(--clColorCalendario6);
}

.diaColorCalendario7, .listado td.diaColorCalendario7 {
    background-color: var(--clColorCalendario7);
}

.diaColorCalendario8, .listado td.diaColorCalendario8 {
    background-color: var(--clColorCalendario8);
}

.diaColorCalendario9, .listado td.diaColorCalendario9 {
    background-color: var(--clColorCalendario9);
}

.diaColorCalendario10, .listado td.diaColorCalendario10 {
    background-color: var(--clColorCalendario10);
}

.colorLeyendaCal {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 6px;
    border: 1px solid #000;
    vertical-align: middle;
    margin-bottom: 2px;
}

.navegacionAgenda {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}


/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* Media queries                                                                                                                                 */
/* --------------------------------------------------------------------------------------------------------------------------------------------- */


    /*MUY IMPORTANTE: A partir de este tamaño mostramos el menú móvil
  Este valor se utiliza  en el javascript /comun/javascript/admComunVx.js para abrir / cerrar el menú, en la variable global anchoMenuMovil 
  SI se modifica el ancho a partir del que se muestra el menú en versión móvil HAY QUE cambiarlo en el javascript.
*/
    @media screen and (max-width: 1000px) {
        /****** Clases para cerrar el menú ********** */
        .layout {
            grid-template-columns: var(--anchoMenuCerrado) auto; /* reducimos el espacio asignado a la columna de menú, para que sólo se muestre el icono */
        }

        /* Ocultamos el logo */
        .logo {
            display: none;
        }

        /* Ocultamos los textos del menú para que sólo se muestren los iconos */
        .menuNivel1 span, .menuNivel2 span, .menuSummary span {
            display: none;
        }

        /* Al reducir el espacio del menú, reducimos también la identación del nivel 2 del menú, para que queda en el espacio que ha quedado */
        .menuNivel2 {
            padding-inline-start: var(--espacioS);
        }
        /****** Fin  Clases para comprimir el menú ********** */
    }

    @media screen and (max-width: 910px) {
        /* Cambiamos la maquetación de la tabla para hacerla responsive */
        .listado table,
        .listado tbody,
        .listado th,
        .listado td,
        .listado tr {
            display: block;
        }

        /* Eliminamos el borde y la sombra de la tabla, porque vamos a separar los trs y le aplicaremos este efecto a cada uno de ellos  */
        .listado {
            border: none;
            box-shadow: none;
        }

            /* Ocultamos los títulos. Estos se mostarán con td:before si los hemos indicado en el html con el atributo data-label */
            .listado thead {
                display: none;
            }

            /* Separamos los trs entre sí y les aplicamos la misma sombra y borde de la tabla no responsive */
            .listado tr {
                border: 1px solid var(--clBordeMuyClaro);
                border-radius: var(--redondeado);
                box-shadow: var(--sombra);
                margin-block-end: var(--espacioS);
            }

            /* convertimos el td en un contenedor flex para maquetar el título (data-label) y el contenido del campo */
            .listado td {
                display: flex;
                /*flex-direction: row;*/ /* row es el valor por defecto */
                column-gap: var(--espacioM); /* separamos el título del contenido */
                text-align: start; /* alineamos a la izquierda*/
            }

                /* Al convertir el tr en "cajas" hay que eliminar el borde superior del primer td porque el tr ya tiene su propio borde y sombra */
                .listado td:first-child {
                    border-block-start: none;
                }

                /* Maquetación del título del campo, que está indicado en el atributo data-label del td */
                .listado td:before {
                    content: attr(data-label); /* título */
                    font-weight: bold;
                    inline-size: 25%; /* asignamos un ancho fijo al título */
                }

    }

    @media screen and (max-width: 850px) {
        /* a partir de este ancho, no queremos un alto fijo de la imagen, sino que se adapten al espacio existente */
        .subvencionLogos_pie img {
            inline-size: 100%;
            block-size: auto;
        }

        /* Cambiamos el estilo filaForm para que los campos puedan distribuirse en más de una fila */
        .filaForm {
            flex-wrap: wrap; /* más de una fila*/
            row-gap: var(--espacioM); /* añadimos separación entre las filas */
            margin-block: var(--espacioM); /* elimamos margen inferior para que los campos tengan la misma separación entre ellos aunque estén en filas distintas */
        }

        /* 50% -> 100% */
        .campoMitad {
            inline-size: 100%; /* Este campo pasa de ocupar el 50% a ocupar el 100% = campoCompleto */
        }

        /* 25% -> 50% */
        .campoUnCuarto {
            inline-size: calc(calc(100% / 2) - 0.5rem); /* Este campo pasa de ocupar el 25% a ocupar 50% = campoMitad */
        }

        /* 12.5% -> 25% */
        .campoUnOctavo {
            inline-size: calc(calc(100% / 4) - 0.75rem); /* Este campo pasa de ocupar el 12.5% a ocupar el 25% = campoUnCuarto */
        }

        /* 75% -> 100% */
        .campoTresCuartos {
            inline-size: 100%; /* Este campo pasa de ocupar el 75% a ocupar el 100%  = campoCompleto */
        }

        /* 33% -> 100% */
        .campoUnTercio {
            inline-size: 100%; /* Este campo pasa de ocupar el 33% a ocupar el 100%  = campoCompleto */
        }

        /* 66% -> 100% */
        .campoDosTercios {
            inline-size: 100%; /* Este campo pasa de ocupar el 66% a ocupar el 100%  = campoCompleto */
        }

        /* 16.5% -> 50% */
        .campoUnSexto {
            inline-size: calc(calc(100% / 2) - 0.5rem); /* Este campo pasa de ocupar el 16.5% a ocupar el 50%  = campoMitad */
        }

        #controlSesionAviso {
            inline-size: 90%;
            inset-inline-start: calc(5%); /* left */
            inset-block-start: calc(5%); /* top */
        }

        .layoutCols50-50, .layoutCols70-30, .layoutCols30-70, .layoutCols240-auto {
            grid-template-columns: 1fr; /* una columna */
        }
    }

    @media screen and (max-width: 600px) {
        /* 25% -> 50% -> 100% */
        .campoUnCuarto {
            inline-size: 100% /* Este campo pasa de ocupar el 50% a ocupar el 100% = campoCompleto */
        }

        /* 12.5% -> 25% -> 50% */
        .campoUnOctavo {
            inline-size: calc(calc(100% / 2) - 0.5rem); /* Este campo pasa de ocupar el 25% a ocupar el 50% = campoMitad */
        }
    }

    @media screen and (max-width: 550px) {

        /* A partir de este ancho, vamos a ocultar la imagen con todos los logos, ya que se los logos que la forman se ven muy pequeños, y
           vamos a mostrar los logos individuales, uno bajo otro y centrados
          */
        .subvencionLogos_entrada, .subvencionLogos_pie {
            display: grid;
            justify-items: center;
            row-gap: var(--espacioM);
        }
        
            /* establecemos un alto de 40px para las imágenes, con ancho proporcional */
            .subvencionLogos_entrada img, .subvencionLogos_pie img {
                inline-size: auto;
                block-size: 40px;
            }

        /* ocultamos la imagen con todos los logs  */
        .subvLogoUnico {
            display: none;
        }

        /* mostramos las imágenes individuales */
        .subvLogoUE, .subvLogoHaciendaFondo, .subvLogoJunta {
            display: block;
        }

    }

    @media screen and (max-width: 500px) {

        /* Reajustamos la maquetación del td*/
        .listado td {
            flex-direction: column; /* El título quedará por encima del contenido y ambos ocuparán todo el ancho disponible */
            row-gap: var(--espacioXS); /* Para separar título de contenido */
        }

            /* Reajustamos el maquetación del título, que se expande al 100% */
            .listado td:before {
                inline-size: 100%;
            }
    }

    @media screen and (max-width: 400px) {
        /* 12.5% -> 25% -> 50% -> 100% */
        .campoUnOctavo {
            inline-size: 100%;
        }

        /* 16.5% -> 50% -> 100% */
        .campoUnSexto {
            inline-size: 100%; /* Este campo pasa de ocupar el 50% ocupar el 100%  = campoCompleto */
        }

        .cuadricula {
            grid-template-columns: 1fr;
        }
    }