/* ============================================================
   SAE-CL Design Tokens & Utilities
   Sistema de Administración de Edificios Chile
   ============================================================ */

:root {
  /* ── Estructura ─────────────────────────────────────────── */
  --sidebar-w:      230px;
  --card-border-w:  4px;
  --collapse-speed: 0.3s;
  --radius-card:    0.5rem;

  /* ── Paleta semántica extendida ─────────────────────────── */
  /* Bootstrap primary/success/danger/info/secondary: se mantienen */

  /* NUEVO: urgencia financiera — recargos, mora próxima, vence pronto */
  --color-urgent:   #fd7e14;
  --color-urgent-10: rgba(253, 126, 20, 0.10);

  /* NUEVO: acción humana pendiente — aprobaciones, revisión, deliberación */
  --color-pending:  #6f42c1;
  --color-pending-10: rgba(111, 66, 193, 0.10);

  /* ── Identidad por rol ──────────────────────────────────── */
  --color-role-admin:      #0d6efd;   /* Azul institucional */
  --color-role-comite:     #457b9d;   /* Azul acero — deliberativo */
  --color-role-conserje:   #1d3557;   /* Azul noche — operacional */
  --color-role-residente:  #2d6a4f;   /* Verde esmeralda — personal */
}

/* ============================================================
   Clases utilitarias de color — complementan Bootstrap
   ============================================================ */

/* Urgente (naranja financiero) */
.bg-urgent              { background-color: var(--color-urgent)    !important; }
.bg-urgent-subtle       { background-color: var(--color-urgent-10) !important; }
.text-urgent            { color: var(--color-urgent)               !important; }
.border-urgent          { border-color: var(--color-urgent)        !important; }
.btn-urgent             { background-color: var(--color-urgent) !important; border-color: var(--color-urgent) !important; color: #fff !important; }
.btn-urgent:hover,
.btn-urgent:focus       { background-color: #e8660a !important; border-color: #e8660a !important; color: #fff !important; }

/* Pendiente (violeta — acción humana requerida) */
.bg-pending             { background-color: var(--color-pending)    !important; }
.bg-pending-subtle      { background-color: var(--color-pending-10) !important; }
.text-pending           { color: var(--color-pending)               !important; }
.border-pending         { border-color: var(--color-pending)        !important; }

/* Identidad de roles */
.bg-role-comite         { background-color: var(--color-role-comite)    !important; }
.bg-role-conserje       { background-color: var(--color-role-conserje)  !important; }
.bg-role-residente      { background-color: var(--color-role-residente) !important; }
.text-role-comite       { color: var(--color-role-comite)               !important; }

/* ============================================================
   Card hover — patrón unificado para todos los dashboards
   ============================================================ */
.card-hover {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}

/* ============================================================
   Headers colapsables — patrón único en todos los dashboards
   ============================================================ */
.card-header-collapse {
  background-color: var(--surface-elevated-1);
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
}
.card-header-collapse:hover {
  background-color: var(--surface-elevated-2);
}
/* Chevron rotativo */
.collapse-icon {
  transition: transform var(--collapse-speed);
  flex-shrink: 0;
}
[data-bs-toggle="collapse"].collapsed .collapse-icon,
.card-header-collapse.collapsed .collapse-icon {
  transform: rotate(-90deg);
}

/* ============================================================
   Conserje — touch targets mínimos para tablet/móvil
   ============================================================ */
.btn-touch {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

/* Bento grid conserje */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 767px) {
  .bento-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .bento-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Accesibilidad — correcciones WCAG AA
   ============================================================ */
/* warning siempre con texto oscuro (nunca text-white sobre bg-warning) */
.bg-warning { color: #000 !important; }
.bg-warning .text-white { color: #000 !important; }

/* ============================================================
   Utilidades menores
   ============================================================ */
.border-start-urgent  { border-left: var(--card-border-w) solid var(--color-urgent)  !important; }
.border-start-pending { border-left: var(--card-border-w) solid var(--color-pending) !important; }

/* ============================================================
   Dashboard Admin — Welcome Banner
   ============================================================ */
.sae-welcome-banner {
  background: linear-gradient(135deg, var(--color-role-admin) 0%, #0a58ca 100%);
  box-shadow: 0 4px 15px rgba(13, 110, 253, 0.25);
}

/* ============================================================
   Dashboard Super Admin — Platform Header + Stat Cards
   ============================================================ */
.sae-platform-header {
  background: linear-gradient(135deg, #1e1b4b 0%, var(--color-pending) 100%);
  border-radius: var(--radius-card);
}

.stat-platform {
  background: var(--color-pending-10);
  border: 1px solid rgba(111, 66, 193, 0.20);
  border-left: var(--card-border-w) solid var(--color-pending);
  border-radius: .75rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat-platform:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(111, 66, 193, 0.15);
}
.stat-platform .stat-icon {
  font-size: 1.8rem;
  color: var(--color-pending);
  opacity: 0.7;
}
.stat-platform .stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-pending);
  line-height: 1;
}
.stat-platform .stat-label {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-plan-basico      { background: var(--surface-elevated-3) !important; }
.badge-plan-profesional { background: var(--accent-primary)   !important; }
.badge-plan-enterprise  { background: var(--color-pending) !important; }

/* ============================================================
   Dark mode — sidebar y layout principal
   ============================================================ */
[data-bs-theme="dark"] #sidebar {
  background: linear-gradient(180deg, var(--sidebar-bg-start), var(--sidebar-bg-end)) !important;
  border-right: 1px solid rgba(255,255,255,0.07);
}

[data-bs-theme="dark"] #sidebar .nav-link {
  color: rgba(248, 250, 252, 0.75);
}

[data-bs-theme="dark"] #sidebar .nav-link:hover,
[data-bs-theme="dark"] #sidebar .nav-link.active {
  background: rgba(37, 99, 235, 0.15);
  color: #F8FAFC;
  border-radius: 8px;
}

[data-bs-theme="dark"] #sidebar .nav-link.active {
  border-left: 3px solid #2563EB;
}

[data-bs-theme="dark"] #topbar {
  background: var(--surface-elevated-1, #151B2B) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

[data-bs-theme="dark"] .card {
  background: var(--surface-elevated-1, #151B2B);
  border-color: rgba(255,255,255,0.07);
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
  background: var(--surface-elevated-2, #1E293B);
  border-color: rgba(255,255,255,0.07);
}

[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,0.03);
  --bs-table-hover-bg: rgba(37, 99, 235, 0.07);
  color: var(--text-primary, #F8FAFC);
  border-color: rgba(255,255,255,0.07);
}

[data-bs-theme="dark"] .table thead th {
  background: var(--surface-elevated-2, #1E293B);
  border-color: rgba(255,255,255,0.07);
  color: var(--text-secondary, #94A3B8);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-bs-theme="dark"] .modal-content {
  background: var(--surface-elevated-1, #151B2B);
  border: 1px solid rgba(255,255,255,0.10);
}

[data-bs-theme="dark"] .dropdown-menu {
  background: var(--surface-elevated-2, #1E293B);
  border: 1px solid rgba(255,255,255,0.10);
}

[data-bs-theme="dark"] .dropdown-item {
  color: var(--text-primary, #F8FAFC);
}

[data-bs-theme="dark"] .dropdown-item:hover {
  background: rgba(37, 99, 235, 0.12);
  color: #F8FAFC;
}

/* ── Welcome banners — modo oscuro ────────────────────────── */
[data-bs-theme="dark"] .sae-welcome-banner {
  background: linear-gradient(135deg, #1e3a8a 0%, #1D4ED8 100%);
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.30);
}

[data-bs-theme="dark"] .sae-platform-header {
  background: linear-gradient(135deg, #1e1b4b 0%, #5b21b6 100%);
}

/* ── Alertas con tokens ────────────────────────────────────── */
[data-bs-theme="dark"] .alert-info {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.25);
  color: #93c5fd;
}

[data-bs-theme="dark"] .alert-warning {
  background: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.25);
  color: #fcd34d;
}

[data-bs-theme="dark"] .alert-danger {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.25);
  color: #fca5a5;
}

[data-bs-theme="dark"] .alert-success {
  background: rgba(5, 150, 105, 0.12);
  border-color: rgba(5, 150, 105, 0.25);
  color: #6ee7b7;
}

/* ── Badges en dark mode ───────────────────────────────────── */
[data-bs-theme="dark"] .badge.bg-light {
  background: var(--surface-elevated-3, #27354F) !important;
  color: var(--text-primary, #F8FAFC) !important;
}

/* ── Números KPI (h4 dentro de .card-body) ─────────────────── */
.card-body h4,
.card-body .h4 {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  letter-spacing: -0.02em;
}

/* Sidebar footer en dark mode */
[data-bs-theme="dark"] #sidebar .border-top {
  border-color: rgba(255,255,255,0.10) !important;
}
[data-bs-theme="dark"] #sidebar .text-white-50 {
  color: rgba(248, 250, 252, 0.55) !important;
}

/* ============================================================
   Light mode — ajustes de profundidad y saturación
   Los colores de dark mode son vivos sobre fondos oscuros.
   En light mode los mismos colores quedan agresivos: se suavizan
   aquí sin tocar ninguna vista.
   ============================================================ */

/* Cards con sombra sutil — da profundidad en lugar de bordes duros */
[data-bs-theme="light"] .card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.06);
}

/* Card-header con tint gris para separarlo del body blanco */
[data-bs-theme="light"] .card-header-collapse {
  background-color: var(--surface-elevated-3);
}
[data-bs-theme="light"] .card-header-collapse:hover {
  background-color: #e2e8f0;
}

/* Card-header genérico (no coloreado) — mismo tint sutil */
[data-bs-theme="light"] .card > .card-header:not([class*="bg-"]) {
  background-color: var(--surface-elevated-3);
  border-bottom-color: rgba(0,0,0,0.07);
}

/* Info: bootstrap trae #0dcaf0 (neon cyan) — lo reemplaza el token --bs-info */
[data-bs-theme="light"] .bg-info              { background-color: var(--bs-info)  !important; }
[data-bs-theme="light"] .text-info            { color: var(--bs-info)             !important; }
[data-bs-theme="light"] .border-info          { border-color: var(--bs-info)      !important; }
[data-bs-theme="light"] .btn-info             { background-color: var(--bs-info); border-color: var(--bs-info); }
[data-bs-theme="light"] .card-header.bg-info  { background-color: var(--bs-info)  !important; }
[data-bs-theme="light"] .alert-info {
  background-color: rgba(8,145,178,0.08);
  border-color: rgba(8,145,178,0.22);
  color: #065070;
}

/* Danger: rojo más profundo en light mode (usa el token --bs-danger) */
[data-bs-theme="light"] .bg-danger             { background-color: var(--bs-danger) !important; }
[data-bs-theme="light"] .text-danger           { color: var(--bs-danger)             !important; }
[data-bs-theme="light"] .border-danger         { border-color: var(--bs-danger)      !important; }
[data-bs-theme="light"] .btn-danger            { background-color: var(--bs-danger); border-color: var(--bs-danger); }
[data-bs-theme="light"] .card-header.bg-danger { background-color: var(--bs-danger)  !important; }
[data-bs-theme="light"] .alert-danger {
  background-color: rgba(185,28,28,0.07);
  border-color: rgba(185,28,28,0.20);
  color: #7f1d1d;
}

/* Pending y urgent — versiones subtle en light mode (outline en lugar de sólido) */
[data-bs-theme="light"] .bg-pending {
  background-color: var(--color-pending-10) !important;
  color: var(--color-pending)               !important;
  border: 1px solid rgba(111,66,193,0.25);
}
[data-bs-theme="light"] .bg-urgent {
  background-color: var(--color-urgent-10) !important;
  color: var(--color-urgent)               !important;
  border: 1px solid rgba(253,126,20,0.25);
}

/* Welcome banner light — usa gradiente del token auth */
[data-bs-theme="light"] .sae-welcome-banner {
  background: linear-gradient(135deg, #1e3a8a 0%, var(--accent-primary) 100%);
  box-shadow: 0 4px 15px rgba(37,99,235,0.20);
}

/* ── Toggle de tema ────────────────────────────────────────── */
.theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.07));
  border-radius: var(--radius-md, 10px);
  color: var(--text-secondary, #94A3B8);
  padding: 6px 10px;
  cursor: pointer;
  transition: all 150ms ease;
  font-size: 1rem;
  line-height: 1;
}

.theme-toggle-btn:hover {
  background: rgba(37, 99, 235, 0.10);
  color: var(--text-primary, #F8FAFC);
  border-color: rgba(37, 99, 235, 0.30);
}

/* Ocultar ícono que no corresponde al modo actual */
[data-bs-theme="dark"]  .icon-sun   { display: none; }
[data-bs-theme="light"] .icon-moon  { display: none; }

/* ── btn-close — visibilidad garantizada en dark mode ──────────
   Bootstrap 5.3 aplica invert() automáticamente, pero lo
   reforzamos por si alguna regla de color/background interfiere.
   ──────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.75;
}
[data-bs-theme="dark"] .btn-close:hover {
  opacity: 1;
}