/* ============================================================
   tema.css v4 — Capa de diseño premium del sistema
   Estilo: Fintech SaaS — sidebar slate, contenido claro,
   KPI cards con color-coded icons, micro-animaciones cuidadas.
   Los colores de marca llegan como --brand / --brand-2 inyectados
   por PHP después de este archivo. Aqui solo hay valores de respaldo.
   ============================================================ */

/* ---------- Tokens de diseño ---------- */
:root {
  /* Marca (respaldo — PHP sobreescribe) */
  --brand:    #1E3A8A;
  --brand-2:  #16A34A;

  /* Superficies oscuras */
  --oscuro:   #0b1220;
  --oscuro-2: #16233d;
  --oscuro-3: #273549;

  /* Texto */
  --tinta:        #0f172a;
  --texto-suave:  #64748b;
  --texto-muted:  #94a3b8;

  /* Fondos */
  --fondo:   #f5f7fa;

  /* Bordes y lineas */
  --linea:   #e2e8f0;
  --linea-2: #cbd5e1;

  /* ── Estados semanticos: un solo juego para todo el sistema ──
     Cada estado trae su color fuerte, su fondo suave y su borde. */
  --ok:        #16a34a;  --ok-txt:    #15803d;  --ok-bg:    #f0fdf4;  --ok-borde:    #bbf7d0;
  --info:      #0891b2;  --info-txt:  #0e7490;  --info-bg:  #ecfeff;  --info-borde:  #a5f3fc;
  --aviso:     #d97706;  --aviso-txt: #b45309;  --aviso-bg: #fffbeb;  --aviso-borde: #fde68a;
  --riesgo:    #dc2626;  --riesgo-txt:#b91c1c;  --riesgo-bg:#fef2f2;  --riesgo-borde:#fecaca;
  --neutro:    #64748b;  --neutro-txt:#475569;  --neutro-bg:#f1f5f9;  --neutro-borde:#e2e8f0;

  /* ── Escala de espaciado: 4-8-12-16-20-24-32-40 ── */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 24px; --e7: 32px; --e8: 40px;

  /* Radios */
  --radio-xs: 6px;
  --radio-sm: 8px;
  --radio:    12px;
  --radio-lg: 16px;
  --radio-xl: 20px;

  /* Sombras */
  --sombra-0: 0 1px 2px rgba(15,23,42,.04);
  --sombra-1: 0 2px 8px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --sombra-2: 0 8px 24px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.05);
  --sombra-3: 0 20px 48px rgba(15,23,42,.14), 0 4px 12px rgba(15,23,42,.06);
  --sombra-brand: 0 8px 24px -6px color-mix(in srgb, var(--brand) 40%, transparent);

  /* Transiciones */
  --t-fast: .12s ease;
  --t:      .2s ease;
  --t-slow: .35s ease;

  /* Sidebar */
  --sidebar-w: 260px;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* Tipografia: la misma de la pagina publica (landing y manual).
   Inter para el texto, Poppins para los titulos y las cifras grandes. */
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--fondo);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 15px;
  line-height: 1.6;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.025em;
  text-wrap: balance;
  color: var(--tinta);
  line-height: 1.25;
}
/* Cifras y rotulos destacados tambien en Poppins, como en la landing */
.kpi-card .kpi-value, .sidebar-head a, .display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
}
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: color-mix(in srgb, var(--brand) 75%, #000); }
::selection { background: color-mix(in srgb, var(--brand) 20%, #fff); }
.fs-2,.fs-3,.fs-4,.fs-5,td,.tabular { font-variant-numeric: tabular-nums; }
.fs-3,.fs-4 { letter-spacing: -.02em; }

/* ============================================================
   Jerarquia tipografica del sistema
   Display / H1 / H2 / H3 / cuerpo / small / caption / label /
   cifra. Se usa con clases donde el HTML no trae el tag.
   ============================================================ */
.t-display {
  font-family: 'Poppins','Inter',sans-serif; font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: -.045em; line-height: 1.06;
}
.t-h1      { font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.t-h2      { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.t-h3      { font-size: .95rem;  font-weight: 700; letter-spacing: -.015em; }
.t-body    { font-size: .9rem; color: var(--tinta); }
.t-small   { font-size: .8rem;  color: var(--texto-suave); }
.t-caption { font-size: .72rem; color: var(--texto-muted); }
.t-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--texto-suave);
}
/* Cifras de dinero: siempre misma familia, ancho fijo y sin partirse */
.t-cifra {
  font-family: 'Poppins','Inter',sans-serif; font-weight: 800;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--tinta);
}
.t-cifra-lg { font-size: 1.95rem; }
.t-cifra-md { font-size: 1.45rem; }
.t-cifra-sm { font-size: 1.05rem; }
.t-ok { color: var(--ok-txt) !important; }  .t-info   { color: var(--info-txt) !important; }
.t-aviso { color: var(--aviso-txt) !important; } .t-riesgo { color: var(--riesgo-txt) !important; }

/* Utilidades de marca */
.bg-brand    { background: var(--brand) !important; }
.text-brand  { color: var(--brand) !important; }

/* ============================================================
   Layout: sidebar + contenido
   ============================================================ */
.app-layout { display: flex; min-height: 100dvh; }
.app-main   { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--fondo); }
.app-main .content {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  flex: 1 0 auto;
  padding: 1.75rem 1.5rem 2rem;
}
@media (max-width: 991px) { .app-main .content { padding: 1.25rem 1rem 1.5rem; } }

/* ============================================================
   Topbar (solo movil)
   ============================================================ */
.topbar {
  background: var(--oscuro);
  color: #fff;
  height: 58px;
  position: sticky;
  top: 0;
  z-index: 1030;
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.topbar .abrir-menu {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
  border-radius: var(--radio-sm);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t);
  cursor: pointer;
  font-size: 1.2rem; line-height: 1;
  padding: 0;
}
.topbar .abrir-menu:hover { background: rgba(255,255,255,.16); }

/* ============================================================
   Sidebar premium
   ============================================================ */
.sidebar {
  --bs-offcanvas-width: var(--sidebar-w);
  background: linear-gradient(180deg, #0b1220 0%, #0a1526 100%) !important;
  color: #cbd5e1 !important;
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.04);
}
@media (min-width: 992px) {
  .sidebar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; scrollbar-width: none; }
  .sidebar::-webkit-scrollbar { display: none; }
}

.sidebar-head {
  padding: 1.2rem 1.1rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sidebar-head a { color: #fff; font-weight: 800; letter-spacing: -.025em; font-size: 1.05rem; text-decoration: none; }
.sidebar-brand-icon {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--brand) 50%, transparent);
  flex-shrink: 0;
}
.sidebar-brand-icon svg { width: 18px; height: 18px; color: #fff; }

/* Con logo de la empresa: fondo claro para que la imagen se lea sobre el menu oscuro */
.sidebar-brand-icon.con-logo {
  background: #fff;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.45);
  overflow: hidden;
}
.sidebar-brand-icon.con-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 3px;
}

.sidebar-nav { padding: .5rem .7rem; flex: 1; }

/* ── Etiquetas de sección ── */
.sidebar-nav .nav-section {
  font-size: .63rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase;
  color: #5a6b87;                      /* a11y: #334155 casi no se leia sobre el menu */
  padding: 1.05rem .85rem .35rem;
  pointer-events: none; user-select: none;
  display: flex; align-items: center; gap: .55rem;
}
.sidebar-nav .nav-section::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(148,163,184,.16), transparent);
}

/* ── Nav link base ── */
.sidebar-nav .nav-link {
  display: flex; align-items: center; gap: .7rem;
  color: #94a3b8; font-weight: 500; font-size: .875rem;
  border-radius: 10px;
  padding: .6rem .85rem;
  margin-bottom: 2px;
  position: relative;
  transition: background var(--t), color var(--t), box-shadow var(--t);
  cursor: pointer;
  letter-spacing: -.01em;
  text-decoration: none;
}

/* ── Icono ── */
.sidebar-nav .nav-link .nav-ico {
  width: 18px; height: 18px; flex-shrink: 0;
  opacity: .5;
  transition: opacity var(--t), color var(--t), transform var(--t);
}

/* ── Hover ── */
.sidebar-nav .nav-link:hover {
  color: #e2e8f0;
  background: rgba(255,255,255,.07);
}
.sidebar-nav .nav-link:hover .nav-ico {
  opacity: .85;
  transform: scale(1.08);
}

/* ── Activo ── */
.sidebar-nav .nav-link.active {
  color: #fff;
  font-weight: 600;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--brand) 28%, transparent) 0%,
    color-mix(in srgb, var(--brand) 10%, transparent) 100%
  );
  box-shadow:
    inset 3px 0 0 var(--brand),
    0 4px 16px -6px color-mix(in srgb, var(--brand) 40%, transparent);
}
.sidebar-nav .nav-link.active .nav-ico {
  opacity: 1;
  color: var(--brand-2);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--brand-2) 60%, transparent));
  transform: scale(1.05);
}

/* ── Punto indicador (badge) en nav-link ── */
.sidebar-nav .nav-link .nav-badge {
  margin-left: auto;
  min-width: 18px; height: 18px;
  background: var(--brand);
  color: #fff;
  font-size: .62rem; font-weight: 800;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--brand) 50%, transparent);
  line-height: 1;
}


/* ============================================================
   Sidebar colapsado (solo escritorio)
   Se guarda la preferencia en el navegador; en movil el menu
   sigue siendo el deslizable de siempre.
   ============================================================ */
.sidebar-plegar {
  width: 26px; height: 26px; flex-shrink: 0;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
  color: #94a3b8; border-radius: 7px; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  transition: background var(--t), color var(--t), transform var(--t);
}
.sidebar-plegar:hover { background: rgba(255,255,255,.12); color: #e2e8f0; }
.sidebar-plegar svg { width: 14px; height: 14px; transition: transform var(--t); }
@media (min-width: 992px) { .sidebar-plegar { display: flex; } }

@media (min-width: 992px) {
  .app-layout.menu-plegado { --sidebar-w: 72px; }
  .menu-plegado .sidebar { transition: width var(--t-slow); }
  .menu-plegado .sidebar-head a span,
  .menu-plegado .sidebar-nav .nav-section,
  .menu-plegado .sidebar-nav .nav-flecha,
  .menu-plegado .sidebar-nav .collapse,
  .menu-plegado .sidebar-nav .collapsing,
  .menu-plegado .sidebar-foot .user-pill > div:last-child { display: none; }
  .menu-plegado .sidebar-head { padding: 1.2rem .6rem 1rem; justify-content: center; }
  .menu-plegado .sidebar-head a { justify-content: center; }
  .menu-plegado .sidebar-nav { padding: .5rem .55rem; }
  /* El rotulo se apaga con font-size:0 para no tener que envolver cada
     texto del menu en un <span> (y no romper la guia de bienvenida). */
  .menu-plegado .sidebar-nav .nav-link { justify-content: center; padding: .65rem 0; font-size: 0; gap: 0; }
  .menu-plegado .sidebar-nav .nav-link .nav-ico { width: 20px; height: 20px; opacity: .75; }
  .menu-plegado .sidebar-nav .nav-link.active .nav-ico { opacity: 1; }
  .menu-plegado .sidebar-nav .nav-link .nav-badge {
    position: absolute; top: 3px; right: 6px; margin: 0; min-width: 15px; height: 15px; font-size: .55rem;
  }
  .menu-plegado .sidebar-foot { padding: .875rem .5rem 1rem; }
  .menu-plegado .sidebar-foot .user-pill { justify-content: center; }
  /* El boton de salir queda como icono, igual que los del menu */
  .menu-plegado .sidebar-foot .btn { font-size: 0; gap: 0; padding-left: 0; padding-right: 0; }
  .menu-plegado .sidebar-foot .btn svg { width: 16px; height: 16px; }
  .menu-plegado .sidebar-plegar svg { transform: rotate(180deg); }

  /* Rotulo flotante al pasar el mouse, ya que el texto esta oculto */
  .menu-plegado .sidebar-nav .nav-link::after {
    content: attr(data-titulo);
    position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-4px);
    background: var(--oscuro-2); color: #e2e8f0;
    font-size: .78rem; font-weight: 600; white-space: nowrap;
    padding: .35rem .7rem; border-radius: var(--radio-xs);
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: var(--sombra-2);
    opacity: 0; pointer-events: none; z-index: 1040;
    transition: opacity var(--t), transform var(--t);
  }
  .menu-plegado .sidebar-nav .nav-link:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
}

.sidebar-foot {
  margin-top: auto;
  padding: .875rem 1.1rem 1rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.sidebar-foot .user-pill {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .7rem;
}
.sidebar-foot .user-avatar {
  width: 32px; height: 32px;
  background: color-mix(in srgb, var(--brand) 20%, var(--oscuro-3));
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: var(--brand-2);
  flex-shrink: 0; letter-spacing: 0;
}
.sidebar-foot .user-name { font-size: .84rem; font-weight: 600; color: #e2e8f0; line-height: 1.2; }
.sidebar-foot .user-role { font-size: .7rem; color: #64748b; }

/* ============================================================
   Botones
   ============================================================ */
.btn {
  font-weight: 600;
  border-radius: var(--radio-sm);
  font-size: .875rem;
  padding: .5rem .95rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  transition: transform var(--t-fast), box-shadow var(--t), background-color var(--t), border-color var(--t), color var(--t);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .06s; }
.btn:disabled, .btn.disabled { opacity: .5; transform: none; box-shadow: none; cursor: not-allowed; }
.btn-sm { border-radius: var(--radio-xs); font-size: .8rem;  padding: .34rem .7rem; }
.btn-lg { border-radius: var(--radio);    font-size: .95rem; padding: .65rem 1.3rem; }
.btn svg { flex-shrink: 0; }
/* Foco visible y uniforme en todos los botones */
.btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent);
}

/* Boton de solo icono: cuadrado y del mismo alto que los demas */
.btn-icono {
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--linea); background: #fff; color: var(--texto-suave);
  border-radius: var(--radio-sm);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--t), border-color var(--t), box-shadow var(--t), transform var(--t-fast);
}
.btn-icono:hover {
  color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, var(--linea));
  box-shadow: var(--sombra-1); transform: translateY(-1px);
}
.btn-icono.btn-sm { width: 32px; height: 32px; }

/* Variantes propias que las paginas ya usaban sin definir en ningun lado */
.btn-ghost {
  background: transparent; border-color: transparent; color: var(--texto-suave);
}
.btn-ghost:hover {
  background: color-mix(in srgb, var(--brand) 8%, #fff);
  border-color: transparent; color: var(--brand);
}
.btn-volver {
  background: #fff; border: 1px solid var(--linea-2); color: var(--texto-suave);
  border-radius: var(--radio-sm); font-weight: 600; font-size: .85rem;
  padding: .45rem .9rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: color var(--t), border-color var(--t), background var(--t);
}
.btn-volver:hover { color: var(--brand); border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, #fff); }
.btn-wa {
  background: #fff; border: 1px solid #86efac; color: #15803d;
  border-radius: var(--radio-xs); font-weight: 600; font-size: .78rem;
  padding: .28rem .6rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: .3rem;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.btn-wa:hover { background: #f0fdf4; border-color: #16a34a; color: #14532d; }
.btn-xs { font-size: .72rem; padding: .2rem .6rem; border-radius: var(--radio-xs); font-weight: 600; }

/* Accesos rapidos de alta (nuevo prestamo / registrar cliente).
   Van en verde para que salten a la vista sin competir con la
   accion principal del dia, que es la azul de marca. */
.btn-alta {
  background: var(--ok); border-color: var(--ok); color: #fff;
  box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--ok) 55%, transparent);
}
.btn-alta:hover, .btn-alta:focus {
  background: color-mix(in srgb, var(--ok) 86%, #000);
  border-color: color-mix(in srgb, var(--ok) 86%, #000);
  color: #fff;
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--ok) 70%, transparent);
}
.btn-alta:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 35%, transparent); }

.btn-alta-suave {
  background: var(--ok-bg); border-color: var(--ok-borde); color: var(--ok-txt);
}
.btn-alta-suave:hover, .btn-alta-suave:focus {
  background: color-mix(in srgb, var(--ok) 18%, #fff);
  border-color: var(--ok); color: var(--ok-txt);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--ok) 55%, transparent);
}
.btn-alta-suave:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 28%, transparent); }

/* Semanticos: mismos colores que los estados del sistema */
.btn-success, .btn-success:focus { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-success:hover { background: color-mix(in srgb, var(--ok) 85%, #000); border-color: color-mix(in srgb, var(--ok) 85%, #000); color: #fff; }
.btn-danger, .btn-danger:focus { background: var(--riesgo); border-color: var(--riesgo); color: #fff; }
.btn-danger:hover { background: color-mix(in srgb, var(--riesgo) 85%, #000); border-color: color-mix(in srgb, var(--riesgo) 85%, #000); color: #fff; }
.btn-outline-secondary {
  border-color: var(--linea-2); color: var(--texto-suave); background: #fff;
}
.btn-outline-secondary:hover {
  background: color-mix(in srgb, var(--brand) 6%, #fff);
  border-color: color-mix(in srgb, var(--brand) 35%, var(--linea-2));
  color: var(--brand);
}
.btn-outline-success { border-color: #86efac; color: var(--ok-txt); }
.btn-outline-success:hover { background: var(--ok-bg); border-color: var(--ok); color: var(--ok-txt); }
.btn-outline-danger  { border-color: var(--riesgo-borde); color: var(--riesgo-txt); }
.btn-outline-danger:hover  { background: var(--riesgo-bg); border-color: var(--riesgo); color: var(--riesgo-txt); }

.btn-brand {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--brand) 40%, transparent);
}
.btn-brand:hover,.btn-brand:focus {
  background: color-mix(in srgb, var(--brand) 82%, #000);
  border-color: color-mix(in srgb, var(--brand) 82%, #000);
  color: #fff;
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--brand) 55%, transparent);
}
.btn-brand:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);
}

/* ============================================================
   Cards base
   ============================================================ */
.card {
  border: 1px solid var(--linea); border-radius: var(--radio-lg);
  background: #fff; box-shadow: var(--sombra-0);
  transition: box-shadow var(--t);
}
.card .card-body { padding: 1.25rem 1.375rem; }
.card .text-uppercase.small { letter-spacing: .08em; font-size: .7rem; font-weight: 700; color: var(--texto-suave) !important; }
.card-header {
  background: transparent; border-bottom: 1px solid var(--linea);
  padding: 1rem 1.375rem; font-weight: 700; font-size: .925rem;
  border-radius: var(--radio-lg) var(--radio-lg) 0 0;
}
.card-header svg { flex-shrink: 0; }
.card-footer {
  background: #fbfcfe; border-top: 1px solid var(--linea);
  padding: .85rem 1.375rem; font-size: .8rem; color: var(--texto-suave);
  border-radius: 0 0 var(--radio-lg) var(--radio-lg);
}
/* Una tabla dentro de una tarjeta no debe asomar por las esquinas */
.card > .card-body.p-0 > .table-responsive:last-child,
.card > .card-body.p-0 > .table-responsive:last-child > .table { border-radius: 0 0 var(--radio-lg) var(--radio-lg); }
/* Tarjeta que es un enlace o accion: se levanta al pasar el mouse */
.card.card-accion { cursor: pointer; }
.card.card-accion:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }

/* ============================================================
   KPI Cards premium (métricas del dashboard)
   ============================================================ */
.kpi-card {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-1);
  padding: 1.2rem 1.25rem 1rem;
  display: flex; flex-direction: column; gap: .5rem;
  transition: box-shadow var(--t), transform var(--t);
  cursor: default;
  position: relative; overflow: hidden;
}
.kpi-card::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 72px; height: 72px;
  border-radius: 0 var(--radio-lg) 0 100%;
  background: color-mix(in srgb, var(--kpi-color, var(--brand)) 9%, transparent);
  transition: width var(--t-slow), height var(--t-slow);
}
.kpi-card:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }
.kpi-card:hover::after { width: 100px; height: 100px; }

.kpi-card .kpi-label {
  font-size: .67rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--texto-suave);
}
.kpi-card .kpi-value {
  font-size: 1.6rem; font-weight: 800; letter-spacing: -.04em;
  color: var(--kpi-color, var(--brand)); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kpi-card .kpi-icon {
  position: absolute; top: .9rem; right: 1rem;
  width: 34px; height: 34px;
  background: color-mix(in srgb, var(--kpi-color, var(--brand)) 12%, transparent);
  border-radius: var(--radio-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--kpi-color, var(--brand));
}
.kpi-card .kpi-icon svg { width: 17px; height: 17px; }
.kpi-card .kpi-sub { font-size: .78rem; color: var(--texto-suave); }   /* a11y: --texto-muted daba 2.56:1 sobre blanco */

/* Tarjetas del dia en el panel: llevan tendencia y mini grafico, asi que
   no usan .kpi-card (no tienen icono flotante ni le reservan sitio). */
.kpi-dia { transition: box-shadow .18s, transform .18s; }
.kpi-dia:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }
.kpi-dia .kpi-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texto-suave);
}
.kpi-dia .kpi-value {
  font-size: 1.45rem; font-weight: 800; letter-spacing: -.04em;
  line-height: 1.15; margin: .15rem 0 .1rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 767.98px) {
  .kpi-dia .kpi-value { font-size: clamp(.95rem, 4.2vw, 1.3rem); }
  .kpi-dia .kpi-label { font-size: .6rem; letter-spacing: .05em; }
}

/* El icono va posicionado encima de la tarjeta: se le reserva su espacio
   para que el texto no se le meta debajo (pasaba en pantallas angostas). */
.kpi-card .kpi-label,
.kpi-card .kpi-value { padding-right: 2.7rem; }

/* Variantes de KPI */
.kpi-primary { --kpi-color: var(--brand); }
.kpi-success { --kpi-color: #16a34a; }
.kpi-info    { --kpi-color: #0891b2; }
.kpi-warning { --kpi-color: #d97706; }
.kpi-danger  { --kpi-color: #dc2626; }
.kpi-violet  { --kpi-color: #7c3aed; }

/* ============================================================
   Encabezado de pagina
   ============================================================ */
/* El mismo encabezado en todas las pantallas: titulo + subtitulo a la
   izquierda, acciones a la derecha. Las paginas solo cambian el texto. */
.page-header {
  margin-bottom: var(--e5);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap;
}
.page-header-text { min-width: 0; }
.page-header-text h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: .12rem; }
.page-header-text .subtitle { font-size: .875rem; color: var(--texto-suave); margin-bottom: 0; }
/* Zona de acciones: los botones siempre alineados y del mismo alto */
.page-header > div:last-child:not(.page-header-text) {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}

/* ============================================================
   Tablas
   ============================================================ */
.table { border-color: var(--linea); font-size: .875rem; margin-bottom: 0; }
.table thead th {
  font-size: .67rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-suave); font-weight: 700; white-space: nowrap;
  border-bottom: 1px solid var(--linea);
  padding: .7rem .875rem;
  background: #f8fafc;
}
.table td { padding: .75rem .875rem; vertical-align: middle; border-color: var(--linea); }
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover tbody tr { transition: background var(--t-fast); }
.table-hover tbody tr:hover td { background: color-mix(in srgb, var(--brand) 4%, #fafbfc); }
/* Columna de acciones al final: siempre a la derecha y sin saltos */
.table td .btn { white-space: nowrap; }
/* Cabecera ordenable (listados de morosos, reportes) */
.table thead th.sortable { cursor: pointer; user-select: none; transition: background var(--t-fast), color var(--t-fast); }
.table thead th.sortable:hover { background: color-mix(in srgb, var(--brand) 6%, #f8fafc); color: var(--brand); }
.table thead th .sort-ico { font-size: .75rem; opacity: .4; }
.table thead th.asc  .sort-ico::after { content: '↑'; opacity: 1; }
.table thead th.desc .sort-ico::after { content: '↓'; opacity: 1; }
.table thead th.asc .sort-ico, .table thead th.desc .sort-ico { opacity: 0; }

/* ============================================================
   Estado vacio — mismo en todas las pantallas
   ============================================================ */
.vacio { padding: var(--e8) var(--e5); text-align: center; }
.vacio-icono {
  width: 54px; height: 54px; margin: 0 auto var(--e3);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--neutro-bg); color: var(--texto-muted);
}
.vacio-icono svg { width: 24px; height: 24px; }
.vacio-titulo { font-weight: 700; font-size: .95rem; color: var(--tinta); margin-bottom: .25rem; }
.vacio-texto  { font-size: .84rem; color: var(--texto-suave); margin-bottom: var(--e4); }
.vacio.ok .vacio-icono { background: var(--ok-bg); color: var(--ok); }

/* ============================================================
   Carga: esqueleto y girador
   ============================================================ */
@keyframes cd-brillo { 100% { transform: translateX(100%); } }
.skeleton {
  position: relative; overflow: hidden;
  background: var(--neutro-bg); border-radius: var(--radio-xs);
  height: 1em; width: 100%;
}
.skeleton::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: cd-brillo 1.3s infinite;
}
.skeleton-linea + .skeleton-linea { margin-top: .5rem; }
@keyframes cd-giro { to { transform: rotate(360deg); } }
.spinner-cd {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--brand) 22%, transparent);
  border-top-color: var(--brand);
  animation: cd-giro .7s linear infinite;
  display: inline-block; vertical-align: -3px;
}

/* ============================================================
   Badges suaves pill
   ============================================================ */
.badge {
  font-weight: 600; letter-spacing: .02em; padding: .38em .85em;
  border-radius: 999px; font-size: .74rem; line-height: 1.4;
  border: 1px solid transparent;
}
.badge.text-bg-primary   { background: #dbeafe !important; color: #1d4ed8 !important; border-color: #bfdbfe; }
.badge.text-bg-success   { background: var(--ok-bg) !important;     color: var(--ok-txt) !important;     border-color: var(--ok-borde); }
.badge.text-bg-secondary { background: var(--neutro-bg) !important; color: var(--neutro-txt) !important; border-color: var(--neutro-borde); }
.badge.text-bg-warning   { background: var(--aviso-bg) !important;  color: var(--aviso-txt) !important;  border-color: var(--aviso-borde); }
.badge.text-bg-danger    { background: var(--riesgo-bg) !important; color: var(--riesgo-txt) !important; border-color: var(--riesgo-borde); }
.badge.text-bg-info      { background: var(--info-bg) !important;   color: var(--info-txt) !important;   border-color: var(--info-borde); }
.badge.text-bg-light     { background: #fff !important; color: var(--texto-suave) !important; border-color: var(--linea); }
/* Punto de estado a la izquierda del texto, opcional */
.badge.con-punto::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: currentColor; margin-right: .4em; vertical-align: .05em;
}

/* ============================================================
   Formularios
   ============================================================ */
.form-label, label { font-weight: 600; font-size: .8rem; color: #475467; margin-bottom: .3rem; }
.form-control,.form-select {
  border-color: var(--linea-2); border-radius: var(--radio-sm);
  padding: .55rem .875rem; font-size: .9rem;
  color: var(--tinta); background-color: #fff;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.form-control::placeholder { color: var(--texto-muted); }
.form-control:hover:not(:disabled), .form-select:hover:not(:disabled) { border-color: var(--linea-2); }
.form-control:focus,.form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
  outline: none;
}
.form-control:disabled, .form-select:disabled,
.form-control[readonly] { background: #f8fafc; color: var(--texto-suave); cursor: not-allowed; }
.form-control-sm, .form-select-sm { padding: .35rem .65rem; font-size: .82rem; border-radius: var(--radio-xs); }
/* Validacion: mismo lenguaje que los estados */
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--riesgo); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--riesgo) 18%, transparent); }
.form-control.is-valid, .form-select.is-valid { border-color: var(--ok); }
.invalid-feedback { font-size: .76rem; color: var(--riesgo-txt); font-weight: 600; }
.form-text { font-size: .75rem; color: var(--texto-suave); }
/* Numeros y dinero dentro de un input: alineados y tabulares */
input[type="number"], input[inputmode="decimal"], .input-dinero { font-variant-numeric: tabular-nums; }
.form-check-input { border-color: var(--linea-2); transition: background var(--t), border-color var(--t); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.form-check-label { font-weight: 500; font-size: .85rem; color: var(--tinta); }
.input-group-text { background: #f8fafc; border-color: var(--linea-2); color: var(--texto-suave); font-size: .875rem; }
.input-group > .form-control:focus + .input-group-text { border-color: var(--brand); }

/* ============================================================
   Alertas con borde izquierdo
   ============================================================ */
.alert {
  border: 1px solid var(--linea); border-left-width: 4px;
  border-radius: var(--radio-sm); box-shadow: var(--sombra-0);
  padding: .85rem 1.1rem; font-size: .875rem;
}
.alert-success { border-color: var(--ok-borde);     border-left-color: var(--ok);     background: var(--ok-bg);     color: #14532d; }
.alert-danger  { border-color: var(--riesgo-borde); border-left-color: var(--riesgo); background: var(--riesgo-bg); color: #7f1d1d; }
.alert-warning { border-color: var(--aviso-borde);  border-left-color: var(--aviso);  background: var(--aviso-bg);  color: #78350f; }
.alert-info    { border-color: var(--info-borde);   border-left-color: var(--info);   background: var(--info-bg);   color: #164e63; }
.alert-light, .alert-secondary { border-color: var(--linea); border-left-color: var(--linea-2); background: #fff; color: var(--texto-suave); }
.alert b, .alert strong { font-weight: 700; }

/* ============================================================
   Modales — mismo lenguaje que las tarjetas
   ============================================================ */
.modal-content {
  border: 1px solid var(--linea); border-radius: var(--radio-lg);
  box-shadow: var(--sombra-3); overflow: hidden;
}
.modal-header {
  border-bottom: 1px solid var(--linea); padding: var(--e4) var(--e5);
  background: #fff;
}
.modal-title { font-size: 1rem; font-weight: 700; letter-spacing: -.02em; }
.modal-body   { padding: var(--e5); }
.modal-footer {
  border-top: 1px solid var(--linea); padding: var(--e3) var(--e5);
  background: #fbfcfe; gap: .5rem;
}
.modal-backdrop.show { opacity: .55; }
.modal.fade .modal-dialog { transition: transform .22s cubic-bezier(.22,1,.36,1), opacity .22s; transform: translateY(12px); }
.modal.show .modal-dialog { transform: none; }
.btn-close:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }

/* ============================================================
   Paginacion — una sola definicion para todo el sistema
   (antes estaba copiada dentro de cada listado)
   ============================================================ */
.pagination { gap: 2px; }
.pagination .page-link {
  border-radius: var(--radio-xs) !important;
  margin: 0 1px; font-size: .8rem; padding: .35rem .6rem;
  color: var(--texto-suave); border-color: var(--linea);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.pagination .page-item.active .page-link { background: var(--brand); border-color: var(--brand); color: #fff; }
.pagination .page-link:hover { background: color-mix(in srgb, var(--brand) 10%, #fff); color: var(--brand); }
.pagination .page-item.disabled .page-link { background: transparent; color: var(--texto-muted); }
.pagination .page-link:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
/* Pie de listado: "mostrando X de Y" + paginacion */
.listado-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e2); flex-wrap: wrap;
  padding: var(--e3) var(--e5); border-top: 1px solid var(--linea); background: #fbfcfe;
  font-size: .78rem; color: var(--texto-suave);
}

/* ============================================================
   Pestañas
   ============================================================ */
.nav-tabs { border-bottom: 1px solid var(--linea); gap: .15rem; }
.nav-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent;
  color: var(--texto-suave); font-weight: 600; font-size: .875rem;
  padding: .6rem 1rem; border-radius: var(--radio-xs) var(--radio-xs) 0 0;
  transition: color var(--t), border-color var(--t), background var(--t);
}
.nav-tabs .nav-link:hover { color: var(--brand); background: color-mix(in srgb, var(--brand) 5%, #fff); }
.nav-tabs .nav-link.active {
  color: var(--brand); background: transparent; border-bottom-color: var(--brand);
}
.nav-pills .nav-link { border-radius: 999px; font-weight: 600; font-size: .82rem; color: var(--texto-suave); }
.nav-pills .nav-link.active { background: var(--brand); color: #fff; }

/* ============================================================
   Fichas de filtro (los "chips" de los listados)
   Un solo componente con los nombres que ya usaban las paginas:
   estados de prestamos, rangos de mora y atajos de fecha.
   ============================================================ */
.chip-estado, .chip-mora, .btn-xs-atajo {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .75rem; border-radius: 999px;
  font-size: .76rem; font-weight: 600; line-height: 1.5;
  text-decoration: none; white-space: nowrap;
  border: 1px solid var(--linea); color: var(--texto-suave); background: #fff;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.chip-estado:hover, .chip-mora:hover, .btn-xs-atajo:hover {
  background: color-mix(in srgb, var(--brand) 8%, #fff);
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
}
.chip-estado.chip-activo, .chip-mora.chip-activo, .btn-xs-atajo.activo {
  background: var(--brand); color: #fff; border-color: var(--brand);
}
.btn-xs-atajo { padding: .2rem .65rem; font-size: .72rem; }

/* ============================================================
   Formularios largos: bloques numerados
   Un formulario de varios pasos se lee mejor partido en bloques
   que como una sola pared de campos.
   ============================================================ */
.form-bloque {
  background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio-lg); box-shadow: var(--sombra-0);
  margin-bottom: var(--e4); overflow: hidden;
  transition: box-shadow var(--t);
}
.form-bloque:focus-within { box-shadow: var(--sombra-1); }
.form-bloque-cab {
  display: flex; align-items: center; gap: .8rem;
  padding: .9rem 1.375rem; border-bottom: 1px solid var(--linea);
  background: #fbfcfe;
}
.form-bloque-num {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--brand) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
  color: var(--brand); font-weight: 800; font-size: .78rem;
  font-family: 'Poppins','Inter',sans-serif;
}
.form-bloque-tit { font-weight: 700; font-size: .92rem; letter-spacing: -.015em; color: var(--tinta); line-height: 1.2; }
.form-bloque-sub { font-size: .75rem; color: var(--texto-muted); }
.form-bloque-cuerpo { padding: 1.25rem 1.375rem; }
.form-bloque.opcional .form-bloque-num {
  background: var(--neutro-bg); border-color: var(--linea); color: var(--texto-suave);
}

/* Barra de acciones que sigue al pie del formulario */
.form-acciones {
  position: sticky; bottom: .75rem; z-index: 5;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio-lg); box-shadow: var(--sombra-2);
  padding: .7rem .9rem; margin-bottom: var(--e4);
}
.form-acciones .form-acciones-nota { font-size: .75rem; color: var(--texto-muted); margin-left: auto; }
@media (max-width: 575.98px) {
  .form-acciones { flex-direction: column; align-items: stretch; }
  .form-acciones .btn { width: 100%; }
  .form-acciones .form-acciones-nota { margin-left: 0; text-align: center; }
}

/* Etiqueta con icono, igual en todos los formularios */
.form-label svg { width: 14px; height: 14px; margin-right: 4px; color: var(--brand); vertical-align: -2px; }

/* Botones de opcion (tipo de documento, sexo, rol, tema, garantia...) */
.opcion-btn {
  display: block; width: 100%; cursor: pointer; text-align: center;
  border: 1.5px solid var(--linea); border-radius: 10px;
  background: #fff; color: var(--texto-suave);
  font-size: .8rem; font-weight: 600; padding: .5rem .65rem;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.opcion-btn:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, #fff); color: var(--brand); }
.opcion-btn.activo, .opcion-btn.tdoc-activo {
  border-color: var(--brand); background: color-mix(in srgb, var(--brand) 11%, #fff); color: var(--brand);
}
.opcion-btn .opcion-ico { display: block; margin: 0 auto .2rem; color: currentColor; }

/* Campo de foto con vista previa */
.foto-campo { display: flex; align-items: center; gap: .75rem; }
.foto-prev {
  width: 74px; height: 74px; flex-shrink: 0; overflow: hidden;
  border: 1.5px dashed var(--linea-2); border-radius: var(--radio);
  background: #f8fafc; color: var(--texto-muted);
  display: flex; align-items: center; justify-content: center;
}
.foto-prev img { width: 100%; height: 100%; object-fit: cover; }
.foto-campo:hover .foto-prev { border-color: color-mix(in srgb, var(--brand) 40%, var(--linea-2)); }

/* Campo que se autocompleto solo (RENIEC / GPS): se avisa en verde */
.campo-auto { background: var(--ok-bg) !important; border-color: #86efac !important; transition: background .4s, border-color .4s; }

/* ============================================================
   Panel de filtros — el mismo en Reportes, Préstamos y listados
   ============================================================ */
.filtros {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-lg);
  box-shadow: var(--sombra-0); margin-bottom: var(--e5); overflow: hidden;
}
.filtros-form {
  display: flex; align-items: flex-end; gap: var(--e4); flex-wrap: wrap;
  padding: 1rem 1.25rem;
}
.filtros-campo { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.filtros-campo .t-label { margin: 0; }
.filtros-rango { display: flex; align-items: center; gap: .4rem; }
.filtros-rango .form-control { width: auto; }
.filtros-rango-sep { color: var(--texto-muted); font-weight: 700; }
.filtros-chips { display: flex; gap: .35rem; flex-wrap: wrap; margin-left: auto; }
.filtros-pie {
  padding: .6rem 1.25rem; border-top: 1px solid var(--linea); background: #fbfcfe;
  font-size: .78rem; color: var(--texto-suave);
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.filtros-pie b { color: var(--tinta); }
@media (max-width: 991.98px) { .filtros-chips { margin-left: 0; width: 100%; } }
@media (max-width: 575.98px) {
  .filtros-form { gap: var(--e3); }
  .filtros-campo, .filtros-rango { width: 100%; }
  .filtros-rango .form-control { flex: 1 1 auto; width: auto; min-width: 0; }
  .filtros-campo .form-select, .filtros-campo .form-control { width: 100%; }
  /* El buscador con icono no debe partirse en dos líneas */
  .filtros-campo .input-group { width: 100%; flex-wrap: nowrap; }
  .filtros-campo .input-group .form-control { width: auto; flex: 1 1 auto; min-width: 0; }
  .filtros-chips .btn-xs-atajo, .filtros-chips .chip-estado { flex: 1 1 auto; text-align: center; justify-content: center; }
}

/* ============================================================
   Avatar — iniciales o foto, mismo trato en todo el sistema
   ============================================================ */
.avatar {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 11px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--brand) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--linea));
  color: var(--brand); font-weight: 800; font-size: .82rem; letter-spacing: 0;
  font-family: 'Poppins','Inter',sans-serif;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 60px; height: 60px; border-radius: 15px; font-size: 1.15rem; }
.avatar-sm { width: 30px; height: 30px; border-radius: 9px; font-size: .7rem; }
/* Para tablas densas: no debe estirar el alto de la fila */
.avatar-xs { width: 24px; height: 24px; border-radius: 7px; font-size: .6rem; }

/* Nombre que encabeza una fila de tabla: enlace sin subrayado */
.link-fila { font-weight: 600; color: var(--tinta); text-decoration: none; }
.link-fila:hover { color: var(--brand); }
/* En tablas anchas el nombre va en una línea: filas todas del mismo alto */
@media (min-width: 992px) {
  .cel-nombre { display: block; max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Nombre de usuario del sistema: siempre con el mismo aspecto de "credencial" */
.cob-usuario {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; font-weight: 600; letter-spacing: .03em;
  background: var(--neutro-bg); color: var(--texto-suave);
  padding: 2px 8px; border-radius: var(--radio-xs);
  display: inline-block;
}

/* ============================================================
   Migas de pan
   ============================================================ */
.migas { display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: var(--texto-muted); margin-bottom: .3rem; }
.migas a { color: var(--texto-suave); text-decoration: none; font-weight: 600; }
.migas a:hover { color: var(--brand); }
.migas span.sep { opacity: .5; }

/* ============================================================
   Panel de graficas
   ============================================================ */
.chart-wrapper {
  background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio-lg); box-shadow: var(--sombra-1);
  padding: 1.25rem 1.375rem; height: 100%;
}
.chart-title {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-suave);
  margin-bottom: .75rem; text-align: center;
}

/* ============================================================
   Pie de pagina
   ============================================================ */
footer { font-size: .8rem; color: var(--texto-suave); border-color: var(--linea) !important; }  /* a11y: idem */

/* ============================================================
   Login
   ============================================================ */
.login-body {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background-color: var(--oscuro);
  background-image:
    radial-gradient(700px 500px at 15% -5%,  color-mix(in srgb, var(--brand) 28%, transparent), transparent 60%),
    radial-gradient(600px 450px at 110% 115%, color-mix(in srgb, var(--brand-2) 16%, transparent), transparent 60%);
}
.login-card {
  width: 100%; max-width: 420px;
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radio-xl);
  background: rgba(255,255,255,.97);
  box-shadow: 0 32px 72px -16px rgba(0,0,0,.6), 0 4px 16px rgba(0,0,0,.2);
}
.login-brand-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sombra-brand);
  margin: 0 auto 1rem;
}
.login-brand-icon svg { width: 26px; height: 26px; color: #fff; }

/* ============================================================
   Menu con submenus desplegables (Clientes, Prestamos, Configuracion)
   El grupo se abre al hacer clic; la flecha gira al abrirlo.
   ============================================================ */
.sidebar-nav .nav-grupo .nav-flecha {
  width: 13px; height: 13px; margin-left: auto; opacity: .55;
  transition: transform .2s ease, opacity var(--t);
}
.sidebar-nav .nav-grupo:hover .nav-flecha { opacity: .9; }
.sidebar-nav .nav-grupo.collapsed .nav-flecha { transform: rotate(-90deg); }

/* Enlaces hijos: sangrados y con una guia vertical a la izquierda */
.sidebar-nav .collapse .nav-sub,
.sidebar-nav .collapsing .nav-sub {
  padding-left: 2.6rem; font-size: .82rem; gap: .45rem;
}
.sidebar-nav .collapse .nav-sub svg,
.sidebar-nav .collapsing .nav-sub svg {
  width: 14px; height: 14px; flex-shrink: 0; opacity: .5;
}
.sidebar-nav .collapse .nav-sub:hover svg { opacity: .85; }
.sidebar-nav .collapse, .sidebar-nav .collapsing {
  position: relative;
}
.sidebar-nav .collapse::before, .sidebar-nav .collapsing::before {
  content: ''; position: absolute; left: 1.55rem; top: .15rem; bottom: .35rem;
  width: 1px; background: rgba(255,255,255,.10);
}

/* ============================================================
   Ruta del cobrador (ruta.php)
   ============================================================ */
.barra-cobro {
  background: var(--oscuro); color: #fff; position: sticky; top: 0; z-index: 100;
  box-shadow: 0 8px 32px -12px rgba(0,0,0,.6);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.prog { height: 10px; background: rgba(255,255,255,.15); border-radius: 999px; overflow: hidden; }
.prog > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border-radius: 999px; transition: width .5s cubic-bezier(.4,0,.2,1);
}
.cliente-card {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-lg);
  box-shadow: var(--sombra-1); overflow: hidden; transition: box-shadow var(--t);
}
.cliente-card:hover { box-shadow: var(--sombra-2); }
.cliente-card .btn { padding: .65rem; font-size: .95rem; }
a.maps, a.tel { text-decoration: none; }

/* ============================================================
   Accesibilidad: respetar reduccion de movimiento
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============================================================
   RESPONSIVE — celular y tablet
   El panel se usa tanto en la PC de la oficina como en el celular
   del administrador, asi que todo debe caber sin desbordar.
   ============================================================ */

/* Nada puede empujar la pagina a lo ancho */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, canvas, iframe { max-width: 100%; }

/* Cualquier tabla dentro del panel puede desplazarse sola aunque
   el PHP no la haya envuelto en .table-responsive */
.app-main table { max-width: 100%; }
.table-responsive { -webkit-overflow-scrolling: touch; }

/* ── Tablet ── */
@media (max-width: 991.98px) {
  .page-header { gap: .5rem; }
  .page-header-text h1 { font-size: 1.25rem; }
  .modal-dialog { margin: .6rem; }
}

/* ── Celular ── */
@media (max-width: 767.98px) {
  .app-main .content { padding: 1rem .75rem 1.5rem; }

  /* Titulos y encabezados de pagina: apilados y a lo ancho */
  .page-header { flex-direction: column; align-items: stretch; }
  .page-header > div:last-child { display: flex; gap: .5rem; flex-wrap: wrap; }
  .page-header > div:last-child .btn { flex: 1 1 auto; justify-content: center; }
  .page-header-text h1 { font-size: 1.15rem; }
  .page-header-text .subtitle { font-size: .8rem; }

  /* Tarjetas mas compactas */
  .card-header { padding: .8rem 1rem; font-size: .875rem; }
  .card-body { padding: 1rem; }

  /* Tablas: letra mas chica y celdas ajustadas para que quepan mas columnas */
  .table { font-size: .8rem; }
  .table thead th { padding: .5rem .6rem; font-size: .62rem; }
  .table td { padding: .55rem .6rem; }
  .table .btn-sm { padding: .25rem .5rem; font-size: .72rem; }

  /* Botones de accion dentro de tablas: uno debajo de otro si no caben */
  td .btn + .btn, td form + form, td .btn + form, td form + .btn { margin-top: .25rem; }

  /* Formularios comodos con el pulgar */
  .form-control, .form-select { font-size: 16px; }  /* evita el zoom automatico de iOS */
  .form-label { font-size: .85rem; }

  /* Barras de filtros y grupos de botones que no quepan: se apilan */
  .btn-group { flex-wrap: wrap; }
  .btn-group > .btn { border-radius: var(--radio) !important; }

  /* Modales a pantalla casi completa */
  .modal-dialog { margin: .4rem; max-width: calc(100% - .8rem); }

  /* KPIs y numeros grandes: que no rompan la caja.
     El importe no se parte en dos lineas ("S/" arriba y el numero abajo):
     se achica solo segun el ancho de la pantalla. */
  .kpi-value {
    font-size: clamp(.92rem, 3.6vw, 1.15rem) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* En celular las tarjetas van de a dos: el icono se achica y se acerca a la
     esquina, y el texto reserva menos espacio para que no quede apretado. */
  .kpi-card { padding: .95rem 1rem .85rem; }
  .kpi-card .kpi-icon { width: 28px; height: 28px; top: .7rem; right: .7rem; }
  .kpi-card .kpi-icon svg { width: 14px; height: 14px; }
  .kpi-card .kpi-label,
  .kpi-card .kpi-value { padding-right: 2.1rem; }
  .kpi-card .kpi-label { font-size: .6rem; letter-spacing: .06em; line-height: 1.35; }
  .kpi-card .kpi-sub { font-size: .7rem; line-height: 1.3; }
  .kpi-card::after { width: 56px; height: 56px; }
  .fs-3 { font-size: 1.35rem !important; }
  .fs-4 { font-size: 1.2rem !important; }

  /* Paginacion compacta */
  .pagination .page-link { padding: .3rem .5rem; font-size: .75rem; }
}

/* ── Celular chico ── */
@media (max-width: 400px) {
  .app-main .content { padding: .85rem .6rem 1.25rem; }
  .page-header-text h1 { font-size: 1.05rem; }
  .table { font-size: .75rem; }
}

/* ============================================================
   PANEL DE CONTROL — capa fintech
   Componentes propios del dashboard (index.php). Todo va con
   prefijo .dash- para no pisar nada de las demas pantallas.
   ============================================================ */

/* ── Entrada suave de los bloques ── */
@keyframes dash-aparece { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dash-anim { animation: dash-aparece .4s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--d, 0) * 55ms); }

.dash-seccion { margin-bottom: 1.5rem; }

/* ── Encabezado de la pagina ── */
.dash-head { align-items: center; margin-bottom: 1rem; }
.dash-head .page-header-text h1 { font-size: 1.55rem; }
.dash-fecha {
  display: flex; align-items: center; gap: .4rem; margin-top: .3rem;
  font-size: .78rem; color: var(--texto-suave); font-weight: 500;
}
.dash-fecha svg { color: var(--brand); flex-shrink: 0; }
.dash-sede {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  background: #fff; border: 1px solid var(--linea); color: var(--texto-suave);
  border-radius: 999px; padding: .1rem .5rem;
}
.dash-acciones { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Campana de avisos */
.dash-campana {
  position: relative; width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 10px; border: 1px solid var(--linea); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--texto-suave); text-decoration: none;
  transition: color var(--t), border-color var(--t), box-shadow var(--t), transform var(--t-fast);
}
.dash-campana:hover {
  color: var(--brand); transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand) 35%, var(--linea));
  box-shadow: var(--sombra-1);
}
.dash-campana b {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: #dc2626; color: #fff; border: 2px solid #f5f7fa;
  border-radius: 999px; font-size: .6rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}

/* ── Barra del plan: informacion, no protagonista ── */
.dash-plan {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--texto-suave);
  background: #fff; border: 1px solid var(--linea);
  border-radius: 999px; padding: .42rem .95rem;
  box-shadow: var(--sombra-0); margin-bottom: 1.25rem;
}
.dash-plan b { color: var(--tinta); font-weight: 700; }
.dash-plan-fecha { color: var(--texto-muted); }
.dash-plan-link {
  margin-left: auto; font-weight: 700; font-size: .76rem;
  color: var(--brand); text-decoration: none; white-space: nowrap;
  transition: opacity var(--t);
}
.dash-plan-link:hover { opacity: .75; }
.dash-plan.pronto  { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.dash-plan.pronto  b, .dash-plan.pronto .dash-plan-link  { color: #b45309; }
.dash-plan.urgente { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.dash-plan.urgente b, .dash-plan.urgente .dash-plan-link { color: #b91c1c; }

/* ── Tarjeta principal: el dinero disponible ── */
.dash-hero {
  position: relative; overflow: hidden; height: 100%;
  border-radius: var(--radio-lg);
  border: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(140deg, #0b1220 0%, #101c33 52%, #16233d 100%);
  color: #fff; padding: 1.5rem 1.6rem 1.35rem;
  box-shadow: 0 20px 44px -28px rgba(11,18,32,.95), 0 2px 8px rgba(15,23,42,.08);
  display: flex; flex-direction: column;
}
.dash-hero::after {
  content: ''; position: absolute; right: -70px; top: -80px;
  width: 250px; height: 250px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(22,163,74,.28), transparent 68%);
}
.dash-hero > * { position: relative; z-index: 1; }
.dash-hero-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.dash-hero-label {
  font-size: .68rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: #94a3b8;
}
.dash-vivo { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 600; color: #6ee7b7; }
.dash-vivo i {
  width: 7px; height: 7px; border-radius: 50%; background: #34d399;
  box-shadow: 0 0 0 3px rgba(52,211,153,.18);
  animation: dash-latido 2.6s ease-in-out infinite;
}
@keyframes dash-latido { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.dash-hero-monto {
  font-family: 'Poppins','Inter',system-ui,sans-serif;
  font-size: clamp(1.95rem, 4.2vw, 2.6rem); font-weight: 800;
  letter-spacing: -.045em; line-height: 1.08; color: #fff;
  font-variant-numeric: tabular-nums; margin: .55rem 0 .45rem;
}
.dash-hero-tend { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.dash-hero-nota { font-size: .76rem; color: #94a3b8; }
.dash-hero-spark { margin: .9rem 0 .2rem; opacity: .92; }
.dash-hero-pie {
  margin-top: auto; padding-top: .9rem;
  border-top: 1px solid rgba(255,255,255,.09);
  display: flex; gap: 1.75rem; flex-wrap: wrap;
}
.dash-hero-pie-label {
  display: block; font-size: .64rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #7d8ba3; margin-bottom: .12rem;
}
.dash-hero-pie-valor {
  font-family: 'Poppins','Inter',sans-serif; font-size: .98rem; font-weight: 700;
  color: #e2e8f0; font-variant-numeric: tabular-nums;
}

/* ── Chip de tendencia ── */
.dash-chip {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .2rem .55rem; border-radius: 999px;
  font-size: .71rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.dash-chip.up   { background: #dcfce7; color: #15803d; }
.dash-chip.down { background: #fee2e2; color: #b91c1c; }
.dash-chip.flat { background: #f1f5f9; color: #64748b; }
.dash-chip.sobre-oscuro.up   { background: rgba(52,211,153,.16);  color: #6ee7b7; }
.dash-chip.sobre-oscuro.down { background: rgba(248,113,113,.16); color: #fca5a5; }
.dash-chip.sobre-oscuro.flat { background: rgba(148,163,184,.16); color: #cbd5e1; }

/* ── Tarjetas de metrica ── */
.dash-metric {
  background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio-lg); box-shadow: var(--sombra-0);
  padding: 1.05rem 1.15rem 1rem; height: 100%;
  display: flex; flex-direction: column; gap: .3rem;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.dash-metric:hover {
  box-shadow: var(--sombra-2); transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--m, var(--brand)) 26%, var(--linea));
}
.dash-metric-label {
  display: flex; align-items: center; gap: .4rem;
  font-size: .67rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--texto-suave);
}
.dash-metric-label svg { color: var(--m, var(--brand)); flex-shrink: 0; }
.dash-metric-valor {
  font-family: 'Poppins','Inter',sans-serif;
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.038em;
  line-height: 1.12; color: var(--tinta);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dash-metric-lg .dash-metric-valor { font-size: 1.95rem; }
.dash-metric-pie {
  margin-top: auto; padding-top: .35rem;
  font-size: .73rem; color: var(--texto-suave);
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.dash-metric-spark { margin-top: .35rem; }
/* El chip no debe estirarse al ancho de la tarjeta */
.dash-metric > .dash-chip { align-self: flex-start; }
.dash-metric-fila { display: flex; align-items: center; gap: 1.25rem; height: 100%; }
.dash-metric-fila > div:first-child { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.dash-metric-fila .dash-metric-spark { flex: 0 1 210px; margin-top: 0; }

/* ── Encabezado de seccion ── */
.dash-sec-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .7rem; flex-wrap: wrap;
}
.dash-sec-head h2 {
  font-size: .74rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--texto-suave);
  margin: 0; font-family: 'Inter', system-ui, sans-serif;
}
.dash-sec-link {
  font-size: .78rem; font-weight: 700; color: var(--brand);
  text-decoration: none; transition: opacity var(--t);
}
.dash-sec-link:hover { opacity: .72; }

/* ── Rejilla de datos (operacion del dia / cartera) ── */
/* 4 columnas: el dato ancla ocupa 2 y las filas siempre quedan completas */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--linea);
  border: 1px solid var(--linea); border-radius: var(--radio-lg);
  overflow: hidden;
}
/* Variantes para secciones de 3 o 5 datos, sin huecos al final */
.dash-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dash-panel {
  background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio-lg); box-shadow: var(--sombra-0); overflow: hidden;
}
.dash-panel .dash-grid { border: 0; border-radius: 0; background: var(--linea); }

.dash-stat {
  background: #fff; padding: 1.05rem 1.15rem;
  display: flex; flex-direction: column; gap: .18rem;
  position: relative; text-decoration: none; color: inherit;
  transition: background var(--t);
}
a.dash-stat:hover { background: #fbfcfe; }
a.dash-stat:hover .dash-stat-flecha { opacity: 1; transform: translateX(0); }
.dash-stat-valor {
  font-family: 'Poppins','Inter',sans-serif;
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.035em;
  line-height: 1.12; color: var(--tinta);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.dash-stat-label { font-size: .78rem; font-weight: 600; color: var(--texto-suave); }
.dash-stat-pista { font-size: .69rem; color: var(--texto-muted); }
.dash-stat-flecha {
  position: absolute; top: .95rem; right: 1rem;
  font-size: .85rem; color: var(--brand);
  opacity: 0; transform: translateX(-4px);
  transition: opacity var(--t), transform var(--t);
}
/* Semantica del riesgo: solo donde aporta */
.dash-stat::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: transparent;
}
.dash-stat.is-ok   .dash-stat-valor { color: #15803d; }
.dash-stat.is-info .dash-stat-valor { color: #0e7490; }
.dash-stat.is-warn .dash-stat-valor { color: #b45309; }
.dash-stat.is-risk .dash-stat-valor { color: #dc2626; }
.dash-stat.is-warn::before { background: #f59e0b; }
.dash-stat.is-risk::before { background: #dc2626; }
/* El dato ancla (capital en la calle) pesa mas */
.dash-stat-ancho { grid-column: span 2; background: #fbfcfe; }
.dash-stat-ancho .dash-stat-valor { font-size: 1.95rem; color: var(--brand); }

/* Progreso del dia */
.dash-panel-pie {
  display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  padding: .85rem 1.15rem; border-top: 1px solid var(--linea); background: #fbfcfe;
}
.dash-prog { flex: 1 1 180px; height: 6px; background: var(--linea); border-radius: 999px; overflow: hidden; }
.dash-prog > span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #15803d, #4ade80);
  transition: width .7s cubic-bezier(.4,0,.2,1);
}
.dash-prog-txt { font-size: .76rem; color: var(--texto-suave); }
.dash-prog-txt b { color: var(--tinta); font-weight: 700; }

/* ── Paneles de grafica ── */
.dash-chart {
  background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio-lg); box-shadow: var(--sombra-0);
  padding: 1.15rem 1.35rem 1.25rem;
  transition: box-shadow var(--t);
}
.dash-chart:hover { box-shadow: var(--sombra-1); }
.dash-chart-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.dash-chart-title {
  font-size: .92rem; font-weight: 700; letter-spacing: -.015em; color: var(--tinta);
  font-family: 'Poppins','Inter',sans-serif;
}
.dash-chart-sub { font-size: .74rem; color: var(--texto-muted); margin-top: .1rem; }

/* Selector de periodo */
.dash-seg {
  display: inline-flex; gap: 2px; padding: 3px;
  background: #f1f5f9; border: 1px solid var(--linea); border-radius: 999px;
}
.dash-seg a {
  font-size: .72rem; font-weight: 700; color: var(--texto-suave);
  text-decoration: none; padding: .26rem .72rem; border-radius: 999px;
  transition: background var(--t), color var(--t), box-shadow var(--t);
  white-space: nowrap;
}
.dash-seg a:hover { color: var(--brand); }
.dash-seg a.on { background: #fff; color: var(--brand); box-shadow: var(--sombra-0); }

/* ── Responsive del panel ── */
@media (max-width: 991.98px) {
  .dash-metric-fila { flex-direction: column; align-items: stretch; gap: .5rem; }
  .dash-metric-fila .dash-metric-spark { flex: 1 1 auto; }
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .dash-head { align-items: stretch; }
  .dash-acciones { width: 100%; }
  .dash-acciones .btn { flex: 1 1 auto; justify-content: center; }
  .dash-hero { padding: 1.25rem 1.2rem 1.1rem; }
  .dash-hero-pie { gap: 1.15rem; }
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-stat { padding: .85rem .9rem; }
  .dash-stat-valor { font-size: clamp(1.05rem, 5vw, 1.35rem); }
  .dash-stat-ancho { grid-column: span 2; }
  .dash-stat-ancho .dash-stat-valor { font-size: clamp(1.3rem, 6.5vw, 1.7rem); }
  .dash-metric { padding: .9rem 1rem; }
  .dash-metric-valor { font-size: clamp(1.05rem, 5vw, 1.35rem); }
  .dash-metric-lg .dash-metric-valor { font-size: clamp(1.35rem, 6.5vw, 1.7rem); }
  .dash-chart { padding: 1rem 1rem 1.1rem; }
  .dash-chart-head { margin-bottom: .75rem; }
  .dash-seg { width: 100%; justify-content: space-between; }
  .dash-seg a { flex: 1 1 auto; text-align: center; padding: .3rem .35rem; }
  .dash-plan { border-radius: var(--radio); }
  .dash-plan-link { margin-left: 0; }
}