/* ==========================================================================
   Estilo visual "Therika" aplicado sobre Bootstrap 4 (sin AdminLTE).
   Se carga después de fix.css/responsive.css para poder sobreescribir.
   ========================================================================== */

@font-face {
    font-family: QuicksandSemiBold;
    src: url(../fuentes/Quicksand-SemiBold.ttf);
}

:root {
    /* Marca — Índigo (primario) + Coral (acento) */
    --thk-primary:       #4f46e5;
    --thk-primary-dark:  #4338ca;
    --thk-primary-light: #eef2ff;
    --thk-primary-rgb:   79, 70, 229;
    --thk-primary-deep:  #6d28d9; /* extremo violeta para degradés (login/perfil) */

    --thk-accent:        #fb5607;
    --thk-accent-dark:   #e04e06;
    --thk-accent-light:  #fff1ec;

    /* Semánticos — estandarizados en un solo lugar, misma saturación/tono
       que primario/acento (antes repetidos como hex sueltos por regla). */
    --thk-success:       #16a34a;
    --thk-success-dark:  #15803d;
    --thk-success-light: #dcfce7;

    --thk-danger:        #dc2626;
    --thk-danger-dark:   #b91c1c;
    --thk-danger-light:  #fee2e2;

    --thk-warning:       #f59e0b;
    --thk-warning-dark:  #d97706;
    --thk-warning-light: #fef3c7;
    --thk-warning-text:  #78350f;

    --thk-info:          #0ea5e9;
    --thk-info-dark:     #0284c7;
    --thk-info-light:    #dbeafe;

    --thk-secondary:      #64748b;
    --thk-secondary-dark: #475569;

    --thk-dark: #1e293b;
    --thk-light: #f8f9fa;
}

/* ── Botones y acentos (equivalente a los overrides de Bootstrap 5 de Therika,
   adaptado a las clases fijas que genera Bootstrap 4/AdminLTE) ───────────── */
.btn-primary {
    background-color: var(--thk-primary) !important;
    border-color: var(--thk-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--thk-primary-dark) !important;
    border-color: var(--thk-primary-dark) !important;
}
.btn-outline-primary {
    color: var(--thk-primary) !important;
    border-color: var(--thk-primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--thk-primary) !important;
    color: #fff !important;
}
.badge-primary { background-color: var(--thk-primary) !important; }
.text-primary  { color: var(--thk-primary) !important; }
.bg-primary    { background-color: var(--thk-primary) !important; }
.border-primary{ border-color: var(--thk-primary) !important; }

.badge-success, .btn-success { background-color: var(--thk-success) !important; border-color: var(--thk-success) !important; }
.btn-success:hover, .btn-success:focus, .btn-success:active { background-color: var(--thk-success-dark) !important; border-color: var(--thk-success-dark) !important; }

/* ── Acento (coral) ───────────────────────────────────────────────────── */
.btn-accent { background-color: var(--thk-accent) !important; border-color: var(--thk-accent) !important; color: #fff !important; }
.btn-accent:hover, .btn-accent:focus, .btn-accent:active { background-color: var(--thk-accent-dark) !important; border-color: var(--thk-accent-dark) !important; }
.badge-accent { background-color: var(--thk-accent) !important; color: #fff !important; }
.text-accent  { color: var(--thk-accent) !important; }
.bg-accent    { background-color: var(--thk-accent) !important; }

/* ── Resto de colores Bootstrap 4 (btn-*/badge-*) ────────────────────────
   El bootstrap.min.css cargado es en realidad Bootstrap 5 (solo trae
   utilidades .bg-*/.text-bg-*, no las clases compuestas .btn-secondary/
   .badge-danger/etc.) — esas clases BS4 las traía AdminLTE como capa de
   compatibilidad. Al sacar AdminLTE del todo (sistema.ejs ya no lo usa)
   hay que reponerlas acá, ahora con la paleta estándar de la app (tokens
   --thk-* de :root) en vez de hex sueltos — si no, todos los botones/badges
   secondary-info-warning-danger-light-dark que usan los ~112 views (aún no
   migrados a Therika) quedan sin color. */
.btn-secondary { background-color: var(--thk-secondary) !important; border-color: var(--thk-secondary) !important; color: #fff !important; }
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active { background-color: var(--thk-secondary-dark) !important; border-color: var(--thk-secondary-dark) !important; }
.btn-info { background-color: var(--thk-info) !important; border-color: var(--thk-info) !important; color: #fff !important; }
.btn-info:hover, .btn-info:focus, .btn-info:active { background-color: var(--thk-info-dark) !important; border-color: var(--thk-info-dark) !important; }
.btn-warning { background-color: var(--thk-warning) !important; border-color: var(--thk-warning) !important; color: var(--thk-warning-text) !important; }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active { background-color: var(--thk-warning-dark) !important; border-color: var(--thk-warning-dark) !important; }
.btn-danger { background-color: var(--thk-danger) !important; border-color: var(--thk-danger) !important; color: #fff !important; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { background-color: var(--thk-danger-dark) !important; border-color: var(--thk-danger-dark) !important; }
.btn-light { background-color: var(--thk-light) !important; border-color: var(--thk-light) !important; color: var(--thk-dark) !important; }
.btn-dark { background-color: var(--thk-dark) !important; border-color: var(--thk-dark) !important; color: #fff !important; }

.badge-secondary { background-color: var(--thk-secondary) !important; color: #fff !important; }
.badge-info      { background-color: var(--thk-info) !important; color: #fff !important; }
.badge-warning   { background-color: var(--thk-warning) !important; color: var(--thk-warning-text) !important; }
.badge-danger    { background-color: var(--thk-danger) !important; color: #fff !important; }
.badge-light     { background-color: var(--thk-light) !important; color: var(--thk-dark) !important; }
.badge-dark      { background-color: var(--thk-dark) !important; color: #fff !important; }

.text-secondary { color: var(--thk-secondary) !important; }
.text-info      { color: var(--thk-info) !important; }
.text-warning   { color: var(--thk-warning) !important; }
.text-danger    { color: var(--thk-danger) !important; }
.bg-secondary   { background-color: var(--thk-secondary) !important; }
.bg-info        { background-color: var(--thk-info) !important; }
.bg-warning     { background-color: var(--thk-warning) !important; }
.bg-danger      { background-color: var(--thk-danger) !important; }

/* ── Tarjetas estilo Therika ───────────────────────────────────────────── */
.card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card-header {
    background: transparent;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px 16px 0 0 !important;
}

/* ── Grid responsivo de tarjetas: 1 columna en móvil, 2 en tablet, 3 en
   laptop, 4 en PC (md=768px, lg=992px, xl=1200px) — pedido explícito del
   usuario, difiere de la escala 1/2/3 de .card-grid de
   therika/frontend/style.css. ─── */
.grid-tarjetas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0 4px;
}
@media (min-width: 768px) {
    .grid-tarjetas { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .grid-tarjetas { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
    .grid-tarjetas { grid-template-columns: repeat(4, 1fr); }
}
.grid-tarjetas > .item-tarjeta { margin: 0; height: 100%; }

.item-tarjeta {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-left: 4px solid var(--thk-primary);
    box-shadow: 0 3px 14px rgba(0,0,0,0.09);
}
.item-tarjeta:hover {
    box-shadow: 0 10px 28px rgba(var(--thk-primary-rgb), 0.22);
    transform: translateY(-3px);
    border-left-color: var(--thk-accent);
}
.item-tarjeta .card-body { padding: 0.85rem; }
.item-tarjeta .item-titulo {
    font-family: QuicksandSemiBold;
    font-weight: 600;
    font-size: var(--grande);
    line-height: 1.2;
}
.item-tarjeta .item-sub {
    color: #6b7280;
    font-size: var(--normal);
}
.item-tarjeta .item-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}
.grid-vacio {
    grid-column: 1 / -1;
    text-align: center;
    color: #6b7280;
    padding: 30px 10px;
}

/* ── Badges suaves ─────────────────────────────────────────────────────── */
.badge-success-soft { background: var(--thk-success-light); color: var(--thk-success-dark); }
.badge-danger-soft   { background: var(--thk-danger-light); color: var(--thk-danger); }
.badge-info-soft     { background: var(--thk-info-light); color: var(--thk-info-dark); }
.badge-accent-soft   { background: var(--thk-accent-light); color: var(--thk-accent-dark); }

/* ── Botones de acción circulares (detalle/estado/editar/eliminar) ──────── */
.btn-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50% !important;
    border: 1.5px solid;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn-icon:hover  { transform: scale(1.12); }
.btn-icon:active { transform: scale(0.93); }
.btn-icon-primary   { border-color: var(--thk-primary); color: var(--thk-primary); }
.btn-icon-primary:hover   { background: var(--thk-primary); color: #fff; }
.btn-icon-accent    { border-color: var(--thk-accent); color: var(--thk-accent); }
.btn-icon-accent:hover    { background: var(--thk-accent); color: #fff; }
.btn-icon-danger    { border-color: var(--thk-danger); color: var(--thk-danger); }
.btn-icon-danger:hover    { background: var(--thk-danger); color: #fff; }
.btn-icon-success   { border-color: var(--thk-success); color: var(--thk-success); }
.btn-icon-success:hover   { background: var(--thk-success); color: #fff; }
.btn-icon-secondary { border-color: var(--thk-secondary); color: var(--thk-secondary); }
.btn-icon-secondary:hover { background: var(--thk-secondary); color: #fff; }

/* ── Buscador de listas ───────────────────────────────────────────────── */
.buscador-tarjetas {
    border-radius: 10px;
}

/* ── Paginación de tarjetas ──────────────────────────────────────────── */
.pagination-tarjetas { gap: 2px; }
.pagination-tarjetas .page-link {
    border: none;
    background: transparent;
    color: var(--thk-primary-dark);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: .9rem;
}
.pagination-tarjetas .page-link:hover { background: var(--thk-primary-light); color: var(--thk-primary-dark); }
.pagination-tarjetas .page-item.active .page-link {
    background: var(--thk-primary-light);
    color: var(--thk-primary-dark);
    font-weight: 600;
    box-shadow: none;
}
.pagination-tarjetas .page-item.disabled .page-link { color: #adb5bd; background: transparent; }

/* ==========================================================================
   Formularios estilo Android/Therika (labels flotantes, línea inferior
   animada). Bootstrap 4 no trae `.form-floating` (es de Bootstrap 5), así
   que la mecánica base (posición del label, corrimiento cuando el input
   tiene valor) se define acá y luego se sobreescribe el look-and-feel.
   ========================================================================== */
.form-floating {
    position: relative;
}
.form-floating > .form-control,
.form-floating > .form-select {
    height: calc(3.5rem + 2px);
    padding: 1rem 0.75rem;
    line-height: 1.25;
}
.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
}
.form-floating > .form-control::placeholder { color: transparent; }
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    opacity: .65;
    transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > textarea.form-control { height: auto; }

/* ── Override visual "Android" de Therika sobre el form-floating base ──── */
.android-input.form-floating { position: relative; }
.android-input.form-floating > .form-control,
.android-input.form-floating > .form-select {
    background-color: transparent !important;
    background-image: none !important;
    border: none;
    border-bottom: 2px solid #d0d0d0;
    border-radius: 0;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    font-size: 15px;
    box-shadow: none !important;
}
.android-input.form-floating > .form-control:focus,
.android-input.form-floating > .form-select:focus {
    border-bottom-color: var(--thk-primary);
    background-color: transparent !important;
    outline: none;
}
.android-input.form-floating > label {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    color: #999;
    font-size: 14px;
    font-weight: 400;
}
.android-input.form-floating > .form-control:focus ~ label,
.android-input.form-floating > .form-control:not(:placeholder-shown) ~ label,
.android-input.form-floating > .form-select ~ label {
    color: var(--thk-primary);
    font-weight: 600;
    opacity: 1;
}
.android-input.form-floating::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--thk-primary);
    transition: width 0.25s ease, left 0.25s ease;
}
.android-input.form-floating:focus-within::after {
    width: 100%;
    left: 0;
}
.android-input.form-floating > .form-control.is-valid,
.android-input.form-floating > .form-control.is-invalid {
    background-image: none !important;
}
.android-input.form-floating > .form-control.is-valid   { border-bottom-color: var(--thk-success) !important; }
.android-input.form-floating > .form-control.is-invalid { border-bottom-color: var(--thk-danger) !important; }
.android-input.form-floating:has(.is-valid)::after    { background: var(--thk-success); }
.android-input.form-floating:has(.is-invalid)::after  { background: var(--thk-danger); }
.android-input.form-floating:has(.is-valid) > label   { color: var(--thk-success) !important; }
.android-input.form-floating:has(.is-invalid) > label { color: var(--thk-danger) !important; }
.android-input.form-floating:has(.is-valid):focus-within::after,
.android-input.form-floating:has(.is-invalid):focus-within::after { width: 0 !important; }

/* Estrella de campo obligatorio */
.req-star { color: var(--thk-danger); font-size: 10px; }

/* Botón mostrar/ocultar contraseña dentro de un form-floating */
.btn-eye { position: absolute; right: 4px; top: 18px; z-index: 5; }

/* ── Pantalla de login estilo Therika ─────────────────────────────────── */
.login-page {
    max-width: 500px;
    margin: 0 auto;
    min-height: 100vh;
    background: #fff;
}
.login-header {
    background: linear-gradient(150deg, var(--thk-primary) 0%, var(--thk-primary-dark) 60%, var(--thk-primary-deep) 100%);
    border-radius: 0 0 36px 36px;
    padding: 3rem 1rem 2rem;
    text-align: center;
    color: #fff;
}
.avatar-login {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.85);
    box-shadow: 0 4px 20px rgba(0,0,0,0.20);
    margin-bottom: 14px;
}
.login-empresa { font-size: 1.15rem; letter-spacing: 0.5px; }
.login-tagline { color: rgba(255,255,255,0.80); font-size: 13px; }

/* ==========================================================================
   Navegación estilo Therika (sin AdminLTE): menú inferior (nivel 1, todas
   las pantallas) + nivel 2 de módulos arriba solo en laptop/PC (>=992px).
   En móvil/tablet los módulos se eligen en una pantalla de tarjetas dentro
   de #cuerpoPrincipal (mostrarLandingMenu() en general.js), igual que las
   landings de Therika (inicio.js/tienda.js). No hay barra superior propia
   — el usuario accede a su cuenta desde la pestaña "Perfil" del menú
   inferior.
   ========================================================================== */

/* Shell fijo: header (#nav_superior) y footer (#nav_inferior) fijos, y el
único que hace scroll vertical es #app-container, entre ambos — ver
_actualizaAlturasShell() en general.js, que mide la altura real de cada
barra (varía: #nav_superior puede estar vacío según el menú/pantalla) y la
guarda en --nav-superior-h/--nav-inferior-h para que #app-container calce
exacto sin depender de un alto fijo a mano. Nota: NO se toca `html,body`
(position:fixed ya calcula el alto contra el viewport, sin depender de la
altura de ancestros) — esta hoja también la carga la pantalla de login
(headInicio.ejs → index.ejs), que sí necesita poder scrollear el body
normal si el formulario no entra en la pantalla — solo se agrega
`overflow-x:hidden` global, que no afecta el scroll vertical de esa
pantalla.*/
html, body {
    overflow-x: hidden;
}
#nav_superior {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 901;
    background-color: #fff;
}
#app-container {
    position: fixed;
    top: var(--nav-superior-h, 0px);
    bottom: var(--nav-inferior-h, 0px);
    left: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-top: 14px;
}

/* ── Menú inferior (nivel 1) — visible en todas las pantallas ───────────── */
.tab-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    box-shadow: 0 -2px 20px rgba(0,0,0,0.08);
}
.tab-row {
    display: flex;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.tab-row::-webkit-scrollbar { display: none; }
.tab-item {
    flex: 1 0 auto;
    min-width: 64px;
    text-align: center;
    padding: 10px 0 12px;
    color: #777;
    font-size: 13px;
    transition: color 0.25s;
    position: relative;
    cursor: pointer;
}
.tab-item.active {
    color: var(--thk-primary);
    font-weight: 600;
}
.tab-item.active::before {
    content: '';
    display: block;
    width: 56px;
    height: 32px;
    background: rgba(var(--thk-primary-rgb), 0.10);
    border-radius: 50px;
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}
.tab-item i {
    font-size: 20px;
    display: block;
    margin-bottom: 3px;
    position: relative;
    z-index: 1;
}
.tab-item div {
    position: relative;
    z-index: 1;
}
@media (max-width: 767.98px) {
    .tab-row {
        gap: 14px;
        padding: 0 10px;
        justify-content: safe center;
    }
    .tab-item { flex: 0 0 auto; }
}

/* ── Nivel 2 de navegación (módulos del menú activo) — solo laptop/PC ──── */
@media (min-width: 992px) {
    .nav-superior-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 14px;
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
    }
    .nav-superior-item {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        gap: 6px;
        padding: 7px 12px;
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 600;
        color: #4b5563;
        cursor: pointer;
        white-space: nowrap;
        transition: background .15s, color .15s;
    }
    .nav-superior-item:hover { background: #f3f4f6; }
    .nav-superior-item.active { background: var(--thk-primary); color: #fff; }
    .nav-superior-item i { font-size: 13px; width: 16px; text-align: center; }
}

/* ── Landing de módulos (móvil/tablet): tarjetas dentro de #cuerpoPrincipal ─ */
.modulo-card { text-align: center; }
.icon-module {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--thk-primary);
    color: #fff;
    font-size: 1.2rem;
}

/* ── Árbol de permisos (Gestionar Módulos / Gestionar Accesos) — estilo
   Therika: tarjeta por menú, filas indentadas por submenú/opción, con
   switches que guardan al instante (sin botón "Guardar cambios"). ────────── */
.perm-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 16px 16px 0 0;
}
.perm-menu-header .badge { font-size: 10px; }
.perm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
}
.perm-row:last-child { border-bottom: none; }
.perm-row-submenu { padding-left: 28px; }
.perm-row-opcion { padding-left: 52px; background: #fafafa; }
.perm-row-opcion .perm-nombre { color: #6b7280; font-size: 13px; }
.perm-nombre { font-size: 14px; }
.perm-chevron {
    transition: transform 0.2s ease;
    color: #9ca3af;
    margin-right: 4px;
}
.perm-chevron.abierto { transform: rotate(90deg); }
.perm-toggle {
    font-size: 1.6rem;
    line-height: 1;
}
.perm-toggle.la-toggle-on { color: var(--thk-primary); }
.perm-toggle.la-toggle-off { color: #adb5bd; }

/* ── Offcanvas (estándar nuevo, reemplaza a los modales general1/2/3) ───── */
.offcanvas-end { box-shadow: -4px 0 30px rgba(0,0,0,0.12); }
.offcanvas-header { border-bottom: 1px solid #f0f0f0; padding: 20px 20px 14px; }
.offcanvas-title  { font-size: 1.1rem; font-weight: 700; }
.oc-scroll { overflow-y: auto; }
.btn-eye-12 { position: absolute; right: 12px; top: 18px; z-index: 5; }
.mt-hint { margin-top: -12px; }

/* ── Perfil (offcanvas abierto desde la pestaña virtual del menú inferior,
   2026-09-16: antes reemplazaba #cuerpoPrincipal, ahora es un offcanvas como
   cualquier otro) ──────────────────────────────────────────────────────── */
.perfil-header {
    background: linear-gradient(135deg, var(--thk-primary) 0%, var(--thk-primary-dark) 100%);
    margin: -1rem -1rem 0 -1rem; /* bleed a los bordes del .offcanvas-body (padding 1rem de Bootstrap) */
}
.avatar-profile {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.8);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.25);
    color: #fff;
    font-weight: 700;
    font-size: 2rem;
}
.icon-circle {
    width: 38px;
    height: 38px;
    background: var(--thk-primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Dashboard: tarjetas KPI ──────────────────────────────────────────── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
.kpi-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
}
.kpi-tile .icon-circle {
    width: 46px;
    height: 46px;
    font-size: 1.2rem;
}
.kpi-tile .icon-circle-success { background: var(--thk-success-light); color: var(--thk-success-dark); }
.kpi-tile .icon-circle-danger  { background: var(--thk-danger-light);  color: var(--thk-danger); }
.kpi-tile .icon-circle-warning { background: var(--thk-warning-light); color: var(--thk-warning-dark); }
.kpi-tile .icon-circle-info    { background: var(--thk-info-light);    color: var(--thk-info-dark); }
.kpi-tile .icon-circle-primary { background: var(--thk-primary-light); color: var(--thk-primary-dark); }
.kpi-valor {
    font-family: QuicksandSemiBold;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.1;
}
.kpi-label {
    color: #6b7280;
    font-size: var(--normal);
}
.chart-container {
    position: relative;
    height: 280px;
    max-width: 420px;
    margin: 0 auto;
}
.chart-container-ancho {
    max-width: 700px;
}

/* ── Dashboard: filas compactas de lista (últimos pagos / deudores) ─────── */
.dash-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0.7rem 0.9rem;
}
.dash-row .dash-row-titulo {
    font-weight: 600;
    font-size: var(--normal);
}
.dash-row .dash-row-sub {
    color: #6b7280;
    font-size: 12px;
}
.dash-row .dash-row-monto {
    font-family: QuicksandSemiBold;
    font-weight: 600;
    white-space: nowrap;
}