/* Arriendos — Angora Moda.
   Mobile-first: se usa de pie, en la calle, con un recibo en la mano.
   Texto grande, objetivos de dedo, el semáforo visible sin scroll.

   El acento es NEGRO. Los únicos colores son los del semáforo, y ahí el color
   es información, no marca. */

:root {
  --acento: #111111;
  --fondo: #f5f5f5;
  --superficie: #ffffff;
  --borde: #e5e5e5;
  --tinta: #111111;
  --apagado: #6b7280;

  --rojo: #dc2626;
  --amarillo: #d97706;
  --verde: #16a34a;

  --radio: 16px;
  --sombra: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --barra-alto: 56px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-text-size-adjust: 100%;
}

svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.g { stroke: none; width: 18px; height: 18px; }

/* ─────────────────────────────── header ─────────────────────────────── */
.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--barra-alto);
  padding: 0 12px;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}

.cuadro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie);
  color: var(--tinta);
  cursor: pointer;
}
.cuadro:active { background: var(--fondo); }

.logo { border-radius: 6px; flex: none; }
.marca { font-weight: 700; white-space: nowrap; }

.separador {
  width: 1px;
  height: 22px;
  background: var(--borde);
  flex: none;
}

.seccion {
  color: var(--apagado);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barra-derecha {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* Avatar de iniciales: sin pedidos externos, funciona sin señal. */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--acento);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

/* ────────────────────────────── contenido ───────────────────────────── */
.contenido {
  padding: 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(32px, env(safe-area-inset-bottom));
  max-width: 720px;
  margin: 0 auto;
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

/* ──────────────────────────────  totales ────────────────────────────── */
.totales { display: grid; gap: 10px; margin-bottom: 18px; }
.totales .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.totales .tarjeta { padding: 16px; display: grid; gap: 2px; }

.destacado { padding: 20px !important; }

.etiqueta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--apagado);
}
.etiqueta-fina { font-size: 13px; color: var(--apagado); }

.cifra-grande { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.cifra { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }

/* ─────────────────────────────── chips ──────────────────────────────── */
.chips {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  padding: 9px 16px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--tinta);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.chip-activo { background: var(--acento); border-color: var(--acento); color: #fff; }

/* ─────────────────────────────── grupos ─────────────────────────────── */
.grupo { margin-bottom: 22px; }

.grupo-titulo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0 4px 8px;
  font-size: 16px;
  font-weight: 700;
}
.grupo-monto { font-variant-numeric: tabular-nums; }

.cols {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--borde);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--apagado);
}

/* ──────────────────────────────── filas ─────────────────────────────── */
.fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  min-height: 64px;              /* objetivo de dedo */
  border-bottom: 1px solid var(--borde);
  color: inherit;
  text-decoration: none;
}
.fila:last-child { border-bottom: none; }
.fila:active { background: var(--fondo); }

.fila-izq { display: grid; gap: 2px; min-width: 0; flex: 1; }
.fila-titulo { font-size: 16px; font-weight: 700; }
.fila-meta {
  font-size: 13px;
  color: var(--apagado);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fila-der { display: grid; justify-items: end; gap: 4px; flex: none; }
.fila-monto { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

.chevron { color: #c4c4c4; flex: none; width: 18px; height: 18px; }
.fila-plana .chevron { display: none; }

/* ──────────────────────────── marca de estado ───────────────────────── */
.marca-estado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.marca-estado.rojo { color: var(--rojo); }
.marca-estado.amarillo { color: var(--amarillo); }
.marca-estado.verde { color: var(--verde); }

/* Sin inquilino NO es semáforo: es gris. Verde diría "al día", y la unidad
   está vacía — plata que no entra. */
.marca-estado.sin-inquilino { color: var(--apagado); }

/* ────────────────────────────── acciones ────────────────────────────── */
.acciones { display: grid; gap: 10px; justify-items: stretch; margin-top: 8px; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 24px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
  color: var(--tinta);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.boton-principal { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton:disabled { opacity: 0.45; cursor: default; }

.vacio { color: var(--apagado); text-align: center; padding: 32px 0; }

/* ──────────────────────── login y pantallas solas ───────────────────── */
.centrado {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px max(16px, env(safe-area-inset-left));
}

.tarjeta-sola {
  width: 100%;
  max-width: 340px;
  padding: 40px;
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.04);
}

.titulo-login { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.tarjeta-sola .apagado { color: var(--apagado); font-size: 14px; margin: 0; }
.boton-google { width: 100%; margin-top: 14px; }

/* ═══════════════════════ menú (details nativo, sin JS) ═══════════════════ */
.menu { position: relative; flex: none; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--fondo); }

.menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  min-width: 220px;
  padding: 8px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

.menu-grupo {
  margin: 8px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--apagado);
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
}
.menu-item:active { background: var(--fondo); }
.menu-item.activo { background: var(--acento); color: #fff; }
.menu-item.deshabilitado { color: var(--apagado); font-weight: 500; }
.menu-item em { font-size: 11px; font-style: normal; color: var(--apagado); }

/* ══════════════════════════════ avisos ══════════════════════════════════ */
.aviso {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
}
.aviso-ok       { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.aviso-error    { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.aviso-atencion { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.aviso-inactivo { background: var(--fondo); color: var(--apagado); border: 1px solid var(--borde); }

/* ══════════════════════════════ fichas ══════════════════════════════════ */
.ficha { margin-bottom: 22px; }
.ficha h1 { margin: 0 0 4px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.ficha .apagado { color: var(--apagado); font-size: 14px; margin: 0 0 10px; }
.ficha .apagado a { color: var(--apagado); }
.notas { margin: 0 0 12px; font-size: 15px; white-space: pre-wrap; }
.ficha-bloque { padding: 4px 0; margin-bottom: 22px; }
.ficha-bloque .aviso { margin: 12px 16px; }
.pie { font-size: 13px; color: var(--apagado); margin-top: 8px; }

.acciones-fila { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.ficha .acciones-fila { padding: 0; }
.acciones-fila .boton { min-height: 44px; padding: 10px 18px; font-size: 15px; }

.fila.apagada { opacity: 0.5; }
.marca-estado.inactivo { color: var(--apagado); }

/* ══════════════════════════════ formularios ═════════════════════════════ */
.alta { margin-top: 18px; }
.alta > summary { list-style: none; cursor: pointer; }
.alta > summary::-webkit-details-marker { display: none; }

.formulario {
  display: grid;
  gap: 18px;
  margin-top: 14px;
  padding: 18px;
}
.formulario.tarjeta { margin-top: 18px; }

.campo { display: grid; gap: 6px; border: none; padding: 0; margin: 0; }
.campo-etiqueta { font-size: 14px; font-weight: 700; }
.campo-etiqueta i { color: var(--rojo); font-style: normal; }

.campo input[type="text"],
.campo input[type="date"],
.campo input[type="number"],
.campo input[type="email"],
.campo select,
.campo textarea {
  width: 100%;
  min-height: 52px;                /* objetivo de dedo */
  padding: 13px 14px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
  color: var(--tinta);
  font: inherit;
  font-size: 16px;                 /* menos de 16px hace que iOS haga zoom al enfocar */
}
.campo textarea { min-height: 84px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}
.campo.con-error input, .campo.con-error select, .campo.con-error textarea {
  border-color: var(--rojo);
}

.ayuda { font-size: 13px; color: var(--apagado); }
.error { font-size: 13px; color: var(--rojo); font-weight: 600; }

.casilla, .radio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  cursor: pointer;
}
.casilla input, .radio input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--acento); }
.casilla span, .radio span { display: grid; gap: 3px; }
.radio + .radio { margin-top: 10px; }
fieldset.campo { display: block; }
fieldset.campo legend { margin-bottom: 8px; }

.acciones-fila.centrar { justify-content: center; padding-bottom: 24px; }

/* ════════════════════════ 5b: contratos y servicios ═════════════════════ */
.boton-chico { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.enlace-chico { font-size: 13px; font-weight: 600; color: var(--apagado); text-decoration: underline; }

/* Un <details> anidado dentro de una tarjeta: sin sombra ni borde propios. */
.alta-interna { margin: 0 16px 16px; }
.alta-interna .formulario { padding: 16px 0 0; }

.confirmacion { padding: 20px; display: grid; gap: 12px; }
.confirmacion h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.confirmacion .aviso { margin: 0; }
.confirmacion .apagado { color: var(--apagado); font-size: 14px; margin: 0; }
.confirmacion .acciones-fila { padding: 4px 0 0; }

/* ═════════════════════════ pagos y comprobantes ═════════════════════════ */
.reparto { display: grid; gap: 12px; }
.reparto .ayuda { margin: -4px 0 4px; }

.cargo-fila {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--borde);
  border-radius: 12px;
}
.cargo-fila.con-error { border-color: var(--rojo); }
.cargo-datos { display: grid; gap: 2px; min-width: 0; }
.cargo-datos strong { font-size: 15px; }
.cargo-datos .fila-meta { white-space: normal; }
.vencido { color: var(--rojo); font-style: normal; }

.cargo-monto { display: grid; gap: 4px; width: 140px; }
.cargo-monto input {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  font: inherit;
  font-size: 16px;                 /* menos de 16px hace que iOS haga zoom */
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cargo-fila .error { grid-column: 1 / -1; }

.acciones-comprobante { display: flex; gap: 12px; align-items: center; }

/* El selector de archivo por defecto es diminuto en el celular. */
.campo input[type="file"] {
  width: 100%;
  padding: 14px;
  border: 1px dashed var(--borde);
  border-radius: 12px;
  background: var(--fondo);
  font: inherit;
  font-size: 15px;
}

.valor-fijo { margin: 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

.corrida-error { margin: 0 16px 14px; font-size: 13px; font-weight: 500; }

/* ═══════════════════ el dashboard: lo que se debe, primero ═══════════════ */
.deudas { display: grid; gap: 10px; margin-bottom: 20px; }

.deuda {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
/* Lo vencido lleva una barra roja al costado: se ve antes de leer nada. */
.deuda-vencida { border-left: 4px solid var(--rojo); }

.deuda-cuerpo {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 14px;
  color: inherit;
  text-decoration: none;
}
.deuda-cuerpo:active { background: var(--fondo); }

.deuda-arriba { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.deuda-quien {
  font-size: 17px; font-weight: 700; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.deuda-monto { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; flex: none; }

.deuda-abajo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.deuda-donde {
  font-size: 13px; color: var(--apagado); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.deuda-detalle {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--apagado);
}
.deuda-meses { font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.deuda-desglose { text-align: right; min-width: 0; }

/* Cobrar sin salir de la fila: de cinco toques a dos. */
.boton-cobrar {
  flex: none;
  display: flex; align-items: center;
  min-height: auto; padding: 0 18px;
  border: none; border-left: 1px solid var(--borde); border-radius: 0;
  background: var(--fondo);
  font-size: 14px; font-weight: 700;
}
.boton-cobrar:active { background: var(--borde); }

/* ── lo que está bien: una sola línea, plegado ── */
.al-dia { margin-bottom: 20px; }
.al-dia > summary {
  list-style: none; cursor: pointer;
  padding: 12px 14px;
  border: 1px solid var(--borde); border-radius: 12px;
  background: var(--superficie);
}
.al-dia > summary::-webkit-details-marker { display: none; }
.al-dia[open] > summary { border-radius: 12px 12px 0 0; border-bottom: none; }
.al-dia .tarjeta { border-radius: 0 0 12px 12px; box-shadow: none; }
.nada-pendiente { color: var(--verde); font-weight: 600; }

@media (max-width: 380px) {
  .deuda-quien, .deuda-monto { font-size: 16px; }
  .boton-cobrar { padding: 0 14px; font-size: 13px; }
  .deuda-detalle { flex-direction: column; gap: 2px; }
  .deuda-desglose { text-align: left; }
}

/* ═════════════════════ franja de modo pruebas ═══════════════════════════ */
/* Va debajo del header y en TODAS las pantallas mientras la app no genere
   cargos sola. Cuando está en marcha no se pinta nada: lo que tiene que verse
   de un vistazo es lo excepcional, no lo normal.
   Los mismos colores que .aviso-atencion, para que se lea como un aviso y no
   como un error. */
.franja-pruebas {
  position: sticky;
  top: var(--barra-alto);
  z-index: 5;
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 9px 16px;
  background: #fffbeb;
  color: #92400e;
  border-bottom: 1px solid #fde68a;
  font-size: 13px;
  line-height: 1.35;
}
.franja-pruebas strong { font-weight: 800; }
.franja-pruebas a { color: inherit; text-decoration: underline; margin-left: auto; white-space: nowrap; }