:root {
  /* Estilo "Oracle Redwood": base neutra gris/blanca, un solo acento de marca (navy de ARKFIN)
     usado con moderación, tarjetas con borde sutil en vez de sombra pesada, radios pequeños,
     densidad de datos alta. Nada de gradientes ni fondos oscuros de marca. */
  --navy-950: #061a2c;
  --navy-900: #0b3d63;
  --navy-800: #114b78;
  --navy-100: #e7eef5;
  --gold-500: #c8960f;
  --gold-400: #e0a92e;
  --teal-500: #0f9488;
  --green-600: #1c6b3f;
  --green-100: #e2f5ea;
  --red-600: #a32424;
  --red-100: #fbe3e3;
  --amber-700: #8a6d00;
  --amber-100: #fff2cc;
  --gray-900: #1b2026;
  --gray-600: #5b6675;
  --gray-400: #8892a0;
  --gray-200: #e1e4e9;
  --gray-100: #f1f2f5;
  --bg: #f7f8fa;
  --card: #ffffff;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(15, 35, 60, .04);
  --shadow-hover: 0 4px 14px rgba(15, 35, 60, .10);
  --glow-gold: 0 0 0 1px rgba(200, 150, 15, .16);
  --sidebar-w: 224px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif;
  background: var(--bg);
  color: var(--gray-900);
  font-size: 14px;
}
a { color: var(--navy-800); }
.icon { width: 17px; height: 17px; flex: none; }

@keyframes arkfinFadeInUp {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes arkfinFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes arkfinPulso {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
@keyframes arkfinGirar {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

#barra-carga {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--navy-800), var(--teal-500));
  z-index: 9999; opacity: 1;
  transition: width 4s cubic-bezier(.1,.7,.3,1), opacity .25s ease;
}

/* ---------- Layout shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: none;
  background: var(--card);
  border-right: 1px solid var(--gray-200);
  color: var(--gray-900);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-marca {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; font-size: 17px; font-weight: 700; letter-spacing: .2px;
  border-bottom: 1px solid var(--gray-200);
  color: var(--navy-900);
}
.sidebar-marca a {
  display: flex; align-items: center; gap: 10px; width: 100%;
  color: inherit; text-decoration: none; transition: opacity .15s ease;
}
.sidebar-marca a:hover { opacity: .8; }
.sidebar-marca .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--navy-900); }
.sidebar-nav { padding: 10px 10px; display: flex; flex-direction: column; gap: 1px; flex: 1; }
.sidebar-nav .nav-item {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 11px; padding: 8px 11px; border-radius: var(--radius-sm);
  color: var(--gray-600); text-decoration: none; font-size: 13.5px; font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.sidebar-nav .nav-item::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 55%;
  background: var(--navy-900); border-radius: 0 3px 3px 0;
  transform: translateY(-50%) scaleY(0); transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.sidebar-nav .nav-item:hover { background: var(--gray-100); color: var(--gray-900); }
.sidebar-nav .nav-item.activo { background: var(--navy-100); color: var(--navy-900); }
.sidebar-nav .nav-item.activo::before { transform: translateY(-50%) scaleY(1); }
.sidebar-nav .nav-sep { margin: 14px 11px 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--gray-400); font-weight: 700; }
.sidebar-pie { padding: 14px 18px; border-top: 1px solid var(--gray-200); font-size: 11.5px; color: var(--gray-400); }

.main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 26px; background: var(--card); border-bottom: 1px solid var(--gray-200);
  position: sticky; top: 0; z-index: 5;
}
.topbar h1 { margin: 0; font-size: 17px; font-weight: 700; color: var(--gray-900); }
.topbar-usuario { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--gray-600); }
.topbar-usuario .avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--navy-900); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
}
.topbar-usuario a { color: var(--gray-600); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.topbar-usuario a:hover { color: var(--navy-900); }
.topbar-usuario form { display: inline-flex; }
.icon-btn {
  background: none; border: none; cursor: pointer; color: var(--gray-600); padding: 0;
  display: inline-flex; align-items: center; gap: 5px; font-size: inherit; font-family: inherit;
}
.icon-btn:hover { color: var(--navy-900); }

.buscador-topbar { position: relative; flex: 1; max-width: 360px; margin: 0 20px; }
.buscador-topbar .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--gray-400); }
.buscador-topbar input { width: 100%; padding: 7px 12px 7px 32px; border-radius: var(--radius-sm); border: 1px solid var(--gray-200); background: var(--gray-100); font-size: 13px; }
.buscador-topbar input:focus { background: var(--card); }

.logo-img { max-height: 56px; max-width: 100%; }
.logo-img-login { max-height: 56px; max-width: 100%; }

main.contenido { padding: 22px 26px 60px; max-width: 1180px; width: 100%; animation: arkfinFadeInUp .22s ease both; }

/* ---------- Flash messages ---------- */
.flash {
  padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid transparent;
  animation: arkfinFadeInUp .2s ease both;
  transition: opacity .2s ease, transform .2s ease, max-height .2s ease, margin .2s ease, padding .2s ease;
}
.flash.success { background: var(--green-100); color: var(--green-600); border-color: rgba(28,107,63,.18); }
.flash.error { background: var(--red-100); color: var(--red-600); border-color: rgba(163,36,36,.18); }
.flash.saliendo { opacity: 0; transform: translateY(-6px); }
.flash .cerrar {
  background: none; border: none; cursor: pointer; color: inherit; opacity: .6; font-size: 15px;
  line-height: 1; padding: 2px 4px; flex: none;
}
.flash .cerrar:hover { opacity: 1; }

/* ---------- Cards / stats (info tiles estilo Redwood) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 22px; }
.card {
  background: var(--card); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 13px;
  transition: box-shadow .15s ease, border-color .15s ease;
  animation: arkfinFadeInUp .25s ease both;
}
.card:hover { box-shadow: var(--shadow-hover); border-color: var(--gray-200); }
.cards .card:nth-child(1) { animation-delay: .01s; }
.cards .card:nth-child(2) { animation-delay: .05s; }
.cards .card:nth-child(3) { animation-delay: .09s; }
.cards .card:nth-child(4) { animation-delay: .13s; }
.card .card-icono {
  width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--navy-100); color: var(--navy-900);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.card .numero { font-size: 23px; font-weight: 700; color: var(--gray-900); line-height: 1.15; letter-spacing: -.2px; }
.card .etiqueta { color: var(--gray-600); font-size: 12px; }

.panel { background: var(--card); border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 18px; }
.panel h2 { margin: 0 0 12px; font-size: 13.5px; font-weight: 700; color: var(--gray-900); text-transform: uppercase; letter-spacing: .03em; }

/* ---------- CSS-only bar chart ---------- */
.barra-fila { display: grid; grid-template-columns: 160px 1fr 46px; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 8px; }
.barra-fila .barra-etiqueta { color: var(--gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-track { background: var(--gray-100); border-radius: 5px; height: 8px; overflow: hidden; }
.barra-fill { height: 100%; background: var(--navy-800); border-radius: 5px; }
.barra-valor { text-align: right; font-weight: 700; color: var(--gray-900); }

/* ---------- Acciones grandes (dashboard) ---------- */
.acciones-grandes { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.btn-grande {
  flex: 1; min-width: 220px; padding: 18px 20px; border-radius: var(--radius); text-decoration: none;
  color: var(--gray-900); display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow);
  background: var(--card); border: 1px solid var(--gray-200); border-left: 3px solid var(--navy-900);
}
.btn-grande .icon { width: 22px; height: 22px; color: var(--navy-900); }
.btn-grande strong { display: block; font-size: 14.5px; }
.btn-grande span.sub { display: block; font-size: 12px; color: var(--gray-600); font-weight: 400; }
.btn-grande.persona { border-left-color: var(--teal-500); }
.btn-grande.persona .icon { color: var(--teal-500); }
.btn-grande { transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.btn-grande:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; background: var(--navy-900); color: white;
  padding: 8px 16px; border: 1px solid var(--navy-900); border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; font-weight: 600;
  text-decoration: none; line-height: 1.2;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover { background: var(--navy-800); border-color: var(--navy-800); box-shadow: 0 2px 8px rgba(11,61,99,.2); }
.btn:active { opacity: .85; }
.btn.secundario { background: var(--gray-600); border-color: var(--gray-600); }
.btn.peligro { background: var(--red-600); border-color: var(--red-600); }
.btn.chico { padding: 5px 11px; margin-top: 0; font-size: 12px; }
.btn.fantasma { background: transparent; color: var(--navy-900); border: 1px solid var(--gray-200); }
.btn.fantasma:hover { background: var(--gray-100); }
.btn.cargando { opacity: .75; cursor: wait; pointer-events: none; }
.btn .spinner {
  width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff; animation: arkfinGirar .6s linear infinite; flex: none;
}
.btn.fantasma .spinner, .btn.secundario .spinner { border-color: rgba(11,61,99,.25); border-top-color: var(--navy-900); }

/* ---------- Tables ---------- */
/* overflow-x:auto (no "hidden" a secas) para que una tabla más ancha que la pantalla saque su
   propia barra de desplazamiento horizontal en vez de recortar en silencio las columnas que no
   caben — antes, sin zoom out, esas columnas simplemente desaparecían. */
.tabla-wrap { background: var(--card); border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; overflow-y: hidden; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 13px; text-align: left; border-bottom: 1px solid var(--gray-200); font-size: 13px; }
thead th { background: var(--gray-100); color: var(--gray-600); position: sticky; top: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
tbody tr { transition: background .1s ease; }
tbody tr:hover { background: var(--gray-100); }
.codigo { font-family: "Consolas", monospace; font-weight: 700; color: var(--navy-900); font-size: 12.5px; }

.barra-superior-lista { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.buscador { position: relative; max-width: 320px; flex: 1; }
.buscador .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--gray-400); }
.buscador input { width: 100%; padding: 7px 12px 7px 32px; border-radius: var(--radius-sm); border: 1px solid var(--gray-200); font-size: 13px; }

.filtros select { padding: 7px 11px; border-radius: var(--radius-sm); border: 1px solid var(--gray-200); font-size: 12.5px; }

/* ---------- Badges (chips redondos, estilo Redwood) ---------- */
.badge { padding: 2px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; white-space: nowrap; transition: background .15s ease; }
.badge.Pendiente { background: var(--amber-100); color: var(--amber-700); }
.badge.Aprobada, .badge.Activo, .badge.Pagado { background: var(--green-100); color: var(--green-600); }
.badge.Rechazada, .badge.Cancelado { background: var(--red-100); color: var(--red-600); }
.badge.Suspendida { background: var(--gray-200); color: var(--gray-600); }
.badge.badge-mora { animation: arkfinPulso 2.2s ease-in-out infinite; }

/* ---------- Forms ---------- */
input, select, textarea { background: #fff; color: var(--gray-900); }
form.formulario { background: var(--card); padding: 22px; border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow); max-width: 620px; }
.formulario-ancho { max-width: 980px; }
.formulario label { display: block; margin-top: 13px; font-weight: 600; font-size: 12px; color: var(--gray-600); }
.formulario input, .formulario select, .formulario textarea {
  width: 100%; padding: 8px 10px; margin-top: 4px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 13px;
  font-family: inherit;
}
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: 2px solid var(--navy-800); outline-offset: 1px; }
.formulario input[readonly] { background: var(--navy-100); color: var(--navy-900); font-weight: 700; cursor: not-allowed; }
.ayuda-inline { font-weight: 400; font-size: 11px; color: var(--gray-400); text-transform: none; letter-spacing: normal; }

/* ---------- Registro de pago (método + referencia) ---------- */
.pago-info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.marcar-pago-detalle summary { list-style: none; cursor: pointer; }
.marcar-pago-detalle summary::-webkit-details-marker { display: none; }
.marcar-pago-detalle[open] summary { margin-bottom: 8px; }
.mini-form-pago { display: flex; flex-direction: column; gap: 6px; min-width: 200px; animation: arkfinFadeInUp .15s ease both; }
.mini-form-pago select, .mini-form-pago input {
  padding: 6px 9px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 12px; font-family: inherit;
}
.mini-form-pago button { margin-top: 0; }

/* ---------- Contacto directo (llamada / WhatsApp) y notas de cobranza ---------- */
.icon-contacto {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--navy-100); color: var(--navy-900); margin-right: 4px;
  transition: transform .12s ease, background .15s ease;
}
.icon-contacto:hover { transform: scale(1.08); background: var(--navy-800); color: #fff; }
.icon-contacto.whatsapp { background: var(--green-100); color: var(--green-600); }
.icon-contacto.whatsapp:hover { background: #1c6b3f; color: #fff; }
.nota-cobranza-detalle summary { list-style: none; cursor: pointer; max-width: 220px; }
.nota-cobranza-detalle summary::-webkit-details-marker { display: none; }
.nota-cobranza-detalle summary .ayuda-inline { text-decoration: underline dotted; }
.nota-cobranza-detalle[open] summary { margin-bottom: 8px; }

.seccion { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--gray-200); }
.seccion:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.seccion-titulo { display: flex; align-items: center; gap: 8px; color: var(--gray-900); font-size: 13.5px; font-weight: 700; margin-bottom: 4px; }
.seccion-titulo .icon { width: 17px; height: 17px; color: var(--navy-900); }
summary.seccion-titulo { cursor: pointer; list-style: revert; }
summary.seccion-titulo::marker { color: var(--gray-400); font-size: 12px; }
details[open] > summary.seccion-titulo { margin-bottom: 4px; }
details:not([open]) > summary.seccion-titulo { margin-bottom: 0; color: var(--gray-600); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 22px; }
.grid-2 > label { grid-column: span 1; }
.grid-2 .full { grid-column: 1 / -1; }

.barra-guardar {
  position: sticky; bottom: 0; background: var(--card); margin: 24px -22px -22px; padding: 14px 22px;
  border-top: 1px solid var(--gray-200); display: flex; justify-content: flex-end; gap: 10px;
  border-radius: 0 0 var(--radius) var(--radius);
}
.barra-guardar .btn { margin-top: 0; }

.aviso { background: var(--amber-100); padding: 12px 15px; border-radius: var(--radius-sm); color: var(--amber-700); margin-bottom: 14px; font-size: 13px; border: 1px solid rgba(138,109,0,.15); }
.aviso a { color: inherit; text-decoration: underline; font-weight: 700; }
.aviso.aviso-error { background: var(--red-100); color: var(--red-600); border-color: rgba(163,36,36,.15); }
.ayuda { font-size: 11.5px; color: var(--gray-600); margin-top: 6px; }

/* ---------- Detalle persona ---------- */
.detalle-cabecera { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.detalle-cabecera .avatar-grande {
  width: 46px; height: 46px; border-radius: var(--radius); background: var(--navy-100); color: var(--navy-900);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex: none;
}
.detalle-cabecera h1 { margin: 0; font-size: 17px; font-weight: 700; color: var(--gray-900); }
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 24px; }
.ficha .dato { padding: 7px 0; border-bottom: 1px solid var(--gray-100); font-size: 13px; }
.ficha .dato b { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-400); font-weight: 700; margin-bottom: 2px; }

/* ---------- Alertas de Inicio (tarjetas accionables) ---------- */
.aviso-tarjeta {
  border: 1px solid var(--gray-200); border-left: 3px solid var(--amber-700); border-radius: var(--radius-sm);
  padding: 12px 14px; display: flex; gap: 12px; background: var(--card);
}
.aviso-tarjeta + .aviso-tarjeta { margin-top: 8px; }
.aviso-tarjeta.nivel-error { border-left-color: var(--red-600); }
.aviso-tarjeta .aviso-icono {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--amber-100); color: var(--amber-700);
}
.aviso-tarjeta.nivel-error .aviso-icono { background: var(--red-100); color: var(--red-600); }
.aviso-tarjeta .aviso-cuerpo { flex: 1; min-width: 0; }
.aviso-tarjeta .aviso-titulo { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--gray-900); }
.aviso-tarjeta .aviso-detalle { font-size: 12.5px; color: var(--gray-600); margin: 3px 0 0; }
.aviso-tarjeta .aviso-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.aviso-tarjeta .aviso-chip {
  display: inline-flex; align-items: center; font-size: 12px; padding: 3px 10px; border-radius: 99px;
  background: var(--gray-100); color: var(--gray-900); text-decoration: none; border: 1px solid var(--gray-200);
  transition: background .12s ease, border-color .12s ease;
}
.aviso-tarjeta .aviso-chip:hover { background: var(--navy-100); border-color: var(--navy-100); color: var(--navy-900); }
.aviso-tarjeta .aviso-mas { font-size: 12px; color: var(--gray-400); padding: 3px 4px; }
.aviso-tarjeta .aviso-link { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 700; }

/* ---------- Login ---------- */
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.login-card { background: var(--card); border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow-hover); padding: 36px 34px; width: 100%; max-width: 380px; animation: arkfinFadeInUp .3s ease both; }
.login-card .marca { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; color: var(--navy-900); margin-bottom: 4px; }
.login-card .marca .punto { width: 10px; height: 10px; border-radius: 50%; background: var(--navy-900); }
.login-card p.sub { color: var(--gray-600); font-size: 13px; margin: 0 0 20px; }
.login-card .btn { width: 100%; justify-content: center; margin-top: 18px; }
.login-card label { display: block; margin-top: 13px; font-weight: 600; font-size: 12px; color: var(--gray-600); }
.login-card input {
  width: 100%; padding: 9px 11px; margin-top: 4px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  font-size: 13px; font-family: inherit;
}
.login-card input:focus { outline: 2px solid var(--navy-800); outline-offset: 1px; }

@media (max-width: 900px) {
  .sidebar { display: none; }
  main.contenido { padding: 16px; }
  .grid-2 { grid-template-columns: 1fr; }
}