/* =====================================================================
   ESEASA RH — Hoja de estilos principal
   Versión: 3.0.0 (Responsividad completa)
   ===================================================================== */

:root {
  --primary-navy: #0a192f;
  --secondary-navy: #1e293b;
  --accent-color: #0284c7;
  --accent-hover: #0369a1;
  --bg-subtle: #f8fafc;
  --card-border: #e2e8f0;
}

/* =====================================================================
   BASE
   ===================================================================== */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #f1f5f9;
  color: #334155;
  -webkit-font-smoothing: antialiased;
}

/* =====================================================================
   TIPOGRAFÍA Y UTILIDADES
   ===================================================================== */
.bg-navy   { background-color: var(--primary-navy) !important; }
.text-navy { color: var(--primary-navy) !important; }
.text-accent { color: var(--accent-color) !important; }

.fs-7 { font-size: 0.85rem; }
.fs-8 { font-size: 0.75rem; }
.letter-spacing  { letter-spacing: 0.05em; }
.tracking-tight  { letter-spacing: -0.025em; }

/* =====================================================================
   NAVBAR
   ===================================================================== */
.brand-logo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
}

/* =====================================================================
   NAVEGACIÓN PRINCIPAL (TABS)
   Scroll horizontal en móvil para que todos los tabs sean accesibles
   ===================================================================== */
.nav-tabs-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;        /* Firefox */
}
.nav-tabs-wrapper::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.custom-nav-pills {
  background: #ffffff;
  padding: 6px;
  display: inline-flex;         /* En escritorio: inline */
  white-space: nowrap;          /* Evita salto de línea dentro del ul */
  min-width: 100%;              /* Ocupa todo el ancho disponible */
  flex-wrap: nowrap;
}

.custom-nav-pills .nav-link {
  color: #64748b;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.custom-nav-pills .nav-link:hover {
  color: var(--primary-navy);
  background-color: #f8fafc;
}
.custom-nav-pills .nav-link.active {
  color: #ffffff;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
}
.custom-nav-pills .nav-link.active .text-primary,
.custom-nav-pills .nav-link.active .text-secondary,
.custom-nav-pills .nav-link.active .text-success,
.custom-nav-pills .nav-link.active .text-warning,
.custom-nav-pills .nav-link.active .text-info {
  color: #38bdf8 !important;
}

/* En pantallas pequeñas: ocultar texto de los tabs y mostrar solo íconos */
@media (max-width: 575.98px) {
  .custom-nav-pills .nav-link span:not(.badge) {
    display: none;
  }
  .custom-nav-pills .nav-link {
    font-size: 1rem;
    padding: 8px 12px !important;
  }
  .custom-nav-pills .nav-link .badge {
    display: none; /* Ocultar badges en xs para ahorrar espacio */
  }
}

/* =====================================================================
   MAIN CONTAINER — Padding reducido en móvil
   ===================================================================== */
main.container-fluid {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (max-width: 575.98px) {
  main.container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.75rem;
  }
}

/* =====================================================================
   STAT CARDS (en tab de Citas)
   ===================================================================== */
.stat-card {
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s cubic-bezier(0.16,1,0.3,1);
  border: 1px solid var(--card-border) !important;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.07), 0 4px 6px -2px rgba(0,0,0,.03) !important;
}
.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

/* =====================================================================
   FILTER CARD & TABLE CARD
   ===================================================================== */
.filter-card { border: 1px solid var(--card-border) !important; }
.table-card  { border: 1px solid var(--card-border) !important; }

/* =====================================================================
   TABLA GLOBAL — overflow correcto en todos los dispositivos
   ===================================================================== */
/* Forzar que table-responsive siempre habilite scroll horizontal */
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Evitar que las tablas de config colapsen su ancho al mínimo */
.table-responsive > table {
  min-width: 500px; /* suficiente para que las tablas sencillas no queden raras */
}

/* Tabla de nómina necesita más ancho mínimo por sus columnas */
.table-responsive > .custom-payroll-table {
  min-width: 400px; /* con columnas ocultas se reduce bastante */
}

/* Encabezados de tabla: no partir palabras */
table thead th {
  white-space: nowrap;
}

/* En móvil: header de la tabla en columna */
@media (max-width: 767.98px) {
  .card-header.d-flex.justify-content-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem;
  }
  /* Botones del header de tabla: full width en xs */
  .card-header .d-flex.align-items-center.gap-2.flex-wrap {
    width: 100%;
    justify-content: flex-start;
  }
}

/* =====================================================================
   TABLA DE NÓMINA
   ===================================================================== */
.custom-payroll-table { font-size: 0.875rem; }
.custom-payroll-table thead th {
  padding: 10px 12px;
  border-bottom: 2px solid #e2e8f0;
  background-color: #f8fafc;
  white-space: nowrap;
}
.custom-payroll-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  white-space: nowrap;
}
.custom-payroll-table tbody tr { transition: background-color 0.15s ease; }
.custom-payroll-table tbody tr:hover { background-color: #f8fafc; }

/* Columna Colaborador: permite wrap para nombre largo */
.custom-payroll-table .col-colaborador { white-space: normal; min-width: 160px; }
/* Columna Neto: siempre visible, min-width */
.custom-payroll-table .col-neto { min-width: 110px; }
/* Columna Acciones */
.custom-payroll-table .col-acciones { min-width: 110px; }

/* En móvil: padding compacto */
@media (max-width: 575.98px) {
  .custom-payroll-table thead th,
  .custom-payroll-table tbody td {
    padding: 8px 8px;
    font-size: 0.78rem;
  }
  .custom-payroll-table .col-colaborador { min-width: 130px; }
}

/* Avatar de empleado */
.emp-avatar-initials {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  color: #0284c7;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Neto a Pagar pill */
.badge-neto-pill {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: #065f46;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #a7f3d0;
  display: inline-block;
  min-width: 95px;
  text-align: right;
  font-family: monospace;
  font-size: 0.9rem;
}
.currency-text {
  font-family: monospace;
  font-size: 0.85rem;
}

/* Botón de acción en tabla */
.btn-action-view {
  background-color: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.15s ease;
}
.btn-action-view:hover {
  background-color: var(--primary-navy);
  color: #ffffff;
  border-color: var(--primary-navy);
  transform: scale(1.05);
}

/* =====================================================================
   PAGINACIÓN
   ===================================================================== */
.pagination .page-item .page-link {
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  transition: all 0.15s ease;
}
.pagination .page-item.active .page-link {
  background-color: var(--primary-navy);
  border-color: var(--primary-navy);
  color: #ffffff;
  font-weight: 600;
}
.pagination .page-item:not(.active) .page-link:hover {
  background-color: #f1f5f9;
  color: var(--primary-navy);
}

/* Footer de tabla: apila info + paginador en móvil */
@media (max-width: 575.98px) {
  .card-footer.d-flex.justify-content-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem;
  }
  .pagination .page-item .page-link {
    padding: 4px 8px;
    font-size: 0.75rem;
  }
}

/* =====================================================================
   ZONA DE CARGA (DROP ZONE)
   ===================================================================== */
.drop-zone {
  border-color: #cbd5e1 !important;
  background-color: #ffffff;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
.drop-zone:hover, .drop-zone.dragover {
  border-color: #0284c7 !important;
  background-color: #f0f9ff;
}

/* En móvil: reducir padding del drop zone */
@media (max-width: 575.98px) {
  .drop-zone { padding: 2rem 1rem !important; }
  .drop-zone .display-4 { font-size: 2rem; }
}

/* =====================================================================
   LOGS BOX
   ===================================================================== */
.logs-box {
  min-height: 200px;
  max-height: 350px;
  overflow-y: auto;
  border: 1px solid #334155;
  scrollbar-width: thin;
}
.logs-box div { margin-bottom: 4px; }

/* =====================================================================
   TAB IMPORTACIÓN — layout de 2 columnas colapsa en md
   ===================================================================== */
@media (max-width: 991.98px) {
  #tab-import-pane .col-lg-7,
  #tab-import-pane .col-lg-5 {
    width: 100% !important;
    max-width: 100%;
  }
}

/* =====================================================================
   TAB WHATSAPP — estado de conexión + QR en columna en móvil
   ===================================================================== */
@media (max-width: 767.98px) {
  #tab-whatsapp-pane .col-md-5,
  #tab-whatsapp-pane .col-md-7 {
    width: 100% !important;
    max-width: 100%;
  }
}

/* =====================================================================
   TAB CONFIGURACIÓN — Sub-tabs scrollables en móvil
   ===================================================================== */
#cfgSubTabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
  white-space: nowrap;
  padding-bottom: 4px;
}
#cfgSubTabs::-webkit-scrollbar { display: none; }

#cfgSubTabs .nav-link {
  white-space: nowrap;
  font-size: 0.82rem;
}

@media (max-width: 575.98px) {
  #cfgSubTabs .nav-link {
    padding: 6px 10px !important;
    font-size: 0.78rem;
  }
}

/* Sub-pane Empresas: columnas colapsan en xl */
@media (max-width: 1199.98px) {
  #cfg-pane-empresas .col-12.col-xl-5,
  #cfg-pane-empresas .col-12.col-xl-7 {
    width: 100% !important;
    max-width: 100%;
  }
}

/* Select de filtro de proyectos: ancho fluido en móvil */
#cfg-filtro-proyectos-empresa {
  max-width: 100%;
}
@media (max-width: 767.98px) {
  #cfg-filtro-proyectos-empresa { width: 100% !important; }
}

/* Select de horarios admin: ancho fluido en móvil */
#cfg-horarios-admin-select {
  min-width: 200px;
  max-width: 100%;
}
@media (max-width: 767.98px) {
  #cfg-horarios-admin-select { width: 100% !important; min-width: unset; }
  /* Header de horarios: columna en móvil */
  #cfg-pane-horarios .card-header .d-flex.align-items-center.gap-3 {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100%;
  }
}

/* Horarios de atención (días de la semana): 2 columnas en sm, 1 en xs */
#cfg-horarios-container .col-lg-auto,
#cfg-horarios-container > div {
  width: 100%;
}

/* =====================================================================
   TAB CITAS — Agenda
   ===================================================================== */
/* Botón Nueva Cita: full width en xs */
@media (max-width: 575.98px) {
  #tab-citas-pane .col-12.col-md-2 {
    width: 100%;
  }
}

/* KPIs de citas: 2 columnas en xs (ya tiene col-6) ✓ */

/* =====================================================================
   MODAL DETALLE NÓMINA (XL)
   ===================================================================== */
.modal-xl { max-width: 1100px; }

/* En móvil: modal ocupa toda la pantalla */
@media (max-width: 767.98px) {
  .modal-xl { max-width: 100%; margin: 0.5rem; }
  /* Columnas de percepciones/deducciones/banco: colapsan en móvil */
  #receiptDetailModal .col-lg-4 {
    width: 100% !important;
    max-width: 100%;
  }
  /* Header del modal: nombre + categoría más compactos */
  #receiptDetailModal .modal-header .d-flex.align-items-center.gap-3 {
    gap: 0.75rem !important;
  }
  #receiptDetailModal .modal-header h5 {
    font-size: 1rem;
  }
  /* Summary badges del modal: 2 columnas en xs (ya col-6) ✓ */
  /* Footer del modal: columna en xs */
  #receiptDetailModal .modal-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem;
  }
  #receiptDetailModal .modal-footer .d-flex.align-items-center.gap-2 {
    flex-direction: column !important;
  }
  #receiptDetailModal .modal-footer button {
    width: 100%;
    justify-content: center;
  }
}

/* =====================================================================
   MODAL CITA (LG)
   ===================================================================== */
@media (max-width: 767.98px) {
  #citaModal .col-md-6 {
    width: 100% !important;
    max-width: 100%;
  }
}

/* =====================================================================
   MODAL ADMIN DE PERSONAL (LG)
   ===================================================================== */
@media (max-width: 767.98px) {
  #modalConfigAdmin .col-md-4,
  #modalConfigAdmin .col-md-6,
  #modalConfigAdmin .col-md-8 {
    width: 100% !important;
    max-width: 100%;
  }
}

/* =====================================================================
   FOOTER DE MODALES — botones alineados en móvil
   ===================================================================== */
@media (max-width: 575.98px) {
  .modal-footer.d-flex.justify-content-between {
    flex-direction: column-reverse !important;
    gap: 0.5rem;
  }
  .modal-footer button {
    width: 100%;
  }
}

/* =====================================================================
   FILTROS DE BÚSQUEDA (TAB 1) — ajuste en móvil
   ===================================================================== */
@media (max-width: 767.98px) {
  #payroll-filter-form .col-6.col-md-3 {
    width: 50% !important;
  }
  #payroll-filter-form .col-12.col-md-1 {
    width: 100% !important;
  }
}

/* =====================================================================
   DROPDOWN ENVIAR CORREO — ancho en móvil
   ===================================================================== */
@media (max-width: 575.98px) {
  #btn-envio-correo-menu span { display: none; }
  .dropdown-menu[style*="min-width: 270px"] { min-width: 240px !important; }
}

/* =====================================================================
   SELECT PAGE SIZE & REFRESH — alineación en móvil
   ===================================================================== */
@media (max-width: 575.98px) {
  #payroll-limit-select { width: 65px !important; }
}

/* =====================================================================
   TABLA DE CONFIGURACIÓN — columnas anchas contraídas
   ===================================================================== */
/* Permite scroll horizontal en todas las tablas de config */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* =====================================================================
   LIST GROUP
   ===================================================================== */
.list-group-flush .list-group-item {
  padding: 8px 12px;
  border-color: #f1f5f9;
}

/* =====================================================================
   GENERAL HELPERS & LOGIN OVERLAY
   ===================================================================== */
.fs-9 { font-size: 0.72rem; }

/* Overlay de Inicio de Sesión */
.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 50% 30%, #1e293b 0%, #0a192f 100%);
  z-index: 9999;
  overflow-y: auto;
}

.login-card {
  background-color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45) !important;
  animation: fadeInLogin 0.3s ease-out;
}

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

#btn-login-microsoft:hover {
  background-color: #1a1a1a !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2) !important;
}

/* Avatar de usuario en navbar */
.user-avatar-initials {
  letter-spacing: -0.05em;
}

/* Evita que imágenes (QR) se desborden */
img.img-fluid { max-width: 100%; height: auto; }

/* Scroll suave en toda la app */
html { scroll-behavior: smooth; }