/* =========================================
           1. CORE & VARIABLES (PAE SYSTEM)
           ========================================= */
:root {
    /* Colores Institucionales */
    --pae-green: #009640;
    --pae-green-hover: #007a33;
    --pae-red: #cc4b37;
    --pae-red-light: #d86858;
    --pae-teal: #1bbcb6;
    --pae-teal-light: #4bd0cb;
    --pae-gray-dark: #333333;
    --pae-gray-med: #999999; /* Botones inactivos */
    --pae-gray-light: #cccccc;
    --pae-bg-body: #ffffff;
    --pae-bg-panel: #f4f4f4;
    /* Espaciados y Bordes */
    --pae-radius-pill: 50px; /* Bordes redondos para botones superiores */
    --pae-radius-card: 8px;
    --pae-spacing-section: 1.5rem;
}

/*body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--pae-gray-dark);
    background-color: #fff;
    padding: 20px;
    margin: 0;
}
*/
.pae-container {
    max-width: 1200px;
    margin: 0 auto;
}

h1.pae-page-title {
    font-size: 2rem;
    color: #444;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.pae-section-label {
    font-size: var(--pae-font-size-h3);
    font-weight: var(--pae-font-weight-normal);
    margin-bottom: 1rem;
    text-transform: uppercase;
    color: #222;
}

.pae-section-label2 {
    font-size: var(--pae-font-size-h3);
    font-weight: var(--pae-font-weight-bold);
    margin-bottom: 1rem;
    color: #222;
}


/* =========================================
           2. COMPONENTE: FILTRO DE REGIÓN
           ========================================= */
.pae-filter-box {
    background-color: #fff;
    padding: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    border-radius: 1.5rem;
    border: #ededed solid 1rem;
}

    .pae-filter-box label {
        font-size: var(--pae-font-size-h4);
        white-space: nowrap;
        padding-bottom: 1rem;
    }

.pae-select-styled {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
    min-width: 250px;
    font-size: 1rem;
    color: #555;
    width: 250px;
}

/* =========================================
           3. COMPONENTE: PILLS NAV (BOTONES CÁPSULA)
           Usado para Comités y Convocatorias
           ========================================= */
.pae-pills-container {
    display: flex;
    flex-wrap: wrap; /* Permite que bajen a la siguiente fila si hay muchos */
    gap: 10px;
    margin-bottom: 1.5rem;
}

.pae-pill-btn {
    padding: 18px 20px;
    border: none;
    border-radius: 6px; /* Bordes ligeramente redondeados como imagen */
    font-size: var(--pae-font-size-h5);
    font-weight: var(--pae-font-weight-light);
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    color: #fff;
    background-color: #b0b0b0; /* Gris por defecto (inactivo) */
}

    .pae-pill-btn:hover {
        background-color: #999;
    }

    .pae-pill-btn.active {
        background-color: var(--pae-green); /* Verde activo */
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

/* Variante para convocatorias (opcional si quieres diferenciar) */
.pae-pill-btn--convocatoria.active {
    background-color: var(--pae-green);
}

/* =========================================
   4. COMPONENTE: INFO CARD (DATOS COMITÉ)
 ========================================= */
.pae-info-card {
    background-color: #f9f9f9;
    border-radius: var(--pae-radius-card);
    overflow: hidden; /* Para respetar bordes redondeados */
    margin-bottom: 2rem;
    border-radius: 1.5rem;
    border: #ededed solid 1rem;
}

.pae-info-row {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
}

    .pae-info-row:last-child {
        border-bottom: none;
    }

    .pae-info-row:nth-child(even) {
        background-color: #fff;
    }

    .pae-info-row:nth-child(odd) {
        background-color: #f9f9f9;
    }

.pae-info-label {
    width: 25%;
    padding: 12px 20px;
    font-weight: 600;
    color: #333;
    border-right: 1px solid #eee;
}

.pae-info-value {
    width: 75%;
    padding: 12px 20px;
    color: #555;
}

/* =========================================
           5. COMPONENTE: CRONOGRAMA TABULAR (LEGACY)
           ========================================= */
/* Estilos específicos de la tabla compleja anterior */
.pae-special-table {
    width: 100%;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border: 1px solid #e0e0e0;
}

/* Mobile Header para Tabla */
.pae-st-mobile-header {
    display: none;
    background: var(--pae-green);
    color: #fff;
    padding: 1rem;
    text-align: center;
    font-weight: bold;
}

/* Navegación Interna Tabla (Tabs Cuadrados/Carpeta) */
.pae-st-nav-wrapper {
    display: flex;
    width: 100%;
}

.pae-st-nav-spacer {
    width: 30%;
    flex-shrink: 0;
    background: #f4f4f4;
    border-bottom: 1px solid #e0e0e0;
}
/* Fondo gris para espacio vacío */
.pae-st-nav-tabs {
    width: 70%;
    display: flex;
    gap: 5px;
    padding-left: 5px;
    background: #f4f4f4;
    border-bottom: 1px solid #e0e0e0;
}

.pae-st-tab-btn {
    flex: 1;
    padding: 18px 12px;
    font-weight: bold;
    font-size: var(--pae-font-size-h4) !important;
    color: #fff;
    background-color: #999;
    border: none;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.9rem;
}

    .pae-st-tab-btn.active[data-theme="red"] {
        background-color: var(--pae-red);
    }

    .pae-st-tab-btn.active[data-theme="teal"] {
        background-color: var(--pae-teal);
    }

/* Cuerpo Tabla */
.pae-st-body {
    display: flex;
}

.pae-st-col-left {
    width: 30%;
    flex-shrink: 0;
    border-right: 1px solid #e0e0e0;
}

.pae-st-header-green {
    background: var(--pae-green);
    color: #fff;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
}

.pae-st-col-right {
    width: 70%;
    flex-grow: 1;
}

.pae-st-content {
    display: none;
}

    .pae-st-content.active {
        display: block;
        animation: fadeIn 0.3s;
    }

/* Cabeceras Complejas */
.pae-st-header-complex {
    height: 90px;
    display: flex;
    flex-direction: column;
    color: #fff;
}

.pae-st-header-top {
    flex: 1;
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.3);
}

.pae-st-header-split-cell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border-right: 1px solid rgba(255,255,255,0.3);
}

.pae-st-header-sub {
    flex: 1;
    display: flex;
}

.pae-st-sub-cell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    border-right: 1px solid rgba(255,255,255,0.3);
}

/* Temas */
.theme-red .pae-st-header-top, .theme-red .pae-st-sub-cell {
    background: var(--pae-red-light);
}

.theme-teal .pae-st-header-top, .theme-teal .pae-st-sub-cell {
    background: var(--pae-teal-light);
}

/* Filas */
.pae-st-row {
    height: 60px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    background: #fff;
}

    .pae-st-row:nth-child(even) {
        background: #fafafa;
    }

.pae-st-cell-title {
    padding: 0 1rem;
    font-weight: 500;
}

.pae-st-data-grid {
    display: flex;
    width: 100%;
    height: 100%;
}

.pae-st-data-cell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #f0f0f0;
    font-size: 0.9rem;
}

.pae-st-mobile-label {
    display: none;
}

/* Estado base: oculto */
.pae-committee-panel {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

    /* Estado activo: visible */
    .pae-committee-panel.active {
        display: block;
        opacity: 1;
    }

/* Estilo básico del botón activo (para referencia visual acorde a tu imagen) */
.pae-pill-btn.active {
    background-color: #008f39; /* Verde similar a la imagen */
    color: white;
/*    font-weight: bold;*/
}

.accordion-title {
    display: block;
    padding: 1.25rem 1rem;
    line-height: 1;
    font-size: var(--pae-font-size-h4);
    color: #505050;
    position: relative;
    border-bottom: 1px solid #e6e6e6;
}

.accordion-pregunta {
    font-size: 1.2rem;
}

.accordion {
    border: 1px solid #EDEDED;
    border-radius: 10px;
}

.accordion_tip1:focus, .accordion_tip1:hover {
    color: #fff;
    background-color: var(--pae-color-logo2) !important;
}

.accordion_tip2:focus, .accordion_tip2:hover {
    color: #fff;
    background-color: var(--pae-color-logo2) !important;
}

.accordion_tip3:focus,
.accordion_tip3:hover {
    color: #00FFFF;
    background-color: var(--pae-color-logo2) !important;
}


.accordion-title::before {
    content: '\00a0+\00a0';
    background-color: #D9D9D9;
    border-radius: 50%;
    padding: 2px;
    font-weight: bolder;
    font-size: 1.5rem;
    top: 1.2rem;
}

.is-active > .accordion-title::before {
    content: '\00a0\002D\00a0';
}


.tscontenido {
    margin: 0rem;
    padding: 0.2rem;
}

    .tscontenido > tbody > tr > th {
        background-color: #7ECDED;
        color: #000;
        text-align: center;
        border: 1px #fff solid;
    }

    .tscontenido > tbody > tr > td {
        color: #555555;
        border: 1px #fff solid;
    }


.tscontenido2 {
    margin: 0rem;
    padding: 0.2rem;
}

    .tscontenido2 > tbody > tr > th {
        background-color: #7cbde9;
        color: #000;
        text-align: center;
        border: 1px #fff solid;
    }

    .tscontenido2 > tbody > tr > td {
        color: #555555;
        border: 1px #fff solid;
    }

.tcontenido {
    border: 1px solid #bbbaba;
    background-color: #b1b1b1;
}

    .tcontenido > tbody > tr > th {
        background-color: #007CB8;
        color: #fff;
        border: 1px #fff solid;
    }

    .tcontenido.tabaac > tbody > tr > th {
        background-color: #0780DD;
        color: #FFEA00;
        border: 1px #fff solid;
    }

    .tcontenido.tabscd > tbody > tr > th {
        background-color: #0866AE;
        color: #00FFFF;
        border: 1px #fff solid;
    }


    .tcontenido > tbody > tr > td > a {
        color: #000000;
    }

    .tcontenido > tbody > tr:hover {
        background-color: #CFEFF9;
    }

    .tcontenido.tabaac > tbody > tr:hover {
        background-color: #C8EBFA;
    }

    .tcontenido.tabscd > tbody > tr:hover {
        background-color: #C8EBFA;
    }

.contenedor-central {
    margin-left: -.9375rem;
    margin-right: -.9375rem;
}

.espaciarcnt {
    margin-bottom: 3rem;
}

.contenedor-tabs {
    color: #000;
    background-color: #F7F7F7;
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 0.8em;
}


.tabs,
.tabs-content {
    border: 0px solid #e6e6e6;
}

.tabs-content {
    border-radius: 0.5rem;
}

.tabs-retro[aria-selected=true] {
    background: #2CB200 !Important;
}

.tabs-retro {
    padding: 19px !important;
}


.tcontenido2 {
    border: 1px solid #bbbaba;
    background-color: #b1b1b1;
    width: 100%;
}

    .tcontenido2 > tbody > tr > th {
        background-color: #707070;
        color: #fff;
        border: 1px #fff solid;
    }

    .tcontenido2 > tbody > tr > td > a {
        color: #000000;
    }

.modal-body {
    color: #2d2a2a;
}

.enlace-icono {
    width: 5%;
    text-align: center;
}

.contratos {
    border-radius: 0.5rem;
    background-color: #fff;
    padding: 0.5rem;
}

.tscontenido {
    margin: 0rem;
    padding: 0.2rem;
}

    .tscontenido > tbody > tr > th {
        background-color: #91e2b2;
        color: #000;
        text-align: center;
        border: 1px #fff solid;
    }

    .tscontenido > tbody > tr > td {
        color: #555555;
        border: 1px #fff solid;
    }

.sinpadding {
    padding-left: 0rem;
    padding-right: 0rem;
}

.conpadding {
    padding-left: 1rem;
    padding-right: 1rem;
}


.sinmargin {
    margin: 0rem !important;
}

table.scroll {
    display: table;
    width: 100%;
    overflow-y: scroll;
}


/* =========================================
   RESPONSIVE (MÓVIL) - Estilo Imagen 2
   ========================================= */
@media (max-width: 768px) {
    .pae-filter-box {
        flex-direction: column; /* Apilar elementos verticalmente */
        align-items: stretch; /* Estirar al ancho completo */
        gap: 0.5rem;
        padding: 1rem;
        border-width: 0.5rem; /* Reducir el borde decorativo grueso */
    }


    /* Ocultar elementos de escritorio */
    .pae-st-nav-spacer,
    .pae-st-col-left,
    .pae-st-header-complex {
        display: none !important;
    }

    /* Ajustar anchos al 100% */
    .pae-st-nav-tabs,
    .pae-st-col-right {
        width: 100%;
    }

    /* Contenedor de la fila (Tarjeta blanca) */
    .pae-st-row {
        height: auto;
        flex-direction: column;
        align-items: flex-start; /* Alinear a la izquierda */
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px; /* Opcional: bordes redondeados en la tarjeta */
        margin-bottom: 15px;
        background: #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .pae-st-data-grid {
        flex-direction: column;
        width: 100%;
    }

    /* TÍTULO VERDE (Ej: 1. Convocatoria) */
    .pae-st-mobile-label {
        display: block;
        width: 100%;
        font-weight: 700;
        font-size: 1.1rem;
        color: var(--pae-green);
        border-bottom: 2px solid var(--pae-green);
        margin-bottom: 10px;
        padding-bottom: 5px;
        text-align: left;
    }

    /* CELDA DE DATOS (Fila interna: Label izquierda - Fecha derecha) */
    .pae-st-data-cell {
        display: flex;
        justify-content: space-between; /* Separa los extremos */
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px dotted #ccc; /* Línea punteada sutil */
        width: 100%;
        text-align: right; /* La fecha se alinea a la derecha */
        border-right: none; /* Quitamos el borde derecho de desktop */
    }

        /* Quitar borde a la última fila */
        .pae-st-data-cell:last-child {
            border-bottom: none;
        }

        /* EL LABEL (Generado por CSS desde el atributo data-label) */
        .pae-st-data-cell::before {
            content: attr(data-label);
            font-weight: 700;
            color: #555; /* Gris oscuro para el texto (Alim. Inicio, etc.) */
            text-align: left;
            margin-right: 15px; /* Espacio mínimo entre etiqueta y fecha */
        }

    /* 1. Forzamos que aparezca la barra verde */
    .pae-st-mobile-header {
        display: block !important; /* Importante para sobreescribir el display:none de escritorio */
        background-color: #009640; /* Verde Institucional */
        color: #ffffff;
        padding: 15px;
        text-align: center;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 1.1rem;
        /* Bordes redondeados solo arriba para que encaje con la tabla */
        border-radius: 8px 8px 0 0;
        /* Asegurar que no tenga márgenes que lo separen */
        margin: 0;
        width: 100%;
        box-sizing: border-box;
    }

    /* 2. Ajuste para que los Tabs (Rojo/Gris) peguen con el header verde */
    .pae-st-nav-wrapper {
        background: transparent;
        border: none;
    }

    .pae-st-nav-tabs {
        width: 100%;
        gap: 2px; /* Pequeña separación entre tabs */
    }

    /* Ajuste de los botones tabs en móvil para que parezcan la imagen */
    .pae-st-tab-btn {
        border-radius: 0 0 0 0; /* Cuadrados para encajar con el header verde */
        margin-bottom: 0;
        font-size: 0.85rem; /* Texto un poco más pequeño para que quepa "COMIDA LISTA..." */
        padding: 10px 5px;
    }

        /* Redondeamos las esquinas inferiores de los tabs externos si se desea */
        .pae-st-tab-btn:first-child {
            border-bottom-left-radius: 4px;
        }

        .pae-st-tab-btn:last-child {
            border-bottom-right-radius: 4px;
        }

    /* Corrección del contenedor de la tabla para quitar bordes dobles */
    .pae-special-table {
        border: none;
        background: transparent;
        box-shadow: none;
    }

    table.scroll {
        display: block;
        font-size: 0.7rem;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}