/* assets/css/main.css — Edificio Kados */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
  --navy:       #1a3a5c;
  --navy-dark:  #0f2540;
  --navy-light: #2a5080;
  --gold:       #c8a96e;
  --gold-light: #e8d4a8;
  --cream:      #faf8f4;
  --white:      #ffffff;
  --gray-50:    #f8f9fa;
  --gray-100:   #f0f2f5;
  --gray-200:   #e5e9ef;
  --gray-400:   #707b8b;
  --gray-600:   #4a5568;
  --gray-800:   #1a202c;
  --green:      #2d7a4f;
  --green-bg:   #edf7f2;
  --red:        #c0392b;
  --red-bg:     #fdf0ee;
  --amber:      #d97706;
  --amber-bg:   #fffbeb;
  --radius:     10px;
  --shadow:     0 2px 12px rgba(0,0,0,.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.12);
  --transition: .2s ease;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--gray-800);
  min-height: 100vh;
  line-height: 1.6;
}

/* ── Typography ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4 { font-family: 'DM Serif Display', serif; line-height: 1.2; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
p  { color: var(--gray-600); }
a  { color: var(--navy); text-decoration: none; }
a:hover { color: var(--gold); }

/* ── Login page ─────────────────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0d0d;
  position: relative;
  overflow: hidden;
}
.login-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 80%, rgba(200,169,110,.15) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(200,169,110,.1) 0%, transparent 50%);
}
.login-box {
  background: #141414;
  border-radius: 16px;
  padding: 48px 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  border: 1px solid #222;
  position: relative;
  z-index: 1;
}
.login-logo {
  text-align: center;
  margin-bottom: 32px;
}
.login-logo .building-icon {
  width: 56px;
  height: 56px;
  background: var(--navy);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.login-logo h1 {
  color: var(--navy);
  font-size: 1.6rem;
  margin-bottom: 4px;
}
.login-logo p {
  font-size: 13px;
  color: #888;
}
.login-box .login-logo h1 { color: #fff; }
.login-box .form-label { color: #aaa; }
.login-box .form-control {
  background: #1e1e1e;
  border-color: #333;
  color: #fff;
}
.login-box .form-control:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,169,110,.15);
}
.login-box .form-control::placeholder { color: #555; }
.login-box .password-toggle { color: #777; }
.login-box .password-toggle:hover { color: var(--gold); background: rgba(255,255,255,.06); }

/* ── Layout: Sidebar + Main ─────────────────────────────────────────────── */
.app-layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 260px;
  background: #0d0d0d;
  color: var(--white);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
  transition: transform var(--transition);
}

.sidebar-header {
  padding: 28px 24px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sidebar-header .app-name {
  font-family: 'DM Serif Display', serif;
  font-size: 1.3rem;
  color: var(--white);
  display: block;
}
.sidebar-header .app-sub {
  font-size: 11px;
  color: var(--gold-light);
  letter-spacing: .5px;
  text-transform: uppercase;
}

.sidebar-user {
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidebar-avatar {
  width: 38px;
  height: 38px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--navy-dark);
  flex-shrink: 0;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-role {
  font-size: 11px;
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.sidebar-nav { padding: 16px 12px; flex: 1; }
.nav-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,.22);
  padding: 12px 12px 6px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,.6);
  font-size: 14px;
  font-weight: 500;
  transition: background-color var(--transition), color var(--transition);
  cursor: pointer;
  text-decoration: none;
  margin-bottom: 2px;
}
.nav-item:hover, .nav-item.active {
  background: rgba(255,255,255,.07);
  color: var(--white);
}
.nav-item.active {
  background: rgba(200,169,110,.15);
  color: var(--gold-light);
}
.nav-icon { font-size: 18px; width: 22px; text-align: center; flex-shrink: 0; }
.nav-badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
}

.sidebar-footer {
  padding: 16px 12px;
  border-top: 1px solid rgba(255,255,255,.05);
}

footer {
  position: relative;
  z-index: 10;
}

/* ── Main content ───────────────────────────────────────────────────────── */
.main-content {
  margin-left: 260px;
  flex: 1;
  /* min-width:0 es obligatorio, no cosmético: un flex item arranca en
     min-width:auto, así que no puede encogerse por debajo del ancho de su
     contenido. Sin esta línea, una tabla ancha estiraba .main-content y con él
     la página entera (798px medidos en un viewport de 375), y el
     `overflow-x:auto` de .table-wrap quedaba anulado — en vez de deslizar la
     tabla dentro de su tarjeta, el admin arrastraba toda la pantalla de
     costado y los botones de acción quedaban fuera de vista. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}
/* Es un <h1> (una sola vez por página, en el topbar): antes era un <span> y
   ninguna pantalla de la app tenía encabezados, así que un lector de pantalla no
   podía saltar por estructura. margin/font-weight explícitos para que el cambio
   de etiqueta no altere nada visualmente respecto del span. */
.topbar-title { font-family: 'DM Serif Display', serif; font-size: 1.3rem; color: var(--navy); margin: 0; font-weight: normal; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }

.page-content { padding: 32px; flex: 1; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-title { font-family: 'DM Serif Display', serif; font-size: 1.1rem; color: var(--navy); }
.card-body { padding: 24px; }
.card-footer {
  padding: 16px 24px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100);
}

/* ── Stat cards ─────────────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--navy);
  display: flex;
  align-items: center;
  gap: 16px;
}
.stat-card.green  { border-color: var(--green); }
.stat-card.amber  { border-color: var(--amber); }
.stat-card.red    { border-color: var(--red); }
.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-card.green .stat-icon { background: var(--green-bg); color: var(--green); }
.stat-card.amber .stat-icon { background: var(--amber-bg); color: var(--amber); }
.stat-card.red   .stat-icon { background: var(--red-bg);   color: var(--red); }
.stat-label { font-size: 12px; color: var(--gray-400); text-transform: uppercase; letter-spacing: .5px; }
.stat-value { font-family: 'DM Serif Display', serif; font-size: 1.5rem; color: var(--navy); line-height: 1.1; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.form-control {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  color: var(--gray-800);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-control:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26,58,92,.1);
}
.form-control.error { border-color: var(--red); }
.form-hint { font-size: 12px; color: var(--gray-400); margin-top: 4px; }
.form-error { font-size: 12px; color: var(--red); margin-top: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.password-field { position: relative; }
.password-field .form-control { padding-right: 42px; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--gray-400);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.password-toggle:hover { color: var(--navy); background: var(--gray-100); }
.password-toggle:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  border: none;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform 120ms ease-out;
  text-decoration: none;
  line-height: 1;
}
.btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
}
.btn-primary {
  background: var(--navy);
  color: var(--white);
}
.btn-primary:hover { background: var(--navy-light); color: var(--white); }
.btn-gold {
  background: var(--gold);
  color: var(--navy-dark);
}
.btn-gold:hover { background: #b8995e; color: var(--navy-dark); }
.btn-success { background: var(--green); color: #fff; }
.btn-success:hover { background: #226040; }
.btn-danger  { background: var(--red); color: #fff; }
.btn-danger:hover  { background: #a32a1f; }
.btn-outline {
  background: transparent;
  border: 1.5px solid var(--gray-200);
  color: var(--gray-600);
}
.btn-outline:hover { border-color: var(--navy); color: var(--navy); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-full { width: 100%; justify-content: center; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  background: var(--gray-50);
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--gray-400);
  border-bottom: 1px solid var(--gray-200);
}
tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-600);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--gray-50); }

/* ── Badges / Status ────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.badge-success { background: var(--green-bg); color: var(--green); }
.badge-warning { background: var(--amber-bg); color: var(--amber); }
.badge-danger  { background: var(--red-bg);   color: var(--red); }
.badge-info    { background: #e8f0fe;          color: #1a73e8; }

/* ── Flash messages ─────────────────────────────────────────────────────── */
.flash {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
}
.flash-success { background: var(--green-bg); color: var(--green); }
.flash-error   { background: var(--red-bg);   color: var(--red); }
.flash-icon { font-weight: 700; font-size: 16px; }

/* ── Upload zone ────────────────────────────────────────────────────────── */
.upload-zone {
  border: 2px dashed var(--gray-200);
  border-radius: 10px;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--navy);
  background: rgba(26,58,92,.03);
}
.upload-zone .upload-icon { font-size: 36px; margin-bottom: 10px; }
.upload-zone p { font-size: 14px; color: var(--gray-400); margin: 0; }
.upload-zone strong { color: var(--navy); }

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: var(--white);
  border-radius: 14px;
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow-lg);
  transform: translateY(20px);
  transition: transform var(--transition);
  /* El modal puede tener más contenido del que entra en pantalla (imagen de
     comprobante + formulario + avisos, ver v0.33.0-beta.11) — sin este límite
     el modal crecía más allá del viewport y, como ni el overlay ni el modal
     tenían scroll propio, el pie con los botones quedaba inalcanzable en
     celulares: no había forma de deslizar hasta "Confirmar pago". Ahora el
     modal se recorta a la altura disponible (menos el padding del overlay) y
     solo el body hace scroll — header y footer quedan siempre visibles. */
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}
.modal-overlay.open .modal { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .modal { transition: none; }
  .modal-overlay { transition: opacity 120ms ease; }
}
.modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
}
.modal-title { font-family: 'DM Serif Display', serif; font-size: 1.1rem; color: var(--navy); }
.modal-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--gray-400);
  line-height: 1;
  padding: 2px 6px;
}
.modal-close:hover { color: var(--gray-800); }
.modal-body { padding: 24px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--gray-100);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex: 0 0 auto;
}

/* ── Balance card (residente) ───────────────────────────────────────────── */
.balance-hero {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  border-radius: 14px;
  padding: 32px;
  color: var(--white);
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}
.balance-hero::before {
  content: '';
  position: absolute;
  right: -40px;
  top: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(200,169,110,.15);
}
.balance-hero .apt-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold-light);
  margin-bottom: 8px;
}
.balance-hero .balance-amount {
  font-family: 'DM Serif Display', serif;
  font-size: 2.5rem;
  color: var(--white);
  margin-bottom: 4px;
}
.balance-hero .balance-sub { font-size: 13px; color: rgba(255,255,255,.6); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--navy);
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .main-content {
    margin-left: 0;
  }
  .menu-toggle { display: block; }
  .page-content { padding: 20px 16px; }
  .form-row { grid-template-columns: 1fr; }
  /* minmax(0,…) y no 1fr a secas: una pista `1fr` es `minmax(auto, 1fr)`, y ese
     mínimo `auto` es el min-content de la tarjeta —ícono de 44px + gap + el
     texto—, así que la columna se negaba a encoger y empujaba la página fuera
     del viewport (mismo motivo que el min-width:0 de .main-content). */
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card  { min-width: 0; }
  footer {
    margin-left: 0 !important;
    justify-content: center;
    text-align: center;
  }
}

/* En celular angosto las tarjetas de estadística pasan a una sola columna: a
   375px, dos columnas dejan ~53px útiles para el texto y un valor como
   "Bs 12795.67" en DM Serif 1.5rem no entra sin partirse. */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ── Barra de pestañas ──────────────────────────────────────────────────────
   Las cinco pestañas de Contabilidad suman ~550px, más de lo que entra en un
   celular, y un contenedor flex sin wrap ni scroll empujaba la página entera
   (549px medidos en un viewport de 375). Ahora la barra scrollea sola, que es
   el patrón habitual de tabs en móvil: el contenido no se corta y el resto de
   la página queda quieto. `flex-shrink:0` evita que los botones se compriman
   hasta partir sus etiquetas en dos líneas. */
.tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--gray-200);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.tab-bar .tab-btn { flex-shrink: 0; }

/* ── Apartment grid (admin summary) ─────────────────────────────────────── */
.apt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
.apt-card {
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  transition: all var(--transition);
  position: relative;
}
.apt-card:hover { border-color: var(--navy); box-shadow: var(--shadow); }
.apt-card.has-debt { border-color: var(--amber); }
.apt-card.no-debt  { border-color: var(--green); }
.apt-number {
  font-family: 'DM Serif Display', serif;
  font-size: 1.4rem;
  color: var(--navy);
  display: block;
  margin-bottom: 4px;
}
.apt-balance {
  font-size: 13px;
  font-weight: 600;
}
.apt-balance.debt  { color: var(--amber); }
.apt-balance.clear { color: var(--green); }