@import url("general/utilidades.bb4d174491ee.css?v=20261020.5");
@import url("general/components.86aa9e03a4d5.css?v=20261020.5");

/* Bootstrap Color Override Configuration */
:root {
  /* Bootstrap Primary Color Overrides */
  --bs-primary: var(--color-primario);
  --bs-primary-rgb: 18, 183, 131;

  /* Dynamic subtle/emphasis overrides for Bootstrap 5.3 theme colors */
  --bs-primary-bg-subtle: color-mix(in srgb, var(--color-primario) 13%, white);
  --bs-primary-border-subtle: color-mix(
    in srgb,
    var(--color-primario) 40%,
    white
  );
  --bs-primary-text-emphasis: color-mix(
    in srgb,
    var(--color-primario) 45%,
    black
  );
}

html, body {
  background-color: var(--color-background-body, #f0f0f0) !important;
}

/* ==========================================================================
   Vistas de Autenticación / Login (Fondo 100% blanco puro continuo)
   ========================================================================== */
html:has(.login-h),
body:has(.login-h),
body.login-page,
.login-page,
.ctn.r:has(.login-h),
.login-h,
.login-h .col-img-login,
.login-h .col-md-5,
.login-h .max-w-md,
.login-h .wt-login {
  background-color: #ffffff !important;
  --color-background-body: #ffffff !important;
}

/* Adecuaciones Migeul/ no tocar */
.badge {
  --bs-badge-font-weight: 600 !important;
}

[data-bs-theme="dark"] {
  --bs-primary-bg-subtle: color-mix(in srgb, var(--color-primario) 15%, black);
  --bs-primary-border-subtle: color-mix(
    in srgb,
    var(--color-primario) 40%,
    black
  );
  --bs-primary-text-emphasis: color-mix(
    in srgb,
    var(--color-primario) 45%,
    white
  );
}
/* Override Bootstrap Primary Classes */
.btn-outline-primary {
  --bs-btn-color: var(--color-primario);
  --bs-btn-border-color: var(--color-primario);
  --bs-btn-hover-bg: var(--color-primario);
  --bs-btn-hover-border-color: var(--color-primario);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--color-primario-os);
  --bs-btn-active-border-color: var(--color-primario-os);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: var(--color-primario);
  --bs-btn-disabled-border-color: var(--color-primario);
}

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

.btn-primary {
  --bs-btn-bg: var(--color-primario);
  --bs-btn-border-color: var(--color-primario);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--color-primario-os);
  --bs-btn-hover-border-color: var(--color-primario-os);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--color-primario-os);
  --bs-btn-active-border-color: var(--color-primario-os);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--color-primario);
  --bs-btn-disabled-border-color: var(--color-primario);
  background-color: var(--color-primario);
  border-color: var(--color-primario);
}

.btn-primary:hover {
  background-color: var(--color-primario-os);
  border-color: var(--color-primario-os);
}

.btn-primary.active,
.btn-primary:active {
  background-color: var(--color-primario-os) !important;
  border-color: var(--color-primario-os) !important;
}

.bg-primary-emphasis {
  background-color: var(--color-primario-os) !important;
}

.text-primary {
  color: var(--color-primario) !important;
}

.border-primary {
  border-color: var(--color-primario) !important;
}

/* Texto base más oscuro en botones outline-light */
.btn-outline-light {
  --bs-btn-color: #6c757d;
  --bs-btn-border-color: #dee2e6;
}

/* Contenedor principal de la sección */
.scroll-responsive-wrapper {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 1.25rem;
  padding: 0.5rem 0.5rem 1.5rem 0.5rem;
  scrollbar-width: none; /* Oculta scroll en Firefox */
}
.scroll-responsive-wrapper::-webkit-scrollbar {
  display: none; /* Oculta scroll en Chrome/Safari */
}

/* La clave: Ancho controlado para que 1 sola card no se estire */
.col-card {
  flex: 0 0 auto;
  width: 280px; /* Ancho fijo en móvil para que luzca como card */
  max-width: 85%;
}

/* En escritorio (lg) volvemos a una rejilla controlada */
@media (min-width: 992px) {
  .scroll-responsive-wrapper {
    display: grid;
    /* Máximo 4 columnas, pero si hay menos, no se estiran */
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    overflow-x: visible;
    gap: 1.5rem;
  }

  /* Limitamos a 4 columnas máximo para cumplir tu regla */
  .scroll-responsive-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Si solo hay 1, 2 o 3, evitamos que ocupen todo el ancho */
  .scroll-responsive-wrapper:has(> :nth-child(1):last-child) {
    grid-template-columns: repeat(4, 1fr);
  }

  .col-card {
    width: 100%;
    max-width: none;
  }
}
/* Estado vacío estilo captura */
.empty-state-container {
  background-color: #fcfcfc;
  border: 1px solid #eee;
  border-radius: 20px;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8c98a4;
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* =========================================
   COMPONENTE: TIMELINE DE NÓMINAS
   ========================================= */
.nomina-timeline-wrapper {
  position: relative;
  width: 100%;
}

.timeline-track {
  background-color: #e5e7eb;
  position: absolute;
  z-index: 0;
  transition: all 0.3s ease;
}

.timeline-progress-bar {
  position: relative;
  border-radius: 50rem;
  transition: all 0.6s ease;
}

.timeline-dot {
  width: 18px;
  height: 18px;
  z-index: 3;
}

.timeline-badge {
  width: 55px;
  height: 55px;
  font-size: 0.75rem;
  line-height: 1.2;
  background-color: #ffffff !important;
  border: 3px solid var(--color-primario) !important;
  box-shadow:
    0 0 0 3px #ffffff,
    0 0 0 4.5px var(--color-primario) !important;
  position: relative;
  z-index: 2 !important;
  border-radius: 50% !important;
}

.timeline-step-title {
  font-size: 0.9rem;
  line-height: 1.35;
}

.timeline-step-subtitle {
  font-size: 0.78rem;
  line-height: 1.35;
}

/* Desktop Styles (horizontal timeline) */
@media (min-width: 768px) {
  .timeline-track {
    top: 27.5px; /* Center of the 55px badge */
    left: 27.5px;
    right: 27.5px;
    height: 6px;
    width: auto;
    transform: translateY(-50%);
  }

  .timeline-progress-bar {
    height: 100%;
    width: 0%;
  }

  .timeline-dot {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }

  .timeline-steps-container {
    display: flex;
    justify-content: space-between;
    align-items: start;
    width: 100%;
    position: relative;
    z-index: 1;
  }

  .timeline-step-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
  }

  .timeline-step-text {
    margin-top: 1rem;
    padding: 0 10px;
  }
}

/* Mobile Styles (vertical timeline) */
@media (max-width: 767.98px) {
  .timeline-track {
    left: 27.5px;
    top: 27.5px;
    bottom: 27.5px;
    width: 6px;
    height: auto;
    transform: translateX(-50%);
  }

  .timeline-progress-bar {
    width: 100%;
    height: 0%;
  }

  .timeline-dot {
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }

  .timeline-steps-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    position: relative;
    z-index: 1;
  }

  .timeline-step-item {
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 1.25rem;
    text-align: left;
    position: relative;
    min-height: 55px;
  }

  .timeline-step-text {
    margin-top: 0;
    padding-top: 0.25rem;
  }
}

/* =========================================
   ESTILOS DE ENFOQUE DINÁMICOS (INPUT FOCUS)
   ========================================= */
.form-control:focus,
.form-select:focus,
.form-control:focus-within {
  border-color: color-mix(in srgb, var(--color-primario) 50%, white) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.22) !important;
}

.form-check-input:focus {
  border-color: color-mix(in srgb, var(--color-primario) 50%, white) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.22) !important;
}

.form-check-input:checked {
  background-color: var(--color-primario) !important;
  border-color: var(--color-primario) !important;
}

/* =========================================
   ESTILOS GLOBALES DE SWITCHES (TOGGLES)
   ========================================= */
/* Aplica automáticamente al escribir <input type="checkbox" role="switch"> */
input[type="checkbox"][role="switch"],
.form-check-input[role="switch"],
.form-switch .form-check-input {
  appearance: none !important;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  
  width: 2.5rem !important;
  height: 1.25rem !important;
  cursor: pointer;
  background-color: var(--bs-secondary-bg, #e4e6eb) !important;
  border: 1px solid var(--bs-border-color, #cbd0dd) !important;
  border-radius: 2rem !important;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  
  /* Círculo del Switch (Perilla blanca) */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  
  transition: background-position 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
}

/* Estado Activo (Color Primario y Desplazamiento a la Derecha) */
input[type="checkbox"][role="switch"]:checked,
.form-check-input[role="switch"]:checked,
.form-switch .form-check-input:checked {
  background-color: var(--color-primario) !important;
  border-color: var(--color-primario) !important;
  background-position: right center !important;
}

/* Estado Enfocado (Teclado - Tab) */
input[type="checkbox"][role="switch"]:focus-visible,
.form-check-input[role="switch"]:focus-visible,
.form-switch .form-check-input:focus-visible {
  outline: 2px solid var(--color-primario) !important;
  outline-offset: 2px !important;
}

/* Estado Enfocado (Mouse - Click) */
input[type="checkbox"][role="switch"]:focus:not(:focus-visible),
.form-check-input[role="switch"]:focus:not(:focus-visible),
.form-switch .form-check-input:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Estado Activo (Clic y Mantener Pulsado - Táctil) */
input[type="checkbox"][role="switch"]:active,
.form-check-input[role="switch"]:active,
.form-switch .form-check-input:active {
  transform: scale(0.95) !important;
}

/* Estado Deshabilitado (Disabled) */
input[type="checkbox"][role="switch"]:disabled,
.form-check-input[role="switch"]:disabled,
.form-switch .form-check-input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Enfoque para botones de variantes primarias (marca) */
.btn-primary:focus,
.btn-outline-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.22) !important;
}

/* Enfoque para el componente ui-select customizado */
ui-select:focus-within .btn-light,
ui-select:focus .btn-light {
  border-color: color-mix(in srgb, var(--color-primario) 50%, white) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.22) !important;
}

/* =========================================
   ESTILOS DE SELECCIÓN DE TEXTO (TEXT SELECTION)
   ========================================= */
::selection {
  background-color: var(--color-primario);
  color: #ffffff;
}

::-moz-selection {
  background-color: var(--color-primario);
  color: #ffffff;
}

/* Forzar que las pestañas navpills no tengan ningún retraso de opacidad ni transición de desvanecimiento */
.navpills-priority-wrapper {
  opacity: 1 !important;
  transition: none !important;
}

/* =========================================
   BARRA DE PROGRESO DE TURBO DRIVE (MARCA DINÁMICA)
   ========================================= */
.turbo-progress-bar {
  height: 3px !important;
  background: var(--color-primario, #12b783) !important;
  background-color: var(--color-primario, #12b783) !important;
  box-shadow: 0 1px 8px var(--color-primario-op, rgba(18, 183, 131, 0.45)) !important;
}

/* =========================================
   TARJETAS MODERNAS: PORTAL DEL EMPLEADO
   ========================================= */
.ui-card-article-container {
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  background-color: #ffffff;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease !important;
}

.ui-card-article-container:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.07) !important;
  border-color: rgba(var(--color-primario-rgb, 18, 183, 131), 0.35) !important;
}

.ui-card-document-solid {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ui-card-document-solid:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15) !important;
}

.ui-card-article-container .ui-card-article-img-wrapper img {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ui-card-article-container:hover .ui-card-article-img-wrapper img {
  transform: scale(1.035);
}

.ui-card-article-horizontal .col-md-5 img {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ui-card-article-horizontal:hover .col-md-5 img {
  transform: scale(1.035);
}


/* <ui-dropdown> espera a DOMContentLoaded para renderizarse. Hasta entonces su menú aparece en bruto
   (la lista completa de compañías, sin estilos) y, en páginas con mucho HTML, estira la cabecera
   durante toda la carga. Tras render() esos nodos ya no existen y el elemento recibe .ready. */
ui-dropdown:not(.ready) > [slot="menu"] {
  display: none;
}