/* ============================================
   NEXO - Sistema de Gestión
   Diseño Profesional
   ============================================ */

/* Variables de diseño */
:root {
  /* Colores principales - paleta turquesa */
  /* Retema Trump: bronce/dorado oscuro para texto-links (legible sobre blanco); dorado pleno = --gold */
  --primary: #0B6896;
  --primary-dark: #085374;
  --primary-light: #3D8FBC;
  --primary-bg: #E7F1F7;

  /* Accent - navy (complementario, para detalles puntuales) */
  --accent: #1B9CB0;
  --accent-dark: #157E8E;
  --accent-light: #4FB8C8;
  --accent-bg: #E4F5F8;

  /* Colores de estado */
  --success: #10B981;
  --success-bg: #D1FAE5;
  --warning: #F59E0B;
  --warning-bg: #FEF3C7;
  --danger: #EF4444;
  --danger-bg: #FEE2E2;
  --info: #3B82F6;
  --info-bg: #DBEAFE;

  /* Neutros */
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* Sidebar - navy */
  --sidebar-bg: #1e1e1e;
  --sidebar-hover: #2e2e2e;
  --sidebar-active: #0B6896;
  --sidebar-text: #c4c4c4;
  --sidebar-text-active: #ffffff;
  --sidebar-border: #2e2e2e;

  /* Layout */
  --sidebar-width: 260px;
  --header-height: 64px;
  --border-radius: 12px;
  --border-radius-sm: 8px;
  --border-radius-lg: 16px;
  
  /* Sombras */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  
  /* Transiciones */
  --transition: all 0.2s ease;
  --transition-slow: all 0.3s ease;
}

/* Reset y base */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-700);
  background: var(--gray-50);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* ============================================
   SIDEBAR
   ============================================ */

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: var(--transition-slow);
}

.sidebar-logo {
  padding: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sidebar-logo h1 {
  font-size: 20px;
  font-weight: 700;
  color: white;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-logo .logo-icon {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.sidebar-logo small {
  display: block;
  color: var(--sidebar-text);
  font-size: 11px;
  font-weight: 400;
  margin-top: 4px;
  margin-left: 50px;
}

/* Navegación */
.sidebar nav {
  flex: 1;
  padding: 16px 12px;
  overflow-y: auto;
}

.sidebar-section {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sidebar-text-active);
  padding: 20px 16px 8px;
  margin-top: 8px;
}

.sidebar-section:first-child {
  margin-top: 0;
  padding-top: 8px;
}

/* Subsecciones del menú (Reportes, Configuración) */
.sidebar-subsection {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-600);
  padding: 12px 16px 4px;
  margin-top: 8px;
}

/* Items de subsección con indentación */
.sidebar nav a.sidebar-subitem {
  padding-left: 24px;
  font-size: 12px;
  opacity: 0.9;
}

.sidebar nav a.sidebar-subitem:hover {
  opacity: 1;
}

/* Color diferente para subitems activos */
.sidebar nav a.sidebar-subitem.active {
  background: rgba(184,154,94,.14); /* tinte dorado Trump */
  color: var(--gold);
  border-left: 3px solid var(--gold);
  padding-left: 21px; /* Compensar el borde */
}

/* ============================================
   MENÚ COLAPSABLE
   ============================================ */

/* Header del módulo (clickeable) */
.sidebar-module-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 12px;
  transition: var(--transition);
  border-radius: var(--border-radius-sm);
  margin: 0 4px;
}

.sidebar-module-header:hover {
  background: rgba(255,255,255,0.03);
}

.sidebar-module-header .sidebar-section {
  flex: 1;
  margin: 0;
  padding: 16px 12px 8px;
}

.sidebar-module-header.expanded .sidebar-section {
  color: var(--primary-light);
}

/* Icono de toggle */
.module-toggle-icon {
  width: 16px;
  height: 16px;
  color: var(--sidebar-text);
  opacity: 0.5;
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform: rotate(-90deg);
  flex-shrink: 0;
}

.sidebar-module-header:hover .module-toggle-icon {
  opacity: 0.8;
}

.sidebar-module-header.expanded .module-toggle-icon {
  opacity: 1;
  color: var(--primary-light);
}

/* Contenido del módulo */
.sidebar-module-content {
  overflow: hidden;
  transition: all 0.3s ease;
}

.sidebar-module-content a {
  animation: fadeInMenu 0.2s ease;
}

@keyframes fadeInMenu {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  color: var(--sidebar-text);
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  font-weight: 500;
  font-size: 13px;
  transition: var(--transition);
  margin-bottom: 2px;
}

.sidebar nav a svg {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

.sidebar nav a:hover {
  background: var(--sidebar-hover);
  color: white;
}

.sidebar nav a:hover svg {
  opacity: 1;
}

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

.sidebar nav a.active svg {
  opacity: 1;
}

.sidebar nav a .badge {
  margin-left: auto;
  font-size: 10px;
  padding: 3px 8px;
  font-weight: 600;
  background: var(--danger);
  color: white;
  border-radius: 10px;
}

/* Badge de notificaciones en menú */
.menu-badge {
  margin-left: auto;
  font-size: 10px;
  padding: 3px 8px;
  font-weight: 600;
  background: var(--danger);
  color: white;
  border-radius: 10px;
  animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.sidebar-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin: 16px 0;
}

/* ============================================
   CONTENIDO PRINCIPAL
   ============================================ */

.content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  background: var(--gray-50);
}

.top-header {
  background: white;
  border-bottom: 1px solid var(--gray-200);
  padding: 0 32px;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.top-header .page-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
}

.top-header .user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gray-600);
  font-size: 13px;
}

.avatar {
  width: 36px;
  height: 36px;
  background: var(--primary-bg);
  color: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
}

.container-fluid {
  padding: 28px 32px;
}

/* ============================================
   CARDS
   ============================================ */

.card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header h5 {
  margin: 0;
  font-weight: 600;
  color: var(--gray-900);
  font-size: 15px;
}

.card-body {
  padding: 14px;
}

/* ============================================
   KPI CARDS
   ============================================ */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.kpi-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius);
  padding: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gray-200);
  transition: var(--transition);
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.kpi-card:hover::before {
  background: var(--primary);
}

.kpi-card.primary::before { background: var(--primary); }
.kpi-card.success::before { background: var(--success); }
.kpi-card.warning::before { background: var(--warning); }
.kpi-card.danger::before { background: var(--danger); }

.kpi-value {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 6px;
  color: var(--gray-900);
}

.kpi-label {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ============================================
   FILTROS
   ============================================ */

.filter-bar {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius);
  padding: 20px;
  margin-bottom: 20px;
}

.filter-bar .form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

/* ============================================
   TABLAS
   ============================================ */

.table {
  margin: 0;
  font-size: 13px;
  width: 100%;
  border-collapse: collapse;
}

.table thead th {
  background: var(--gray-50);
  border-bottom: 2px solid var(--gray-200);
  color: var(--gray-600);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 16px;
  text-align: left;
  white-space: nowrap;
}

.table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
  color: var(--gray-700);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover {
  background: var(--gray-50);
}

.table tbody tr.row-clickable {
  cursor: pointer;
}

.table tbody tr.row-clickable:hover {
  background: var(--primary-bg);
}

/* Fila con mensajes sin leer */
.table tbody tr.row-unread {
  background: #FEF3C7;
  border-left: 3px solid var(--warning);
}

.table tbody tr.row-unread:hover {
  background: #FDE68A;
}

.table tbody tr.row-unread td:first-child {
  padding-left: 13px;
}

/* ============================================
   FORMULARIOS
   ============================================ */

.form-label {
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 6px;
  font-size: 13px;
}

.form-control, .form-select {
  border: 1px solid var(--gray-300);
  border-radius: var(--border-radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  transition: var(--transition);
  width: 100%;
}

.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
  outline: none;
}

.form-control::placeholder {
  color: var(--gray-400);
}

textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

/* ============================================
   BOTONES
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--border-radius-sm);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}

/* Normalizar botones <button> para que coincidan con <a> */
button.btn {
  font-family: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.btn svg {
  width: 16px;
  height: 16px;
}

.btn-primary {
  background: var(--primary);
  color: white;
}

.btn-primary:hover {
  background: var(--primary-dark);
  color: white;
}

/* Estado deshabilitado: mantener el verde del sistema (Bootstrap lo pinta celeste) */
.btn-primary:disabled,
.btn-primary.disabled {
  background: var(--primary);
  color: white;
  opacity: 0.5;
}

.btn-secondary {
  background: var(--gray-100);
  color: var(--gray-700);
}

.btn-secondary:hover {
  background: var(--gray-200);
  color: var(--gray-900);
}

.btn-success {
  background: var(--success);
  color: white;
}

.btn-success:hover {
  background: #059669;
}

.btn-danger {
  background: var(--danger);
  color: white;
}

.btn-danger:hover {
  background: #DC2626;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
}

.btn-outline:hover {
  background: var(--gray-100);
  border-color: var(--gray-400);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-sm svg {
  width: 14px;
  height: 14px;
}

/* ============================================
   BADGES
   ============================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.badge-primary { background: var(--primary-bg); color: var(--primary); }
.badge-success { background: var(--success-bg); color: #047857; }
.badge-warning { background: var(--warning-bg); color: #B45309; }
.badge-danger { background: var(--danger-bg); color: #B91C1C; }
.badge-info { background: var(--info-bg); color: #1D4ED8; }
.badge-gray { background: var(--gray-100); color: var(--gray-600); }
.badge-purple { background: rgba(139, 92, 246, 0.1); color: #7C3AED; }
/* Early/late check: mismo tono que las bandas tr-early/tr-late, más oscuro */
.badge-early { background: #E9DCF8; color: #7C3AED; }
.badge-late { background: #D5EAFA; color: #0369A1; }

/* Estados de estancias (Recepción) */
.estado-estancia-arribada { background: var(--info-bg); color: #1D4ED8; }
.estado-estancia-ingresada { background: rgba(139, 92, 246, 0.1); color: #7C3AED; }
.estado-estancia-egresada { background: var(--gray-100); color: var(--gray-600); }
.estado-estancia-cancelada { background: var(--gray-100); color: var(--gray-600); }

/* Estados de unidades (ocupación / limpieza) */
.estado-ocupacion-libre { background: var(--gray-100); color: var(--gray-600); }
.estado-ocupacion-arribada { background: var(--info-bg); color: #1D4ED8; }
.estado-ocupacion-ingresada { background: rgba(139, 92, 246, 0.1); color: #7C3AED; }
.estado-limpieza-sucia { background: var(--danger-bg); color: #B91C1C; }
.estado-limpieza-limpieza_profunda { background: var(--warning-bg); color: #B45309; }
.estado-limpieza-repasada { background: var(--info-bg); color: #1D4ED8; }
.estado-limpieza-chequeada { background: var(--success-bg); color: #047857; }

/* Estados de reclamos */
.estado-activo { background: var(--success-bg); color: #047857; }
.estado-pendiente { background: var(--warning-bg); color: #B45309; }
.estado-finalizado { background: var(--gray-100); color: var(--gray-600); }
.estado-bloqueado { background: var(--danger-bg); color: #B91C1C; }
.estado-inactivo { background: var(--gray-100); color: var(--gray-600); }

/* Estados de documentos */
.estado-vigente { background: var(--success-bg); color: #047857; }
.estado-por_vencer { background: var(--warning-bg); color: #B45309; }
.estado-vencido { background: var(--danger-bg); color: #B91C1C; }

/* Estados de Tickets */
.estado-ticket-nuevo { background: var(--info-bg); color: #1D4ED8; }
.estado-ticket-en_proceso { background: var(--primary-bg); color: var(--primary); }
.estado-ticket-pendiente_cliente { background: var(--warning-bg); color: #B45309; }
.estado-ticket-resuelto { background: var(--success-bg); color: #047857; }
.estado-ticket-listo_facturar { background: #FEF3C7; color: #92400E; }
.estado-ticket-cerrado { background: var(--gray-100); color: var(--gray-600); }

/* Tipos de Ticket */
.tipo-remoto { background: #DBEAFE; color: #1D4ED8; }
.tipo-visita { background: #FEF3C7; color: #B45309; }
.tipo-mixto { background: #E0E7FF; color: #4338CA; }

/* Prioridades */
.prioridad-baja { background: var(--gray-100); color: var(--gray-600); }
.prioridad-media { background: var(--info-bg); color: #1D4ED8; }
.prioridad-alta { background: var(--warning-bg); color: #B45309; }
.prioridad-urgente { background: var(--danger-bg); color: #B91C1C; }

/* Estados de Propiedades (Real Estate) */
.estado-borrador { background: var(--gray-100); color: var(--gray-600); }
.estado-activa { background: var(--success-bg); color: #047857; }
.estado-reservada { background: var(--warning-bg); color: #B45309; }
.estado-vendida { background: var(--primary-bg); color: var(--primary); }
.estado-alquilada { background: var(--info-bg); color: #1D4ED8; }
.estado-suspendida { background: var(--danger-bg); color: #B91C1C; }
.estado-retirada { background: var(--gray-100); color: var(--gray-600); }

/* Tipos de Contacto (Real Estate) */
.tipo-comprador { background: var(--primary-bg); color: var(--primary); }
.tipo-vendedor { background: var(--success-bg); color: #047857; }
.tipo-propietario { background: var(--gray-100); color: var(--gray-600); }
.tipo-inquilino { background: var(--gray-100); color: var(--gray-600); }
.tipo-lead { background: var(--info-bg); color: #1D4ED8; }

/* Calificaciones de Contacto (Real Estate) */
.calificacion-frio { background: var(--gray-100); color: var(--gray-600); }
.calificacion-tibio { background: var(--info-bg); color: #1D4ED8; }
.calificacion-caliente { background: var(--warning-bg); color: #B45309; }
.calificacion-muy_caliente { background: var(--danger-bg); color: #B91C1C; }

/* Estados de Contacto (Real Estate) */
.estado-contacto-activo { background: var(--success-bg); color: #047857; }
.estado-contacto-inactivo { background: var(--gray-100); color: var(--gray-600); }
.estado-contacto-convertido { background: var(--primary-bg); color: var(--primary); }
.estado-contacto-perdido { background: var(--gray-100); color: var(--gray-600); }

/* Estados de Oportunidad (Real Estate) */
.estado-oportunidad-nueva { background: var(--info-bg); color: #1D4ED8; }
.estado-oportunidad-en_seguimiento { background: var(--primary-bg); color: var(--primary); }
.estado-oportunidad-negociacion { background: var(--warning-bg); color: #B45309; }
.estado-oportunidad-ganada { background: var(--success-bg); color: #047857; }
.estado-oportunidad-perdida { background: var(--danger-bg); color: #B91C1C; }

/* Estados de Muestra (Real Estate) */
.estado-muestra-agendada { background: var(--warning-bg); color: #B45309; }
.estado-muestra-confirmada { background: var(--success-bg); color: #047857; }
.estado-muestra-en_curso { background: var(--primary-bg); color: var(--primary); }
.estado-muestra-completada { background: var(--info-bg); color: #1D4ED8; }
.estado-muestra-cancelada { background: var(--danger-bg); color: #B91C1C; }
.estado-muestra-no_presentado { background: var(--gray-100); color: var(--gray-600); }
.estado-muestra-reagendada { background: var(--warning-bg); color: #B45309; }

/* ============================================
   ALERTAS
   ============================================ */

.alert {
  padding: 14px 18px;
  border-radius: var(--border-radius-sm);
  font-size: 14px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.alert-success { background: var(--success-bg); color: #047857; }
.alert-danger { background: var(--danger-bg); color: #B91C1C; }
.alert-warning { background: var(--warning-bg); color: #B45309; }
.alert-info { background: var(--info-bg); color: #1D4ED8; }

/* ============================================
   TIMELINE (Comentarios)
   ============================================ */

.timeline {
  position: relative;
  padding-left: 28px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gray-200);
}

.timeline-item {
  position: relative;
  padding: 16px 20px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius-sm);
  margin-bottom: 16px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -23px;
  top: 22px;
  width: 12px;
  height: 12px;
  background: white;
  border: 3px solid var(--primary);
  border-radius: 50%;
}

.timeline-item.interno {
  background: var(--gray-50);
  border-style: dashed;
}

.timeline-item.interno::before {
  border-color: var(--gray-400);
}

.timeline-item.sistema {
  background: var(--info-bg);
  border-color: var(--info);
}

.timeline-item.sistema::before {
  border-color: var(--info);
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--gray-500);
}

.empty-state svg {
  width: 64px;
  height: 64px;
  color: var(--gray-300);
  margin-bottom: 20px;
}

.empty-state p {
  font-size: 15px;
  margin-bottom: 24px;
}

/* ============================================
   MODALES (tema global — todos los modales Bootstrap
   del sistema heredan este estilo automáticamente)
   ============================================ */

.modal-content {
  border: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.modal-header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-bottom: none;
  color: #fff;
  padding: 16px 20px;
}

.modal-header .modal-title {
  color: #fff;
  font-weight: 700;
}

/* Vuelve blanca la X de cierre por defecto de Bootstrap */
.modal-header .btn-close {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.modal-header .btn-close:hover { opacity: 1; }

.modal-footer {
  border-top: 1px solid var(--gray-100);
}

/* ============================================
   LOGIN
   ============================================ */

.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--sidebar-bg) 0%, var(--accent-dark) 100%);
  padding: 20px;
}

.login-box {
  background: white;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 420px;
  padding: 48px 40px;
}

.login-box h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-900);
  text-align: center;
  margin-bottom: 8px;
}

.login-box .subtitle {
  text-align: center;
  color: var(--gray-500);
  margin-bottom: 32px;
}

.login-box .logo {
  text-align: center;
  margin-bottom: 32px;
}

/* Marca del edificio en el login (logo Solanas Vacation Club) */
.login-marca {
  display: block;
  margin: 8px auto 18px;
  width: 100%;
  max-width: 175px;
  height: auto;
}

.login-sistema {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin: 0 0 36px;
}

.login-box .logo-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.login-box .logo-icon svg {
  width: 32px;
  height: 32px;
  color: white;
}

/* ============================================
   UTILIDADES
   ============================================ */

.text-muted { color: var(--gray-500); }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }

.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 16px; }

.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.actions-cell {
  white-space: nowrap;
  text-align: right;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Botón menú móvil - oculto en desktop */
.mobile-menu-btn {
  display: none !important;
  background: none;
  border: none;
  padding: 8px;
  margin-right: 12px;
  cursor: pointer;
  color: var(--gray-700);
  border-radius: var(--border-radius-sm);
  transition: var(--transition);
}

.mobile-menu-btn:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

/* Overlay para cerrar menú */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.show {
  opacity: 1;
}

@media (max-width: 991px) {
  .sidebar {
    transform: translateX(-100%);
    z-index: 100;
  }

  .sidebar.show {
    transform: translateX(0);
  }

  .content {
    margin-left: 0;
  }

  .container-fluid {
    padding: 20px;
  }

  .top-header {
    padding: 0 20px;
  }

  .grid-2, .grid-3 {
    grid-template-columns: 1fr;
  }

  /* Mostrar botón menú en móvil */
  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Mostrar overlay cuando está activo */
  .sidebar-overlay.show {
    display: block;
  }

  /* Ajustar header para incluir botón menú */
  .top-header {
    display: flex;
    align-items: center;
  }

  .page-title {
    flex: 1;
  }
}

/* ============================================
   TABS
   ============================================ */

.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  border-bottom: 2px solid var(--gray-200);
}

.nav-item {
  margin-bottom: -2px;
}

.nav-link {
  display: block;
  padding: 0.75rem 1.25rem;
  color: var(--gray-600);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  cursor: pointer;
  font-weight: 500;
}

.nav-link:hover {
  color: var(--primary);
  border-bottom-color: var(--gray-300);
}

.nav-link.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* ============================================
   ANIMACIONES
   ============================================ */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.card, .kpi-card, .alert {
  animation: fadeIn 0.25s ease-out;
}

/* ============================================
   UTILIDADES DE LAYOUT
   ============================================ */

/* Anchos de columna */
.col-xs { width: 40px; }
.col-sm { width: 60px; }
.col-md { width: 100px; }
.col-lg { width: 150px; }
.col-xl { width: 200px; }
.col-actions { width: 80px; text-align: right; }

/* Alineación de texto */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Flexbox utilities */
.d-flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.justify-content-start { justify-content: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.justify-content-between { justify-content: space-between; }

/* Gaps */
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }

/* Padding utilities */
.p-0 { padding: 0; }
.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 16px; }
.p-4 { padding: 24px; }

.px-1 { padding-left: 4px; padding-right: 4px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 16px; padding-right: 16px; }
.px-4 { padding-left: 24px; padding-right: 24px; }

.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 16px; padding-bottom: 16px; }
.py-4 { padding-top: 24px; padding-bottom: 24px; }

/* Margin utilities */
.m-0 { margin: 0; }
.m-1 { margin: 4px; }
.m-2 { margin: 8px; }
.m-3 { margin: 16px; }
.m-4 { margin: 24px; }

.mx-1 { margin-left: 4px; margin-right: 4px; }
.mx-2 { margin-left: 8px; margin-right: 8px; }
.mx-3 { margin-left: 16px; margin-right: 16px; }
.mx-4 { margin-left: 24px; margin-right: 24px; }

.my-1 { margin-top: 4px; margin-bottom: 4px; }
.my-2 { margin-top: 8px; margin-bottom: 8px; }
.my-3 { margin-top: 16px; margin-bottom: 16px; }
.my-4 { margin-top: 24px; margin-bottom: 24px; }

/* ============================================
   BREADCRUMBS
   ============================================ */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 0 8px 0;
  list-style: none;
  font-size: 13px;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  padding: 0 8px;
  color: var(--gray-400);
}

.breadcrumb-item a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumb-item a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: var(--gray-500);
}

/* ============================================
   GRID SYSTEM (Bootstrap-like)
   ============================================ */

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -12px;
  margin-left: -12px;
}

.row > * {
  padding-right: 12px;
  padding-left: 12px;
}

.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: 8.333333%; }
.col-2 { flex: 0 0 auto; width: 16.666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.333333%; }
.col-5 { flex: 0 0 auto; width: 41.666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.333333%; }
.col-8 { flex: 0 0 auto; width: 66.666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

/* Grid columns for larger screens */
@media (min-width: 768px) {
  .col-md-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-md-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-md-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
  .col-md-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-md-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-md-9 { flex: 0 0 auto; width: 75%; }
  .col-md-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 992px) {
  .col-lg-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-lg-9 { flex: 0 0 auto; width: 75%; }
  .col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

/* Gutters de fila (.row): solo gap vertical. El horizontal lo dan los
   paddings de .row > * (12px → 24px entre columnas). Aplicar gap horizontal
   acá hacía que col-X + col-Y = 100% se pasara y la última columna bajara. */
.g-1 { row-gap: 4px; }
.g-2 { row-gap: 8px; }
.g-3 { row-gap: 16px; }
.g-4 { row-gap: 24px; }
.g-5 { row-gap: 32px; }

/* Display utilities */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-grid { display: grid; }

/* Width utilities */
.w-100 { width: 100%; }
.w-auto { width: auto; }

/* Form check (checkbox) */
.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.form-check-input {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

.form-check-label {
  cursor: pointer;
  font-size: 14px;
  color: var(--gray-700);
}

/* Table responsive */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Pagination */
.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
  gap: 4px;
}

.page-item .page-link {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--gray-700);
  text-decoration: none;
  background-color: white;
  border: 1px solid var(--gray-300);
  border-radius: var(--border-radius-sm);
  transition: var(--transition);
}

.page-item .page-link:hover {
  background-color: var(--gray-100);
  border-color: var(--gray-400);
}

.page-item.active .page-link {
  background-color: var(--primary);
  border-color: var(--primary);
  color: white;
}

.page-item.disabled .page-link {
  color: var(--gray-400);
  pointer-events: none;
  background-color: var(--gray-50);
}

.justify-content-center {
  justify-content: center;
}

/* ============================================
   SOLAPAS DE MÓDULO (subnavegación interna)
   Clase propia para no chocar con .nav-tabs de Bootstrap.
   ============================================ */

.modulo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  margin: 0 0 24px;
  list-style: none;
  /* Línea base en el mismo petróleo que la pestaña activa: la ficha
     activa "apoya" sobre la línea y se funde con ella */
  border-bottom: 3px solid #0E2A3D;
}

.modulo-tab {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  /* Sin solape: la pestaña termina exactamente donde empieza la franja
     petróleo — hover y activa apoyan sobre la línea, nunca la tapan */
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
  text-decoration: none;
  background: transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  transition: var(--transition);
}

.modulo-tab:hover {
  /* Celeste medio: claramente visible sobre el fondo de página,
     sin acercarse al petróleo de la pestaña activa */
  color: var(--primary-dark);
  background: #B9D6E9;
}

.modulo-tab.active {
  /* Mismo petróleo que los headers de card: la pestaña activa es arquitectura.
     Su base toca la franja del mismo color → se leen como una sola forma. */
  color: #fff;
  font-weight: 600;
  background: linear-gradient(135deg, #143B55 0%, #0E2A3D 100%);
}

/* Filas resaltadas en tablas (alertas operativas) */
.table tr.tr-danger > td { background: var(--danger-bg); }
.table tr.tr-warning > td { background: var(--warning-bg); }

/* ============================================
   LIVE SEARCH (livesearch.js)
   ============================================ */

.ls-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  max-height: 280px;
  overflow-y: auto;
}

.ls-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--gray-700);
  text-decoration: none;
  border-bottom: 1px solid var(--gray-100);
}

.ls-item:last-child { border-bottom: none; }

a.ls-item:hover { background: var(--primary-bg); color: var(--primary-dark); }

.ls-item-vacio { color: var(--gray-400); }

.ls-sub { color: var(--gray-500); font-size: 12px; }

button.ls-item {
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

/* Variante estática: la lista de resultados fluye en el documento
   (para modales, donde el dropdown flotante queda cortado) */
.ls-estatico .ls-dropdown {
  position: static;
  margin-top: 8px;
  box-shadow: none;
  max-height: 320px;
}

button.ls-item:hover { background: var(--primary-bg); color: var(--primary-dark); }

/* ============================================
   CÓDIGOS QR / NFC POR APARTAMENTO
   ============================================ */

.qr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.qr-celda {
  background: white;
  border: 2px dashed var(--gray-300);
  border-radius: var(--border-radius);
  padding: 16px;
  text-align: center;
  page-break-inside: avoid;
}

.qr-titulo { font-size: 20px; font-weight: 800; color: var(--gray-900); }

.qr-sub { font-size: 11px; color: var(--gray-500); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 10px; }

.qr-canvas { display: flex; justify-content: center; margin: 0 auto; }

.qr-canvas img, .qr-canvas canvas { margin: 0 auto; }

.qr-leyenda { font-size: 12px; color: var(--gray-600); margin-top: 10px; }

.qr-url { font-size: 9px; color: var(--gray-400); word-break: break-all; margin-top: 6px; }

/* Impresión: solo el contenido (sirve para la hoja de QRs y reportes) */
@media print {
  .no-imprimir { display: none !important; }
  .sidebar, .top-header { display: none !important; }
  .content { margin-left: 0 !important; padding: 0 !important; }
  .qr-celda { border-color: var(--gray-400); }
}

/* ============================================
   PORTAL DE PROPIETARIOS (/portal)
   ============================================ */

.pp-body { background: var(--gray-50); }

.pp-topbar {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
}

.pp-topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pp-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

.pp-topbar .pp-wrap { padding: 14px 16px; }

.pp-titulo { font-weight: 700; line-height: 1; }

.pp-subtitulo { font-size: 12px; opacity: 0.85; }

.pp-salir { background: rgba(255, 255, 255, 0.2); color: #fff; }

.pp-salir:hover { background: rgba(255, 255, 255, 0.35); color: #fff; }

.pp-nav {
  display: flex;
  gap: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--gray-200);
}

.pp-nav a {
  color: var(--gray-600);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 4px;
  border-bottom: 2px solid transparent;
}

.pp-nav a:hover { color: var(--primary); }

.pp-nav a.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.pp-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.pp-chip {
  padding: 5px 14px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  background: var(--gray-100);
  text-decoration: none;
  transition: var(--transition);
}

.pp-chip:hover { background: var(--primary-bg); color: var(--primary); }

.pp-chip.active { background: var(--primary); color: #fff; }

.pp-expensa-destacada { border-left: 4px solid var(--primary); }

/* Gráfico de barras: tiempo de limpieza por día (portal propietario) */
.pp-graf {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 150px;
  padding-top: 8px;
}

.pp-graf-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 4px;
  min-width: 0;
}

.pp-graf-val {
  font-size: 10px;
  font-weight: 700;
  color: var(--primary-dark);
  white-space: nowrap;
}

.pp-graf-barra {
  width: 100%;
  max-width: 28px;
  background: var(--primary);
  border-radius: 5px 5px 0 0;
  transition: var(--transition);
}

.pp-graf-col.sin .pp-graf-barra {
  background: var(--gray-200);
  height: 3px !important;
}

.pp-graf-col.hoy .pp-graf-barra { background: var(--primary-dark); }

.pp-graf-dia {
  font-size: 9px;
  color: var(--gray-400);
  text-align: center;
  line-height: 1.3;
}

.pp-graf-col.hoy .pp-graf-dia { color: var(--primary-dark); font-weight: 700; }

/* Sección "Hoy" del historial del apartamento */
.pp-hoy {
  border-left: 4px solid var(--primary);
  background: linear-gradient(to right, var(--primary-bg), #fff 40%);
}

.pp-hoy-item {
  display: grid;
  grid-template-columns: 48px 112px 1fr;
  align-items: start;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: 13px;
}

.pp-hoy-item:last-child { border-bottom: none; }

.pp-hoy-hora {
  color: var(--primary-dark);
  font-size: 14px;
  line-height: 1.6;
}

/* Badge de tipo de evento con ancho fijo (alinea las columnas) */
.pp-badge-tipo {
  width: 112px;
  justify-content: center;
}

/* ============================================
   DISTRIBUCIÓN DIARIA (planilla de mucamas)
   ============================================ */

.dist-tabla { table-layout: fixed; }

.dist-tabla th.dist-col-equipo { width: 190px; }

.dist-tabla th.dist-col-hora { text-align: center; }

.dist-equipo-nombres { font-weight: 600; font-size: 13px; }

.dist-equipo-nombres div { padding: 1px 0; }

.dist-celda {
  text-align: center;
  vertical-align: middle;
  padding: 4px !important;
  height: 64px;
}

.dist-apto {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 6px 4px;
}

/* Fondo de la celda según ocupación del apartamento (tipo de trabajo) */
.dist-apto.oc-libre { background: #FFEDD5; border-color: #FDBA74; }
.dist-apto.oc-arribada { background: #DBEAFE; border-color: #93C5FD; }
.dist-apto.oc-ingresada { background: #FBCFE8; border-color: #F9A8D4; }

.dist-apto-numero { font-weight: 700; font-size: 14px; line-height: 1; }

.dist-apto .badge { font-size: 9px; padding: 2px 6px; }

.dist-quitar {
  position: absolute;
  top: 2px;
  right: 4px;
  border: 0;
  background: none;
  color: var(--gray-400);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
}

.dist-quitar:hover { color: var(--danger); }

.dist-celda-vacia {
  width: 100%;
  height: 100%;
  min-height: 52px;
  border: 1px dashed var(--gray-300);
  border-radius: 8px;
  background: none;
  color: var(--gray-300);
  font-size: 18px;
  cursor: pointer;
  transition: var(--transition);
}

.dist-celda-vacia:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-bg);
}

.dist-personal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
}

.dist-personal-col h6 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-500);
  border-bottom: 2px solid var(--gray-200);
  padding-bottom: 6px;
  margin-bottom: 8px;
}

/* ============================================
   FICHA DE DETALLE (propietarios, etc.)
   ============================================ */

.ficha-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 991px) {
  .ficha-grid { grid-template-columns: 1fr; }
}

.ficha-col { display: flex; flex-direction: column; gap: 20px; }

.ficha-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.stat-box {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius);
  padding: 14px 16px;
}

.stat-box-label {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 4px;
}

.stat-box-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--gray-900);
}

.saldo-debe { color: var(--danger); }
.saldo-favor { color: var(--success); }

.kv-list { display: flex; flex-direction: column; }

.kv-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: 13px;
}

.kv-item:last-child { border-bottom: none; }

.kv-label { color: var(--gray-500); white-space: nowrap; }

.kv-value { color: var(--gray-800); font-weight: 500; text-align: right; }

.list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: 13px;
}

.list-row:last-child { border-bottom: none; }

.list-row a { text-decoration: none; color: var(--gray-700); }

.card-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.card-header-flex h5 { margin: 0; }

.link-sm { font-size: 13px; color: var(--primary); text-decoration: none; }

.link-sm:hover { color: var(--primary-dark); text-decoration: underline; }

/* Heading styles */
.h1, h1 { font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--gray-900); }
.h2, h2 { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--gray-900); }
.h3, h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--gray-900); }
.h4, h4 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--gray-900); }
.h5, h5 { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--gray-900); }
.h6, h6 { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--gray-900); }

/* ============================================
   Mapa de ocupación (Recepción)
   ============================================ */
.mapa-piso { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.mapa-piso-label { width: 56px; flex-shrink: 0; text-align: right; font-size: 12px; font-weight: 600; color: var(--gray-500); padding-top: 14px; }
.mapa-unidades { display: flex; flex-wrap: wrap; gap: 8px; }
.mapa-unidad { width: 68px; height: 48px; border-radius: var(--border-radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; background: var(--gray-200); border: 1px solid var(--gray-300); color: var(--gray-500); }
.mapa-unidad small { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; opacity: .8; }
.mapa-unidad.ocupada { background: #15803D; border-color: #166534; color: #fff; }
.mapa-unidad.arribada { background: var(--warning-bg); border-color: var(--warning); color: #92400E; }
.mapa-leyenda { display: flex; gap: 18px; align-items: center; font-size: 13px; color: var(--gray-600); }
.mapa-leyenda .muestra { display: inline-block; width: 18px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; border: 1px solid var(--gray-300); }
.mapa-leyenda .muestra.libre { background: var(--gray-200); }
.mapa-leyenda .muestra.ocupada { background: #15803D; border-color: #166534; }
.mapa-leyenda .muestra.arribada { background: var(--warning-bg); border-color: var(--warning); }

/* ============================================
   Páginas legales públicas (/privacidad)
   ============================================ */
.legal-page { max-width: 760px; margin: 0 auto; padding: 40px 24px 64px; }
.legal-marca { display: block; max-width: 180px; margin: 0 auto 8px; }
.legal-page > header { text-align: center; margin-bottom: 36px; }
.legal-page > header p { color: var(--gray-500); font-size: 14px; margin: 4px 0 0; }
.legal-page section { margin-bottom: 28px; }
.legal-page h2 { font-size: 1.15rem; margin-bottom: 8px; }
.legal-page p, .legal-page li { font-size: 14px; line-height: 1.7; color: var(--gray-700); }
.legal-page ul { padding-left: 20px; margin: 8px 0; }
.legal-page footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--gray-200); text-align: center; font-size: 12px; color: var(--gray-400); }

/* ============================================
   Header verde reutilizable para tarjetas (todo el sistema)
   .lp-cardhead = clase general · .resv-head = alias usado en reservas
   (portado de nexo_solanas)
   ============================================ */
.resv-head, .lp-cardhead {
    display: flex; align-items: center; gap: 9px;
    background: var(--primary); color: #fff; padding: 7px 14px; border: 0;
}
.resv-head-icon, .lp-cardhead-icon {
    width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.2); color: #fff; font-size: 15px; flex-shrink: 0;
}
.resv-head-title, .lp-cardhead-title { font-weight: 700; font-size: 15px; color: #fff; margin: 0; line-height: 1.15; }
/* Si el header ya trae un <h5> (módulos Tareas/Reclamos), que quede en blanco */
.lp-cardhead h5, .lp-cardhead h4 { color: #fff; margin: 0; font-size: 15px; font-weight: 700; line-height: 1.15; }
/* Agrupa ícono+título como un solo item (headers con acción/contador a la derecha) */
.lp-cardhead-grp { display: flex; align-items: center; gap: 9px; }
.lp-cardhead a:not(.btn) { color: #fff; text-decoration: none; }
.lp-cardhead a:not(.btn):hover { text-decoration: underline; }
.lp-cardhead .text-muted { color: rgba(255,255,255,.85) !important; }
.lp-cardhead .badge.badge-gray { background: rgba(255,255,255,.22); color: #fff; }
.lp-cardhead .btn-outline { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }
.lp-cardhead .btn-outline:hover { background: rgba(255,255,255,.15); }
.resv-head .resv-head-actions, .lp-cardhead .lp-cardhead-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
/* Que los botones/links blancos dentro del header se vean bien sobre el verde */
.lp-cardhead .btn-light { --bs-btn-bg: #fff; }
/* La tarjeta recorta el header verde a sus esquinas redondeadas */
.lp-card-accent { overflow: hidden; }

/* ============================================
   Trump premium — encabezados CLAROS + filete dorado (sin slabs oscuros)
   Carbón queda solo en el sidebar; protagonista = marfil + oro + serif
   ============================================ */
:root { --gold: #0B6896; --gold-ink: #0B6896; --ivory: #F6F9FB; --hairline: #E3EAF0; --cardhead-bg: #0E2C3E; }

/* Encabezados claros: sin fondo oscuro, título serif, filete dorado fino debajo */
.card-header, .lp-cardhead, .resv-head {
    background: transparent;
    color: var(--gray-900);
    border-bottom: 2px solid var(--gold);
    border-radius: 0;
    padding: 12px 18px;
}
.card-header h5, .card-header h4, .card-header h6,
.lp-cardhead h5, .lp-cardhead h4, .resv-head h5,
.card-header-flex h5 {
    color: var(--gray-900);
    font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    font-size: 16px;
}
.card-header a:not(.btn), .lp-cardhead a:not(.btn), .resv-head a:not(.btn),
.card-header .link-sm { color: var(--gold-ink); text-decoration: none; font-weight: 500; }
.card-header a:not(.btn):hover, .card-header .link-sm:hover { text-decoration: underline; }
.card-header .text-muted, .lp-cardhead .text-muted { color: var(--gray-500) !important; }

/* Ícono (Tareas/Reservas): cuadradito dorado con ícono oscuro, sobre header claro */
.lp-cardhead-icon, .resv-head-icon { background: var(--gold); color: #fff; }

/* Recepción: .card-header-flex → título con filete dorado, sin slab ni sangría */
.card-header-flex {
    background: transparent;
    color: var(--gray-900);
    margin: 0 0 14px;
    padding: 0 0 9px;
    border-bottom: 2px solid var(--gold);
    border-radius: 0;
}
.card-header-flex a:not(.btn), .card-header-flex .link-sm { color: var(--gold-ink); text-decoration: none; font-weight: 500; }
.card-header-flex a:not(.btn):hover, .card-header-flex .link-sm:hover { text-decoration: underline; }

/* Fondo marfil cálido + bordes hairline + filete dorado en KPIs */
body, .content { background: var(--ivory); }
.card { border-color: var(--hairline); }
.kpi-card::before { background: var(--gold); }

/* ============================================
   Retema Trump — botones dorados + menú carbón
   ============================================ */
/* Botones primarios: relleno dorado pleno + texto oscuro (contraste OK) */
.btn-primary, .btn-primary:disabled, .btn-primary.disabled { background: var(--gold); color: #fff; border-color: var(--gold); }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }

/* Menú: ítem activo dorado → texto e ícono oscuros (el bg ya es dorado por --sidebar-active) */
.sidebar nav a.active { color: #ffffff; }
.sidebar nav a.active svg { opacity: 1; }
/* Títulos de sección del menú: gris cálido tenue (el wordmark es el único héroe dorado) */
.sidebar-section { color: #8f897d; }

/* Login: fondo carbón elegante (en vez del gradiente navy) */
.login-container { background: linear-gradient(135deg, #0B6896 0%, #064A6B 100%); }

/* ============================================
   Mini sistema de diseño Trump (coherencia)
   ============================================ */
/* Botones secundarios: contorno limpio (no beige lavado), hover con borde dorado */
.btn-secondary { background: #fff; color: #2e2e2e; border: 1px solid var(--gray-300); }
.btn-secondary:hover { background: #fff; color: #151515; border-color: var(--gold); }
/* Ítem activo del menú con más presencia */
.sidebar nav a.active { font-weight: 600; }
/* Tipografía: cuerpo Montserrat; títulos display en serif (look hotelero/lujo) */
body { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
h1, h2, h3, h4, .page-title, .sidebar-logo h1 { font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif; }
.sidebar-logo small { font-family: 'Montserrat', sans-serif; }

/* ============================================
   Pulido premium — profundidad + definición
   ============================================ */
/* Tarjetas como "papel de calidad": borde casi imperceptible + sombra suave */
.card, .kpi-card { border: 1px solid rgba(0,0,0,.05); box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 8px 22px rgba(0,0,0,.05); }
/* Barra superior definida (apenas más clara que el marfil + hairline) */
.top-header { background: #fbf9f5; border-bottom: 1px solid var(--hairline); }
/* Estados vacíos: más aire y tono sobrio */
td.text-center.text-muted { color: var(--gray-400); font-style: italic; padding: 2.75rem 1rem !important; }

/* ============================================
   Menú — activo refinado (barra dorada fina, no bloque pleno)
   ============================================ */
.sidebar nav a.active {
    background: rgba(184,154,94,.14);
    color: var(--gold);
    box-shadow: inset 3px 0 0 var(--gold);
    font-weight: 600;
}
.sidebar nav a.active svg { opacity: 1; color: var(--gold); }

/* ============================================
   Wordmark TRUMP TOWER (recreación del logo oficial, en serif sobre el carbón)
   ============================================ */
.tt-wordmark { text-align: center; padding: 10px 6px 6px; }
.tt-1 { display: block; font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 600; font-size: 26px; letter-spacing: .14em; color: #ffffff; line-height: .92; }
.tt-2 { display: block; font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .22em; color: #cfe3ef; margin-top: 4px; padding-left: .22em; }
.tt-rule { display: block; height: 1px; width: 86%; margin: 9px auto 7px; background: var(--gold); opacity: .75; }
.tt-sub { display: block; font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 9px; letter-spacing: .3em; color: var(--accent-light); padding-left: .3em; }

/* ============================================
   Consistencia: otros encabezados al mismo lenguaje (serif + filete dorado)
   ============================================ */
.section-title, .dash-widget-header h5, .dash-widget-header h4, .stat-card-header h5 {
    font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 600;
}
.dash-widget-header { border-bottom: 2px solid var(--gold); padding-bottom: 9px; margin-bottom: 12px; }

/* ============================================
   Fix azul de Bootstrap — estados :active/:focus y anillos de foco → dorado
   ============================================ */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary.active,
.btn-primary:first-child:active,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary {
    background-color: var(--primary-dark) !important;
    color: #fff !important;
    border-color: var(--primary-dark) !important;
}
/* Anillo de foco dorado (no azul) en botones, links y campos */
.btn:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(184,154,94,.35) !important;
}
.form-control:focus, .form-select:focus, .form-check-input:focus,
input:focus, textarea:focus, select:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 .2rem rgba(184,154,94,.25) !important;
    outline: none;
}
.form-check-input:checked { background-color: var(--gold) !important; border-color: var(--gold) !important; }

/* ============================================
   Íconos de encabezado — línea fina dorada (opción B)
   ============================================ */
.ch-ico { color: var(--gold); font-size: 16px; margin-right: 8px; vertical-align: -1px; line-height: 1; }
/* Tareas/Reservas: el badge dorado pasa a ícono de línea (unifica con el resto) */
.lp-cardhead-icon, .resv-head-icon { background: transparent; color: var(--gold); width: auto; height: auto; font-size: 17px; }
/* El header Trump es claro (fondo transparente + filete dorado), así que el título
   del header NO puede ser blanco: va oscuro y serif, igual que los <h5> del card-header. */
.resv-head-title, .lp-cardhead-title {
    color: var(--gray-900);
    font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif;
}
/* .card-header trae justify-content:space-between (manda los 2 hijos a los extremos):
   en resv-head/lp-cardhead el ícono+título van juntos a la izquierda; lo de la derecha
   se separa con .resv-head-actions (margin-left:auto). */
.resv-head, .lp-cardhead { justify-content: flex-start; }

/* Control de Acceso: stat-card con acento dorado superior (como los KPI) */
.stat-card { border-top: 2px solid var(--gold); }

/* Unificar tarjetas de métrica: Recepción (.stat-box) = Control de Acceso (.stat-card):
   borde cálido + sombra suave + línea dorada arriba */
.stat-box {
    border: 1px solid rgba(0,0,0,.05);
    border-top: 2px solid var(--gold);
    box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 8px 22px rgba(0,0,0,.05);
    position: relative;
}
.stat-box .stat-ico { position: absolute; top: 12px; right: 14px; color: var(--gold); font-size: 18px; line-height: 1; }
.stat-box a { color: inherit; text-decoration: none; display: block; }
.stat-box.is-active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(184,154,94,.35), 0 8px 22px rgba(0,0,0,.05); }

/* ============================================
   Utilitarias globales (reemplazan inline repetido — regla: nunca inline)
   ============================================ */
.u-m0 { margin: 0; }
.u-m0-fs14 { margin: 0; font-size: 14px; }
.u-tar { text-align: right; }
.u-tac { text-align: center; }
.u-fw5 { font-weight: 500; }
.u-fw6 { font-weight: 600; }
.u-fs11 { font-size: 11px; }
.u-fs12 { font-size: 12px; }
.u-fs13 { font-size: 13px; }
.u-muted12 { font-size: 12px; color: var(--gray-500); }
.u-muted13 { font-size: 13px; color: var(--gray-500); }
.u-dinline { display: inline; }
.u-ico16 { width: 16px; height: 16px; }
.u-ico14 { width: 14px; height: 14px; }
.u-ico20 { width: 20px; height: 20px; }
.u-p16 { padding: 16px; }
.u-flexg8 { display: flex; gap: 8px; }
.u-flex-center { display: flex; align-items: center; }
.u-p0 { padding: 0; }
.u-flex1 { flex: 1; }
.u-mb8 { margin-bottom: 8px; }
.u-mb16 { margin-bottom: 16px; }
.u-mt16 { margin-top: 16px; }
.u-ico24 { width: 24px; height: 24px; }
.u-w100 { width: 100%; }
.u-fs14 { font-size: 14px; }
.u-p1216 { padding: 12px 16px; }
.u-fs12-mb8 { font-size: 12px; margin-bottom: 8px; }
.u-fs11up { font-size: 11px; text-transform: uppercase; }
.u-muted11 { font-size: 11px; color: var(--gray-500); }

/* ============================================
   Reservas de áreas (.resv-*) — paleta Trump (calendario + chips + barra categoría)
   ============================================ */
.resv-layout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .resv-layout { grid-template-columns: 1fr; } }

/* Calendario */
.resv-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.resv-cal-title { font-weight: 600; font-size: 15px; text-transform: capitalize; font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif; }
.resv-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.resv-dow { text-align: center; font-size: 11px; font-weight: 600; color: var(--gray-500); padding: 2px 0; text-transform: uppercase; }
.resv-day { position: relative; min-height: 50px; border: 1px solid var(--hairline); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--gray-700); font-size: 14px; transition: background .15s, border-color .15s; }
.resv-day:hover { background: var(--ivory); }
.resv-day.empty { border: 0; background: transparent; }
.resv-day.today { border-color: var(--gold); }
.resv-day.sel { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.resv-badge { font-size: 10px; font-weight: 700; background: var(--gold); color: #fff; border-radius: 10px; padding: 0 6px; min-width: 16px; text-align: center; line-height: 16px; }
.resv-day.sel .resv-badge { background: #fff; color: var(--primary); }

/* Chips de reserva / libre */
.resv-turno-cell { min-height: 30px; }
.resv-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--ivory); border: 1px solid var(--hairline); border-radius: 20px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; transition: background .15s; text-align: left; }
.resv-chip:hover { background: #efe6d4; }
.resv-chip .resv-chip-h { font-weight: 700; color: var(--gold-ink); }
.resv-chip .resv-chip-n { color: var(--gray-600); }
.resv-libre { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px dashed var(--gray-300); border-radius: 20px; padding: 4px 12px; font-size: 12.5px; color: var(--gray-500); cursor: pointer; }
.resv-libre:hover { border-color: var(--gold); color: var(--gold-ink); }
.resv-libre.locked { cursor: default; border-style: solid; }
.resv-libre.locked:hover { border-color: var(--gray-300); color: var(--gray-500); }

/* Resumen / leyenda */
.resv-leyenda { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--gray-600); }
.resv-leyenda .m { display: inline-block; width: 16px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 8px; }
.resv-resumen-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--gray-100); font-size: 14px; }
.resv-resumen-row:last-child { border-bottom: 0; }

/* Encabezado de categoría: header claro + filete dorado (estilo global) */
.resv-area-card { overflow: hidden; }
.resv-cat-bar { display: flex; align-items: center; gap: 9px; background: transparent; border-bottom: 2px solid var(--gold); padding: 12px 18px; }
.resv-cat-icon { color: var(--gold); font-size: 17px; display: flex; align-items: center; }
.resv-cat-title { font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 600; font-size: 16px; color: var(--gray-900); margin: 0; line-height: 1.15; }
.resv-cat-link { margin-left: auto; font-size: 13px; color: var(--gold-ink); text-decoration: none; font-weight: 500; white-space: nowrap; }
.resv-cat-link:hover { text-decoration: underline; }


/* ============================================================
   SOLANAS — Headers de tarjeta "quietos" (global)
   Blanco + filete inferior + título oscuro; la identidad de marca
   vive en el chip del ícono (azul suave). El header es navegación,
   no contenido: no compite con los datos ni con los badges de estado.
   .card-header (estándar, a sangre) · card-header-flex · dash-widget-header · lp-cardhead · resv-head
   ============================================================ */
.card-header,
.card-header-flex,
.dash-widget-header,
.lp-cardhead, .resv-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  /* Banda azul petróleo (la misma familia que el sidebar #0E2A3D):
     zonificación fuerte y sistema visualmente unificado. El color de
     acción (azul primario) queda para botones; esto es arquitectura. */
  background: linear-gradient(135deg, #143B55 0%, #0E2A3D 100%);
  color: #fff;
  border: 0;
  padding: 10px 16px;
}
/* Headers a sangre (hijos directos de la tarjeta): redondeo solo arriba */
.card-header, .lp-cardhead, .resv-head {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}
/* Headers de sección dentro de card-body (dashboard): banda con aire abajo */
.card-header-flex, .dash-widget-header {
  border-radius: var(--border-radius-sm);
  margin-bottom: 12px;
  padding: 9px 12px;
}

/* Título blanco, semibold */
.card-header h4, .card-header h5, .card-header h6,
.card-header-flex h4, .card-header-flex h5,
.dash-widget-header h4, .dash-widget-header h5,
.lp-cardhead h4, .lp-cardhead h5, .resv-head h5,
.lp-cardhead-title, .resv-head-title {
  margin: 0; color: #fff; font-weight: 600; font-size: 14.5px; letter-spacing: .01em; line-height: 1.2;
  display: inline-flex; align-items: center; gap: 9px;
}

/* Íconos: chip translúcido con ícono celeste claro (acento de marca sobre el petróleo) */
.card-header .ch-ico, .card-header-flex .ch-ico, .dash-widget-header .ch-ico,
.lp-cardhead-icon, .resv-head-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0; margin: 0;
  background: rgba(255,255,255,.13); color: #9CD2EA; border-radius: 7px; font-size: 15px;
}
.card-header svg, .card-header-flex svg, .dash-widget-header svg, .lp-cardhead svg, .resv-head svg { color: #9CD2EA; }

/* Links (Ver todas / Ver cuentas) */
.card-header a:not(.btn), .card-header .link-sm,
.card-header-flex a:not(.btn), .card-header-flex .link-sm,
.dash-widget-header a:not(.btn),
.lp-cardhead a:not(.btn), .resv-head a:not(.btn) {
  color: #fff; opacity: .92; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.card-header a:not(.btn):hover, .card-header-flex a:not(.btn):hover,
.dash-widget-header a:not(.btn):hover, .lp-cardhead a:not(.btn):hover, .resv-head a:not(.btn):hover { opacity: 1; text-decoration: underline; }

/* Texto mudo dentro del header */
.card-header .text-muted, .card-header-flex .text-muted, .dash-widget-header .text-muted,
.lp-cardhead .text-muted, .resv-head .text-muted { color: rgba(255,255,255,.75) !important; }

/* Botones dentro del header oscuro: que no se pierdan sobre el petróleo */
.card-header .btn-primary, .card-header-flex .btn-primary, .dash-widget-header .btn-primary,
.lp-cardhead .btn-primary, .resv-head .btn-primary {
  background: #fff; color: var(--primary-dark); border-color: #fff;
}
.card-header .btn-primary:hover, .card-header-flex .btn-primary:hover,
.dash-widget-header .btn-primary:hover { background: #E7F1F7; color: var(--primary-dark); border-color: #E7F1F7; }
.card-header .btn-secondary, .card-header .btn-outline,
.card-header-flex .btn-secondary, .card-header-flex .btn-outline,
.lp-cardhead .btn-outline, .resv-head .btn-outline {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55);
}
.card-header .btn-outline:hover, .card-header-flex .btn-outline:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Acción destructiva por fila: neutra en reposo, roja al hover.
   El rojo permanente queda reservado para información (saldos, alertas). */
.act-danger { color: var(--gray-400) !important; }
.act-danger:hover { color: var(--danger) !important; border-color: var(--danger) !important; background: #FEF2F2 !important; }

/* Cifras: dígitos tabulares → las columnas de dinero alinean unidad
   bajo unidad (clave en folios, cajas y resúmenes). */
.rsm-v, .kv-value, .table td.text-end, .stat-box-value { font-variant-numeric: tabular-nums; }

/* Fila de total en resúmenes (Saldo): separada del detalle */
.rsm-item.rsm-total { border-top: 2px solid var(--gray-200); padding-top: 10px; margin-top: 2px; }
.rsm-item.rsm-total .rsm-v { font-size: 17px; }


/* ============================================================
   SOLANAS — Pase de pulido visual (contraste · jerarquía · densidad)
   Bloque final: gana en la cascada.
   ============================================================ */
:root {
  --ivory: #E3EAF2;        /* fondo de página con presencia → las cards flotan */
  --hairline: #E2E7EF;
}

/* Fondo de página un punto más oscuro que las tarjetas */
body, .content { background: var(--ivory); }

/* Cards: separación real (sombra + borde definido) y radio consistente */
.card {
  border: 1px solid #E3E8F0;
  border-radius: var(--border-radius);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 4px 10px rgba(16,24,40,.05);
}

/* Inputs / selects: borde más definido y foco azul visible */
.form-control, .form-select {
  border-color: var(--gray-300);
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(11,104,150,.13);
}

/* Labels: más chicos, mudos y compactos → jerarquía label → dato */
.form-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 5px;
  letter-spacing: .01em;
}

/* Títulos de página un poco más fuertes (jerarquía superior) */
.page-title { font-weight: 700; color: var(--gray-900); }

/* Botón primario: un toque más sólido/presente */
.btn-primary { font-weight: 600; }

/* Tablas: cabecera más marcada para separar del contenido */
.table thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--gray-500);
  border-bottom: 1px solid var(--gray-200);
}

/* ============================================================
   SOLANAS — Pase UX/UI 2: presencia (menú con identidad + KPIs con ancla)
   ============================================================ */

/* --- SIDEBAR: navy de marca (sobrio, con profundidad) --- */
:root {
  --sidebar-bg: #0E2A3D;
  --sidebar-hover: #18415A;
  --sidebar-active: #1786C0;
  --sidebar-text: #AAC1CF;
  --sidebar-text-active: #ffffff;
  --sidebar-border: #1C3F57;
}
/* Jerarquía del menú: MÓDULO (brillante) › GRUPO (tenue + separador) › ítem (legible) */
.sidebar-section { color: #B9CCD8 !important; letter-spacing: .09em; }
.sidebar-module-header .sidebar-section { font-size: 11px; font-weight: 700; }
.sidebar-subsection {
  color: #D8B77E !important;
  font-size: 10px; font-weight: 700; letter-spacing: .11em;
  padding: 16px 16px 6px; margin-top: 4px;
  background: none;
  border-top: 1px solid rgba(255,255,255,.055);
  border-bottom: none;
}
.sidebar nav a { font-weight: 500; }
.sidebar nav a.active { background: var(--sidebar-active) !important; color: #fff !important; box-shadow: inset 3px 0 0 rgba(255,255,255,.7); font-weight: 600; }
.sidebar nav a.active svg { opacity: 1; }
.tt-sub { color: #79ADCC !important; }
/* Logo en el encabezado del sidebar (en blanco sobre el navy) */
.tt-logo { display: block; width: 100%; max-width: 168px; margin: 2px auto 4px; filter: brightness(0) invert(1); }

/* ============================================================
   SOLANAS — Resumen (definición) y form-grid compactos
   Reemplazan .row/.col dentro de paneles (que se apilan acá).
   ============================================================ */
.rsm-grid { display: flex; flex-direction: column; }
.rsm-item {
    display: flex; align-items: baseline; gap: 16px;
    padding: 10px 2px; border-bottom: 1px solid var(--gray-100);
}
.rsm-item:last-child { border-bottom: none; }
/* Variante 2 columnas (solo donde hay ancho suficiente, ej. tarjeta de datos de la reserva) */
.rsm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.rsm-grid-2 .rsm-item.rsm-full { grid-column: 1 / -1; }
@media (max-width: 992px) { .rsm-grid-2 { grid-template-columns: 1fr; } }
.rsm-k {
    flex: 0 0 150px; font-size: 11px; font-weight: 600; color: var(--gray-500);
    text-transform: uppercase; letter-spacing: .04em; line-height: 1.4;
}
.rsm-v { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--gray-900); line-height: 1.4; }
.rsm-v.is-strong { font-size: 15px; font-weight: 700; }

.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.fgrid .f-12 { grid-column: 1 / -1; }
.fgrid .form-label { margin-bottom: 3px; }

/* ============================================================
   SOLANAS — Densidad operativa (moderada)
   Menos aire en tablas y filas de datos: la misma info en ~80%
   del alto. Sin llegar a densidad de terminal.
   ============================================================ */
.table thead th { padding: 10px 14px; }
.table tbody td { padding: 10px 14px; }
.rsm-item { padding: 8px 0; }
.kv-item { padding: 7px 0; }

/* Tablas que conservan la línea también en la última fila (sub-tablas
   apiladas, ej. Actividad de la estadía: con 1 sola fila quedaban sin línea) */
.table-lined tbody tr:last-child td { border-bottom: 1px solid var(--gray-100); }

/* ============================================================
   SOLANAS — Cabecera de página (.detail-head)
   Banda blanca tipo card: título + estado + meta a la izquierda,
   KPIs y acciones a la derecha, y tabs fusionadas al borde inferior
   (subrayado, no "carpeta"). Patrón para vistas de detalle con tabs.
   ============================================================ */
.detail-head {
  background: #fff;
  border: 1px solid #E3E8F0;
  border-radius: var(--border-radius);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 4px 10px rgba(16,24,40,.05);
}
.detail-head-main {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  padding: 14px 20px 12px;
}
.detail-head .nav-tabs {
  padding: 0 10px;
  border-bottom: 0;
  border-top: 1px solid var(--gray-100);
}
.detail-head .nav-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--gray-600); padding: 10px 14px; font-weight: 500; border-radius: 0;
}
.detail-head .nav-tabs .nav-link:hover { color: var(--primary); border-bottom-color: var(--gray-300); }
.detail-head .nav-tabs .nav-link.active { color: var(--primary-dark); border-bottom-color: var(--primary); background: transparent; }

/* Chip de KPI compacto para la cabecera (ej. saldo del folio):
   misma altura visual que los botones, no un cartel aparte */
.stat-chip {
  display: flex; align-items: center;
  border: 1px solid var(--gray-200); background: #F8FAFC;
  border-radius: 10px; padding: 4px 14px; text-align: right;
}
.stat-chip .sc-l { font-size: 10.5px; color: var(--gray-500); text-transform: uppercase; letter-spacing: .05em; line-height: 1.2; }
.stat-chip .sc-v { font-size: 17px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }

/* ============================================================
   RRHH — estilos portados de nexo_personal (jul-2026)
   Utilidades de página + organigrama + jornadas + horarios + vencimientos
   ============================================================ */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.page-head h4 { margin: 0; }
.page-title-sub { font-size: 13px; color: var(--gray-500); }

.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }

/* Avatar grande (fichas / encabezados) — reusa .avatar */
.avatar-lg { width: 72px; height: 72px; font-size: 26px; }

/* Grilla de campos de formulario */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.form-grid .field-full { grid-column: 1 / -1; }

/* Grilla de tarjetas (detalle de ficha, paneles) */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

/* Encabezado de ficha: avatar + identidad + meta a la derecha */
.ficha-headline {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.ficha-headline .fh-main { flex: 1; min-width: 200px; }
.ficha-headline .fh-meta { text-align: right; }

/* Campos de barra de filtros */
.filtro-buscar { flex: 1; min-width: 200px; }
.filtro-campo { width: 160px; min-width: 140px; }

/* Tabla con primera columna fija (grillas anchas: planificación, etc.) */
.table-sticky-1 th:first-child,
.table-sticky-1 td:first-child {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 2;
  box-shadow: 1px 0 0 var(--gray-200);
}
.table-sticky-1 thead th:first-child { z-index: 3; }
.celda-plan { min-width: 118px; }

.badge-editada { background: #FEF9C3; color: #854D0E; }
.solo-imprimir { display: none; }
.lp-pager { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 14px 10px 4px; }
.lp-page { min-width: 32px; height: 32px; padding: 0 9px; border: 1px solid var(--gray-300); background: #fff; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--gray-700); cursor: pointer; }
.lp-page:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.lp-page.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.lp-page:disabled { opacity: .4; cursor: default; }

/* ============================================================
   RRHH · Organigrama (estructura jerárquica)
   ============================================================ */
.org-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
    align-items: start;
}
.org-card { margin-bottom: 0; }
.org-encargado {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--gray-200);
}
.org-encargado-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gray-500);
    font-weight: 600;
}
.org-list { list-style: none; margin: 0; padding: 0; }
.org-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--border-radius-sm);
}
.org-list-item + .org-list-item { margin-top: 2px; }
.org-list-item:hover { background: var(--gray-50); }
.org-list-item.is-jefe { background: var(--accent-bg); }
.org-person { font-weight: 600; color: var(--gray-800); font-size: .875rem; }
.org-jefe-icon { color: var(--warning); font-size: .75rem; margin-left: 4px; }

/* ============================================================
   RRHH · Jornadas (lista expandible + agrupación)
   ============================================================ */
.j-table .j-col-toggle { width: 34px; text-align: center; }
.j-main { cursor: pointer; }
.j-main:hover { background: var(--gray-50); }
.j-chevron { transition: transform .15s ease; color: var(--gray-500); }
.j-chevron-open { transform: rotate(90deg); }
.j-group-head { cursor: pointer; background: var(--accent-bg); }
.j-group-head:hover { background: var(--primary-bg); }
.j-group-head .j-chevron { transform: rotate(-90deg); }
.j-group-head .j-chevron.j-chevron-open { transform: rotate(0deg); }
.j-detail { background: var(--gray-50); }
.j-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px 20px;
    padding: 6px 4px;
}
.j-detail-grid > div { font-size: .85rem; color: var(--gray-800); }
.j-detail-obs { grid-column: 1 / -1; }
.j-detail-lbl {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gray-500);
    font-weight: 600;
    margin-bottom: 2px;
}

/* ============================================================
   RRHH · Listados de horarios (grilla empleados × días)
   ============================================================ */
.hl-table { min-width: 100%; }
.hl-table th, .hl-table td { white-space: nowrap; }
.hl-sticky {
    position: sticky;
    left: 0;
    background: var(--card-bg, #fff);
    z-index: 2;
    box-shadow: 1px 0 0 var(--gray-200);
}
.hl-table thead .hl-sticky { z-index: 3; }
.hl-day { min-width: 62px; }
.hl-day.hl-wknd { background: var(--gray-50); }
.hl-dow { font-weight: 700; color: var(--gray-700); }
.hl-date { font-size: .68rem; color: var(--gray-500); }
.hl-cell { font-size: .78rem; font-variant-numeric: tabular-nums; }
.hl-trabaja { background: var(--primary-bg); color: var(--primary-dark); }
.hl-medio   { background: var(--warning-bg); color: #92600a; }
.hl-libre   { background: var(--gray-100); color: var(--gray-500); }
.hl-none    { color: var(--gray-300); }
.hl-legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding: 10px 16px;
    font-size: .78rem;
    color: var(--gray-600);
    border-top: 1px solid var(--gray-200);
}
.hl-legend .hl-dot {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: -2px;
}
.hl-legend .hl-dot.hl-none { border: 1px solid var(--gray-300); }

/* ============================================================
   RRHH · Vencimientos (semáforo)
   ============================================================ */
.venc-row td { border-left: 0; }
.venc-icon { width: 34px; text-align: center; color: var(--gray-400); font-size: 1rem; }
.venc-row.venc-vencido { box-shadow: inset 4px 0 0 var(--danger); }
.venc-row.venc-critico { box-shadow: inset 4px 0 0 var(--warning); }
.venc-row.venc-proximo { box-shadow: inset 4px 0 0 var(--primary-light); }
.venc-row.venc-vencido .venc-icon { color: var(--danger); }
.venc-row.venc-critico .venc-icon { color: var(--warning); }
/* Widget de vencimientos en el dashboard */
.venc-widget-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
}
.venc-widget-item + .venc-widget-item { border-top: 1px solid var(--gray-100); }
.venc-widget-item .venc-w-when { margin-left: auto; font-size: .78rem; font-weight: 600; }
.venc-w-vencido { color: var(--danger); }
.venc-w-critico { color: var(--warning); }
.venc-w-proximo { color: var(--gray-500); }

/* Variante ancha del layout ficha (dashboard RRHH: la columna de
   vencimientos necesita aire para nombre + concepto + chip "en Nd") */
.ficha-grid.ficha-grid-wide { grid-template-columns: 1fr 420px; }
@media (max-width: 1100px) { .ficha-grid.ficha-grid-wide { grid-template-columns: 1fr; } }

/* Fila "sale hoy" (listado En casa): banda ámbar + filete izquierdo.
   Más notorio que el fondo solo — se distingue de un golpe de vista. */
.table tr.tr-sale-hoy > td { background: #FFF7E0; }
.table tr.tr-sale-hoy > td:first-child { box-shadow: inset 3px 0 0 #F59E0B; }
.table tr.tr-sale-hoy:hover > td { background: #FDEFC8; }

/* Modales propios (velo DENTRO de .modal): el z-index 1050 que Bootstrap le da a
   .modal-backdrop tapaba el diálogo y cualquier clic cerraba el modal. Bootstrap
   monta su backdrop FUERA del .modal, así que estas reglas no lo afectan. */
.modal > .modal-backdrop { z-index: 1; }
.modal > .modal-dialog { z-index: 2; }

/* Housekeeping · detalle de unidad: selector de estado tipo lista */
.hk-estado-opt {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border: 1px solid var(--gray-200); border-radius: 9px;
    background: #fff; cursor: pointer; font: inherit; font-size: 13.5px; color: var(--gray-700);
    transition: border-color .12s, background .12s;
}
.hk-estado-opt:hover:not(:disabled) { border-color: var(--primary); background: var(--gray-50); }
.hk-estado-opt.activo { background: var(--gray-50); font-weight: 700; cursor: default; }
.hk-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }

/* Tablero gerencial: barras de ocupación diaria */
.tb-chart { display: flex; align-items: flex-end; gap: 3px; height: 160px; }
.tb-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.tb-bar { width: 100%; background: #7FB3CC; border-radius: 3px 3px 0 0; transition: background .15s; }
.tb-col:hover .tb-bar { background: var(--primary); }
.tb-bar.tb-hoy { background: #0B4B6B; }
.tb-dia { font-size: 9.5px; color: var(--gray-500); margin-top: 3px; }

/* Comentarios: avatar circular con iniciales */
.cmt-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--primary-bg); color: var(--primary);
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
}
.cmt-avatar-sm { width: 21px; height: 21px; font-size: 9.5px; }

/* Early check-in (lila) y late check-out (celeste): misma banda, otro color */
.table tr.tr-early > td { background: #F5EFFC; }
.table tr.tr-early > td:first-child { box-shadow: inset 3px 0 0 #A855F7; }
.table tr.tr-early:hover > td { background: #EEE3FA; }
.table tr.tr-late > td { background: #E8F4FD; }
.table tr.tr-late > td:first-child { box-shadow: inset 3px 0 0 #38BDF8; }
.table tr.tr-late:hover > td { background: #DAECFA; }

/* ============================================================
   HOUSEKEEPING — Grilla de habitaciones (rediseño jul-2026)
   Fondo de celda = estado de limpieza (mapa de calor) ·
   franja izquierda petróleo = huésped en casa · chips con palabra
   para lo operativo (Urgente / Sale hoy / Llega hoy / Bloqueada).
   Paleta apagada a pedido: ni pastel ni chillona.
   ============================================================ */
.hkg-leyenda { display:flex; flex-wrap:wrap; gap:10px 14px; font-size:11.5px; color:var(--gray-500); align-items:center; }
.hkg-leyenda .sw { display:inline-block; width:11px; height:11px; border-radius:3px; vertical-align:-1px; margin-right:4px; border:1px solid var(--gray-200); }
.hkg-torre {
    font-size:13px; font-weight:700; color:var(--gray-700); margin:18px 0 6px;
    position:sticky; top:0; background:#fff; z-index:5; padding:4px 0;
}
.hkg-torre-wrap { overflow-x:auto; }
.hkg-piso { display:flex; gap:10px; align-items:flex-start; margin-bottom:6px; }
.hkg-piso-lbl { flex:0 0 56px; font-size:10.5px; font-weight:700; color:var(--gray-400); text-transform:uppercase; letter-spacing:.04em; padding-top:16px; text-align:right; }
.hkg-grid { display:grid; gap:6px; flex:1; min-width:0; }
.hkg-empty { min-height:52px; border:1px dashed var(--gray-100); border-radius:8px; }

.hkg-cell {
    min-height:52px; border:1px solid var(--gray-200); border-radius:8px;
    background:#fff; padding:6px 8px 6px 11px; position:relative; text-decoration:none;
    color:inherit; display:block; transition:box-shadow .12s, transform .12s, opacity .15s; overflow:hidden;
}
.hkg-cell:hover { box-shadow:0 6px 16px rgba(16,24,40,.14); transform:translateY(-1px); }
.hkg-cell.hkg-dim { opacity:.15; }

/* Fondo = limpieza (tonos apagados) */
.hkg-cell.l-sucia { background:#EDD5CF; border-color:#C99C90; }
.hkg-cell.l-cheq  { background:#D5E7DC; border-color:#9CC0AA; }
/* limpia = blanco (base) */

/* Franja izquierda = huésped en casa */
.hkg-cell.dentro::before {
    content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
    background:#16405C;
}
/* Bloqueada / fuera de servicio: franja rayada + celda atenuada */
.hkg-cell.fs { background:repeating-linear-gradient(45deg,#fff,#fff 6px,#F1F3F6 6px,#F1F3F6 12px); }
.hkg-cell.fs::before {
    content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
    background:repeating-linear-gradient(45deg,#9CA3AF 0 4px,#E5E7EB 4px 8px);
}

.hkg-num { font-weight:700; font-size:13px; line-height:1.1; color:var(--gray-900); font-variant-numeric:tabular-nums; }
.hkg-who { font-size:10px; color:var(--gray-600); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hkg-bed { position:absolute; top:6px; right:7px; font-size:9px; font-weight:700; color:var(--gray-400); }

/* Chips operativos: palabra, no código de color */
.hkg-chip {
    display:inline-block; margin-top:3px; padding:0 6px; border-radius:99px;
    font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; line-height:1.7;
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hkg-chip.sale  { background:#EAD494; color:#63470D; }
.hkg-chip.llega { background:#C4DAED; color:#28527A; }
.hkg-chip.urg   { background:#A94438; color:#fff; }
.hkg-chip.bloq  { background:var(--gray-100); color:var(--gray-500); }

/* Grilla HK: franja punteada = unidad asignada a una reserva SIN check-in aún */
.hkg-cell.asignada::before {
    content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
    background:repeating-linear-gradient(180deg,#8FB3CC 0 6px,transparent 6px 11px);
}
/* Grilla HK: contadores del filtro activo como pastillas con el mismo
   lenguaje de color de las celdas (se leen de un vistazo) */
.hkg-counts { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--gray-100); }
.hkg-counts .hc {
    display:inline-flex; align-items:baseline; gap:6px; padding:4px 12px;
    border-radius:99px; border:1px solid var(--gray-200); background:#fff;
    font-size:12px; color:var(--gray-600); white-space:nowrap;
}
.hkg-counts .hc b { font-size:15px; color:var(--gray-900); font-variant-numeric:tabular-nums; }
.hkg-counts .hc.hc-total { background:#16405C; border-color:#16405C; color:rgba(255,255,255,.8); }
.hkg-counts .hc.hc-total b { color:#fff; }
.hkg-counts .hc.hc-encasa { background:#E2EBF2; border-color:#B7CDDD; color:#2F5C85; }
.hkg-counts .hc.hc-encasa b { color:#1E3F5C; }
.hkg-counts .hc.hc-sale { background:#EAD494; border-color:#D9BE72; color:#63470D; }
.hkg-counts .hc.hc-sale b { color:#4E3707; }
.hkg-counts .hc.hc-asig { background:#fff; border:1px dashed #8FB3CC; color:#2F5C85; }
.hkg-counts .hc.hc-asig b { color:#1E3F5C; }
.hkg-counts .hc.hc-sucia { background:#EDD5CF; border-color:#C99C90; color:#8A4437; }
.hkg-counts .hc.hc-sucia b { color:#6E3128; }
.hkg-counts .hc.hc-cheq { background:#D5E7DC; border-color:#9CC0AA; color:#2F6647; }
.hkg-counts .hc.hc-cheq b { color:#1F4A32; }
.hkg-counts .hc.hc-urg { background:#A94438; border-color:#A94438; color:rgba(255,255,255,.85); }
.hkg-counts .hc.hc-urg b { color:#fff; }
.hkg-counts .gap { width:8px; }
.hkg-counts .hc[data-f] { cursor:pointer; user-select:none; transition:box-shadow .12s; }
.hkg-counts .hc[data-f]:hover { box-shadow:0 2px 8px rgba(16,24,40,.14); }
.hkg-counts .hc.activo { outline:2px solid var(--primary); outline-offset:1px; }

/* ============================================================
   RECEPCIÓN — Disponibilidad diaria (matriz tipos × días)
   Paridad WinPax con la estética del sistema: fin de semana tintado,
   hoy resaltado, negativos = overbooking en rojo, cero en ámbar.
   ============================================================ */
.dispo-table { min-width:100%; }
.dispo-table th, .dispo-table td { white-space:nowrap; text-align:center; padding:7px 10px; }
.dispo-table th:first-child, .dispo-table td:first-child { text-align:left; }
.dispo-table thead th { font-size:11px; }
.dispo-table thead .dow { display:block; font-size:9.5px; color:var(--gray-400); font-weight:600; letter-spacing:.05em; }
.dispo-table td { font-variant-numeric:tabular-nums; font-weight:600; }
.dispo-table .col-finde { background:#F2F6FA; }
.dispo-table .col-hoy { background:#E7F1F7; box-shadow:inset 0 2px 0 var(--primary); }
/* Divisor de sección: banda petróleo, misma familia que los headers de card */
.dispo-table tr.dsec td { background:linear-gradient(135deg,#143B55 0%,#0E2A3D 100%); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#fff; padding:6px 12px; text-align:left; }
.dispo-table .dp-neg { color:#B42318; font-weight:700; background:#F6E2DE; border-radius:6px; }
.dispo-table .dp-zero { color:#8A6A12; font-weight:700; background:#F3E8C6; border-radius:6px; }
.dispo-table .dp-strong { font-weight:700; }
.dispo-table .dp-muted { color:var(--gray-500); }
.dispo-tipo-cod { display:inline-block; min-width:34px; font-weight:700; color:var(--primary); }
/* Selector segmentado (Todas / Garantidas / Espera) */
.seg { display:inline-flex; border:1px solid var(--gray-300); border-radius:9px; overflow:hidden; }
.seg a { padding:7px 14px; font-size:13px; font-weight:500; color:var(--gray-600); text-decoration:none; border-right:1px solid var(--gray-300); }
.seg a:last-child { border-right:0; }
.seg a:hover { background:var(--gray-50); }
.seg a.active { background:#16405C; color:#fff; }

/* Global: las tablas a sangre dentro de una card respetan el redondeo
   de la tarjeta (antes las esquinas quedaban cuadradas) */
.card > .table-responsive { overflow-x: auto; border-radius: 0 0 var(--border-radius) var(--border-radius); }
.card > .table-responsive:first-child { border-radius: var(--border-radius); }
.card > .card-header + .table-responsive { border-radius: 0 0 var(--border-radius) var(--border-radius); }

/* Fechas de la matriz de disponibilidad: clickeables → reservas del día */
.dispo-table thead .dispo-fecha { color:inherit; text-decoration:none; display:block; border-radius:6px; padding:2px 4px; margin:-2px -4px; }
.dispo-table thead .dispo-fecha:hover { background:var(--primary-bg); color:var(--primary-dark); }
.dispo-table thead .dispo-fecha:hover .dow { color:var(--primary); }

/* ============================================================
   Menú contextual (botón derecho) — componente global NexoCtx
   ============================================================ */
.ctx-menu {
    position: fixed; z-index: 3000; min-width: 215px;
    background: #fff; border: 1px solid var(--gray-200); border-radius: 10px;
    box-shadow: 0 10px 30px rgba(16,24,40,.18), 0 2px 6px rgba(16,24,40,.08);
    padding: 6px; animation: ctxIn .09s ease-out;
}
@keyframes ctxIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ctx-menu { animation: none; } }
.ctx-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 12px; border: 0; background: none; border-radius: 7px;
    font-size: 13px; font-weight: 500; color: var(--gray-700);
    text-decoration: none; cursor: pointer; text-align: left;
}
.ctx-item i { color: var(--primary); width: 16px; text-align: center; }
.ctx-item:hover { background: #E9F1F7; color: var(--gray-900); }
.ctx-item.danger { color: #B42318; }
.ctx-item.danger i { color: #B42318; }
.ctx-item.danger:hover { background: #FBEAE7; }
.ctx-sep { height: 1px; background: var(--gray-100); margin: 5px 4px; }

/* Grilla HK: modo selección múltiple para bloquear */
.hkg-cell.sel { outline: 2px solid var(--primary); outline-offset: 1px; box-shadow: 0 0 0 4px rgba(11,104,150,.14); }
.hkg-selbar {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
    z-index: 2500; display: flex; gap: 10px; align-items: center;
    background: #16405C; color: #fff; border-radius: 12px; padding: 10px 16px;
    box-shadow: 0 12px 30px rgba(16,24,40,.35); font-size: 13.5px;
}
.hkg-selbar b { font-variant-numeric: tabular-nums; }

/* Folio: marca compacta de línea facturada + panel de comprobantes de la reserva */
.fol-fac {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 8px; border-radius: 999px; vertical-align: 1px;
    background: #D1FAE5; color: #047857; font-size: 11px; font-weight: 700;
    text-decoration: none; white-space: nowrap;
}
.fol-fac:hover { background: #A7F3D0; color: #065F46; }
.cmp-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0; border-bottom: 1px dashed var(--gray-100);
    font-size: 13px;
}
.cmp-row:last-child { border-bottom: 0; }
.cmp-row .cmp-num { font-weight: 600; text-decoration: none; color: var(--primary); }
.cmp-row .cmp-num:hover { text-decoration: underline; }
.cmp-row .cmp-monto { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-row.cmp-nc { padding-left: 18px; position: relative; }
.cmp-row.cmp-nc::before { content: '↳'; position: absolute; left: 4px; color: var(--gray-400); }
.cmp-row.cmp-anulado { opacity: .55; }
.cmp-row.cmp-anulado .cmp-monto { text-decoration: line-through; }