/*
 * mobile.css — sistema de diseño de la app móvil InversorBOE
 * =============================================================
 *
 * Mobile-first, sin herencia de app.css. Pensado para viewport 360-430px
 * (iPhone SE → Galaxy Fold abierto). Todo en `rem` respetando el tamaño
 * base del usuario. Touch targets ≥ 44px, sin hover-only, fuentes grandes.
 *
 * Convenciones:
 *   - Paleta oro + azul BOE, alineada con panel desktop.
 *   - Safe areas con env(safe-area-inset-*) para notch/home indicator.
 *   - Componentes: .phone-shell (no existe en prod, solo mockup), .appbar,
 *     .content, .bottom-nav, .card, .sub-item, .niv, .chip, .segments,
 *     .carga, .sheet-overlay, .sheet, .sticky-cta, .settings-list.
 */

/* ── Tokens ──────────────────────────────────────────────────────────── */
:root {
  --ink: #0f172a;
  --ink-soft: #1e293b;
  --ink-mute: #475569;
  --ink-light: #64748b;
  --line: #e2e8f0;
  --line-soft: #f1f5f9;
  --bg: #f8fafc;
  --surface: #ffffff;
  --gold: #d4970a;
  --gold-2: #b45309;
  --gold-soft: #fef3c7;
  --boe: #0c447c;
  --boe-soft: #dbeafe;
  --ok: #16a34a;
  --ok-soft: #dcfce7;
  --warn: #f97316;
  --warn-soft: #ffedd5;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --nivelA: #16a34a;
  --nivelB: #65a30d;
  --nivelC: #f59e0b;
  --nivelD: #64748b;
  --nivelQ: #94a3b8;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --shadow-md: 0 4px 12px -4px rgba(15,23,42,.12);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --nav-h: 68px;
  --appbar-h: 56px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--boe); text-decoration: none; }
button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}
input, select, textarea {
  font-family: inherit;
  font-size: 16px; /* ≥16 evita autozoom iOS */
}
img { max-width: 100%; display: block; }

/* ── Layout shell ─────────────────────────────────────────────────────── */
.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--appbar-h);
  padding: 0 var(--space-5);
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
}
.appbar h1 { font-size: 18px; }
.appbar .logo-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; letter-spacing: 0.02em;
}
.appbar .row { display: flex; align-items: center; gap: var(--space-2); }
.icon-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-size: 18px;
}
.icon-btn:active { background: var(--line-soft); }

.content {
  padding: var(--space-4);
  padding-bottom: calc(var(--nav-h) + var(--space-5));
  min-height: calc(100vh - var(--appbar-h));
}
.content.no-nav { padding-bottom: var(--space-5); }

/* ── Bottom nav ───────────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 30;
}
.bottom-nav a {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  color: var(--ink-mute);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding-top: var(--space-2);
}
.bottom-nav a.active { color: var(--gold); }
.bottom-nav .nav-icon { font-size: 22px; line-height: 1; }

/* ── Cards genéricas ──────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.card h3 { font-size: 14px; margin-bottom: 2px; }
.card .muted { color: var(--ink-mute); font-size: 12px; }
.card.gold {
  background: linear-gradient(135deg, #fffbeb 0%, var(--gold-soft) 100%);
  border-color: #fde68a;
}

.section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
  font-weight: 700;
  margin: var(--space-2) 0 var(--space-2);
}
.hr {
  height: 1px; background: var(--line-soft); margin: var(--space-4) 0;
  border: 0;
}

/* ── KPI strips y grids ───────────────────────────────────────────────── */
.kpi-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.kpi .label {
  font-size: 11px; color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.kpi .val {
  font-size: 18px; font-weight: 700;
  margin-top: 2px; letter-spacing: -0.02em;
}
.kpi .sub { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }

.kpi2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.kpi2 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px var(--space-3);
}
.kpi2 .k {
  font-size: 10px; color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.kpi2 .v { font-size: 15px; font-weight: 700; margin-top: 1px; letter-spacing: -0.01em; }
.kpi2 .s { font-size: 10px; color: var(--ok); margin-top: 1px; font-weight: 600; }
.kpi2.danger .v { color: var(--danger); }
.kpi2.ok .v { color: var(--ok); }

/* ── Niveles ──────────────────────────────────────────────────────────── */
.niv {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.niv-A { background: var(--nivelA); }
.niv-B { background: var(--nivelB); }
.niv-C { background: var(--nivelC); }
.niv-D { background: var(--nivelD); }
.niv-Q { background: var(--nivelQ); }
.niv-lg { width: 48px; height: 48px; border-radius: 12px; font-size: 22px; }

/* ── Item de listado (subasta card) ──────────────────────────────────── */
.sub-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: 10px;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: inherit;
}
.sub-item:active { background: var(--line-soft); }
.sub-item .body { flex: 1; min-width: 0; }
.sub-item .title { font-size: 14px; font-weight: 600; line-height: 1.3; margin-bottom: 2px; }
.sub-item .dist { font-size: 12px; color: var(--ink-mute); margin-bottom: var(--space-2); }
.sub-item .metrics { display: flex; gap: 10px; font-size: 12px; }
.sub-item .metrics .m { display: flex; flex-direction: column; }
.sub-item .metrics .m .k {
  color: var(--ink-mute); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.sub-item .metrics .m .v { font-weight: 700; font-size: 13px; }
.sub-item .metrics .m .v.ok { color: var(--ok); }
.sub-item .days { font-size: 11px; color: var(--warn); font-weight: 600; margin-top: 6px; }
.sub-item .days.urgent { color: var(--danger); }

/* ── Chips (filtros rápidos) ─────────────────────────────────────────── */
.chips {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: 4px 0 10px;
  margin: 0 calc(-1 * var(--space-4)) 10px;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  padding: 6px var(--space-3);
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute);
  white-space: nowrap;
}
/* Chip activo: puede venir por clase `.active` (pintada por Jinja al
   server-render) o por un checkbox `checked` dentro del label (toggle
   en cliente dentro del sheet de filtros). `:has()` soportado en Chrome
   Android 105+, Safari iOS 15.4+ — cobertura >97% de móviles hoy. */
.chip.active,
.chip:has(input:checked) {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.chip.accent.active,
.chip.accent:has(input:checked) {
  background: var(--gold);
  border-color: var(--gold);
}
/* Cursor/feedback visual al tocar un chip que envuelve un checkbox. */
.chip:has(input) { cursor: pointer; user-select: none; }
.chip:has(input:checked):active { filter: brightness(0.9); }

/* ── Search bar ──────────────────────────────────────────────────────── */
.search {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px var(--space-3);
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-size: 14px;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: 0;
  font-size: 14px;
}
.search input::placeholder { color: var(--ink-mute); }

/* ── FAB ─────────────────────────────────────────────────────────────── */
/* IMPORTANTE: el `bottom` debe incluir `env(safe-area-inset-bottom)` para
   que en iPhone (home indicator) el FAB no quede tapado por la barra
   visual del home. El icono va como SVG (no emoji) para evitar que se
   "mueva" dentro del círculo por diferencias de métricas entre fuentes. */
.fab {
  position: fixed;
  right: 18px;
  bottom: calc(var(--nav-h) + 18px + env(safe-area-inset-bottom));
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -6px rgba(212,151,10,.55), 0 4px 10px -2px rgba(15,23,42,.25);
  z-index: 25;
  border: 2px solid #fff;
  padding: 0;
}
.fab svg { width: 24px; height: 24px; display: block; }
.fab:active { background: var(--gold-2); transform: scale(0.96); transition: transform 80ms; }
.fab .fab-badge {
  position: absolute;
  top: 2px; right: 2px;
  background: var(--ink);
  color: #fff;
  border-radius: 50%;
  width: 20px; height: 20px;
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}

/* ── Hero (header de detalle) ────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, #0f2147 0%, var(--boe) 100%);
  color: #fff;
  padding: var(--space-5) var(--space-4) 22px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-4);
}
.hero .addr { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.hero .loc { font-size: 12px; color: #cbd5e1; margin-top: 2px; }
.hero .header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px;
}
.hero .days-info { font-size: 13px; color: #cbd5e1; }

/* ── Segment control (tabs horizontales en detalle) ───────────────────── */
.segments {
  display: flex;
  background: var(--line-soft);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: var(--space-3);
  gap: 2px;
}
.segments .seg {
  flex: 1;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute);
  padding: 7px 4px;
  border-radius: 8px;
  text-align: center;
}
.segments .seg.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* ── Carga (item del detalle) ────────────────────────────────────────── */
.carga {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}
.carga .hdr {
  display: flex; justify-content: space-between;
  gap: var(--space-2); align-items: flex-start;
  margin-bottom: 4px;
}
.carga .acreedor { font-size: 13px; font-weight: 700; }
.carga .tipo { font-size: 11px; color: var(--ink-mute); }
.carga .importe { font-size: 14px; font-weight: 700; white-space: nowrap; }
.carga .desglose { font-size: 11px; color: var(--ink-mute); margin-top: 4px; }
.carga .razon { font-size: 11px; color: var(--ink-mute); margin-top: 4px; font-style: italic; }

/* ── Badges ──────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.badge.subsiste { background: var(--danger-soft); color: var(--danger); }
.badge.cancela { background: var(--ok-soft); color: var(--ok); }
.badge.riesgo { background: var(--warn-soft); color: var(--warn); }
.badge.publico { background: var(--warn-soft); color: var(--warn); margin-left: 4px; }
.badge.completo { background: var(--boe-soft); color: var(--boe); }
.badge.premium { background: var(--gold-soft); color: var(--gold-2); }
.badge.na { background: #f1f5f9; color: var(--ink-mute); border: 1px dashed var(--line); }

/* ── Sticky CTA (bottom) ─────────────────────────────────────────────── */
.sticky-cta {
  position: fixed;
  left: 0; right: 0;
  bottom: var(--nav-h);
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  z-index: 15;
}
.sticky-cta.no-nav { bottom: 0; }
.sticky-cta button, .sticky-cta .btn {
  width: 100%;
  background: var(--gold);
  color: #fff;
  padding: 14px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: block;
  text-align: center;
}
.sticky-cta button:active, .sticky-cta .btn:active { background: var(--gold-2); }
.sticky-cta .sub {
  font-size: 11px; color: var(--ink-mute);
  text-align: center; margin-top: 6px;
}

/* ── Botones primitivos ──────────────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  padding: 12px var(--space-5);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 15px;
  text-align: center;
}
.btn-primary.block { display: block; width: 100%; }
.btn-primary:active { background: var(--gold-2); }
.btn-secondary {
  display: inline-block;
  background: var(--line-soft);
  color: var(--ink);
  padding: 12px var(--space-5);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 15px;
  text-align: center;
}
.btn-secondary.block { display: block; width: 100%; }

/* ── Bottom sheet ────────────────────────────────────────────────────── */
/* El sheet usa flex-column para que el CTA final (`.sheet-cta`) pueda ser
   sticky al fondo. Así el usuario siempre ve "Aplicar" aunque haga scroll
   del contenido (filtros largos, paywall, etc.). `max-height` respeta la
   safe area del notch arriba (iPhone) para no quedar cortado por arriba.
   90dvh (dynamic viewport) en lugar de 90vh evita que el sheet quede
   oculto tras la barra de URL cuando se retrae en iOS Safari. */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.5);
  display: flex; align-items: flex-end;
  z-index: 50;
  animation: fade-in 160ms ease-out;
}
.sheet-overlay[hidden] { display: none; }
.sheet {
  background: var(--surface);
  width: 100%;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 8px var(--space-4) 0;
  /* El sheet toma prácticamente toda la altura disponible (dejando solo el
     notch + 20px). Antes con `max-height: 80dvh` y sin `min-height`, el
     sheet se ajustaba al contenido y en iPhone 13 Pro quedaba al 67% de
     la pantalla con mucho backdrop dimmed encima — el usuario lo percibía
     como "flotando pequeño". Ahora `min-height: 75vh` garantiza un cuerpo
     sólido aunque el contenido sea corto, y `max-height` sigue evitando
     overflow si el contenido es muy largo. `.sheet-cta` sigue sticky al
     fondo del scroll interno, así que siempre se ve Aplicar/Cerrar. */
  min-height: 75vh;
  min-height: 75dvh;
  max-height: 92vh;
  max-height: calc(100dvh - env(safe-area-inset-top) - 20px);
  display: flex;
  flex-direction: column;
  animation: slide-up 220ms cubic-bezier(.2,.9,.3,1);
  overflow: hidden; /* el scroll lo gestiona .sheet-body, no el contenedor */
  position: relative;
}
.sheet .grabber {
  flex: 0 0 auto;
  width: 40px; height: 4px;
  background: var(--line); border-radius: 2px;
  margin: 2px auto 6px;
}
.sheet h2, .sheet h3 {
  flex: 0 0 auto;
  margin: 0 40px 10px 0; /* margin-right reserva hueco para el botón X */
  font-size: 18px;
  line-height: 1.3;
}
/* Botón X para cerrar el sheet (esquina superior derecha). Se inyecta
   automáticamente por openSheet() en mobile.js. */
.sheet-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--line-soft);
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.sheet-close:active { background: var(--line); }
.sheet form {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  margin: 0 calc(-1 * var(--space-4));
  padding: 0 var(--space-4);
}
.sheet .section { margin-bottom: var(--space-4); }
.sheet .sect-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-mute); font-weight: 700;
  margin-bottom: var(--space-2);
}
.sheet-cta {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  margin: 0 calc(-1 * var(--space-4));
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  display: flex; gap: var(--space-2);
  box-shadow: 0 -4px 12px -6px rgba(15,23,42,.08);
}
.sheet-cta button,
.sheet-cta a {
  flex: 1;
  padding: 12px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
}
.sheet-cta .primary { background: var(--ink); color: #fff; }
.sheet-cta .secondary { background: var(--line-soft); color: var(--ink); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ── Settings list (Cuenta) ──────────────────────────────────────────── */
.settings-list {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  overflow: hidden;
}
.settings-list a, .settings-list .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--space-4);
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
  color: inherit;
}
.settings-list a:last-child, .settings-list .row:last-child { border-bottom: 0; }
.settings-list a:active { background: var(--line-soft); }
.settings-list .row .ch { color: var(--ink-mute); font-size: 18px; }
.settings-list .row.danger { color: var(--danger); }

.settings-header {
  display: flex; align-items: center;
  gap: var(--space-3); margin-bottom: var(--space-4);
}
.avatar {
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700;
}
.settings-header .email { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

/* ── Onboarding (login, register, otp) ──────────────────────────────── */
/* El contenedor llena el viewport para que el degradado azul ocupe toda
   la pantalla, pero el contenido se CENTRA verticalmente (antes había un
   `.spacer { flex: 1 }` que empujaba el form al fondo y dejaba un hueco
   vacío enorme arriba). Los elementos quedan agrupados de forma natural
   en un solo bloque vertical. */
.onboard {
  display: flex; flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px var(--space-6);
  padding-top: calc(24px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #0f2147 0%, var(--boe) 100%);
  color: #fff;
}
.onboard .logo {
  width: 72px; height: 72px; border-radius: var(--radius-xl);
  background: var(--surface);
  color: var(--boe);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800;
  margin-bottom: var(--space-3);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.4);
}
.onboard h1 { font-size: 26px; margin-bottom: 4px; letter-spacing: -0.02em; }
.onboard .lead { font-size: 14px; color: #cbd5e1; margin-bottom: var(--space-4); }
/* Legacy: algunos templates ponen `.spacer` entre título y form. Con el
   nuevo layout centrado ya no hace falta — lo neutralizamos para no
   reintroducir el hueco vacío. */
.onboard .spacer { display: none; }
.onboard input[type="email"],
.onboard input[type="password"],
.onboard input[type="text"] {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  border-radius: var(--radius);
  padding: 14px var(--space-4);
  font-size: 15px;
  width: 100%;
  margin-bottom: 10px;
}
.onboard input::placeholder { color: rgba(255,255,255,.55); }
.onboard .btn-onboard {
  background: var(--gold);
  color: #fff;
  padding: 15px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  margin-top: var(--space-2);
  display: block;
  width: 100%;
}
.onboard .link {
  text-align: center;
  margin-top: var(--space-3);
  font-size: 13px;
  color: #cbd5e1;
}
.onboard .link a { color: #fff; text-decoration: underline; }
.onboard .otp-row {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin: var(--space-4) 0;
}
.onboard .otp-row input {
  width: 44px; height: 52px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  border-radius: 10px;
  margin: 0;
}
.onboard .msg-err {
  background: rgba(220,38,38,.2);
  border: 1px solid rgba(220,38,38,.4);
  border-radius: var(--radius-sm);
  padding: 10px var(--space-3);
  font-size: 13px;
  margin-bottom: var(--space-3);
}
.onboard .msg-ok {
  background: rgba(22,163,74,.2);
  border: 1px solid rgba(22,163,74,.4);
  border-radius: var(--radius-sm);
  padding: 10px var(--space-3);
  font-size: 13px;
  margin-bottom: var(--space-3);
}

/* ── Alertas (cierres inminentes) ────────────────────────────────────── */
.alert-card {
  background: linear-gradient(135deg, #fef2f2 0%, var(--danger-soft) 100%);
  border: 1px solid #fecaca;
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  display: block;
  color: inherit;
}
.alert-card.warn { background: linear-gradient(135deg, #fff7ed 0%, var(--warn-soft) 100%); border-color: #fed7aa; }
.alert-card .ttl { font-size: 13px; font-weight: 700; color: var(--danger); margin-bottom: 2px; }
.alert-card.warn .ttl { color: var(--warn); }
.alert-card .sub { font-size: 12px; color: var(--ink-mute); }

/* ── Documentos (PDF tile) ───────────────────────────────────────────── */
.doc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--space-2);
  color: inherit;
}
.doc .ic {
  width: 36px; height: 36px;
  background: var(--danger-soft);
  color: var(--danger);
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font-weight: 700;
  font-size: 11px;
}
.doc.premium .ic { background: var(--gold); color: #fff; }
.doc .body { flex: 1; min-width: 0; }
.doc .name {
  font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc .meta { font-size: 11px; color: var(--ink-mute); }
.doc .arrow { color: var(--ink-mute); font-size: 18px; }

/* ── Paywall (dentro de sheet) ───────────────────────────────────────── */
.paywall-hook { color: var(--ink-mute); font-size: 13px; margin-bottom: var(--space-4); }
.price-cards { display: grid; gap: 10px; margin-bottom: var(--space-3); }
.price-card {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  position: relative;
  background: var(--surface);
}
.price-card.hi {
  border-color: var(--gold);
  background: #fffbeb;
}
.price-card .tag {
  position: absolute;
  top: -10px; right: 14px;
  background: var(--gold);
  color: #fff;
  font-size: 10px;
  padding: 3px var(--space-2);
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.price-card .name { font-weight: 700; font-size: 15px; }
.price-card .desc { font-size: 12px; color: var(--ink-mute); margin: 2px 0 6px; }
.price-card .price { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.price-card .price small {
  font-size: 12px; font-weight: 600; color: var(--ink-mute);
}

/* ── Toast (update PWA, errores, etc.) ───────────────────────────────── */
.toast {
  position: fixed;
  left: var(--space-4); right: var(--space-4);
  bottom: calc(var(--nav-h) + var(--space-4));
  bottom: calc(var(--nav-h) + var(--space-4) + env(safe-area-inset-bottom));
  background: var(--ink);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: 14px;
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-md);
  z-index: 60;
  animation: slide-up 220ms cubic-bezier(.2,.9,.3,1);
}
.toast[hidden] { display: none; }
.toast button {
  background: var(--gold);
  color: #fff;
  padding: 6px var(--space-3);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
}

/* ── Forms ───────────────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--space-3); }
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
  color: var(--ink);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: 2px solid var(--boe-soft);
  border-color: var(--boe);
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: 40px var(--space-4);
  color: var(--ink-mute);
}
.empty .icon { font-size: 36px; margin-bottom: var(--space-2); opacity: .5; }
.empty h3 { font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.empty p { font-size: 13px; }

/* ── PWA install banner ─────────────────────────────────────────────── */
#pwa-install-banner {
  position: fixed;
  left: var(--space-3);
  right: var(--space-3);
  bottom: calc(var(--nav-h) + var(--space-3) + env(safe-area-inset-bottom));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 55;
  animation: slide-up 260ms cubic-bezier(.2,.9,.3,1);
}
.pwa-banner-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
}
.pwa-banner-icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}
.pwa-banner-body { flex: 1; min-width: 0; }
.pwa-banner-title { font-size: 14px; font-weight: 700; }
.pwa-banner-desc { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }
.pwa-banner-actions {
  display: flex; gap: var(--space-2); align-items: center;
  flex: 0 0 auto;
}
.pwa-banner-primary {
  background: var(--gold); color: #fff;
  padding: 8px var(--space-3);
  border-radius: 10px;
  font-weight: 700; font-size: 13px;
}
.pwa-banner-primary:active { background: var(--gold-2); }
.pwa-banner-dismiss {
  background: transparent;
  color: var(--ink-mute);
  width: 32px; height: 32px;
  border-radius: 8px;
  font-size: 16px;
}
.pwa-banner-dismiss:active { background: var(--line-soft); }

/* ── Responsive: pantallas pequeñas (< 360px) ────────────────────────── */
@media (max-width: 360px) {
  .content { padding: var(--space-3); }
  .hero { margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-3); }
  .kpi .val { font-size: 16px; }
  .bottom-nav a { font-size: 10px; }
}

/* ── Dark mode (auto, respeta preferencia del sistema) ───────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f1f5f9;
    --ink-soft: #cbd5e1;
    --ink-mute: #94a3b8;
    --ink-light: #64748b;
    --line: #334155;
    --line-soft: #1e293b;
    --bg: #0f172a;
    --surface: #1e293b;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 4px 12px -4px rgba(0,0,0,.4);
  }
  .chip { background: var(--surface); color: var(--ink-soft); border-color: var(--line); }
  .card.gold { background: linear-gradient(135deg, #3a2a08 0%, #4a3611 100%); border-color: #78590e; }
  .alert-card { background: linear-gradient(135deg, #3a1a1a 0%, #4a2020 100%); border-color: #7f3131; }
  .segments { background: var(--line-soft); }
  .segments .seg.active { background: var(--surface); }
  .sheet { background: var(--surface); }
  .price-card.hi { background: #3a2a08; }
  .onboard { background: linear-gradient(180deg, #000814 0%, #001d3d 100%); }
}