/* Nota de Transparencia: Código generado/refactorizado con asistencia de IA Generativa (Claude Code) bajo la Política ODTI012 del CCS. Requiere supervisión y validación humana permanente. */

/*
 * Paginas de fuentes de informacion (Fasecolda, Cisproquim, RUC, Cuantificacion).
 * Reemplaza a fasecolda.css conservando su paleta.
 */

@font-face {
    font-family: 'Lexend';
    src: url('../fuentes/Lexend-VariableFont_wght.ttf');
    font-display: swap;
}

:root {
    /* paleta original de fasecolda.css */
    --letra-Titulo: 'Lexend', sans-serif;
    --gris: #808080;
    --targetas: #F4F4F4;
    --targetas-color: #DEE8ED;
    --blanco: #fff;
    --blanco-gris: #eeeded;
    --negro: #000;
    --azul-oscuro: #010f53;
    --letra-botones: #84BF46;
    --año: #0557B2;
    --añop: #e6eef8;
    --mes: #418881;
    --mesp: #e3f0ee;
    --semesttre: #348ef5;
    --semesttre-fondo: #e1edfd;
    --trimestre: #04bd7f;
    --trimestre-fondo: #dcf7ee;
    --rojo: #b42c2c;
    --rojo-blanco: #fde8e8;

    --f-texto: #1f2a44;
    --f-suave: #5b6478;
    --f-borde: #e3e8ef;
    --f-radio: 16px;
    --f-sombra: 0 1px 3px rgba(1, 15, 83, .08), 0 1px 2px rgba(1, 15, 83, .04);
    --f-sombra-lg: 0 18px 40px -14px rgba(1, 15, 83, .28);
    --f-degradado: linear-gradient(90deg, #00539B 0%, #8DC63F 100%);
}

.fx {
    font-family: var(--letra-Titulo);
    color: var(--f-texto);
    padding-bottom: 72px;
}

.fx h1,
.fx h2,
.fx h3,
.fx p {
    margin: 0;
}

/* ------------------------ CABECERA ------------------------ */

.fx-cabecera {
    position: relative;
    padding: 48px 0 40px;
    background:
        radial-gradient(circle at 100% 0%, rgba(141, 198, 63, .14), transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(0, 83, 155, .1), transparent 45%),
        var(--blanco);
    border-bottom: 1px solid var(--f-borde);
}

.fx-cabecera__cont {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.fx-kicker {
    display: inline-block;
    margin-bottom: 8px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: var(--f-degradado);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.fx-cabecera h1 {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--azul-oscuro);
}

.fx-cabecera p {
    max-width: 640px;
    margin-top: 10px;
    font-size: .98rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--f-suave);
}

.fx-cabecera__logo {
    flex: none;
    display: grid;
    place-items: center;
    width: 220px;
    height: 110px;
    padding: 18px;
    background: var(--blanco);
    border: 1px solid var(--f-borde);
    border-radius: var(--f-radio);
    box-shadow: var(--f-sombra);
}

.fx-cabecera__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ------------------------ PESTAÑAS ------------------------ */

.fx-cont {
    padding-top: 28px;
}

.fx-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    margin-bottom: 24px;
    background: var(--blanco);
    border: 1px solid var(--f-borde);
    border-radius: 999px;
    box-shadow: var(--f-sombra);
    width: fit-content;
    max-width: 100%;
}

.fx-tabs .botones_dis {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font: inherit;
    font-size: .88rem;
    font-weight: 500;
    color: var(--f-suave);
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, color .2s, box-shadow .2s;
}

.fx-tabs .botones_dis ion-icon {
    font-size: 1.05rem;
}

.fx-tabs .botones_dis:hover {
    color: var(--azul-oscuro);
    background: var(--targetas);
}

.fx-tabs .botones_dis.seleccionado {
    color: var(--blanco);
    background: var(--azul-oscuro);
    box-shadow: 0 8px 18px -8px rgba(1, 15, 83, .6);
}

.fx-tabs .botones_dis:disabled {
    cursor: progress;
}

/* ------------------------ FILTROS ------------------------ */

.fx-panel {
    position: sticky;
    top: 96px;
    padding: 22px;
    background: var(--blanco);
    border: 1px solid var(--f-borde);
    border-radius: var(--f-radio);
    box-shadow: var(--f-sombra);
}

.fx-panel h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--azul-oscuro);
}

.fx-panel h2 ion-icon {
    color: var(--mes);
}

.fx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.fx-chips .filtro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font: inherit;
    font-size: .78rem;
    color: var(--f-suave);
    background: var(--targetas);
    border: 1px solid var(--f-borde);
    border-radius: 999px;
    cursor: pointer;
    transition: all .2s;
}

.fx-chips .filtro:hover {
    border-color: var(--mes);
    color: var(--mes);
}

.fx-chips .filtro.btn_selected {
    color: var(--blanco);
    background: var(--mes);
    border-color: var(--mes);
}

.fx-campo {
    margin-bottom: 14px;
}

.fx-campo label {
    display: block;
    margin-bottom: 6px;
    font-size: .8rem;
    font-weight: 500;
    color: var(--f-texto);
}

.fx-campo select,
.fx-campo input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    font: inherit;
    font-size: .88rem;
    color: var(--f-texto);
    background: var(--targetas);
    border: 1px solid var(--f-borde);
    border-radius: 12px;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.fx-campo select:focus,
.fx-campo input:focus {
    background: var(--blanco);
    border-color: var(--año);
    box-shadow: 0 0 0 4px rgba(5, 87, 178, .12);
}

/* ------------------------ BOTONES ------------------------ */

.fx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    font: inherit;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .15s, background .2s, color .2s, box-shadow .2s;
}

.fx-btn ion-icon {
    font-size: 1rem;
}

.fx-btn:hover {
    transform: translateY(-1px);
}

.fx-btn--primario {
    width: 100%;
    padding: 12px;
    font-size: .9rem;
    color: var(--blanco);
    background: var(--f-degradado);
    box-shadow: 0 10px 22px -10px rgba(0, 83, 155, .7);
}

.fx-btn--primario:hover {
    color: var(--blanco);
}

.fx-btn--info {
    color: var(--blanco);
    background: var(--azul-oscuro);
}

.fx-btn--info:hover {
    color: var(--blanco);
    background: var(--año);
    box-shadow: 0 8px 18px -8px rgba(5, 87, 178, .7);
}

.fx-btn--boletin {
    color: #4a7d17;
    background: #f1f8e9;
    border-color: #d4eab8;
}

.fx-btn--boletin:hover {
    color: var(--blanco);
    background: var(--letra-botones);
    border-color: var(--letra-botones);
}

.fx-btn--boletin.sin-boletin {
    color: #98a2b3;
    background: #f2f4f7;
    border-color: #e4e7ec;
}

.fx-btn--boletin.sin-boletin:hover {
    color: #98a2b3;
    background: #eaecf0;
    transform: none;
}

.fx-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fx table .fx-acciones {
    flex-wrap: nowrap;
}

/* estado de carga inicial */
.fx-cargando {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 24px;
    font-size: .95rem;
    color: var(--f-suave);
    background: var(--blanco);
    border: 1px solid var(--f-borde);
    border-radius: var(--f-radio);
}

.fx-cargando span {
    width: 22px;
    height: 22px;
    border: 3px solid var(--añop);
    border-top-color: var(--año);
    border-radius: 50%;
    animation: fx-girar .7s linear infinite;
}

@keyframes fx-girar {
    to { transform: rotate(360deg); }
}

/* ------------------------ ETIQUETAS ------------------------ */

.fx-año,
.fx-mes,
.fx-tipo {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: .75rem;
    font-weight: 500;
    border-radius: 999px;
    white-space: nowrap;
}

.fx-año {
    color: var(--año);
    background: var(--añop);
}

.fx-mes {
    color: var(--mes);
    background: var(--mesp);
}

.fx-tipo--anual {
    color: var(--rojo);
    background: var(--rojo-blanco);
}

.fx-tipo--semestre {
    color: var(--semesttre);
    background: var(--semesttre-fondo);
}

.fx-tipo--trimestre {
    color: #038a5d;
    background: var(--trimestre-fondo);
}

.fx-tipo--ninguno {
    color: var(--f-suave);
    background: var(--targetas);
}

/* ------------------------ TABLA ------------------------ */

.fx-tabla {
    overflow-x: auto;
    padding: 20px;
    background: var(--blanco);
    border: 1px solid var(--f-borde);
    border-radius: var(--f-radio);
    box-shadow: var(--f-sombra);
}

.fx table.dataTable {
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
    font-size: .86rem;
}

.fx table.dataTable thead th {
    padding: 12px 14px !important;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--f-suave);
    background: #f8fafc;
    border-bottom: 1px solid var(--f-borde) !important;
    white-space: nowrap;
}

.fx table.dataTable thead th:first-child { border-top-left-radius: 10px; }
.fx table.dataTable thead th:last-child { border-top-right-radius: 10px; }

.fx table.dataTable tbody td {
    padding: 14px !important;
    vertical-align: middle;
    border-top: 1px solid #f1f4f8 !important;
    color: var(--f-texto);
}

.fx table.dataTable tbody tr {
    background: var(--blanco) !important;
    cursor: pointer;
    transition: background .15s;
}

.fx table.dataTable tbody tr:hover {
    background: #f8fbff !important;
}

.fx table.dataTable tbody tr.seleccionado {
    background: #eef5ff !important;
    box-shadow: inset 4px 0 0 var(--año);
}

.fx table.dataTable.display > tbody > tr > *,
.fx table.dataTable.display > tbody > tr.odd > *,
.fx table.dataTable.display tbody tr > .sorting_1 {
    box-shadow: none !important;
}

.fx .fx-nombre {
    font-weight: 500;
    color: var(--azul-oscuro);
}

/* +/- de filas responsive */
.fx table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
.fx table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    width: 22px;
    height: 22px;
    line-height: 20px;
    margin-right: 8px;
    color: var(--año);
    background: var(--añop);
    border: 1px solid rgba(5, 87, 178, .25);
    border-radius: 6px;
    box-shadow: none;
}

/* controles datatables */
.fx .dataTables_wrapper {
    font-size: .86rem;
    color: var(--f-suave);
}

.fx .dataTables_wrapper .dataTables_length,
.fx .dataTables_wrapper .dataTables_filter {
    margin-bottom: 16px;
}

.fx .dataTables_wrapper .dataTables_filter input,
.fx .dataTables_wrapper .dataTables_length select {
    height: 40px;
    padding: 0 12px;
    margin-left: 8px;
    font: inherit;
    color: var(--f-texto);
    background: var(--targetas);
    border: 1px solid var(--f-borde);
    border-radius: 12px;
    outline: none;
}

.fx .dataTables_wrapper .dataTables_filter input {
    min-width: 240px;
    padding-left: 36px;
    background: var(--targetas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center / 16px;
}

.fx .dataTables_wrapper .dataTables_filter input:focus,
.fx .dataTables_wrapper .dataTables_length select:focus {
    background-color: var(--blanco);
    border-color: var(--año);
    box-shadow: 0 0 0 4px rgba(5, 87, 178, .12);
}

.fx .dataTables_wrapper .dataTables_info {
    padding-top: 18px;
}

.fx .dataTables_wrapper .dataTables_paginate {
    padding-top: 14px;
}

.fx .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 36px;
    padding: 6px 12px !important;
    margin: 0 2px;
    color: var(--f-suave) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
}

.fx .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: var(--año) !important;
    background: var(--añop) !important;
}

.fx .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.fx .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: var(--blanco) !important;
    background: var(--azul-oscuro) !important;
}

.fx .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.fx .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #c0c6d0 !important;
    background: transparent !important;
}

/* modal de detalles (datatables responsive): por encima del menu fijo (z 1030) */
div.dtr-modal {
    z-index: 2000 !important;
}

div.dtr-modal div.dtr-modal-display {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%);
    width: min(560px, 92vw);
    height: auto !important;
    max-height: 85vh;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 30px 60px -15px rgba(1, 15, 83, .4);
    overflow: auto;
    font-family: var(--letra-Titulo);
}

div.dtr-modal div.dtr-modal-content {
    padding: 22px;
}

div.dtr-modal div.dtr-modal-content h2 {
    margin-bottom: 14px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--azul-oscuro);
}

div.dtr-modal div.dtr-modal-content h2 {
    padding-right: 44px;
}

div.dtr-modal div.dtr-modal-close {
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    line-height: 32px;
    font-size: 1.2rem;
    color: var(--f-suave);
    border: 0;
    border-radius: 50%;
    background: var(--targetas);
    transition: background .2s, color .2s;
}

div.dtr-modal div.dtr-modal-close:hover {
    color: var(--blanco);
    background: var(--azul-oscuro);
}

div.dtr-modal table {
    width: 100%;
}

div.dtr-modal table td:first-child {
    width: 38%;
    font-weight: 500;
    color: var(--f-suave);
}

div.dtr-modal div.dtr-modal-background {
    background: rgba(1, 15, 83, .55);
}

div.dtr-modal table td {
    padding: 8px 6px;
    font-size: .85rem;
    vertical-align: middle;
}

/* ------------------------ TARJETAS ------------------------ */

.fx-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

.fx-tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: var(--blanco);
    border: 1px solid var(--f-borde);
    border-radius: var(--f-radio);
    box-shadow: var(--f-sombra);
    cursor: pointer;
    overflow: hidden;
    animation: fx-entrar .35s ease both;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}

.fx-tarjeta::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--f-degradado);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s;
}

.fx-tarjeta:hover {
    transform: translateY(-4px);
    box-shadow: var(--f-sombra-lg);
    border-color: transparent;
}

.fx-tarjeta:hover::before,
.fx-tarjeta.seleccionado::before {
    transform: scaleX(1);
}

.fx-tarjeta.seleccionado {
    border-color: var(--año);
    box-shadow: 0 0 0 3px rgba(5, 87, 178, .15), var(--f-sombra-lg);
}

.fx-tarjeta__top {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fx-tarjeta h3 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--azul-oscuro);
}

.fx-tarjeta__fecha {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    color: var(--f-suave);
}

.fx-tarjeta__fecha ion-icon {
    flex: none;
    color: var(--mes);
}

.fx-tarjeta .fx-mes {
    align-self: flex-start;
}

.fx-tarjeta__meta {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fx-tarjeta__meta li {
    display: flex;
    align-items: center;
    gap: 6px;
    width: auto;
    margin: 0;
    font-size: .8rem;
    color: var(--f-suave);
}

.fx-tarjeta__meta ion-icon {
    color: var(--año);
}

.fx-tarjeta .fx-acciones {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--f-borde);
}

.fx-tarjeta .fx-acciones .fx-btn {
    flex: 1;
}

@keyframes fx-entrar {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* ------------------------ ESTADOS VACIOS ------------------------ */

.fx-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 56px 24px;
    text-align: center;
    background: var(--blanco);
    border: 1px dashed #cfd6e0;
    border-radius: var(--f-radio);
}

.fx-vacio img {
    width: 140px;
    max-width: 50%;
    opacity: .9;
}

.fx-vacio h3 {
    font-size: 1.05rem;
    font-weight: 500;
}

/* ------------------------ VISOR ------------------------ */

.fx-visor {
    margin-top: 32px;
    background: var(--blanco);
    border: 1px solid var(--f-borde);
    border-radius: var(--f-radio);
    box-shadow: var(--f-sombra-lg);
    overflow: hidden;
    animation: fx-entrar .35s ease both;
}

.fx-visor__cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--f-borde);
    background: linear-gradient(180deg, #fafcff, var(--blanco));
}

.fx-visor__cab h2 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--azul-oscuro);
}

.fx-visor__herr {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fx-icono {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    font-size: 1.15rem;
    color: var(--f-suave);
    background: var(--targetas);
    border: 1px solid var(--f-borde);
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}

.fx-icono:hover {
    color: var(--blanco);
    background: var(--azul-oscuro);
    border-color: var(--azul-oscuro);
}

#contenido {
    margin: 0 auto;
    padding: 20px;
    transition: width .3s ease;
}

#contenido iframe {
    max-width: 100%;
}

/* RUC: el tablero de Looker viene con ancho fijo (600px); se adapta al visor */
.fx-visor--ruc #contenido iframe {
    display: block;
    width: 100%;
    height: 78vh;
    min-height: 480px;
    border: 0;
    border-radius: 12px;
}

.fx-visor--ruc {
    margin-top: 0;
}

/* ------------------------ RESPONSIVE ------------------------ */

@media (max-width: 991.98px) {
    .fx-panel {
        position: static;
    }

    .fx-tabs {
        width: 100%;
        border-radius: 18px;
    }

    .fx-tabs .botones_dis {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (max-width: 650px) {
    .fx-cabecera {
        padding: 32px 0 28px;
    }

    .fx-cabecera__cont {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 18px;
    }

    .fx-cabecera__logo {
        width: 160px;
        height: 80px;
        padding: 12px;
    }

    .fx-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .fx-tabs::-webkit-scrollbar {
        display: none;
    }

    .fx-tabs .botones_dis {
        flex: none;
        padding: 9px 14px;
        font-size: .82rem;
    }

    .fx-tabla {
        padding: 12px;
    }

    .fx .dataTables_wrapper .dataTables_length,
    .fx .dataTables_wrapper .dataTables_filter,
    .fx .dataTables_wrapper .dataTables_info,
    .fx .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: left;
    }

    .fx .dataTables_wrapper .dataTables_filter input {
        min-width: 0;
        width: 100%;
        margin: 6px 0 0;
    }

    .fx .dataTables_wrapper .dataTables_paginate {
        text-align: center;
    }

    .fx-tarjetas {
        grid-template-columns: 1fr;
    }

    .fx-visor__cab {
        padding: 14px 16px;
    }

    #contenido {
        width: 100% !important;
        padding: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fx *,
    .fx *::before {
        animation: none !important;
        transition: none !important;
    }
}