@import url(
    'https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap'
);


/* ============================================================
   AMPATH
   DISEÑO INSTITUCIONAL / EDITORIAL
   ============================================================ */

:root {

    /* --------------------------------------------------------
       IDENTIDAD
       -------------------------------------------------------- */

    --color-primary: #145780;
    --color-primary-dark: #0b3f61;
    --color-primary-deep: #173752;
    --color-primary-soft: #edf4f8;

    --color-secondary: #345f7c;

    /* --------------------------------------------------------
       FONDOS
       -------------------------------------------------------- */

    --color-background: #f5f6f7;
    --color-background-alt: #eef1f3;

    --color-surface: #ffffff;
    --color-surface-soft: #f8f9fa;

    /* --------------------------------------------------------
       TEXTO
       -------------------------------------------------------- */

    --color-text: #1a252e;
    --color-text-secondary: #59656e;
    --color-text-muted: #818b92;

    /* --------------------------------------------------------
       BORDES
       -------------------------------------------------------- */

    --color-border: #d9dfe3;
    --color-border-strong: #c4cdd3;

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

    --color-success: #39775c;
    --color-success-soft: #e9f3ee;

    --color-warning: #9c701f;
    --color-warning-soft: #fff5df;

    --color-danger: #ae414c;
    --color-danger-soft: #fbecee;

    --color-info: #39789f;
    --color-info-soft: #eaf2f7;

    /* --------------------------------------------------------
       ESTRUCTURA
       -------------------------------------------------------- */

    --sidebar-width: 250px;
    --topbar-height: 72px;

    /* --------------------------------------------------------
       FORMAS
       -------------------------------------------------------- */

    --radius-small: 3px;
    --radius-medium: 4px;
    --radius-large: 5px;

    /* --------------------------------------------------------
       SOMBRAS
       -------------------------------------------------------- */

    --shadow-small:
        0 2px 8px
        rgba(22, 42, 56, 0.05);

    --shadow-medium:
        0 7px 22px
        rgba(22, 42, 56, 0.07);
}


/* ============================================================
   RESET
   ============================================================ */

* {
    box-sizing: border-box;
}


html {

    min-height: 100%;

    background:
        var(--color-background);
}


body {

    margin: 0;

    min-height: 100vh;

    font-family:
        'Source Sans 3',
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        16px;

    color:
        var(--color-text);

    background:
        var(--color-background);

    line-height:
        1.5;
}


a {

    color:
        inherit;
}


button,
input,
select,
textarea {

    font:
        inherit;
}


/* ============================================================
   APP
   ============================================================ */

.app-shell {

    min-height:
        100vh;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.app-sidebar {

    position:
        fixed;

    inset:
        0 auto 0 0;

    z-index:
        1000;

    width:
        var(--sidebar-width);

    height:
        100vh;

    overflow-y:
        auto;

    background:
        #ffffff;

    border-right:
        1px solid
        var(--color-border);

    transition:
        transform 0.22s ease;
}


/* ============================================================
   MARCA
   ============================================================ */

.app-sidebar-brand {

    min-height:
        112px;

    display:
        flex;

    align-items:
        center;

    padding:
        24px 25px;

    border-bottom:
        1px solid
        var(--color-border);
}


.app-sidebar-brand-link {

    display:
        block;

    width:
        100%;

    text-decoration:
        none;
}


.app-sidebar-brand-link strong {

    display:
        block;

    margin:
        0;

    color:
        var(--color-primary-deep);

    font-family:
        'Libre Franklin',
        Arial,
        sans-serif;

    font-size:
        1.45rem;

    font-weight:
        800;

    letter-spacing:
        -0.03em;
}


.app-sidebar-brand-link strong::after {

    content: '';

    display:
        block;

    width:
        42px;

    height:
        3px;

    margin-top:
        9px;

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


.app-sidebar-brand-link span {

    display:
        block;

    margin-top:
        10px;

    color:
        var(--color-text-secondary);

    font-size:
        0.78rem;

    line-height:
        1.3;
}


/* ============================================================
   NAVEGACIÓN
   ============================================================ */

.app-navigation {

    padding:
        22px 0 30px;
}


.app-navigation-title {

    margin:
        0 25px 9px;

    color:
        var(--color-text-muted);

    font-size:
        0.69rem;

    font-weight:
        700;

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;
}


.app-navigation-title-account {

    margin-top:
        30px;
}


.app-navigation-link {

    position:
        relative;

    display:
        block;

    min-height:
        43px;

    margin:
        0;

    padding:
        11px 25px 11px 28px;

    border:
        0;

    border-left:
        3px solid
        transparent;

    border-radius:
        0;

    color:
        #47545e;

    text-decoration:
        none;

    font-size:
        0.94rem;

    font-weight:
        500;

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


.app-navigation-link:hover {

    color:
        var(--color-primary-dark);

    background:
        #f5f7f8;
}


.app-navigation-link.is-active {

    color:
        var(--color-primary-dark);

    border-left-color:
        var(--color-primary);

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

    font-weight:
        700;
}


.app-navigation-link.is-disabled {

    opacity:
        0.38;

    pointer-events:
        none;
}


.app-navigation-label {

    display:
        block;
}


.app-navigation-logout {

    margin-top:
        2px;

    color:
        #7e4a50;
}


.app-navigation-logout:hover {

    color:
        var(--color-danger);

    background:
        var(--color-danger-soft);
}


/* Ya no utilizamos emojis/iconos de navegación */

.app-navigation-icon {

    display:
        none !important;
}


/* ============================================================
   MAIN
   ============================================================ */

.app-main {

    min-height:
        100vh;

    margin-left:
        var(--sidebar-width);
}


/* ============================================================
   TOPBAR
   ============================================================ */

.app-topbar {

    position:
        sticky;

    top:
        0;

    z-index:
        900;

    min-height:
        var(--topbar-height);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        13px 32px;

    background:
        rgba(255, 255, 255, 0.97);

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

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


.app-topbar-left {

    display:
        flex;

    align-items:
        center;

    min-width:
        0;

    gap:
        16px;
}


.app-page-heading {

    margin:
        0;

    overflow:
        hidden;

    color:
        #35434d;

    font-family:
        'Source Sans 3',
        Arial,
        sans-serif;

    font-size:
        0.93rem;

    font-weight:
        600;

    letter-spacing:
        0.025em;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* ============================================================
   BOTÓN MENÚ MÓVIL
   ============================================================ */

.app-menu-button {

    display:
        none;

    align-items:
        center;

    gap:
        9px;

    padding:
        7px 10px;

    border:
        1px solid
        var(--color-border-strong);

    border-radius:
        2px;

    background:
        #ffffff;

    color:
        var(--color-text);

    cursor:
        pointer;
}


.app-menu-button-lines {

    width:
        18px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.app-menu-button-lines span {

    display:
        block;

    width:
        18px;

    height:
        1px;

    background:
        var(--color-primary-dark);
}


.app-menu-button-text {

    font-size:
        0.82rem;

    font-weight:
        600;
}


/* ============================================================
   TOPBAR DERECHA
   ============================================================ */

.app-topbar-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;
}


.app-notification-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    min-height:
        34px;

    padding:
        6px 10px;

    border:
        0;

    border-radius:
        0;

    background:
        transparent;

    color:
        var(--color-primary-dark);

    text-decoration:
        none;

    font-size:
        0.82rem;

    font-weight:
        600;
}


.app-notification-link:hover {

    color:
        var(--color-primary);
}


.app-notification-badge {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        21px;

    height:
        20px;

    padding:
        0 5px;

    border-radius:
        2px;

    background:
        var(--color-danger);

    color:
        #ffffff;

    font-size:
        0.68rem;

    font-weight:
        700;
}


.app-topbar-user {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;
}


.app-topbar-divider {

    display:
        block;

    width:
        1px;

    height:
        34px;

    background:
        var(--color-border);
}


.app-topbar-user-text {

    text-align:
        right;
}


.app-topbar-user-text strong {

    display:
        block;

    color:
        #25323c;

    font-size:
        0.91rem;

    font-weight:
        600;
}


.app-topbar-user-text small {

    display:
        block;

    margin-top:
        1px;

    color:
        var(--color-text-muted);

    font-size:
        0.72rem;

    font-weight:
        500;

    text-transform:
        capitalize;
}


/* Avatar antiguo */

.app-user-avatar {

    display:
        none !important;
}


/* ============================================================
   CONTENIDO
   ============================================================ */

.app-content {

    width:
        100%;

    max-width:
        1450px;

    margin:
        0 auto;

    padding:
        38px 42px 50px;
}


/* ============================================================
   INTRODUCCIÓN
   ============================================================ */

.page-intro {

    margin-bottom:
        36px;

    padding:
        0 0 22px;

    border-bottom:
        1px solid
        var(--color-border);
}


.page-intro::before {

    display:
        none;
}


.page-intro h1 {

    margin:
        0 0 7px;

    color:
        #17242e;

    font-family:
        'Libre Franklin',
        Arial,
        sans-serif;

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.55rem
        );

    font-weight:
        700;

    letter-spacing:
        -0.045em;
}


.page-intro p {

    max-width:
        830px;

    margin:
        0;

    color:
        var(--color-text-secondary);

    font-size:
        1.03rem;

    line-height:
        1.55;
}


/* ============================================================
   GRIDS
   ============================================================ */

.grid {

    display:
        grid;

    gap:
        0;
}


.grid-summary {

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(170px, 1fr)
        );

    margin:
        0 0 38px;

    background:
        #ffffff;

    border-top:
        2px solid
        var(--color-primary);

    border-bottom:
        1px solid
        var(--color-border);
}


.grid-modules {

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(230px, 1fr)
        );

    gap:
        1px;

    background:
        var(--color-border);
}


/* ============================================================
   MÉTRICAS
   ============================================================ */

.summary-card {

    position:
        relative;

    min-height:
        115px;

    padding:
        20px 24px;

    border:
        0;

    border-right:
        1px solid
        var(--color-border);

    border-radius:
        0;

    background:
        #ffffff;

    box-shadow:
        none;

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


.summary-card:last-child {

    border-right:
        0;
}


.summary-card::before,
.summary-card::after {

    display:
        none;
}


.summary-card-value {

    display:
        block;

    margin-bottom:
        9px;

    color:
        var(--color-primary-deep);

    font-family:
        'Libre Franklin',
        Arial,
        sans-serif;

    font-size:
        2rem;

    font-weight:
        700;

    line-height:
        1;
}


.summary-card-label {

    color:
        #6f7a82;

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


/* ============================================================
   CARDS GENERALES
   ============================================================ */

.card {

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-medium);

    background:
        #ffffff;

    box-shadow:
        none;
}


.card-body {

    padding:
        24px;
}


.card-title {

    margin:
        0 0 8px;

    color:
        #1b2933;

    font-family:
        'Libre Franklin',
        Arial,
        sans-serif;

    font-size:
        1.05rem;

    font-weight:
        600;
}


.card-text {

    margin:
        0;

    color:
        var(--color-text-secondary);

    line-height:
        1.55;
}


/* ============================================================
   MÓDULOS
   ============================================================ */

.module-card {

    display:
        block;

    min-height:
        150px;

    padding:
        24px;

    border:
        0;

    border-radius:
        0;

    background:
        #ffffff;

    box-shadow:
        none;

    color:
        inherit;

    text-decoration:
        none;

    transition:
        background 0.17s ease;
}


.module-card:hover {

    transform:
        none;

    background:
        #f6f9fb;
}


.module-card.is-disabled {

    opacity:
        0.45;

    pointer-events:
        none;
}


/* Oculta los emojis de los módulos existentes */

.module-card-icon {

    display:
        none !important;
}


.module-card h2 {

    margin:
        0 0 10px;

    color:
        #1d2a34;

    font-family:
        'Libre Franklin',
        Arial,
        sans-serif;

    font-size:
        1rem;

    font-weight:
        600;
}


.module-card p {

    margin:
        0;

    color:
        var(--color-text-secondary);

    line-height:
        1.5;
}


/* ============================================================
   PANELES EXISTENTES
   ============================================================ */

.panel-card,
.section-card,
.metric-card,
.filters-card,
.data-card,
.training-card,
.resource-card,
.talk-card,
.profile-card,
.detail-section,
.report-card,
.summary-box {

    border:
        1px solid
        var(--color-border) !important;

    border-radius:
        var(--radius-medium) !important;

    background:
        #ffffff !important;

    color:
        var(--color-text) !important;

    box-shadow:
        none !important;
}


.panel-card,
.section-card {

    overflow:
        hidden;
}


.panel-header,
.section-card-header,
.data-card-header,
.profile-card-header,
.report-card-header {

    border-bottom:
        1px solid
        var(--color-border);
}


.panel-header h2,
.section-card-header h2,
.data-card-header h2,
.training-card h2,
.resource-card h2,
.talk-card h2,
.talk-card-header h1,
.talk-card-header h2,
.profile-card-header h2,
.section-header h2,
.report-card-header h2 {

    color:
        #1c2933 !important;

    font-family:
        'Libre Franklin',
        Arial,
        sans-serif;

    font-weight:
        600 !important;
}


.panel-header p,
.section-card-header p,
.data-card-header p,
.training-card p,
.resource-card p,
.talk-card p,
.talk-card-header p,
.profile-card-header p,
.section-header p,
.report-card-header p {

    color:
        var(--color-text-secondary) !important;
}


/* ============================================================
   MÉTRICAS DE PÁGINAS INTERNAS
   ============================================================ */

.metric-card {

    border-radius:
        0 !important;

    border-top:
        2px solid
        var(--color-primary) !important;
}


.metric-card small {

    color:
        var(--color-text-secondary) !important;

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}


.metric-card strong {

    color:
        var(--color-primary-deep) !important;

    font-family:
        'Libre Franklin',
        Arial,
        sans-serif;

    font-weight:
        700;
}


/* ============================================================
   TABLAS
   ============================================================ */

table,
.data-table {

    width:
        100%;

    color:
        var(--color-text);

    border-collapse:
        collapse;
}


table th,
.data-table th {

    padding:
        12px 13px;

    border-bottom:
        1px solid
        var(--color-border-strong) !important;

    background:
        #f3f5f6 !important;

    color:
        #53616a !important;

    font-size:
        0.72rem !important;

    font-weight:
        700;

    letter-spacing:
        0.04em;

    text-align:
        left;

    text-transform:
        uppercase;
}


table td,
.data-table td {

    padding:
        13px;

    border-bottom:
        1px solid
        var(--color-border) !important;

    background:
        #ffffff;

    color:
        #34414a;
}


.data-table tbody tr:hover td {

    background:
        #f8fafb !important;
}


/* ============================================================
   REGISTROS
   ============================================================ */

.record {

    padding:
        15px 0;

    border:
        0 !important;

    border-bottom:
        1px solid
        var(--color-border) !important;

    border-radius:
        0 !important;

    background:
        transparent !important;
}


.record:hover {

    background:
        #fafbfc !important;
}


/* ============================================================
   BOTONES
   ============================================================ */

.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    min-height:
        39px;

    padding:
        8px 15px;

    border:
        1px solid
        transparent;

    border-radius:
        var(--radius-small);

    text-decoration:
        none;

    font-size:
        0.84rem;

    font-weight:
        600;

    cursor:
        pointer;

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


.btn:hover {

    transform:
        none;
}


.btn-primary {

    border-color:
        var(--color-primary);

    background:
        var(--color-primary);

    color:
        #ffffff;

    box-shadow:
        none;
}


.btn-primary:hover {

    border-color:
        var(--color-primary-dark);

    background:
        var(--color-primary-dark);
}


.btn-secondary {

    border-color:
        var(--color-border-strong);

    background:
        #ffffff;

    color:
        #40505b;
}


.btn-secondary:hover {

    border-color:
        #9eafb9;

    background:
        #f4f6f7;
}


.btn-danger {

    border-color:
        var(--color-danger);

    background:
        var(--color-danger);

    color:
        #ffffff;
}


.btn-danger:hover {

    border-color:
        #963741;

    background:
        #963741;
}


/* ============================================================
   FORMULARIOS
   ============================================================ */

input,
select,
textarea,
.form-control {

    border:
        1px solid
        var(--color-border-strong) !important;

    border-radius:
        var(--radius-small) !important;

    background:
        #ffffff !important;

    color:
        var(--color-text) !important;

    outline:
        none;

    box-shadow:
        none !important;

    transition:
        border-color 0.16s ease;
}


input:hover,
select:hover,
textarea:hover {

    border-color:
        #a5b3bc;
}


input:focus,
select:focus,
textarea:focus,
.form-control:focus {

    border-color:
        var(--color-primary) !important;

    box-shadow:
        0 0 0 2px
        rgba(20, 87, 128, 0.08) !important;
}


input::placeholder,
textarea::placeholder {

    color:
        #9ca5ab;
}


select option {

    background:
        #ffffff;

    color:
        #222d35;
}


.form-control[readonly] {

    background:
        #f4f5f6 !important;

    color:
        var(--color-text-secondary) !important;
}


/* ============================================================
   LINKS
   ============================================================ */

.panel-link {

    color:
        var(--color-primary) !important;

    font-size:
        0.81rem;

    font-weight:
        600;

    text-decoration:
        none;
}


.panel-link:hover {

    color:
        var(--color-primary-dark) !important;

    text-decoration:
        underline;
}


.view-link {

    border:
        0 !important;

    border-bottom:
        1px solid
        var(--color-primary) !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    color:
        var(--color-primary) !important;

    font-size:
        0.78rem !important;

    font-weight:
        600;
}


.view-link:hover {

    color:
        var(--color-primary-dark) !important;
}


/* ============================================================
   ESTADOS
   ============================================================ */

.status-badge,
.badge,
.priority-badge {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        23px;

    padding:
        3px 7px;

    border:
        1px solid
        currentColor;

    border-radius:
        2px !important;

    font-size:
        0.68rem !important;

    font-weight:
        700;

    letter-spacing:
        0.035em;

    text-transform:
        uppercase;
}


.status-submitted,
.status-completed,
.status-published {

    background:
        var(--color-success-soft) !important;

    color:
        var(--color-success) !important;
}


.status-reviewed,
.status-scheduled {

    background:
        var(--color-info-soft) !important;

    color:
        var(--color-info) !important;
}


.status-draft,
.badge-warning {

    background:
        var(--color-warning-soft) !important;

    color:
        var(--color-warning) !important;
}


.status-cancelled,
.badge-danger,
.priority-critica {

    background:
        var(--color-danger-soft) !important;

    color:
        var(--color-danger) !important;
}


.status-archived {

    background:
        #eef0f1 !important;

    color:
        #6e787e !important;
}


.badge-primary {

    background:
        var(--color-primary-soft) !important;

    color:
        var(--color-primary) !important;
}


.badge-high {

    background:
        #fff2e7 !important;

    color:
        #a76632 !important;
}


/* ============================================================
   ACTION CARD
   ============================================================ */

.action-card {

    border:
        0 !important;

    border-top:
        1px solid
        var(--color-border) !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    color:
        var(--color-text) !important;

    box-shadow:
        none !important;
}


.action-card:hover {

    border-color:
        var(--color-primary) !important;

    background:
        #f8fafb !important;

    box-shadow:
        none !important;
}


.action-card h3 {

    color:
        #1d2932 !important;

    font-family:
        'Libre Franklin',
        Arial,
        sans-serif;
}


.action-card p {

    color:
        var(--color-text-secondary) !important;
}


/* ============================================================
   INFORMACIÓN
   ============================================================ */

.unit-row {

    border-bottom-color:
        var(--color-border) !important;
}


.unit-row small {

    color:
        var(--color-text-muted) !important;

    font-size:
        0.7rem;

    font-weight:
        700;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;
}


.unit-row strong {

    color:
        #27343d !important;
}


.meta-item,
.profile-summary-item,
.summary-item {

    border:
        0 !important;

    border-bottom:
        1px solid
        var(--color-border) !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    color:
        var(--color-text) !important;
}


.meta-item small,
.profile-summary-item small,
.summary-item small {

    color:
        var(--color-text-secondary) !important;
}


.meta-item strong,
.profile-summary-item strong,
.summary-item strong {

    color:
        #1e2b34 !important;
}


/* ============================================================
   OBSERVACIONES
   ============================================================ */

.observations {

    border:
        1px solid
        var(--color-border) !important;

    border-left:
        3px solid
        var(--color-primary) !important;

    border-radius:
        0 !important;

    background:
        #f8fafb !important;

    color:
        var(--color-text) !important;
}


/* ============================================================
   OTROS ELEMENTOS
   ============================================================ */

.resource-cover {

    background:
        #eef2f4 !important;
}


.toolbar {

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


.main-name {

    color:
        #1d2932 !important;

    font-weight:
        600;
}


.data-table small {

    color:
        var(--color-text-secondary) !important;
}


.empty-state {

    color:
        var(--color-text-secondary) !important;
}


/* ============================================================
   ALERTAS
   ============================================================ */

.alert {

    margin-bottom:
        20px;

    padding:
        13px 15px;

    border:
        1px solid transparent;

    border-radius:
        2px;

    font-size:
        0.94rem;
}


.alert-success {

    border-color:
        #c8ded3;

    background:
        var(--color-success-soft);

    color:
        var(--color-success);
}


.alert-warning {

    border-color:
        #ead9ac;

    background:
        var(--color-warning-soft);

    color:
        var(--color-warning);
}


.alert-danger {

    border-color:
        #eac4c8;

    background:
        var(--color-danger-soft);

    color:
        var(--color-danger);
}


/* ============================================================
   FOOTER
   ============================================================ */

.app-footer {

    padding:
        20px 30px 28px;

    color:
        var(--color-text-muted);

    text-align:
        center;

    font-size:
        0.75rem;
}


/* ============================================================
   SIDEBAR OVERLAY
   ============================================================ */

.app-sidebar-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        950;

    display:
        none;

    background:
        rgba(19, 31, 40, 0.35);
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {

    width:
        8px;

    height:
        8px;
}


::-webkit-scrollbar-track {

    background:
        #f0f2f3;
}


::-webkit-scrollbar-thumb {

    background:
        #aeb8be;
}


::-webkit-scrollbar-thumb:hover {

    background:
        #89969e;
}


/* ============================================================
   SELECCIÓN
   ============================================================ */

::selection {

    background:
        #dceaf2;

    color:
        #17242e;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (
    max-width: 980px
) {

    .app-sidebar {

        transform:
            translateX(-100%);
    }


    body.sidebar-open
    .app-sidebar {

        transform:
            translateX(0);
    }


    body.sidebar-open
    .app-sidebar-overlay {

        display:
            block;
    }


    .app-main {

        margin-left:
            0;
    }


    .app-menu-button {

        display:
            inline-flex;
    }


    .app-content {

        padding:
            28px 24px 42px;
    }


    .summary-card {

        border-bottom:
            1px solid
            var(--color-border);
    }
}


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

@media (
    max-width: 620px
) {

    .app-topbar {

        min-height:
            64px;

        padding:
            10px 14px;
    }


    .app-page-heading {

        font-size:
            0.82rem;
    }


    .app-menu-button-text {

        display:
            none;
    }


    .app-topbar-actions {

        gap:
            9px;
    }


    .app-notification-link > span:first-child {

        display:
            none;
    }


    .app-notification-link {

        min-width:
            31px;

        justify-content:
            center;

        padding:
            4px;
    }


    .app-notification-link::before {

        content:
            'Avisos';

        font-size:
            0.72rem;
    }


    .app-topbar-user {

        display:
            none;
    }


    .app-content {

        padding:
            24px 15px 36px;
    }


    .page-intro {

        margin-bottom:
            27px;
    }


    .page-intro h1 {

        font-size:
            1.65rem;
    }


    .page-intro p {

        font-size:
            0.96rem;
    }


    .grid-summary {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .summary-card {

        min-height:
            100px;

        padding:
            18px 16px;

        border-right:
            1px solid
            var(--color-border);

        border-bottom:
            1px solid
            var(--color-border);
    }


    .summary-card-value {

        font-size:
            1.65rem;
    }


    .grid-modules {

        grid-template-columns:
            1fr;
    }


    .module-card {

        min-height:
            auto;

        padding:
            20px;
    }


    .btn {

        min-height:
            42px;
    }
}


/* ============================================================
   TELÉFONOS MUY PEQUEÑOS
   ============================================================ */

@media (
    max-width: 390px
) {

    .grid-summary {

        grid-template-columns:
            1fr;
    }


    .summary-card {

        border-right:
            0;
    }
}


/* ============================================================
   REDUCIR MOVIMIENTO
   ============================================================ */

@media (
    prefers-reduced-motion:
    reduce
) {

    *,
    *::before,
    *::after {

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }
}