/* ==========================================================================
   ACORDEÓN UHU ACCESIBLE - VERSIÓN FINAL (Hover Gris + Iconos Nativos)
   ========================================================================== */

/* 1. CONTENEDOR DEL ITEM
   Estilo tarjeta UHU (sombra suave y borde) */
.c-accordion-item {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.07);
    border: solid 1px rgba(217, 217, 217, 0.3);
    margin-bottom: 10px;
    overflow: hidden;
    transition: all 0.25s ease;
}

/* 2. BOTÓN (CABECERA) */
button.c-accordion-item__title {
    /* Reset de botón nativo */
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    margin: 0;

    /* Tipografía UHU Forzada */
    position: relative;
    font-family: "Open Sans", sans-serif;
    font-size: 1rem !important;      /* 16px */
    font-weight: 600 !important;     /* Semi-bold */
    line-height: 1.3rem !important;
    color: #666;
    
    /* Espaciado */
    padding: 17px 55px 17px 30px; 
    
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* --- ESTADO HOVER (Ratón encima) --- */
button.c-accordion-item__title:hover {
    background-color: #f2f2f2; /* Gris suave UHU */
    color: #333; 
}

/* --- ESTADO ABIERTO (.is-open en el padre) --- */
.c-accordion-item.is-open button.c-accordion-item__title {
    background-color: #e6e6e6; /* Gris un poco más oscuro al estar abierto */
    color: #005165; /* Azul UHU */
    border-bottom: 1px solid rgba(217, 217, 217, 0.3);
}

/* 3. ICONOS (+ / -) 
   Ajustamos la posición de los iconos que heredas de tu tema */
button.c-accordion-item__title::before {
    /* No ponemos 'content' para que salga el tuyo (+) */
    position: absolute;
    right: 30px;
    top: 50%;
    margin-top: -12px; /* Centrado exacto */
    
    /* Aseguramos estilos de fuente de iconos por si acaso */
    font-family: "Line Awesome Free"; 
    font-weight: 900;
    font-size: 24px;
    color: #a80a2e; /* Rojo UHU */
    
    transition: transform 0.25s ease;
}

/* Cuando está abierto, rotamos el icono (el + se convierte en x o el - rota) */
.c-accordion-item.is-open button.c-accordion-item__title::before {
    transform: rotate(180deg);
    /* Si tu tema no cambia el + a - automáticamente, descomenta la siguiente línea: */
    content: "\f056"; /* Icono Menos */
}

/* 4. CONTENIDO (LÓGICA VISUAL) */
.c-accordion-item__content {
    display: none; /* Oculto por defecto */
    padding: 0 30px;
    opacity: 0;
    color: #333;
    font-size: 0.875rem;
    line-height: 1.5rem;
}

/* Mostrar contenido al abrir */
.c-accordion-item.is-open .c-accordion-item__content {
    display: block !important;
    opacity: 1;
    padding: 20px 30px 25px;
    background-color: #fff;
    animation: fadeIn 0.3s ease;
}

/* Enlaces dentro del contenido */
.c-accordion-item__content a {
    color: #016ca2;
    text-decoration: none;
}
.c-accordion-item__content a:hover {
    color: #016ca2;
    opacity: 0.8;
    text-decoration: underline;
}

/* 5. ACCESIBILIDAD (FOCO TECLADO) 
   Usamos !important para asegurar que se vea aunque no borres la línea del tema original */
button.c-accordion-item__title:focus {
    outline: 3px solid #005165 !important; 
    outline-offset: -3px !important;
    background-color: #f2f9fc !important; /* Fondo azul claro para resaltar */
    position: relative;
    z-index: 10;
}

/* Opcional: Si usas ratón, quitamos el borde azul para que sea más estético */
button.c-accordion-item__title:focus:not(:focus-visible) {
    outline: none !important;
    background-color: #f2f2f2 !important; /* Vuelve al gris del hover */
}

/* Animación suave */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}



/* =========================================
   ESTILOS PESTAÑAS (TABS) ACCESIBLES
   ========================================= */

/* 1. Reset del botón de la pestaña */
.c-tabs__button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    padding: 0; /* Hereda padding del LI o A original */
    width: 100%;
    text-align: left; /* O center según tu diseño */
    display: block;
}

/* 2. Estilos de Foco (Accesibilidad) */
.c-tabs__button:focus {
    outline: 2px solid #005165 !important;
    outline-offset: -2px;
    background-color: rgba(0, 81, 101, 0.1); /* Sutil fondo azul */
    position: relative;
    z-index: 10;
}
.c-tabs__button:focus:not(:focus-visible) {
    outline: none !important;
    background-color: transparent;
}

/* 3. Lógica de visualización de paneles */
/* Ocultar nativamente */
.c-block-tabs__content[hidden] {
    display: none !important;
}

/* Panel visible */
.c-block-tabs__content:not([hidden]) {
    display: block !important;
    animation: fadeIn 0.3s ease;
}

/* 4. Ajustes para mantener el estilo visual de UHU */
/* Aseguramos que el botón ocupe todo el espacio del LI para el área de clic */
.o-menu-tabs__item {
    padding: 0; /* Quitamos padding al LI, se lo damos al botón */
}

/* Ajuste específico para tus diseños o-menu-tabs--t1 y t2 */
.o-menu-tabs--t1 .c-tabs__button, 
.o-menu-tabs--t2 .c-tabs__button {
    padding: 10px 15px; /* Ajusta según tu padding original de los <a> */
    color: #333;
    border-bottom: 3px solid transparent;
}

/* Estado seleccionado visual */
.o-menu-tabs__item.selected .c-tabs__button {
    color: #a80a2e; /* Rojo UHU */
    border-bottom-color: #a80a2e;
}

/* Foco visible solo con teclado (no con ratón) */
.o-menu-tabs__item .c-tabs__button:focus-visible {
    outline: 3px solid #005165 !important;
    outline-offset: 2px;
    background-color: rgba(0, 81, 101, 0.08);
    position: relative;
    z-index: 10;
}

/* Paneles de pestañas: ocultos para lectores de pantalla cuando no están activos */
.c-block-tabs__content[hidden] {
    display: none !important;
    visibility: hidden;
}

.c-block-tabs__container .c-block-tabs__content:not([hidden]) {
    display: block !important;
}

/* ACCESIBILIDAD TARJETAS (CARDS) */
a.c-card__a:focus {
    /* Foco visible en el contenedor completo */
    outline: 3px solid #005165 !important;
    outline-offset: 2px;
    z-index: 10;
    position: relative; /* Asegura que el borde se vea por encima de otros elementos */
}

/* ==========================================================================
   FIX EDITOR - SOLUCIÓN POR FUERZA BRUTA (.c-group)
   ========================================================================== */

/* 1. EL CONTENEDOR (La Rejilla)
   Buscamos cualquier div con clase 'c-group' y atacamos a su primer hijo directo,
   que suele ser el wrapper de InnerBlocks de Gutenberg. */
.c-group > div > .block-editor-block-list__layout,
.c-group > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    width: 100% !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. LAS TARJETAS (Hijos directos del layout) */
.c-group > div > .block-editor-block-list__layout > div,
.c-group > .block-editor-inner-blocks > .block-editor-block-list__layout > div {
    /* Le damos comportamiento de caja flexible */
    box-sizing: border-box !important;
    padding: 10px !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    width: auto !important; /* Reset de Gutenberg */
    max-width: none !important;
}

/* 3. PLAN B: solo si getEditWrapperProps no ha puesto data-card-width (mayor especificidad abajo). */
.c-group .wp-block-uhu-card:not([data-card-width]) {
    flex-basis: 50% !important;
    max-width: 50% !important;
}

/* 4. Anchos por proporción (getEditWrapperProps en Card.js). Debe ganar al plan B:
   mismo contexto .c-group .wp-block-uhu-card + atributo. */
.c-group .wp-block-uhu-card[data-card-width="one-sixth"]    { flex-basis: 16.66% !important; max-width: 16.66% !important; }
.c-group .wp-block-uhu-card[data-card-width="one-fifth"]    { flex-basis: 20% !important;    max-width: 20% !important; }
.c-group .wp-block-uhu-card[data-card-width="quarter"]      { flex-basis: 25% !important;    max-width: 25% !important; }
.c-group .wp-block-uhu-card[data-card-width="two-sixths"]   { flex-basis: 33.33% !important; max-width: 33.33% !important; }
.c-group .wp-block-uhu-card[data-card-width="three-sixths"] { flex-basis: 50% !important;    max-width: 50% !important; }
.c-group .wp-block-uhu-card[data-card-width="four-sixths"]  { flex-basis: 66.66% !important; max-width: 66.66% !important; }
.c-group .wp-block-uhu-card[data-card-width="five-sixths"]  { flex-basis: 83.33% !important; max-width: 83.33% !important; }
.c-group .wp-block-uhu-card[data-card-width="six-sixths"]   { flex-basis: 100% !important;   max-width: 100% !important; }

/* 1. Eliminamos el fondo gris del placeholder de Drupal */
.alert-success em.placeholder {
    background-color: transparent !important;
    font-style: normal; /* Opcional: quita la cursiva si no te gusta */
    padding: 0;
}

/* 2. Ajustamos el enlace para que se vea integrado y no "sucio" */
.alert-success em.placeholder a {
    color: #0f5132 !important; /* Un verde oscuro estándar de Bootstrap para alertas */
    font-weight: 700;          /* Le damos peso para que se note que es el nombre */
    text-decoration: underline; /* Mantenemos el subrayado para accesibilidad */
    background: none !important;
}

/* 3. Ajuste para el hover (pasado el ratón) */
.alert-success em.placeholder a:hover {
    color: #0a3622 !important;
    text-decoration: none;
}