/* ═══════════════════════════════════════════════════════
   NUVO — Estilos v5 — Dark sidebar + colores vibrantes
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* Fondo y superficies — gris clarísimo igual al login */
  --bg:         #f0f2f6;
  --surface:    #ffffff;
  --surface2:   #f7f8fc;
  --surface3:   #eceef6;
  --border:     #e2e5ef;
  --border2:    #cdd1e8;

  /* Acento principal — verde del botón login #2ecc71 */
  --accent:     #2ecc71;
  --accent2:    #27ae60;
  --accent3:    #52d98a;
  --accent-lt:  #eafbf0;
  --accent-glow: rgba(46,204,113,0.15);

  /* Sidebar — verde oscuro coordinado */
  --sidebar-bg: #d4edda;
  --sidebar-active-bg: rgba(46,204,113,0.25);
  --sidebar-active-color: #1a6b36;
  --sidebar-active-border: rgba(46,204,113,0.25);

  --success:    #2ecc71;
  --success-lt: #eafbf0;
  --warning:    #f39c12;
  --warning-lt: #fef9e7;
  --danger:     #e74c3c;
  --danger-lt:  #fdf0ef;
  --info:       #3498db;
  --info-lt:    #ebf5fb;

  /* Propietario = verde, Arrendatario = azul */
  --owner:      #27ae60;
  --owner-lt:   #d5f5e3;
  --tenant:     #2980b9;
  --tenant-lt:  #d6eaf8;
  --aval-color: #8e44ad;
  --aval-lt:    #f4ecf7;

  --text:       #1a2332;
  --text2:      #2c3e50;
  --text3:      #7f8c8d;
  --text4:      #bdc3c7;

  --font: 'Inter', system-ui, sans-serif;
  --sidebar-w:  215px;
  --sidebar-collapsed-w: 54px;
  --topbar-h:   62px;
  --radius-sm:  6px;
  --radius:     10px;
  --radius-lg:  14px;
  --radius-xl:  18px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 0 rgba(0,0,0,0.04);
  --shadow:     0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 30px rgba(0,0,0,0.12);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.18);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:var(--font); font-size:15.5px; line-height:1.55; min-height:100vh; -webkit-font-smoothing:antialiased; }

/* ─── LAYOUT ─── */
.app-layout { display:flex; min-height:100vh; }

/* ─── SIDEBAR — siempre minimizado por defecto ─── */
.sidebar {
  width: var(--sidebar-collapsed-w);
  background: #dcfce7;
  display: flex; flex-direction: column;
  position: fixed; top: var(--topbar-h); left:0; bottom:0;
  z-index: 300; overflow-y: auto; overflow-x: hidden;
  transition: width .25s ease, box-shadow .25s ease;
}
/* Expandido por hover: overlay, no desplaza el contenido */
.sidebar.expanded {
  width: var(--sidebar-w);
  box-shadow: 4px 0 24px rgba(0,0,0,0.13);
}
.sidebar-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  min-height: 64px;
  border-bottom: 1px solid rgba(0,0,0,0.09);
  overflow: hidden;
  cursor: default;
  flex-shrink: 0;
}
.sidebar-logo-img {
  max-width: 160px; max-height: 52px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.sidebar-logo-fallback {
  display: flex; align-items: center; gap: 10px;
}
.logo-mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 20px; color: white;
  box-shadow: 0 4px 12px rgba(46,204,113,0.35);
  flex-shrink: 0;
}
.logo-text { font-size: 22px; font-weight: 900; color: #1a3d2b; letter-spacing:-0.8px; }
.logo-sub { font-size: 11px; color: #6aaa82; letter-spacing:2px; text-transform:uppercase; margin-top:2px; }

.sidebar-nav { flex:1; padding:8px 10px; }
.nav-section { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#6aaa82; padding:14px 10px 6px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; cursor:pointer; color:#3d6b4f; font-weight:500; font-size:14.5px; margin-bottom:2px; transition:all .18s; user-select:none; }
.nav-item:hover { background:rgba(46,204,113,0.15); color:#1a3d2b; }
.nav-item.active { background:#2ecc71; color:white; font-weight:700; border:none; box-shadow:0 2px 8px rgba(46,204,113,0.3); }
.nav-icon { width:18px; text-align:center; flex-shrink:0; font-size:17px; }
.nav-badge { margin-left:auto; background:var(--danger); color:white; font-size:12px; font-weight:700; padding:2px 7px; border-radius:20px; }

.sidebar-footer { padding:12px 10px; border-top:1px solid #b8dfc4; }
.user-chip { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; cursor:pointer; background:rgba(46,204,113,0.12); transition:background .18s; }
.user-chip:hover { background:rgba(46,204,113,0.2); }
.user-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#27ae60,#1a8a4a); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:white; flex-shrink:0; box-shadow:0 3px 8px rgba(39,174,96,0.35); }
.user-name { font-size:14px; font-weight:600; color:#1a3d2b; }
.user-role { font-size:11.5px; color:#6aaa82; }

.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0); z-index:299; transition:background .25s ease; }
.sidebar-overlay.open { display:block; background:rgba(0,0,0,0.45); }

/* ─── TOPBAR ─── */
/* margin-left negativo extiende la franja blanca hasta el borde izquierdo (detrás del sidebar z-index:300) */
.topbar { height:var(--topbar-h); background:#ffffff; border-bottom:1px solid #e2e8e4; display:flex; align-items:center; padding:0 24px 0 16px; padding-top:env(safe-area-inset-top); gap:12px; position:fixed; top:0; left:0; right:0; z-index:400; box-shadow:0 1px 0 #e2e8e4, 0 2px 8px rgba(0,0,0,0.04); }

/* ── Drawer header (solo visible en mobile) ───────────── */
.drawer-header {
  display:none;
  align-items:center; justify-content:space-between;
  padding:14px 16px;
  padding-top:calc(14px + env(safe-area-inset-top));
  background:#ffffff;
  border-bottom:1px solid #b8dfc4;
  position:sticky; top:0; z-index:5;
}
.drawer-brand { display:flex; align-items:center; gap:10px; }
.drawer-logo-mark {
  width:36px; height:36px; border-radius:10px;
  background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:20px; color:white;
  box-shadow:0 2px 8px rgba(46,204,113,0.35);
}
.drawer-logo-text { font-size:22px; font-weight:900; color:#1a3d2b; letter-spacing:-0.8px; }
.drawer-close {
  background:#f1f5f9; border:none; border-radius:50%;
  width:40px; height:40px;
  font-size:18px; font-weight:700; color:#475569;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s;
}
.drawer-close:active { background:#e2e8f0; }

/* ── Scroll lock cuando drawer está abierto ────────────── */
body.drawer-open { overflow:hidden; touch-action:none; }
.topbar-actions { display:flex; gap:8px; align-items:center; }
/* Búsqueda rápida del topbar */
.topbar-search-wrap { width:200px; }
/* Notif panel responsive */
#notifPanel { max-width:calc(100vw - 16px); }
/* Profile btn: touch target */
.profile-btn { padding:4px; box-sizing:content-box; }
.btn-menu { display:flex; width:36px; height:36px; border-radius:var(--radius); background:var(--surface2); border:1px solid var(--border); cursor:pointer; font-size:18px; align-items:center; justify-content:center; flex-shrink:0; transition:background .15s; }
.btn-menu:hover { background:var(--accent-lt); color:var(--accent2); }

.profile-btn { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#27ae60,#1a8a4a); display:flex; align-items:center; justify-content:center; font-size:15px; color:white; cursor:pointer; border:none; flex-shrink:0; transition:transform .18s; box-shadow:0 3px 10px rgba(39,174,96,0.25); }
.profile-btn:hover { transform:scale(1.08); }
.profile-menu { position:absolute; top:calc(100% + 10px); right:0; width:220px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; display:none; z-index:999; }
.profile-menu.open { display:block; animation:fadeUp .15s ease; }
.profile-menu-header { display:flex; align-items:center; gap:10px; padding:13px 14px; background:linear-gradient(135deg,rgba(39,174,96,.08),rgba(26,138,74,.04)); }
.pmh-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#27ae60,#1a8a4a); color:white; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pmh-nombre { font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pmh-email { font-size:11px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.pmh-plan { display:inline-block; margin-top:4px; padding:1px 7px; border-radius:20px; font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; background:#dcfce7; color:#16a34a; }
.profile-menu-item { display:flex; align-items:center; gap:10px; padding:11px 16px; font-size:14px; color:var(--text2); cursor:pointer; transition:background .15s,color .15s; font-weight:500; }
.profile-menu-item:hover { background:var(--surface2); color:var(--text); }
.profile-menu-item.active { color:var(--primary,#16a34a); background:rgba(39,174,96,.07); font-weight:600; }
.profile-menu-item.danger { color:var(--danger); }
.profile-menu-item.danger:hover { background:var(--danger-lt); }
.profile-menu-divider { height:1px; background:var(--border); }

/* ─── TOPBAR empresa ─── */
.emp-area { display:flex; align-items:center; gap:11px; flex:1; }
.emp-logo-box { width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,#dbeafe,#bfdbfe); border:1px solid #bfdbfe; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; color:#1d4ed8; flex-shrink:0; overflow:hidden; }
.emp-logo-box img { width:100%; height:100%; object-fit:cover; }
.emp-name { font-size:15.5px; font-weight:700; color:var(--text); }
.emp-rut { font-size:12.5px; color:var(--text4); margin-top:1px; }

/* ─── MAIN — siempre con margen del sidebar minimizado (no se desplaza con hover) ─── */
.main-content { margin-left:var(--sidebar-collapsed-w); flex:1; min-height:100vh; display:flex; flex-direction:column; width:calc(100% - var(--sidebar-collapsed-w)); padding-top:var(--topbar-h); }
.content-area { padding:10px 24px 22px; flex:1; width:100%; }

/* ─── SIDEBAR MINIMIZADO (estado por defecto, solo iconos) ─── */
.sidebar .nav-section       { display: none; }
.sidebar .nav-badge         { display: none; }
.sidebar .nav-item          { justify-content: center; padding: 10px 0; font-size: 0; white-space: nowrap; }
.sidebar .nav-icon          { font-size: 20px; width: auto; display: flex; justify-content: center; }
.sidebar .nav-icon i        { font-size: 20px; }
.sidebar .user-name,
.sidebar .user-role,
.sidebar .user-empresa      { display: none; }
.sidebar .user-chip         { justify-content: center; padding: 10px 4px; }
.sidebar .sidebar-logo      { display: flex; justify-content: center; align-items: center; }
.sidebar .sidebar-logo-img  { display: block; max-width: 42px; max-height: 42px; padding: 4px; }
.sidebar .logo-text,
.sidebar .logo-sub          { display: none; }

/* ─── SIDEBAR EXPANDIDO (hover) — iconos + texto, overlay superpuesto ─── */
.sidebar.expanded .nav-section      { display: block; }
.sidebar.expanded .nav-badge        { display: inline-flex; }
.sidebar.expanded .nav-item         { justify-content: flex-start; padding: 10px 12px; font-size: 14.5px; white-space: normal; }
.sidebar.expanded .nav-icon         { font-size: 17px; width: 18px; justify-content: center; }
.sidebar.expanded .nav-icon i       { font-size: 17px; }
.sidebar.expanded .user-name,
.sidebar.expanded .user-role,
.sidebar.expanded .user-empresa     { display: block; }
.sidebar.expanded .user-chip        { justify-content: flex-start; padding: 10px 12px; }
.sidebar.expanded .sidebar-logo     { display: flex; justify-content: center; align-items: center; }
.sidebar.expanded .sidebar-logo-img { display: block; max-width: 160px; max-height: 48px; padding: 0 10px; }
.sidebar.expanded .logo-text,
.sidebar.expanded .logo-sub         { display: none; }

/* Ocultar botón colapso en desktop (el hover lo maneja) */
/* Hamburger mobile: solo visible en móvil */
#sidebarMenuBtn { display: none; }
@media(min-width:769px) { #sidebarCollapseBtn { display: none !important; } }

/* ─── PAGES ─── */
.page { display:none; }
.page.active { display:block; animation:fadeUp .2s ease; }

/* ─── AUTOMATIZACIÓN — Toggle switch ─── */
.auto-toggle { position:relative; display:inline-block; width:46px; height:26px; flex-shrink:0; cursor:pointer; }
.auto-toggle input { opacity:0; width:0; height:0; }
.auto-toggle-slider {
  position:absolute; inset:0; background:#cbd5e1; border-radius:26px; transition:.2s;
}
.auto-toggle-slider::before {
  content:''; position:absolute; width:20px; height:20px; left:3px; bottom:3px;
  background:white; border-radius:50%; transition:.2s; box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.auto-toggle input:checked + .auto-toggle-slider { background:var(--toggle-on,#16a34a); }
.auto-toggle input:checked + .auto-toggle-slider::before { transform:translateX(20px); }

/* ─── AUTOMATIZACIÓN — Día chip checkboxes ─── */
.auto-dia-chip { display:inline-flex; align-items:center; cursor:pointer; }
.auto-dia-chip input { position:absolute; opacity:0; pointer-events:none; }
.auto-dia-chip span {
  padding:6px 14px; border-radius:20px; font-size:12px; font-weight:700;
  border:1.5px solid #e2e8f0; background:white; color:#64748b; transition:all .15s;
  user-select:none;
}
.auto-dia-chip input:checked + span { background:#f0fdf4; color:#16a34a; border-color:#86efac; }
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes nuvoPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.1);opacity:.75} }
.nuvo-loading-mark {
  width:48px;height:48px;border-radius:14px;background:#2ecc71;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:900;font-size:26px;color:white;
  box-shadow:0 4px 16px rgba(46,204,113,.35);
  animation:nuvoPulse 1.2s ease-in-out infinite;
  flex-shrink:0;
}

/* ─── Fila clickable de propiedades — hover + active feedback ─── */
.prop-row-clickable { cursor:pointer; transition:background .1s; }
.prop-row-clickable:hover  { background:#f0fdf4; }
.prop-row-clickable:active { background:#d1fae5; opacity:.85; }

/* ─── PAGE HEADER — solid white card, compact inline ─── */
.page-header {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 22px;
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  position: relative;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.03);
}
.page-header > div:first-child {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  min-width: 0;
}
.page-header-title {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.4px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.page-header-title .ph-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: #f0fdf4;
  color: #166534;
  font-size: 17px;
  border: 1px solid #dcfce7;
}
.page-header-sub {
  font-size: 13px;
  color: var(--text3);
  font-weight: 500;
  margin: 0;
  padding-left: 14px;
  border-left: 1px solid var(--border);
  line-height: 1.3;
}
.page-header-actions { display:flex; gap:8px; flex-wrap:wrap; }

.section-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; gap:14px; flex-wrap:wrap; }
.section-title { font-size:20px; font-weight:800; color:var(--text); letter-spacing:-0.4px; }
.section-sub { font-size:14.5px; color:var(--text3); margin-top:2px; }
.section-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* ─── BUTTONS ─── */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--radius); border:none; font-family:var(--font); font-size:15px; font-weight:600; cursor:pointer; transition:all .18s; white-space:nowrap; text-decoration:none; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-primary { background:var(--accent); color:white; box-shadow:0 3px 10px rgba(46,204,113,0.35); }
.btn-primary:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 5px 16px rgba(46,204,113,0.45); }
.btn-white { background:rgba(255,255,255,0.9); color:#1a3d2b; border:1px solid rgba(255,255,255,0.5); font-weight:700; }
.btn-white:hover:not(:disabled) { background:white; }
.btn-secondary { background:var(--surface); color:var(--text2); border:1px solid var(--border); }
.btn-secondary:hover:not(:disabled) { background:var(--surface2); color:var(--text); border-color:var(--border2); }
.btn-success { background:var(--success-lt); color:var(--success); border:1px solid rgba(16,185,129,.2); }
.btn-warning { background:var(--warning-lt); color:var(--warning); border:1px solid rgba(245,158,11,.2); }
.btn-danger { background:var(--danger-lt); color:var(--danger); border:1px solid rgba(244,63,94,.2); }
.btn-ghost { background:transparent; color:var(--text2); border:1px solid transparent; }
.btn-ghost:hover:not(:disabled) { background:var(--surface2); border-color:var(--border); color:var(--text); }
.btn-sm { padding:5px 11px; font-size:14px; border-radius:var(--radius-sm); }
.btn-lg { padding:11px 22px; font-size:16px; }
.btn-icon { padding:7px; width:34px; height:34px; justify-content:center; flex-shrink:0; }

/* ─── CARDS ─── */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow-sm); }
.card-title { font-size:12px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:1px; margin-bottom:14px; }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }

/* ─── STATS ─── */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:20px; }
/* Dashboard 3-col charts grid */
.dash-charts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; align-items:stretch; }
/* Chart canvas wrappers */
.chart-wrapper-lg { position:relative; height:220px; }
/* KPI card accent stripes */
.kpi-prop::before { background:var(--accent); }
.kpi-paid::before { background:var(--success); }
.kpi-pend::before { background:var(--warning); }
.kpi-exp::before  { background:var(--danger); }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 18px; box-shadow:var(--shadow-sm); transition:all .2s; position:relative; overflow:hidden; }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.stat-card:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.stat-card-link { cursor:pointer; }
.stat-card-link:hover { border-color:var(--accent); }
.stat-card-link:hover .stat-label { color:var(--accent); }
.stat-label { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.9px; color:var(--text3); margin-bottom:8px; }
.stat-value { font-size:28px; font-weight:900; color:var(--text); letter-spacing:-1.5px; line-height:1; }
.stat-meta { font-size:12px; color:var(--text3); margin-top:5px; }
.stat-badge { display:inline-block; font-size:12px; font-weight:600; padding:2px 8px; border-radius:20px; margin-top:5px; }

/* ─── BADGES ─── */
.badge { display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:600; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.badge-success { background:var(--success-lt); color:var(--success); }
.badge-warning { background:var(--warning-lt); color:#b45309; }
.badge-danger  { background:var(--danger-lt);  color:var(--danger); }
.badge-info    { background:var(--info-lt);    color:var(--info); }
.badge-neutral { background:var(--surface3);   color:var(--text2); }
.badge-amber   { background:#fef3c7;           color:#b45309; }
.badge-owner   { background:var(--owner-lt);   color:var(--owner); }
.badge-tenant  { background:var(--tenant-lt);  color:var(--tenant); }
.badge-aval    { background:var(--aval-lt);    color:var(--aval-color); }

/* ─── GRIDS ─── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }

/* ─── TABLES ─── */
.table-wrap { overflow-x:auto; width:100%; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; font-size:15px; }
thead th { padding:10px 14px; text-align:left; font-size:12px; font-weight:700; letter-spacing:0.9px; text-transform:uppercase; color:var(--text3); border-bottom:2px solid var(--border); background:var(--surface2); white-space:nowrap; cursor:pointer; user-select:none; transition:background .15s; }
thead th:hover { background:var(--surface3); color:var(--text2); }
tbody tr { border-bottom:1px solid var(--border); transition:background .12s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:var(--surface2); }
tbody td { padding:11px 14px; color:var(--text2); vertical-align:middle; }
tbody td.td-strong { color:var(--text); font-weight:600; }
tbody td.td-mono { font-family:monospace; font-size:14.5px; color:var(--text3); }
tr.row-owner  { border-left:3px solid var(--owner); }
tr.row-tenant { border-left:3px solid var(--tenant); }
tr.row-aval   { border-left:3px solid var(--aval-color); }

/* ─── FORMS ─── */
.form-group { margin-bottom:16px; }
label.form-label { display:block; font-size:14px; font-weight:600; color:var(--text2); margin-bottom:6px; }
.form-control,
input[type=text],input[type=email],input[type=number],
input[type=password],input[type=date],input[type=tel],
select,textarea {
  width:100%; background:#f8fffe; border:1.5px solid #d0e8d8;
  border-radius:10px; padding:10px 14px; color:var(--text);
  font-family:var(--font); font-size:15.5px;
 transition:border-color .18s,box-shadow .18s; outline:none; -webkit-appearance:none; height:52px; padding: 12px 18px; font-size:16.5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,
input[type=password]:focus,input[type=date]:focus,input[type=tel]:focus,
select:focus,textarea:focus {
  border-color: #2ecc71;
  background: white;
  box-shadow: 0 0 0 3px rgba(46,204,113,0.15), 0 1px 3px rgba(0,0,0,0.04);
}
input[type=text]:hover,input[type=email]:hover,input[type=number]:hover,
input[type=password]:hover,input[type=date]:hover,input[type=tel]:hover,
select:hover {
  border-color: #2ecc71;
  background: white;
}
.form-control:focus,input:focus,select:focus,textarea:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow);
}
textarea { height:auto; min-height:80px; resize:vertical; }
input::placeholder,textarea::placeholder { color:var(--text4); }
select { cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
.form-row { display:grid; gap:14px; }
.form-row-2 { grid-template-columns:1fr 1fr; }
.form-row-3 { grid-template-columns:1fr 1fr 1fr; }
.form-hint { font-size:13.5px; color:var(--text3); margin-top:5px; }
.form-error { font-size:13.5px; color:var(--danger); margin-top:5px; font-weight:500; }
.check-group { display:flex; align-items:center; gap:8px; cursor:pointer; }
.check-group input[type=checkbox] { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; }
.check-group span { font-size:15px; color:var(--text2); }
.radio-pills { display:flex; gap:6px; flex-wrap:wrap; }
.radio-pill { display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--radius); border:1.5px solid var(--border); background:var(--surface); cursor:pointer; font-size:14.5px; color:var(--text2); font-weight:500; transition:all .18s; height:42px; }
.radio-pill input { display:none; }
.radio-pill.selected { border-color:var(--accent); background:var(--accent-lt); color:var(--accent2); font-weight:600; }

/* ─── MODAL ─── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(6px); z-index:9500; display:flex; align-items:center; justify-content:center; padding:16px; opacity:0; pointer-events:none; transition:opacity .22s; }
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); width:100%; max-width:680px; max-height:94vh; display:flex; flex-direction:column; box-shadow:var(--shadow-xl); transform:translateY(16px) scale(.98); transition:transform .24s cubic-bezier(.34,1.4,.64,1); }
.modal-overlay.open .modal { transform:translateY(0) scale(1); }
.modal-header { padding:0; border-bottom:1px solid var(--border); flex-shrink:0; border-radius:var(--radius-xl) var(--radius-xl) 0 0; overflow:hidden; }
.modal-header-inner { background:linear-gradient(135deg,#2ecc71,#27ae60); padding:18px 22px; display:flex; align-items:center; gap:12px; position:relative; overflow:hidden; }
.modal-header-inner::before { content:''; position:absolute; top:-30px; right:20px; width:100px; height:100px; border-radius:50%; background:radial-gradient(circle,rgba(46,204,113,0.2),transparent 70%); }
.modal-title { font-size:18px; font-weight:700; flex:1; color:white; letter-spacing:-0.3px; position:relative; z-index:1; }
.modal-close { background:rgba(255,255,255,0.1); border:none; color:white; width:30px; height:30px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; transition:background .18s; position:relative; z-index:1; }
.modal-close:hover { background:rgba(255,255,255,0.2); }
.modal-body { padding:22px 24px; overflow-y:auto; flex:1; }
.modal-footer { padding:14px 24px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; flex-shrink:0; background:var(--surface2); border-radius:0 0 var(--radius-xl) var(--radius-xl); }
.modal-section-title { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; color:var(--accent2); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.modal-section-title::after { content:''; flex:1; height:1px; background:var(--accent-lt); }

/* ─── STEPPER ─── */
.stepper { display:flex; align-items:center; margin-bottom:28px; }
.step-item { display:flex; align-items:center; flex:1; position:relative; }
.step-item:not(:last-child)::after { content:''; flex:1; height:2px; background:var(--border); margin:0 6px; transition:background .3s; }
.step-item.done:not(:last-child)::after { background:var(--accent); }
.step-num { width:28px; height:28px; border-radius:50%; border:2px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--text3); flex-shrink:0; transition:all .25s; }
.step-item.active .step-num { border-color:var(--accent); background:var(--accent); color:white; box-shadow:0 0 0 4px var(--accent-glow); }
.step-item.done .step-num { border-color:var(--accent); background:var(--accent); color:white; }
.step-label { font-size:12px; font-weight:600; color:var(--text4); white-space:nowrap; position:absolute; top:34px; left:50%; transform:translateX(-50%); }
.step-item.active .step-label { color:var(--accent); font-weight:700; }
.step-item.done .step-label { color:var(--accent); }

/* ─── PROP TIPO GRID ─── */
.prop-tipo-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:4px; }
.prop-tipo-card { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 6px; border-radius:var(--radius-lg); border:2px solid var(--border); background:var(--surface); cursor:pointer; transition:all .2s; font-size:18px; }
.prop-tipo-card span { font-size:11px; font-weight:600; color:var(--text2); text-align:center; }
.prop-tipo-card:hover { border-color:var(--accent); background:var(--accent-lt); }
.prop-tipo-card.selected { border-color:var(--accent); background:var(--accent-lt); box-shadow:0 0 0 3px var(--accent-glow); }
.prop-tipo-card.selected span { color:var(--accent2); }

/* ─── NUM STEPPERS ─── */
.prop-num-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.prop-num-card { display:flex; flex-direction:column; align-items:center; padding:16px 8px 12px; border-radius:var(--radius-lg); border:1.5px solid var(--border); background:var(--surface2); transition:border-color .2s; }
.prop-num-card:hover { border-color:var(--accent); }
.prop-num-icon { font-size:24px; margin-bottom:4px; }
.num-stepper { display:flex; align-items:center; gap:4px; margin-top:4px; }
.num-stepper button { width:28px; height:28px; border-radius:50%; border:1.5px solid var(--border); background:var(--surface); color:var(--accent2); font-size:16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .18s; flex-shrink:0; }
.num-stepper button:hover { background:var(--accent); border-color:var(--accent); color:white; }

/* ─── COLUMN TOGGLES ─── */
.col-toggle { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:20px; background:var(--surface); border:1.5px solid var(--border); color:var(--text3); font-size:12.5px; font-weight:600; cursor:pointer; transition:all .18s; user-select:none; }
.col-toggle input { display:none; }
.col-toggle.active { background:#1a3d2b; color:white; border-color:#0f1117; }

/* ─── CONTRATO STEP INDICATOR ─── */
.contrato-steps { display:flex; align-items:center; padding-bottom:4px; }
.csi-item { display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:#a0aec0; white-space:nowrap; transition:color .2s; }
.csi-item.active { color:var(--accent); }
.csi-item.done   { color:var(--success); }
.csi-circle { width:24px; height:24px; border-radius:50%; background:#e2e8f0; color:#718096; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; flex-shrink:0; transition:background .2s,color .2s; }
.csi-item.active .csi-circle { background:var(--accent); color:#fff; }
.csi-item.done   .csi-circle { background:var(--success); color:#fff; }
.csi-connector { flex:1; height:2px; background:#e2e8f0; margin:0 10px; min-width:24px; transition:background .2s; }
.csi-connector.done { background:var(--success); }

/* ─── CONTRATO TWO-COL LAYOUT ─── */
.contrato-two-col { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.contrato-col { display:flex; flex-direction:column; gap:0; }
@media (max-width:640px) { .contrato-two-col { grid-template-columns:1fr; } }

/* ─── SUMMARY ─── */
.summary-box { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 18px; }
.summary-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); font-size:15px; }
.summary-row:last-child { border-bottom:none; }
.summary-key { color:var(--text2); }
.summary-val { font-weight:700; color:var(--text); }
.summary-total .summary-key { font-weight:700; color:var(--text); font-size:16px; }
.summary-total .summary-val { color:var(--accent2); font-size:20px; font-weight:900; }

/* ─── PROP DETAIL ─── */
.prop-detail-header { background:linear-gradient(135deg, #2ecc71 0%, #1a8a4a 100%); border-radius:var(--radius-lg); padding:24px; margin-bottom:22px; color:white; position:relative; overflow:hidden; box-shadow:var(--shadow); }
.prop-detail-header::before { content:''; position:absolute; top:-40px; right:40px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,rgba(46,204,113,0.2),transparent 70%); }
.prop-detail-address { font-size:22px; font-weight:800; letter-spacing:-0.5px; position:relative; z-index:1; }
.prop-detail-code { font-size:14px; opacity:.6; margin-bottom:6px; font-weight:600; letter-spacing:1px; text-transform:uppercase; position:relative; z-index:1; }
.prop-detail-grid { display:flex; flex-wrap:wrap; gap:20px; margin-top:16px; position:relative; z-index:1; }
.prop-detail-item label { font-size:10px; opacity:.6; text-transform:uppercase; letter-spacing:1px; font-weight:700; display:block; margin-bottom:2px; }
.prop-detail-item span { font-size:16px; font-weight:700; }

/* ─── PROP FILTROS ─── */
.prop-filtro-btn { padding:5px 14px; border-radius:20px; border:1.5px solid #b8dfc4; background:white; color:#1a3d2b; font-size:14px; font-weight:600; cursor:pointer; transition:all .15s; }
.prop-filtro-btn.active { background:#1a8a4a; color:white; border-color:#1a8a4a; }
.prop-filtro-btn:hover:not(.active) { background:#eaf7ef; }

/* ─── LIQUIDACIÓN ─── */
.liq-row { display:grid; grid-template-columns:1fr 160px 36px; gap:8px; align-items:center; margin-bottom:8px; }
.liq-total-box { background:linear-gradient(135deg,#27ae60,#1a8a4a); color:white; border-radius:12px; padding:18px 24px; display:flex; justify-content:space-between; align-items:center; margin-top:16px; }
.liq-total-label { font-size:15px; font-weight:600; opacity:.85; }
.liq-total-val { font-size:28px; font-weight:900; letter-spacing:-1px; }

/* ─── MISC ─── */
.divider { height:1px; background:var(--border); margin:16px 0; }
.search-box { display:flex; align-items:center; gap:7px; background:white; border:1.5px solid var(--border); border-radius:var(--radius); padding:0 12px; height:38px; }
.search-box input { background:transparent; border:none; flex:1; padding:0; font-size:15px; color:var(--text); }
.search-box input::placeholder { color:var(--text4); }
.search-box input:focus { outline:none; box-shadow:none; border:none; }

.tabs { display:flex; gap:2px; border-bottom:2px solid var(--border); margin-bottom:20px; overflow-x:auto; }
.tab { padding:9px 16px; font-size:14.5px; font-weight:600; cursor:pointer; color:var(--text3); border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .18s; border-radius:var(--radius-sm) var(--radius-sm) 0 0; white-space:nowrap; }
.tab:hover { color:var(--text); background:var(--surface2); }
.tab.active { color:var(--accent2); border-bottom-color:var(--accent); }

/* ─── ALERTS ─── */
.alert { display:flex; align-items:flex-start; gap:10px; padding:11px 15px; border-radius:var(--radius); font-size:15px; line-height:1.5; margin-bottom:16px; }
.alert-warning { background:var(--warning-lt); border:1px solid rgba(245,158,11,.2); color:#92400e; }
.alert-danger  { background:var(--danger-lt);  border:1px solid rgba(244,63,94,.2); color:var(--danger); }
.alert-info    { background:var(--info-lt);    border:1px solid rgba(99,102,241,.2); color:var(--info); }
.alert-success { background:var(--success-lt); border:1px solid rgba(16,185,129,.2); color:var(--accent2); }

/* ─── EVENT/PRIORITY ─── */
.event-item { display:flex; align-items:flex-start; gap:10px; padding:11px 13px; border-radius:var(--radius); background:var(--surface2); border:1px solid var(--border); margin-bottom:7px; }
.event-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-top:5px; }
.event-dot.dot-danger { background:var(--danger); }
.event-dot.dot-warning { background:var(--warning); }
.event-dot.dot-info { background:var(--info); }
.event-dot.dot-success { background:var(--success); }
.event-text { font-size:14.5px; color:var(--text2); flex:1; line-height:1.5; }
.event-text strong { color:var(--text); font-weight:600; }
.priority-item { display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); margin-bottom:7px; box-shadow:var(--shadow-sm); }
.priority-rank { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; }
.priority-rank.r1 { background:var(--danger-lt); color:var(--danger); }
.priority-rank.r2 { background:var(--warning-lt); color:#b45309; }
.priority-rank.r3 { background:var(--info-lt); color:var(--info); }
.priority-info { flex:1; min-width:0; }
.priority-name { font-weight:600; color:var(--text); font-size:15px; }
.priority-sub { font-size:13.5px; color:var(--text3); margin-top:2px; }
.priority-amount { font-size:16px; font-weight:800; color:var(--danger); flex-shrink:0; }

/* ─── CHART ─── */
.bar-chart { display:flex; align-items:flex-end; gap:8px; height:140px; }
.bar-group { display:flex; gap:2px; flex:1; align-items:flex-end; height:100%; }
.bar { flex:1; border-radius:4px 4px 0 0; min-width:8px; cursor:pointer; transition:opacity .2s; }
.bar:hover { opacity:.75; }
.bar-paid    { background:#2ecc71; }
.bar-pending { background:#f39c12; }
.bar-expired { background:#e74c3c; }
.chart-x { display:flex; gap:8px; padding:6px 4px 0; }
.chart-x-label { flex:1; text-align:center; font-size:10px; color:var(--text3); font-weight:500; }
.chart-legend { display:flex; gap:14px; margin-top:12px; flex-wrap:wrap; }
.legend-item { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--text3); }
.legend-dot { width:8px; height:8px; border-radius:3px; flex-shrink:0; }

/* ─── TOAST ─── */
.toast { position:fixed; bottom:24px; right:24px; background:#1a3d2b; color:white; border-radius:var(--radius); padding:12px 18px; display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-lg); z-index:9999; transform:translateY(80px); opacity:0; transition:all .3s cubic-bezier(.34,1.56,.64,1); max-width:360px; font-size:15px; font-weight:500; border-left:3px solid var(--accent); }
.toast.show { transform:translateY(0); opacity:1; }

/* ─── CHAT ─── */
.chat-fab { position:fixed; bottom:24px; right:24px; width:52px; height:52px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 18px rgba(46,204,113,0.45); z-index:500; transition:transform .2s; border:none; }
.chat-fab:hover { transform:scale(1.08); }
.chat-panel { position:fixed; bottom:88px; right:24px; width:330px; max-height:calc(100vh - 110px); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); z-index:500; display:flex; flex-direction:column; transform:scale(.88) translateY(16px); transform-origin:bottom right; opacity:0; pointer-events:none; transition:all .25s cubic-bezier(.34,1.4,.64,1); }
.chat-panel.open { transform:scale(1) translateY(0); opacity:1; pointer-events:all; }
.chat-panel-header { padding:13px 15px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:9px; background:#1a3d2b; border-radius:var(--radius-xl) var(--radius-xl) 0 0; flex-shrink:0; }
.chat-panel-header * { color:white !important; }
.chat-status-dot { width:8px; height:8px; border-radius:50%; background:#4ade80; flex-shrink:0; box-shadow:0 0 0 2px rgba(74,222,128,.3); }
.chat-msgs { flex:1; min-height:120px; max-height:260px; padding:12px; overflow-y:auto; display:flex; flex-direction:column; gap:9px; }
.chat-msg { max-width:82%; padding:8px 11px; border-radius:10px; font-size:15px; line-height:1.45; }
.chat-msg.bot { background:var(--surface2); color:var(--text2); align-self:flex-start; border-radius:3px 10px 10px 10px; }
.chat-msg.user { background:var(--accent); color:white; align-self:flex-end; border-radius:10px 3px 10px 10px; }
.chat-input-row { padding:10px 11px; border-top:1px solid var(--border); display:flex; gap:7px; flex-shrink:0; }
.chat-input-row input { flex:1; border:1.5px solid var(--border); border-radius:8px; padding:8px 10px; font-size:17px; outline:none; }
.chat-input-row input:focus { border-color:var(--accent); }
/* Typing dots animation */
@keyframes uc-blink { 0%,100%{opacity:.2} 50%{opacity:1} }
.uc-dots { display:inline-block; }
.uc-dots::after { content:''; animation:uc-blink 1.2s infinite; }
/* Chat unread pulse */
@keyframes chat-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:.7} }

/* ─── PROPIEDADES TOOLBAR ─── */
.props-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.props-seg { display:inline-flex; background:#f1f5f9; border-radius:10px; padding:3px; gap:2px; flex-shrink:0; }
.props-seg-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 14px; border-radius:8px; border:none; background:transparent; color:#64748b; font-size:14.5px; font-weight:600; cursor:pointer; transition:all .18s; white-space:nowrap; height:32px; }
.props-seg-btn.props-seg-on { background:#fff; color:#1a8a4a; box-shadow:0 1px 4px rgba(0,0,0,.1); }
.props-search-box { flex:1; min-width:160px; max-width:320px; display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid var(--border); border-radius:9px; padding:7px 12px; }
.props-search-box:focus-within { border-color:var(--accent); }
.props-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; margin-left:auto; flex-wrap:wrap; }
.props-filter-wrap { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1.5px solid var(--border); border-radius:8px; padding:5px 8px 5px 10px; cursor:pointer; height:32px; }
.props-filter-wrap:focus-within { border-color:var(--accent); }
.props-filter-select { appearance:none; -webkit-appearance:none; border:none; outline:none; background:transparent; font-size:14.5px; font-weight:500; color:var(--text); cursor:pointer; padding:0; min-width:0; }
.col-drop-item { display:flex; align-items:center; gap:8px; padding:7px 14px; cursor:pointer; font-size:14.5px; color:var(--text2); transition:background .12s; }
.col-drop-item:hover { background:#f8fafc; }
.col-drop-item i { font-size:16px; color:#94a3b8; width:16px; flex-shrink:0; }
.col-drop-item input[type=checkbox] { width:15px; height:15px; accent-color:var(--accent); flex-shrink:0; }
@media(max-width:640px) {
  .props-toolbar { gap:8px; }
  .props-search-box { min-width:100%; order:3; }
  .props-actions { margin-left:0; }
  .hide-sm { display:none; }
}

/* ─── VOUCHER MES LABEL ─── */
.gen-mes-lbl { display:flex; align-items:center; gap:4px; background:var(--surface2); border:1.5px solid transparent; border-radius:8px; padding:7px 6px; cursor:pointer; font-size:14.5px; font-weight:600; transition:all .12s; user-select:none; }
.gen-mes-lbl:hover { background:#e6f9ef; border-color:#b8dfc4; }
.gen-mes-lbl:has(input:checked) { background:#e6f9ef; border-color:#2ecc71; color:#1a8a4a; }
.gen-mes-lbl input[type=checkbox] { accent-color:#2ecc71; width:13px; height:13px; flex-shrink:0; }
@media(max-width:600px) { #modalGenVoucher .modal > .modal-body > div[style*="grid-template-columns:1fr 200px"] { grid-template-columns:1fr; } }

/* ─── EMPTY ─── */
.empty-state { text-align:center; padding:48px 20px; }
.empty-icon { font-size:44px; opacity:.2; margin-bottom:12px; }
.empty-title { font-size:16px; font-weight:700; color:var(--text2); margin-bottom:5px; }
.empty-text { font-size:14.5px; color:var(--text3); }

/* ─── SCROLLBAR ─── */
html { scrollbar-width: auto; scrollbar-color: #90a4ae #e8edf2; }
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-track { background:#e8edf2; }
::-webkit-scrollbar-thumb { background:#90a4ae; border-radius:6px; border:2px solid #e8edf2; }
::-webkit-scrollbar-thumb:hover { background:#546e7a; }

/* ═══════════════════════
   RESPONSIVE
═══════════════════════ */
@media(max-width:1024px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .grid-2,.grid-3 { grid-template-columns:1fr; }
  /* Grid de propiedades: 2 cols en tablet */
  #propActivasGrid, #propArchivadasGrid, #propGrid {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Dashboard charts: 2 cols en tablet, Propiedades recientes a full width */
  .dash-charts-grid { grid-template-columns:1fr 1fr; }
  .dash-charts-grid > .card:last-child { grid-column:1 / -1; }
  /* Stat value más pequeño en 2-col */
  .stat-value { font-size:24px; letter-spacing:-1px; }
}
@media(max-width:768px) {
  :root { --sidebar-w:0px; --sidebar-collapsed-w:44px; }
  .sidebar { width:44px; transform:none; transition:none; top:var(--topbar-h); padding-bottom:env(safe-area-inset-bottom); box-shadow:none; }
  .drawer-header { display:none !important; }
  #sidebarCollapseBtn { display:none !important; }
  /* Grid de propiedades: 1 col en mobile, 2 en tablet */
  #propActivasGrid, #propArchivadasGrid, #propGrid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .topbar { padding:0 14px; }
  .main-content { margin-left:44px; width:calc(100% - 44px); }
  #sidebarMenuBtn { display:none; }
  .btn-menu { display:none; }
  .content-area { padding:14px 16px; }
  .stats-grid { grid-template-columns:1fr 1fr; gap:10px; }
  #dashChartsGrid { grid-template-columns:1fr !important; }
  #contactSearchBar { flex-direction:column; align-items:stretch; }
  #contactSearchBar .contact-sep { display:none; }
  #contactSearchBar input, #contactSearchBar select { width:100%; flex:none; }
  #contactSecondBar { flex-direction:column; align-items:flex-start; }
  #contactGrid { overflow-x:auto; }
  .form-row-2,.form-row-3 { grid-template-columns:1fr; }
  .hide-mobile { display:none !important; }
  .modal { max-height:95vh; }
  .modal-body { padding:14px 16px; }
  .modal-footer { padding:10px 16px; }
  .prop-tipo-grid { grid-template-columns:repeat(2,1fr); gap:6px; }
  .prop-tipo-card { padding:10px 4px; font-size:18px; }
  .prop-num-grid { grid-template-columns:repeat(2,1fr); }
  .chat-panel { width:calc(100vw - 20px); right:10px; bottom:78px; max-height:calc(100svh - 95px); border-radius:16px; }
  .chat-msgs { max-height:calc(100svh - 260px); }
  .chat-input-row input { font-size:18px !important; } /* evita zoom en iOS */
  .chat-fab { bottom:16px; right:10px; }
  .toast { bottom:16px; right:16px; }
  .toast { left:16px; max-width:100%; }
  /* Voucher modal: input row stacks on mobile */
  .voucher-item-row { grid-template-columns:1fr 1fr !important; }
  .voucher-item-row .voucher-add-btn { grid-column:1/-1; }
}
@media(max-width:480px) {
  .stats-grid { grid-template-columns:1fr; }
  .topbar-actions .btn:not(.btn-menu):not(.btn-icon):not(.profile-btn) { display:none; }
  /* Topbar: ocultar búsqueda y texto Ayuda en móvil pequeño */
  .topbar-search-wrap { display:none; }
  .ayuda-label { display:none; }
  #ayudaDropdownWrap > button { padding:0 8px; }
  /* Notif panel: centrado en pantallas pequeñas */
  #notifPanel { position:fixed; left:8px; right:8px; width:auto; top:calc(var(--topbar-h) + 6px); }
  /* Topbar gap mínimo */
  .topbar { gap:6px; padding:0 8px; }
  /* Voucher item inputs full stack */
  .voucher-item-row { grid-template-columns:1fr !important; }
  /* Dashboard charts: 1 col en móvil */
  .dash-charts-grid { grid-template-columns:1fr; }
  .dash-charts-grid > .card:last-child { grid-column:auto; }
  /* Chart canvas más bajo en móvil */
  .chart-wrapper-lg { height:160px; }
  /* Stat value vuelve a tamaño cómodo en 1-col */
  .stat-value { font-size:26px; letter-spacing:-1px; }
  /* Tabs con mejor touch target */
  #tabResumen, #tabActividad { padding:10px 14px !important; min-height:42px; }
}

/* ─── VOUCHER PANELS GRID (side-by-side on desktop) ─── */
.voucher-panels-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.voucher-garantia-grid { display:grid; grid-template-columns:1fr 110px 110px 140px auto; gap:10px; align-items:end; }

@media(max-width:900px) {
  .voucher-panels-grid { grid-template-columns:1fr !important; }
  .voucher-garantia-grid { grid-template-columns:1fr 1fr !important; }
  .voucher-garantia-grid > div:last-child { grid-column:1/-1; }
}
@media(max-width:480px) {
  .voucher-garantia-grid { grid-template-columns:1fr !important; }
}

/* ─── BARRA INDICADORES (UF / UTM) ─── */
.indicadores-bar {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 8px 22px;
  font-size: 14px;
  color: var(--text3);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  flex-shrink: 0;
}
.ind-item { white-space: nowrap; }
.ind-sep  { color: var(--border); }

@media(max-width:768px) {
  .indicadores-bar {
    padding: 7px 14px;
    font-size: 13px;
    gap: 4px 8px;
  }
  .ind-sep { display: none; }           /* ocultar | en mobile */
  .ind-item {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 13px;
  }
}

/* ─── LOGIN LIGHT INPUTS (matches screenshot) ─── */
#loginScreen label.form-label { color: #2c3e50; font-weight: 600; }
#loginScreen input:focus { border-color: #2ecc71; box-shadow: 0 0 0 3px rgba(46,204,113,0.15); }

/* ─── COLUMNAS DROPDOWN ─── */
.col-drop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 15px;
  color: var(--text2);
  font-weight: 500;
  transition: background .15s;
  border-radius: 6px;
  margin: 1px 4px;
}
.col-drop-item:hover { background: var(--surface2); color: var(--text); }
.col-drop-item input[type=checkbox] {
  width: 15px; height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  border: none;
  background: transparent;
}

input:not([type=checkbox]):not([type=radio]):not([type=file]) {
  background: #f8fffe;
  border: 1.5px solid #d0e8d8;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
input:not([type=checkbox]):not([type=radio]):not([type=file]),
select, textarea {
  height: 46px !important;
  padding: 11px 16px !important;
  background: #f8fffe !important;
  border: 1.5px solid #d0e8d8 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  font-size: 16px !important;
  width: 100% !important;
}
input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,
select:focus, textarea:focus {
  border-color: #2ecc71 !important;
  background: white !important;
  box-shadow: 0 0 0 3px rgba(46,204,113,0.15) !important;
  outline: none !important;
}
input:not([type=checkbox]):not([type=radio]):not([type=file]):hover,
select:hover {
  border-color: #2ecc71 !important;
  background: white !important;
}
textarea {
  height: auto !important;
  min-height: 90px !important;
}
  border-color: #2ecc71;
  background: white;
  box-shadow: 0 0 0 3px rgba(46,204,113,0.15);
}
input:not([type=checkbox]):not([type=radio]):not([type=file]):hover {
  border-color: #2ecc71;
  background: white;
}

/* ═══════════════════════════════════════════════════════
   NUVO — Iconos Profesionales (Tabler Icons)
   ═══════════════════════════════════════════════════════ */

/* Icono en sidebar nav */
.nav-icon i.ti {
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-item.active .nav-icon i.ti { color: white; }
.nav-item:not(.active) .nav-icon i.ti { color: #3d6b4f; }

/* Icono en menú hamburger */
.btn-menu i.ti { font-size: 22px; line-height: 1; pointer-events: none; }

/* Icono en botón perfil */
.profile-btn i.ti { font-size: 20px; pointer-events: none; }

/* Iconos en menú de perfil */
.profile-menu-item i.ti {
  font-size: 17px;
  width: 18px;
  flex-shrink: 0;
  opacity: .75;
}
.profile-menu-item.danger i.ti { color: var(--danger); opacity: 1; }

/* Iconos en encabezados de página */
.ph-icon {
  font-size: 22px;
  margin-right: 8px;
  opacity: .7;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* ═══════════════════════════════════════════════════════
   NUVO — Responsive Mobile & Tablet (mejorado)
   ═══════════════════════════════════════════════════════ */

/* Contenedores de tablas con scroll horizontal */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media(max-width:1024px) {
  .content-area { padding: 18px 20px; }
}

@media(max-width:768px) {
  /* Page header */
  .page-header { padding: 14px 16px; margin-bottom: 14px; }
  .page-header-title { font-size: 19px; }
  .page-header-actions { gap: 6px; }
  .page-header-actions .btn { padding: 6px 12px; font-size: 14px; }

  /* Stats cards */
  .stat-value { font-size: 23px; letter-spacing: -1px; }
  .stat-card { padding: 12px 14px; }
  .stat-label { font-size: 11px; }

  /* Cards */
  .card { padding: 14px; }
  .section-title { font-size: 17px; }

  /* Topbar */
  .topbar { gap: 8px; padding: 0 14px 0 14px; }
  .topbar-search-wrap { width: 160px; }
  .emp-area { min-width: 0; flex: 1; overflow: hidden; }
  #topbarEmpresaNombre { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
  #topbarEmpresaRut { display: none; }

  /* Tablas - scroll horizontal en mobile */
  #propActivasGrid, #propArchivadasGrid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #propGrid { min-width: 640px; }
  .modal-body { overflow-x: auto; }

  /* Section header en mobile */
  .section-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .section-actions { flex-wrap: wrap; width: 100%; }

  /* Modal footer en mobile */
  .modal-footer { padding: 10px 14px; gap: 8px; flex-wrap: wrap; }
  .modal-footer .btn { flex: 1; justify-content: center; min-width: 100px; }
}

/* Modales: bottom sheet en pantallas pequeñas */
@media(max-width:600px) {
  .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .modal {
    border-radius: 20px 20px 0 0 !important;
    max-height: 93vh !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .modal-header-inner {
    border-radius: 20px 20px 0 0 !important;
  }
}

@media(max-width:480px) {
  /* Stats: 2 columnas mínimo */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-value { font-size: 18px; }

  /* Topbar: ocultar nombre de empresa en móviles muy pequeños */
  .emp-area { display: none; }

  /* Reducir padding content-area */
  .content-area { padding: 10px 12px; }
  .page-header { padding: 12px 14px; }
  .page-header-title { font-size: 15px; }

  /* Botones de página: solo icono en muy small */
  .page-header-actions .hide-xs { display: none !important; }

  /* Nav items: mayor área táctil */
  .nav-item { padding: 12px 12px; }
}

/* ── hide-xs ── */


/* ═══════════════════════════════════════════════════════
   NUVO — Chat Admin Panel
   ═══════════════════════════════════════════════════════ */

/* Toggle switch */
.toggle-track {
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:#cbd5e1;border-radius:99px;transition:background .2s;
  cursor:pointer;
}
.toggle-track::before {
  content:'';position:absolute;width:18px;height:18px;
  left:3px;bottom:3px;background:#fff;border-radius:50%;
  transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.15);
}
input:checked + .toggle-track { background:#2ecc71; }
input:checked + .toggle-track::before { transform:translateX(22px); }

/* Días checkbox */
.dia-check {
  display:flex;align-items:center;gap:4px;
  font-size:14px;color:#4a5568;cursor:pointer;
  background:#f8fafc;border:1px solid #e2e8f0;
  padding:4px 10px;border-radius:6px;transition:all .15s;
}
.dia-check input { accent-color:#2ecc71 }
.dia-check:has(input:checked) { background:#e6f9ef;border-color:#bbf7d0;color:#166534 }

/* Chat layout responsive */
@media(max-width:900px) {
  #chatLayout { grid-template-columns:1fr !important; }
  #chatMensajesPanel { min-height:400px; }
}

/* Scrollbar chat delgado */
#chatMensajesArea::-webkit-scrollbar,
#chatSesionesList::-webkit-scrollbar { width:4px }
#chatMensajesArea::-webkit-scrollbar-thumb,
#chatSesionesList::-webkit-scrollbar-thumb { background:#e2e8f0;border-radius:4px }

/* ═══════════════════════════════════════════════════════
   NUVO — Responsive v3 — Mobile & Tablet Layout
   ═══════════════════════════════════════════════════════ */

/* ── Utility classes responsive ────────────────────────── */
.show-mobile { display: none !important; }   /* aparece < 768px */
.show-tablet { display: none !important; }   /* aparece 769-1024px */
.show-desktop { display: block !important; } /* aparece > 1024px */

.hide-sm { /* oculta < 480px */ }
.hide-md { /* oculta < 768px  — alias de hide-mobile */ }
.hide-lg { /* oculta < 1024px */ }

/* ── Botones táctiles WCAG: min 44×44 en mobile ─────────── */
@media (max-width: 768px) {
  .btn, .btn-sm, button.btn, a.btn {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .btn-icon, .btn-sm.btn-icon {
    min-width: 44px;
    min-height: 44px;
  }
  /* Form inputs también más altos para touch */
  input[type="text"], input[type="number"], input[type="email"], input[type="password"],
  input[type="date"], input[type="tel"], input[type="search"], select, textarea {
    min-height: 44px;
    font-size: 16px; /* evita zoom automático en iOS */
  }
  /* Padding lateral consistente en mobile */
  .content-area, .page, .page-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ── Responsive utility breakpoints ────────────────────── */
@media (max-width: 480px) {
  .hide-sm { display: none !important; }
}
@media (max-width: 768px) {
  .hide-md { display: none !important; }
}
@media (max-width: 1024px) {
  .hide-lg { display: none !important; }
  .show-desktop { display: none !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .show-tablet { display: block !important; }
}

/* ── Grid reutilizables con colapso responsive ── */
.prop-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
  align-items: start;
}
.prop-2col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.periodo-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.garantia-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

/* ── Tablet: 768px – 1024px ── */
@media (max-width: 1024px) {
  .prop-detail-grid { gap: 12px; }
  .periodo-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .garantia-info-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Mobile: ≤768px ── */
@media (max-width: 768px) {
  /* Mostrar en mobile */
  .show-mobile { display: block !important; }

  /* Modales flexibles: cualquier modal con max-width hardcoded se ajusta al viewport */
  .modal {
    max-width: 95vw !important;
    width: 95% !important;
    margin: 10px auto !important;
  }
  /* Form rows internos: apilar verticalmente (si no ya lo hacen) */
  .modal .form-row, .modal .form-row-2, .modal .form-row-3 {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }
  /* Stepper de contrato: que se adapte */
  .contrato-steps { flex-wrap: wrap !important; gap: 8px !important; justify-content: center; }
  .contrato-steps .csi-item { min-width: auto !important; }
  /* Modal footer con botones stackeables en muy pequeño */
  .modal-footer { flex-wrap: wrap; gap: 8px; }
  .modal-footer .btn { flex: 1; min-width: 120px; }

  /* Property detail: 2 cols → 1 col */
  .prop-detail-grid { grid-template-columns: 1fr !important; gap: 10px; margin-bottom: 10px; }

  /* Tipo de propiedad: 4 cols → 2 cols */
  .prop-tipo-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  /* Cards de período y garantía */
  .periodo-cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .garantia-info-grid { grid-template-columns: 1fr !important; }

  /* Tablas con scroll horizontal */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 580px; }

  /* Botones: tamaño táctil mínimo */
  .btn-sm { min-height: 36px; }
  .nav-item { min-height: 44px; }

  /* Page header: apilar en mobile */
  .page-header { flex-direction: column; align-items: flex-start; }
  .page-header > div:first-child { flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; }
  .page-header-sub { padding-left: 0; border-left: none; }
  .page-header-actions { width: 100%; flex-wrap: wrap; }
  .page-header-actions .btn { flex: 1; min-width: 100px; justify-content: center; }

  /* Section header */
  .section-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .section-actions { flex-wrap: wrap; width: 100%; gap: 6px; }

  /* Modal full-width en mobile */
  .modal { max-width: calc(100vw - 24px) !important; }

  /* Cards: padding reducido */
  .card { padding: 14px 12px; }
}

/* ── Mobile pequeño: ≤480px ── */
@media (max-width: 480px) {
  /* Prop-tipo: 2 cols mínimo */
  .prop-tipo-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Reducir texto en page-header en pantallas muy chicas */
  .page-header-title { font-size: 16px !important; }
  .page-header-actions .btn { font-size: 13px; padding: 5px 10px; }

  /* Ocultar columnas menos críticas en tablas */
  .table-wrap table { min-width: 480px; }

  /* Cards de período: 1 col en muy pequeño */
  .periodo-cards-grid { grid-template-columns: 1fr 1fr !important; }

  /* Stat cards: 2 cols */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* Reducir padding global */
  .content-area { padding: 10px !important; }
}

/* ── hide-xs: ocultar texto en pantallas muy pequeñas ── */

/* ── hide-xs: ocultar texto en pantallas muy pequeñas ── */
@media (max-width: 480px) {
  .hide-xs { display: none !important; }
}

/* ── Vouchers: tabla con scroll correcto en mobile ── */
@media (max-width: 768px) {
  #page-vouchers .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  #page-vouchers table { min-width: 640px; }
  #page-vouchers .page-header { flex-direction: column; align-items: flex-start; }
  #page-vouchers .page-header-actions { width: 100%; flex-wrap: wrap; gap: 6px; }
  #page-vouchers .page-header-actions input { max-width: 100% !important; width: 100% !important; }
  #page-vouchers .stats-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
}

/* ── Profile menu: siempre al lado derecho ── */
.profile-menu { right: 0 !important; left: auto !important; max-width: 200px; }
@media(max-width:480px) {
  .profile-menu { right: 0 !important; left: auto !important; width: 200px; max-width: 200px; position: fixed !important; top: auto !important; }
}

/* ── Modal Cambiar Clave: siempre centrado en mobile ── */
@media (max-width: 600px) {
  #modalCambiarClave { align-items: center !important; }
  #modalCambiarClave .modal { margin: auto !important; border-radius: 16px !important; width: 92vw !important; max-width: 92vw !important; }
}

/* ── Voucher: filtro y búsqueda en móvil ── */
@media(max-width:640px) {
  /* Buscador ancho completo */
  #buscadorVoucher { width:100% !important; }

  /* Dropdown: bottom-sheet sobre toda la pantalla */
  #filtroDropdown {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    bottom: 0 !important; top: auto !important;
    width: 100vw !important; max-width: 100vw !important;
    z-index: 9999 !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -6px 32px rgba(0,0,0,0.22) !important;
    padding: 20px 18px 32px !important;
    max-height: 80vh !important; overflow-y: auto !important;
  }
  /* Texto legible dentro del filtro */
  #filtroDropdown .filtro-handle { display:block !important; }
  #filtroDropdown label { font-size:14px !important; gap:8px !important; padding:4px 0 !important; }
  #filtroDropdown input[type=checkbox] { width:18px !important; height:18px !important; }
  #filtroDropdown div[style*="grid-template-columns"] { grid-template-columns: repeat(3,1fr) !important; gap:10px !important; }
  #filtroDropdown .btn { padding:12px !important; font-size:14px !important; }

  /* Header de vouchers: apilar en mobile */
  #page-vouchers .page-header-actions { flex-direction:column; align-items:stretch; }
  #page-vouchers .page-header-actions > * { width:100%; }
  #page-vouchers .page-header-actions button { justify-content:center; }
}

/* ── Admin Chat: responsive móvil/tablet ── */
@media(max-width:768px) {
  #chatLayout {
    grid-template-columns: 1fr !important;
    height: calc(100vh - 220px) !important;
  }
  /* Por defecto en móvil: muestra lista, oculta mensajes */
  #chatLayout #chatMensajesPanel {
    display: none !important;
  }
  /* Cuando hay conversación activa: oculta lista, muestra mensajes */
  #chatLayout.chat-conv-activa > div:first-child {
    display: none !important;
  }
  #chatLayout.chat-conv-activa #chatMensajesPanel {
    display: flex !important;
  }
  /* Tabs de chat que se ajusten en móvil */
  #page-chat > div:nth-child(2) {
    flex-wrap: wrap;
    gap: 4px !important;
  }
  #page-chat > div:nth-child(2) .btn {
    font-size: 11px !important;
    padding: 5px 8px !important;
  }
}
@media(max-width:480px) {
  #chatLayout {
    height: calc(100vh - 200px) !important;
  }
}

/* ══ TOPBAR MOBILE: logo NUVO centrado, perfil a la derecha ══════════════ */
@media(max-width:768px) {
  .topbar { padding:0 10px; gap:6px; }

  /* Ocultar nombre/RUT empresa, mostrar solo NUVO brand */
  #topbarEmpresaNombre, #topbarEmpresaRut { display:none !important; }
  .topbar-nuvo-brand { display:block !important; }

  /* emp-area centrado */
  .emp-area { justify-content:center; flex:1; }

  /* Ocultar buscador y botón Ayuda en mobile */
  #topbarSearchWrap, #ayudaDropdownWrap { display:none !important; }

  /* topbar-actions al extremo derecho */
  .topbar-actions { margin-left:auto; gap:6px; }
}

/* ══ LOGIN / PÁGINA NUVO: responsive mobile ══════════════════════════════ */
#loginScreen {
  overflow-y: auto !important;
  align-items: flex-start !important;
}
@media(max-width:480px) {
  #loginScreen {
    padding: 16px 12px !important;
    align-items: flex-start !important;
  }
  #loginScreen > div:last-child {
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 12px;
  }
  #loginScreen > div:first-child {
    /* Botones de idioma */
    top: 10px !important;
    right: 10px !important;
  }
  /* Formularios de login */
  #loginForm, #loginAdminSection > div,
  #loginPropSection > div:last-child { padding:20px 16px !important; }

  /* Selector de portal */
  #portalAdminBtn, #portalPropBtn { padding:10px 6px !important; font-size:12px !important; }
}

/* ════════ DRAWER LATERAL DE FILTROS DE VOUCHERS ════════ */
.filtro-drawer { position: fixed; inset: 0; z-index: 9500; pointer-events: none; }
.filtro-drawer.is-open { pointer-events: auto; }
.filtro-drawer-backdrop {
  position: absolute; inset: 0; background: rgba(15,23,42,0);
  transition: background .25s ease; backdrop-filter: blur(0px);
}
.filtro-drawer.is-open .filtro-drawer-backdrop {
  background: rgba(15,23,42,.45); backdrop-filter: blur(3px);
}
.filtro-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 92vw; background: #ffffff;
  box-shadow: -8px 0 32px rgba(15,23,42,.18);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.32,.72,.36,1);
}
.filtro-drawer.is-open .filtro-drawer-panel { transform: translateX(0); }
.filtro-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg,#f8fafc,#f1f5f9);
  position: sticky; top: 0; z-index: 2;
}
.filtro-drawer-close {
  background: white; border: 1.5px solid var(--border); border-radius: 8px;
  width: 32px; height: 32px; cursor: pointer; color: #64748b;
  font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.filtro-drawer-close:hover { background: #f1f5f9; color: #1e293b; }
.filtro-drawer-activos {
  padding: 14px 20px; background: #f0fdf4; border-bottom: 1px solid #bbf7d0;
}
.filtro-drawer-body {
  flex: 1; overflow-y: auto; padding: 20px; -webkit-overflow-scrolling: touch;
}
.filtro-drawer-section { margin-bottom: 22px; }
.filtro-drawer-section:last-child { margin-bottom: 0; }
.filtro-drawer-section h3 {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.2px; color: #1e293b; margin: 0 0 12px;
  padding-bottom: 6px; border-bottom: 2px solid #e2e8f0;
}
.filtro-drawer-label {
  display: block; font-size: 11.5px; font-weight: 700;
  color: #64748b; margin-bottom: 6px;
}
.filtro-drawer-meses-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.filtro-drawer-meses-grid button {
  padding: 9px 6px; background: white; border: 1.5px solid var(--border);
  border-radius: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: #475569; transition: all .15s; font-family: inherit;
}
.filtro-drawer-meses-grid button:hover { background: #f1f5f9; border-color: #cbd5e1; }
.filtro-drawer-meses-grid button.is-selected {
  background: #16a34a; border-color: #16a34a; color: white; font-weight: 700;
}
.filtro-drawer-footer {
  padding: 16px 20px; border-top: 1px solid var(--border);
  background: #fafbfc; position: sticky; bottom: 0; z-index: 2;
}

/* Chip de filtro activo (en sección "Filtros activos") */
.filtro-activo-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px 5px 11px; background: white;
  border: 1.5px solid #86efac; border-radius: 99px;
  font-size: 12px; font-weight: 600; color: #166534;
}
.filtro-activo-chip button {
  background: none; border: none; padding: 0; margin: 0;
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; color: #15803d;
}
.filtro-activo-chip button:hover { background: #dcfce7; }

@media (max-width: 768px) {
  .filtro-drawer-panel { width: 92vw; }
  .filtro-drawer-meses-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Filtro de Vouchers — chips de estado seleccionables */
.filtro-chip {
  display:inline-flex; align-items:center; gap:5px; padding:6px 11px;
  font-size:12px; font-weight:600; cursor:pointer;
  background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:99px;
  color:#475569; transition:all .15s; user-select:none;
}
.filtro-chip:hover { border-color:#cbd5e1; background:#f1f5f9; }
.filtro-chip input { display:none; }
.filtro-chip:has(input:checked) {
  background: color-mix(in srgb, currentColor 12%, white);
  border-color: currentColor;
}
.filtro-chip[data-color="#92400e"]:has(input:checked) { color:#92400e; background:#fffbeb; border-color:#fcd34d; }
.filtro-chip[data-color="#166534"]:has(input:checked) { color:#166534; background:#f0fdf4; border-color:#86efac; }
.filtro-chip[data-color="#1e40af"]:has(input:checked) { color:#1e40af; background:#eff6ff; border-color:#93c5fd; }
.filtro-chip[data-color="#991b1b"]:has(input:checked) { color:#991b1b; background:#fef2f2; border-color:#fca5a5; }
.filtro-chip[data-color="#374151"]:has(input:checked) { color:#374151; background:#f3f4f6; border-color:#9ca3af; }
.filtro-chip[data-color="#6b7280"]:has(input:checked) { color:#6b7280; background:#f9fafb; border-color:#d1d5db; }

/* ════════════════════════════════════════════════════════════════════════════
   FIXES UX RESPONSIVE — auditoría 2026-05-08
   Bloque aditivo, no toca reglas anteriores. Reversible eliminándolo entero.
   ════════════════════════════════════════════════════════════════════════════ */

/* P0-1 · Inputs en móvil con font-size >= 16px para evitar zoom auto en iOS Safari.
   iOS Safari hace zoom-in automático al tap si el input tiene <16px, lo que es
   muy molesto en formularios largos. Aplica solo en pantallas <=768px. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* P1-3 · Modales nunca exceden el ancho de la pantalla en móvil.
   Antes: modales con width:600px, 680px, etc. requerían scroll horizontal.
   Ahora: 95vw garantizado en móvil, contenido completo visible. */
@media (max-width: 768px) {
  .modal,
  [class*="modal"] > div[style*="max-width"]:not([style*="100%"]) {
    max-width: 95vw !important;
    width: auto !important;
  }
  .modal input,
  .modal select,
  .modal textarea {
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* P2-1 · Tamaño táctil mínimo 40x40px en móvil para botones-icono.
   Sigue las pautas de Apple HIG (44pt) y Material (48dp). */
@media (max-width: 768px) {
  .btn-icon { min-width: 40px !important; min-height: 40px !important; }
}

/* P3-1 · Focus visible accesible — outline verde de marca en cualquier
   elemento interactivo enfocado por teclado. No afecta clicks (focus-visible). */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* P3-2 · Respetar prefers-reduced-motion — usuarios con sensibilidad
   vestibular o configuración de "reduce motion" del SO. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}