/* Estilos generales */
.firel-container {
    font-family: Arial, sans-serif;
    max-width: 1200px;
    margin: 20px auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Header */
.firel-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    padding-bottom: 0;
    background: linear-gradient(0deg,rgba(123, 78, 162, 1) 0%, rgba(123, 78, 162, 1) 6%, rgba(63, 41, 89, 1) 99%);
    color: white;
    text-align: center;
}

.firel-logo-section {
    display: flex;
    align-items: center;
    border-right: 1.3px solid #ffffff5e;
    margin-right: 15px;
}

.firel-logo {
    width: 150px;
    margin-right: 15px;
    border-radius: 5px;
}

.firel-app-name {
    text-align: left;
}

    .firel-app-name p {
        margin: 0;
        font-size: 0.9em;
        line-height: 1.2;
    }

.firel-main-title {
    margin: 0;
    font-size: 1.8em;
    line-height: 1.3;
    color: white;
}

/* Sección de CTA */
.firel-cta-section {
    background-color: #7B4EA2;
    padding: 20px;
    padding-top: 9px;
    text-align: center;
    color: white;
}

.firel-cta-text {
    margin-top: 0;
    margin-bottom: 7px;
    font-size: 1.1em;
}

.firel-cta-button {
    display: inline-block;
    background-color: #4b287e;
    color: white;
    padding: 12px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.firel-cta-button:hover {
    background-color: #b75dde;
}

/* Secciones de guías y vigencia */
.firel-guides-and-validity {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    gap: 20px; /* Espacio entre las dos secciones grandes */
    background-color: #f7f7f7;
}

.firel-guides-section {
    /* CORRECCIÓN #1: Aumentamos la prioridad de la sección de guías. */
    flex: 3;
    min-width: 300px;
}

.firel-validity-section {
    /* Reducimos el espacio de la sección de vigencia. */
    flex: 1;
    min-width: 250px;
}

.firel-section-title {
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 15px;
    color: #2d2c2c;
    display: flex;
    align-items: center;
    font-weight: bold;
}

/* Iconos de título (omitiendo el código base64 por brevedad, se mantiene igual) */
.firel-icon-book::before,
.firel-icon-question::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.firel-icon-book::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%238cc63f"><path d="M0 0h24v24H0z" fill="none"/><path d="M21 4H3c-1.1 0-2 .9-2 2v13c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 15H3V6h18v13zM9 8h6v2H9zm0 3h6v2H9zm0 3h6v2H9z"/></svg>');
}

.firel-icon-question::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%238cc63f"><path d="M0 0h24v24H0z" fill="none"/><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>');
}


/* Tarjetas de guía */
.firel-guide-cards {
    display: flex;
    flex-wrap: wrap;
    /* CORRECCIÓN #2: Reducimos el gap para que las 3 tarjetas quepan más fácilmente. */
    gap: 10px;
}

.firel-card {
    /* Se mantiene la regla de 3 columnas */
    flex: 1 1 calc(15.333% - 10px); /* 10px porque el gap es 10px */
    /* Mantenemos el min-width bajo para tablets */
    min-width: 150px;
    background-color: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

/* ... (Resto de estilos de tarjetas y vigencia se mantienen iguales) ... */

.firel-card-icon {
    display: block;
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
}

.firel-icon-wifi::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('../images/firel/linea.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.firel-icon-document::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('../images/firel/enPersona.svg');
    background-position: center;
    background-repeat: no-repeat;
}

.firel-icon-refresh::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('../images/firel/renovar.svg');
    background-position: center;
    background-repeat: no-repeat;
}

.firel-card-title {
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
}

.firel-card-description {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 10px;
    flex-grow: 1;
}

.firel-card-button {
    display: inline-block;
    background-color: #614092;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
}

.firel-card-button:hover {
    background-color: #af8cbf;
}

.firel-validity-card {
    background-color: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*height: 100%; */
    justify-content: space-between;
    background-color: #ede6ec;
}

.firel-validity-icon {
    display: block;
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.firel-icon-document-question::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('../images/firel/vigencia.svg');
    background-position: center;
    background-repeat: no-repeat;
}


.firel-validity-title {
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
}

.firel-validity-description {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 20px;
    flex-grow: 1;
}

.firel-validity-button {
    display: inline-block;
    background-color: #614092;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.firel-validity-button:hover {
    background-color: #af8cbf;
}

.caja {
    width: 80%;
    margin: 0 auto;
    background-color: rgba(63, 41, 89, 0.395);
    border-radius: 12px;
    padding: 1% 0;
}

span.spanp {
    font-weight: bold;
    font-size: 1.02em;
}
/* ---------------------------------------------------- */
/* Media Queries ACTUALIZADOS */
/* ---------------------------------------------------- */

/* Reglas para Tablet y Escritorio (min-width: 768px) */
@media (min-width: 768px) {
    .firel-header {
        flex-direction: row;
        justify-content: center;
    }

    .firel-logo-section {
        margin-bottom: 0;
    }

    .firel-main-title {
        text-align: right;
    }

    .firel-guides-and-validity {
        flex-direction: row;
    }

    /* REGLA #3: Aseguramos que la sección de guías tenga un ancho dominante. */
    .firel-guides-section {
        flex: 3; /* Aumentamos a 3 para darle más espacio horizontalmente */
    }

    .firel-validity-section {
        flex: 1;
    }
}

/* Reglas para Móvil (max-width: 767px) */
@media (max-width: 767px) {
    .firel-guides-and-validity {
        flex-direction: column;
    }

    .firel-guides-section,
    .firel-validity-section {
        width: 100%;
        min-width: unset;
    }

    .firel-header {
        justify-content: center;
    }

    .firel-logo-section {
        border-right: none;
        margin-right: 0;
        margin-bottom: 15px;
    }

    .firel-guide-cards {
        flex-direction: column;
        gap: 20px; /* Restauramos un gap más grande para la vista apilada */
    }

    .firel-card {
        flex: 1 1 100%; /* Forzar 1 tarjeta por fila en móvil */
    }
}