/* ============================================================
   Prestamos — hoja de estilos
   Mobile-first, tema oscuro. Sin dependencias externas: todo
   funciona aunque el VPS no tenga salida a internet.
   ============================================================ */

:root {
  --fondo:        #0a0b0d;
  --fondo-2:      #101216;
  --tarjeta:      #16191f;
  --tarjeta-alta: #1c2027;
  --borde:        #23272f;
  --borde-suave:  #1a1e24;

  --texto:        #f2f4f7;
  --texto-2:      #9aa1ad;
  --texto-3:      #646b77;

  --verde:        #22c55e;
  --verde-fondo:  rgba(34, 197, 94, .12);
  --verde-borde:  rgba(34, 197, 94, .45);
  --rojo:         #f4565f;
  --rojo-fondo:   rgba(244, 86, 95, .12);
  --ambar:        #f0a92a;
  --ambar-fondo:  rgba(240, 169, 42, .13);
  --azul:         #4d8dff;
  --azul-fondo:   rgba(77, 141, 255, .13);
  --morado:       #a855f7;

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 26px;

  --sombra: 0 6px 24px rgba(0, 0, 0, .45);
  --nav-alto: 64px;
  --ancho: 620px;

  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body { padding-bottom: calc(var(--nav-alto) + env(safe-area-inset-bottom, 0px) + 12px); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--azul); text-decoration: none; }
[hidden] { display: none !important; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }

/* ---------------------------- tipografia --------------------------- */
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: 26px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
.sub { color: var(--texto-2); font-size: 13.5px; margin-top: 2px; }
.mut { color: var(--texto-2); }
.mut-3 { color: var(--texto-3); }
.min { font-size: 12.5px; }
.mono { font-variant-numeric: tabular-nums; }
.centro { text-align: center; }
.derecha { text-align: right; }
.nowrap { white-space: nowrap; }

/* ------------------------------ cabecera --------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 30;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 0 12px;
  background: linear-gradient(180deg, var(--fondo) 72%, transparent);
  backdrop-filter: blur(8px);
}
.cabecera-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.btn-icono {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: var(--r); border: 1px solid var(--borde);
  background: var(--tarjeta); color: var(--texto);
  display: grid; place-items: center; font-size: 19px;
  transition: transform .12s, background .15s;
}
.btn-icono:active { transform: scale(.93); background: var(--tarjeta-alta); }
.btn-icono.girando svg { animation: girar .9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ------------------------------- hero ------------------------------ */
.hero {
  position: relative; overflow: hidden;
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--r-xl); padding: 22px 22px 20px; margin-top: 14px;
}
.hero::after {
  content: ''; position: absolute; top: -70px; right: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34,197,94,.20), transparent 68%);
  pointer-events: none;
}
.hero-rotulo { color: var(--texto-2); font-size: 14px; }
.hero-cifra {
  font-size: clamp(32px, 10vw, 44px); font-weight: 800;
  letter-spacing: -.035em; margin: 4px 0 10px; font-variant-numeric: tabular-nums;
}
.hero-cifra span { font-size: .62em; font-weight: 700; margin-right: 4px; color: var(--texto-2); }
.hero-pies { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }

/* ------------------------------ pildoras --------------------------- */
.pildora {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: var(--tarjeta-alta); color: var(--texto-2);
}
.pildora .punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pildora.verde  { background: var(--verde-fondo); color: var(--verde); }
.pildora.rojo   { background: var(--rojo-fondo);  color: var(--rojo); }
.pildora.ambar  { background: var(--ambar-fondo); color: var(--ambar); }
.pildora.azul   { background: var(--azul-fondo);  color: var(--azul); }

/* ------------------------------- tabs ------------------------------ */
.tabs { display: flex; gap: 10px; margin: 16px 0 4px; }
.tabs button {
  flex: 1; padding: 13px 8px; border-radius: var(--r);
  border: 1px solid var(--borde); background: var(--tarjeta);
  color: var(--texto-2); font-weight: 600; font-size: 14px;
  transition: all .15s;
}
.tabs button[aria-selected="true"] {
  border-color: var(--verde-borde); background: var(--verde-fondo); color: var(--verde);
}
.tabs.chips { overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tabs.chips::-webkit-scrollbar { display: none; }
.tabs.chips button { flex: 0 0 auto; padding: 9px 16px; border-radius: 999px; font-size: 13.5px; }

/* ------------------------------ tarjetas --------------------------- */
.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--r-lg); padding: 16px; margin-bottom: 12px;
}
.tarjeta.plana { padding: 0; overflow: hidden; }
.tarjeta.clic { transition: transform .12s, border-color .15s; }
.tarjeta.clic:active { transform: scale(.985); border-color: #2e333c; }
.tarjeta.mora { border-color: rgba(244, 86, 95, .38); }
.tarjeta.pagado { opacity: .62; }

.seccion { margin-top: 22px; }
.seccion-titulo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 0 2px 10px;
}
.seccion-titulo h2 { font-size: 15.5px; }

/* grupo tipo "santiago · wallet · $938" de la app anterior */
.grupo { display: flex; align-items: center; gap: 9px; margin: 20px 2px 10px; }
.grupo .punto { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.grupo .nombre { font-weight: 700; font-size: 15px; }
.grupo .total { margin-left: auto; color: var(--texto-2); font-weight: 600; font-variant-numeric: tabular-nums; }

/* fila de item con avatar de letra */
.item { display: flex; align-items: center; gap: 13px; padding: 14px 15px; }
.avatar {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: var(--r);
  display: grid; place-items: center; font-weight: 800; font-size: 19px;
}
.item-cuerpo { min-width: 0; flex: 1; }
.item-nombre {
  font-weight: 700; font-size: 15.5px;
  /* El nombre se parte en dos lineas antes que recortarse: "Santiago R..."
     no sirve para reconocer a nadie de un vistazo. */
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.item-sub { color: var(--texto-2); font-size: 12.5px; margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
.item-cifra {
  text-align: right; font-weight: 800; font-size: 17px;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;   /* no le robe ancho al nombre */
}
@media (max-width: 400px) { .item-cifra { font-size: 15.5px; } }
/* Pantallas muy angostas: se recorta el adorno —avatar y flecha— antes que
   el nombre o la cifra, que son el contenido. */
@media (max-width: 350px) {
  .item { gap: 10px; padding: 13px 12px; }
  .avatar { width: 40px; height: 40px; flex: 0 0 40px; font-size: 17px; }
  .item .chevron { display: none; }
}
.item-cifra small { display: block; font-size: 11.5px; font-weight: 600; color: var(--texto-3); margin-top: 2px; }
.chevron { color: var(--texto-3); flex: 0 0 auto; }

/* --------------------------- barra progreso ------------------------ */
.barra { height: 6px; background: #22262d; border-radius: 999px; overflow: hidden; margin-top: 10px; }
.barra i { display: block; height: 100%; border-radius: 999px; background: var(--verde); transition: width .35s; }
.barra.rojo i { background: var(--rojo); }
.barra.ambar i { background: var(--ambar); }

/* ------------------------------- rejilla --------------------------- */
.rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dato {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--r); padding: 13px 14px;
}
.dato .r { color: var(--texto-2); font-size: 12px; font-weight: 600; }
.dato .v { font-size: 18px; font-weight: 800; margin-top: 3px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.dato .v.chico { font-size: 15.5px; }
.dato.verde .v { color: var(--verde); }
.dato.rojo .v  { color: var(--rojo); }
.dato.ambar .v { color: var(--ambar); }

/* filas etiqueta/valor */
.lineas { display: flex; flex-direction: column; }
.linea {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--borde-suave);
}
.linea:last-child { border-bottom: none; }
.linea .e { color: var(--texto-2); font-size: 13.5px; }
.linea .v { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.linea.fuerte .v { font-size: 17px; }

/* --------------------------- linea de tiempo ----------------------- */
.tl { position: relative; padding-left: 26px; }
.tl::before {
  content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: var(--borde);
}
.tl-item { position: relative; padding: 11px 0; }
.tl-item::before {
  content: ''; position: absolute; left: -23px; top: 17px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--texto-3); box-shadow: 0 0 0 3px var(--fondo);
}
.tl-item.abono::before   { background: var(--verde); }
.tl-item.interes::before { background: var(--ambar); }
.tl-item.futuro::before  { background: var(--fondo); border: 2px solid var(--borde); }
.tl-fila { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.tl-fecha { color: var(--texto-3); font-size: 12px; }

/* ------------------------------ botones ---------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px; border-radius: var(--r);
  background: var(--tarjeta-alta); border: 1px solid var(--borde);
  color: var(--texto); font-weight: 650; font-size: 14.5px;
  transition: transform .12s, filter .15s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn.pri { background: var(--verde); border-color: var(--verde); color: #06230f; font-weight: 750; }
.btn.peligro { background: var(--rojo-fondo); border-color: rgba(244,86,95,.4); color: var(--rojo); }
.btn.ancho { width: 100%; }
.btn.chico {
  padding: 8px 13px; font-size: 13px; border-radius: var(--r-sm);
  max-width: 100%; overflow-wrap: anywhere;   /* URLs e IPs largas */
}
.botonera { display: flex; gap: 10px; }
.botonera .btn { flex: 1; }

/* FAB */
.fab {
  position: fixed; right: 16px; z-index: 40;
  bottom: calc(var(--nav-alto) + env(safe-area-inset-bottom, 0px) + 18px);
  width: 56px; height: 56px; border-radius: 18px;
  background: var(--verde); color: #06230f;
  display: grid; place-items: center; font-size: 28px; font-weight: 300;
  box-shadow: 0 8px 24px rgba(34, 197, 94, .3);
  transition: transform .14s;
}
.fab:active { transform: scale(.9); }

/* ---------------------------- navegacion --------------------------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(13, 15, 18, .94); backdrop-filter: blur(14px);
  border-top: 1px solid var(--borde);
}
.nav a {
  flex: 1; height: var(--nav-alto);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--texto-3); font-size: 10.5px; font-weight: 600;
}
.nav a.activo { color: var(--verde); }
.nav a svg { width: 22px; height: 22px; }

/* ---------------------------- formularios -------------------------- */
.campo { margin-bottom: 14px; }
.campo > label { display: block; font-size: 13px; font-weight: 600; color: var(--texto-2); margin-bottom: 6px; }
.campo .ayuda { font-size: 12px; color: var(--texto-3); margin-top: 5px; }
input[type=text], input[type=number], input[type=date], input[type=tel],
input[type=password], select, textarea {
  /* 16px NO es capricho: por debajo de eso, Chrome y Safari en movil hacen
     zoom automatico al enfocar el campo y dejan la pagina descuadrada, y
     el usuario tiene que alejar el zoom a mano cada vez. */
  font-size: 16px;
  width: 100%; padding: 13px 14px;
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: var(--r); color: var(--texto); outline: none;
  transition: border-color .15s;
  -webkit-appearance: none; appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ad' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  padding-right: 38px;
}
textarea { min-height: 78px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--verde-borde); }
input.error, select.error { border-color: var(--rojo); }
.campo-error { color: var(--rojo); font-size: 12.5px; margin-top: 5px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opciones { display: flex; gap: 8px; flex-wrap: wrap; }
.opciones button {
  padding: 9px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--borde); background: var(--fondo-2);
  color: var(--texto-2); font-size: 13.5px; font-weight: 600;
}
.opciones button[aria-pressed="true"] {
  border-color: var(--verde-borde); background: var(--verde-fondo); color: var(--verde);
}

/* Bloque plegable: guarda lo que no se mira a diario, sin esconderlo. */
.plegable {
  border: 1px solid var(--borde); border-radius: var(--r);
  background: var(--tarjeta); padding: 0 14px; margin: 4px 0 6px;
}
.plegable > summary {
  list-style: none; cursor: pointer;
  padding: 14px 2px; font-size: 14px; font-weight: 650;
  display: flex; align-items: center; gap: 8px;
}
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::after {
  content: ''; margin-left: auto; width: 9px; height: 9px;
  border-right: 2px solid var(--texto-3); border-bottom: 2px solid var(--texto-3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s;
}
.plegable[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.plegable[open] > summary { border-bottom: 1px solid var(--borde-suave); }
.plegable > *:last-child { margin-bottom: 14px; }

/* ------------------------------- hoja ------------------------------ */
.velo {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, .66); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: aparecer .18s ease;
}
@keyframes aparecer { from { opacity: 0; } }
.hoja {
  width: 100%; max-width: var(--ancho);
  max-height: 92vh; overflow-y: auto;
  background: var(--fondo-2); border: 1px solid var(--borde); border-bottom: none;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 8px 18px calc(env(safe-area-inset-bottom, 0px) + 22px);
  box-shadow: var(--sombra);
  animation: subir .24s cubic-bezier(.2, .8, .3, 1);
}
@keyframes subir { from { transform: translateY(100%); } }
.hoja-asa { width: 42px; height: 4px; border-radius: 999px; background: #333842; margin: 8px auto 14px; }
.hoja-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }

/* ------------------------------- varios ---------------------------- */
.vacio { text-align: center; padding: 46px 20px; color: var(--texto-2); }
.vacio .ico { font-size: 40px; opacity: .35; margin-bottom: 10px; }
.vacio h3 { margin-bottom: 6px; }

.aviso {
  border-radius: var(--r); padding: 12px 14px; font-size: 13.5px;
  border: 1px solid var(--borde); background: var(--tarjeta); margin-bottom: 12px;
}
.aviso.rojo  { border-color: rgba(244,86,95,.35); background: var(--rojo-fondo); color: #ffb9bd; }
.aviso.ambar { border-color: rgba(240,169,42,.35); background: var(--ambar-fondo); color: #ffd894; }
.aviso.verde { border-color: var(--verde-borde); background: var(--verde-fondo); color: #a7f3c4; }

.brindis {
  /* Nunca debe interceptar un toque: es un aviso, no un control. */
  pointer-events: none;
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-alto) + env(safe-area-inset-bottom, 0px) + 22px);
  z-index: 200; max-width: calc(100% - 32px);
  padding: 12px 18px; border-radius: var(--r);
  background: #eef1f5; color: #101216; font-weight: 650; font-size: 14px;
  box-shadow: var(--sombra); animation: subirBrindis .22s ease;
}
.brindis.malo { background: var(--rojo); color: #fff; }
@keyframes subirBrindis { from { opacity: 0; transform: translate(-50%, 12px); } }

.cargando { display: grid; place-items: center; padding: 60px 0; }
.spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--borde); border-top-color: var(--verde);
  animation: girar .8s linear infinite;
}

.busca { position: relative; margin: 14px 0 4px; }
.busca input { padding-left: 40px; }
.busca svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--texto-3); }

/* ------------------------------ bloqueo ---------------------------- */
.bloqueo {
  position: fixed; inset: 0; z-index: 300;
  background: var(--fondo);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
}
.bloqueo h1 { font-size: 27px; }
.bloqueo .sub { margin-bottom: 26px; }
.pin-caja {
  width: min(340px, 100%); height: 66px;
  border: 1.5px solid var(--azul); border-radius: var(--r-lg);
  background: #12161d;
  display: flex; align-items: center; justify-content: center; gap: 20px;
}
.pin-caja.error { border-color: var(--rojo); animation: temblar .35s; }
@keyframes temblar {
  25% { transform: translateX(-8px); } 50% { transform: translateX(8px); }
  75% { transform: translateX(-4px); }
}
.pin-punto { width: 11px; height: 11px; border-radius: 3px; background: #3a4049; transition: all .14s; }
.pin-punto.lleno { background: var(--texto); transform: scale(1.12); border-radius: 50%; }
.pin-entrada {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px;
  font-size: 16px;   /* mismo motivo: por debajo, el movil hace zoom al enfocar */
}
.pin-msg { margin-top: 18px; min-height: 22px; font-size: 13.5px; }

/* ------------------------------ respaldo --------------------------- */
@media (min-width: 720px) {
  .rejilla-3 { grid-template-columns: repeat(3, 1fr); }
  body { padding-bottom: 40px; }
  .nav { position: sticky; border-radius: var(--r-lg); margin: 20px auto; max-width: var(--ancho); border: 1px solid var(--borde); }
  .fab { bottom: 28px; right: calc(50% - var(--ancho) / 2 + 16px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}