/* =========================================================
   ESTRUCTURA GENERAL DE MÓDULOS ADMINISTRATIVOS
========================================================= */

:root {
    --admin-primary: var(--ace-primary, #090e37);
    --admin-primary-dark: var(--ace-primary-strong, #050820);
    --admin-primary-soft: var(--ace-primary-soft, #eef1fa);

    --admin-background: var(--ace-background, #f4f6fa);
    --admin-surface: var(--ace-surface, #ffffff);
    --admin-surface-muted: var(--ace-surface-muted, #f8f9fc);

    --admin-text: var(--ace-text, #182033);
    --admin-muted: var(--ace-muted, #667085);

    --admin-border: var(--ace-border, #dfe3ea);
    --admin-border-strong: var(--ace-border-strong, #cbd2df);

    --admin-success: var(--ace-success, #16835d);
    --admin-success-soft: var(--ace-success-soft, #eaf8f2);

    --admin-page-width: 1480px;

    --admin-radius-sm: 8px;
    --admin-radius-md: 11px;
    --admin-radius-lg: 13px;

    --admin-shadow:
        0 1px 2px rgba(9, 14, 55, 0.04),
        0 5px 16px rgba(9, 14, 55, 0.05);
}


/* =========================================================
   CONTENEDOR PRINCIPAL
========================================================= */

.admin-module {
    width: 100%;
    max-width: var(--admin-page-width);
    margin: 0 auto;
    padding:
        32px
        clamp(22px, 3vw, 44px)
        48px;

    color: var(--admin-text);
}

.admin-module *,
.admin-module *::before,
.admin-module *::after {
    box-sizing: border-box;
}

.admin-module [hidden] {
    display: none !important;
}


/* =========================================================
   ENCABEZADO
========================================================= */

.admin-module__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 24px;

    min-height: 94px;
    margin-bottom: 18px;
}

.admin-module__heading {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 86px;
    padding: 5px 0 5px 18px;
}

.admin-module__heading::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 4px;

    border-radius: 999px;
    background: var(--admin-primary);
}

.admin-module__kicker {
    display: block;

    margin-bottom: 5px;

    color: #526b99;

    font-size: 0.68rem;
    font-weight: 720;
    letter-spacing: 0.065em;
    line-height: 1.2;
    text-transform: uppercase;
}

.admin-module__title {
    margin: 0;

    color: var(--admin-primary);

    font-size: clamp(1.75rem, 2vw, 2.1rem);
    font-weight: 740;
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.admin-module__description {
    max-width: 760px;
    margin: 8px 0 0;

    color: #52617c;

    font-size: 0.82rem;
    line-height: 1.45;
}

.admin-module__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    min-height: 86px;
}


/* =========================================================
   BOTÓN PRINCIPAL
========================================================= */

.admin-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 42px;
    padding: 10px 17px;

    border: 1px solid var(--admin-primary);
    border-radius: var(--admin-radius-sm);

    background: var(--admin-primary);
    color: #ffffff;

    box-shadow:
        0 7px 15px rgba(9, 14, 55, 0.18);

    font-size: 0.75rem;
    font-weight: 690;
    line-height: 1;
    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        transform 0.16s ease,
        box-shadow 0.16s ease;
}

.admin-primary-button:hover,
.admin-primary-button:focus-visible {
    border-color: var(--admin-primary-dark);
    background: var(--admin-primary-dark);
    color: #ffffff;

    box-shadow:
        0 9px 18px rgba(9, 14, 55, 0.22);

    transform: translateY(-1px);
}

.admin-primary-button svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   RITMO VERTICAL DEL MÓDULO
========================================================= */

.admin-module__content {
    display: grid;
    gap: 14px;
}


/* =========================================================
   TARJETAS DE INDICADORES
========================================================= */

.admin-stats {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(220px, 1fr)
    );
    gap: 14px;
}

.admin-stat {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 72px;
    padding: 14px 17px;

    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);

    background: var(--admin-surface);

    box-shadow: var(--admin-shadow);
}

.admin-stat__icon {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border: 1px solid #d8def0;
    border-radius: 10px;

    background: var(--admin-primary-soft);
    color: var(--admin-primary);
}

.admin-stat__icon svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-stat__content {
    min-width: 0;
}

.admin-stat__label {
    display: block;

    color: var(--admin-muted);

    font-size: 0.68rem;
    font-weight: 620;
}

.admin-stat__value {
    display: block;

    margin-top: 3px;

    color: var(--admin-primary);

    font-size: 1.18rem;
    font-weight: 750;
    line-height: 1;
}

.admin-stat--success .admin-stat__icon {
    border-color: #b8e5d3;
    background: var(--admin-success-soft);
    color: var(--admin-success);
}

.admin-stat--muted .admin-stat__icon {
    border-color: #e1e5ec;
    background: #f2f4f7;
    color: #667085;
}


/* =========================================================
   BARRA DE HERRAMIENTAS
========================================================= */

.admin-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    min-height: 62px;
    padding: 10px;

    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);

    background: var(--admin-surface);

    box-shadow: var(--admin-shadow);
}


/* =========================================================
   FILTROS
========================================================= */

.admin-filters {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    padding: 4px;

    border-radius: 9px;
    background: var(--admin-surface-muted);
}

.admin-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 34px;
    padding: 7px 12px;

    border: 1px solid transparent;
    border-radius: 7px;

    background: transparent;
    color: #475467;

    font-size: 0.7rem;
    font-weight: 660;

    cursor: pointer;
}

.admin-filter:hover,
.admin-filter:focus-visible {
    color: var(--admin-primary);
}

.admin-filter.is-active {
    border-color: var(--admin-border);
    background: #ffffff;
    color: var(--admin-primary);

    box-shadow: 0 1px 3px rgba(9, 14, 55, 0.08);
}

.admin-filter__dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #98a2b3;
}

.admin-filter__dot--success {
    background: var(--admin-success);
}


/* =========================================================
   BUSCADOR
========================================================= */

.admin-search {
    position: relative;

    flex: 0 1 370px;
    min-width: 260px;
}

.admin-search__icon {
    position: absolute;
    top: 50%;
    left: 13px;

    width: 17px;
    height: 17px;

    color: #778195;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transform: translateY(-50%);
    pointer-events: none;
}

.admin-search__input {
    width: 100%;
    min-height: 40px;
    padding: 9px 40px;

    border: 1px solid var(--admin-border-strong);
    border-radius: var(--admin-radius-sm);
    outline: none;

    background: #ffffff;
    color: var(--admin-text);

    font-size: 0.73rem;
}

.admin-search__input::placeholder {
    color: #98a2b3;
}

.admin-search__input:focus {
    border-color: var(--admin-primary);

    box-shadow:
        0 0 0 3px rgba(9, 14, 55, 0.08);
}


/* =========================================================
   TARJETA PRINCIPAL
========================================================= */

.admin-card {
    overflow: hidden;

    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);

    background: var(--admin-surface);

    box-shadow: var(--admin-shadow);
}

.admin-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    min-height: 74px;
    padding: 16px 20px;

    border-bottom: 1px solid var(--admin-border);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcfe 100%
        );
}

.admin-card__title {
    margin: 0;

    color: var(--admin-primary);

    font-size: 0.88rem;
    font-weight: 710;
    line-height: 1.25;
}

.admin-card__description {
    margin: 4px 0 0;

    color: var(--admin-muted);

    font-size: 0.68rem;
    line-height: 1.4;
}

.admin-card__counter {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    flex: 0 0 auto;

    min-height: 34px;
    padding: 7px 11px;

    border: 1px solid #d8def0;
    border-radius: 999px;

    background: var(--admin-primary-soft);
    color: var(--admin-primary);

    font-size: 0.68rem;
    font-weight: 700;
}


/* =========================================================
   TABLA GENERAL
========================================================= */

.admin-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th {
    padding: 11px 16px;

    border: 0;
    border-bottom: 1px solid var(--admin-border);

    background: var(--admin-surface-muted);
    color: #475467;

    font-size: 0.62rem;
    font-weight: 730;
    letter-spacing: 0.055em;
    line-height: 1.2;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-table td {
    height: 64px;
    padding: 12px 16px;

    border: 0;
    border-bottom: 1px solid #edf0f4;

    color: var(--admin-text);

    font-size: 0.72rem;
    vertical-align: middle;
}

.admin-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-table tbody tr:hover {
    background: #fbfcfe;
}


/* =========================================================
   CLASES DE APOYO
========================================================= */

.admin-text-center {
    text-align: center !important;
}

.admin-text-right {
    text-align: right !important;
}

.admin-muted-text {
    color: var(--admin-muted);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1024px) {

    .admin-module {
        padding:
            28px
            clamp(18px, 2.5vw, 28px)
            42px;
    }

    .admin-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-search {
        flex-basis: auto;
        width: 100%;
        min-width: 0;
    }

}


@media (max-width: 760px) {

    .admin-module {
        padding: 22px 15px 34px;
    }

    .admin-module__header {
        grid-template-columns: 1fr;
        gap: 12px;

        min-height: auto;
    }

    .admin-module__heading {
        min-height: auto;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .admin-module__actions {
        justify-content: flex-start;
        min-height: auto;
    }

    .admin-primary-button {
        width: 100%;
    }

    .admin-filters {
        display: grid;
        grid-template-columns: repeat(
            3,
            minmax(0, 1fr)
        );

        width: 100%;
    }

    .admin-filter {
        padding-right: 6px;
        padding-left: 6px;
    }

    .admin-card__header {
        min-height: 68px;
        padding: 14px 16px;
    }

    .admin-card__description {
        display: none;
    }

}

/* =========================================================
   COMPATIBILIDAD GEOMÉTRICA CON miisa_ui_v2.css

   miisa-main será el único responsable del margen general.
   Las clases admin-* conservan su nombre y funcionamiento.
========================================================= */

:root {
    --admin-primary: var(--miisa-primary, #090e37);
    --admin-primary-dark: var(--miisa-primary-dark, #050820);
    --admin-primary-soft: var(--miisa-primary-soft, #f0f1f6);

    --admin-background: var(--miisa-bg, #ffffff);
    --admin-surface: var(--miisa-surface, #ffffff);
    --admin-surface-muted: var(--miisa-surface-soft, #f7f7f7);

    --admin-text: var(--miisa-text, #000000);
    --admin-muted: var(--miisa-muted, #4f4f4f);

    --admin-border: var(--miisa-border, #dedede);
    --admin-border-strong: var(
        --miisa-border-strong,
        #bcbcbc
    );

    --admin-success: var(--miisa-success, #07875f);
    --admin-success-soft: var(
        --miisa-success-soft,
        #e8f8f1
    );

    --admin-page-width: none;

    --admin-radius-sm: 10px;
    --admin-radius-md: 16px;
    --admin-radius-lg: 16px;

    --admin-shadow: var(
        --miisa-shadow,
        0 10px 28px rgba(9, 14, 55, 0.06)
    );
}


/* =========================================================
   CONTENEDOR PRINCIPAL

   Se elimina el segundo padding porque .miisa-main ya tiene:
   padding: 30px 32px 48px;
========================================================= */

.admin-module {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;

    color: var(--admin-text);
}


/* =========================================================
   ENCABEZADO
========================================================= */

.admin-module__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 20px;

    min-height: 0;
    margin-bottom: 24px;
}

.admin-module__heading {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    min-height: 0;
    padding: 0 0 0 18px;
}

.admin-module__heading::before {
    top: 0;
    bottom: 0;
}

.admin-module__actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;

    min-height: 0;
    padding-top: 0;
}

.admin-module__kicker {
    margin-bottom: 6px;

    color: var(--admin-primary);

    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.admin-module__title {
    margin: 0;

    color: var(--admin-primary);

    font-size: clamp(1.65rem, 2vw, 2.15rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.1;
}

.admin-module__description {
    max-width: 760px;
    margin: 7px 0 0;

    color: var(--admin-muted);

    font-size: 0.91rem;
    line-height: 1.45;
}


/* =========================================================
   BOTÓN PRINCIPAL
========================================================= */

.admin-primary-button {
    min-height: 40px;
    padding: 9px 15px;

    border-radius: 10px;

    font-size: 0.8rem;
    font-weight: 500;
}


/* =========================================================
   DISTRIBUCIÓN VERTICAL
========================================================= */

.admin-module__content {
    display: grid;
    gap: 16px;
}


/* =========================================================
   INDICADORES
========================================================= */

.admin-stats {
    gap: 14px;
}

.admin-stat {
    min-height: 108px;
    padding: 17px 18px;

    border-radius: 14px;

    box-shadow:
        0 4px 14px rgba(15, 34, 65, 0.035);
}

.admin-stat__label {
    font-size: 0.75rem;
    font-weight: 500;
}

.admin-stat__value {
    margin-top: 10px;

    font-size: 1.5rem;
    font-weight: 500;
}


/* =========================================================
   BARRA DE HERRAMIENTAS
========================================================= */

.admin-toolbar {
    min-height: auto;
    padding: 10px;

    border-radius: 16px;

    box-shadow: var(--admin-shadow);
}

.admin-filters {
    border-radius: 10px;
}

.admin-filter {
    min-height: 36px;
    padding: 8px 12px;

    border-radius: 8px;

    font-size: 0.74rem;
    font-weight: 500;
}

.admin-search {
    flex-basis: 390px;
}

.admin-search__input {
    min-height: 42px;
    padding: 9px 40px;

    border-radius: 10px;

    font-size: 0.8rem;
}


/* =========================================================
   TARJETA PRINCIPAL
========================================================= */

.admin-card {
    border-radius: 16px;

    box-shadow: var(--admin-shadow);
}

.admin-card__header {
    min-height: 0;
    padding: 20px;

    background: #ffffff;
}

.admin-card__title {
    font-size: 1rem;
    font-weight: 500;
}

.admin-card__description {
    margin-top: 4px;

    font-size: 0.78rem;
}

.admin-card__counter {
    min-height: auto;
    padding: 5px 9px;

    background: var(--admin-surface-muted);

    font-size: 0.7rem;
    font-weight: 500;
}


/* =========================================================
   TABLA
========================================================= */

.admin-table th {
    padding: 13px 16px;

    background: var(--admin-surface-muted);
    color: #000000;

    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.admin-table td {
    height: auto;
    padding: 15px 16px;

    color: var(--admin-text);

    font-size: 0.78rem;
}


/* =========================================================
   TABLETA
========================================================= */

@media (max-width: 1024px) {

    .admin-module {
        padding: 0;
    }

    .admin-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-search {
        width: 100%;
        min-width: 0;
    }

}


/* =========================================================
   TELÉFONO
========================================================= */

@media (max-width: 760px) {

    .admin-module {
        padding: 0;
    }

    .admin-module__header {
        grid-template-columns: 1fr;
        gap: 12px;

        margin-bottom: 20px;
    }

    .admin-module__heading {
        padding-left: 15px;
    }

    .admin-module__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .admin-primary-button {
        width: 100%;
    }

    .admin-card__header {
        padding: 17px 14px;
    }

}