/* ============================================================
   RindeYa 2026 — Paleta tomada de los CSS del proyecto original:
   - #145388  azul corporativo (master_style.css / login)
   - #F7941D  naranja RindeYa (hr de títulos)  /  #f57c00 hover
   - #3AB5F6  azul botones (Swal)  /  #3FA9F5  /  #005BA7 títulos
   - #28364b  labels  /  #5c5c5c body  /  #363636 textos oscuros
   - inputs:  fondo #F7F7F7, borde #E0E0E0, radio 8px
   - header_gv: encabezados de grilla uppercase + bold
   - Fuentes: Nunito (títulos) y Heebo (textos)
   ============================================================ */

:root {
    --ry-azul: #145388;
    --ry-azul-claro: #2a93d5;
    --ry-azul-boton: #3AB5F6;
    --ry-azul-texto: #3FA9F5;
    --ry-azul-titulo: #005BA7;
    --ry-naranja: #F7941D;
    --ry-naranja-hover: #f57c00;
    --ry-amarillo: #fcc525;
    --ry-label: #28364b;
    --ry-texto: #5c5c5c;
    --ry-texto-oscuro: #363636;
    --ry-input-bg: #F7F7F7;
    --ry-input-borde: #E0E0E0;
    --ry-verde: #28a745;
    --ry-rojo: #dc3545;
}

html, body {
    font-family: 'Heebo', 'Segoe UI', Helvetica, Arial, sans-serif;
    color: var(--ry-texto);
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .kpi-valor {
    font-family: 'Nunito', 'Segoe UI', sans-serif;
}

.page { min-height: 100vh; overflow-x: hidden; }

/* ===== Título de página (réplica de pagina-titulo-general + hr #F7941D) ===== */
.content > h4:first-child,
.content h4.titulo-pagina {
    color: #000;
    font-weight: 700;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--ry-naranja);
    margin-bottom: 1rem !important;
}

.content > h4:first-child i,
.content h4.titulo-pagina i {
    color: var(--ry-naranja);
}

/* Encabezados de página dentro de un contenedor flex (título + botones) */
.content > div:first-child:has(> h4) {
    border-bottom: 2px solid var(--ry-naranja);
    padding-bottom: .5rem;
    margin-bottom: 1rem;
}

.content > div:first-child > h4 { color: #000; font-weight: 700; }
.content > div:first-child > h4 i { color: var(--ry-naranja); }

/* ===== Sidebar (azul corporativo #145388) ===== */
.sidebar {
    width: 260px;
    min-height: 100vh;
    background: linear-gradient(180deg, #145388 0%, #0f4470 100%) !important;
    flex-shrink: 0;
    overflow-y: auto;
}

.sidebar .navbar-brand {
    font-size: 1.25rem;
    border-bottom: 2px solid var(--ry-naranja);
    padding-bottom: .6rem;
}

.sidebar .navbar-brand i { color: var(--ry-amarillo); }

/* Logo pequeño de RindeYa en el sidebar (img/Logo-RindeYa.png del original) */
.sidebar-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 8px;
    padding: 4px 6px;
    margin-right: 8px;
    vertical-align: middle;
}

.sidebar-logo img { height: 26px; display: block; }

.menu-group { margin-bottom: .75rem; }

.menu-title {
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8fc1e9;
    margin: .5rem 0 .25rem .25rem;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
}

.menu-title-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: .4rem;
}

.menu-title-toggle:hover { color: #ffda77; }

.menu-chevron {
    font-size: .6rem;
    transition: transform .2s ease;
}

/* Rota el chevron cuando el collapse está cerrado */
.menu-title-toggle[aria-expanded="false"] .menu-chevron {
    transform: rotate(-90deg);
}

.sidebar .nav-link {
    color: #e8f1f8;
    padding: .3rem .5rem;
    border-radius: .35rem;
    font-size: .875rem;
    transition: background .14s, color .16s;
}

.sidebar .nav-link:hover {
    background: rgba(255, 255, 255, .1);
    color: #ffda77;
}

.sidebar .nav-link.active {
    background: var(--ry-naranja);
    color: #fff;
    font-weight: 600;
}

/* Menú lateral minimizable: el contenido ocupa toda la pantalla.
   La clase ry-menu-oculto vive en <html> (la maneja rindeyaToggleMenu en site.js) */
.sidebar {
    transition: margin-left .25s ease;
}

html.ry-menu-oculto .sidebar {
    margin-left: -260px;
}

/* Ícono del botón según el estado del menú (puro CSS, sin re-render) */
.btn-toggle-menu .icono-menu-oculto { display: none; }
html.ry-menu-oculto .btn-toggle-menu .icono-menu-visible { display: none; }
html.ry-menu-oculto .btn-toggle-menu .icono-menu-oculto { display: inline; }

/* ===== Topbar (navbar blanca con hover naranja, como el original) ===== */
.topbar {
    box-shadow: 0 2px 8px #eee;
}

.topbar .text-primary { color: var(--ry-azul) !important; }

.topbar .dropdown-item:hover,
.topbar .dropdown-item:focus {
    background: #f8f8fb;
    color: var(--ry-naranja-hover) !important;
}

/* Botón minimizar menú: estilo neutro (sin el gradiente del avatar) */
.topbar .btn-toggle-menu {
    background: #f6f7f9 !important;
    color: var(--ry-azul) !important;
    border: 1px solid #e4e7ea !important;
    font-weight: 600;
}

.topbar .btn-toggle-menu:hover {
    color: var(--ry-naranja-hover) !important;
}

/* Avatar del usuario (gradiente dorado del original) */
.topbar .btn-light {
    background: linear-gradient(120deg, #f7b60a 65%, #ffda77 100%);
    color: #fff;
    border: none;
    font-weight: 600;
}

.content { background: #f5f7fa; min-height: calc(100vh - 49px); }

/* ===== Labels (mismo estilo del master original) ===== */
label, .form-label {
    font-weight: 600;
    color: var(--ry-label);
    letter-spacing: .01em;
}

/* ===== Inputs (fondo #F7F7F7, borde #E0E0E0, radio 8px) ===== */
.form-control, .form-select {
    background: var(--ry-input-bg);
    border: 1px solid var(--ry-input-borde);
    border-radius: 8px;
    color: #263238;
}

.form-control:focus, .form-select:focus {
    border-color: var(--ry-azul-claro);
    box-shadow: 0 0 0 .2rem rgba(42, 147, 213, .15);
    background: #fff;
}

/* ===== Botones ===== */
.btn-primary {
    background-color: var(--ry-azul);
    border-color: var(--ry-azul);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #0f4470 !important;
    border-color: #0f4470 !important;
}

.btn-info {
    background-color: var(--ry-azul-boton);
    border-color: var(--ry-azul-boton);
    color: #fff;
}

.btn-info:hover { background-color: var(--ry-azul-claro); border-color: var(--ry-azul-claro); color: #fff; }

.btn-outline-primary { color: var(--ry-azul); border-color: var(--ry-azul); }
.btn-outline-primary:hover { background-color: var(--ry-azul); border-color: var(--ry-azul); }

.link-primary { color: var(--ry-azul-titulo) !important; }
.link-primary:hover { color: var(--ry-naranja-hover) !important; font-weight: 600; }

a { color: var(--ry-azul-titulo); }
a:hover { color: var(--ry-naranja-hover); }

/* ===== Cards / KPI ===== */
.card { border: none; border-radius: 10px; }

.card-header {
    font-family: 'Nunito', sans-serif;
    color: var(--ry-azul-titulo);
    font-weight: 700;
    border-bottom: 2px solid var(--ry-naranja);
}

.kpi-card { border-left: 4px solid var(--ry-azul-boton); }
.kpi-card .kpi-valor { font-size: 1.6rem; font-weight: 700; color: var(--ry-azul); }
.kpi-card .kpi-titulo {
    font-size: .78rem;
    color: var(--ry-label);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .03em;
}

.kpi-card .kpi-valor.text-success { color: var(--ry-verde) !important; }
.kpi-card .kpi-valor.text-danger { color: var(--ry-rojo) !important; }
.kpi-card .kpi-valor.text-warning { color: var(--ry-naranja) !important; }

/* ===== Tablas modernas (header_gv: uppercase + bold) ===== */
table { font-size: 13px; }

/* Contenedor de la grilla: tarjeta con esquinas redondeadas y sombra suave.
   overflow-x: auto permite el scroll horizontal cuando hay muchas columnas */
.table-responsive:has(> table.tabla-rindeya) {
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 8px 22px rgba(0,0,0,.06);
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: .75rem;
    max-width: 100%;
}

/* Scrollbar horizontal sutil */
.table-responsive:has(> table.tabla-rindeya)::-webkit-scrollbar { height: 8px; }
.table-responsive:has(> table.tabla-rindeya)::-webkit-scrollbar-thumb {
    background: rgba(20,83,136,.35);
    border-radius: 999px;
}
.table-responsive:has(> table.tabla-rindeya)::-webkit-scrollbar-track { background: #f0f2f6; }

table.tabla-rindeya {
    margin-bottom: 0;
    border-color: rgba(0,0,0,.04);
    font-size: 11px;   /* mismo tamaño solicitado para todas las grillas */
}

table.tabla-rindeya th {
    white-space: nowrap;
    background: #efefef;
    color: #1a1a1a;
    font-size: 10.5px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .07em;
    border: none;
    border-right: 1px solid rgba(0,0,0,.06);
    border-bottom: 3px solid var(--ry-naranja) !important;
    padding: 10px 10px !important;
    vertical-align: middle;
}

table.tabla-rindeya th:last-child {
    border-right: none;
}

table.tabla-rindeya td {
    font-size: 11px;
    vertical-align: middle;
    color: #3c4858;
    padding: 2px 4px !important;
    border-color: rgba(0,0,0,.04);
    transition: background .12s ease;
}

/* Cebra sutil + hover destacado */
table.tabla-rindeya.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: #fafbfd;
    box-shadow: none;
}

table.tabla-rindeya tbody tr:hover > td {
    background-color: #eef6fd !important;
}

/* Columna Nº más discreta */
table.tabla-rindeya tbody td:first-child {
    color: #8b95a7;
    font-size: 11px;
    font-weight: 600;
}

/* Botones de acción dentro de las grillas */
table.tabla-rindeya .btn {
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

table.tabla-rindeya .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,.14);
}

/* ===== Paginación moderna ===== */
.page-link {
    color: var(--ry-azul);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 8px !important;
    margin: 0 2px;
    min-width: 32px;
    text-align: center;
    font-weight: 600;
    transition: background .12s ease;
}

.page-link:hover { background: #eef6fd; color: var(--ry-azul); }

.page-item.active .page-link {
    background: linear-gradient(135deg, #145388 0%, #1d6cae 100%);
    border-color: var(--ry-azul);
    box-shadow: 0 2px 6px rgba(20,83,136,.3);
}

.page-item.disabled .page-link { border-color: rgba(0,0,0,.05); }

/* ===== Badges (badge-monto-list del original) ===== */
.badge-monto-list {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: .97rem;
    font-weight: 700;
    background: #ffd3d3;
    color: #e53935;
}

/* ===== Login / Auth (mismo fondo del Login.aspx original) ===== */
.auth-page {
    background: #F8F9FB !important;
}

.auth-card { max-width: 420px; width: 100%; border-radius: 12px; }
.auth-card h4 { color: var(--ry-azul); font-weight: 800; }
.auth-card .btn-primary { background: var(--ry-azul-boton); border-color: var(--ry-azul-boton); }
.auth-card .btn-primary:hover { background: var(--ry-azul-claro) !important; border-color: var(--ry-azul-claro) !important; }

/* ============================================================
   Login — estilos copiados de Login.aspx
   ============================================================ */
.login-wrapper {
    width: 100%;
    max-width: 1080px;
    min-height: 540px;
    margin: 24px auto;
    display: flex;
    border-radius: 2.5rem;
    background: #fff;
    box-shadow: 0 10px 50px rgba(0,0,0,0.09);
    overflow: hidden;
}

.login-left {
    background: #324A89;
    color: #fff;
    flex: 0 0 38%;
    padding: 58px 32px 58px 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.login-logo {
    background: #fff;
    padding: 12px 18px 10px 18px;
    border-radius: 13px;
    box-shadow: 0 2px 14px 0 rgba(50,74,137,0.08);
    margin-bottom: 28px;
}

.login-logo img { height: 40px; display: block; }

.login-title { font-size: 2.2rem; font-weight: 700; margin-bottom: .2em; color: #fff; }

.login-desc {
    font-size: 1.15rem;
    font-weight: 400;
    margin-bottom: 1.4em;
    color: #D7D9ED;
    line-height: 1.5;
}

.login-steps { margin-top: 2.3em; width: 100%; }

.login-step { display: flex; align-items: center; margin-bottom: 26px; opacity: .85; }
.login-step.active { opacity: 1; }

.login-step-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #F9C40F;
    color: #324A89;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-right: 14px;
    border: 2.5px solid #fff;
    flex: 0 0 auto;
}

.login-step-text { font-weight: 500; font-size: 1rem; color: #fff; }

.login-right {
    flex: 1 1 62%;
    padding: 56px 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    min-height: 540px;
}

.panel-container { width: 100%; max-width: 400px; margin: 0 auto; }

.login-form-title, .recovery-title {
    font-size: 1.65rem;
    font-weight: 700;
    color: #242C40;
    margin-bottom: .85em;
}

.recovery-desc { color: #8B95B1; font-size: .98rem; margin-bottom: 1.2em; }

.panel-container .form-label { color: #324A89; font-weight: 500; font-size: 1.1rem; }

.panel-container .form-control {
    border-radius: .75em;
    font-size: 1.06rem;
    min-height: 50px;
    background: #F4F7FE;
    border: 1.6px solid #E3E6F0;
    margin-bottom: 6px;
    transition: border .14s;
}

.panel-container .form-control:focus {
    border-color: #F9C40F;
    box-shadow: 0 0 0 .08rem #F9C40F50;
    background: #F4F7FE;
}

.btn-login, .btn-aceptar {
    background: #F9C40F;
    color: #324A89;
    border: none;
    font-weight: 600;
    font-size: 1.23rem;
    width: 100%;
    border-radius: .85em;
    padding: 15px 0;
    box-shadow: 0 2px 12px 0 #F9C40F20;
    transition: .18s all;
}

.btn-login:hover, .btn-login:focus, .btn-aceptar:hover, .btn-aceptar:focus {
    background: #FFD500;
    color: #2C3863;
}

.btn-cancelar {
    background: #f5f6fb;
    color: #324A89;
    font-weight: 600;
    border: none;
    border-radius: .75em;
    padding: 10px 0;
    width: 49%;
    font-size: 1.18rem;
    transition: .17s all;
    box-shadow: 0 1px 5px #324a890b;
}

.btn-cancelar:hover, .btn-cancelar:focus { background: #e8eafd; color: #222b50; }

.btn-aceptar { width: 49%; padding: 10px 0; font-size: 1.18rem; }

.recovery-btn-row { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; }

.login-link, .return-link {
    display: block;
    margin-top: 18px;
    text-align: center;
    color: #8B95B1;
    text-decoration: none;
    font-size: 1em;
    transition: color .15s;
}

.login-link:hover, .return-link:hover { color: #F9C40F; }

.footer-copyright { color: #8B95B1; font-size: .92rem; margin-top: 8px; }

@media (max-width: 900px) {
    .login-wrapper { flex-direction: column; border-radius: 1.2rem; }
    .login-left { flex: 1 1 auto; padding: 32px 24px; }
    .login-right { padding: 32px 24px; min-height: auto; }
}

/* ===== Modales ===== */
.modal-header {
    background: var(--ry-azul);
    color: #fff;
    border-bottom: 3px solid var(--ry-naranja);
}

.modal-header .modal-title { color: #fff; font-family: 'Nunito', sans-serif; }
.modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ============================================================
   Dashboards 2026 — estilos copiados de homerindeya2026.aspx
   ============================================================ */
:root {
    --ry-card-radius: 14px;
    --ry-shadow: 0 8px 22px rgba(0,0,0,.06);
    --ry-soft: #f7f8fb;
    --ry-border: rgba(0,0,0,.06);
}

.dashboard-2026 { background: var(--ry-soft); }

.ry-card {
    border: 1px solid var(--ry-border);
    border-radius: var(--ry-card-radius);
    box-shadow: var(--ry-shadow);
    background: #fff;
}

.ry-kpi { position: relative; overflow: hidden; }

.ry-kpi .kpi-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(13,110,253,.10);
    color: #0d6efd;
    flex: 0 0 auto;
    font-size: 1.2rem;
}

.ry-kpi .kpi-value { font-size: 1.6rem; font-weight: 800; letter-spacing: .2px; color: #212529; }
.ry-kpi .kpi-label { color: #6c757d; font-weight: 600; font-size: .92rem; margin-bottom: .1rem; }
.ry-kpi .kpi-sub { font-size: .85rem; color: #6c757d; }

.ry-progress { height: 6px; border-radius: 999px; background: rgba(13,110,253,.10); }
.ry-progress > span { display: block; height: 100%; width: 100%; border-radius: 999px; background: #0d6efd; }

.ry-pill {
    border: 1px solid rgba(0,0,0,.06);
    background: #fff;
    border-radius: 999px;
    padding: .25rem .6rem;
    font-weight: 700;
    font-size: .85rem;
    color: #495057;
}

.ry-section-title { font-weight: 800; letter-spacing: .2px; color: #212529; }

/* Cards bajo los gráficos (top lists y alertas): fuente 12px */
.ry-card-fs12,
.ry-card-fs12 .ry-table,
.ry-card-fs12 .ry-table thead th,
.ry-card-fs12 .ry-table tbody td { font-size: 12px; }

.ry-table thead th {
    font-size: .85rem;
    color: #6c757d;
    font-weight: 700;
    background: transparent;
    text-transform: none;
    border-bottom: 1px solid var(--ry-border);
    padding: 2px 4px !important;
}

.ry-table td { font-size: .9rem; padding: 2px 4px !important; }

.ry-tabs .nav-link {
    color: #6c757d;
    font-size: .85rem;
    font-weight: 600;
    border: none;
    letter-spacing: .03em;
}

.ry-tabs .nav-link.active {
    color: #212529;
    font-weight: 700;
    border: 1px solid var(--ry-border);
    border-bottom: 3px solid var(--ry-azul, #145388);
    border-radius: 8px 8px 0 0;
}

.ry-alert {
    border-left: 6px solid;
    border-radius: 12px;
    padding: .9rem 1rem;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.06);
    border-right: 1px solid rgba(0,0,0,.06);
    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: var(--ry-shadow);
}

.ry-alert.danger { border-left-color: #dc3545; }
.ry-alert.warn { border-left-color: #ffc107; }
.ry-alert.info { border-left-color: #0dcaf0; }
.ry-alert.success { border-left-color: #198754; }

.ry-chart-frame {
    border: 1px solid var(--ry-border);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(13,110,253,.06), rgba(13,110,253,0));
    padding: 1rem;
}

.ry-chart-frame.verde { background: linear-gradient(180deg, rgba(25,135,84,.06), rgba(25,135,84,0)); }

/* ============================================================
   Wizard de registro — estilos copiados de registro.aspx
   ============================================================ */
.wizard-container {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    border-radius: 28px;
    background: #FAFAFA;
    box-shadow: 0 4px 40px rgba(0,0,0,0.09);
    display: flex;
    flex-direction: row;
    min-height: 600px;
    overflow: hidden;
}

.wizard-left {
    flex: 1 1 0%;
    min-width: 0;
    padding: 48px 48px 24px 48px;
    display: flex;
    flex-direction: column;
}

.wizard-steps {
    flex: 0 0 320px;
    background: #405189;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}

.wizard-step-list { list-style: none; padding: 0; margin: 0 0 0 50px; }

.wizard-step-item { display: flex; align-items: center; margin-bottom: 48px; position: relative; }
.wizard-step-item:last-child { margin-bottom: 0; }

.wizard-step-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #FAFAFA;
    color: #263238;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 22px;
    border: 4px solid transparent;
    transition: background .2s, color .2s, border .2s;
    flex: 0 0 auto;
}

.wizard-step-item.active .wizard-step-circle {
    background: #F2B705;
    color: #263238;
    border-color: #F2B705;
}

.wizard-step-item.completed .wizard-step-circle {
    background: #FAFAFA;
    color: #4FB06D;
    border: 4px solid #4FB06D;
}

.wizard-step-label { font-weight: 700; font-size: 18px; color: #fff; }
.wizard-step-desc { font-size: 13px; opacity: .9; color: #e0f2f1; margin-top: 2px; }

.wizard-title { font-weight: 700; font-size: 2rem; color: #263238; }
.wizard-subtitle { font-size: 1.05rem; color: #878a99; }

.wizard-left .form-control {
    height: 48px;
    border-radius: 8px;
    font-size: 1rem;
    background: #F7F7F7;
    color: #263238;
    border: 1px solid #E0E0E0;
}

.wizard-btn {
    background: #F2B705;
    color: #263238;
    font-weight: 600;
    border-radius: 7px;
    border: 2px solid #263238;
    box-shadow: 0 2px 8px rgba(242,183,5,0.10);
    padding: 10px 32px;
    transition: box-shadow .15s;
}

.wizard-btn:focus { outline: none; }
.wizard-btn[disabled] { opacity: .6; }
.wizard-btn-secondary { background: #FAFAFA; color: #263238; border: 2px solid #263238; }

.wizard-review-details h2 {
    color: #2c3e50;
    border-bottom: 2px solid #f1c40f;
    padding-bottom: 8px;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.wizard-review-details .review-label { color: #646464; font-weight: 700; }

.wizard-logo { margin-bottom: 1rem; }

@media (max-width: 900px) {
    .wizard-container { flex-direction: column; }
    .wizard-steps { display: none; }
    .wizard-left { padding: 24px; }
}

/* ============================================================
   Modal de detalle del gasto (GastoModal)
   ============================================================ */
.gasto-modal .modal-content {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 60px rgba(0,0,0,.22);
}

.gasto-modal .modal-header {
    background: linear-gradient(135deg, #145388 0%, #1d6cae 100%);
    border-bottom: 3px solid var(--ry-naranja);
    padding: 1rem 1.4rem;
}

.gasto-modal .gasto-header-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255,255,255,.15);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-right: .8rem;
    flex: 0 0 auto;
}

.gasto-modal .gasto-header-titulo {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
    line-height: 1.1;
}

.gasto-modal .gasto-header-sub {
    font-size: .8rem;
    color: #cfe3f5;
}

/* Banda resumen: monto destacado + badges */
.gasto-resumen {
    background: #f7f8fb;
    border-bottom: 1px solid rgba(0,0,0,.06);
    padding: 1rem 1.4rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.gasto-monto {
    font-family: 'Nunito', sans-serif;
    font-size: 1.9rem;
    font-weight: 800;
    color: #145388;
    line-height: 1;
}

.gasto-monto small {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .2rem;
}

.gasto-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 999px;
    padding: .3rem .75rem;
    font-size: .8rem;
    font-weight: 600;
    color: #495057;
}

.gasto-badge i { color: var(--ry-naranja); }

/* Campos en tarjetas suaves */
.gasto-campo {
    background: #fff;
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 12px;
    padding: .6rem .85rem;
    height: 100%;
}

.gasto-campo .campo-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8b95a7;
    margin-bottom: .15rem;
}

.gasto-campo .campo-valor {
    font-size: .92rem;
    font-weight: 600;
    color: #263238;
    word-break: break-word;
}

/* Comprobante */
.gasto-comprobante {
    background: #f7f8fb;
    border: 1px dashed rgba(0,0,0,.15);
    border-radius: 14px;
    padding: 1rem;
    text-align: center;
}

.gasto-comprobante .comprobante-titulo {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8b95a7;
    margin-bottom: .6rem;
}

.gasto-comprobante img {
    max-height: 300px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
    transition: transform .18s ease;
}

.gasto-comprobante a:hover img { transform: scale(1.02); }

.gasto-comprobante .btn-comprobante {
    margin-top: .7rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    padding: .35rem 1rem;
    color: #145388;
    border: 1px solid #145388;
    background: #fff;
}

.gasto-comprobante .btn-comprobante:hover {
    background: #145388;
    color: #fff;
}

/* Motivo de rechazo */
.gasto-rechazo {
    border-left: 5px solid #dc3545;
    background: #fdf1f2;
    border-radius: 10px;
    padding: .7rem 1rem;
    color: #842029;
    font-size: .88rem;
}

.gasto-modal .modal-footer {
    border-top: 1px solid rgba(0,0,0,.06);
    background: #fff;
}

.gasto-modal .btn-cerrar-gasto {
    border-radius: 999px;
    padding: .4rem 1.4rem;
    font-weight: 600;
    background: #f5f6fb;
    color: #145388;
    border: 1px solid #e3e6f0;
}

.gasto-modal .btn-cerrar-gasto:hover { background: #e8eafd; }

/* ===== Alertas y otros ===== */
.alert { border-radius: 8px; }

.cursor-pointer { cursor: pointer; }

::selection { background: var(--ry-azul-boton); color: #fff; }
