/* ═══════════════════════════════════════════════════════════════
   Control de Acceso — App Stylesheet
   Profesional, ejecutivo, responsive. PHP 8 + Bootstrap 5.
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  --sidebar-width:        220px;
  --sidebar-collapsed:    0px;
  --topbar-height:        56px;

  /* Sidebar — expo.dev style: blanco, borde derecho sutil */
  --sidebar-bg:           #ffffff;
  --sidebar-border:       #e5e7eb;
  --sidebar-text:         #374151;
  --sidebar-text-hover:   var(--color-primary);
  --sidebar-active-bg:    var(--color-primary);
  --sidebar-active-text:  var(--color-bg);
  --sidebar-active-border:transparent;
  --sidebar-section-label:#9ca3af;
  --sidebar-icon-size:    1rem;

  --topbar-bg:            #ffffff;
  --topbar-border:        #e5e7eb;

  --content-bg:           #ffffff;
  --card-radius:          8px;
  --card-shadow:          0 1px 3px rgba(0,0,0,.06);

  --color-blue:           #2563eb;
  --color-indigo:         #4f46e5;
  --color-green:          #16a34a;
  --color-teal:           #0d9488;
  --color-orange:         #ea580c;
  --color-red:            #dc2626;
  --color-purple:         #7c3aed;

  /* ══════════════════════════════════════════════════════════
     DESIGN TOKENS DEL TEMA — Cambia aquí para actualizar toda la app
     ══════════════════════════════════════════════════════════ */

  /* ── Colores del tema principal ─────────────────────────── */
  --color-primary:    #111111;  /* Negro — botones primarios, tabs activos, brand "Colmena" */
  --color-bg:         #ffffff;  /* Blanco — fondo general, cuerpo de modales, cards */
  --color-surface:    #f9f9fb;  /* Gris perla — header y footer de modales, page-header */
  --color-muted-bg:   #f3f4f6;  /* Gris claro — botones de acción en reposo, secciones, hover de nav */
  --color-border:     #e5e7eb;  /* Borde universal — cards, tablas, inputs, separadores */
  --color-text-muted: #6b7280;  /* Texto secundario — hints, labels de footer, iconos */
  --color-danger:     #dc2626;  /* Rojo — botón eliminar, modales de peligro */

  /* ── Botones de acción ──────────────────────────────────── */
  --btn-action-text:  #374151;  /* Texto de botones Editar, Ver, Detalle (reposo) */
  --btn-cancel-text:  #64748b;  /* Texto de botones Cancelar / Cerrar */

  /* ── Tipografía ─────────────────────────────────────────── */
  --font-family:        'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* Fuente de toda la app */
  --font-size-base:     11px;   /* Tamaño base del body y elementos pequeños */
  --modal-title-size:   11px;   /* Tamaño del título en header de modales (.gt-modal-hdr h5) */
  --modal-title-weight: 700;    /* Grosor del título de modales */
  --label-size:         10px;   /* Tamaño de nombre de campos (labels) */
  --label-weight:       700;    /* Grosor de labels de campos */
  --input-size:         12px;   /* Tamaño de texto dentro de inputs y celdas de tabla */
  --btn-size:           11.5px; /* Tamaño de texto en botones de toolbar (Nuevo, Guardar) */
  --btn-weight:         700;    /* Grosor de texto en botones */

  /* ── Hover ──────────────────────────────────────────────── */
  --hover-opacity:    0.82;     /* Opacidad para estado hover de botones primarios */
}

/* ── Reset / Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  background: var(--content-bg);
  color: #98a6bb;
  margin: 0;
}

/* ── Auth Layout ────────────────────────────────────────────────── */
.auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0d1b2a 0%, #1e3a5f 50%, #0d1b2a 100%);
  padding: 1.5rem;
}

.auth-wrapper { width: 100%; max-width: 420px; }

.auth-card { border-radius: 1rem !important; overflow: hidden; }

.auth-brand {
  background: linear-gradient(135deg, #1e3a5f, #2563eb);
  padding: 2rem 1.5rem 1.75rem;
  text-align: center;
  color: #fff;
}

.auth-brand-icon {
  width: 80px; height: 80px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .75rem;
}
.auth-brand-logo {
  width: 80px; height: 80px;
  object-fit: contain;
  border-radius: 4px;
}

.auth-brand-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0px 0px 1px;
}

.auth-brand-subtitle {
  font-size: 13px;
    opacity: .75;
    margin: 0;
    text-transform: none;
    letter-spacing: 5px;
}

/* ── App Layout ─────────────────────────────────────────────────── */
.app-body {
  display: flex;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Sidebar ────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 1040;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }

/* ── Sidebar Brand ──────────────────────────────────────────────── */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 12px;
  /*border-bottom: 1px solid var(--sidebar-border);*/
  flex-shrink: 0;
}

.sidebar-brand-icon {
  width: 32px;
  height: 32px;
  background: var(--color-muted-bg);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.sidebar-brand-logo {
  width: 28px; height: 28px;
  object-fit: contain;
  border-radius: 5px;
}

.sidebar-brand-text { overflow: hidden; }
.brand-name { display: block; font-size: .82rem; font-weight: 700; color: var(--color-primary); white-space: nowrap; }
.brand-sub  { display: block; font-size: .67rem; color: var(--sidebar-section-label); white-space: nowrap; }

/* ── Sidebar Nav ────────────────────────────────────────────────── */
.sidebar-nav { flex: 1; padding: 10px 10px 8px; }

.nav-section-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--sidebar-section-label);
    padding: 14px 6px 4px;
    display: block;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background .12s, color .12s;
  border-left: none;
  margin-bottom: 1px;
}

.sidebar-nav .nav-link:hover {
  background: var(--color-muted-bg);
  color: var(--sidebar-text-hover);
}

.sidebar-nav .nav-link.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: 600;
}

.nav-icon { font-size: var(--sidebar-icon-size); flex-shrink: 0; }
.nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar-divider { border: none; border-top: 1px solid var(--sidebar-border); margin: 0; }

/* ── Sidebar — Tema por rol (variables CSS del body) ────────────── */
/* Expo.dev style: sidebar siempre blanco, activo negro, hover gris claro */
.sidebar--role {
  background: var(--color-bg);
  --sidebar-active-bg:     var(--color-primary);
  --sidebar-active-text:   var(--color-bg);
  --sidebar-active-border: transparent;
  --sidebar-section-label: #9ca3af;
}
.sidebar--role .sidebar-brand        { border-bottom-color: var(--color-border); }
.sidebar--role .sidebar-divider      { border-top-color: #e5e7eb; }
.sidebar--role .nav-section-label    { color: #9ca3af; }
.sidebar--role .sidebar-nav .nav-link:hover { background: var(--color-muted-bg); color: var(--color-primary); }
.sidebar--role .sidebar-user-avatar  { background: var(--theme-gradient, linear-gradient(135deg,var(--color-primary),#374151)); }

/* ── Sidebar User ───────────────────────────────────────────────── */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem .875rem;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.sidebar-user-avatar {
  width: 30px; height: 30px;
  background: var(--theme-gradient, linear-gradient(135deg,var(--color-primary),#374151));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name { display: block; font-size: .78rem; font-weight: 600; color: var(--color-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { display: block; font-size: .67rem; color: #9ca3af; }

.sidebar-logout {
  color: #9ca3af;
  text-decoration: none;
  font-size: 1rem;
  padding: .25rem;
  border-radius: .35rem;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}

.sidebar-logout:hover { color: var(--color-danger); background: #fef2f2; }

/* ── Main Wrapper ───────────────────────────────────────────────── */
.main-wrapper {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left .28s cubic-bezier(.4,0,.2,1);
  min-width: 0;
}

/* ── Topbar ─────────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-height);
  background: var(--topbar-bg);
  /*border-bottom: 1px solid var(--topbar-border);*/
  position: sticky;
  top: 0;
  z-index: 1030;
  flex-shrink: 0;
}

.topbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 1.25rem;
}

.topbar-toggle {
  color: #64748b;
  border: none !important;
  background: none !important;
  padding: .25rem !important;
  line-height: 1;
}
.topbar-toggle:hover { color: #1e293b; }

.topbar-title {
  font-weight: 600;
  font-size: .9rem;
  color: #1e293b;
}

.topbar-icon-btn {
  color: #64748b;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: .5rem;
  transition: background .15s, color .15s;
}

.topbar-icon-btn:hover { background: #f1f5f9; color: #1e293b; }

.badge-dot {
  position: absolute;
  top: 0; right: 0;
  transform: translate(30%, -30%);
  font-size: .6rem;
  min-width: 16px; height: 16px;
  padding: 0 .3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.topbar-user-btn {
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: .5rem;
  padding: .3rem .6rem;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  transition: background .15s;
}
.topbar-user-btn:hover { background:#f1f3f5; }

.topbar-avatar {
  width: 28px; height: 28px;
  background: var(--theme-gradient, linear-gradient(135deg,var(--color-primary),#374151));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
}

/* ── Content ────────────────────────────────────────────────────── */
.content-area {
  flex: 1;
  min-width: 0;
  background: var(--content-bg);
}

.content-footer { background: transparent; }

/* ── App Footer ─────────────────────────────────────────────────── */
.app-footer {
  background:#f1f3f5;
  border-top: 1px solid #d6d6d6;
  padding: 0 16px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 8px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}
/* Auth layout: footer fijo al fondo */
.auth-body .app-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.app-footer__copy    { color: var(--color-text-muted); font-weight: 500; }
.app-footer__dev-by  { color: var(--color-text-muted); }
.app-footer__dev-name { color: var(--color-primary); font-weight: 600; }
.app-footer__dot     { color: #d1d5db; }
.app-footer__contact {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color .15s;
}
.app-footer__contact:hover { color: var(--color-primary); }

/* ── Global progress overlay animations ────────────────────────── */
@keyframes gt-spin    { to { transform: rotate(360deg); } }
@keyframes gt-shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

/* ── Page Headers ───────────────────────────────────────────────── */
.page-header {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 14px 18px;
}
.page-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

/* ── Cards ──────────────────────────────────────────────────────── */
.card {
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--color-border) !important;
}

/* ── Stat Cards ─────────────────────────────────────────────────── */
.stat-card {
  border-radius: var(--card-radius);
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  background: #fff;
  border-left: 4px solid;
}

.stat-card::after {
  content: '';
  position: absolute;
  right: -10px; top: -10px;
  width: 70px; height: 70px;
  border-radius: 50%;
  opacity: .08;
}

.stat-icon { font-size: 1.35rem; }
.stat-value { font-size: 1.85rem; font-weight: 800; line-height: 1; }
.stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #64748b; font-weight: 600; }

.stat-card--blue   { border-left-color: var(--color-blue);   color: var(--color-blue); }
.stat-card--indigo { border-left-color: var(--color-indigo); color: var(--color-indigo); }
.stat-card--green  { border-left-color: var(--color-green);  color: var(--color-green); }
.stat-card--teal   { border-left-color: var(--color-teal);   color: var(--color-teal); }
.stat-card--orange { border-left-color: var(--color-orange); color: var(--color-orange); }
.stat-card--red    { border-left-color: var(--color-red);    color: var(--color-red); }

.stat-card--blue::after   { background: var(--color-blue); }
.stat-card--indigo::after { background: var(--color-indigo); }
.stat-card--green::after  { background: var(--color-green); }
.stat-card--teal::after   { background: var(--color-teal); }
.stat-card--orange::after { background: var(--color-orange); }
.stat-card--red::after    { background: var(--color-red); }

.stat-card .stat-value, .stat-card .stat-label { color: inherit; }
.stat-card .stat-value { color: #0f172a; }

/* ── Avatars ────────────────────────────────────────────────────── */
.resident-avatar {
  width: 34px; height: 34px;
  background: var(--theme-gradient, linear-gradient(135deg,var(--color-primary),#374151));
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  flex-shrink: 0;
}

/* ── QR styles ──────────────────────────────────────────────────── */
.qr-wrapper {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  padding: 1rem;
  display: inline-block;
}

.qr-image {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.qr-scan-placeholder {
  width: 100%;
  min-height: 260px;
  background:#f1f3f5;
  border: 2px dashed #cbd5e1;
  border-radius: .75rem;
}

/* ── Activity list ──────────────────────────────────────────────── */
.activity-list .list-group-item:hover { background:#f1f3f5; }

.activity-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}

/* ── Tables ─────────────────────────────────────────────────────── */
.table th {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
  border-bottom-width: 1px;
  background-color: #f3f4f6;
  
}

.table td { font-size: 11px; }

/* ── Badges (custom soft variants) ──────────────────────────────── */
.bg-purple-subtle { background-color: rgba(124,58,237,.1) !important; }
.text-purple { color: #7c3aed !important; }
.border-purple-subtle { border-color: rgba(124,58,237,.2) !important; }

/* ── Forms ──────────────────────────────────────────────────────── */
.form-label { font-size: .85rem; color: #374151; }
.form-control, .form-select {
  font-size: .875rem;
  border-color: #d1d5db;
  border-radius: .5rem;
}
.form-control:focus, .form-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn { border-radius: 5px; font-size: 12px; }

/* btn-primary → grayscale #111111 (Bootstrap 5 usa --bs-btn-bg, no 'background') */
.btn-primary {
  --bs-btn-bg:                   var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg:             #333333;
  --bs-btn-hover-border-color:   #333333;
  --bs-btn-active-bg:            #000000;
  --bs-btn-active-border-color:  #000000;
  --bs-btn-disabled-bg:          #555555;
  --bs-btn-disabled-border-color:#555555;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.btn-primary:hover  { background-color: #333333 !important; border-color: #333333 !important; }
.btn-primary:active { background-color: #000000 !important; border-color: #000000 !important; }

.btn-outline-primary {
  --bs-btn-color:                var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg:             var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-hover-color:          #ffffff;
  --bs-btn-active-bg:            #000000;
  --bs-btn-active-border-color:  #000000;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline-primary:hover { color: #fff; background-color: var(--color-primary); border-color: var(--color-primary); }

/* ── Sidebar overlay (mobile) ───────────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1039;
  backdrop-filter: blur(2px);
}

/* ── Error pages ────────────────────────────────────────────────── */
.error-page { padding: 3rem 1rem; }
.error-code { font-size: 6rem; font-weight: 900; color: #e2e8f0; line-height: 1; margin-bottom: .5rem; }
.error-title { font-size: 1.5rem; font-weight: 700; color: #1e293b; }

/* ── Breadcrumb ─────────────────────────────────────────────────── */
.breadcrumb { font-size: .8rem; }
.breadcrumb-item a { text-decoration: none; color: var(--theme-primary, #111111); }
.breadcrumb-item a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Mobile
   ══════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
    box-shadow: none;
  }

  .sidebar.sidebar--open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
  }

  .sidebar-overlay.sidebar-overlay--visible {
    display: block;
  }

  .main-wrapper { margin-left: 0; }
}

@media (max-width: 575.98px) {
  .stat-card .stat-value { font-size: 1.5rem; }
  .content-area { padding-bottom: 1rem; }
}

/* Global badge radius override */
.badge { border-radius: 4px !important; }

/* ═══ Toast Notifications ══════════════════════════════════════ */
#gt-toast-container {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 24px);
}
.gt-toast {
  pointer-events: all;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 340px;
  max-width: 100%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
  border-left: 4px solid #2563eb;
  padding: 14px 14px 12px;
  position: relative;
  overflow: hidden;
  animation: gt-toast-in .28s cubic-bezier(.22,.68,0,1.2) both;
}
.gt-toast.gt-toast--out {
  animation: gt-toast-out .22s ease-in both;
}
@keyframes gt-toast-in {
  from { opacity: 0; transform: translateX(60px) scale(.96); }
  to   { opacity: 1; transform: translateX(0)   scale(1);    }
}
@keyframes gt-toast-out {
  from { opacity: 1; transform: translateX(0)   scale(1);    max-height: 120px; margin-bottom: 0; }
  to   { opacity: 0; transform: translateX(60px) scale(.96); max-height: 0;     margin-bottom: -10px; }
}
.gt-toast--success { border-left-color: #16a34a; }
.gt-toast--danger  { border-left-color: #dc2626; }
.gt-toast--warning { border-left-color: #d97706; }
.gt-toast--info    { border-left-color: #2563eb; }

.gt-toast-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.gt-toast--success .gt-toast-icon { background: #dcfce7; color: #16a34a; }
.gt-toast--danger  .gt-toast-icon { background: #fee2e2; color: var(--color-danger); }
.gt-toast--warning .gt-toast-icon { background: #fef3c7; color: #d97706; }
.gt-toast--info    .gt-toast-icon { background: #dbeafe; color: #2563eb; }

.gt-toast-body   { flex: 1; min-width: 0; }
.gt-toast-title  { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 2px; }
.gt-toast-msg    { font-size: 12px; color: #475569; line-height: 1.45; word-break: break-word; }

.gt-toast-close {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: none; background: none; cursor: pointer;
  color: #94a3b8; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
  padding: 0; margin-top: -2px;
  font-size: 14px;
}
.gt-toast-close:hover { background: #f1f5f9; color: #475569; }

.gt-toast-progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  border-radius: 0 0 0 10px;
  animation: gt-toast-progress linear both;
}
.gt-toast--success .gt-toast-progress { background: #16a34a; }
.gt-toast--danger  .gt-toast-progress { background: var(--color-danger); }
.gt-toast--warning .gt-toast-progress { background: #d97706; }
.gt-toast--info    .gt-toast-progress { background: #2563eb; }
@keyframes gt-toast-progress {
  from { width: 100%; }
  to   { width: 0%; }
}

/* ══════════════════════════════════════════════════════════
   GtCombobox — Searchable combobox (shared, all pages)
   ══════════════════════════════════════════════════════════ */
.gt-cmb-wrap { position:relative; }

.gt-cmb-ctrl {
  display:flex; align-items:center;
  border:1.5px solid #e2e8f0; border-radius:7px;
  background:#fff; cursor:pointer; overflow:hidden;
  transition:border-color .15s,box-shadow .15s;
}
.gt-cmb-wrap:focus-within .gt-cmb-ctrl {
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.1);
}
.gt-cmb-ctrl.is-invalid { border-color:#ef4444 !important; }
.gt-cmb-ico {
  display:flex; align-items:center;
  padding:0 8px; color:#94a3b8; pointer-events:none; font-size:13px;
}
.gt-cmb-inp {
  flex:1; border:none; outline:none; font-size:12.5px;
  color:#1e293b; background:transparent;
  padding:5px 0; min-width:0; font-family:inherit;
}
.gt-cmb-inp::placeholder { color:#94a3b8; }
.gt-cmb-clear {
  display:none; align-items:center; justify-content:center;
  border:none; background:none; color:#94a3b8;
  padding:0 6px; cursor:pointer; font-size:11px;
  line-height:1; transition:color .15s;
}
.gt-cmb-clear:hover { color:#ef4444; }
.gt-cmb-caret {
  display:flex; align-items:center;
  padding:0 8px 0 4px; color:#94a3b8;
  font-size:11px; cursor:pointer; transition:color .15s;
}
.gt-cmb-caret:hover { color:#64748b; }

.gt-cmb-drop {
  display:none; position:absolute; left:0; right:0;
  top:calc(100% + 4px); background:#fff;
  border:1.5px solid #e2e8f0; border-radius:7px;
  box-shadow:0 8px 24px rgba(0,0,0,.1);
  z-index:1055; max-height:220px; overflow-y:auto;
  scrollbar-width:thin;
}
.gt-cmb-drop.open { display:block; }

.gt-cmb-count {
  font-size:10px; color:#94a3b8; font-weight:600;
  letter-spacing:.3px; padding:5px 10px 3px;
  text-transform:uppercase;
}
.gt-cmb-all, .gt-cmb-item {
  padding:6px 10px; font-size:12.5px; cursor:pointer;
  display:flex; flex-direction:column; gap:1px;
  transition:background .1s;
}
.gt-cmb-all {
  color:#64748b; font-style:italic; font-size:12px;
}
.gt-cmb-all:hover, .gt-cmb-all.focused { background:#f0f7ff; }
.gt-cmb-item:hover, .gt-cmb-item.focused { background:#f0f7ff; color:#1d4ed8; }
.gt-cmb-name { font-weight:600; color:inherit; line-height:1.2; }
.gt-cmb-sub  { font-size:11px; color:#64748b; line-height:1.2; }
.gt-cmb-item:hover .gt-cmb-sub,
.gt-cmb-item.focused .gt-cmb-sub { color:#93c5fd; }
.gt-cmb-empty {
  padding:8px 10px; font-size:12px; color:#94a3b8;
  font-style:italic; text-align:center;
}

/* ── DataTables — Selector de registros con botones ────────────── */
.dataTables_length label { display:none !important; }
.dt-length label { display:none !important; }
.dt-len-wrap {
  display:flex; align-items:center; gap:7px;
}
.dt-len-label {
  font-size:11px; color:#64748b; white-space:nowrap; font-weight:500;
}
.dt-len-group {
  display:inline-flex;
  border-radius:7px;
  overflow:hidden;
  border:1.5px solid #dde3ee;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.dt-len-btn {
  height:26px;
  min-width:36px;
  padding:0 10px;
  background:#fff;
  color:#475569;
  font-size:11px;
  font-weight:600;
  border:none;
  border-right:1px solid #dde3ee;
  cursor:pointer;
  transition:background .13s, color .13s;
  line-height:1;
  letter-spacing:.2px;
}
.dt-len-btn:last-child { border-right:none; }
.dt-len-btn:hover:not(.active) {
  background: var(--color-muted-bg);
  color:#374151;
}
.dt-len-btn.active {
  background: var(--color-primary);
  color:#fff;
  box-shadow:none;
}

/* ── DataTable: paginación siempre a la derecha (todas las páginas) ── */
/* DataTables 2.x usa dt-paging; 1.x usaba dataTables_paginate */
div.dt-container div.dt-paging,
.dt-paging,
div.dataTables_wrapper div.dataTables_paginate,
.dataTables_paginate {
  margin-left: auto;
}

/* ══════════════════════════════════════════════════════════
   TEMA POR ROL — Overrides globales usando variables CSS
   Cubre .gt-modal-hdr y todos los *-hero-icon sin editar
   cada vista individualmente.
   ══════════════════════════════════════════════════════════ */

/* Modal headers — expo.dev style aplicado en la definición principal */

/* Hero icons — todos los prefijos usados en las vistas */
.rf-hero-icon,
.gp-gen-hero-icon,
.sc-hero-icon,
[class*="-hero-icon"] {
  background: var(--theme-gradient, linear-gradient(135deg,var(--color-primary),#374151)) !important;
}

/* Form focus y GtCombobox focus — color del tema */
.form-control:focus, .form-select:focus {
  border-color: var(--theme-primary, #111111) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary, #111111) 12%, transparent) !important;
}
.gt-cmb-wrap:focus-within .gt-cmb-ctrl {
  border-color: var(--theme-primary, #111111) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary, #111111) 10%, transparent) !important;
}

/* ── Botones — todos los variantes de acción usan el tema ──────── */
.btn-success,
.btn-success:focus {
  background-color: var(--theme-primary, #111111) !important;
  border-color:     var(--theme-primary, #111111) !important;
  color: var(--theme-primary-text, #fff) !important;
}
.btn-success:hover,
.btn-success:active {
  background-color: var(--theme-primary-dark, #000000) !important;
  border-color:     var(--theme-primary-dark, #000000) !important;
  color: var(--theme-primary-text, #fff) !important;
}

.btn-outline-primary {
  color:        var(--theme-primary, #111111) !important;
  border-color: var(--theme-primary, #111111) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
  background-color: var(--theme-primary, #111111) !important;
  border-color:     var(--theme-primary, #111111) !important;
  color: #fff !important;
}

.btn-outline-success {
  color:        var(--theme-primary, #111111) !important;
  border-color: var(--theme-primary, #111111) !important;
}
.btn-outline-success:hover,
.btn-outline-success:active {
  background-color: var(--theme-primary, #111111) !important;
  border-color:     var(--theme-primary, #111111) !important;
  color: #fff !important;
}

/* ── Tabs — estilo pill unificado (igual que mi-perfil) ──────────
   Aplica a: .gp-tab-btn (gestiones, alertas, etc.)
   y a Bootstrap .nav-pills / .nav-tabs vía .pf-tabs-bar.
   ──────────────────────────────────────────────────────────────── */

/* .gp-tab-btn — tabs custom usados en varias vistas */
.gp-tab-btn {
  background: #f9fafb;
  color: var(--color-primary) !important;
  border-bottom-color: transparent !important;
  border-radius: 7px 7px 0 0 !important;
  border: 1px solid #eaeaea;
}
.gp-tab-btn:hover {
  background: var(--color-primary) !important;
  color:      #ffffff !important;
}
.gp-tab-btn.is-active {
  background: var(--color-primary) !important;
  color:               #ffffff !important;
  border-bottom-color: var(--color-primary) !important;
}

/* Bootstrap nav-pills (mi-perfil y cualquier otra vista) */
.nav-pills .nav-link,
.pf-tabs-bar .nav-link {
  background-color: var(--theme-primary-light, rgba(17,17,17,.10)) !important;
  color:            var(--theme-primary, #111111) !important;
  border-radius: 8px;
  font-weight: 600;
  transition: background .13s, color .13s;
}
.nav-pills .nav-link:hover,
.pf-tabs-bar .nav-link:hover {
  background-color: #f1f5f9 !important;
  color:            #1e293b !important;
}
.nav-pills .nav-link.active,
.pf-tabs-bar .nav-link.active {
  background-color: var(--theme-primary, #111111) !important;
  color:            #fff !important;
}

/* Bootstrap nav-tabs */
.nav-tabs .nav-link {
  color: var(--color-text-muted);
  font-weight: 600;
}
.nav-tabs .nav-link:hover {
  background-color: #f3f4f6;
  border-color: transparent transparent #e5e7eb;
  color: #374151;
}
.nav-tabs .nav-link.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 700;
}

/* ── Paginación DataTables + Bootstrap — página actual ───────────── */
.gp-table-wrap .dataTables_paginate .paginate_button.current,
.gp-table-wrap .dataTables_paginate .paginate_button.current:hover,
div.dataTables_wrapper .dataTables_paginate .paginate_button.current,
div.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.app-dt-foot .page-item.active .page-link,
.page-item.active .page-link {
  background: var(--color-primary) !important;
  color:       #fff !important;
  border-color: var(--color-primary) !important;
}
div.dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):hover,
.app-dt-foot .page-item:not(.active) .page-link:hover,
.page-item:not(.active) .page-link:hover {
  background: var(--color-muted-bg) !important;
  color:      #374151 !important;
  border-color: var(--color-border) !important;
}
.app-dt-foot .page-link,
.page-link {
  font-size: 11px !important;
  padding: 3px 8px !important;
  color: #374151;
}

/* ── DataTable table — expo.dev ────────────────────────────────── */
table.dataTable thead th,
table.dataTable thead td {
  background: var(--color-bg) !important;
  color: var(--color-text-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 8px 10px !important;
}
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after { opacity:.5; }
table.dataTable tbody tr { background: var(--color-bg); }
table.dataTable tbody tr:hover { background: #f9fafb; }
table.dataTable tbody td {
  border-bottom: 1px solid #f3f4f6;
  font-size: 12px;
  color: #374151;
  padding: 8px 10px;
  vertical-align: middle;
}
div.dataTables_wrapper div.dataTables_info {
  font-size: 11px; color: #9ca3af; padding-top: 0;
}
div.dataTables_wrapper { border: none; }

/* ══════════════════════════════════════════════════════════════════
   BLOQUE 4 — Configuraciones: tabs, secciones y botones con tema
   ══════════════════════════════════════════════════════════════════ */

/* ── Tabs principales (sc-tabs-bar) — pill negro activo ─────────── */
.sc-tabs-bar .nav-link.active {
  color: #ffffff !important;
  background: var(--color-primary) !important;
  border-bottom-color: var(--color-primary) !important;
}

/* ── Sub-tabs (sc-stab) — WhatsApp, Correo, Sistema ─────────────── */
.sc-stab.active,
.sc-stabs-bar.blue-tabs .sc-stab.active {
  color: #ffffff !important;
  background: var(--color-primary) !important;
  border-bottom-color: var(--color-primary) !important;
}
.sc-stab.active .sc-stab-badge,
.sc-stabs-bar.blue-tabs .sc-stab.active .sc-stab-badge {
  background: rgba(255,255,255,.22) !important;
  color: #ffffff !important;
}

/* ── Encabezados de sección (sc-rd-head / sc-rd-icon / sc-rd-title) */
.sc-rd-head,
.sc-rd-head.green {
  background: var(--color-muted-bg) !important;
  border-bottom-color: var(--color-border) !important;
}
.sc-rd-icon,
.sc-rd-icon.green {
  background: var(--color-muted-bg) !important;
  color: #374151 !important;
}
.sc-rd-title,
.sc-rd-title.green {
  color: var(--color-primary) !important;
}

/* ── Input groups (ícono izquierdo) ──────────────────────────────── */
.sc-igroup-icon,
.sc-igroup-icon.green {
  background: var(--color-muted-bg) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}
.sc-igroup-inp:focus { border-color: #9ca3af !important; }
.sc-inp:focus {
  border-color: #9ca3af !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.06) !important;
}

/* ── Toggle strip ────────────────────────────────────────────────── */
.sc-toggle-strip.green {
  background: var(--color-muted-bg) !important;
  border-color: var(--color-border) !important;
}

/* ── Botones de toolbar / guardar / editar config ────────────────── */
.sc-btn-new,
.sc-btn-new.green {
  background: var(--color-primary) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.18) !important;
}
.sc-btn-save,
.sc-btn-save.green {
  background: var(--color-primary) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
}
.sc-btn-edit-cfg,
.sc-btn-edit-cfg.green {
  color: #374151 !important;
  border-color: var(--color-border) !important;
  background: var(--color-muted-bg) !important;
}
.sc-btn-edit-cfg:hover,
.sc-btn-edit-cfg.green:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
}
.sc-act-edit { color: #374151 !important; border-color: var(--color-border) !important; background: var(--color-muted-bg) !important; }
.sc-act-edit:hover { background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary) !important; }
.sc-act-view { color: #374151 !important; border-color: var(--color-border) !important; background: var(--color-muted-bg) !important; }
.sc-act-view:hover { background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary) !important; }

/* ══════════════════════════════════════════════════════════════════
   BLOQUE 5 — Botones de acción en DataTables: solo icono, estilo expo.dev
   ══════════════════════════════════════════════════════════════════ */

/* ── Base: todos los action buttons — solo icono, tamaño uniforme ── */
.vi-btn, .ri-gest, .ri-detail, .ri-edit,
.ui-btn, .vt-btn {
  font-size: 0 !important;
  gap: 0 !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  min-width: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  border-width: 1px !important;
}
.vi-btn svg, .vi-btn i,
.ri-gest svg, .ri-gest i,
.ri-detail svg, .ri-detail i,
.ri-edit svg, .ri-edit i,
.ui-btn i, .ui-btn svg,
.vt-btn i, .vt-btn svg {
  width: 13px !important; height: 13px !important;
  font-size: 13px !important; flex-shrink: 0;
}

/* ── Vehículos (vi-btn) — grayscale ──────────────────────────────── */
.vi-det  { border-color: var(--color-border) !important; color:#374151 !important; background: var(--color-muted-bg) !important; }
.vi-det:hover  { background: var(--color-primary) !important; color:#fff !important; border-color: var(--color-primary) !important; }
.vi-edit { border-color: var(--color-border) !important; color:#374151 !important; background: var(--color-muted-bg) !important; }
.vi-edit:hover { background: var(--color-primary) !important; color:#fff !important; border-color: var(--color-primary) !important; }
.vi-del  { border-color:#fecaca !important; color: var(--color-danger) !important; background:#fef2f2 !important; }
.vi-del:hover  { background: var(--color-danger) !important; color:#fff !important; border-color: var(--color-danger) !important; }

/* ── Residentes (ri-btn) — grayscale ────────────────────────────── */
.ri-detail { border:1px solid var(--color-border) !important; color:#374151 !important; background: var(--color-muted-bg) !important; }
.ri-detail:hover { background: var(--color-primary) !important; color:#fff !important; border-color: var(--color-primary) !important; }
.ri-gest   { border:1px solid var(--color-border) !important; color:#374151 !important; background: var(--color-muted-bg) !important; }
.ri-gest:hover   { background: var(--color-primary) !important; color:#fff !important; border-color: var(--color-primary) !important; }
.ri-edit   { border:1px solid var(--color-border) !important; color:#374151 !important; background: var(--color-muted-bg) !important; }
.ri-edit:hover   { background: var(--color-primary) !important; color:#fff !important; border-color: var(--color-primary) !important; }

/* ── Usuarios (ui-btn) — grayscale ──────────────────────────────── */
.ui-det   { border-color: var(--color-border) !important; color:#374151 !important; background: var(--color-muted-bg) !important; }
.ui-det:hover   { background: var(--color-primary) !important; color:#fff !important; border-color: var(--color-primary) !important; }
.ui-edit  { border-color: var(--color-border) !important; color:#374151 !important; background: var(--color-muted-bg) !important; }
.ui-edit:hover  { background: var(--color-primary) !important; color:#fff !important; border-color: var(--color-primary) !important; }
.ui-toggle-on  { border-color:#fecaca !important; color: var(--color-danger) !important; background:#fef2f2 !important; }
.ui-toggle-on:hover  { background: var(--color-danger) !important; color:#fff !important; border-color: var(--color-danger) !important; }
.ui-toggle-off { border-color: var(--color-border) !important; color:#374151 !important; background: var(--color-muted-bg) !important; }
.ui-toggle-off:hover { background: var(--color-primary) !important; color:#fff !important; border-color: var(--color-primary) !important; }
.ui-reset { border-color: var(--color-border) !important; color:#374151 !important; background: var(--color-muted-bg) !important; }
.ui-reset:hover { background: var(--color-primary) !important; color:#fff !important; border-color: var(--color-primary) !important; }
.ui-del   { border-color:#fecaca !important; color: var(--color-danger) !important; background:#fef2f2 !important; }
.ui-del:hover   { background: var(--color-danger) !important; color:#fff !important; border-color: var(--color-danger) !important; }
.ui-chgpass { border-color: var(--color-border) !important; color:#374151 !important; background: var(--color-muted-bg) !important; }
.ui-chgpass:hover { background: var(--color-primary) !important; color:#fff !important; border-color: var(--color-primary) !important; }


/* ══════════════════════════════════════════════════════════════════
   SISTEMA DE DISEÑO UNIFICADO — Clases compartidas entre páginas
   ══════════════════════════════════════════════════════════════════ */

/* ── Paginación DataTables (resets compartidos) ──────────────────── */
div.dataTables_wrapper div.dataTables_paginate ul.pagination { margin:0; }
div.dataTables_wrapper div.dataTables_paginate .page-link { font-size:11px; padding:2px 7px; }
div.dataTables_wrapper div.dataTables_info { font-size:11px; color:#94a3b8; padding:0; }

/* ── Hero wrapper — base estructural (background se define por página) ─ */
.page-hero {
  position: relative; width: 99%; height: 103px;
  overflow: hidden; margin-bottom: 0;
}
.page-hero img {
  width: 100%; height: 100%;
  object-fit: cover; opacity: .55; mix-blend-mode: luminosity;
}

/* ── Hero: overlay + texto (fondo/imagen se mantiene por página) ─── */
.page-hero-overlay {
  position:absolute; inset:0; padding:14px 20px;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(to top,rgba(15,23,42,.88) 0%,transparent 65%);
}
.page-hero-title {
  font-size:30px; font-weight:800; color:#fff;
  display:flex; align-items:center; gap:8px;
  text-shadow:0 2px 8px rgba(0,0,0,.5); margin:0 0 1px;
}
.page-hero-sub {
  font-size:12px; color:rgba(255,255,255,.65); font-weight:500; letter-spacing:.3px;
}

/* ── Toolbar strip ────────────────────────────────────────────────── */
.page-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; flex-wrap:wrap;
  padding:7px 16px; background: var(--color-bg); border-bottom:1px solid var(--color-border);
}
.page-toolbar-actions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* ── Search field ─────────────────────────────────────────────────── */
.page-search-wrap { position:relative; }
.page-search-wrap > .bi,
.page-search-wrap > svg,
.page-search-wrap > i {
  position:absolute; left:9px; top:50%; transform:translateY(-50%);
  font-size:12px; color:#94a3b8; pointer-events:none;
}
.page-search-wrap > svg { width:13px; height:13px; }
.page-search {
  width:240px; height:30px; padding:0 10px 0 28px;
  border:1.5px solid #e2e8f0; border-radius:6px;
  font-size:12px; color:#1e293b; background:#fff;
  outline:none; transition:border-color .15s,box-shadow .15s;
}
.page-search:focus {
  border-color:var(--theme-primary,#111111);
  box-shadow:0 0 0 3px rgba(17,17,17,.08);
}
.page-search::placeholder { color:#94a3b8; }
@media(max-width:600px) { .page-search { width:100%; } }

/* ── Per-page selector ────────────────────────────────────────────── */
.page-perpage-sel {
  height:30px; padding:0 8px;
  border:1.5px solid #e2e8f0; border-radius:6px;
  font-size:12px; color:#374151; background:#fff;
  cursor:pointer; outline:none;
  transition:border-color .15s;
}
.page-perpage-sel:focus { border-color:var(--theme-primary,#111111); }

/* ── New-item button ──────────────────────────────────────────────── */
.page-new-btn {
  display:inline-flex; align-items:center; gap:5px;
  height:30px; padding:0 12px;
  background: var(--color-primary);
  color:#fff; border:none; border-radius:6px;
  font-size: var(--btn-size); font-weight: var(--btn-weight); cursor:pointer;
  letter-spacing:.2px; box-shadow:0 1px 4px rgba(0,0,0,.18);
  transition:opacity .15s; text-decoration:none; white-space:nowrap;
}
.page-new-btn:hover { opacity: var(--hover-opacity); color:#fff; }
.page-new-btn svg, .page-new-btn i { font-size:11px; }

/* ── Table card container ─────────────────────────────────────────── */
.page-card {
  background: var(--color-bg); 
  /*border-top:1px solid #e8edf4;*/
  overflow:hidden; margin:0 16px;
}

/* ── App table (usar junto con .table de Bootstrap) ──────────────── */
.app-table { font-size:12px; width:100% !important; }
.app-table thead th {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color: var(--color-text-muted); background: var(--color-bg);
  border-bottom:1px solid var(--color-border); padding:8px 10px; white-space:nowrap;
}
.app-table tbody td {
  padding:7px 10px; border-color:#f8fafc;
  vertical-align:middle; line-height:1.25;
}
.app-table tbody tr:hover td { background:#f1f3f5; }

/* ── DataTable footer ─────────────────────────────────────────────── */
.app-dt-foot {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 16px; border-top:1px solid var(--color-border);
  flex-wrap:wrap; gap:8px; background:#f1f3f5;
}
.app-dt-foot .dt-paging ul.pagination { margin:0; flex-wrap:nowrap; }
.app-dt-foot .dt-info { color:#9ca3af; padding:0; font-size:11px; }

/* ── DataTables 2.x — controles SIEMPRE debajo de la tabla ──────── */
/* initComplete mueve .dt-length/.dt-info/.dt-paging a .app-dt-foot */
/* y elimina las .dt-layout-row vacías. Este CSS es fallback visual  */
/* por si el JS tarda o falla: fuerza tabla arriba, controles abajo. */
.dt-container {
  display: flex;
  flex-direction: column;
}
.dt-container > .dt-layout-row.dt-layout-table  { order: 0; }
.dt-container > .dt-layout-row:not(.dt-layout-table) {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-border);
  background: #f9fafb;
  padding: 8px 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.dt-container > .dt-layout-row:not(.dt-layout-table) .dt-info {
  color: #9ca3af; font-size: 11px; padding: 0;
}
.dt-container > .dt-layout-row:not(.dt-layout-table) .dt-paging ul.pagination {
  margin: 0;
  flex-wrap: nowrap;
}

/* ── Empty state ──────────────────────────────────────────────────── */
.page-empty { padding:36px; text-align:center; color:#94a3b8; }
.page-empty > i { font-size:30px; margin-bottom:8px; display:block; opacity:.35; }
.page-empty > svg { width:30px; height:30px; margin:0 auto 8px; display:block; opacity:.35; }
.page-empty p { font-size:13px; margin:0 0 10px; }

/* ── Modal overlay + base ─────────────────────────────────────────── */
.gt-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(15,23,42,.6); z-index:1080;
  align-items:center; justify-content:center;
  padding:16px; backdrop-filter:blur(2px);
}
.gt-overlay.active { display:flex; }
.gt-modal {
  background: var(--color-bg); border-radius:7px;
  box-shadow:0 24px 60px rgba(0,0,0,.25);
  width:100%; max-height:92vh; overflow-y:auto;
  animation:gtSlideUp .2s ease;
}
@keyframes gtSlideUp {
  from { transform:translateY(16px); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}
.gt-modal-hdr {
  padding: 9px 20px 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background:#f1f3f5;
  border-bottom: 1px solid #d6d6d6;
  border-radius: 7px 7px 0 0;
}
.gt-modal-hdr h5 {
  margin: 0;
  font-size: var(--modal-title-size); font-weight: var(--modal-title-weight);
  color: var(--color-primary);
  padding-bottom: 0;
}
.gt-modal-hdr--danger {
  background: #fef2f2;
  border-bottom-color: #fecaca;
}
.gt-modal-hdr--danger h5 { color: #991b1b; }
.gt-modal-body {
  padding:8px 16px 0px 16px; background: var(--color-bg);
  display:flex; flex-direction:column; gap:10px;
}
.gt-modal-foot {
  padding:10px 16px; border-top:1px solid #d6d6d6;
  display:flex; gap:8px; justify-content:flex-end;
  align-items:center; background:#f1f3f5;
  border-radius:0 0 7px 7px; flex-wrap:wrap;
}
.gt-btn-close {
  background-color:transparent; border:none; cursor:pointer;
  color: #111111; padding:5px;
  border-radius:6px; display:flex; align-items:center;
  transition:background-color .12s, color .12s;
}
.gt-btn-close:hover { background-color: var(--color-muted-bg); color: var(--color-primary); }

/* ── Modal size modifiers ─────────────────────────────────────────── */
.gt-modal-sm { max-width:380px; }
.gt-modal-md { max-width:480px; }
.gt-modal-lg { max-width:520px; }
.gt-modal-xl { max-width:720px; }

@media(max-width:520px) {
  .gt-overlay { padding:0; align-items:flex-end; }
  .gt-modal    { border-radius:14px 14px 0 0; max-height:94vh; }
  .gt-modal-body { padding:12px 14px; }
}

/* ── Resident form views — shared (create & edit) ────────────────── */
.rf-page { background: #fff; min-height: calc(100vh - 120px); }
.rf-body  { padding: 14px 20px 28px; max-width: 960px; }

.rf-hero {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 9px 22px; background: #fff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.rf-hero-left  { display: flex; align-items: center; gap: 10px; }
.rf-hero-title { font-size: 14px; font-weight: 700; color: #1e293b; margin: 0; line-height: 1.2; }
.rf-hero-nav   { display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.rf-hero-nav a { color: #374151; text-decoration: none; font-size: 11.5px; }
.rf-hero-nav a:hover { text-decoration: underline; color: var(--color-primary); }
.rf-hero-nav .sep { color: #cbd5e1; font-size: 11px; }
.rf-hero-nav .cur { color: #94a3b8; font-size: 11.5px; }
.rf-hero-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rf-hero-req   { font-size: 11.5px; color: #64748b; }
.rf-hero-req strong { color: #ef4444; }

.rf-card {
    background: #fff; border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 3px 10px rgba(0,0,0,.04);
    margin-bottom: 12px; overflow: hidden; border: 1px solid #c0c0c0;
}
.rf-card-head {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 10px; border-bottom: 1px solid var(--color-border); background: #f9fafb;
}
.rf-card-icon {
    width: 28px; height: 28px;
    background: var(--color-muted-bg);
    border-radius: 7px; display: flex; align-items: center; justify-content: center;
    color: #374151; flex-shrink: 0;
}
.rf-card-icon svg { width: 14px; height: 14px; }
.rf-card-title { font-size: 12px; font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: .5px; }
.rf-card-body { padding: 12px 18px 14px; }

.rf-req { color: #ef4444; margin-left: 2px; }

.rf-input {
    width: 100%; padding: 9px 14px;
    border: 1.5px solid #e2e8f0; border-radius: 8px;
    font-size: 14px; color: #1e293b; background: #fff;
    transition: border-color .15s, box-shadow .15s; outline: none;
}
.rf-input:focus { border-color: #9ca3af; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.rf-input.is-invalid { border-color: #ef4444; }
.rf-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.1); }
.rf-input::placeholder { color: #94a3b8; }

.rf-select {
    width: 100%; padding: 9px 14px;
    border: 1.5px solid #e2e8f0; border-radius: 8px;
    font-size: 14px; color: #1e293b;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 14px center;
    -webkit-appearance: none; appearance: none; cursor: pointer;
    transition: border-color .15s, box-shadow .15s; outline: none;
}
.rf-select:focus { border-color: #9ca3af; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.rf-select.is-invalid { border-color: #ef4444; }

.rf-textarea {
    width: 100%; padding: 10px 14px;
    border: 1.5px solid #e2e8f0; border-radius: 8px;
    font-size: 14px; color: #1e293b; background: #fff;
    resize: vertical; transition: border-color .15s, box-shadow .15s;
    outline: none; font-family: inherit; line-height: 1.5;
}
.rf-textarea:focus { border-color: #9ca3af; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.rf-textarea::placeholder { color: #94a3b8; }

.rf-igroup { display: flex; align-items: stretch; }
.rf-igroup-icon {
    display: flex; align-items: center; justify-content: center;
    padding: 0 12px; background:#f1f3f5;
    border: 1.5px solid #e2e8f0; border-right: 0;
    border-radius: 8px 0 0 8px; color: #64748b; flex-shrink: 0;
}
.rf-igroup-icon svg { width: 15px; height: 15px; }
.rf-igroup .rf-input  { border-radius: 0 8px 8px 0; }
.rf-igroup .rf-select { border-radius: 0 8px 8px 0; }
.rf-igroup-prefix {
    display: flex; align-items: center; padding: 0 12px; background:#f1f3f5;
    border: 1.5px solid #e2e8f0; border-right: 0;
    border-radius: 8px 0 0 8px; color: #64748b;
    font-weight: 700; font-size: 14px; flex-shrink: 0;
}

.rf-hint { font-size: 11.5px; color: #94a3b8; margin-top: 4px; }
.rf-error { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #ef4444; margin-top: 5px; }
.rf-error svg { width: 13px; height: 13px; flex-shrink: 0; }

.rf-options { display: flex; flex-direction: column; gap: 5px; }
.rf-option {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 11px; border: 1.5px solid #e2e8f0; border-radius: 7px;
    cursor: pointer; transition: border-color .12s, background .12s; user-select: none;
}
.rf-option input[type=radio] { display: none; }
.rf-option-icon { color: #94a3b8; transition: color .12s; }
.rf-option-icon svg { width: 15px; height: 15px; }
.rf-option-label { font-size: 13.5px; color: #334155; font-weight: 500; flex: 1; }
.rf-option-check { display: none; color: var(--color-primary); }
.rf-option-check svg { width: 15px; height: 15px; }
.rf-option:has(input:checked) { border-color: var(--color-primary); background: #f9fafb; }
.rf-option:has(input:checked) .rf-option-icon { color: var(--color-primary); }
.rf-option:has(input:checked) .rf-option-label { color: var(--color-primary); font-weight: 600; }
.rf-option:has(input:checked) .rf-option-check { display: block; }
.rf-option:hover:not(:has(input:checked)) { border-color: #9ca3af; background: #f9fafb; }

.rf-family-row {
    display: grid; grid-template-columns: 1fr 1fr 1fr 160px 36px;
    gap: 10px; align-items: start; padding: 14px 16px;
    background:#f1f3f5; border: 1.5px solid #e2e8f0;
    border-radius: 10px; margin-bottom: 8px;
}
.rf-family-row .rf-input,
.rf-family-row .rf-select { font-size: 13px; padding: 7px 11px; }
.rf-family-del {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid #fecaca; border-radius: 8px;
    background: #fff; color: #ef4444; cursor: pointer;
    transition: background .12s; flex-shrink: 0; margin-top: 1px;
}
.rf-family-del:hover { background: #fef2f2; }
.rf-family-del svg { width: 14px; height: 14px; }
.rf-family-headers {
    display: grid; grid-template-columns: 1fr 1fr 1fr 160px 36px;
    gap: 10px; padding: 0 16px 6px;
}
.rf-family-headers span { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .4px; }

.rf-add-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border: 1.5px dashed #d1d5db;
    border-radius: 8px; background: #f9fafb;
    color: #374151; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all .12s; margin-top: 4px;
}
.rf-add-btn:hover { background: var(--color-muted-bg); border-color: #9ca3af; color: var(--color-primary); }
.rf-add-btn:disabled { opacity: .45; cursor: not-allowed; }
.rf-add-btn svg { width: 15px; height: 15px; }

.rf-actions {
    display: flex; align-items: center; gap: 10px; padding: 14px 18px;
    background: #fff; border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06); margin-bottom: 16px;
}
.rf-btn-primary {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 28px;
    background: var(--color-primary);
    color: #fff; border: none; border-radius: 8px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: opacity .15s, transform .1s;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.rf-btn-primary:hover  { opacity: var(--hover-opacity); transform: translateY(-1px); }
.rf-btn-primary:active { transform: translateY(0); }
.rf-btn-primary svg { width: 16px; height: 16px; }
.rf-btn-cancel {
    display: inline-flex; align-items: center; gap: 7px; padding: 10px 20px;
    background: #fff; color: #64748b; border: 1.5px solid #e2e8f0;
    border-radius: 8px; font-size: 14px; font-weight: 500;
    text-decoration: none; cursor: pointer; transition: border-color .12s, color .12s;
}
.rf-btn-cancel:hover { border-color: #94a3b8; color: #334155; }
.rf-btn-cancel svg { width: 15px; height: 15px; }

.rf-row  { display: grid; gap: 14px; }
.rf-col2 { grid-template-columns: 1fr 1fr; }
.rf-col3 { grid-template-columns: 1fr 1fr 1fr; }
.rf-col-loc { grid-template-columns: 1fr 1fr 200px; }

@media (max-width: 680px) {
    .rf-body { padding: 16px; }
    .rf-row  { grid-template-columns: 1fr !important; }
    .rf-family-row     { grid-template-columns: 1fr 1fr; }
    .rf-family-headers { display: none; }
}

.rf-section-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 680px) { .rf-section-3 { grid-template-columns: 1fr; } }



/* ══════════════════════════════════════════════════════════════════
   BLOQUE MOBILE — Responsive ≤768px / ≤480px
   ══════════════════════════════════════════════════════════════════ */

/* ── 768px: sidebar off-canvas, sin margen, tablas scroll ────────── */
@media (max-width: 768px) {

  /* Sidebar: fuera de la pantalla por defecto */
  .sidebar {
    transform: translateX(-100%);
    width: 270px;
    box-shadow: none;
    transition: transform .28s cubic-bezier(.4,0,.2,1),
                box-shadow .28s cubic-bezier(.4,0,.2,1);
  }
  .sidebar--open {
    transform: translateX(0);
    box-shadow: 6px 0 32px rgba(0,0,0,.18);
  }
  .sidebar-overlay--visible { display: block; }

  /* Main: sin margen lateral */
  .main-wrapper { margin-left: 0; }

  /* Nav links: targets más grandes para touch */
  .sidebar-nav .nav-link {
    padding: 10px 12px;
    font-size: 13.5px;
    min-height: 42px;
  }
  .sidebar-user { padding: 10px 14px; }

  /* Page card: scroll horizontal en tablas */
  .page-card {
    margin: 0 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Toolbar: apilar verticalmente */
  .page-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 8px 10px;
    gap: 6px;
  }
  .page-toolbar > .page-search-wrap { width: 100%; }
  .page-search { width: 100%; }
  .page-toolbar-actions { flex-wrap: wrap; gap: 6px; }

  /* Hero: compacto */
  .page-hero { height: 72px; }
  .page-hero-title { font-size: 20px; gap: 6px; }
  .page-hero-sub   { font-size: 11px; }
  .page-hero-overlay { padding: 10px 14px; }

  /* Action buttons: targets más grandes */
  .vi-btn, .ri-gest, .ri-detail, .ri-edit,
  .ui-btn, .vt-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  /* Resident form */
  .rf-body { padding: 10px 12px 20px; }
  .rf-hero { padding: 8px 12px; flex-wrap: wrap; }

  /* Modales: quitar altura fija en móvil, usar max-height */
  .gt-modal { height: auto !important; }

  /* Evidence modal: foto section menos alta */
  #alEvidenceOverlay .aev-foto-section { height: 190px !important; }

  /* gt-modal-xl: ancho completo */
  .gt-modal-xl { max-width: 98vw; }

  /* Footer: compacto */
  .app-footer { font-size: 10px; height: auto; padding: 6px 12px; flex-wrap: wrap; gap: 2px 6px; }
}

/* ── 480px: ajustes extra-pequeños ──────────────────────────────── */
@media (max-width: 480px) {

  /* Evidence modal: foto section aún más compacta */
  #alEvidenceOverlay .aev-foto-section { height: 160px !important; }
  #alEvidenceOverlay .aev-foto-frame img { width: 170px !important; height: 112px !important; }

  /* Tabla: font más pequeña para caber */
  .app-table tbody td { font-size: 11px; padding: 6px 7px; }
  .app-table thead th { font-size: 9px; padding: 6px 7px; }

  /* Hero: muy compacto */
  .page-hero { height: 60px; }
  .page-hero-title { font-size: 17px; }

  /* Ocultar parte del footer para ganar espacio */
  .app-footer__dev-by,
  .app-footer__dev-name { display: none; }

  /* Toolbar: botones más compactos */
  .page-new-btn { padding: 0 10px; font-size: 11px; }
}

/* ── Tablet (769-991px): sidebar visible, ancho reducido ─────────── */
@media (min-width: 769px) and (max-width: 991px) {
  :root { --sidebar-width: 190px; }
  .sidebar { width: 190px; }
  .sidebar-nav .nav-link { font-size: 12px; }
  .brand-name { font-size: .78rem; }
  .brand-sub  { font-size: .62rem; }
}