@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@600;700&display=swap');

/* =====================================================================
   COMUNIDAD AMANECER — Sistema de diseño
   UI profesional para comunidad terapéutica / centro de rehabilitación.
   Refresco puramente estético: NO altera el markup ni el flujo de carga.
   ===================================================================== */

:root {
    /* Marca — azul unos tonos más oscuro que el del sistema anterior
       (#1677ac), para que se note que es una versión nueva. Al oscurecer,
       el contraste del texto blanco encima sólo mejora. */
    --brand:        #12658f;
    --brand-600:    #0e5375;
    --brand-700:    #0a4260;
    --brand-050:    #e9f1f7;
    --brand-100:    #cfe1ed;

    /* Acento salud (verde-teal) */
    --teal:         #0f9d8f;
    --teal-050:     #e6f6f4;

    /* Estados */
    --success:      #1ea672;
    --success-050:  #e7f6ef;
    --warning:      #e8a317;
    --warning-050:  #fbf3e2;
    --danger:       #e0413f;
    --danger-050:   #fbe9e9;
    --info:         #2f86c9;
    --info-050:     #e8f1fa;

    /* Neutros */
    --bg:           #f3f6fa;
    --surface:      #ffffff;
    --surface-2:    #f8fafc;
    --ink:          #1f2d3d;   /* texto principal */
    --ink-soft:     #5b6b7d;   /* texto secundario */
    --ink-faint:    #8a98a8;   /* texto terciario */
    --line:         #e6edf3;   /* bordes */
    --line-strong:  #d4dde6;

    /* Sombras */
    --sh-xs: 0 1px 2px rgba(16,42,67,.06);
    --sh-sm: 0 2px 6px rgba(16,42,67,.07);
    --sh-md: 0 6px 18px rgba(16,42,67,.09);
    --sh-lg: 0 16px 40px rgba(16,42,67,.14);

    /* Radios */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;

    /* Compat. con variables previas */
    --color-primario: var(--brand);
}

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

html, body { height: 100%; }

body {
    background-color: var(--bg);
    color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.container.mt-4 { flex: 1; padding-top: 1.75rem; padding-bottom: 2.5rem; }
.container-fluid.px-4 { flex: 1; padding-top: .5rem; padding-bottom: 2.5rem; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Sora', 'Inter', sans-serif;
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 1rem;
}
h1 { font-size: 1.9rem; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-700); }

/* Accesibilidad: foco visible y consistente */
:focus-visible {
    outline: 3px solid rgba(18,101,143,.40);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------------------------------------------------------------
   Barra superior (bienvenida)
   --------------------------------------------------------------- */
.bg-light.py-1.border-bottom {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--line) !important;
}

/* ---------------------------------------------------------------
   Navbar
   --------------------------------------------------------------- */
/* Header de aplicación en DOS NIVELES sobre fondo de marca:
     nivel 1 -> identidad, casa activa y menú del usuario
     nivel 2 -> navegación de módulos
   Con 7 módulos + Administración los enlaces no entraban en una sola fila
   (necesitaban 1438px en un viewport de 1270 y se partían en 3 renglones).
   Texto blanco sobre el degradado: contraste medido 6.17:1 (AA exige 4.5). */
.app-header {
    background: linear-gradient(100deg, var(--brand-700) 0%, var(--brand-600) 60%, var(--brand) 100%);
    box-shadow: 0 2px 10px rgba(10, 66, 96, .28);
    position: sticky;
    top: 0;
    z-index: 1030;
}
/* Línea de acento inferior: separa el header del contenido. */
.app-header::after {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(90deg, var(--teal) 0%, var(--brand) 45%, rgba(255,255,255,.15) 100%);
}

.app-header-top {
    padding: .55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
/* Grilla de 3 columnas: casa a la izquierda, marca CENTRADA, usuario a la
   derecha. Las columnas laterales tienen el mismo ancho (1fr), por lo que el
   título queda centrado respecto de la barra y no del contenido. */
.app-header-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .75rem;
}
.app-header-izq { justify-self: start; min-width: 0; }
.app-header-centro { justify-self: center; }
/* Fila flex: si no, el botón de Ayuda y el del usuario quedan desalineados
   verticalmente entre sí (uno es más alto por el avatar). */
.app-header-der {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* En pantallas chicas se apila: marca arriba y casa/usuario debajo, para que
   nada se desborde hacia la derecha. */
@media (max-width: 991.98px) {
    /* Fila 1: hamburguesa + título + usuario.  Fila 2: casa activa. */
    .app-header-grid {
        /* Columnas laterales iguales (1fr) para que el título quede centrado
           respecto de la pantalla, no del contenido de los costados. */
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas:
            "toggler marca usuario"
            "casa    casa  casa";
        row-gap: .45rem;
        column-gap: .5rem;
    }
    .app-header-der { justify-self: end; }
    .app-toggler       { grid-area: toggler; justify-self: start; }
    .app-header-centro { grid-area: marca; justify-self: center; }
    .app-header-der    { grid-area: usuario; }
    .app-header-izq    { grid-area: casa; justify-self: stretch; }
    .app-header-izq .casa-chip { width: 100%; justify-content: center; }
    .app-header-izq .casa-chip > span { max-width: none; }
}

/* En celular angosto (≈375px) las tres columnas de la fila 1 no entraban y el
   documento entero scrolleaba de costado (403px de ancho contra 376 de pantalla).
   Se aprieta lo prescindible —el chevron del menú de usuario y los padding— y se
   permite que el título achique, en vez de empujar la página. */
@media (max-width: 575.98px) {
    .app-header-grid {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        column-gap: .35rem;
    }
    .app-header-centro {
        min-width: 0;
        font-size: .95rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .app-header-der { gap: .25rem; min-width: 0; }
    .app-user-btn::after { display: none; }   /* chevron: se entiende igual */
    .app-user-btn  { padding-left: .3rem; padding-right: .3rem; }
    .app-help-btn  { padding-left: .45rem; padding-right: .45rem; }
}
/* Sin sesión no hay hamburguesa: el título ocupa el centro igual. */
.app-toggler { padding: .3rem .5rem; }
.app-header-nav {
    padding: 0;
    min-height: 0;
}
.app-header-nav .container-fluid { padding-top: .15rem; padding-bottom: .15rem; }

/* Título "Menú" que acompaña a la hamburguesa en celular */
.app-nav-titulo {
    color: rgba(255,255,255,.85);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.app-header .navbar-brand {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    letter-spacing: -.02em;
    font-size: 1.06rem;
    margin-right: 0;
    text-decoration: none;
}
.app-header-nombre { white-space: nowrap; }

/* Marca cuando no hay logo cargado: monograma en un cuadrado translúcido. */
.app-header-mark {
    width: 32px; height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #ffe08a;
    font-size: .95rem;
}
.app-header-logo { height: 30px; width: auto; }

/* Chip de la casa activa */
.casa-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .7rem;
    border-radius: 99px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .24);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease;
    white-space: nowrap;
}
.casa-chip:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.4); color: #fff; }
.casa-chip-fija { cursor: default; }
.casa-chip-swap { font-size: .7rem; opacity: .75; flex: 0 0 auto; }
/* Nombres de casa largos se recortan con puntos suspensivos en vez de estirar
   el chip fuera de la pantalla. */
.casa-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 42vw;
}
.casa-chip i:first-child { flex: 0 0 auto; }

/* Enlaces del menú */
.app-header .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .86) !important;
    font-weight: 500;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0 .05rem;
    padding: .45rem .7rem !important;
    border-radius: var(--r-sm);
    transition: color .18s ease, background-color .18s ease;
    white-space: nowrap;
}
.app-header .navbar-nav .nav-link i { font-size: .85rem; opacity: .9; }
.app-header .navbar-nav .nav-link:hover,
.app-header .navbar-nav .nav-link:focus {
    color: #fff !important;
    background-color: rgba(255, 255, 255, .15);
}
.app-header .navbar-nav .nav-link.active {
    color: #fff !important;
    font-weight: 600;
    background-color: rgba(255, 255, 255, .22);
    box-shadow: inset 0 -2px 0 rgba(255,255,255,.75);
}

/* Botón del menú de usuario (nivel 1) */
.app-user-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    border-radius: 99px;
    padding: .25rem .8rem .25rem .3rem;
    font-size: .88rem;
    font-weight: 600;
    height: 40px;
}
.app-user-btn:hover,
.app-user-btn:focus {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
}
.app-user-btn::after { margin-left: .15rem; opacity: .8; }

/* Menú del usuario: avatar con la inicial */
.app-avatar {
    width: 28px; height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .35);
    font-weight: 700;
    font-size: .8rem;
    color: #fff;
}
.app-header-user > .nav-link { padding-left: .5rem !important; }
.app-header-user .dropdown-toggle::after { margin-left: .4rem; opacity: .8; }

/* Desplegables: fondo claro, texto oscuro (nunca blanco sobre blanco) */
.app-header .dropdown-menu {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-md);
    padding: .4rem;
    min-width: 220px;
}
.app-header .dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    border-radius: var(--r-sm);
    padding: .5rem .65rem;
    font-size: .92rem;
    color: var(--ink);
}
.app-header .dropdown-item i { width: 1.1em; text-align: center; color: var(--ink-faint); }
.app-header .dropdown-item:hover {
    background: var(--brand-050);
    color: var(--brand-700);
}
.app-header .dropdown-item:hover i { color: var(--brand-600); }
.app-header .dropdown-item.item-salir { color: var(--danger); }
.app-header .dropdown-item.item-salir i { color: var(--danger); }
.app-header .dropdown-item.item-salir:hover { background: var(--danger-050); color: var(--danger); }
.app-header .dropdown-header { padding: .5rem .65rem .35rem; }
.app-header .dropdown-header .small { color: var(--ink-soft); }

/* Botón hamburguesa en blanco */
.app-header .navbar-toggler {
    border-color: rgba(255, 255, 255, .35);
    padding: .3rem .55rem;
}
.app-header .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,.25); }
.app-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Menú desplegado en celular: separado del borde y con fondo propio */
@media (max-width: 991.98px) {
    .app-header .navbar-collapse {
        margin-top: .6rem;
        padding-top: .5rem;
        border-top: 1px solid rgba(255, 255, 255, .18);
    }
    .app-header .navbar-nav .nav-link { padding: .6rem .7rem !important; }
    .app-header .dropdown-menu {
        background: rgba(255, 255, 255, .97);
        margin: .25rem 0 .5rem;
    }
}

/* ---------------------------------------------------------------
   Tarjetas
   --------------------------------------------------------------- */
.card {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
    background-color: var(--surface);
    transition: box-shadow .2s ease, transform .2s ease;
    overflow: hidden;
}
/* Solo las tarjetas del dashboard "levantan" al pasar el mouse */
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }

.card-header {
    background-color: var(--surface);
    border-bottom: 1px solid var(--line);
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    padding: 1rem 1.35rem;
    color: var(--ink);
}
.card-body { padding: 1.35rem; }

/* KPI cards del panel */
.kpi-card { position: relative; }
.kpi-card::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px; background: var(--brand);
}
.kpi-card.kpi-success::before { background: var(--success); }
.kpi-card.kpi-danger::before  { background: var(--danger); }
.kpi-card.kpi-warning::before { background: var(--warning); }
.kpi-card.kpi-teal::before    { background: var(--teal); }

.kpi-card .card-title {
    font-family: 'Inter', sans-serif;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-faint);
    font-weight: 600;
    margin-bottom: .35rem;
}
.kpi-card .kpi-value {
    font-family: 'Sora', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
    margin-bottom: .5rem;
}
.kpi-card .kpi-icon {
    position: absolute; top: 1.1rem; right: 1.2rem;
    width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center;
    font-size: 1.1rem; color: var(--brand);
    background: var(--brand-050);
}
.kpi-card.kpi-success .kpi-icon { color: var(--success); background: var(--success-050); }
.kpi-card.kpi-danger  .kpi-icon { color: var(--danger);  background: var(--danger-050); }
.kpi-card.kpi-warning .kpi-icon { color: var(--warning); background: var(--warning-050); }
.kpi-card.kpi-teal    .kpi-icon { color: var(--teal);    background: var(--teal-050); }
.kpi-card .stretched-link {
    color: var(--brand-600); font-weight: 600; font-size: .85rem;
}

/* ---------------------------------------------------------------
   Botones
   --------------------------------------------------------------- */
.btn {
    font-weight: 600;
    transition: all .18s ease;
    border-radius: var(--r-sm);
    padding: .6rem 1.1rem;
    font-size: .94rem;
    box-shadow: var(--sh-xs);
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: .8rem 1.3rem; border-radius: var(--r-md); }
.btn-sm { padding: .35rem .7rem; font-size: .82rem; }

.btn-primary { background-color: var(--brand); border-color: var(--brand); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--brand-600); border-color: var(--brand-600); }

.btn-success { background-color: var(--success); border-color: var(--success); }
.btn-success:hover { background-color: #178a5e; border-color: #178a5e; }

.btn-warning { background-color: var(--warning); border-color: var(--warning); color: #fff; }
.btn-warning:hover { background-color: #cf9012; border-color: #cf9012; color: #fff; }

.btn-danger { background-color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background-color: #c4302e; border-color: #c4302e; }

.btn-info { background-color: var(--info); border-color: var(--info); color: #fff; }
.btn-info:hover { background-color: #266fa8; border-color: #266fa8; color: #fff; }

.btn-secondary { background-color: #64748b; border-color: #64748b; }
.btn-secondary:hover { background-color: #54627a; border-color: #54627a; }

.btn-outline-primary { color: var(--brand); border-color: var(--line-strong); background: var(--surface); }
.btn-outline-primary:hover { background-color: var(--brand); border-color: var(--brand); color: #fff; }
.btn-outline-secondary { color: var(--ink-soft); border-color: var(--line-strong); }
.btn-outline-secondary:hover { background-color: var(--ink-soft); border-color: var(--ink-soft); }

/* ---------------------------------------------------------------
   Badges (pill, variantes suaves)
   --------------------------------------------------------------- */
.badge {
    padding: .4em .7em;
    border-radius: 99px;
    font-weight: 600;
    font-size: .76em;
    letter-spacing: .01em;
}
.badge.bg-primary { background-color: var(--brand) !important; }
.badge.bg-success { background-color: var(--success) !important; }
.badge.bg-danger  { background-color: var(--danger) !important; }
.badge.bg-info    { background-color: var(--info) !important; }
.badge.bg-warning { background-color: var(--warning) !important; color:#fff !important; }
.badge.bg-secondary { background-color: #64748b !important; }

/* Etiqueta de estado (uso opcional en listados) */
.estado-pill { display:inline-flex; align-items:center; gap:.35rem; padding:.32rem .7rem; border-radius:99px; font-size:.78rem; font-weight:600; }
.estado-activo    { background: var(--success-050); color:#13784f; }
.estado-archivado { background: #eef1f5; color: var(--ink-soft); }
.estado-pill::before { content:""; width:7px; height:7px; border-radius:99px; background: currentColor; opacity:.8; }

/* Variantes de píldora con TEXTO OSCURO sobre el tinte claro.
   Antes se armaban con estilo en línea usando el color puro de la marca
   (ej. --warning #e8a317 sobre --warning-050): daba 1,96:1 y era ilegible.
   Estos tonos oscuros van de 4,9:1 a 6,4:1. */
.estado-pill.pill-ok     { background: var(--success-050); color: #13684a; }
.estado-pill.pill-alerta { background: var(--warning-050); color: #8a6410; }
.estado-pill.pill-mal    { background: var(--danger-050);  color: #9c2b2a; }
.estado-pill.pill-info   { background: var(--info-050);    color: #1b5a8a; }

/* ---------------------------------------------------------------
   Tablas
   --------------------------------------------------------------- */
.table-responsive, .card > .table-responsive { border-radius: var(--r-md); }

.table { margin-bottom: 0; color: var(--ink); border-color: var(--line); }

/* Cabecera clara y legible incluso si el markup trae .table-dark
   (los listados existentes usan <thead class="table-dark">). */
.table thead th,
.table thead.table-dark th {
    /* Mismo degradado de marca que el encabezado del sitio, con letras blancas:
       el título de la columna manda sobre el contenido de la fila.
       Contraste medido del blanco sobre este fondo: 8,6:1 (AA exige 4,5). */
    background: linear-gradient(100deg, var(--brand-700) 0%, var(--brand-600) 60%, var(--brand) 100%) !important;
    color: #fff !important;
    border-bottom: 2px solid var(--brand-700) !important;
    border-top: none;
    font-weight: 700;
    font-size: .9rem;          /* mayor que el dato de la fila (.875rem) */
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .8rem 1rem;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* El contenido de las filas es más chico y compacto que el encabezado: así
   manda el título de la columna y entran más filas sin scrollear. */
.table tbody td { font-size: .875rem; }

.table tbody tr { transition: background-color .15s ease; border-color: var(--line); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(18,101,143,.03); }
.table-hover > tbody > tr:hover > * { background-color: var(--brand-050); }
.table td, .table th { padding: .75rem 1rem; vertical-align: middle; }
/* Filas más compactas (el encabezado conserva su respiro). */
.table tbody td { padding-top: .5rem; padding-bottom: .5rem; }

/* Variante para tablas con muchas columnas (ej. Estado de cuenta, 8): letras
   del encabezado más chicas y sin partir, para que entre en un solo renglón. */
.tabla-densa thead th {
    font-size: .76rem;
    letter-spacing: .03em;
    white-space: nowrap;
    padding-left: .65rem;
    padding-right: .65rem;
}
.tabla-densa tbody td {
    font-size: .84rem;
    padding-left: .65rem;
    padding-right: .65rem;
}
/* Las píldoras de estado son un aviso, no el dato principal: chicas y en una
   sola línea, para que no estiren el alto de la fila. */
.tabla-densa .estado-pill,
.tabla-densa .badge {
    font-size: .7rem;
    padding: .2rem .5rem;
    white-space: nowrap;
}
.tabla-densa .estado-pill::before { width: 6px; height: 6px; }
.table .btn { padding: .3rem .6rem; font-size: .8rem; margin-right: .2rem; box-shadow: none; }

/* Enlaces ordenables en cabeceras: blancos sobre el degradado de marca. */
.table thead th a,
.table thead th a.text-white,
.table thead th .th-sort {
    color: #fff !important;
    font-weight: 700;
    display: inline-flex; align-items: center; gap: .35rem;
}
.table thead th a:hover, .table thead th a.text-white:hover, .table thead th .th-sort:hover { color: #fff !important; text-decoration: underline !important; }
.table thead th a .fa-sort, .table thead th a .fas, .table thead th .th-sort .fas { opacity: .7; font-size: .8em; }

/* tfoot oscuro (totales) se mantiene legible */
.table tfoot tr.table-dark > * { background-color: var(--ink) !important; color: #fff !important; }

/* Card contenedora de tabla: que la tabla respete el radio */
.card > .card-body > .table-responsive { margin: -.25rem 0; }

/* ---------------------------------------------------------------
   Jerarquía dentro de las celdas
   Antes cada dato pesaba lo mismo y la fila se leía como un bloque
   plano de texto. Ahora: concepto primero, datos de apoyo apagados,
   monto destacado y categoría como chip para poder barrer la columna.
   --------------------------------------------------------------- */
.celda-titulo { font-weight: 600; color: var(--ink); }

/* Texto libre de apoyo (el viejo "concepto" de gastos): se lee, pero no
   compite con la categoría, que es la que dice QUÉ es el gasto. */
.celda-libre { color: var(--ink-soft); }

/* Dato secundario que vive DENTRO de otra celda (ej: a quién es el sueldo) */
.celda-sub {
    display: block;
    margin-top: .15rem;
    font-size: .78rem;
    color: var(--ink-soft);
}
.celda-sub .fas { opacity: .6; font-size: .9em; }

.celda-fecha { white-space: nowrap; color: var(--ink-soft); }

/* Tipo y método: apoyo, no protagonistas */
.celda-meta { font-size: .84rem; color: var(--ink-soft); }
.celda-sep  { padding: 0 .35rem; opacity: .45; }

/* El monto es el dato que más se busca: alineado y con cifras de ancho fijo
   para que las columnas de números queden a plomo. */
.celda-monto {
    text-align: right;
    white-space: nowrap;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Cabecera que agrupa dos criterios de orden (Tipo · Método) */
.th-doble { white-space: nowrap; }
.th-doble .th-sep { padding: 0 .3rem; opacity: .4; font-weight: 400; }

/* Chips de categoría — el neutro es el que aplica a cualquier categoría
   nueva que se cree desde el ABM. Los tintes agrupan por familia. */
.cat-chip {
    display: inline-block;
    padding: .26rem .62rem;
    border-radius: 99px;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    color: var(--ink-soft);
}
/* Sueldos: la familia más consultada */
.cat-sueldos { background: var(--brand-050); border-color: var(--brand-100); color: var(--brand-700); }
/* Servicios */
.cat-luz, .cat-agua, .cat-gas, .cat-internet, .cat-telefonia {
    background: var(--info-050); border-color: #cfe3f3; color: #1b5a8a;
}
/* Comida */
.cat-alimentos, .cat-carne, .cat-verduras {
    background: var(--success-050); border-color: #cdeede; color: #13684a;
}
/* Casa */
.cat-mantenimiento, .cat-limpieza, .cat-alquiler {
    background: var(--warning-050); border-color: #f0e0bd; color: #8a6410;
}
.cat-vacia { background: var(--danger-050); border-color: #f3d3d3; color: #9c2b2a; }
/* Obra social en el listado de pacientes: mismo lenguaje visual que las categorías */
.cat-obra-si { background: var(--success-050); border-color: #cdeede; color: #13684a; }

/* ---------------------------------------------------------------
   Formularios (refresco visual; estructura intacta)
   --------------------------------------------------------------- */
.form-label { font-weight: 600; color: var(--ink); margin-bottom: .4rem; font-size: .9rem; }

.form-control, .form-select {
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
    padding: .62rem .85rem;
    background-color: var(--surface);
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control-lg, .form-select-lg { padding: .8rem 1rem; border-radius: var(--r-md); }
.form-control::placeholder { color: var(--ink-faint); }
.form-control:focus, .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(18,101,143,.20);
    background-color: var(--surface);
}
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.input-group-text { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink-soft); border-radius: var(--r-sm); }

/* ---------------------------------------------------------------
   Alertas (tintes suaves)
   --------------------------------------------------------------- */
.alert { border: 1px solid transparent; border-radius: var(--r-md); padding: .9rem 1.1rem; }
.alert-info    { background: var(--info-050);    color:#1b5a8a;  border-color:#cfe3f3; }
.alert-success { background: var(--success-050); color:#136245; border-color:#cdeede; }
.alert-warning { background: var(--warning-050); color:#8a6410; border-color:#f4e3bd; }
.alert-danger  { background: var(--danger-050);  color:#9a2b2a; border-color:#f3cfce; }
.alert-link { font-weight: 700; }

/* ---------------------------------------------------------------
   Página de Login (rediseño: gradiente + tarjeta, sin imagen externa)
   --------------------------------------------------------------- */
body.login-page { background: var(--bg); }
body.login-page .navbar { display: none; }

.login-container { min-height: 100vh; display: flex; align-items: stretch; }

.login-image-container {
    min-height: 100vh;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(1100px 600px at 20% 15%, rgba(255,255,255,.12), transparent 60%),
        linear-gradient(150deg, var(--brand-700) 0%, var(--brand) 55%, var(--teal) 130%);
    overflow: hidden;
}
.login-image-container::after {
    content:""; position:absolute; inset:0;
    background-image:
        radial-gradient(circle at 80% 80%, rgba(255,255,255,.10), transparent 45%),
        radial-gradient(circle at 12% 90%, rgba(255,255,255,.08), transparent 40%);
}
/* Contenido del hero (centrado) */
.login-hero-content {
    position: relative; z-index: 1;
    max-width: 460px; padding: 2rem; color: #fff;
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
}
/* El logo es BLANCO: va directo sobre el gradiente, sin recuadro claro. */
.login-hero-logo {
    height: 120px; width: auto; margin-bottom: 1.5rem;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.28));
}
.login-hero-title { color:#fff; font-size: 2.4rem; margin-bottom: .5rem; letter-spacing:-.02em; }
.login-hero-sub { color: rgba(255,255,255,.9); font-size: 1.15rem; margin-bottom: 2rem; }
.login-hero-features { list-style:none; padding:0; margin:0 auto; text-align:left; display:inline-block; }
.login-hero-features li {
    display:flex; align-items:center; gap:.75rem;
    color: rgba(255,255,255,.95); font-size: 1.02rem; padding: .55rem 0;
}
.login-hero-features li i {
    width: 38px; height: 38px; border-radius: 10px; display:grid; place-items:center;
    background: rgba(255,255,255,.16); font-size: 1rem; flex-shrink:0;
}

.login-form-container {
    padding: 2rem;
    background-color: var(--surface);
    min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    color: var(--ink);
}
.login-form-inner { width: 100%; max-width: 380px; }
/* Logo blanco sobre recuadro de marca (en móvil, fondo claro del formulario). */
.login-form-logo {
    display:block; height: 72px; width:auto; margin: 0 auto 1.5rem;
    background: var(--brand); padding: 12px 18px; border-radius: var(--r-md);
    box-shadow: var(--sh-md);
}
.login-form-container h2 { font-family:'Sora',sans-serif; font-size: 2rem; }
.login-form-container .input-group-text { background: var(--surface-2); color: var(--ink-soft); }
.login-credit { text-align:center; color: var(--ink-faint); font-size:.82rem; margin-top: 2.5rem; }

/* ---------------------------------------------------------------
   Formularios (carga / edición) — shell unificado
   --------------------------------------------------------------- */
.form-shell { max-width: 920px; margin: 0 auto; }

/* Sección de formulario: unifica el look de fieldset y de cards anidadas. */
.form-shell fieldset.border,
.form-section {
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md);
    padding: 1.1rem 1.3rem 1.3rem !important;
    margin-bottom: 1.25rem;
    background: var(--surface-2);
}
.form-shell fieldset.border > legend,
.form-section-title {
    font-family: 'Sora', sans-serif;
    font-size: .92rem; font-weight: 600;
    color: var(--brand-700);
    width: auto; padding: 0 0 .65rem; margin-bottom: 1rem;
    display: flex; align-items: center; gap: .5rem; float: none;
    border-bottom: 1px solid var(--line);
}
.form-shell fieldset.border > legend { width: 100%; }

/* Cards de sección anidadas (pacientes_formulario) */
.form-shell .card .card .card-header { background: var(--surface-2); }
.form-shell .card .card .card-header h5 {
    font-family: 'Sora', sans-serif; font-size: .92rem; color: var(--brand-700);
    display: flex; align-items: center; gap: .5rem;
}

/* Barra de acciones del formulario */
.form-actions {
    display: flex; justify-content: flex-end; gap: .6rem;
    padding-top: 1.1rem; margin-top: .25rem;
    border-top: 1px solid var(--line);
}
.form-label .text-danger { font-weight: 700; }
.form-control-plaintext { color: var(--ink); }

/* ---------------------------------------------------------------
   Selector de casas (seleccionar_casa.php)
   --------------------------------------------------------------- */
.casa-card {
    width: 100%;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 1.25rem 1.35rem;
    box-shadow: var(--sh-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    display: flex; align-items: center; gap: 1rem;
    cursor: pointer;
}
.casa-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-md);
    border-color: var(--brand-100);
}
.casa-card:focus-visible { outline: 3px solid rgba(18,101,143,.40); outline-offset: 2px; }
.casa-card .casa-icon {
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 1.3rem;
    background: var(--brand-050); color: var(--brand);
}
.casa-card .casa-info { flex: 1; min-width: 0; }
.casa-card .casa-nombre { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1.08rem; color: var(--ink); line-height: 1.2; }
.casa-card .casa-meta { font-size: .85rem; color: var(--ink-soft); margin-top: .15rem; }
.casa-card .casa-arrow { color: var(--ink-faint); transition: transform .18s ease, color .18s ease; }
.casa-card:hover .casa-arrow { color: var(--brand); transform: translateX(3px); }

/* ---------------------------------------------------------------
   Encabezado de página (patrón reutilizable)
   --------------------------------------------------------------- */
.page-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.page-head .subtitle { color: var(--ink-soft); margin:0; }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.footer {
    background-color: var(--surface);
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: .88rem;
    padding: 1.1rem 0;
    margin-top: auto;
}
.footer a { color: var(--brand-600); font-weight: 600; }

/* ---------------------------------------------------------------
   Pie de página con contenido útil (accesos, ayuda y soporte).
   Fondo claro y texto oscuro: nada de texto claro sobre claro.
   --------------------------------------------------------------- */
/* Mismo degradado de marca que el encabezado: el sistema queda "enmarcado"
   entre dos barras del mismo color. Al ser fondo oscuro, TODOS los textos
   del pie van en blanco/blanco translúcido. */
.app-footer {
    background: linear-gradient(100deg, var(--brand-700) 0%, var(--brand-600) 60%, var(--brand) 100%);
    margin-top: 3rem;
    font-size: .88rem;
    color: rgba(255, 255, 255, .82);
}
.app-footer-top {
    padding: 2rem 0 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.app-footer-marca {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .6rem;
}
.app-footer-nombre {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
}
.app-footer-sub { font-size: .78rem; color: rgba(255, 255, 255, .65); }
.app-footer-texto { color: rgba(255, 255, 255, .8); margin-bottom: .5rem; line-height: 1.55; }
.app-footer-texto strong { color: #fff; }

.app-footer-titulo {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #fff;
    margin-bottom: .7rem;
}
.app-footer-links { list-style: none; padding: 0; margin: 0; }
.app-footer-links li { margin-bottom: .35rem; }
.app-footer-links a {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    transition: color .15s ease;
}
.app-footer-links a:hover { color: #fff; text-decoration: underline; }

.btn-soporte {
    background: var(--success);
    border: 1px solid var(--success);
    color: #fff;
    font-weight: 600;
}
.btn-soporte:hover { background: #17915f; border-color: #17915f; color: #fff; }

.app-footer-bottom {
    padding: .9rem 0;
    text-align: center;
    color: #fff;
    font-size: .82rem;
}
/* El crédito del desarrollador va en un recuadro más oscuro, para que se
   distinga del resto de la línea sin romper el contraste (texto blanco). */
.app-footer-bottom a {
    display: inline-block;
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    padding: .15rem .6rem;
    border-radius: 99px;
    transition: background-color .15s ease, border-color .15s ease;
}
.app-footer-bottom a:hover {
    background: rgba(0, 0, 0, .42);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
    text-decoration: none;
}
.app-footer-sep { margin: 0 .5rem; opacity: .5; }

@media (max-width: 575.98px) {
    .app-footer-sep { display: none; }
    .app-footer-bottom span { display: block; margin-bottom: .2rem; }
}

/* ---------------------------------------------------------------
   Ayuda: botón del encabezado, panel lateral y manual
   --------------------------------------------------------------- */
.app-help-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    border-radius: 99px;
    padding: .25rem .8rem;
    font-size: .85rem;
    font-weight: 600;
    /* Altura fija igual a la del botón de usuario: así la fila queda pareja
       (el avatar hacía que uno fuera más alto que el otro). */
    height: 40px;
}
.app-help-btn:hover,
.app-help-btn:focus {
    background: rgba(255, 255, 255, .24);
    border-color: rgba(255, 255, 255, .42);
    color: #fff;
}

/* En el bundle de Bootstrap incluido, el `transform: translateX(100%)` de
   `.offcanvas-end` no se revierte al abrir y el panel quedaba fuera de la
   pantalla. En vez de pelear con esa cascada, se anula el transform y el
   panel se desplaza con `right`, que da el mismo efecto y es predecible.
   Bootstrap sigue encargándose del fondo oscuro y del bloqueo del scroll. */
.panel-ayuda {
    width: 400px;
    max-width: 92vw;
    transform: none !important;
    right: -100vw;
    transition: right .3s ease-in-out;
}
.panel-ayuda.show,
.panel-ayuda.showing { right: 0; }
/* Mismo caso con el fondo atenuado: la regla `.offcanvas-backdrop.show` no se
   aplica en este bundle. Como el elemento sólo existe mientras el panel está
   abierto, se le da la opacidad directamente, sin depender de la clase de estado. */
.offcanvas-backdrop { opacity: .5 !important; }
/* Sombra marcada: refuerza la sensación de panel elevado sobre el contenido. */
.panel-ayuda { box-shadow: -12px 0 32px rgba(16, 42, 67, .22); }
.panel-ayuda .offcanvas-header {
    background: linear-gradient(100deg, var(--brand-700), var(--brand-600));
    color: #fff;
}
/* El color se declara en el propio título: la regla global de h1..h6 del sistema
   de diseño pisa el `color` heredado del encabezado y quedaba texto oscuro
   sobre el degradado (contraste 2.27:1). */
.panel-ayuda .offcanvas-title {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: #fff !important;
}
.panel-ayuda .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.panel-ayuda .offcanvas-body { display: flex; flex-direction: column; }

.ayuda-resumen {
    background: var(--brand-050);
    border-left: 3px solid var(--brand);
    border-radius: var(--r-sm);
    padding: .75rem .9rem;
    color: var(--ink);
    line-height: 1.55;
}
.ayuda-subtitulo {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-soft);
    margin-top: 1.25rem;
    margin-bottom: .6rem;
}
.ayuda-lista { padding-left: 1.1rem; margin-bottom: 0; }
.ayuda-lista li { margin-bottom: .55rem; line-height: 1.55; color: var(--ink); }
.ayuda-lista.ayuda-notas li::marker { color: var(--warning); }
.ayuda-pie { margin-top: auto; padding-top: 1.5rem; }

.ayuda-indice { position: sticky; top: 130px; }
.ayuda-indice .list-group-item { border: none; font-size: .9rem; padding: .55rem .9rem; color: var(--ink); }
.ayuda-indice .list-group-item:hover { background: var(--brand-050); color: var(--brand-700); }

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .login-image-container { display: none; }
    .login-form-container { width: 100%; padding: 2.25rem; min-height: 100vh; }
    .login-container { justify-content: center; }
    h1 { font-size: 1.6rem; }
    .kpi-card .kpi-value { font-size: 1.7rem; }
}

/* ---------------------------------------------------------------
   Navbar: con rol super_administrador hay 12 enlaces y en pantallas
   medianas (~1270px) se desbordaban a la derecha. Que envuelvan.
   --------------------------------------------------------------- */
/* Red de contención: si un rol llegara a tener demasiados enlaces, envuelven
   en vez de desbordar. Con los ítems agrupados en menús ya no debería pasar. */
.navbar-nav {
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------
   Botones de acción en tablas
   Ahora cada acción destructiva va dentro de su propio <form> (POST +
   token CSRF), lo que rompe el "grupo unido" de Bootstrap. En vez de
   simularlo, se usa una fila con separación uniforme: cada botón con
   su borde redondeado y un espacio parejo entre ellos.
   --------------------------------------------------------------- */
td .btn-group,
th .btn-group {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    /* En escritorio los iconos van en UNA sola línea: si se permite envolver,
       el algoritmo de tabla comprime la columna y parte el grupo en dos filas.
       (En celular, la vista de tarjetas vuelve a habilitar el wrap.) */
    flex-wrap: nowrap;
    white-space: nowrap;
}
/* Botones compactos: con 5 acciones por fila, el padding por defecto
   desbordaba la columna y los mandaba a una segunda línea. */
td .btn-group .btn {
    padding-left: .45rem;
    padding-right: .45rem;
}
td .btn-group > form,
th .btn-group > form {
    display: inline-flex;
    margin: 0;
}
/* Bootstrap quita los redondeos a los hijos del grupo: se los devolvemos. */
td .btn-group > .btn,
td .btn-group > form > .btn {
    border-radius: var(--r-sm, .4rem) !important;
}
/* Anula el margen negativo que Bootstrap usa para solapar los botones. */
td .btn-group > .btn + .btn,
td .btn-group > form + form,
td .btn-group > form + .btn,
td .btn-group > .btn + form {
    margin-left: 0;
}

/* ---------------------------------------------------------------
   Tablas -> tarjetas apiladas en celular (sin scroll lateral)
   Se activa sobre cualquier tabla con la clase .tabla-cards, que
   logica.js agrega automaticamente a las tablas de las listas.
   El texto del encabezado se muestra via data-label (attr).
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* El contenedor deja de scrollear: las tarjetas ocupan el ancho */
    .table-responsive:has(> .tabla-cards) { overflow-x: visible; }

    table.tabla-cards thead { display: none; }

    table.tabla-cards,
    table.tabla-cards tbody,
    table.tabla-cards tr,
    table.tabla-cards td {
        display: block;
        width: 100%;
    }

    table.tabla-cards tr {
        margin-bottom: 1rem;
        padding: .35rem .9rem;
        border: 1px solid var(--border, #e3e8ef);
        border-radius: var(--r-md, .6rem);
        background: #fff;
        box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
    }

    /* Neutraliza el striping de Bootstrap: cada fila ya es una tarjeta */
    table.tabla-cards.table-striped > tbody > tr > td,
    table.tabla-cards.table-striped > tbody > tr:nth-of-type(odd) > * {
        --bs-table-bg-type: transparent;
        background: transparent;
    }

    table.tabla-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        text-align: right;
        padding: .55rem 0;
        border: none;
        border-bottom: 1px solid #f1f3f6;
    }
    table.tabla-cards tr td:last-child { border-bottom: none; }

    /* Etiqueta de la columna (desde data-label) a la izquierda */
    table.tabla-cards td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--brand, #12658f);
        text-align: left;
        margin-right: auto;
        white-space: nowrap;
    }

    /* Fila de estado vacio (colspan): centrada, sin etiqueta */
    table.tabla-cards td[colspan] {
        justify-content: center;
        text-align: center;
        color: var(--muted, #667085);
    }

    /* Los botones de accion se agrupan a la derecha y pueden envolver */
    table.tabla-cards td .btn-group { flex-wrap: wrap; justify-content: flex-end; }
}