/* ==========================================================
   ANLA | SISTEMA DE PANELES Y CARTAS REUTILIZABLES
   Prefijo: panel-carta
   Compatible con Joomla 5.4.6 / Bootstrap 5
   Desktop / Tablet / Móvil
   Icono decorativo configurable desde el HTML
========================================================== */


/* ==========================================================
   1. ESTRUCTURA BASE Y VARIABLES
========================================================== */

.panel-carta {
    /* Tema de color predeterminado: azul */
    --panel-fondo: #f3f6fc;
    --panel-acento: #2457a7;
    --panel-texto: #26364b;
    --panel-texto-secundario: #526174;
    --panel-borde: #bdcdea;
    --panel-decoracion: rgba(36, 87, 167, 0.045);

    /* Tipografía: escritorio */
    --panel-titulo-desktop: 1.75rem;
    --panel-parrafo-desktop: 1rem;
    --panel-accion-desktop: 1rem;

    /* Tipografía: tableta */
    --panel-titulo-tablet: 1.55rem;
    --panel-parrafo-tablet: 0.975rem;
    --panel-accion-tablet: 0.975rem;

    /* Tipografía: móvil */
    --panel-titulo-movil: 1.35rem;
    --panel-parrafo-movil: 0.95rem;
    --panel-accion-movil: 0.95rem;

    /* Dimensiones */
    --panel-icono-desktop: 110px;
    --panel-icono-movil: 88px;
    --panel-padding-desktop: 3rem;
    --panel-padding-tablet: 2rem;
    --panel-padding-movil: 1.5rem;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-sizing: border-box;
    height: 100%;
    padding: var(--panel-padding-desktop);

    color: var(--panel-texto);
    background-color: var(--panel-fondo);
    background-image: linear-gradient(
        135deg,
        var(--panel-decoracion) 0%,
        transparent 58%
    );

    border: 1px solid var(--panel-borde);
    border-left: 4px solid var(--panel-acento);
    border-radius: 1rem;
}


/* ==========================================================
   MODELO DE CAJA
========================================================== */

.panel-carta *,
.panel-carta *::before,
.panel-carta *::after {
    box-sizing: border-box;
}


/* ==========================================================
   2. DECORACIÓN AMBIENTAL
   Círculo de fondo + icono configurable desde el HTML
========================================================== */

/* Círculo suave que emerge desde la esquina */

.panel-carta::before {
    content: "";
    position: absolute;
    z-index: -1;

    width: 240px;
    height: 240px;
    right: -105px;
    bottom: -115px;

    border: 0;
    border-radius: 50%;
    background: var(--panel-decoracion);

    pointer-events: none;
}


/* ==========================================================
   ICONO DECORATIVO DE FONDO
   Se define mediante Font Awesome en el HTML
========================================================== */

.panel-carta > .panel-carta-icono-fondo {
    position: absolute;
    right: -5px;
    bottom: -25px;
    z-index: 0;

    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;

    color: var(--panel-acento);
    font-size: 12rem;
    line-height: 1;
    opacity: 0.10;

    pointer-events: none;
    transform: rotate(-10deg);

    transition:
        transform 0.4s ease,
        opacity 0.4s ease,
        color 0.4s ease;
}


/* ==========================================================
   HOVER DEL ICONO DECORATIVO
========================================================== */

@media (hover: hover) and (pointer: fine) {
    .panel-carta:hover > .panel-carta-icono-fondo {
        transform: rotate(-5deg) scale(1.05);
        opacity: 0.14;
    }
}


/* ==========================================================
   CONTENIDO POR ENCIMA DE LA DECORACIÓN
========================================================== */

.panel-carta > *:not(.panel-carta-icono-fondo) {
    position: relative;
    z-index: 1;
}


/* ==========================================================
   3. ICONO PRINCIPAL
   Se conserva el icono circular del diseño original
========================================================== */

.panel-carta-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: var(--panel-icono-desktop);
    height: var(--panel-icono-desktop);

    color: #ffffff;
    background-color: var(--panel-acento);

    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 50%;

    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.10);
}

.panel-carta-icono i {
    color: inherit;
    font-size: 3rem;
    line-height: 1;
}


/* ==========================================================
   4. TÍTULO
========================================================== */

.panel-carta-titulo {
    margin-top: 0;

    color: var(--panel-texto);
    font-size: var(--panel-titulo-desktop);
    font-weight: 700;
    line-height: 1.25;

    text-wrap: balance;
    overflow-wrap: break-word;
}


/* ==========================================================
   5. DESCRIPCIÓN
========================================================== */

.panel-carta-descripcion {
    color: var(--panel-texto-secundario);
    font-size: var(--panel-parrafo-desktop);
    font-weight: 400;
    line-height: 1.7;

    overflow-wrap: break-word;
}


/* ==========================================================
   6. ACCIÓN O INDICACIÓN
========================================================== */

.panel-carta-accion {
    color: var(--panel-texto);
    font-size: var(--panel-accion-desktop);
    font-weight: 600;
    line-height: 1.6;

    overflow-wrap: break-word;
}

.panel-carta-accion i {
    color: var(--panel-acento);
}


/* ==========================================================
   7. TEMA VERDE
   Participación, gestión ambiental y territorio
========================================================== */

.panel-carta-verde {
    --panel-fondo: #f1f7f1;
    --panel-acento: #246b3b;
    --panel-texto: #243329;
    --panel-texto-secundario: #4d6253;
    --panel-borde: #b9d3be;
    --panel-decoracion: rgba(36, 107, 59, 0.045);
}


/* ==========================================================
   8. TEMA AZUL
   Información institucional y normatividad
========================================================== */

.panel-carta-azul {
    --panel-fondo: #f3f6fc;
    --panel-acento: #2457a7;
    --panel-texto: #26364b;
    --panel-texto-secundario: #526174;
    --panel-borde: #bdcdea;
    --panel-decoracion: rgba(36, 87, 167, 0.045);
}


/* ==========================================================
   9. TEMA NARANJA
   Actividades y contenidos destacados
========================================================== */

.panel-carta-naranja {
    --panel-fondo: #fff5eb;
    --panel-acento: #a94f12;
    --panel-texto: #492d1d;
    --panel-texto-secundario: #72523d;
    --panel-borde: #efc9a8;
    --panel-decoracion: rgba(169, 79, 18, 0.045);
}


/* ==========================================================
   10. TEMA AMARILLO
   Orientaciones y recomendaciones
========================================================== */

.panel-carta-amarillo {
    --panel-fondo: #fff9df;
    --panel-acento: #765b00;
    --panel-texto: #403817;
    --panel-texto-secundario: #665b32;
    --panel-borde: #e5d58e;
    --panel-decoracion: rgba(118, 91, 0, 0.045);
}


/* ==========================================================
   11. MODIFICADOR DE TIPOGRAFÍA COMPACTA
========================================================== */

.panel-carta-compacto {
    --panel-titulo-desktop: 1.5rem;
    --panel-titulo-tablet: 1.35rem;
    --panel-titulo-movil: 1.2rem;

    --panel-parrafo-desktop: 0.95rem;
    --panel-parrafo-tablet: 0.925rem;
    --panel-parrafo-movil: 0.9rem;

    --panel-accion-desktop: 0.95rem;
    --panel-accion-tablet: 0.925rem;
    --panel-accion-movil: 0.9rem;
}


/* ==========================================================
   12. MODIFICADOR DE TIPOGRAFÍA AMPLIA
========================================================== */

.panel-carta-amplio {
    --panel-titulo-desktop: 2rem;
    --panel-titulo-tablet: 1.7rem;
    --panel-titulo-movil: 1.45rem;

    --panel-parrafo-desktop: 1.1rem;
    --panel-parrafo-tablet: 1rem;
    --panel-parrafo-movil: 0.95rem;

    --panel-accion-desktop: 1.05rem;
    --panel-accion-tablet: 1rem;
    --panel-accion-movil: 0.95rem;
}


/* ==========================================================
   13. RESPONSIVE: ESCRITORIO Y TABLETA
========================================================== */

@media (max-width: 991.98px) {
    .panel-carta {
        padding: var(--panel-padding-tablet);
    }

    .panel-carta-titulo {
        font-size: var(--panel-titulo-tablet);
    }

    .panel-carta-descripcion {
        font-size: var(--panel-parrafo-tablet);
    }

    .panel-carta-accion {
        font-size: var(--panel-accion-tablet);
    }
}


/* ==========================================================
   TABLETA: ICONO DECORATIVO
========================================================== */

@media (min-width: 768px) and (max-width: 991.98px) {
    .panel-carta > .panel-carta-icono-fondo {
        font-size: 10rem;
    }
}


/* ==========================================================
   14. RESPONSIVE: MÓVIL
========================================================== */

@media (max-width: 575.98px) {
    .panel-carta {
        padding: var(--panel-padding-movil);
        border-radius: 0.875rem;
    }

    .panel-carta-icono {
        width: var(--panel-icono-movil);
        height: var(--panel-icono-movil);
    }

    .panel-carta-icono i {
        font-size: 2.25rem;
    }

    .panel-carta-titulo {
        font-size: var(--panel-titulo-movil);
        line-height: 1.3;
    }

    .panel-carta-descripcion {
        font-size: var(--panel-parrafo-movil);
        line-height: 1.65;
    }

    .panel-carta-accion {
        font-size: var(--panel-accion-movil);
    }

    /* Círculo de fondo en móvil */

    .panel-carta::before {
        width: 170px;
        height: 170px;
        right: -82px;
        bottom: -85px;
    }

    /* Icono decorativo configurable en móvil */

    .panel-carta > .panel-carta-icono-fondo {
        right: -5px;
        bottom: -15px;
        font-size: 8rem;
    }
}


/* ==========================================================
   15. ACCESIBILIDAD: MOVIMIENTO REDUCIDO
========================================================== */

@media (prefers-reduced-motion: reduce) {
    .panel-carta,
    .panel-carta *,
    .panel-carta *::before,
    .panel-carta *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important;
    }
}