/* ============================================================
   Mi Casa+ — Design system
   Paleta azul elegante y moderna, minimalista — reemplaza la identidad
   terracota original a pedido del usuario ("ya no nos gusta esa paleta").
   --brand/--ink/--surface (el sistema viejo, usado en botones, sidebar,
   formularios, etc.) quedan apuntando a esta misma paleta azul, así que
   TODA la app se retematiza de una — no solo las pantallas ya "aplanadas"
   al lenguaje M3.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Marca: azul oscuro y elegante, familia "Facebook" pero más profundo */
  --brand: #1B4F91;
  --brand-dark: #123A6B;
  --brand-darker: #0B2547;
  --brand-light: #D4E2FF;

  /* Estado: se mantienen (rojo/ámbar/verde son universales para vencido/
     pendiente/pagado) pero ahora conviven con neutros fríos en vez de cálidos. */
  --green: #1E7245;
  --green-light: #E3F3E9;
  --amber: #93590A;
  --amber-light: #FFF2DE;
  --red: #C1392B;
  --red-light: #FBE7E2;
  --blue: #1B4F91;

  /* Versión vibrante de los colores de estado, solo para gráficos/leyendas —
     los de arriba están pensados para texto sobre fondo claro (por eso se ven
     apagados), estos son rellenos de forma y pueden ser más vivos. */
  --chart-green: #2FA968;
  --chart-amber: #F59E0B;
  --chart-red: #E4572E;

  /* Neutros fríos y minimalistas (gris con un dejo de azul, no gris-café) */
  --ink: #1B1D22;
  --ink-2: #4B4E57;
  --ink-3: #82858E;
  --surface: #FCFCFF;
  --surface-2: #F4F5FA;
  --surface-3: #EBECF3;
  --border: #DDDFE6;

  /* ---------- Material Design 3 (tokens tonales, derivados del azul nuevo)
     — se usan en los componentes que se están acercando al lenguaje visual
     nativo de Android: chips, segmented buttons, barra inferior, y las
     tarjetas de recibo/arriendo pendiente con su anillo de urgencia. */
  --primary: #1B4F91; --on-primary: #FFFFFF; --primary-container: #D4E2FF; --on-primary-container: #001A41;
  --secondary: #93590A; --secondary-container: #FFDDAF; --on-secondary-container: #2C1600;
  --tertiary: #1E7245; --tertiary-container: #B4F1BC; --on-tertiary-container: #00210A;
  --error: #BA1B1B; --error-container: #FFDAD4; --on-error-container: #410001;
  --m3-surface: #FCFCFF; --surface-container-low: #F6F7FB; --surface-container: #F0F1F7;
  --surface-container-high: #E9EBF2; --surface-dim: #DCDEE6;
  --outline: #74777F; --outline-variant: #C4C6D0;
  --on-surface: #1B1D22; --on-surface-variant: #45474F;

  /* Urgencia de vencimiento (recibos y arriendos) — colorean el anillo de
     progreso y el texto de estado de cada tarjeta pendiente. */
  --u-critico: #B3261E;  /* vencido */
  --u-urgente: #C1531B;  /* 0-4 días */
  --u-moderado: #A8790A; /* 5-9 días */
  --u-tranquilo: #2E7D5B; /* 10+ días */

  /* Tipografía: Fraunces (serif cálida) para marca/títulos, Inter para el resto */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* Forma */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(20,22,31,0.07);
  --shadow-md: 0 10px 30px rgba(20,22,31,0.10);
  --shadow-lg: 0 24px 64px rgba(20,22,31,0.22);

  /* Layout */
  --sidebar-w: 236px;
  --bottomnav-h: 72px;
  --adbanner-h: 50px;
  /* --bottomnav-h de arriba es solo el alto del CONTENIDO del menú
     (íconos + etiqueta) — el aire de la barra del sistema (gestos o los
     3 botones clásicos de Android) se SUMA aparte, no se lo resta a ese
     alto fijo. Antes el propio --safe-area-inset-bottom se comía parte
     de esos 72px vía padding-bottom, y en un teléfono con navegación de
     3 botones (barra real de ~47px) el contenido quedaba aplastado en
     apenas ~25px — de ahí que los íconos se vieran "por fuera" del
     menú. --bottomnav-total-h es el alto REAL renderizado (contenido +
     aire de sistema) y es lo que debe usar cualquier otro elemento que
     necesite ubicarse "encima del menú" (el FAB, los toasts, el
     contenido, el espacio publicitario) — nunca --bottomnav-h solo. */
  --safe-bottom: max(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)), 10px);
  --bottomnav-total-h: calc(var(--bottomnav-h) + var(--safe-bottom));

  font-size: 16px;
}

/* Tema oscuro: se activa (a) si el usuario elige "Oscuro" explícitamente en
   Configuración → Perfil (data-theme="dark", ver Theme en js/store.js), o
   (b) por defecto, si su sistema operativo está en oscuro y no ha elegido
   "Claro" explícitamente. */
:root[data-theme="dark"] {
  /* El usuario pidió que en oscuro el azul NO se vea pálido/celeste — se
     queda con un azul profundo parecido al de modo claro (como hacen
     WhatsApp/Facebook: la barra de marca no se aclara en modo oscuro, solo
     el resto de la interfaz), con texto blanco encima. */
  --brand: #2C5CA6;
  --brand-dark: #1E4278;
  --brand-darker: #0A1628;
  --brand-light: #16345E;

  --green: #8FCB6B;
  --green-light: #21301A;
  --amber: #FFB454;
  --amber-light: #3A2A0E;
  --red: #FF7A5C;
  --blue: #2C5CA6;
  --red-light: #3A1F18;

  --ink: #E7E9F0;
  --ink-2: #B8BAC5;
  --ink-3: #8A8D97;
  --surface: #14161B;
  --surface-2: #1A1C22;
  --surface-3: #22242C;
  --border: #34363F;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.35);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.5);

  --primary: #2C5CA6; --on-primary: #FFFFFF; --primary-container: #16345E; --on-primary-container: #D4E2FF;
  --secondary: #FFB951; --secondary-container: #6B3D00; --on-secondary-container: #FFDDAF;
  --tertiary: #98D5A0; --tertiary-container: #15512A; --on-tertiary-container: #B4F1BC;
  --error: #FFB4A9; --error-container: #930006; --on-error-container: #FFDAD4;
  --m3-surface: #121316; --surface-container-low: #1A1B1F; --surface-container: #1E2024;
  --surface-container-high: #292A2F; --surface-dim: #101113;
  --outline: #8E9099; --outline-variant: #43454B;
  --on-surface: #E3E2E6; --on-surface-variant: #C6C6D0;

  --u-critico: #FF5449;
  --u-urgente: #FFA65C;
  --u-moderado: #E0B23D;
  --u-tranquilo: #6FCF8F;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --brand: #2C5CA6;
    --brand-dark: #1E4278;
    --brand-darker: #0A1628;
    --brand-light: #16345E;

    --green: #8FCB6B;
    --green-light: #21301A;
    --amber: #FFB454;
    --amber-light: #3A2A0E;
    --red: #FF7A5C;
    --blue: #2C5CA6;
    --red-light: #3A1F18;

    --ink: #E7E9F0;
    --ink-2: #B8BAC5;
    --ink-3: #8A8D97;
    --surface: #14161B;
    --surface-2: #1A1C22;
    --surface-3: #22242C;
    --border: #34363F;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.35);
    --shadow-lg: 0 24px 64px rgba(0,0,0,0.5);

    --primary: #2C5CA6; --on-primary: #FFFFFF; --primary-container: #16345E; --on-primary-container: #D4E2FF;
    --secondary: #FFB951; --secondary-container: #6B3D00; --on-secondary-container: #FFDDAF;
    --tertiary: #98D5A0; --tertiary-container: #15512A; --on-tertiary-container: #B4F1BC;
    --error: #FFB4A9; --error-container: #930006; --on-error-container: #FFDAD4;
    --m3-surface: #121316; --surface-container-low: #1A1B1F; --surface-container: #1E2024;
    --surface-container-high: #292A2F; --surface-dim: #101113;
    --outline: #8E9099; --outline-variant: #43454B;
    --on-surface: #E3E2E6; --on-surface-variant: #C6C6D0;

    --u-critico: #FF5449;
    --u-urgente: #FFA65C;
    --u-moderado: #E0B23D;
    --u-tranquilo: #6FCF8F;
  }
}

html, body { height: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--surface-2);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button { font-family: inherit; color: inherit; background: none; border: none; }
img, svg { display: block; max-width: 100%; }

/* Foco accesible visible para todos los usuarios (teclado) */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* ============================================================
   Pantalla de autenticación
   ============================================================ */

/* Rediseño estilo M3 nativo: sin tarjeta blanca flotando — el formulario
   vive directo sobre el fondo, con dos manchas orgánicas suaves en las
   esquinas (mismo azul de marca, muy tenue) en vez del degradado radial
   de antes, para que se sienta como una pantalla de app y no como un
   formulario web centrado en una tarjeta. */
.auth-page {
  min-height: 100vh; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--m3-surface);
  /* Mismo motivo que .topbar — que el fondo llegue detrás del notch/barra
     de estado sin que el contenido quede tapado por sus íconos.
     var(--safe-area-inset-top, ...) primero: es la variable que el plugin
     nativo SystemBars de Capacitor 8 inyecta de verdad (ver nota en
     .topbar más abajo); env() queda de respaldo si esa variable no existe
     (navegador normal, o una versión de Capacitor que sí soporte env()
     nativo). */
  padding-top: calc(24px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
}
.auth-page::before, .auth-page::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  background: var(--primary-container); opacity: .55;
}
.auth-page::before {
  width: 340px; height: 340px; top: -150px; left: -150px;
  border-radius: 46% 54% 62% 38% / 54% 42% 58% 46%;
}
.auth-page::after {
  width: 300px; height: 300px; bottom: -140px; right: -130px;
  border-radius: 58% 42% 40% 60% / 46% 56% 44% 54%;
}

.auth-card {
  width: 100%; max-width: 380px; position: relative; z-index: 1;
  padding: 16px 8px;
}

.auth-brand { text-align: center; margin-bottom: 28px; }
/* Ícono real de la app — ya viene con su propio fondo y esquinas
   redondeadas diseñadas, así que acá solo se muestra a un buen tamaño con
   una sombra suave, sin recortarlo ni ponerle otro fondo encima. */
.auth-brand .logo-mark { width: 92px; height: 92px; margin: 0 auto 14px; }
.auth-brand .logo-mark img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 6px 14px rgba(8,22,59,.28)); }
.auth-brand h1 { font-size: 27px; font-weight: 800; color: var(--on-surface); letter-spacing: -.01em; }
.auth-brand p { font-size: 13.5px; color: var(--on-surface-variant); margin-top: 5px; }

.auth-tabs {
  display: flex; background: var(--surface-container); border-radius: 999px;
  padding: 5px; margin-bottom: 26px;
}
.auth-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 0; border: none; background: none;
  border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--on-surface-variant);
  cursor: pointer; transition: all .15s ease;
}
.auth-tab i { font-size: 16px; }
.auth-tab.active { background: var(--primary-container); color: var(--on-primary-container); }
.auth-card .btn-block { border-radius: 14px; min-height: 50px; font-size: 14.5px; }

/* Cuentas guardadas en este dispositivo ("recordar mi cuenta", selector
   tipo Facebook en el Login) — hasta 2 tarjetas, cada una entra de un toque
   sin pedir correo ni contraseña; la "x" la quita de este dispositivo. */
.cuenta-guardada-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--surface-container-low); border-radius: 14px; margin-bottom: 8px;
  cursor: pointer; transition: background .12s ease; text-align: left;
}
.cuenta-guardada-card:hover { background: var(--surface-container); }
.cuenta-guardada-icon {
  width: 42px; height: 42px; border-radius: 50%; background: var(--primary-container); color: var(--on-primary-container);
  display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0;
}
.cuenta-guardada-info { flex: 1; min-width: 0; }
.cuenta-guardada-nombre {
  font-size: 15px; font-weight: 700; color: var(--on-surface);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cuenta-guardada-email {
  font-size: 12px; color: var(--on-surface-variant); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cuenta-guardada-x {
  width: 30px; height: 30px; border-radius: 50%; border: none; background: none; color: var(--on-surface-variant);
  display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; cursor: pointer;
}
.cuenta-guardada-x:hover { background: var(--surface-container-high); color: var(--on-surface); }

/* Paneles secundarios (verificar correo, recuperar/restablecer contraseña)
   — mismo lenguaje visual que la marca principal: insignia circular en el
   color de marca en vez de texto suelto. */
.auth-panel-icon {
  width: 60px; height: 60px; border-radius: 50%; background: var(--primary-container); color: var(--on-primary-container);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 27px;
}
.auth-panel-titulo { font-size: 17px; font-weight: 800; color: var(--on-surface); margin-bottom: 16px; text-align: center; }
.auth-panel-desc { font-size: 13px; color: var(--on-surface-variant); line-height: 1.6; margin-bottom: 22px; text-align: center; }

/* Código de verificación de dispositivo: un cuadro por dígito, agrupados
   000 - 000, estilo app nativa en vez de un solo campo de texto largo. */
.otp-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 20px; }
.otp-box {
  width: 44px; height: 54px; text-align: center; font-size: 21px; font-weight: 800;
  border: 1.5px solid var(--outline-variant); border-radius: 12px; background: var(--surface-container-low);
  color: var(--on-surface); font-family: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.otp-box:focus { border-color: var(--primary); background: var(--surface); outline: none; }
.otp-sep { color: var(--on-surface-variant); font-size: 18px; font-weight: 700; }

.field { margin-bottom: 16px; }
.field .selector-wrap { margin-bottom: 0; }
.field label {
  display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-2);
  margin-bottom: 6px; letter-spacing: .02em;
}
.field-hint { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }

.input, select.input {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: 15px; font-family: inherit; color: var(--ink);
  transition: border-color .15s ease, background .15s ease;
}
.input::placeholder { color: var(--ink-3); }
.input:focus { border-color: var(--brand); background: var(--surface); outline: none; }
/* Nombre/URL autocompletados al elegir una compañía conocida — bloqueados
   a propósito (ver elegirCompania en casa.html), con un aspecto visual
   distinto para que se note que no se pueden editar directamente. */
.input[readonly] { background: var(--surface-3); color: var(--ink-2); cursor: not-allowed; }
.input[readonly]:focus { border-color: var(--border); background: var(--surface-3); }
.input-icon-wrap { position: relative; }
.input-icon-wrap .input { padding-left: 40px; }
.input-icon-wrap i {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); font-size: 17px;
}
.input-icon-wrap .input-currency {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); font-size: 15px; font-weight: 700; pointer-events: none;
}

.color-picker { position: relative; }
.color-picker-trigger {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: 15px; font-family: inherit; color: var(--ink); cursor: pointer;
}
.color-picker-trigger i { margin-left: auto; color: var(--ink-3); font-size: 15px; }
.color-dot {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--border);
}
.color-dot.none { background: var(--surface-3); }
.color-picker-pop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  padding: 10px; display: none; flex-wrap: wrap; gap: 8px; z-index: 20;
}
.color-picker-pop.open { display: flex; }
.color-swatch {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; padding: 0;
  transition: transform .1s ease;
}
.color-swatch:hover { transform: scale(1.12); }
.color-swatch.none { background: var(--surface-3); color: var(--ink-3); border-color: var(--border); }
.pw-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--ink-3); cursor: pointer;
  padding: 6px; font-size: 17px; border-radius: 8px;
}
.pw-toggle:hover { background: var(--surface-3); color: var(--ink-2); }

.error-msg {
  color: var(--red); font-size: 12.5px; font-weight: 600;
  min-height: 16px; margin-top: 2px;
}
.error-msg:empty { display: none; }

.auth-foot {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--primary-container); color: var(--on-primary-container);
  border-radius: 14px; padding: 14px 16px; margin-top: 22px; font-size: 12px; line-height: 1.5;
}
.auth-foot-icon {
  width: 32px; height: 32px; border-radius: 50%; background: var(--surface); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
}

/* ============================================================
   Botones
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 18px; min-height: 44px;
  border-radius: var(--radius-sm); font-size: 14px; font-weight: 700;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--ink-2);
  cursor: pointer; transition: all .15s ease; white-space: nowrap;
}
.btn:hover { background: var(--surface-3); border-color: #D4D8E4; }
.btn:active { transform: translateY(1px); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 13px; min-height: 36px; font-size: 12.5px; }

.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

.btn-danger { color: var(--red); }
.btn-danger:hover { background: var(--red-light); border-color: var(--red); }

.btn-danger-solid { background: var(--red); border-color: var(--red); color: #fff; }
.btn-danger-solid:hover { background: #B92E2E; border-color: #B92E2E; }

.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--surface-3); }

.btn-icon {
  width: 44px; height: 44px; padding: 0; border-radius: 12px; font-size: 18px;
}

/* ============================================================
   App shell (sidebar + topbar + contenido)
   ============================================================ */

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

/* Sidebar en tema claro: grises neutros con el ítem activo en azul clarito
   (el diseño "oscuro/azul de marca" de abajo queda solo para tema oscuro —
   ver los bloques :root[data-theme="dark"] / prefers-color-scheme más abajo). */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar-brand { padding: 24px 20px 18px; display: flex; align-items: center; gap: 11px; }
.sidebar-brand .logo-mark {
  width: 38px; height: 38px; border-radius: 10px; background: var(--brand-light);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sidebar-brand .logo-mark img { width: 27px; height: 27px; object-fit: contain; display: block; }
.sidebar-brand .logo-name { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink); line-height: 1.15; }
.sidebar-brand .logo-tag { font-size: 10.5px; color: var(--ink-3); margin-top: 1px; }

.sidebar-nav { padding: 10px 12px; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 11px; cursor: pointer; text-decoration: none;
  color: var(--ink-2); font-size: 14px; font-weight: 600;
  transition: all .15s ease; border: none; background: none; width: 100%; text-align: left;
}
.nav-item i { font-size: 19px; flex-shrink: 0; }
.nav-item:hover { background: var(--surface-3); color: var(--ink); }
.nav-item.active { background: var(--primary-container); color: var(--on-primary-container); }

/* Insignia con el número de invitaciones de colaboración pendientes — se
   agrega junto al ítem "Configuración" del menú (sidebar y navegación
   inferior), ver CasaYaUI._actualizarBadgeInvitaciones(). */
.nav-badge {
  background: var(--red); color: #fff; font-size: 10px; font-weight: 800;
  min-width: 17px; height: 17px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}
.nav-item .nav-badge { margin-left: auto; }
.bn-icon-wrap { position: relative; display: inline-flex; }
.bn-icon-wrap .nav-badge { position: absolute; top: -5px; right: -9px; }

/* Bloqueo mientras una navegación suave está en curso (ver navigateTo() en
   components.js) — evita que se puedan tocar varios ítems del menú seguidos
   y disparar varias navegaciones a la vez. */
#sidebar-root.nav-bloqueada .nav-item, #bottomnav-root.nav-bloqueada .bn-item {
  pointer-events: none; opacity: .5; transition: opacity .12s ease;
}

.sidebar-user {
  padding: 14px; margin: 10px; border-radius: 12px; background: var(--surface-3);
  display: flex; align-items: center; gap: 10px;
}
.avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  font-weight: 800; color: #fff; flex-shrink: 0;
}
.sidebar-user .user-name { font-size: 13px; color: var(--ink); font-weight: 700; }
.sidebar-user .logout-link {
  font-size: 11.5px; color: var(--ink-3); cursor: pointer; background: none;
  border: none; padding: 0; text-align: left; font-family: inherit;
}
.sidebar-user .logout-link:hover { color: var(--ink); text-decoration: underline; }

/* Tema oscuro: el sidebar vuelve al gradiente azul de marca (diseño original,
   sin cambios) — el usuario pidió tocar solo la versión clara. Mismo patrón
   que las variables de :root de arriba: un bloque para cuando el usuario
   elige "Oscuro" explícitamente, y otro (envuelto en el media query, para no
   pisar el tema claro) para cuando sigue el tema del sistema y ese es oscuro. */
:root[data-theme="dark"] .sidebar { background: linear-gradient(180deg, var(--brand-darker), #060D1A); border-right: none; }
:root[data-theme="dark"] .sidebar-brand .logo-mark { background: rgba(255,255,255,0.12); }
:root[data-theme="dark"] .sidebar-brand .logo-name { color: #fff; }
:root[data-theme="dark"] .sidebar-brand .logo-tag { color: rgba(255,255,255,0.5); }
:root[data-theme="dark"] .nav-item { color: rgba(255,255,255,0.62); }
:root[data-theme="dark"] .nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
:root[data-theme="dark"] .nav-item.active { background: rgba(255,255,255,0.16); color: #fff; }
:root[data-theme="dark"] .sidebar-user { background: rgba(255,255,255,0.06); }
:root[data-theme="dark"] .avatar { background: rgba(255,255,255,0.22); }
:root[data-theme="dark"] .sidebar-user .user-name { color: #fff; }
:root[data-theme="dark"] .sidebar-user .logout-link { color: rgba(255,255,255,0.5); }
:root[data-theme="dark"] .sidebar-user .logout-link:hover { color: #fff; }

/* Los íconos del menú inferior son PNG de línea en un solo color oscuro —
   en modo oscuro, sobre fondo oscuro (activo o no), quedarían casi
   invisibles. Se invierten a claro solo en modo oscuro; en modo claro se
   quedan tal cual los subió el usuario. */
:root[data-theme="dark"] .bn-item img { filter: invert(1) grayscale(1) brightness(1.8); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .bn-item img { filter: invert(1) grayscale(1) brightness(1.8); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sidebar { background: linear-gradient(180deg, var(--brand-darker), #060D1A); border-right: none; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sidebar-brand .logo-mark { background: rgba(255,255,255,0.12); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sidebar-brand .logo-name { color: #fff; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sidebar-brand .logo-tag { color: rgba(255,255,255,0.5); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .nav-item { color: rgba(255,255,255,0.62); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .nav-item.active { background: rgba(255,255,255,0.16); color: #fff; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sidebar-user { background: rgba(255,255,255,0.06); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .avatar { background: rgba(255,255,255,0.22); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sidebar-user .user-name { color: #fff; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sidebar-user .logout-link { color: rgba(255,255,255,0.5); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sidebar-user .logout-link:hover { color: #fff; }
}

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

/* Barra de app nativa: color sólido y vivo, IGUAL en todas las pantallas —
   antes solo Inicio tenía el degradado ("hero") y el resto quedaba blanco,
   así que cambiar de sección se sentía como cambiar de app. Ahora el header
   nunca cambia de aspecto, como pidió el usuario (estilo Facebook: el menú
   y el encabezado quedan fijos, solo cambia el título). */
/* La esquina redondeada vive en el propio topbar (borde inferior) y no en
   la hoja de contenido que hay debajo — el topbar es sticky (se queda fijo
   arriba), así que esa esquina se ve siempre, sin importar cuánto se haga
   scroll. Si la redondeara la hoja (que es contenido normal, se desplaza),
   la esquina se perdería de vista en cuanto el usuario bajara el scroll. */
.topbar {
  flex-shrink: 0; padding: 16px 28px 20px; border-radius: 0 0 24px 24px;
  display: flex; flex-direction: column;
  background: var(--primary); border-bottom: none;
  position: sticky; top: 0; z-index: 20; box-shadow: none;
  /* El fondo azul sube hasta el borde real de la pantalla (detrás del
     notch/barra de estado, en dispositivos con WebView lo bastante nueva
     para pasar los insets — ver viewport-fit=cover en cada página); este
     padding extra empuja el CONTENIDO (saludo, botón) para que no quede
     tapado por los íconos de la barra de estado.
     var(--safe-area-inset-top, ...) primero: el plugin nativo SystemBars
     de Capacitor 8 (bundled en @capacitor/android, no hay que instalar
     nada aparte) inyecta el valor real ahí, vía JS, no como env() nativo
     — probado en dispositivo real: con solo env() el contenido quedaba
     tapado por los íconos de la barra de estado porque siempre caía al
     valor de respaldo (0px). env() se deja como segundo respaldo por si
     algún WebView sí expone el env() nativo; 0px al final, para
     navegadores/WebViews sin ninguna de las dos. */
  padding-top: calc(16px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
}
.topbar-top-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.topbar-back-row { display: none; align-items: center; gap: 8px; margin-top: 10px; }
.topbar-back {
  display: none; align-items: center; gap: 4px; color: rgba(255,255,255,.85);
  font-size: 12.5px; font-weight: 700; text-decoration: none; flex-shrink: 0;
}
.topbar-back i { font-size: 15px; }
.topbar-acciones { display: flex; gap: 6px; flex-shrink: 0; }
.topbar-icon-btn {
  width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.16); border: none; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; flex-shrink: 0;
}
.topbar-icon-btn:hover { background: rgba(255,255,255,.26); }
.topbar-title {
  font-size: 21px; font-weight: 700; color: var(--on-primary); line-height: 1.25;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.topbar-sub { font-size: 13px; color: rgba(255,255,255,.8); margin-top: 3px; }

.topbar-notif { position: relative; flex-shrink: 0; }
.topbar-bell {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.16); border: none; color: var(--on-primary);
  display: flex; align-items: center; justify-content: center; font-size: 21px; cursor: pointer;
}
.topbar-bell:hover { background: rgba(255,255,255,.26); }
.topbar-bell .nav-badge { position: absolute; top: -3px; right: -3px; }

/* Panel desplegable de la campana — mismo overlay/z-index en cualquier página,
   con los recibos y arriendos vencidos (lo mismo que cuenta el badge). */
.notif-panel {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 200;
  width: 320px; max-width: 86vw; max-height: 420px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 6px;
}
.notif-panel.open { display: block; }
.notif-panel-titulo {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); padding: 8px 10px 6px;
}
.notif-panel-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm);
  text-decoration: none; color: inherit;
}
.notif-panel-item:hover { background: var(--surface-2); }
.notif-panel-item i { font-size: 18px; color: var(--red); flex-shrink: 0; width: 22px; text-align: center; }
.notif-panel-item.invitacion i { color: var(--brand); }
.notif-panel-info { min-width: 0; flex: 1; }
.notif-panel-invitacion-btns { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.notif-panel-nombre { font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-panel-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.notif-panel-empty { padding: 22px 16px; text-align: center; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.notif-panel-vertodo {
  display: block; text-align: center; padding: 10px; margin-top: 4px; border-top: 1px solid var(--border);
  font-size: 12.5px; font-weight: 700; color: var(--brand); text-decoration: none;
}
.notif-panel-vertodo:hover { text-decoration: underline; }

/* .content ya se estira para llenar el alto disponible bajo el topbar
   (flex:1 dentro de .main), pero .pagina-sheet adentro no lo heredaba —
   en pantallas con poco contenido (p. ej. Configuración) se quedaba con su
   alto natural y dejaba ver el gris de body debajo, dos tonos distintos en
   la misma pantalla. display:flex acá + flex:1 en .pagina-sheet hace que
   la hoja siempre llegue hasta abajo, tenga o no suficiente contenido. */
.content {
  flex: 1; padding: 26px 28px 48px; max-width: 1080px; width: 100%; margin: 0 auto;
  display: flex; flex-direction: column;
}

/* ============================================================
   Esqueleto de carga — se muestra en #page-content apenas se toca un
   enlace, antes de que llegue la respuesta del fetch (ver navigateTo() en
   components.js), para que nunca se vea la pantalla en blanco.
   ============================================================ */
.skel-page { padding-top: 2px; }
.skel {
  background: linear-gradient(90deg, var(--surface-container) 25%, var(--surface-container-high) 37%, var(--surface-container) 63%);
  background-size: 400% 100%;
  animation: skel-brillo 1.4s ease infinite;
  border-radius: 10px;
}
@keyframes skel-brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skel-bar-lg { height: 22px; width: 55%; margin-bottom: 22px; }
.skel-row { display: flex; gap: 8px; margin-bottom: 22px; }
.skel-chip { height: 34px; width: 100px; border-radius: 999px; flex-shrink: 0; }
.skel-card { height: 68px; border-radius: 14px; margin-bottom: 10px; }

/* ============================================================
   Tarjetas de estadística y facturas
   ============================================================ */

/* Resumen de Inicio: donut de Pagadas/Pendientes/Vencidas + leyenda. Las filas
   de la leyenda funcionan como acceso rápido a los mismos filtros que el
   panel de la sección de abajo (mismo Set filtrosActivos). */
.dash-summary {
  display: flex; align-items: center; gap: 18px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 22px; box-shadow: var(--shadow-sm);
}
.dash-donut-wrap { flex-shrink: 0; }
.dash-donut {
  width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background .3s ease;
}
.dash-donut-hole {
  width: 58px; height: 58px; border-radius: 50%; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.dash-donut-total { font-size: 19px; font-weight: 800; color: var(--ink); line-height: 1; }
.dash-donut-total-label { font-size: 8.5px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-top: 3px; }

.dash-summary-legend { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-legend-row {
  display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; border: none;
  background: none; cursor: pointer; width: 100%; font-family: inherit; text-align: left;
}
.dash-legend-row:hover, .dash-legend-row.active { background: var(--surface-2); }
.dash-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dash-legend-label { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--ink-2); min-width: 0; }
.dash-legend-row.active .dash-legend-label { color: var(--ink); }
.dash-legend-count { font-size: 14px; font-weight: 800; color: var(--ink); }

.section-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
.section-title {
  font-size: 12px; font-weight: 800; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .07em;
}

/* Filtro tipo "hoja" desplegable, anclado al ícono — como en apps de e-commerce
   móviles: un botón discreto que despliega los mismos 3 estados como chips. */
.filtro-wrap { position: relative; flex-shrink: 0; }
.filtro-trigger {
  position: relative; background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); cursor: pointer; font-size: 15px; font-family: inherit;
}
.filtro-trigger:hover { border-color: var(--brand); color: var(--brand); }
.filtro-trigger.active { background: var(--primary-container); border-color: var(--brand); color: var(--on-primary-container); }
.filtro-dot {
  position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand); border: 2px solid var(--surface-2); display: none;
}
.filtro-dot.show { display: block; }

.filtro-panel {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; background: var(--surface);
  border: 1px solid var(--outline-variant); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  padding: 8px; display: none; flex-direction: column; gap: 2px; z-index: 20;
}
.filtro-panel.open { display: flex; }
.filtro-panel-title { font-size: 10.5px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px 6px; }
.filtro-chip {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; border: none;
  background: none; color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
  width: 100%; font-family: inherit;
}
.filtro-chip i { font-size: 15px; color: var(--ink-3); width: 18px; text-align: center; flex-shrink: 0; }
.filtro-chip:hover { background: var(--surface-2); }
.filtro-chip.sel { background: var(--primary-container); color: var(--on-primary-container); }
.filtro-chip.sel i { color: var(--on-primary-container); }
.filtro-chip.sel::after { content: '\2713'; margin-left: auto; font-weight: 800; color: var(--on-primary-container); }
.filtro-panel-clear {
  margin-top: 4px; padding: 8px; border-radius: 8px; border: none; background: var(--surface-2);
  color: var(--ink-2); font-size: 12px; font-weight: 700; cursor: pointer; text-align: center; font-family: inherit;
}
.filtro-panel-clear:hover { background: var(--surface-3); }

.bill-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }

.bill-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  border-left-width: 4px; border-left-color: transparent;
  padding: 14px 16px; display: flex; align-items: center; gap: 14px;
  cursor: pointer; text-align: left; width: 100%; font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bill-item:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }

.bill-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  background: var(--brand-light); color: var(--brand);
}
.bill-info { flex: 1; min-width: 0; }
.bill-name { font-size: 14.5px; font-weight: 700; }
.bill-meta { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bill-meta-confirmacion { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.bill-right { text-align: right; flex-shrink: 0; }
.bill-amount { font-size: 14.5px; font-weight: 800; }

.filtro-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.filtro-buscar { flex: 1; margin-bottom: 0; }
.filtro-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
.filtro-grid .field { margin-bottom: 0; }

/* Banner deslizante desde abajo (bottom sheet) para paneles de filtros más
   largos — variante de .overlay/.modal, reutiliza el mismo open/close y el
   cierre con click afuera / Escape que ya maneja CasaYaUI. */
.overlay.sheet { align-items: flex-end; padding: 0; }
.modal.sheet-modal {
  max-width: 480px; border-radius: 20px 20px 0 0; padding: 10px 22px 26px;
  animation: casaya-sheet-up .22s ease;
}
@keyframes casaya-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-handle { width: 40px; height: 4px; background: var(--border); border-radius: 999px; margin: 4px auto 16px; }

.badge {
  font-size: 10.5px; padding: 3px 10px; border-radius: 999px; font-weight: 800;
  margin-top: 5px; display: inline-block; letter-spacing: .01em;
}
.badge-pendiente { background: var(--amber-light); color: var(--amber); }
.badge-pagada { background: var(--green-light); color: var(--green); }
.badge-vencida { background: var(--red-light); color: var(--red); }
.badge-cancelada { background: var(--surface-3); color: var(--ink-3); }

/* ============================================================
   Ideas — sección con identidad propia, distinta del resto de la app
   ============================================================ */

.ideas-page-tag { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; }
.ideas-page-title { font-family: Georgia, 'Times New Roman', serif; font-size: 26px; font-weight: 700; margin-bottom: 22px; }

.ideas-hero {
  background: linear-gradient(135deg, var(--brand-darker), var(--brand-dark));
  color: #fff; border-radius: var(--radius-lg); padding: 30px 26px; margin-bottom: 30px;
  box-shadow: var(--shadow-md);
}
.ideas-hero-icon { font-size: 26px; margin-bottom: 12px; opacity: .9; }
.ideas-hero-tag { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 10px; }
.ideas-hero-title { font-family: Georgia, 'Times New Roman', serif; font-size: 21px; font-weight: 700; line-height: 1.35; margin-bottom: 12px; max-width: 480px; }
.ideas-hero-desc { font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.82); max-width: 480px; }

.ideas-section-title {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 14px;
}

.ideas-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 560px) { .ideas-grid { grid-template-columns: 1fr; } }

.idea-card { border-radius: var(--radius); padding: 16px; border: 1px solid transparent; }
.idea-card-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-bottom: 12px; background: rgba(255,255,255,.6); }
.idea-card-cat { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 6px; }
.idea-card-tip { font-size: 13px; line-height: 1.55; color: var(--ink-2); }

.idea-card.c-brand { background: var(--brand-light); } .idea-card.c-brand .idea-card-icon { color: var(--brand); } .idea-card.c-brand .idea-card-cat { color: var(--brand); }
.idea-card.c-green { background: var(--green-light); } .idea-card.c-green .idea-card-icon { color: var(--green); } .idea-card.c-green .idea-card-cat { color: var(--green); }
.idea-card.c-amber { background: var(--amber-light); } .idea-card.c-amber .idea-card-icon { color: var(--amber); } .idea-card.c-amber .idea-card-cat { color: var(--amber); }
.idea-card.c-red { background: var(--red-light); } .idea-card.c-red .idea-card-icon { color: var(--red); } .idea-card.c-red .idea-card-cat { color: var(--red); }

.empty-msg {
  color: var(--ink-3); font-size: 13.5px; padding: 34px 16px; text-align: center;
  background: var(--surface); border: 1.5px dashed var(--border); border-radius: var(--radius);
  grid-column: 1 / -1;
}

.total-row {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 18px; display: flex; justify-content: space-between; align-items: center;
  margin-top: 2px;
}

/* ============================================================
   Modales
   ============================================================ */

.overlay {
  display: none; position: fixed; inset: 0; background: rgba(10,12,20,0.5);
  z-index: 200; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(2px);
}
.overlay.open { display: flex; }

.modal {
  background: var(--surface); border-radius: var(--radius-lg); padding: 26px;
  width: 100%; max-width: 400px; box-shadow: var(--shadow-lg);
  max-height: 90vh; overflow-y: auto;
  animation: modal-in .18s ease;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.modal-title {
  font-size: 17px; font-weight: 800; margin-bottom: 18px;
  display: flex; justify-content: space-between; align-items: center;
}
.modal-close {
  cursor: pointer; font-size: 20px; background: var(--surface-3); border: none;
  color: var(--ink-2); width: 32px; height: 32px; border-radius: 50%; line-height: 1;
}
.modal-close:hover { background: var(--surface-3); color: var(--ink); }
.modal-btns { display: flex; gap: 10px; margin-top: 8px; }
.modal-btns .btn { flex: 1; }

.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.chip {
  border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 6px;
  text-align: center; cursor: pointer; background: var(--surface-2);
  transition: all .12s ease; min-width: 0;
}
.chip:hover { border-color: var(--brand); }
.chip.sel { border-color: var(--brand); background: var(--primary-container); }
.chip i { font-size: 19px; display: block; margin-bottom: 4px; }
.chip span { font-size: 10.5px; color: var(--ink-2); font-weight: 700; }
.chip.sel i { color: var(--on-primary-container); }
.chip.sel span { color: var(--on-primary-container); }
/* Categoría exclusiva de Premium en el plan Libre — mismo tamaño que un
   chip normal para no saltar de layout, pero apagado y con candado en vez
   del ícono real, para que se note de un vistazo que no se puede elegir. */
.chip-bloqueado { opacity: .5; cursor: pointer; }
.chip-bloqueado:hover { border-color: var(--border); }
.chip-bloqueado i { color: var(--ink-3); }

.detail-hero {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-radius: var(--radius); padding: 20px; margin-bottom: 16px; color: #fff;
}
.dh-svc { font-size: 11.5px; opacity: .8; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.dh-amount { font-size: 30px; font-weight: 800; margin-top: 5px; }
.dh-date { font-size: 12px; opacity: .85; margin-top: 5px; }
.dh-badge {
  display: inline-block; background: rgba(255,255,255,0.22); font-size: 10.5px;
  padding: 4px 12px; border-radius: 999px; margin-top: 10px; font-weight: 800;
}

.info-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 14px; background: var(--surface-2); border-radius: 10px;
}
.info-key { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.info-val { font-size: 13px; font-weight: 700; }

.copy-btn {
  border: none; background: var(--surface-3); color: var(--ink-2);
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px; transition: background .12s ease, color .12s ease;
}
.copy-btn:hover { background: var(--brand-light); color: var(--brand); }
.copy-btn.copied { background: var(--green-light); color: var(--green); }

.alert-pill {
  border-radius: 12px; padding: 12px 14px; display: flex; gap: 10px;
  align-items: flex-start; margin-bottom: 16px; background: var(--amber-light);
}
.alert-pill.danger { background: var(--red-light); }
.alert-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; background: var(--amber); }
.alert-pill.danger .alert-dot { background: var(--red); }
.alert-txt { font-size: 12.5px; line-height: 1.5; font-weight: 700; color: var(--amber); }
.alert-pill.danger .alert-txt { color: var(--red); }

/* ============================================================
   Toggles (switches) y configuración
   ============================================================ */

/* Lista de opciones agrupadas por secciones con una etiqueta chica arriba
   de cada grupo, y cada fila como su propia "píldora" redondeada con un
   hueco fino entre ellas — mismo lenguaje visual que se pidió replicar. */
.config-section { margin-bottom: 22px; display: flex; flex-direction: column; gap: 3px; }
.config-title { font-size: 12.5px; font-weight: 600; color: var(--on-surface-variant); margin: 0 4px 8px; }
.config-item {
  background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: 14px;
  padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 56px;
}
.ci-title { font-size: 14.5px; font-weight: 500; color: var(--on-surface); }
.ci-sub { font-size: 12px; color: var(--on-surface-variant); margin-top: 2px; }
.config-item-icon { font-size: 20px; color: var(--on-surface-variant); width: 24px; text-align: center; flex-shrink: 0; }
.config-item-danger .ci-title, .config-item-danger .config-item-icon { color: var(--error); }

.toggle {
  width: 46px; height: 27px; background: var(--border); border-radius: 999px;
  position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0;
  border: none; outline: none;
}
.toggle.on { background: var(--brand); }
.toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px;
  background: #fff; border-radius: 50%; transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.toggle.on::after { transform: translateX(19px); }

/* ============================================================
   Toasts
   ============================================================ */

.toast-stack {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 400; display: flex; flex-direction: column; gap: 8px; align-items: center;
  width: 100%; max-width: 380px; padding: 0 16px;
}
.toast {
  background: #20222c; color: #fff; padding: 12px 18px; border-radius: 12px;
  font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 9px; width: 100%;
  animation: toast-in .2s ease;
}
.toast.success i { color: #6EE7A8; }
.toast.error i { color: #FF9B9B; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================================================
   Deslizar para actualizar (Inicio, Mis casas — ver
   CasaYaUI.initPullToRefresh en components.js)

   Es una franja normal del flujo del documento (NO position:fixed) metida
   entre el topbar (sticky) y #page-content: mientras arrastras el dedo,
   el JS le va subiendo la altura en línea — eso empuja el contenido hacia
   abajo, revelando el círculo, sin necesidad de transform ni recorte
   sobre el topbar. Vuelve a 0 con esta misma transición al soltar.
   ============================================================ */

.ptr-slot {
  height: 0; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ptr-spinner { position: relative; width: 34px; height: 34px; flex-shrink: 0; }
.ptr-spinner-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ptr-spinner-track { fill: none; stroke: var(--outline-variant); stroke-width: 3; }
.ptr-spinner-arc {
  fill: none; stroke: var(--on-surface-variant); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 94.2;
  stroke-dashoffset: calc(94.2px - (94.2px * var(--ptr-progreso, 0)));
}
.ptr-spinner-icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--on-surface-variant);
  transform: rotate(calc(var(--ptr-progreso, 0) * 360deg));
}
.ptr-slot.cargando .ptr-spinner-arc {
  stroke: var(--brand); stroke-dasharray: 60 94.2; transform-origin: 50% 50%;
  animation: ptr-girar .8s linear infinite;
}
.ptr-slot.cargando .ptr-spinner-icon { display: none; }
@keyframes ptr-girar { to { transform: rotate(360deg); } }

/* ============================================================
   Bottom navigation (móvil)
   ============================================================ */

.bottom-nav { display: none; }
.fab {
  display: none;
}
.ad-banner-slot { display: none; }
/* ============================================================
   Responsivo
   ============================================================ */

@media (max-width: 900px) {
  .sidebar { display: none; }

  .app-shell { display: block; }
  .main { min-height: 100vh; }

  /* Ojo: NO usar el shorthand "padding" acá — pisaría el padding-top con
     el ajuste de zona segura que pone la regla base de .topbar más arriba
     (pasó de verdad: en el teléfono, "Buenas tardes" quedaba tapado por
     los íconos de la barra de estado porque este breakpoint, el que en
     realidad aplica en un celular, resetaba todo el padding a 14px). */
  .topbar {
    padding-left: 16px; padding-right: 16px; padding-bottom: 18px;
    padding-top: calc(14px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
  }
  .topbar-title { font-size: 19px; }
  /* El "+90px"/"+84px" de acá abajo venían calibrados para dejarle espacio
     a un botón flotante (.fab) que en realidad NINGUNA página llega a
     mostrar (quedó del molde de PagaYa, ver .fab más abajo) — por eso se
     veía ese espacio en blanco de más antes de llegar al menú inferior o
     al espacio publicitario, sobre todo notorio en pantallas sin mucho
     contenido. Se deja solo el aire normal, igual al resto de la página. */
  .content { padding: 18px 16px calc(var(--bottomnav-total-h) + 22px); }
  body.con-anuncios .content { padding-bottom: calc(var(--bottomnav-total-h) + var(--adbanner-h) + 22px); }

  #btn-nueva-factura { display: none; }

  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .stats-row.cols3 { grid-template-columns: repeat(3, 1fr); }
  .stat-card { padding: 13px 14px; }
  .stat-num { font-size: 20px; }

  .chips { grid-template-columns: repeat(4, 1fr); }
  .modal { max-width: 420px; }

  .bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    /* El alto total SUMA el aire de la barra del sistema (--safe-bottom)
       en vez de restárselo a los 72px de --bottomnav-h — ver el comentario
       largo junto a --bottomnav-total-h, en :root. Antes, en un teléfono
       con navegación de 3 botones (barra real de ~47px, confirmado con
       SystemBarsPlugin — en uno de gestos suele ser bastante más chica),
       ese aire se comía tanto de los 72px fijos que a los íconos+etiqueta
       casi no les quedaba espacio y terminaban viéndose "por fuera" del
       menú. */
    height: var(--bottomnav-total-h); background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(20,22,31,0.06);
    padding-bottom: var(--safe-bottom);
  }
  .bn-item {
    position: relative; z-index: 1;
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; background: none; border: none; color: var(--on-surface-variant); font-family: inherit;
    font-size: 10.5px; font-weight: 700; cursor: pointer; text-decoration: none;
  }
  .bn-item i { font-size: 26px; }
  /* Un poco más grandes que el ícono de línea (26px vs 34px) porque estos
     PNG traen su propio margen interno — a 26px se verían más chicos que
     antes en vez de más grandes. */
  .bn-item img { width: 34px; height: 34px; object-fit: contain; display: block; position: relative; z-index: 1; }
  .bn-item.active { color: var(--primary); }

  /* Ya no es un círculo detrás del ícono — es una línea delgada pegada al
     borde superior de toda la sección activa (#bn-indicator, ver
     components.js), que se desliza con la Web Animations API animando
     left/width: se estira como un líquido puenteando la sección vieja y la
     nueva, y se rellena al llegar. */
  .bn-icon-wrap { position: relative; z-index: 1; }
  .bn-indicator {
    position: absolute; top: 0; left: 0; width: 64px; height: 3px; border-radius: 0 0 3px 3px;
    background: var(--primary); z-index: 2; pointer-events: none; opacity: 0;
    will-change: left, width;
  }

  .fab {
    display: flex; position: fixed; right: 18px; bottom: calc(var(--bottomnav-total-h) + 18px);
    width: 56px; height: 56px; border-radius: 50%; z-index: 160;
    background: var(--brand); color: #fff; align-items: center; justify-content: center;
    font-size: 24px; border: none; cursor: pointer; box-shadow: 0 8px 24px rgba(27,95,234,0.45);
  }
  .fab:active { transform: scale(.95); }
  body.con-anuncios .fab { bottom: calc(var(--bottomnav-total-h) + var(--adbanner-h) + 18px); }

  .toast-stack { bottom: calc(var(--bottomnav-total-h) + 20px); }
  body.con-anuncios .toast-stack { bottom: calc(var(--bottomnav-total-h) + var(--adbanner-h) + 20px); }

  /* Espacio publicitario (plan Libre) — franja reservada encima del menú
     inferior, para Play Store desde el día 1. En Premium ni se muestra ni
     se reserva el espacio (ver body.con-anuncios, alternado en components.js
     según el plan del usuario). */
  body.con-anuncios .ad-banner-slot {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 0; right: 0; bottom: var(--bottomnav-total-h); z-index: 149;
    height: var(--adbanner-h); background: var(--surface-container);
    border-top: 1px dashed var(--outline-variant);
    font-size: 10.5px; font-weight: 700; color: var(--on-surface-variant);
    letter-spacing: .03em; text-transform: uppercase;
  }
}

@media (max-width: 560px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .auth-card { padding: 16px 4px; }
}

@media (max-width: 420px) {
  .chips { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .chip { padding: 8px 4px; }
}

/* ============================================================
   Mi Casa+ — componentes propios (casas, pisos/inquilinos, calculadora)
   ============================================================ */

/* Lista nativa agrupada (mismo criterio que .urg-list) en vez de una grilla
   de tarjetas individuales — cada casa es una fila completa. */
.casas-list {
  display: flex; flex-direction: column; margin-bottom: 26px;
  border-radius: var(--radius); overflow: hidden;
}

.casa-row {
  display: flex; align-items: center; gap: 14px; padding: 14px;
  background: var(--surface-container-low); text-decoration: none; color: inherit;
  border: 1px solid var(--outline-variant); transition: background .12s ease;
}
.casa-row:hover { background: var(--surface-container); }
/* Bordes de cada fila "colapsados" contra la siguiente (como un borde de
   tabla) — un solo trazo entre items en vez de una línea doble, más
   elegante que un único borde exterior rodeando todo el grupo. */
.casas-list .casa-row + .casa-row { margin-top: -1px; }
.casas-list .casa-row:first-child { border-radius: 14px 14px 0 0; }
.casas-list .casa-row:last-child { border-radius: 0 0 14px 14px; }
.casas-list .casa-row:first-child:last-child { border-radius: 14px; }
.casa-row-icon {
  width: 46px; height: 46px; border-radius: 50%; background: var(--primary-container); color: var(--on-primary-container);
  display: flex; align-items: center; justify-content: center; font-size: 21px; flex-shrink: 0;
}
.casa-row-info { flex: 1; min-width: 0; }
.casa-row-name { font-size: 15px; font-weight: 700; color: var(--on-surface); }
.casa-row-loc { font-size: 12px; color: var(--on-surface-variant); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.casa-row-loc i { font-size: 13px; }
/* Título chico + cantidad debajo (en vez de ícono + "3 piso(s)" en una sola
   línea) — ese texto se cortaba raro en tarjetas angostas. */
.casa-row-stats { display: flex; gap: 18px; margin-top: 8px; }
.casa-row-stat { display: flex; flex-direction: column; }
.casa-row-stat-label { font-size: 10.5px; color: var(--on-surface-variant); font-weight: 600; }
.casa-row-stat-num { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--secondary); font-weight: 800; margin-top: 2px; }
.casa-row-stat-num i { font-size: 15px; }
.casa-row-stat.alerta .casa-row-stat-num { color: var(--error); }
.casa-row-chevron { color: var(--outline); font-size: 20px; flex-shrink: 0; }

/* M3 Segmented Button — contenedor con esquinas totalmente redondeadas,
   el segmento activo relleno en secondary-container. */
.tabs-row {
  display: inline-flex; gap: 0; background: var(--m3-surface); border: 1px solid var(--outline);
  border-radius: 999px; padding: 3px; margin-bottom: 20px;
}
.tab-btn {
  padding: 8px 20px; border: none; background: none; font-size: 13px; font-weight: 700;
  color: var(--on-surface-variant); cursor: pointer; border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
.tab-btn:hover { background: var(--surface-container); }
.tab-btn.active { background: var(--secondary-container); color: var(--on-secondary-container); }
.tab-btn.active:hover { background: var(--secondary-container); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.piso-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.piso-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; }
.piso-block-title { font-size: 14.5px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.piso-block-title i { color: var(--brand); }

.inquilino-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); margin-bottom: 8px;
}
.inquilino-row:last-child { margin-bottom: 0; }
.inquilino-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; flex-shrink: 0;
}
.inquilino-info { flex: 1; min-width: 0; }
.inquilino-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.inquilino-meta { font-size: 11.5px; color: var(--ink-3); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.inquilino-meta.venc-pronto { color: var(--amber); font-weight: 700; }
.inquilino-meta.venc-hoy, .inquilino-meta.venc-vencido { color: var(--red); font-weight: 700; }
.inquilino-actions { display: flex; gap: 4px; flex-shrink: 0; }

.ubic-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; font-weight: 700; color: var(--ink-2);
}

/* Ciudades/municipios como chips-tarjeta que se acomodan en fila — antes eran
   una lista larga vertical. */
/* En el teléfono (una sola columna) cada tarjeta ocupa todo el ancho
   disponible; en pantallas más anchas (tablet/PC) caben 2 por fila —
   mismo punto de quiebre que ya usa .calc-layout. */
.ubicaciones-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 760px) { .ubicaciones-grid { grid-template-columns: 1fr 1fr; } }
.ubicacion-card {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--border); box-shadow: var(--shadow-sm);
  width: 100%; box-sizing: border-box;
}
.ubicacion-card-icon {
  width: 30px; height: 30px; border-radius: 50%; background: var(--brand-light); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;
}
.ubicacion-card-name { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.ubicacion-card-dept { font-size: 10.5px; color: var(--ink-3); }
.ubicacion-card-actions { display: flex; gap: 2px; margin-left: 4px; }

.ubic-list { display: flex; flex-direction: column; gap: 8px; }

/* Calculadora — "Notas de cobro": mini hoja de cálculo con autosuma. */
.notas-cobro-header { display: grid; grid-template-columns: 1fr 150px 32px; gap: 8px; padding: 0 2px; margin-bottom: 6px; }
.notas-cobro-header span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.notas-cobro-tabla { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.notas-cobro-fila { display: grid; grid-template-columns: 1fr 150px 32px; gap: 8px; align-items: center; }
.notas-cobro-fila .input { padding: 9px 12px; font-size: 13.5px; }
.notas-cobro-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--border); }
.notas-cobro-total { font-size: 17px; font-weight: 800; color: var(--ink); }
.notas-cobro-total span { color: var(--brand); }
@media (max-width: 480px) {
  .notas-cobro-header, .notas-cobro-fila { grid-template-columns: 1fr 108px 28px; gap: 6px; }
}
.ubic-row {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.ubic-row-name { font-size: 13.5px; font-weight: 700; flex: 1; }
.ubic-row-dept { font-size: 12px; color: var(--ink-3); }

.calc-layout { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 760px) { .calc-layout { grid-template-columns: 1fr 1fr; align-items: start; } }
.calc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.calc-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.calc-result-tile { background: var(--surface-2); border: 1px solid var(--outline-variant); border-radius: var(--radius-sm); padding: 14px; text-align: center; }
.calc-result-value { font-size: 18px; font-weight: 800; color: var(--brand); }
.calc-result-label { font-size: 11px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin-top: 3px; }
.calc-sim-out { background: var(--primary-container); border-radius: var(--radius-sm); padding: 16px; margin-top: 14px; text-align: center; }
.calc-sim-out .valor { font-size: 24px; font-weight: 800; color: var(--on-primary-container); }
.calc-sim-out .desc { font-size: 12px; color: var(--ink-2); margin-top: 4px; }

.dias-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dia-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  background: var(--surface-2); border: 1.5px solid var(--border); font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer;
}
.dia-chip.sel { background: var(--primary-container); border-color: var(--brand); color: var(--on-primary-container); }
.dia-chip button { background: none; border: none; cursor: pointer; color: inherit; font-size: 13px; padding: 0; display: flex; }

.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); }
.switch-row:last-child { border-bottom: none; }
.switch-row-label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.switch-row-hint { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.switch { position: relative; width: 44px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track { position: absolute; inset: 0; background: var(--surface-3); border-radius: 999px; cursor: pointer; transition: background .15s ease; }
.switch-track::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s ease; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + .switch-track { background: var(--brand); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }

/* Controlado desde casa.html según el rol del usuario en la casa actual —
   ver requireEdicionCasa/requireDuenoCasa en el backend, que son quienes
   realmente hacen cumplir estos permisos; esto solo oculta la UI. */
body.solo-lectura .btn-solo-editor { display: none !important; }
body.no-dueno .btn-solo-dueno { display: none !important; }

.banner-compartida {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--primary-container); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--on-primary-container);
}
.banner-compartida i { font-size: 17px; flex-shrink: 0; }

.banner-pausada {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--surface-3); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--ink-2);
}
.banner-pausada i { font-size: 17px; flex-shrink: 0; }

textarea.input { resize: vertical; font-family: inherit; }

.grupo-recibos { margin-bottom: 24px; }
.grupo-recibos-titulo { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; margin-bottom: 10px; }
.grupo-recibos-count { background: var(--surface-3); color: var(--ink-3); font-size: 11px; font-weight: 700; padding: 1px 9px; border-radius: 999px; }

/* ============================================================
   Pisos e inquilinos — cada piso es su propio grupo plano (como una sección
   de Ajustes de Android), expandible; el arriendo de cada inquilino usa el
   mismo anillo de urgencia que los recibos. El formulario de inquilino se
   resuelve en línea dentro del grupo, sin ventanas emergentes.
   ============================================================ */
.pisos-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.piso-group { background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: 14px; overflow: hidden; }
.piso-group-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer;
  background: none; border: none; width: 100%; text-align: left; font-family: inherit;
  transition: background .12s ease;
}
.piso-group-head:hover { background: var(--surface-container); }
.piso-group-icon {
  width: 38px; height: 38px; border-radius: 10px; background: var(--primary-container); color: var(--on-primary-container);
  display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0;
}
.piso-group-info { flex: 1; min-width: 0; }
.piso-group-name { font-size: 14.5px; font-weight: 800; color: var(--on-surface); }
.piso-group-sub { font-size: 11.5px; color: var(--on-surface-variant); margin-top: 1px; }
.piso-group-actions { display: flex; gap: 2px; flex-shrink: 0; }
.piso-group-chevron { color: var(--on-surface-variant); font-size: 18px; flex-shrink: 0; transition: transform .15s ease; }
.piso-group-chevron.abierto { transform: rotate(180deg); }
.piso-group-body { padding: 0 14px 14px; border-top: 1px solid var(--outline-variant); padding-top: 12px; }
.piso-group-body .urg-list, .piso-group-body .audit-list { margin-bottom: 10px; }
/* Las filas de inquilino comparten el mismo tono que el card de Piso que
   las contiene (surface-container-low) — un tono más claro las separa de
   ese fondo en vez de fundirse con él. El estado vencido (rojo pulsante)
   se respeta tal cual, sin este tono encima. */
.piso-group-body .urg-row:not(.urg-row-vencido) { background: var(--surface-container-high); }
.piso-group-body .urg-row:not(.urg-row-vencido):hover { background: var(--surface-3); }
.piso-group-body .audit-row { background: var(--surface-container-high); }
.piso-group-body .audit-row:hover { background: var(--surface-3); }

.tag-inactivo { color: var(--on-surface-variant); font-weight: 600; font-size: 11px; }

.inquilino-form-inline {
  background: var(--surface); border: 1.5px dashed var(--primary); border-radius: var(--radius-sm);
  padding: 14px; margin: 10px 0;
}

/* ============================================================
   Recibos recurrentes — lista plana dentro del modal de gestión.
   ============================================================ */
.tipo-list {
  display: flex; flex-direction: column; margin-bottom: 10px;
  border-radius: var(--radius); overflow: hidden;
}
.tipo-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface-container-low); border: 1px solid var(--outline-variant); }
.tipo-list .tipo-row + .tipo-row { margin-top: -1px; }
.tipo-list .tipo-row:first-child { border-radius: 14px 14px 0 0; }
.tipo-list .tipo-row:last-child { border-radius: 0 0 14px 14px; }
.tipo-list .tipo-row:first-child:last-child { border-radius: 14px; }
.tipo-row.inactivo { opacity: .55; }
.tipo-row-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.tipo-row-info { flex: 1; min-width: 0; }
.tipo-row-name { font-size: 13.5px; font-weight: 700; color: var(--on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tipo-row-sub { font-size: 11.5px; color: var(--on-surface-variant); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tipo-row-monto { font-size: 13px; font-weight: 700; color: var(--on-surface-variant); flex-shrink: 0; }

/* Menú de opciones (⋮) — un solo botón en vez de 3-4 íconos sueltos, que en
   pantalla angosta de teléfono no dejaban espacio ni para leer el nombre. */
.tipo-row-menu { position: relative; flex-shrink: 0; }
.tipo-row-menu-trigger {
  background: none; border: none; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--on-surface-variant);
  cursor: pointer; font-size: 17px; flex-shrink: 0;
}
.tipo-row-menu-trigger:hover { background: var(--surface-container-high); }
.tipo-row-menu-pop {
  position: absolute; top: calc(100% + 4px); right: 0; min-width: 180px; background: var(--surface-container-high);
  border-radius: 12px; box-shadow: var(--shadow-md); padding: 6px; display: none; flex-direction: column; gap: 1px; z-index: 20;
}
.tipo-row-menu-pop.open { display: flex; }
.tipo-row-menu-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
  border: none; background: none; color: var(--on-surface); font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: left; width: 100%; font-family: inherit;
}
.tipo-row-menu-item i { font-size: 16px; width: 18px; text-align: center; flex-shrink: 0; color: var(--on-surface-variant); }
.tipo-row-menu-item:hover { background: var(--surface-container); }
.tipo-row-menu-item.danger { color: var(--error); }
.tipo-row-menu-item.danger i { color: var(--error); }

.recibo-card-nota {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 8px;
  font-size: 11.5px; color: var(--ink-2); background: var(--surface-2); border-radius: 6px; padding: 7px 9px;
  line-height: 1.4;
}
.recibo-card-nota i { flex-shrink: 0; margin-top: 1px; color: var(--ink-3); font-size: 13px; }

/* Código de pago resaltado — se repite igual en tarjetas de Inicio, tarjetas
   de recibos recurrentes y el detalle completo, para que sea lo primero que
   salte a la vista en cualquier lugar donde aparezca un recibo. */
.card-codigo {
  font-family: 'SFMono-Regular', Consolas, monospace; font-weight: 800; font-size: 13.5px;
  color: var(--ink); background: var(--surface-dim); border-radius: 6px;
  padding: 4px 8px; margin: 7px 0; display: block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-codigo.sin-codigo { color: var(--ink-3); font-style: italic; font-weight: 600; background: transparent; padding: 4px 0; }

.audit-codigo { font-family: 'SFMono-Regular', Consolas, monospace; font-weight: 700; color: var(--ink-2); font-size: 11.5px; }

.empty-hero { text-align: center; padding: 40px 20px; }
.empty-hero-icon { width: 84px; height: 84px; margin: 0 auto 16px; }
.empty-hero-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.empty-hero p { font-size: 13.5px; color: var(--ink-3); max-width: 320px; margin: 0 auto; line-height: 1.6; }

/* Detalle de un recibo: el código de pago es lo importante — grande y arriba
   de todo — el valor queda chico porque es solo un estimado. Usa el par
   contenedor/on-contenedor de M3 (no --brand-light/--brand-dark): ese par
   garantiza buen contraste en los dos temas por diseño — --brand-light y
   --brand-dark en modo oscuro terminan siendo dos azules casi iguales entre
   sí, y el texto quedaba casi invisible sobre el fondo. */
.detf-codigo-box {
  text-align: center; background: var(--primary-container); border-radius: var(--radius);
  padding: 20px 18px; margin-bottom: 18px;
}
.detf-codigo-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--on-primary-container); margin-bottom: 8px;
}
.detf-codigo {
  font-family: 'SFMono-Regular', Consolas, monospace; font-size: 26px; font-weight: 800;
  color: var(--on-primary-container); word-break: break-all; line-height: 1.3; margin-bottom: 14px;
}
/* Sin código registrado: no es un dato a resaltar como el código sí lo es,
   así que baja de tamaño, deja el monospace/negrita y se atenúa — mismo
   espíritu que .card-codigo.sin-codigo en las tarjetas. */
.detf-codigo.sin-codigo {
  font-family: inherit; font-size: 13.5px; font-weight: 600; font-style: italic;
  color: var(--on-primary-container); opacity: .65; word-break: normal;
}
.detf-meta-row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.detf-meta-label {
  display: block; font-size: 11px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px;
}
.detf-valor-secundario { font-size: 13px; color: var(--ink-2); font-weight: 600; }

.card-codigo.codigo-copiable { display: flex; align-items: center; justify-content: space-between; gap: 8px; white-space: normal; }
.card-codigo.codigo-copiable span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.card-codigo.codigo-copiable .copy-btn { flex-shrink: 0; }

/* ============================================================
   Superficie de contenido — el título/subtítulo de cada pantalla vive
   directo en el topbar fijo (ver _topbarHTML en components.js), y la
   esquina redondeada de transición también la lleva el topbar (ver
   .topbar más arriba) — así se sigue viendo aunque se haga scroll. Acá
   solo queda la "hoja" clara plana que va debajo.
   ============================================================ */
.pagina-sheet {
  background: var(--m3-surface);
  margin: -26px -28px 0; padding: 20px 20px 4px; position: relative; z-index: 1;
  flex: 1 0 auto;
}

@media (max-width: 900px) {
  .pagina-sheet { margin: -18px -16px 0; padding: 18px 16px 4px; }
}

/* Selector de casas: un único botón grande (área táctil amplia) que muestra
   la selección actual y abre un panel de opciones — en vez de varios chips
   grandes compitiendo por atención en la misma fila. */
/* Selector desplegable "trigger + panel" — patrón nacido para "Mostrando
   información de: [casa] ▾" y reutilizado para cualquier otro filtro/campo
   de una sola opción que antes se resolvía con una fila de chips o un
   <select> nativo (categoría de servicio, compañía...): un botón compacto
   que muestra la selección actual y abre un panel de opciones, en vez de
   ocupar toda la pantalla con chips o romper el estilo de la App con un
   <select> del navegador. .casa-selector-* se deja como alias por
   compatibilidad con el HTML ya escrito — misma regla, dos nombres. */
.casa-selector-wrap, .selector-wrap { position: relative; margin-bottom: 16px; }
.casa-selector-trigger, .selector-trigger {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px;
  background: var(--surface-container); border: none; border-radius: 16px;
  padding: 14px 16px; cursor: pointer; font-family: inherit; text-align: left;
}
.casa-selector-trigger:hover, .selector-trigger:hover { background: var(--surface-container-high); }
.casa-selector-icon, .selector-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: var(--primary-container); color: var(--on-primary-container);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.casa-selector-text, .selector-text { flex: 1; min-width: 0; }
.casa-selector-label, .selector-label { font-size: 11px; color: var(--on-surface-variant); }
.casa-selector-valor, .selector-valor {
  font-size: 14.5px; font-weight: 700; color: var(--on-surface); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.casa-selector-chevron, .selector-chevron { color: var(--on-surface-variant); font-size: 20px; flex-shrink: 0; }
.casa-selector-wrap .filtro-panel, .selector-wrap .filtro-panel { left: 0; right: 0; width: auto; top: calc(100% + 6px); max-height: 320px; }

/* Opción bloqueada dentro de un .filtro-panel (ej. categoría exclusiva
   Premium en el selector de "Categoría del servicio") — mismo criterio
   visual que .chip-bloqueado, atenuada pero clicable (avisa por qué). */
.filtro-chip.bloqueado { opacity: .55; }
.filtro-chip.bloqueado i { color: var(--ink-3); }

/* Calendario propio (CasaYaUI.datepicker) — reemplaza el calendario nativo
   del navegador/WebView, dentro del mismo .filtro-panel que ya usan los
   demás selectores desplegables. */
.calendario-panel { padding: 4px 2px; min-width: 260px; }
.calendario-cabecera { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px; }
.calendario-mes { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.calendario-nav {
  width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--surface-2);
  color: var(--ink-2); display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 15px; flex-shrink: 0; font-family: inherit;
}
.calendario-nav:hover { background: var(--surface-3); }
.calendario-semana { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin-bottom: 2px; }
.calendario-semana span { font-size: 10.5px; font-weight: 700; color: var(--ink-3); }
.calendario-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calendario-dia {
  aspect-ratio: 1; border: none; background: none; border-radius: 50%;
  font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.calendario-dia:hover { background: var(--surface-2); }
.calendario-dia.fuera { color: var(--ink-3); opacity: .45; }
.calendario-dia.hoy { color: var(--brand); font-weight: 800; }
.calendario-dia.sel { background: var(--brand); color: #fff; font-weight: 800; }
.calendario-pie { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.calendario-pie .filtro-panel-clear { flex: 1; margin-top: 0; }

/* Resumen principal: responde "¿qué necesita atención hoy?" con una sola
   cifra grande y una acción clara, en vez de 3 tarjetas de color compitiendo
   entre sí. Las mismas 3 métricas de siempre quedan debajo, discretas. */
.resumen-hoy { background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: 18px; padding: 18px; margin-bottom: 18px; }
.resumen-hoy-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.resumen-hoy-label { font-size: 12.5px; color: var(--on-surface-variant); font-weight: 700; }
.resumen-hoy-btn {
  background: var(--primary-container); color: var(--on-primary-container);
  border: 1.5px solid var(--primary); border-radius: 999px;
  padding: 9px 18px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; flex-shrink: 0;
  min-height: 40px;
}
.resumen-hoy-btn:hover { filter: brightness(1.08); }
.resumen-hoy-num { font-size: 40px; font-weight: 800; color: var(--on-surface); line-height: 1.1; margin-top: 8px; }
.resumen-hoy-desc { font-size: 12.5px; color: var(--on-surface-variant); margin-top: 3px; }

.resumen-stats { display: flex; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--outline-variant); }
/* Cada cifra abre el resumen de ese estado — mismo dato de siempre, ahora
   también una puerta de entrada a la lista sin bajar toda la pantalla. */
.resumen-stat { flex: 1; cursor: pointer; border-radius: 10px; padding: 4px; margin: -4px; transition: background .12s ease; }
.resumen-stat:hover { background: var(--surface-2); }
.resumen-stat-label { font-size: 11px; color: var(--on-surface-variant); font-weight: 600; display: block; }
.resumen-stat-num { font-size: 17px; font-weight: 800; display: block; margin-top: 3px; color: var(--on-surface); }
.resumen-stat-sum { font-size: 11px; color: var(--on-surface-variant); margin-top: 1px; display: block; }
.resumen-stat.critico .resumen-stat-num { color: var(--u-critico); }
.resumen-stat.urgente .resumen-stat-num { color: var(--u-moderado); }
.resumen-stat.ok .resumen-stat-num { color: var(--u-tranquilo); }

.inicio-seccion { margin-bottom: 22px; }
.inicio-seccion-hdr { margin-bottom: 10px; }
.inicio-seccion-hdr span { font-size: 15px; font-weight: 800; color: var(--on-surface); }

/* ============================================================
   M3 — fila de recibo/arriendo pendiente con anillo de urgencia
   ============================================================ */
/* Lista agrupada nativa (como una lista de Ajustes de Android): un hueco
   fino entre cada fila (en vez de una línea divisoria) — cada fila pinta su
   propio fondo, clarito para distinguirse de la hoja sin llegar a blanco.
   Las filas del medio quedan de borde recto; solo la primera y la última
   heredan la esquina redondeada, para que el grupo se siga leyendo como una
   sola lista y no como tarjetas sueltas. */
.urg-list {
  display: flex; flex-direction: column; margin-bottom: 26px;
  border-radius: var(--radius); overflow: hidden;
}

.urg-row {
  position: relative; display: flex; align-items: center; gap: 14px;
  background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: 0;
  padding: 13px 44px 13px 14px; width: 100%; text-align: left; font-family: inherit;
  transition: background .12s ease;
}
.urg-row:hover { background: var(--surface-container); }
/* Bordes "colapsados" — cada fila con su propio borde, pero fundido con
   el de la siguiente en vez de una línea doble en el medio. */
.urg-list .urg-row + .urg-row { margin-top: -1px; }

/* La fila en sí no tiene esquinas redondeadas propias (solo el contenedor
   las tiene) — normalmente no se nota porque overflow:hidden la recorta,
   pero la sombra interior animada de "vencido" se pinta pegada a las
   esquinas CUADRADAS de la fila, y en la de arriba/abajo eso choca con la
   curva del contenedor. Dándole a la primera/última fila la misma esquina
   redondeada del contenedor, la sombra queda alineada con el borde real. */
.urg-list .urg-row:first-child { border-radius: 14px 14px 0 0; }
.urg-list .urg-row:last-child { border-radius: 0 0 14px 14px; }
.urg-list .urg-row:first-child:last-child { border-radius: 14px; }

.urg-row-vencido { background: var(--error-container); animation: urg-pulso 2.2s ease-in-out infinite; }
.urg-row-vencido:hover { background: var(--error-container); }
@keyframes urg-pulso {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(179,38,30,0); }
  50% { box-shadow: inset 0 0 0 3px rgba(179,38,30,.35); }
}

.urg-ring-wrap { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.urg-ring { position: absolute; inset: 0; width: 44px; height: 44px; transform: rotate(-90deg); }
.urg-ring-bg { fill: none; stroke: var(--surface-container-high); stroke-width: 3; }
.urg-ring-fill { fill: none; stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset .3s ease; }
.urg-icon {
  position: absolute; inset: 6px; border-radius: 50%; background: var(--surface-container-high); color: var(--on-surface-variant);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.urg-icon-vencido { background: var(--u-critico); color: #fff; }

.urg-info { flex: 1; min-width: 0; }
.urg-nombre { font-size: 14px; font-weight: 700; color: var(--on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.urg-sub { font-size: 11.5px; color: var(--on-surface-variant); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.urg-estado { font-size: 12.5px; font-weight: 800; margin-top: 3px; }

.urg-monto { font-size: 14.5px; font-weight: 800; color: var(--on-surface); flex-shrink: 0; align-self: flex-start; margin-top: 2px; }

.urg-pagar-btn {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--tertiary-container); color: var(--on-tertiary-container); border: none;
  display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.urg-pagar-btn:hover { background: var(--tertiary); color: #fff; }

.type-tag {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink-3); display: inline-flex; align-items: center; gap: 3px;
}

/* Pagados: un "log" auditable en vez de tarjetas grandes — menos protagonismo
   visual porque ya no requieren acción, solo consulta. */
.audit-list {
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; margin-bottom: 26px;
}
.audit-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface);
  border: 1px solid var(--outline-variant); text-decoration: none; color: inherit; font-size: 12.5px;
}
.audit-row:hover { background: var(--surface-2); }
.audit-list .audit-row + .audit-row { margin-top: -1px; }
.audit-row .audit-icon { color: var(--green); font-size: 16px; flex-shrink: 0; }
.audit-row .audit-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink); }
.audit-row .audit-fecha { color: var(--ink-3); flex-shrink: 0; }
.audit-row .audit-monto { font-weight: 800; color: var(--ink); flex-shrink: 0; min-width: 78px; text-align: right; }

/* Resumen de Vencidas/Por pagar/Pagadas (modal) — mismo espíritu corto y
   directo de .audit-list de arriba, con el ícono real de cada categoría en
   vez de un check genérico, y el nombre que el usuario diligenció (empresa)
   como protagonista — la categoría (Energía eléctrica, Gas natural...)
   queda como dato chico al lado, no al frente. */
.resumen-modal-list {
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 60vh; overflow-y: auto;
}
.resumen-modal-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface);
  border: 1px solid var(--outline-variant); cursor: pointer;
}
.resumen-modal-row:hover { background: var(--surface-2); }
.resumen-modal-list .resumen-modal-row + .resumen-modal-row { margin-top: -1px; }
.resumen-modal-row-icon {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
/* Anillo de estado alrededor del ícono — box-shadow en vez de border para
   no alterar el tamaño de la burbuja ni empujar el layout. Mismos tonos que
   .resumen-stat.critico/urgente/ok, así que se lee igual que arriba.
   "Por pagar" usa --u-moderado (ámbar) y no --u-urgente (el segundo tono
   más cercano al rojo en la escala de urgencia de 0-4 días) — con
   --u-urgente, Vencidas y Por pagar se veían casi del mismo color. */
.resumen-modal-row-icon.estado-vencida { box-shadow: 0 0 0 2px var(--u-critico); }
.resumen-modal-row-icon.estado-pendiente { box-shadow: 0 0 0 2px var(--u-moderado); }
.resumen-modal-row-icon.estado-pagada { box-shadow: 0 0 0 2px var(--u-tranquilo); }
.resumen-modal-row-info { flex: 1; min-width: 0; }
.resumen-modal-row-nombre {
  font-size: 13px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.resumen-modal-row-nombre .cat { font-weight: 500; color: var(--ink-3); }
/* La casa se trunca si hace falta, pero el código de referencia (si hay)
   nunca — es el dato que de verdad sirve para identificar cuál factura es
   cuál, así que no puede quedar cortado por un nombre de casa largo. */
.resumen-modal-row-casa { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.resumen-modal-row-casa-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.resumen-modal-row-casa .audit-codigo { flex-shrink: 0; }
.resumen-modal-row-monto { font-weight: 800; color: var(--ink); flex-shrink: 0; font-size: 13px; }