:root {
  --bg: #f4f8f8;
  --surface: #ffffff;
  --primary: #0b5566;
  --primary-dark: #083f4c;
  --accent: #147d93;
  --text: #16232a;
  --muted: #5b6b70;
  --border: #dbe6e7;
  /* ⚠️ Estos dos se oscurecieron (antes #1e8e5a y #b9770e) porque el
     par color/fondo no alcanzaba el contraste mínimo de WCAG 2.1 AA
     (4.5:1 para texto normal): el verde daba 3.69:1 y el ámbar 3.35:1,
     medidos. Y no es un detalle: son justo las insignias que llevan el
     estado que más importa leer bien — "Pagada a tiempo", "Pendiente",
     "Sin vincular", "Inactiva" — en letra de 11px. Ahora dan 5.23:1 y
     5.36:1, con el mismo tono de siempre. Si se vuelven a tocar, hay
     que volver a medirlos contra --success-bg / --warning-bg. */
  --success: #177346;
  --success-bg: #e7f5ee;
  --danger: #c0392b;
  --danger-bg: #fbeae8;
  --warning: #8f5808;
  --warning-bg: #fdf3e3;
  --radius: 10px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
}
.topbar {
  background: var(--primary);
  color: #fff;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.topbar b { font-size: 16px; }
.topbar .who { font-size: 13px; opacity: .9; }
.topbar button {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.tabs {
  display: flex;
  gap: 4px;
  padding: 10px 20px 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.tabs button {
  border: none;
  background: none;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
}
.tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }
main { max-width: 1000px; margin: 0 auto; padding: 20px; }

/* Menú lateral del panel del Socio (GERENTE_AREA) — grupos
   desplegables en vez de la barra horizontal, porque es el rol con más
   pestañas. Ver sidebarSocioHtml() en app.js. */
.layout { display: flex; align-items: flex-start; }
.layout .sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 10px 0;
  min-height: calc(100vh - 53px);
}
/* ⚠️ `min-width: 0` no es decorativo: un ítem flex arranca con
   `min-width: auto`, que le prohíbe encogerse por debajo del ancho
   mínimo de su contenido. Sin esto, una tabla ancha estira este
   <main>, el <main> estira la página entera, y cualquier contenedor
   con overflow de adentro queda inútil — medido: "Mi equipo" se salía
   617px en una pantalla de 390px pese a tener ya su .tabla-scroll. */
.layout main#vista { flex: 1; min-width: 0; max-width: 900px; margin: 0; padding: 20px; }
.sidebar .item-plano > button,
.sidebar .grupo-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.sidebar .item-plano > button:hover,
.sidebar .grupo-titulo:hover { background: var(--bg); }
.sidebar .item-plano > button.active {
  color: var(--primary);
  background: var(--bg);
  border-left: 3px solid var(--primary);
  padding-left: 15px;
}
.sidebar .grupo-titulo .flecha { font-size: 10px; color: var(--muted); transition: transform .15s; }
.sidebar .grupo.abierto .grupo-titulo .flecha { transform: rotate(180deg); }
.sidebar .submenu { display: none; flex-direction: column; }
.sidebar .grupo.abierto .submenu { display: flex; }
.sidebar .submenu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 9px 18px 9px 34px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.sidebar .submenu button:hover { background: var(--bg); }
.sidebar .submenu button.active {
  color: var(--primary);
  font-weight: 600;
  background: var(--bg);
  border-left: 3px solid var(--primary);
  padding-left: 31px;
}
@media (max-width: 700px) {
  /* `align-items: stretch` es obligatorio aquí: el .layout hereda
     `align-items: flex-start` de arriba, y al pasar a columna eso hace
     que el <main> se dimensione por su CONTENIDO en vez de por el
     ancho de la pantalla — una tabla ancha lo estiraba a 1064px dentro
     de un teléfono de 390px, arrastrando toda la página (medido). */
  .layout { flex-direction: column; align-items: stretch; }
  .layout .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); min-height: auto; }
  .layout main#vista { max-width: none; width: 100%; }
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}
h2 { margin-top: 0; font-size: 18px; }
h3 { font-size: 15px; }
label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 10px 0 4px; }
input, select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
}
button.btn {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  margin-top: 12px;
}
button.btn:hover { background: var(--primary-dark); }
button.btn.secondary { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
/* 32px con mouse (24 era incómodo hasta apuntando); en pantallas
   táctiles sube a 44 — ver el media query del final del archivo.
   ⚠️ Esta regla base tiene que quedar ANTES de ese media query: con la
   misma especificidad gana la última, y tenerla después anulaba en
   silencio los 44px. */
button.btn.small { padding: 5px 10px; font-size: 12px; margin: 0; min-height: 32px; }
button.btn.danger { background: var(--danger); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge.ok { background: var(--success-bg); color: var(--success); }
.badge.bad { background: var(--danger-bg); color: var(--danger); }
.badge.warn { background: var(--warning-bg); color: var(--warning); }
.badge.neutral { background: #eef2f3; color: var(--muted); }
.muted { color: var(--muted); font-size: 13px; }
.login-card-form { max-width: 380px; margin: 60px auto; }
.banner { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-size: 13px; }
.banner.ok { background: var(--success-bg); color: var(--success); }
.banner.bad { background: var(--danger-bg); color: var(--danger); }
.banner.warn { background: var(--warning-bg); color: var(--warning); }
.text-bad { color: var(--danger); }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 140px; }
.empty { text-align: center; color: var(--muted); padding: 24px; }
a { color: var(--accent); }

/* Cuotas agrupadas por deuda/cliente (ver cargarCuotas() en app.js) —
   nunca una tabla ancha: cada cuota es su propia fila flexible que se
   acomoda sola en cualquier ancho, para que se lea bien en celular sin
   desplazar de lado (a diferencia de <table>, que th/td fuerzan a
   `white-space: nowrap`). */
.cuota-grupo { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.cuota-grupo-header {
  background: var(--bg);
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  border-bottom: 1px solid var(--border);
}
.cuota-grupo-header b { font-size: 14px; }
.cuota-fila { padding: 10px 14px; border-top: 1px solid var(--border); }
.cuota-fila:first-of-type { border-top: none; }
.cuota-fila-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.cuota-fila-montos { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.cuota-fila-montos b { color: var(--text); }

/* Tarjeta-fila reutilizable para listas con muchos botones de acción
   por fila ("Mis áreas", "Mi equipo" — las dos que este archivo ya
   documentaba arriba con 575px y 617px de desborde en 390px, ambas
   compartidas por Manager y Socio). Mismo espíritu que .cuota-grupo:
   nunca una tabla ancha que obligue a arrastrar de lado (pedido
   explícito del usuario, con captura de pantalla, sep 2026) — cada
   fila se acomoda sola en cualquier ancho.
   ⚠️ `min-width: 0` en `.fila-tarjeta-info` no es decorativo (mismo
   motivo ya documentado arriba en `.layout main#vista`): sin él, un
   nombre largo o un correo largo estira la fila entera en vez de
   partirse en dos renglones.
   `.fila-tarjeta-acciones` fuerza su propia línea completa
   (`flex-basis: 100%`) a propósito: mezclada con los datos, una fila
   con 7-9 botones se veía apretada contra el texto — en su propia
   línea, sus botones se reparten y se envuelven solos sin arrastrar
   nada más. */
.fila-tarjeta-lista { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.fila-tarjeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: flex-start;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.fila-tarjeta:last-child { border-bottom: none; }
.fila-tarjeta-info { flex: 1; min-width: 220px; }
.fila-tarjeta-titulo { font-size: 14px; margin-bottom: 3px; }
.fila-tarjeta-titulo b { font-size: 15px; }
.fila-tarjeta-linea { font-size: 13px; color: var(--muted); margin-top: 2px; }
.fila-tarjeta-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex-basis: 100%; }

/* ---------------------------------------------------------------
   Tablas que no caben en un celular: en vez de empujar TODA la página
   a lo ancho, la tabla se desplaza sola dentro de su propia caja.
   ⚠️ A oct 2026, casi TODO el panel se rehizo como `.fila-tarjeta` (ver
   más arriba) — pedido explícito del usuario con dos capturas de
   pantalla distintas ("así no utilizo la barra... reorganizar todos
   los paneles"), medido en las 4 pestañas × 3 anchos × 4 roles sin
   ningún desborde. Esta clase le queda a UNA sola tabla
   (`tablaTotalesPeriodo()`, 2 columnas, sin riesgo real de desbordar)
   — se dejó así a propósito, no por falta de tiempo: convertirla a
   tarjetas no mejora nada con solo dos columnas. Si algún día vuelve a
   hacer falta `.tabla-scroll` para algo nuevo, sigue funcionando igual.
   --------------------------------------------------------------- */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------
   Objetivos táctiles. Medido en el panel real: los botones ".btn.small"
   (Pagar, Condonar, Editar, Vincular…) quedaban en 24px de alto y los
   chips en 26px — la mitad de lo que piden las directrices móviles.
   Se agrandan SÓLO donde el dedo es el que apunta (pointer: coarse),
   para no inflar la pantalla de quien trabaja con mouse.
   --------------------------------------------------------------- */
/* Se combina `pointer: coarse` con un corte por ancho a propósito:
   varios navegadores (y los emuladores) no reportan bien el tipo de
   puntero, y una pantalla de 700px o menos es un teléfono en la
   práctica — ahí el dedo manda aunque el navegador diga otra cosa. */
@media (pointer: coarse), (max-width: 700px) {
  /* No sólo los `.small`: los botones principales ("Enviar solicitud",
     "Confirmar cierre") medían 36px — también por debajo del mínimo. */
  button.btn { min-height: 44px; }
  button.btn.small { min-height: 44px; padding: 10px 14px; font-size: 13px; }
  .chip-cliente { min-height: 44px; padding: 10px 16px; font-size: 13px; }
  .tabs button { min-height: 44px; }
  .sidebar .item-plano > button,
  .sidebar .grupo-titulo,
  .sidebar .submenu button { min-height: 44px; }
  /* Botones pegados uno al lado del otro en las tablas: separarlos
     para que no se toque el equivocado. */
  td button.btn.small { margin: 2px 4px 2px 0; }
}
/* Foco de teclado propio: el del navegador (1px) casi no se ve sobre
   los botones de color. No era un fallo AA (el indicador existía),
   pero sí una fricción real para quien navega con Tab. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------
   Diálogo propio (pedirDato) — reemplaza al prompt() del navegador en
   las acciones que mueven plata: deja mostrar el saldo contra el que
   se está pagando y validar antes de mandar nada.
   --------------------------------------------------------------- */
.modal-fondo {
  position: fixed;
  inset: 0;
  background: rgba(22, 35, 42, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100;
}
.modal {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
.modal h3 { margin: 0 0 8px; font-size: 17px; }
.modal input { font-size: 17px; }        /* 16px+ evita que iOS haga zoom al enfocar */
.modal-ayuda { margin: 6px 0 0; font-size: 12px; }
.modal-error { color: var(--danger); font-size: 13px; min-height: 0; }
.modal-botones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.modal-botones .btn { margin-top: 0; }

/* Índice de nombres arriba de "Cuotas y pagos" (ver cargarCuotas()):
   un toque salta directo a la tarjeta de ese cliente, para no tener
   que bajar tarjeta por tarjeta cuando hay muchos clientes. */
.indice-clientes { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.chip-cliente {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--primary);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.chip-cliente:hover { background: var(--border); }

/* Tableros KPI de los 4 roles (migración 025). CSS propio a mano —
   este proyecto no usa Tailwind ni ningún framework de frontend (ver
   CLAUDE.md): mismo criterio "sin dependencias de más" que rige el
   resto del sitio. */
/* Pantalla de entrada (oct 2026) — rediseño pedido con una captura de
   un mockup de referencia ("CobroFlow"). `.login-card-form` NO se
   tocó: la siguen usando "¿Olvidaste tu contraseña?" y el formulario
   de nueva contraseña (renderRecuperarPassword/renderResetPassword en
   app.js), y cambiarla les habría movido el margen y el ancho sin que
   nadie lo pidiera. Esta pantalla usa clases propias nuevas. */
.login-page { max-width: 420px; margin: 40px auto; padding: 0 16px; }
.login-cabecera { text-align: center; margin-bottom: 20px; }
.login-logo {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 6px 16px rgba(11, 85, 102, .25);
}
.login-marca { font-size: 24px; margin: 0 0 6px; color: var(--text); }
.login-marca span { color: var(--success); }
.login-sub { font-size: 13px; color: var(--muted); margin: 0; }
.login-card-principal { margin: 0 0 20px; }
.login-btn-principal { width: 100%; background: var(--success); font-size: 15px; padding: 12px 16px; }
.login-btn-principal:hover { background: #0f5c38; }
.login-roles-titulo { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 10px; }
.login-roles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.login-rol-tarjeta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  /* oct 2026: pasó de <div> a <button> (ahora completa el correo al
     tocarla, ver renderLogin en app.js) — esto resetea lo que un
     <button> trae de fábrica y la deja viéndose IGUAL que antes. */
  width: 100%;
  font: inherit;
  cursor: pointer;
}
.login-rol-tarjeta:hover { background: var(--bg); }
.login-rol-icono { font-size: 22px; }
.login-rol-nombre { font-size: 13px; font-weight: 700; color: var(--text); }
.login-rol-desc { font-size: 11px; color: var(--muted); }
.login-roles-nota { font-size: 11px; color: var(--muted); text-align: center; margin: 12px 0 0; }
@media (max-width: 360px) {
  .login-roles-grid { grid-template-columns: 1fr; }
}

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.kpi-tile .kpi-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.kpi-tile .kpi-valor { font-size: 22px; font-weight: 700; color: var(--primary-dark); line-height: 1.2; }
.kpi-tile .kpi-nota { font-size: 11px; color: var(--muted); margin-top: 4px; }
.kpi-tile.kpi-danger .kpi-valor { color: var(--danger); }
.kpi-tile.kpi-success .kpi-valor { color: var(--success); }
.dashboard-acciones { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.fila-bloqueada { opacity: .6; }