:root  {
    --blue-950: #0b1f4d;
    --blue-900: #123a7a;
    --blue-800: #174ea6;
    --blue-700: #1d5fd1;
    --blue-600: #2563eb;
    --blue-500: #3b82f6;
    --blue-100: #dbeafe;
    --blue-50: #eff6ff;
    --ink: #0f172a;
    --muted: #64748b;
    --line: #d8e3f0;
    --bg: #f4f8fd;
    --danger: #b42318;
    --success: #067647;
    --shadow:0 10px 30px rgba(15,64,128,.08)
}

*  {
    box-sizing:border-box
}

body  {
    margin: 0;
    font-family: Inter,system-ui,-apple-system,Segoe UI,sans-serif;
    background: linear-gradient(180deg,#f7faff 0,#eef5fc 100%);
    color:var(--ink)
}

a  {
    color:inherit
}

header  {
    height: 68px;
    background: linear-gradient(120deg,var(--blue-950),var(--blue-700));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26px;
    box-shadow: 0 4px 18px rgba(11,31,77,.22);
    position: sticky;
    top: 0;
    z-index:50
}

header strong  {
    letter-spacing:.35px
}

header small  {
    display: block;
    opacity: .78;
    margin-top:2px
}

.layout  {
    display: grid;
    grid-template-columns: 244px 1fr;
    min-height:calc(100vh - 68px)
}

nav  {
    background: #fff;
    border-right: 1px solid var(--line);
    padding: 20px 14px;
    box-shadow:4px 0 22px rgba(15,64,128,.04)
}

nav a  {
    display: flex;
    align-items: center;
    padding: 11px 13px;
    text-decoration: none;
    border-radius: 10px;
    margin-bottom: 5px;
    color: #29405e;
    font-weight: 650;
    transition:.18s ease
}

nav a:hover,
nav a.active {
    background: var(--blue-50);
    color: var(--blue-700);
    transform:translateX(2px)
}

main  {
    padding: 30px;
    overflow:auto;
    position: relative;
    z-index: 1
}

h1  {
    margin-top: 0;
    color:#12325f
}

h2,
h3 {
    color:#173d69
}

.toolbar  {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin: 0 0 16px;
    flex-wrap:wrap
}

.card  {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 22px;
    box-shadow:var(--shadow)
}

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

label  {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 650;
    color:#243b5a
}

input,
select,textarea {
    padding: 10px 11px;
    border: 1px solid #bfd0e5;
    border-radius: 9px;
    font: inherit;
    background: #fff;
    color: var(--ink);
    outline: none;
    transition:.15s
}

input:focus,
select:focus,textarea:focus {
    border-color: var(--blue-500);
    box-shadow:0 0 0 3px rgba(59,130,246,.14)
}

select[multiple]  {
    min-height:130px
}

textarea  {
    min-height:86px
}

button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: linear-gradient(135deg,var(--blue-700),var(--blue-600));
    color: #fff;
    border: 0;
    border-radius: 9px;
    padding: 10px 16px;
    font-weight: 750;
    cursor: pointer;
    text-decoration: none;
    transition: .15s;
    box-shadow:0 5px 14px rgba(37,99,235,.18)
}

button:hover,
.btn:hover {
    filter: brightness(1.04);
    transform:translateY(-1px)
}

button.secondary,
.btn.secondary {
    background: #fff;
    color: var(--blue-700);
    border: 1px solid #b9d0ef;
    box-shadow:none
}

button.danger,
.btn.danger {
    background: #fff;
    color: var(--danger);
    border: 1px solid #f0b8b3;
    box-shadow:none
}

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

.actions button  {
    padding: 7px 10px;
    margin: 0;
    font-size:13px
}

table  {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:var(--shadow)
}

th,
td {
    padding: 11px 12px;
    border-bottom: 1px solid #e7edf5;
    text-align: left;
    vertical-align:middle
}

tr:last-child td  {
    border-bottom:0
}

th  {
    background: linear-gradient(180deg,#f1f6fd,#eaf2fb);
    color: #24486f;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing:.25px
}

tbody tr:hover  {
    background:#f8fbff
}

.stats  {
    display: grid;
    grid-template-columns: repeat(4,minmax(160px,1fr));
    gap:14px
}

.stats article  {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    box-shadow: var(--shadow);
    border-top:3px solid var(--blue-500)
}

.stats b  {
    font-size: 30px;
    display: block;
    color:var(--blue-800)
}

.stats span,
.muted {
    color:var(--muted)
}

.login-wrap  {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:radial-gradient(circle at top right,#dbeafe,#eef6ff 42%,#f8fbff)
}

.login  {
    width: min(440px,92vw);
    border-top:4px solid var(--blue-600)
}

.alert  {
    padding: 12px 14px;
    border-radius: 9px;
    margin:12px 0
}

.error  {
    background: #fff1f0;
    color:#922
}

.success  {
    background: #ecfdf3;
    color:var(--success)
}

.order-list  {
    display: flex;
    flex-direction: column;
    gap:8px
}

.order-item  {
    background: #f7faff;
    border: 1px solid #d6e5f7;
    padding: 10px 12px;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    cursor:grab
}

.order-item.dragging  {
    opacity:.45
}

.drag-handle  {
    font-size: 18px;
    color:#6b8db4
}

.votes  {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    gap: 10px;
    margin:14px 0
}

.votes label  {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding:10px
}

.badge  {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 750;
    background: var(--blue-50);
    color:var(--blue-700)
}

.badge.ok  {
    background: #ecfdf3;
    color:#067647
}

.badge.warn  {
    background: #fff7ed;
    color:#b54708
}

.badge.off  {
    background: #f2f4f7;
    color:#667085
}

.modal-backdrop  {
    position: fixed;
    inset: 0;
    background: rgba(2,18,47,.48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index:100
}

.modal-backdrop.open  {
    display:flex
}

.modal  {
    background: #fff;
    width: min(820px,96vw);
    max-height: 92vh;
    overflow: auto;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(2,18,47,.3);
    border:1px solid #cbdcf1
}

.modal-head  {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(120deg,var(--blue-950),var(--blue-700));
    color: #fff;
    border-radius:15px 15px 0 0
}

.modal-head h2  {
    margin: 0;
    color: #fff;
    font-size:19px
}

.modal-body  {
    padding:20px
}

.modal-foot  {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding:0 20px 20px
}

.icon-preview  {
    width: 58px;
    height: 58px;
    border: 1px dashed #9fb9d8;
    border-radius: 10px;
    object-fit: contain;
    background: #f8fbff;
    padding:5px
}

.progress  {
    height: 10px;
    background: #e7eef8;
    border-radius: 999px;
    overflow:hidden
}

.progress>span  {
    display: block;
    height: 100%;
    background:linear-gradient(90deg,var(--blue-600),#60a5fa)
}

.section-title  {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin:24px 0 12px
}

.empty  {
    padding: 20px;
    text-align: center;
    color:var(--muted)
}

fieldset  {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding:14px
}

legend  {
    padding: 0 6px;
    font-weight: 700;
    color:#24486f
}

@media(max-width:800px)  {
    header  {
        height: auto;
        min-height: 68px;
        gap: 10px;
        flex-wrap: wrap;
        padding:14px 18px
    }

    .layout  {
        grid-template-columns:1fr
    }

    nav  {
        display: flex;
        overflow: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 10px;
        position: sticky;
        top: 68px;
        z-index:40
    }

    nav a  {
        white-space: nowrap;
        margin:0 4px 0 0
    }

    .stats  {
        grid-template-columns:1fr 1fr
    }

    main  {
        padding:18px
    }

}

@media(max-width:520px)  {
    .stats  {
        grid-template-columns:1fr
    }

}

/* Configuración electoral por alcance */

.check-list  {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin-top: .55rem;
}

.check-list.horizontal  {
    flex-direction: row;
    flex-wrap: wrap;
}

.check-row  {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-weight: 600;
}

.check-row input[type="checkbox"],
.check-row input[type="radio"] {
    width: auto;
    margin: 0;
}

.scope-list  {
    max-height: 260px;
    overflow: auto;
    padding-right: .35rem;
}

.scope-region  {
    font-weight: 700;
}

.scope-provincia  {
    padding-left: .8rem;
}

.scope-distrito  {
    padding-left: 1.6rem;
}

.scope-selectors  {
    margin-top: 1rem;
}

/* Locales, cédula visual y registro de votos */

.option-symbol-small {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #fff;
    padding: 4px;
    flex:0 0 auto
}

.option-symbol-placeholder {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px dashed #93c5fd;
    border-radius: 10px;
    color: #64748b;
    background:#f8fafc
}

.option-order-name {
    font-weight: 700;
    flex:1
}

.order-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height:66px
}

.vote-card {
    position: relative;
    display: flex!important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    text-align: center;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #fff;
    padding: 14px;
    min-width: 170px;
    box-shadow:0 5px 18px rgba(15,23,42,.06)
}

.vote-symbol {
    width: 96px;
    height: 96px;
    object-fit: contain;
    background: #fff;
    border-radius:10px
}

.vote-symbol-empty {
    display: grid;
    place-items: center;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    font-size:12px
}

.vote-position {
    position: absolute;
    top: 9px;
    left: 9px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-weight:700
}

.vote-label {
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing:.05em
}

.vote-number {
    width: 100%;
    font-size: 24px!important;
    font-weight: 700;
    text-align:center
}

.votes {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
    gap: 14px;
    margin:14px 0 20px
}

.validation-ok,
.validation-warn {
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 700;
    margin:8px 0 16px
}

.validation-ok {
    background: #ecfdf5;
    color: #047857;
    border:1px solid #a7f3d0
}

.validation-warn {
    background: #fff7ed;
    color: #c2410c;
    border:1px solid #fed7aa
}

.modal-wide {
    max-width: 1050px;
    width:min(1050px,96vw)
}

.inline-form {
    display: grid;
    grid-template-columns: 1.2fr 1fr .8fr auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 18px;
    padding: 12px;
    background: #eff6ff;
    border-radius:12px
}

.compact-table {
    margin-top:12px
}

.compact-table td,
.compact-table th {
    padding:9px
}

.actions-inline {
    display: flex;
    gap: 6px;
    flex-wrap:wrap
}

.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
    gap:8px
}

.dni-inline {
    display: flex;
    gap: 7px;
    align-items:center
}

.dni-inline input {
    flex:1
}

.dni-inline button {
    white-space:nowrap
}

.toolbar.compact {
    justify-content: flex-start;
    gap: 8px;
    margin:4px 0 10px
}

.span-2 {
    grid-column:span 2
}

@media(max-width:760px) {
    .inline-form {
        grid-template-columns:1fr
    }

    .span-2 {
        grid-column:auto
    }

    .vote-symbol {
        width: 78px;
        height:78px
    }

}

/* ============================================================
   CAMPOS NUMÉRICOS
   Oculta los controles spinner de los input type="number".
============================================================ */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ============================================================
   REGISTRO DE ACTAS - BÚSQUEDA INCREMENTAL DE MESAS
============================================================ */
.mesa-search-field {
    position: relative;
}

.mesa-suggestions {
    position: absolute;
    z-index: 50;
    top: calc(100% - 4px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.16);
}

.mesa-suggestion {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    background: #ffffff;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
}

.mesa-suggestion:last-child {
    border-bottom: 0;
}

.mesa-suggestion:hover,
.mesa-suggestion:focus {
    background: #eff6ff;
}

.mesa-suggestion strong {
    color: #1d4ed8;
}

.mesa-suggestion span {
    font-size: 12px;
    color: #64748b;
}

.mesa-suggestion-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mesa-suggestion-head strong {
    min-width: 0;
}

.mesa-suggestion .mesa-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .03em;
}

.mesa-status-pending {
    background: #eef2f7;
    color: #64748b !important;
}

.mesa-status-progress {
    background: #fff7d6;
    color: #9a6700 !important;
}

.mesa-status-finished {
    background: #e8f7ee;
    color: #087a3e !important;
}

.mesa-suggestion-finished .mesa-number {
    color: #64748b;
    text-decoration-line: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: #64748b;
}

.mesa-suggestion-finished strong {
    color: #64748b;
}

.mesa-suggestion-progress strong {
    color: #9a6700;
}

.mesa-suggestion-location {
    display: block;
    padding-right: 4px;
}

.mesa-suggestion-empty {
    padding: 12px;
    color: #64748b;
}

.act-existing-notice {
    margin: 14px 0;
    padding: 12px 14px;
    border-radius: 10px;
    font-weight: 600;
}

.act-existing-notice.editable {
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.act-existing-notice.readonly {
    color: #1e3a8a;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

/* ============================================================
   SEGUIMIENTO DE ACTAS
============================================================ */
.act-tracking-filter {
    margin-top: 18px;
    margin-bottom: 14px;
}

.act-tracking-sync {
    display: flex;
    align-items: flex-end;
}

.act-tracking-sync button {
    width: 100%;
}

.act-tracking-totals {
    margin-top: 0;
}

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

#actTrackingSummaryTable th,
#actTrackingSummaryTable td {
    text-align: left;
}

@media (max-width: 760px) {
    .act-tracking-sync {
        align-items: stretch;
    }
}

/* ============================================================
   RESULTADOS - FILTROS Y DIAGRAMA DE BARRAS
============================================================ */
.result-filter-card,
.result-act-filter {
    margin-bottom: 16px;
}

.result-bars {
    display: grid;
    gap: 12px;
}

.result-bar-row {
    display: grid;
    grid-template-columns: 42px minmax(220px, 1.1fr) minmax(180px, 2fr) 110px;
    gap: 14px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border, #d9dee7);
}

.result-bar-row:last-child {
    border-bottom: 0;
}

.result-bar-rank {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #eef4ff;
    color: #174a8b;
    font-weight: 800;
}

.result-bar-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.result-bar-option img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #d9dee7;
}

.result-bar-option strong,
.result-bar-option small {
    display: block;
}

.result-bar-option small {
    margin-top: 3px;
    color: #64748b;
}

.result-bar-graph {
    position: relative;
    height: 24px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8edf5;
}

.result-bar-fill {
    height: 100%;
    min-width: 2px;
    border-radius: inherit;
    background: linear-gradient(90deg, #1d63d6, #2f7bea);
}

.result-bar-value {
    text-align: right;
}

.result-bar-value strong,
.result-bar-value span {
    display: block;
}

.result-bar-value strong {
    font-size: 15px;
    line-height: 1.2;
}

.result-bar-value span {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .result-bar-row {
        grid-template-columns: 36px minmax(0, 1fr) 90px;
    }

    .result-bar-graph {
        grid-column: 2 / -1;
    }
}

@media (max-width: 560px) {
    .result-bar-row {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .result-bar-value {
        grid-column: 2;
        text-align: left;
    }

    .result-bar-graph {
        grid-column: 1 / -1;
    }
}

/* ============================================================
   LOGIN AREQUIPA - AZUL PLATEADO
   Este bloque solo afecta a la pantalla de inicio de sesión.
============================================================ */
.login-wrap {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 18px;
    background:
        linear-gradient(
            rgba(8, 20, 42, 0.42),
            rgba(8, 20, 42, 0.56)
        ),
        url("../img/login_fondo_limpio.png")
        center center / cover no-repeat;
    overflow: hidden;
}

.login-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 18% 22%,
            rgba(67, 136, 255, 0.24),
            transparent 26%
        ),
        radial-gradient(
            circle at 82% 14%,
            rgba(190, 204, 226, 0.16),
            transparent 22%
        ),
        linear-gradient(
            135deg,
            rgba(14, 69, 153, 0.18),
            transparent 35%
        ),
        linear-gradient(
            315deg,
            rgba(137, 154, 184, 0.14),
            transparent 26%
        );
    pointer-events: none;
}

.login-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 500px);
}

.login-card {
    padding: 28px 28px 24px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background:
        linear-gradient(
            180deg,
            rgba(234, 241, 251, 0.95),
            rgba(203, 217, 237, 0.90)
        );
    box-shadow:
        0 24px 60px rgba(4, 24, 58, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.login-brand {
    margin-bottom: 18px;
}

.login-badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(32, 95, 206, 0.12);
    color: #16418f;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.login-brand h1 {
    margin: 0 0 8px;
    color: #133f85;
    font-size: clamp(34px, 4vw, 46px);
    line-height: 1.05;
}

.login-brand p {
    margin: 0;
    color: #354861;
    font-size: 18px;
}

.login-section-title h2 {
    margin: 0 0 4px;
    color: #143f81;
    font-size: 21px;
}

.login-section-title span {
    color: #4f6480;
    font-size: 14px;
}

.login-form {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.login-form label {
    color: #133a73;
    font-weight: 700;
}

.login-form input {
    height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(141, 160, 191, 0.85);
    background: rgba(245, 248, 253, 0.96);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.75);
}

.login-form input:focus {
    outline: none;
    border-color: #2e77e5;
    box-shadow:
        0 0 0 4px rgba(46, 119, 229, 0.16);
}

.login-button {
    width: 100%;
    margin-top: 4px;
    padding: 14px 18px;
    border-radius: 16px;
    background:
        linear-gradient(
            180deg,
            #2f8dff,
            #1f63dd 62%,
            #194eb8
        );
    color: #ffffff;
    font-size: 18px;
    letter-spacing: 0.01em;
    box-shadow:
        0 14px 30px rgba(18, 86, 188, 0.34);
}

.login-button:hover {
    filter: brightness(1.05);
}

.login-footnote {
    margin-top: 18px;
    text-align: center;
    color: #50637f;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-card .alert.error {
    background: rgba(255, 235, 238, 0.94);
    color: #9a1e36;
    border: 1px solid rgba(154, 30, 54, 0.20);
}

@media (max-width: 560px) {
    .login-wrap {
        padding: 18px;
    }

    .login-card {
        padding: 22px 18px 20px;
        border-radius: 22px;
    }

    .login-brand h1 {
        font-size: 32px;
    }

    .login-brand p {
        font-size: 16px;
    }
}


/* ============================================================
   MENÚ LATERAL - BLOQUE INFORMATIVO AZUL PLATEADO
============================================================ */
.side-nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: calc(100vh - 68px);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(241,247,255,0.98));
    position: sticky;
    top: 68px;
    overflow: hidden;
    align-self: start;
}

.side-nav-links {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.side-nav-promo {
    margin-top: auto;
    flex: 0 0 auto;
    border: 1px solid rgba(167, 192, 225, 0.85);
    border-radius: 18px;
    padding: 14px;
    background:
        linear-gradient(180deg, rgba(238,244,252,0.98), rgba(214,225,242,0.96));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.75),
        0 12px 26px rgba(28, 64, 119, 0.12);
    overflow: hidden;
}

.side-nav-promo-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.10);
    color: #1d4fa9;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.side-nav-promo h3 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.2;
    color: #143c79;
}

.side-nav-promo p {
    margin: 0 0 12px;
    color: #4b6486;
    font-size: 12.5px;
    line-height: 1.45;
}

.side-nav-promo-art {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(170, 193, 223, 0.75);
    background:
        linear-gradient(135deg, rgba(23,78,166,0.16), rgba(226,234,246,0.28));
}

.side-nav-promo-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(18,58,122,0.16), transparent 40%),
        linear-gradient(315deg, rgba(255,255,255,0.18), transparent 38%);
    pointer-events: none;
}

.side-nav-promo-art img {
    display: block;
    width: 100%;
    height: 124px;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 800px) {
    .side-nav {
        position: static;
        height: auto;
        min-height: auto;
    }

    .side-nav-promo {
        min-width: 250px;
        margin-top: 0;
    }

    .side-nav-promo-art img {
        height: 110px;
    }
}


/* ============================================================
   LOGIN - FONDO LIMPIO, NÍTIDO Y SIN RECORTE
============================================================ */
.login-wrap {
    background-image: url("../img/login_fondo_limpio.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 100% 100% !important;
    background-color: #102b58 !important;
}

.login-overlay {
    background: linear-gradient(
        90deg,
        rgba(6, 20, 45, 0.05),
        rgba(6, 20, 45, 0.00) 50%,
        rgba(6, 20, 45, 0.05)
    ) !important;
}

.login-card {
    background: linear-gradient(
        180deg,
        #f3f6fa 0%,
        #dce6f3 100%
    ) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
        0 22px 52px rgba(3, 21, 55, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

.login-shell::before {
    display: none !important;
}

@media (max-width: 800px) {
    .login-wrap {
        background-size: cover !important;
    }
}

/* ============================================================
   MENÚ LATERAL - AZUL PLATEADO
============================================================ */
.side-nav {
    background:
        linear-gradient(
            180deg,
            #e9f0f9 0%,
            #d3dfef 46%,
            #bdcee4 100%
        ) !important;
    border-right: 1px solid #a9bfdc !important;
    box-shadow:
        inset -1px 0 0 rgba(255,255,255,0.62),
        4px 0 20px rgba(21,58,112,0.10) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.side-nav-links a {
    color: #183d70 !important;
}

.side-nav-links a:hover,
.side-nav-links a.active {
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.72),
            rgba(211,225,244,0.92)
        ) !important;
    color: #075ed0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.75),
        0 4px 12px rgba(41,91,159,0.08);
}

.side-nav-promo {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    border: 1px solid #90add2 !important;
    background:
        linear-gradient(
            180deg,
            rgba(242,247,253,0.94),
            rgba(209,223,241,0.96)
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.80),
        0 10px 22px rgba(30,67,122,0.12) !important;
}

.side-nav-promo h3 {
    color: #133f7d !important;
    font-size: 17px !important;
}

.side-nav-promo p {
    color: #45617f !important;
    font-size: 12.5px !important;
}

.side-nav-promo-art {
    width: 100% !important;
    max-width: 100% !important;
    height: 128px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}

.side-nav-promo-art img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 128px !important;
    object-fit: cover !important;
    object-position: center !important;
}