/* rrhh.css – RRHH Superagro */

/* ===== VARIABLES BÁSICAS ===== */
:root {
  --bg-body: #edf2f7;
  --bg-card: #ffffff;
  --border-soft: #d0d7e2;
  --primary: #0064e0;
  --primary-dark: #0050b5;
  --danger: #b91c1c;
  --text-main: #13213a;
  --text-muted: #6b7280;
}

/* ===== RESETEO ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 16px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  color: var(--text-main);
  background: var(--bg-body);
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.hoja {
  max-width: 2600px;
  margin: 0 auto 32px;
  background: var(--bg-card);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15,23,42,.12);
  padding: 18px 24px 28px;
}

/* ===== ENCABEZADO ===== */
.encabezado {
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.encab-col {
  flex: 1;
}

.encab-left img {
  max-height: 60px;
}

.encab-center {
  text-align: center;
}

.encab-center h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: .04em;
}

.encab-center h1 {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

.encab-right {
  text-align: right;
  font-size: 12px;
}

.encab-meta {
  border-collapse: collapse;
  margin-left: auto;
}

.encab-meta th,
.encab-meta td {
  padding: 2px 4px;
  white-space: nowrap;
}

.encab-meta th {
  text-align: left;
  font-weight: 600;
}

/* ===== DOCK DE ACCESOS ===== */
.linkzone {
  margin: 4px -8px 4px;
  padding: 18px 16px 12px;
  border-radius: 14px;
  background: #EDF9FF;
}

.menus {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px 60px;
  
}

.menu-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 600;
  min-width: 150px;
  transition: transform .14s ease, box-shadow .14s ease;
}

.menu-item:hover {
  transform: translateY(-2px);
}

.menu-icon {
  display: block;
}

/* Solo la imagen, sin anillo verde extra */
.menu-icon img {
  display: block;
  width: 100px;
  height: auto;
}

.menu-text {
  margin-top: 8px;
}

/* ===== SECCIONES ===== */
.sec-block {
  margin-top: 18px;
}

.section {
  margin-top: 12px;
  padding: 16px 18px 18px;
  border-radius: 14px;
  background: #f9fbff;
  border: 1px solid var(--border-soft);
}

.section + .section {
  margin-top: 18px;
}

.section-title {
  margin: 0;
  font-size: 20px;
     /* Negrita */
  text-align: center;  /* Centrado horizontal */
}

/* ===== LAYOUT DE FILTROS ===== */
.f-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: flex-end;       /* <<< alinear las cajas por abajo */
}

.f-col {
  flex: 1 1 220px;             /* que cada columna crezca parejo */
  min-width: 220px;
}


.f-col label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

/* ===== CAMPOS DE FORMULARIO – UNIFICADOS ===== */
/* Incluimos también los inputs sin atributo type (Documento, Nombre, etc.) */
input:not([type]),
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="email"],
input[type="search"],
select,
textarea {
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  padding: 6px 10px;
  margin-top: 2px;
  border-radius: 10px;
  border: 1px solid #cbd4e3;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-main);
  background: #fdfefe;
  outline: none;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background-color .15s ease;
}

/* Textarea más alta pero con el mismo look */
textarea {
  height: auto;
  min-height: 80px;
  resize: vertical;
}

/* Certificaciones: textarea más alto */
#sec-certificaciones textarea{
  min-height: 520px;   /* ajusta: 450 / 600 / 700 */
  resize: vertical;    /* permite que el usuario lo estire */
  box-sizing: border-box;
}



/* Quitar estilo nativo de los inputs numéricos (flechitas) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* Quitar apariencia nativa */
input:not([type]),
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="email"],
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Estado FOCUS común para todos */
input:not([type]):focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
  border-color: #0054d6;
  box-shadow:
    0 0 0 1px rgba(0,84,214,0.18),
    0 0 0 4px rgba(0,84,214,0.06);
  background: #f8fbff;
}


/* ===== TABLAS ===== */
.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 13px;
}

.table th,
.table td {
  padding: 6px 8px;
  border: 1px solid var(--border-soft);
}

.table th {
  background: #eef2fb;
  font-weight: 600;
  text-align: left;
}

.table tr:nth-child(even) td {
  background: #f9fbff;
}

/* Detalle marcaciones */
.table--marcas input[type="time"] {
  width: 90px;
}

.table--marcas th:nth-child(1),
.table--marcas td:nth-child(1),
.table--marcas th:nth-child(5),
.table--marcas td:nth-child(5),
.table--marcas th:nth-child(6),
.table--marcas td:nth-child(6),
.table--marcas th:nth-child(7),
.table--marcas td:nth-child(7),
.table--marcas th:nth-child(8),
.table--marcas td:nth-child(8) {
  white-space: nowrap;
}

/* Tags festivo / descanso */
.tag {
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  padding: 0 6px;
  font-size: 11px;
  line-height: 16px;
  margin-left: 4px;
}

.tag--fest {
  background: #fef3c7;
  color: #92400e;
}

.tag--rest {
  background: #e0f2fe;
  color: #075985;
}

/* Estados de guardado en filas */
.tr-saving {
  opacity: .6;
}

.tr-saved {
  animation: rowSaved 1.2s ease;
}

@keyframes rowSaved {
  0%   { background-color: #dcfce7; }
  100% { background-color: transparent; }
}

/* ===== BOTONES ===== */
.btn,
.btn:link,
.btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  border-radius: 999px;
  border: none;
  background: var(--primary);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,100,224,.28);
  transition:
    background-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

/* Botón verde = desplazamiento de ida */
.btn-ida {
  background: #16a34a;           /* verde */
  border-color: #15803d;
  color: #fff;
}

.btn-ida:hover {
  background: #15803d;
  border-color: #166534;
  box-shadow: 0 10px 18px rgba(22, 163, 74, 0.35);
}

/* Botón rojo = desplazamiento de vuelta */
.btn-vuelta {
  background: #dc2626;           /* rojo */
  border-color: #b91c1c;
  color: #fff;
}

.btn-vuelta:hover {
  background: #b91c1c;
  border-color: #991b1b;
  box-shadow: 0 10px 18px rgba(220, 38, 38, 0.35);
}


.btn:hover,
.btn:focus-visible {
  background: var(--primary-dark);
  text-decoration: none;
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(0,100,224,.35);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,100,224,.25);
}

/* Botón secundario */
.btn--ghost {
  background: #ffffff;
  color: var(--primary);
  box-shadow: 0 0 0 1px rgba(0,100,224,.35);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: rgba(0,100,224,.04);
}

/* Botón rojo (Salir / Eliminar) */
.btn--logout {
  background: var(--danger);
  box-shadow: 0 3px 10px rgba(185,28,28,.30);

}

.btn--logout:hover,
.btn--logout:focus-visible {
  background: #991b1b;
}

/* Pastilla "Guardando..." */
.save-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  background: #fef3c7;
  color: #92400e;
}

/* Footer (botón salir centrado) */
.page-actions {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

/* ===== RESPONSIVO GENERAL ===== */
@media (max-width: 900px) {
  .encabezado {
    flex-direction: column;
    align-items: flex-start;
  }

  .encab-right {
    align-self: stretch;
    text-align: left;
  }

  .hoja {
    padding: 14px 12px 22px;
  }

  .menus {
    gap: 24px 32px;
  }

  .menu-icon img {
    width: 110px;
  }
}

/* ===== FOOTER CENTRADO (texto copyright) ===== */
.footer {
  margin: 18px 0 10px;
  text-align: center;
  color: #666;
  font-size: 13px;
}

/* Botón "Volver a accesos" para todas las pantallas */
.sec-back {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:-4px 0 14px;
  padding:7px 16px;
  border-radius:999px;
  border:1px solid #bfdbfe;
  background:#eff6ff;
  color:#1d4ed8;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 1px 2px rgba(15,23,42,.08);
}

.sec-back:hover {
  background:#dbeafe;
}

.sec-back:focus {
  outline:none;
  box-shadow:0 0 0 3px rgba(59,130,246,.45);
}

/* ========== LOGIN (page-login) ========== */

.page-login {
  padding: 16px 8px;
}

.page-login .hoja {
  max-width: 520px;
  margin: 10px auto 24px;
  padding: 16px 18px 22px;
}

.page-login .encabezado {
  margin-bottom: 20px;
}

.login-card {
  max-width: 480px;
  margin: 8px auto 12px;
  padding: 18px 18px 22px;
}

.login-title {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  color: #0b3c80;
}

/* estructura del formulario */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-form .field label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

/* campos del login: MISMO ANCHO */
.login-input {
  width: 100%;
  box-sizing: border-box;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #cbd4e3;
  padding: 0 10px;
  font-size: 15px;
  outline: none;
  background: #fdfefe;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.login-input:focus {
  border-color: #0054d6;
  box-shadow:
    0 0 0 1px rgba(0,84,214,0.10),
    0 0 0 4px rgba(0,84,214,0.06);
  background-color: #f8fbff;
}

/* wrapper contraseña + ojo */
.field-input-wrap {
  position: relative;
}

.field-input-wrap .login-input {
  padding-right: 44px; /* espacio para el ojo */
}

/* botón del ojo */
.pass-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: #e5edff;
  color: #1d4ed8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
}

.pass-toggle.is-on {
  background: #1d4ed8;
  color: #fff;
}

.pass-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.45);
}

/* botón Entrar en login: ancho completo */
.page-login .btn.btn--full {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
}

/* login en pantallas pequeñas */
@media (max-width: 600px) {
  .page-login .hoja {
    margin: 6px auto 18px;
    padding: 12px 10px 18px;
  }

  .login-card {
    padding: 16px 14px 20px;
  }

  .login-title {
    font-size: 22px;
  }
}

/* Botón pequeño para acciones en tablas */
.btn--sm{
  padding: 4px 10px;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0,100,224,.25);
}

 /* ===== Dock de accesos (RRHH + Dashboard) ===== */

.linkzone {
  padding: 24px 16px 32px;
}

/* CONTENEDOR DE ICONOS */
.linkzone .menus {
  display: grid;
  /* En PC: tantas columnas como quepan de mínimo 220px */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px 40px;          /* espacio entre filas / columnas */
  justify-items: center;   /* centra cada tarjeta */
  align-items: flex-start;
}

/* TARJETA / ICONO */
.menu-item {
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* Por si tenías un max-width raro en .menu-item, mejor controlarlo aquí */
.menu-item {
  max-width: 260px;
  width: 100%;
}

/* ===== Vista móvil: 2 columnas ===== */
@media (max-width: 768px) {
  .linkzone .menus {
    /* En móvil: EXACTAMENTE 2 columnas */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px;
  }

  .menu-item {
    max-width: none;
    width: 100%;
  }
}
/* === Formularios de Crear / Editar usuario: 3 columnas en PC === */
.user-form{
  display:grid;
  grid-template-columns:repeat(3, minmax(260px, 1fr));
  gap:16px;
}

/* Títulos / bloques que deban ocupar todo el ancho */
.user-form .full-row{
  grid-column:1 / -1;
}

/* En pantallas pequeñas: 1 sola columna */
@media (max-width: 900px){
  .user-form{
    grid-template-columns:1fr;
  }
}

.pw-field{
  display:flex;
  gap:6px;
  align-items:center;
}

.btn--pw{
  padding:4px 10px;
  font-size:12px;
  box-shadow:none;
}

/* Layout específico para la fila de ajustes salariales */
.f-row--salario {
  align-items: flex-end;          /* alinea las cajas por la parte inferior */
  gap: 12px 18px;
}

.f-row--salario .f-col {
  flex: 1 1 220px;
}

/* La columna de acciones puede ser un poco más angosta */
.f-row--salario .f-col--acciones {
  flex: 0 0 260px;
}

/* Texto de ayuda debajo de inputs */
.help-text {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

/* === Forzar que TODAS las cajas de las secciones se vean igual === */
.section input[type="text"],
.section input[type="password"],
.section input[type="number"],
.section input[type="date"],
.section input[type="time"],
.section input[type="email"],
.section select,
.section textarea {
  width: 100%;
  box-sizing: border-box;
  height: 38px !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  border: 1px solid #cbd4e3 !important;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-main);
  background: #fdfefe;
  outline: none;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background-color .15s ease;
}

.section input[type="text"]:focus,
.section input[type="password"]:focus,
.section input[type="number"]:focus,
.section input[type="date"]:focus,
.section input[type="time"]:focus,
.section input[type="email"]:focus,
.section select:focus,
.section textarea:focus {
  border-color: #0054d6 !important;
  box-shadow:
    0 0 0 1px rgba(0,84,214,0.18),
    0 0 0 4px rgba(0,84,214,0.06);
  background: #f8fbff;
}

/* ========== DASHBOARD / PANEL TRABAJADOR ========== */

/* Ocultar secciones con atributo hidden */
.sec-block[hidden] {
  display: none;
}

/* Texto pequeño debajo del título del icono */
.menu-text .menu-sub {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  color: #1d4ed8;
}

/* Grid de 2 columnas reutilizable */
.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Encabezado de secciones con título + botón a la derecha */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* Filtros de 3 columnas (fecha desde/hasta + botón) */
.filtros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: flex-end;
}

/* Tablas con scroll horizontal en pantallas pequeñas */
.table-wrap {
  width: 100%;
  overflow-x: auto;
}

/* --- Marcaciones: tarjetas entrada / salida --- */
.marca-card {
  border-radius: 14px;
  padding: 16px 18px 18px;
  border: 1px solid var(--border-soft, #d0d7e2);
  background: #f9fbff;
  box-shadow: 0 2px 6px rgba(15,23,42,.06);
}

.marca-card--in {
  background: #ecfdf3;      /* verde muy claro */
  border-color: #bbf7d0;
}

.marca-card--out {
  background: #fef2f2;      /* rojo muy claro */
  border-color: #fecaca;
}

.marca-title {
  font-weight: 700;
  margin-bottom: 8px;
  text-align: center;
}

.btn--marca-in {
  background: #16a34a;
  box-shadow: 0 3px 10px rgba(22,163,74,.35);
}

.btn--marca-in:hover,
.btn--marca-in:focus-visible {
  background: #15803d;
}

.btn--marca-out {
  background: #dc2626;
  box-shadow: 0 3px 10px rgba(220,38,38,.35);
}

.btn--marca-out:hover,
.btn--marca-out:focus-visible {
  background: #b91c1c;
}

/* Layout específico para la sección de marcaciones */
#sec-marca .form-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* ---------- Responsive para dashboard / móvil ---------- */
@media (max-width: 768px) {
  .hoja {
    width: 100%;
    margin: 0;
    border-radius: 0;
  }

  .section-title {
    text-align: center;
  }

  .section-header {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .section-header .btn {
    align-self: center;
    width: 100%;
    max-width: 240px;
  }

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

  .sec-back {
    margin: 0 auto 14px;
  }

  .page-actions .btn {
    width: 100%;
    max-width: 220px;
  }
  
   /* Fuerza que ENTRADA y SALIDA se vean una debajo de la otra */
  #sec-marca .form-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Tarjetas de desplazamientos en el dashboard */
.desp-card {
  padding: 16px 18px 18px;
  border-radius: 14px;
  border: 1px solid var(--border-soft, #d0d7e2);
  background: #f9fbff;
  box-shadow: 0 2px 6px rgba(15,23,42,.06);
}

/* Viaje de ida: fondo verde suave */
.desp-card-ida {
  background: #ecfdf3;   /* verde muy claro */
  border-color: #bbf7d0;
}

/* Viaje de vuelta: fondo rojo suave */
.desp-card-vuelta {
  background: #fef2f2;   /* rojo muy claro */
  border-color: #fecaca;
}




/*==========ESTLOS PARA MODO DE PRUEBA=============*/
.entorno-banner{
  text-align:center;
  padding:6px 10px;
  font-weight:700;
  font-size:33px;
}

.entorno-banner--test{
  background:#fef3c7;
  color:#92400e;
  border-bottom:2px solid #f59e0b;
}




/* === Encabezado solo con el logo centrado (HR + dashboard) === */
#top .encab-center,
#top .encab-right,
#dash-top .encab-center,
#dash-top .encab-right {
  display: none;          /* ocultamos títulos y tabla de código/versión */
}

/* Centramos el contenido del encabezado (solo queda el logo) */
#top .encabezado,
#dash-top .encabezado {
  justify-content: center;
}

#top .encab-left,
#dash-top .encab-left {
  flex: 0 0 auto;
  text-align: center;
}

#top .encab-left img,
#dash-top .encab-left img {
  display: block;
  margin: 0 auto;
  max-height: 140px;  
}

/* === Encabezado solo logo centrado: también en móvil === */
#top .encabezado,
#dash-top .encabezado {
  flex-direction: row;       /* que no cambie a columna en móvil */
  justify-content: center;   /* centramos horizontalmente */
  align-items: center;       /* centramos verticalmente */
}

#top .encab-left,
#dash-top .encab-left {
  flex: 1 0 100%;            /* ocupa todo el ancho */
  text-align: center;        /* y centramos el contenido */
}

#top .encab-left img,
#dash-top .encab-left img {
  display: block;
  margin: 0 auto;
}

/* ===== Bloques con color dentro de formularios ===== */
.form-block{
  grid-column: 1 / -1;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
}

.form-block .block-title{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
}

.block--green{
  background: #ecfdf3;   /* verde tenue */
  border-color: #bbf7d0;
}

.block--blue{
  background: #eff6ff;   /* azul tenue */
  border-color: #bfdbfe;
}

/* Grilla interna de cada bloque */
.block-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 16px;
}

.block-grid .full-row{
  grid-column: 1 / -1;
}

/* Responsive: 1 columna */
@media (max-width: 900px){
  .block-grid{
    grid-template-columns: 1fr;
  }
}

.hr-stats{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.pill{
  background:#eef6ff;
  border:1px solid #cfe3ff;
  color:#0b2a55;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
}

/* Tabla certificaciones: bordes visibles */
.tabla.tabla--cert{
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.tabla.tabla--cert th,
.tabla.tabla--cert td{
  border: 1px solid #d6dbe6;
  padding: 8px 10px;
  font-size: 13px;
  vertical-align: top;
}

.tabla.tabla--cert thead th{
  background: #f3f6fb;
  font-weight: 800;
}

.tabla.tabla--cert tbody tr:nth-child(even){
  background: #fafcff;
}

/* ===== Vacaciones: layout limpio ===== */
.vac-form { width:100%; }

.vac-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  align-items:start;
}

.vac-card{
  border:1px solid #e9edf4;
  background:#fff;
  border-radius:12px;
  padding:12px;
}

.vac-card__title{
  font-weight:800;
  font-size:13px;
  margin-bottom:8px;
  color:#111827;
}

.vac-help{
  margin-top:8px;
  font-size:12px;
  color:#6b7280;
}

.vac-span-2{ grid-column: span 2; }

.vac-actions{
  display:flex;
  justify-content:flex-end;
  align-items:end;
}

#vacDiasPicker,
#vacTotalDias,
.vac-card select,
.vac-card input[type="text"]{
  width:100%;
  box-sizing:border-box;
  height:38px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  padding:8px 10px;
  outline:none;
  background:#fff;
}

#vacExcluidos{
  display:block;
  margin-top:8px;
  font-weight:700;
  color:#9b1c1c;
}



/* KPIs */
.vac-kpi{ display:flex; flex-direction:column; gap:8px; }
.vac-kpi__row{ display:flex; justify-content:space-between; gap:12px; font-size:13px; }
.vac-kpi__row span{ color:#6b7280; }
.vac-kpi__row b{ color:#111827; }

.vac-kpi--4{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
  margin-top:6px;
}
.vac-kpi__box{
  border:1px solid #eef1f6;
  border-radius:10px;
  padding:10px;
  background:#fafafa;
}
.vac-kpi__box span{
  display:block;
  font-size:11px;
  color:#6b7280;
  text-transform:uppercase;
  letter-spacing:.2px;
}
.vac-kpi__box b{
  display:block;
  margin-top:4px;
  font-size:14px;
  color:#111827;
}

#vacWarn{
  margin-top:10px;
  font-weight:800;
  color:#9b1c1c;
}

/* Responsive */
@media (max-width: 1100px){
  .vac-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vac-span-2{ grid-column: span 2; }
  .vac-kpi--4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 720px){
  .vac-grid{ grid-template-columns: 1fr; }
  .vac-span-2{ grid-column: span 1; }
  .vac-actions{ justify-content:stretch; }
  .vac-actions .btn{ width:100%; }
}

.bienvenido-dash{
  text-align:center;
  font-weight:800;
  font-size:18px;
  margin: 8px 0 14px;
  color:#13213a;
}


/* ===== Tarjeta de Actualizaciones (RRHH / Dashboard) ===== */
.update-card{
  margin: 14px 0 18px;
  border: 1px solid var(--border-soft);
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(15,23,42,.08);
  padding: 14px 16px;
}

.update-card--hr{ border-left: 6px solid var(--primary); }
.update-card--dash{ border-left: 6px solid #16a34a; }

.update-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}

.update-card__title{
  font-weight: 900;
  font-size: 15px;
  color: var(--text-main);
}

.update-card__sub{
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.update-card__close{
  border:none;
  background: #eef2fb;
  color:#0b2a55;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor:pointer;
  font-size: 18px;
  line-height: 34px;
}

.update-card__close:hover{ background:#e5eaf7; }

.update-card__list{
  margin: 0;
  padding-left: 18px;
  color: #111827;
}

.update-card__list li{
  margin: 6px 0;
  font-size: 13px;
}

.update-card__actions{
  margin-top: 10px;
  display:flex;
  justify-content:flex-end;
}

/* ===== Tarjeta flotante de actualizaciones (CENTRADA y MÁS GRANDE) ===== */
.updates-float{
  position: fixed;
  top: 92px;                 /* ajusta si tu banner ocupa más/menos */
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 32px));   /* más grande */

  z-index: 99999;
  background:#fff;
  border:1px solid #d0d7e2;
  border-radius:18px;
  box-shadow: 0 16px 40px rgba(15,23,42,.22);
  padding: 18px 20px;

  display: none;             /* evita “parpadeo”; JS la muestra si aplica */
}

.updates-float.is-visible{ display:block; }

.updates-float__title{
  margin:0;
  font-size:18px;            /* más grande */
  font-weight:900;
  color:#0b2a55;
}

.updates-float__sub{
  margin:4px 0 0;
  font-size:13px;
  color:#6b7280;
}

.updates-float__list{
  margin:12px 0 12px 20px;
  padding:0;
  font-size:15px;            /* más grande */
}

.updates-float__close{
  width:40px;                /* más grande */
  height:40px;
  border-radius:12px;
  font-size:22px;
}

/* En móvil: centrada también (no al costado) */
@media (max-width: 768px){
  .updates-float{
    top: 70px;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    width: calc(100vw - 24px);
  }
}

/* ===== MODAL ACTUALIZACIONES (centrado) ===== */

.update-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(2px);
  z-index: 9998;
  display: none;
}

.update-overlay.is-visible{ display:block; }

/* La tarjeta normal (no flotante) sigue igual; esta es la versión modal */
.update-card--floating{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: min(1080px, calc(100vw - 50px)); /* más grande */
  max-height: calc(100vh - 60px);
  overflow: auto;

  margin: 0 !important;
  padding: 44px 64px;
  border-radius: 28px;
  z-index: 9999;

  display: none; /* IMPORTANTÍSIMO: solo se ve con is-visible */
}

.update-card--floating.is-visible{ display:block; }

/* Tipografías más grandes */
.update-card--floating .update-card__title{ font-size: 30px; }
.update-card--floating .update-card__sub{ font-size: 18px; }
.update-card--floating .update-card__list li{ font-size: 26px; }

/* Botón X (asegura clic) */
.update-card__close{
  cursor: pointer;
  pointer-events: auto;
}

/* En móvil: ocupa casi toda la pantalla */
@media (max-width: 768px){
  .update-card--floating{
    width: calc(100vw - 24px);
    padding: 16px 16px;
    border-radius: 14px;
  }
}


/* ===== Salario / Nocturna: grids y tarjetas ===== */
.sal-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  gap:12px;
  align-items:start;
}

.sal-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:12px;
  align-items:start;
}

.sal-box{
  background:#fff;
  border:1px solid #eef1f6;
  border-radius:12px;
  padding:12px;
}

.sal-actions{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height: 100%;
}

@media (max-width: 980px){
  .sal-grid{ grid-template-columns: 1fr; }
  .sal-grid-2{ grid-template-columns: 1fr; }
}




/* ===== Updates Modal: responsive real ===== */
.update-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(2px);
  z-index: 9998;
  display: none;
}
.update-overlay.is-visible{ display:block; }

.update-card--floating{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: min(820px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  margin: 0 !important;
  padding: 18px 18px;
  border-radius: 16px;
  z-index: 9999;

  display: none;
}

.update-card--floating.is-visible{ display:block; }

.update-card--floating .update-card__title{
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 900;
}
.update-card--floating .update-card__sub{
  font-size: clamp(12px, 1.6vw, 14px);
}
.update-card--floating .update-card__list{
  margin: 10px 0 0 18px;
  font-size: clamp(13px, 1.8vw, 15px);
}
.update-card--floating .update-card__list li{
  margin: 6px 0;
}

.update-card--floating .update-card__close{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 22px;
}

/* Opcional: cuando modal está abierto, bloquea scroll del fondo */
body.modal-open{
  overflow: hidden;
}

/* Login: checkbox política de datos */
.page-login .field label a{
  color:#1d4ed8;
  font-weight:700;
  text-decoration: underline;
}
.page-login input[type="checkbox"]{
  width:18px;
  height:18px;
  flex:0 0 auto;
}

.txt-politica{
  font-weight: 800;
  text-decoration: underline;
  color: #0b5ed7;
}



/* ===== Mis Marcaciones vertical ===== */
.mis-marcas-vertical{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.mis-marca-card{
  background:#fff;
  border:1px solid #d0d7e2;
  border-radius:14px;
  padding:14px;
  box-shadow:0 2px 8px rgba(15,23,42,.06);
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px 18px;
}

.mis-marca-card > div{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.mis-marca-card span{
  font-size:12px;
  font-weight:700;
  color:#6b7280;
  text-transform:uppercase;
}

.mis-marca-card b{
  font-size:14px;
  color:#13213a;
}

@media (max-width: 700px){
  .mis-marca-card{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:8px 10px;
  }

  .mis-marca-card span{
    font-size:11px;
  }

  .mis-marca-card b{
    font-size:13px;
  }
}

/* ===== Horas extra NO remuneradas: resumen destacado ===== */
.hextra-resumen{
  margin: 8px 0 14px;
  padding: 16px 18px;
  border-radius: 10px; /* rectangular suave */
  border: 2px solid #f59e0b;
  background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
  box-shadow: 0 10px 24px rgba(245, 158, 11, .18);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hextra-resumen__head{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hextra-resumen__label{
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #9a3412;
}

.hextra-resumen__hint{
  font-size: 12px;
  color: #b45309;
  font-weight: 600;
}

.hextra-resumen__data{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}

.hextra-resumen__valor{
  font-size: 30px;
  font-weight: 900;
  color: #7c2d12;
}

.hextra-resumen__mins{
  font-size: 14px;
  font-weight: 800;
  color: #c2410c;
}

/* ===== H.E. NO remunerada dentro de cada marcación ===== */
.hextra-box{
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid #fed7aa;
  background: #fff7ed;
  box-shadow: 0 4px 12px rgba(249, 115, 22, .10);
}

.hextra-box span{
  display: block;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  color: #9a3412;
  margin-bottom: 4px;
}

.hextra-box b{
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: #7c2d12;
  line-height: 1.1;
}

.hextra-box small{
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #c2410c;
}

.hextra-box--active{
  border-left: 6px solid #ea580c;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  box-shadow: 0 8px 18px rgba(234, 88, 12, .18);
}

.hextra-box--zero{
  opacity: .92;
}

@media (max-width: 700px){
  .hextra-resumen{
    padding: 14px;
  }

  .hextra-resumen__data{
    align-items: flex-start;
  }

  .hextra-resumen__valor{
    font-size: 24px;
  }

  .hextra-box b{
    font-size: 16px;
  }
}

/* ===== Estado permisos resaltado ===== */
.estado-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:6px 12px;
  border-radius:999px;
  font-size:14px;
  font-weight:900;
  line-height:1.1;
  text-transform:capitalize;
  border:1px solid transparent;
  box-shadow:0 4px 12px rgba(15,23,42,.08);
  width:fit-content;
}

.estado-pill--ok{
  background:#dcfce7;
  color:#166534;
  border-color:#86efac;
}

.estado-pill--bad{
  background:#fee2e2;
  color:#991b1b;
  border-color:#fca5a5;
}

.estado-pill--wait{
  background:#fef3c7;
  color:#92400e;
  border-color:#fcd34d;
}

.estado-pill--neutral{
  background:#e5e7eb;
  color:#374151;
  border-color:#cbd5e1;
}

/* ===== NOTIFICACIONES DASHBOARD ===== */

/* Burbuja del menú */
.menu-item .menu-text{
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-right: 18px;
}

.menu-item .notif-badge{
  position: absolute;
  top: -6px;
  right: -2px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 20px;
  height: 18px;
  padding: 0 6px;

  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;

  background: #64748b;
  box-shadow: 0 6px 14px rgba(15,23,42,.18);
}

.menu-item .notif-badge--ok{
  background: #16a34a;
  box-shadow: 0 6px 14px rgba(22,163,74,.28);
}

.menu-item .notif-badge--danger{
  background: #dc2626;
  box-shadow: 0 6px 14px rgba(220,38,38,.28);
}

/* Notificación flotante centrada */
.live-toast{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.96);
  width: min(560px, calc(100vw - 28px));
  z-index: 100000;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility .22s ease;
}

.live-toast.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.live-toast__body{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 2px solid #d1d5db;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(15,23,42,.28);
}

.live-toast__icon{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  font-size: 22px;
  font-weight: 900;

  background: #e5e7eb;
  color: #111827;
}

.live-toast__text{
  flex: 1 1 auto;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
}

/* aprobado */
.live-toast--ok .live-toast__body{
  background: #ecfdf3;
  border-color: #86efac;
}

.live-toast--ok .live-toast__icon{
  background: #16a34a;
  color: #fff;
}

.live-toast--ok .live-toast__text{
  color: #166534;
}

/* rechazado */
.live-toast--danger .live-toast__body{
  background: #fef2f2;
  border-color: #fca5a5;
}

.live-toast--danger .live-toast__icon{
  background: #dc2626;
  color: #fff;
}

.live-toast--danger .live-toast__text{
  color: #991b1b;
}

/* fallback */
.live-toast--info .live-toast__body{
  background: #eff6ff;
  border-color: #93c5fd;
}

.live-toast--info .live-toast__icon{
  background: #2563eb;
  color: #fff;
}

.live-toast--info .live-toast__text{
  color: #1d4ed8;
}

@media (max-width: 768px){
  .live-toast{
    width: calc(100vw - 22px);
  }

  .live-toast__body{
    padding: 16px 14px;
    gap: 10px;
    border-radius: 16px;
  }

  .live-toast__icon{
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .live-toast__text{
    font-size: 16px;
  }
}

/* ===== PESTAÑAS DASHBOARD ===== */
.sec-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:10px 0 14px;
}

.sec-tab{
  appearance:none;
  border:1px solid #e5e7eb;
  background:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
  user-select:none;
}

.sec-tab.is-active{
  background:#111827;
  color:#fff;
  border-color:#111827;
}

.sec-tab:focus{
  outline:2px solid rgba(17,24,39,.18);
  outline-offset:2px;
}


/* ===== AVISO SUPERIOR DASHBOARD ===== */
.dash-top-notifs{
  margin: 10px 0 16px;
  padding: 14px 18px;
  border: 2px solid #fb923c;
  border-radius: 16px;
  background: #f8f3ec;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}

.dash-top-notifs:empty{
  display:none;
}

.dash-top-notifs__item{
  font-size: 15px;
  font-weight: 900;
  line-height: 1.45;
}

.dash-top-notifs__item + .dash-top-notifs__item{
  margin-top: 4px;
}

.dash-top-notifs__item--ok{
  color:#166534;
}

.dash-top-notifs__item--danger{
  color:#991b1b;
}

.dash-top-notifs--pending{
  background:#fff7ed;
  border-color:#fb923c;
  box-shadow:0 8px 24px rgba(251,146,60,.12);
}

.dash-top-notifs__item--pending{
  color:#9a3412;
}

.table-actions{
  text-align: center;
  white-space: normal;
  vertical-align: top;
}



.table-actions-stack .btn{
  width: 100%;
}

@media (max-width: 768px){
  .table-actions-stack{
    min-width: 110px;
    gap: 6px;
  }

  .table-actions-stack .btn{
    padding: 6px 10px;
    font-size: 12px;
  }
}

.table-actions{
  text-align: center;
  white-space: normal !important;
  vertical-align: top;
  min-width: 150px;
}

.table-actions-stack{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 140px;
  width: 100%;
}

.table-actions-stack form{
  margin: 0 !important;
  display: block !important;
  width: 100%;
}


.table-actions{
  text-align: center;
  white-space: normal !important;
  vertical-align: top;
  min-width: 170px;
}

.table-actions-stack{
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 150px;
}

.table-actions-stack form{
  display: block !important;
  width: 100%;
  margin: 0 !important;
}

.table-actions-stack .btn,
.table-actions-stack .btn:link,
.table-actions-stack .btn:visited{
  display: flex !important;
  width: 100% !important;
  min-height: 36px;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  white-space: normal !important;
  text-align: center;
  line-height: 1.2;
}

.table td.table-actions{
  min-width: 170px;
}

@media (max-width: 768px){
  .table-actions{
    min-width: 140px;
  }

  .table-actions-stack{
    min-width: 130px;
    gap: 6px;
  }

  .table-actions-stack .btn,
  .table-actions-stack .btn:link,
  .table-actions-stack .btn:visited{
    font-size: 12px;
    padding: 6px 8px !important;
  }
}
 

/* ===== Colores por acción ===== */

/* Aprobar = verde */
button[name="accion"][value="aprobar_permiso"],
button[name="accion"][value="aprobar_vac_sol"]{
  background: #16a34a !important;
  box-shadow: 0 3px 10px rgba(22,163,74,.30) !important;
}

button[name="accion"][value="aprobar_permiso"]:hover,
button[name="accion"][value="aprobar_permiso"]:focus-visible,
button[name="accion"][value="aprobar_vac_sol"]:hover,
button[name="accion"][value="aprobar_vac_sol"]:focus-visible{
  background: #15803d !important;
  box-shadow: 0 5px 16px rgba(22,163,74,.38) !important;
}

/* Rechazar = naranja */
button[name="accion"][value="rechazar_permiso"],
button[name="accion"][value="rechazar_vac_sol"]{
  background: #f97316 !important;
  box-shadow: 0 3px 10px rgba(249,115,22,.30) !important;
}

button[name="accion"][value="rechazar_permiso"]:hover,
button[name="accion"][value="rechazar_permiso"]:focus-visible,
button[name="accion"][value="rechazar_vac_sol"]:hover,
button[name="accion"][value="rechazar_vac_sol"]:focus-visible{
  background: #ea580c !important;
  box-shadow: 0 5px 16px rgba(249,115,22,.38) !important;
}

/* Eliminar = rojo */
button[name="accion"][value="eliminar_permiso"],
button[name="accion"][value="eliminar_vac_sol"],
button[name="accion"][value="eliminar_desplazamiento"]{
  background: #dc2626 !important;
  box-shadow: 0 3px 10px rgba(220,38,38,.30) !important;
}

button[name="accion"][value="eliminar_permiso"]:hover,
button[name="accion"][value="eliminar_permiso"]:focus-visible,
button[name="accion"][value="eliminar_vac_sol"]:hover,
button[name="accion"][value="eliminar_vac_sol"]:focus-visible,
button[name="accion"][value="eliminar_desplazamiento"]:hover,
button[name="accion"][value="eliminar_desplazamiento"]:focus-visible{
  background: #b91c1c !important;
  box-shadow: 0 5px 16px rgba(220,38,38,.38) !important;
}

/* Scroll vertical solo para Detalle de marcaciones */
#panel-detalle .table-wrap{
  max-height: 75vh;   /* ajusta: 500px, 600px, 70vh, etc */
  overflow-y: auto;
  overflow-x: auto;
}

/* Opcional: dejar encabezado fijo mientras bajas */
#panel-detalle .table th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: #eef2fb;
}


.btn.btn-vac-obs{
  background:#dbeafe;
  border-color:#60a5fa;
  color:#1d4ed8;
}

.btn.btn-vac-obs:hover,
.btn.btn-vac-obs:focus{
  background:#1e40af;
  border-color:#1e3a8a;
  color:#ffffff;
}

.btn.btn-vac-obs:active{
  background:#1d4ed8;
  border-color:#1e3a8a;
  color:#ffffff;
}

/* ===== Flash flotante tipo tarjeta ===== */
.flash-card{
  position: fixed;
  top: 24px;
left: 50%;
right: auto;
transform: translateX(-50%);
  z-index: 100000;

  width: min(560px, calc(100vw - 24px));
  padding: 18px 52px 18px 18px;

  border-radius: 18px;
  border: 2px solid transparent;
  box-shadow: 0 18px 40px rgba(15,23,42,.20);

  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;

  animation: flashCardIn .22s ease-out;
}

.flash-card__body{
  text-align: left;
  word-break: break-word;
}

.flash-card__close{
  position: absolute;
  top: 10px;
  right: 12px;

  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: rgba(255,255,255,.45);
  color: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.flash-card__close:hover{
  background: rgba(255,255,255,.70);
}

.flash-card--success{
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.flash-card--warning{
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

.flash-card--error{
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

.flash-card--info{
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.flash-card.is-hiding{
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
  transition: opacity .26s ease, transform .26s ease;
}

@keyframes flashCardIn{
  from{
    opacity: 0;
    transform: translateY(-12px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px){
  .flash-card{
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    padding: 16px 46px 16px 16px;
    font-size: 16px;
    border-radius: 16px;
  }

  .flash-card__close{
    top: 8px;
    right: 8px;
  }
}

/* =========================================================
   NOTIFICACIONES FLOTANTES CENTRADAS
   ========================================================= */

/* Base común para tarjetas flotantes */
.flash-card,
.live-toast,
.updates-float,
.update-card--floating{
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 100000 !important;
}

/* ===== FLASH CARD ===== */
.flash-card{
  width: min(620px, calc(100vw - 28px));
  padding: 18px 52px 18px 18px;
  border-radius: 18px;
  border: 2px solid transparent;
  box-shadow: 0 18px 44px rgba(15,23,42,.28);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  animation: notifCenterIn .22s ease-out;
}

.flash-card__body{
  text-align: center;
  word-break: break-word;
}

.flash-card__close{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: rgba(255,255,255,.45);
  color: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.flash-card__close:hover{
  background: rgba(255,255,255,.75);
}

.flash-card--success{
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.flash-card--warning{
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

.flash-card--error{
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

.flash-card--info{
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.flash-card.is-hiding{
  opacity: 0;
  transform: translate(-50%, -50%) scale(.96) !important;
  transition: opacity .26s ease, transform .26s ease;
}

/* ===== LIVE TOAST ===== */
.live-toast{
  width: min(560px, calc(100vw - 28px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility .22s ease;
}

.live-toast.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1) !important;
}

.live-toast__body{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 2px solid #d1d5db;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(15,23,42,.28);
}

.live-toast__icon{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 900;
  background: #e5e7eb;
  color: #111827;
}

.live-toast__text{
  flex: 1 1 auto;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
}

/* aprobado */
.live-toast--ok .live-toast__body{
  background: #ecfdf3;
  border-color: #86efac;
}
.live-toast--ok .live-toast__icon{
  background: #16a34a;
  color: #fff;
}
.live-toast--ok .live-toast__text{
  color: #166534;
}

/* rechazado */
.live-toast--danger .live-toast__body{
  background: #fef2f2;
  border-color: #fca5a5;
}
.live-toast--danger .live-toast__icon{
  background: #dc2626;
  color: #fff;
}
.live-toast--danger .live-toast__text{
  color: #991b1b;
}

/* info */
.live-toast--info .live-toast__body{
  background: #eff6ff;
  border-color: #93c5fd;
}
.live-toast--info .live-toast__icon{
  background: #2563eb;
  color: #fff;
}
.live-toast--info .live-toast__text{
  color: #1d4ed8;
}

/* ===== UPDATE FLOAT / ACTUALIZACIONES ===== */
.updates-float{
  width: min(760px, calc(100vw - 32px));
  padding: 18px 20px;
  border: 1px solid #d0d7e2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(15,23,42,.22);
  display: none;
}

.updates-float.is-visible{
  display: block;
}

.updates-float__title{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: #0b2a55;
}

.updates-float__sub{
  margin: 4px 0 0;
  font-size: 13px;
  color: #6b7280;
}

.updates-float__list{
  margin: 12px 0 12px 20px;
  padding: 0;
  font-size: 15px;
}

.updates-float__close{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 22px;
}

/* ===== MODAL DE ACTUALIZACIONES ===== */
.update-card--floating{
  width: min(820px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 !important;
  padding: 18px 18px;
  border-radius: 16px;
  display: none;
}

.update-card--floating.is-visible{
  display: block;
}

.update-card--floating .update-card__title{
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 900;
}

.update-card--floating .update-card__sub{
  font-size: clamp(12px, 1.6vw, 14px);
}

.update-card--floating .update-card__list{
  margin: 10px 0 0 18px;
  font-size: clamp(13px, 1.8vw, 15px);
}

.update-card--floating .update-card__list li{
  margin: 6px 0;
}

.update-card--floating .update-card__close{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 22px;
}

/* Overlay */
.update-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(2px);
  z-index: 99998;
  display: none;
}

.update-overlay.is-visible{
  display: block;
}

body.modal-open{
  overflow: hidden;
}

/* Entrada */
@keyframes notifCenterIn{
  from{
    opacity: 0;
    transform: translate(-50%, -50%) scale(.96);
  }
  to{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Responsive */
@media (max-width: 768px){
  .flash-card,
  .live-toast,
  .updates-float,
  .update-card--floating{
    width: calc(100vw - 22px) !important;
    max-width: calc(100vw - 22px) !important;
  }

  .flash-card{
    padding: 16px 46px 16px 16px;
    font-size: 16px;
    border-radius: 16px;
  }

  .live-toast__body{
    padding: 16px 14px;
    gap: 10px;
    border-radius: 16px;
  }

  .live-toast__icon{
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .live-toast__text{
    font-size: 16px;
  }

  .update-card--floating{
    padding: 16px;
    border-radius: 14px;
  }
}

/* ===== Alertas persistentes RRHH (permisos / vacaciones pendientes) ===== */
.rrhh-alertas-persistentes{
  margin: 10px 0 16px;
  padding: 14px 18px;
  border: 2px solid #fb923c;
  border-radius: 16px;
  background: #fff7ed;
  box-shadow: 0 8px 24px rgba(251,146,60,.12);
}

.rrhh-alertas-persistentes__item{
  font-size: 16px;
  font-weight: 800;
  line-height: 1.45;
  color: #9a3412;
  text-align: center;
}

.rrhh-alertas-persistentes__item--sep{
  margin-top: 6px;
}

.table-actions-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:140px;
}

.table-actions-stack form{
  margin:0;
}

.perm-accion-form{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.perm-accion-form .btn,
.table-actions-stack .btn{
  width:100%;
}

/* ===== Más separación en botones de acciones ===== */
.table-actions{
  min-width: 190px !important;
  vertical-align: middle !important;
}

.table-actions-stack{
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 170px !important;
}

.table-actions-stack form{
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

.perm-accion-form{
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
}

.perm-accion-form .btn,
.table-actions-stack .btn,
.table-actions-stack .btn:link,
.table-actions-stack .btn:visited{
  display: flex !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  justify-content: center !important;
}

@media (max-width: 768px){
  .table-actions{
    min-width: 150px !important;
  }

  .table-actions-stack{
    min-width: 140px !important;
    gap: 10px !important;
  }

  .perm-accion-form{
    gap: 10px !important;
  }

  .perm-accion-form .btn,
  .table-actions-stack .btn,
  .table-actions-stack .btn:link,
  .table-actions-stack .btn:visited{
    min-height: 38px !important;
    padding: 8px 10px !important;
  }
}

/* ===== PERMISOS PENDIENTES: separar botones del mismo form ===== */
.perm-accion-form{
  display:block !important;
  width:100% !important;
}

.perm-accion-form .btn{
  display:flex !important;
  width:100% !important;
  min-height:42px !important;
  padding:10px 12px !important;
  border-radius:12px !important;
}

.perm-accion-form .btn + .btn{
  margin-top:12px !important;
}

/* ===== DESPLAZAMIENTOS: stack real ===== */
.table-actions{
  min-width:190px !important;
  vertical-align:middle !important;
}

.table-actions-stack{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  gap:12px !important;
}

.table-actions-stack > form{
  display:block !important;
  width:100% !important;
  margin:0 !important;
}

.table-actions-stack > form + form{
  margin-top:12px !important;
}

.table-actions-stack .btn,
.table-actions-stack .btn:link,
.table-actions-stack .btn:visited{
  display:flex !important;
  width:100% !important;
  min-height:42px !important;
  padding:10px 12px !important;
  border-radius:12px !important;
}

/* ===== Guardar desplazamiento = VERDE ===== */
.btn-desp-save{
  background:#16a34a !important;
  box-shadow:0 3px 10px rgba(22,163,74,.30) !important;
}

.btn-desp-save:hover,
.btn-desp-save:focus-visible{
  background:#15803d !important;
  box-shadow:0 5px 16px rgba(22,163,74,.38) !important;
}

/* Editar desplazamiento = azul */
.btn-desp-edit{
  background:#1669d8 !important;
  box-shadow:0 3px 10px rgba(22,105,216,.30) !important;
}

.btn-desp-edit:hover,
.btn-desp-edit:focus-visible{
  background:#0f56b8 !important;
  box-shadow:0 5px 16px rgba(22,105,216,.38) !important;
}

@media (max-width:768px){
  .perm-accion-form .btn + .btn{
    margin-top:10px !important;
  }

  .table-actions-stack{
    gap:10px !important;
  }

  .table-actions-stack > form + form{
    margin-top:10px !important;
  }

  .perm-accion-form .btn,
  .table-actions-stack .btn,
  .table-actions-stack .btn:link,
  .table-actions-stack .btn:visited{
    min-height:38px !important;
    padding:8px 10px !important;
  }
}

/* ===== DESPLAZAMIENTOS: estado normal / edición ===== */
.table-actions{
  min-width: 190px !important;
  vertical-align: middle !important;
}

.table-actions-stack{
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 14px !important;
}

.table-actions-stack > form{
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

.table-actions-stack .btn,
.table-actions-stack .btn:link,
.table-actions-stack .btn:visited{
  width: 100% !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
}

/* Formulario de edición: Editar y Guardar en columna */
#sec-desplaza .table-actions-stack > form:first-child{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Estado normal */
#sec-desplaza .btn-desp-edit{
  display: flex !important;
  background: #1669d8 !important;
  box-shadow: 0 3px 10px rgba(22,105,216,.30) !important;
}

#sec-desplaza .btn-desp-save{
  display: none !important;
  background: #16a34a !important;
  box-shadow: 0 3px 10px rgba(22,163,74,.30) !important;
}

/* Estado editando */
#sec-desplaza tr.is-editing .btn-desp-edit{
  display: none !important;
}

#sec-desplaza tr.is-editing .btn-desp-save{
  display: flex !important;
}

#sec-desplaza .btn-desp-edit:hover,
#sec-desplaza .btn-desp-edit:focus-visible{
  background: #0f56b8 !important;
  box-shadow: 0 5px 16px rgba(22,105,216,.38) !important;
}

#sec-desplaza .btn-desp-save:hover,
#sec-desplaza .btn-desp-save:focus-visible{
  background: #15803d !important;
  box-shadow: 0 5px 16px rgba(22,163,74,.38) !important;
}

@media (max-width:768px){
  .table-actions-stack{
    gap: 10px !important;
  }

  #sec-desplaza .table-actions-stack > form:first-child{
    gap: 10px !important;
  }

  .table-actions-stack .btn,
  .table-actions-stack .btn:link,
  .table-actions-stack .btn:visited{
    min-height: 38px !important;
    padding: 8px 10px !important;
  }
}

#sec-panel .sec-tabs{
  gap:10px;
}

#sec-panel .sec-tab{
  text-align:center;
}

@media (max-width: 768px){
  #sec-panel .sec-tab{
    font-size:12px;
    padding:8px 10px;
  }
}


/* ===== Detalle marcaciones: Guardar verde y oculto hasta Editar ===== */
#panel-detalle .table-actions-stack .btn-save{
  display:none !important;
  background:#16a34a !important;
  box-shadow:0 3px 10px rgba(22,163,74,.30) !important;
}

#panel-detalle .table-actions-stack .btn-save:hover,
#panel-detalle .table-actions-stack .btn-save:focus-visible{
  background:#15803d !important;
  box-shadow:0 5px 16px rgba(22,163,74,.38) !important;
}

#panel-detalle tr.is-editing .table-actions-stack .btn-save{
  display:flex !important;
}

#panel-detalle tr.is-editing .table-actions-stack .btn-edit{
  display:none !important;
}

/* ===== Mis permisos: motivo aprob/rechazo al final y ancho completo ===== */
/* ===== Mis permisos: Motivo Aprob/Rechazo sin límite visual ===== */
#pane-mis-permisos .mis-marca-card{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#pane-mis-permisos .mis-marca-card > div{
  min-width: 0;
}

#pane-mis-permisos .mis-perm-motivo-wide{
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: visible !important;
}

#pane-mis-permisos .mis-perm-motivo-wide span{
  display: block;
  width: 100%;
}

#pane-mis-permisos .mis-perm-motivo-wide b{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;

  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.5 !important;
}

/* ===== Motivo Aprob/Rechazo: sin límite visual ===== */

/* Dashboard: tarjeta Mis permisos */
#pane-mis-permisos .mis-marca-card{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#pane-mis-permisos .mis-marca-card > div{
  min-width: 0 !important;
}

#pane-mis-permisos .mis-perm-motivo-wide{
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}

#pane-mis-permisos .mis-perm-motivo-wide span{
  display: block;
  width: 100%;
}

#pane-mis-permisos .mis-perm-motivo-wide b{
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.5 !important;
}

/* HR: tabla de permisos */
.table td.perm-motivo-revision,
.table th.perm-motivo-revision{
  min-width: 280px;
  max-width: none !important;
  width: auto !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  vertical-align: top !important;
}

.table td.perm-motivo-revision .perm-motivo-revision__txt{
  display: block;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.45 !important;
}

/* =========================================================
   BLOQUE MAESTRO FINAL — NORMALIZADO
   Archivo listo para pegar
========================================================= */

:root{
  --ui-bg: #f3f6fb;
  --ui-card: #ffffff;
  --ui-card-2: #f8fbff;
  --ui-line: #dbe3ef;
  --ui-line-2: #e8eef7;
  --ui-text: #14233c;
  --ui-muted: #607089;
  --ui-primary: #0b5ed7;
  --ui-primary-2: #0a4fb5;
  --ui-success: #16a34a;
  --ui-danger: #dc2626;
  --ui-warning: #f59e0b;
  --ui-radius-xl: 22px;
  --ui-radius-lg: 18px;
  --ui-radius-md: 14px;
  --ui-radius-sm: 12px;
  --ui-shadow-sm: 0 6px 20px rgba(15, 23, 42, .06);
  --ui-shadow-md: 0 12px 32px rgba(15, 23, 42, .10);
  --ui-shadow-lg: 0 18px 44px rgba(15, 23, 42, .14);

  --btn-blue-1: #1f6feb;
  --btn-blue-2: #1558c0;
  --btn-blue-b: #0f4ea8;
  --btn-green-1: #22c55e;
  --btn-green-2: #15803d;
  --btn-green-b: #166534;
  --btn-red-1: #ef4444;
  --btn-red-2: #c81e1e;
  --btn-red-b: #991b1b;
  --btn-orange-1: #fb923c;
  --btn-orange-2: #ea580c;
  --btn-orange-b: #c2410c;
  --btn-slate-1: #ffffff;
  --btn-slate-2: #f4f7fb;
  --btn-slate-b: #cfd9e8;
}

body{
  background:
    radial-gradient(circle at top left, rgba(11,94,215,.06), transparent 22%),
    radial-gradient(circle at top right, rgba(22,163,74,.05), transparent 18%),
    linear-gradient(180deg, #f5f8fc 0%, #edf2f7 100%);
  color: var(--ui-text);
}

.hoja{
  max-width: 2200px;
  margin: 0 auto 32px;
  padding: 22px 26px 32px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid rgba(219,227,239,.9);
  border-radius: 26px;
  box-shadow: var(--ui-shadow-lg);
}

.encabezado{
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ui-line-2);
}

.bienvenido-dash{
  margin: 4px 0 18px;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  color: #0f274b;
  letter-spacing: .01em;
}

.section-title{
  margin: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #10233f;
}

.section{
  margin-top: 14px;
  padding: 18px 20px 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #E1FCEF 100%);
  border: 1px solid #dbe7f5;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}

.linkzone{
  margin: 10px 0 18px;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid var(--ui-line);
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(246,250,255,.98) 100%);
  box-shadow: var(--ui-shadow-sm);
}

.linkzone .menus{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  justify-items: stretch;
  align-items: flex-start;
}

.menu-item{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 16px 14px 14px;
  border-radius: 20px;
  border: 1px solid #e4ebf5;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 8px 18px rgba(15,23,42,.20);
  text-align: center;
  text-decoration: none;
  color: #10233f;
  font-size: 15px;
  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

.menu-item:hover{
  transform: translateY(-4px);
  border-color: #bfd5fb;
  box-shadow: 0 16px 28px rgba(15,23,42,.10);
  background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
}

.menu-icon{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 92px;
}

.menu-icon img{
  display: block;
  width: 78px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(15,23,42,.12));
}

.menu-text{
  margin-top: 10px;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-right: 18px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  color: #10233f;
}

.menu-text .menu-sub{
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #5b6f8d;
}

.btn,
.btn:link,
.btn:visited{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, var(--btn-blue-1) 0%, var(--btn-blue-2) 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(21,88,192,.22), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease, border-color .18s ease;
}

.btn:hover,
.btn:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(21,88,192,.28), inset 0 1px 0 rgba(255,255,255,.18);
  filter: saturate(1.04);
  outline: none;
}

.btn:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(21,88,192,.20), inset 0 1px 0 rgba(255,255,255,.14);
}

.btn[disabled],
.btn:disabled{
  opacity: .6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn--ghost,
.btn--ghost:link,
.btn--ghost:visited{
  color: #18457b;
  background: linear-gradient(180deg, var(--btn-slate-1) 0%, var(--btn-slate-2) 100%);
  border: 1px solid var(--btn-slate-b);
  box-shadow: 0 8px 18px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.9);
}

.btn--logout,
.btn--logout:link,
.btn--logout:visited,
button[name="accion"][value="eliminar_permiso"],
button[name="accion"][value="eliminar_vac_sol"],
button[name="accion"][value="eliminar_desplazamiento"]{
  background: linear-gradient(180deg, var(--btn-red-1) 0%, var(--btn-red-2) 100%) !important;
  border: 1px solid var(--btn-red-b) !important;
  color: #fff !important;
}

.btn-ida,
.btn--marca-in,
.btn-desp-save,
button[name="accion"][value="aprobar_permiso"],
button[name="accion"][value="aprobar_vac_sol"]{
  background: linear-gradient(180deg, var(--btn-green-1) 0%, var(--btn-green-2) 100%) !important;
  border: 1px solid var(--btn-green-b) !important;
  color: #fff !important;
}

.btn-vuelta,
.btn--marca-out{
  background: linear-gradient(180deg, var(--btn-red-1) 0%, var(--btn-red-2) 100%) !important;
  border: 1px solid var(--btn-red-b) !important;
  color: #fff !important;
}

.btn-desp-edit{
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) !important;
  border: 1px solid #1e40af !important;
  color: #fff !important;
}

button[name="accion"][value="rechazar_permiso"],
button[name="accion"][value="rechazar_vac_sol"]{
  background: linear-gradient(180deg, var(--btn-orange-1) 0%, var(--btn-orange-2) 100%) !important;
  border: 1px solid var(--btn-orange-b) !important;
  color: #fff !important;
}

.btn--sm,
.btn.btn--sm{
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
}

.sec-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 14px;
  padding: 8px;
  border-radius: 18px;
  background: #eef4fc;
  border: 1px solid #dbe6f5;
}

.sec-tab{
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: #436080;
  font-weight: 800;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: .18s ease;
}

.sec-tab:hover{
  background: rgba(255,255,255,.75);
  color: #123764;
}

.sec-tab.is-active{
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border-color: #c9dafb;
  color: #0c4fb8;
  box-shadow: 0 8px 18px rgba(15,23,42,.08);
}

.table-wrap{
  width: 100%;
  margin-top: 12px;
  overflow: auto;
  border: 1px solid #dfe7f1;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--ui-shadow-sm);
}

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

.table th,
.table td{
  padding: 11px 12px;
  border-right: 1px solid #e8eef7;
  border-bottom: 1px solid #e8eef7;
  vertical-align: middle;
}

.table th:last-child,
.table td:last-child{
  border-right: none;
}

.table thead th,
.table tr:first-child th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, #eff4fb 0%, #e8eff9 100%);
  color: #173156;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.table tbody tr:nth-child(even) td,
.table tr:nth-child(even) td{
  background: #fbfdff;
}

.table tbody tr:hover td,
.table tr:hover td{
  background: #f4f8ff;
}

.table-actions{
  min-width: 190px !important;
  text-align: center;
  white-space: normal !important;
  vertical-align: middle !important;
}

.table-actions-stack{
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 170px !important;
  gap: 12px !important;
}

.table-actions-stack form{
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

.table-actions-stack .btn,
.table-actions-stack .btn:link,
.table-actions-stack .btn:visited,
.perm-accion-form .btn{
  display: flex !important;
  width: 100% !important;
  min-height: 40px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  justify-content: center !important;
}

.update-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(2px);
  z-index: 99998;
  display: none;
}

.update-overlay.is-visible{
  display: block;
}

.update-card--floating{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(820px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 !important;
  padding: 18px;
  border-radius: 16px;
  display: none;
  z-index: 99999;
}

.update-card--floating.is-visible{
  display: block;
}

.flash-card{
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 100000 !important;
  width: min(620px, calc(100vw - 28px));
  padding: 18px 52px 18px 18px;
  border-radius: 18px;
  border: 2px solid transparent;
  box-shadow: 0 18px 44px rgba(15,23,42,.28);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}

.flash-card__body{
  text-align: center;
  word-break: break-word;
}

.live-toast{
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) scale(.96) !important;
  width: min(560px, calc(100vw - 28px));
  z-index: 100000 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}

.live-toast.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1) !important;
}

.hextra-resumen{
  border-radius: 6px !important;
}

@media (max-width: 920px){
  .hoja{
    padding: 16px 14px 24px;
    border-radius: 18px;
  }

  .section-title{
    font-size: 18px;
    text-align: center;
  }

  .section{
    padding: 14px;
    border-radius: 16px;
  }

  .linkzone{
    padding: 16px 12px 18px;
  }

  .linkzone .menus{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .menu-item{
    padding: 14px 10px 12px;
    border-radius: 18px;
  }

  .menu-icon{
    min-height: 74px;
  }

  .menu-icon img{
    width: 64px;
    height: 64px;
  }

  .table th,
  .table td{
    padding: 10px 10px;
  }
}

@media (max-width: 768px){
  .section-header{
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .section-header .btn{
    align-self: center;
    width: 100%;
    max-width: 240px;
  }

  .form-grid-2,
  .filtros,
  #sec-marca .form-grid-2{
    grid-template-columns: 1fr;
  }

  .sec-back{
    margin: 0 auto 14px;
  }

  .table-actions{
    min-width: 150px !important;
  }

  .table-actions-stack{
    min-width: 140px !important;
    gap: 10px !important;
  }

  .btn,
  .btn:link,
  .btn:visited{
    min-height: 40px;
    padding: 9px 14px;
    font-size: 12px;
    border-radius: 12px;
  }

  .btn--sm,
  .btn.btn--sm{
    min-height: 34px;
    padding: 7px 10px;
    font-size: 11px;
  }

  .flash-card,
  .live-toast,
  .update-card--floating{
    width: calc(100vw - 22px) !important;
    max-width: calc(100vw - 22px) !important;
  }

  .update-card--floating{
    padding: 16px;
    border-radius: 14px;
  }
}

/* ===== FLASH / MSG FLOTANTE CENTRADO ===== */
.flash-card{
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) scale(1) !important;

  width: min(620px, calc(100vw - 28px)) !important;
  z-index: 100000 !important;

  margin: 0 !important;
  pointer-events: auto;
}

.flash-card.is-hiding{
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(.96) !important;
  transition: opacity .26s ease, transform .26s ease;
}

.flash-card__close{
  position: absolute;
  top: 10px;
  right: 12px;
}

/* En celular */
@media (max-width: 768px){
  .flash-card{
    width: calc(100vw - 22px) !important;
    max-width: calc(100vw - 22px) !important;
  }
}

/* ===== Modal descripción permisos HR ===== */
.perm-desc-modal[hidden]{
  display:none !important;
}

.perm-desc-modal{
  position:fixed;
  inset:0;
  z-index:100300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.perm-desc-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.58);
  backdrop-filter:blur(2px);
}

.perm-desc-modal__card{
  position:relative;
  width:min(720px, calc(100vw - 28px));
  max-height:calc(100vh - 40px);
  overflow:auto;
  background:#ffffff;
  border-radius:20px;
  border:1px solid #d0d7e2;
  box-shadow:0 24px 70px rgba(15,23,42,.35);
  padding:22px 24px;
}

.perm-desc-modal__close{
  position:absolute;
  top:10px;
  right:12px;
  width:38px;
  height:38px;
  border:0;
  border-radius:12px;
  background:#fee2e2;
  color:#991b1b;
  font-size:26px;
  font-weight:900;
  cursor:pointer;
}

.perm-desc-modal__close:hover{
  background:#fecaca;
}

.perm-desc-modal__title{
  margin:0 48px 6px 0;
  font-size:22px;
  font-weight:900;
  color:#13213a;
}

.perm-desc-modal__meta{
  margin-bottom:14px;
  color:#64748b;
  font-size:13px;
  font-weight:700;
}

.perm-desc-modal__text{
  white-space:pre-wrap;
  line-height:1.55;
  font-size:16px;
  color:#111827;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px;
}

.perm-desc-cell{
  text-align:center;
  min-width:140px;
}

.btn-perm-desc{
  background:#2563eb;
  box-shadow:0 3px 10px rgba(37,99,235,.25);
}

.btn-perm-desc:hover,
.btn-perm-desc:focus-visible{
  background:#1d4ed8;
}

@media (max-width:768px){
  .perm-desc-modal{
    padding:14px;
  }

  .perm-desc-modal__card{
    width:calc(100vw - 24px);
    max-height:calc(100vh - 28px);
    padding:18px 16px;
    border-radius:16px;
  }

  .perm-desc-modal__title{
    font-size:19px;
  }

  .perm-desc-modal__text{
    font-size:15px;
  }
}

/* =========================================================
   HR MÓVIL PRO — TABLAS, FILTROS, SECCIONES Y BOTONES
   Pegar al FINAL de rrhh.css
   ========================================================= */

/* ===== Mejoras generales escritorio/tablet ===== */
.table-wrap{
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}

.table{
  margin-top: 0;
  min-width: 900px;
  background: #ffffff;
}

.table th{
  position: sticky;
  top: 0;
  z-index: 3;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
  color: #10233f;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .025em;
  white-space: nowrap;
}

.table td{
  vertical-align: middle;
  background-clip: padding-box;
}

.table tbody tr:hover td,
.table tr:hover td{
  background: #f3f8ff;
}

/* Inputs dentro de tablas más cómodos */
.table input[type="time"],
.table input[type="date"],
.table input[type="text"],
.table select{
  min-width: 110px;
  height: 34px !important;
  font-size: 12px;
  padding: 5px 8px !important;
}

/* Botones dentro de tablas */
.table .btn,
.table button.btn,
.table a.btn{
  min-height: 34px;
  padding: 6px 10px !important;
  font-size: 12px;
  border-radius: 10px;
}

/* Encabezados de sección con botón exportar */
.section > div[style*="justify-content:space-between"],
.section > div[style*="justify-content: space-between"]{
  gap: 12px;
  flex-wrap: wrap;
}

/* Pestañas más limpias */
.sec-tabs{
  padding: 6px;
  background: #f1f5f9;
  border: 1px solid #dbe3ef;
  border-radius: 999px;
}

.sec-tab{
  border-color: transparent;
  background: transparent;
  color: #334155;
}

.sec-tab.is-active{
  background: #0f172a;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(15,23,42,.18);
}

/* Filtros mejor balanceados */
.f-row{
  background: #ffffff;
  border: 1px solid #e3e9f3;
  border-radius: 14px;
  padding: 12px;
  margin: 10px 0 14px;
}

.f-col label{
  display: block;
  margin-bottom: 3px;
  color: #475569;
  font-weight: 800;
}

/* ===== MÓVIL HR ===== */
@media (max-width: 820px){

  body{
    padding: 0;
    background: #f1f5f9;
    font-size: 13px;
  }

  .hoja{
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 10px 8px 22px;
    border-radius: 0;
    box-shadow: none;
  }

  #top .encab-left img,
  #dash-top .encab-left img{
    max-height: 96px;
  }

  .bienvenido-dash{
    font-size: 16px;
    margin: 6px 0 10px;
  }

  .section{
    padding: 12px 10px 14px;
    border-radius: 16px;
    margin-top: 10px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(15,23,42,.06);
  }

  .section-title{
    font-size: 17px;
    line-height: 1.25;
    text-align: center;
  }

  .sec-back{
    width: 100%;
    justify-content: center;
    margin: 0 0 12px;
    min-height: 40px;
  }

  /* Menú de accesos más compacto */
  .linkzone{
    margin: 0;
    padding: 14px 10px 18px;
    border-radius: 16px;
  }

  .linkzone .menus{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
  }

  .menu-item{
    min-width: 0;
    padding: 10px 6px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #dbeafe;
    box-shadow: 0 8px 18px rgba(15,23,42,.15);
  }

  .menu-icon img{
    width: 72px;
  }

  .menu-text{
    font-size: 12px;
    line-height: 1.2;
  }

  .menu-text .menu-sub{
    font-size: 11px;
  }

  /* Pestañas con scroll horizontal en móvil */
  .sec-tabs{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    border-radius: 14px;
    padding: 6px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .sec-tab{
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 12px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* Filtros en una columna */
  .f-row{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
  }

  .f-col{
    min-width: 0;
    width: 100%;
    flex: 1 1 100%;
  }

  .f-col .btn,
  .f-row .btn{
    width: 100%;
    min-height: 40px;
  }

  /* Formularios internos */
  .user-form,
  .block-grid,
  .form-grid-2,
  .vac-grid,
  .sal-grid,
  .sal-grid-2{
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .form-block,
  .vac-card,
  .sal-box,
  .desp-card,
  .marca-card{
    padding: 12px;
    border-radius: 16px;
  }

  input:not([type]),
  input[type="text"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="email"],
  input[type="search"],
  select,
  textarea{
    min-height: 40px;
    font-size: 14px;
  }

  textarea{
    min-height: 90px;
  }

  /* Botones más cómodos */
  .btn,
  .btn:link,
  .btn:visited{
    min-height: 38px;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 12px;
  }

  .btn--sm{
    min-height: 34px;
    padding: 6px 9px !important;
    font-size: 12px;
  }

  /* Tablas móviles: scroll horizontal limpio */
  .table-wrap{
    position: relative;
    max-width: 100%;
    max-height: 72vh;
    overflow: auto;
    border-radius: 16px;
    border: 1px solid #dbe3ef;
    box-shadow:
      0 8px 18px rgba(15,23,42,.08),
      inset -18px 0 16px -18px rgba(15,23,42,.25);
  }

  .table-wrap::before{
    content: "Desliza la tabla hacia los lados →";
    display: block;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 5;
    padding: 8px 10px;
    background: #eff6ff;
    color: #1d4ed8;
    border-bottom: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
  }

  .table{
    min-width: 980px;
    font-size: 12px;
  }

  .table th,
  .table td{
    padding: 7px 8px;
    white-space: nowrap;
  }

  .table th{
    top: 31px;
    font-size: 11px;
    z-index: 4;
  }

  /* Primera columna fija para no perder referencia */
  .table th:first-child,
  .table td:first-child{
    position: sticky;
    left: 0;
    z-index: 2;
    background: #ffffff;
    box-shadow: 6px 0 10px -8px rgba(15,23,42,.45);
  }

  .table th:first-child{
    z-index: 6;
    background: #eef4ff;
  }

  .table tr:nth-child(even) td:first-child{
    background: #f9fbff;
  }

  .table tr:hover td:first-child{
    background: #f3f8ff;
  }

  /* Detalle marcaciones: más espacio porque tiene muchas columnas */
  #panel-detalle .table{
    min-width: 1280px;
  }

  #panel-detalle .table-wrap{
    max-height: 74vh;
  }

  /* Acciones no tan gigantes en móvil */
  .table-actions,
  .table td.table-actions{
    min-width: 138px;
  }

  .table-actions-stack{
    min-width: 120px;
    gap: 6px;
  }

  .table-actions-stack .btn,
  .table-actions-stack .btn:link,
  .table-actions-stack .btn:visited{
    min-height: 34px;
    font-size: 11px;
    padding: 6px 8px !important;
  }

  /* Exportar / títulos de tablas */
  .section > div[style*="justify-content:space-between"],
  .section > div[style*="justify-content: space-between"]{
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    text-align: center;
  }

  .section > div[style*="justify-content:space-between"] .btn,
  .section > div[style*="justify-content: space-between"] .btn{
    width: 100%;
  }

  /* KPIs / pills */
  .hr-stats,
  .vac-kpi--4{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .pill,
  .vac-kpi__box{
    border-radius: 14px;
    padding: 10px;
    text-align: center;
  }

  /* Flash centrado sin tapar todo */
  .flash-card{
    width: calc(100vw - 20px) !important;
    padding: 14px 42px 14px 14px;
    font-size: 15px;
  }

  .footer{
    padding: 0 8px 18px;
    font-size: 12px;
  }
}

/* ===== Móvil muy pequeño ===== */
@media (max-width: 420px){
  .menu-icon img{
    width: 62px;
  }

  .menu-text{
    font-size: 11px;
  }

  .section-title{
    font-size: 16px;
  }

  .table{
    font-size: 11px;
  }

  .table th,
  .table td{
    padding: 6px 7px;
  }

  .hr-stats,
  .vac-kpi--4{
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   CORRECCIÓN TABLAS PEQUEÑAS DASHBOARD / HR
   Solo activa scroll lateral en tablas realmente anchas
   ========================================================= */

/* 1) Reset: por defecto las tablas NO fuerzan scroll lateral */
.table-wrap::before{
  content: none !important;
  display: none !important;
}

.table{
  min-width: 0 !important;
  width: 100% !important;
}

.table th,
.table td{
  white-space: normal !important;
}

/* Quitar primera columna fija por defecto */
.table th:first-child,
.table td:first-child{
  position: static !important;
  left: auto !important;
  z-index: auto !important;
  box-shadow: none !important;
}

/* Contenedor normal para tablas pequeñas */
.table-wrap{
  overflow-x: visible;
  overflow-y: visible;
}

/* 2) Tablas anchas: si tienen 5 columnas o más, sí usan scroll lateral */
.table-wrap:has(table tr:first-child > :nth-child(5)){
  position: relative;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  border: 1px solid #dbe3ef;
  box-shadow:
    0 8px 18px rgba(15,23,42,.08),
    inset -18px 0 16px -18px rgba(15,23,42,.25);
}

/* Aviso solo para tablas anchas */
.table-wrap:has(table tr:first-child > :nth-child(5))::before{
  content: "Desliza la tabla hacia los lados →" !important;
  display: block !important;
  position: sticky;
  left: 0;
  top: 0;
  z-index: 5;
  padding: 8px 10px;
  background: #eff6ff;
  color: #1d4ed8;
  border-bottom: 1px solid #bfdbfe;
  font-size: 12px;
  font-weight: 900;
}

/* Ancho mínimo solo en tablas anchas */
.table-wrap:has(table tr:first-child > :nth-child(5)) .table{
  min-width: 900px !important;
  width: 100% !important;
}

/* Celdas en una línea solo en tablas anchas */
.table-wrap:has(table tr:first-child > :nth-child(5)) .table th,
.table-wrap:has(table tr:first-child > :nth-child(5)) .table td{
  white-space: nowrap !important;
}

/* Primera columna fija solo en tablas anchas */
.table-wrap:has(table tr:first-child > :nth-child(5)) .table th:first-child,
.table-wrap:has(table tr:first-child > :nth-child(5)) .table td:first-child{
  position: sticky !important;
  left: 0 !important;
  z-index: 2;
  background: #ffffff;
  box-shadow: 6px 0 10px -8px rgba(15,23,42,.45);
}

.table-wrap:has(table tr:first-child > :nth-child(5)) .table th:first-child{
  z-index: 6;
  background: #eef4ff;
}

/* 3) En móvil, las tablas anchas conservan scroll */
@media (max-width: 820px){
  .table-wrap{
    max-height: none;
    overflow-x: visible;
    overflow-y: visible;
  }

  .table-wrap:has(table tr:first-child > :nth-child(5)){
    max-height: 72vh;
    overflow: auto !important;
  }

  .table-wrap:has(table tr:first-child > :nth-child(5)) .table{
    min-width: 980px !important;
    font-size: 12px;
  }

  .table-wrap:has(table tr:first-child > :nth-child(5)) .table th{
    top: 31px;
    font-size: 11px;
    z-index: 4;
  }

  .table-wrap:has(table tr:first-child > :nth-child(5)) .table th:first-child{
    z-index: 6;
  }

  /* Tablas pequeñas en móvil: se ven completas */
  .table-wrap:not(:has(table tr:first-child > :nth-child(5))) .table{
    min-width: 0 !important;
    width: 100% !important;
    font-size: 12px;
  }

  .table-wrap:not(:has(table tr:first-child > :nth-child(5))) .table th,
  .table-wrap:not(:has(table tr:first-child > :nth-child(5))) .table td{
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    padding: 7px 8px;
  }
}

/* 4) Detalle marcaciones HR sigue siendo tabla grande */
#panel-detalle .table-wrap{
  overflow: auto !important;
  max-height: 74vh;
}

#panel-detalle .table{
  min-width: 1280px !important;
}

#panel-detalle .table th,
#panel-detalle .table td{
  white-space: nowrap !important;
}

/* =========================================================
   HORAS ACUMULADAS - RESUMEN VERDE SIN SCROLL LATERAL
   ========================================================= */

.table-wrap--resumen-horas{
  overflow: visible !important;
  max-height: none !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 16px !important;
  background: #ecfdf3 !important;
  box-shadow: 0 8px 20px rgba(22,163,74,.12) !important;
  padding: 10px !important;
}

/* Quitar aviso "Desliza..." solo a esta tabla */
.table-wrap--resumen-horas::before{
  content: none !important;
  display: none !important;
}

/* Título verde */
.table-wrap--resumen-horas .section-title{
  color: #166534 !important;
  font-weight: 900 !important;
  margin-bottom: 8px !important;
}

/* Tabla pequeña: ancho real, sin forzar scroll */
.table-wrap--resumen-horas .table{
  min-width: 0 !important;
  width: 100% !important;
  margin-top: 8px !important;
  background: #ffffff !important;
}

/* Encabezado verde */
.table-wrap--resumen-horas .table th{
  position: static !important;
  top: auto !important;
  background: #bbf7d0 !important;
  color: #14532d !important;
  white-space: normal !important;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* Celdas normales */
.table-wrap--resumen-horas .table td{
  background: #ffffff !important;
  color: #13213a !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* Quitar primera columna fija en esta tabla */
.table-wrap--resumen-horas .table th:first-child,
.table-wrap--resumen-horas .table td:first-child{
  position: static !important;
  left: auto !important;
  z-index: auto !important;
  box-shadow: none !important;
}

/* Filas alternas suaves */
.table-wrap--resumen-horas .table tr:nth-child(even) td{
  background: #f0fdf4 !important;
}

/* En móvil conservar mismo verde */
@media (max-width: 820px){
  .table-wrap--resumen-horas{
    background: #ecfdf3 !important;
    border-color: #86efac !important;
    padding: 10px !important;
  }

  .table-wrap--resumen-horas .table{
    font-size: 12px !important;
  }

  .table-wrap--resumen-horas .table th,
  .table-wrap--resumen-horas .table td{
    padding: 7px 8px !important;
  }
}


/* =========================================================
   DASHBOARD MÓVIL - PERMISOS CON COLOR / NO TODO BLANCO
   Solo afecta el formulario de Solicitar Permiso
   ========================================================= */

#sec-permiso{
  background: linear-gradient(180deg, #ecfdf3 0%, #f8fffb 100%) !important;
  border-color: #bbf7d0 !important;
}

/* Bloque informativo superior */
#sec-permiso [data-pane="solicitar"] > p{
  background: #f0fdf4 !important;
  border: 1px solid #FFDEDE !important;
  border-left: 8px solid #FF0000 !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  color: #123524 !important;
  line-height: 1.45 !important;
  box-shadow: 0 22px 45px rgba(22,163,74,.50) !important;
}

/* Tarjeta principal del formulario */
.permiso-form-card{
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%) !important;
  border: 3px solid #86efac !important;
  border-radius: 18px !important;
  padding: 18px !important;
  box-shadow: 0 22px 45px rgba(22,163,74,.50) !important;
}

/* Campos internos con mejor contraste */
.permiso-form-card input,
.permiso-form-card select,
.permiso-form-card textarea{
  background: #ffffff !important;
  border-color: #b7c6d8 !important;
}

/* Labels más visibles */
.permiso-form-card label{
  color: #123524 !important;
  font-weight: 800 !important;
}

/* Ayudas */
.permiso-form-card .help-text{
  color: #475569 !important;
}

/* Botón enviar verde */
.permiso-form-card button.btn{
  background: #16a34a !important;
  box-shadow: 0 8px 18px rgba(22,163,74,.28) !important;
}

.permiso-form-card button.btn:hover,
.permiso-form-card button.btn:focus-visible{
  background: #15803d !important;
}

/* Mantener cancelar rojo */
.permiso-form-card .btn--logout{
  background: #dc2626 !important;
  box-shadow: 0 8px 18px rgba(220,38,38,.28) !important;
}

.permiso-form-card .btn--logout:hover,
.permiso-form-card .btn--logout:focus-visible{
  background: #b91c1c !important;
}

/* Móvil: más aire y menos blanco plano */
@media (max-width: 820px){
  #sec-permiso{
    padding: 12px 10px 16px !important;
    background: linear-gradient(180deg, #F7FFFD 0%, #EDFFFF 100%) !important;
  }

  #sec-permiso [data-pane="solicitar"] > p{
    margin: 10px 0 16px !important;
    padding: 13px 14px !important;
    font-size: 13px !important;
  }

  .permiso-form-card{
    padding: 14px !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #ffffff 0%, #ecfdf3 100%) !important;
  }

  .permiso-form-card > div{
    background: rgba(255,255,255,.72);
    border-radius: 14px;
  }

  .permiso-form-card textarea{
    min-height: 96px !important;
  }

  .permiso-form-card button.btn,
  .permiso-form-card .btn--logout{
    min-width: 130px;
  }
}
/* =========================================================
   LOGIN MÓVIL - MÁS SOMBRA Y PROFUNDIDAD
   ========================================================= */

@media (max-width: 820px){
  .page-login .hoja{
    margin: 10px auto 22px !important;
    width: calc(100% - 18px) !important;
    max-width: 520px !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    border: 1px solid #dbe3ef !important;
    box-shadow:
      0 22px 48px rgba(15,23,42,.22),
      0 8px 18px rgba(22,163,74,.10) !important;
  }

  .page-login .login-card{
    border-radius: 20px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%) !important;
    border: 1px solid #bbf7d0 !important;
    box-shadow:
      0 18px 38px rgba(15,23,42,.18),
      0 8px 18px rgba(22,163,74,.16) !important;
  }

  .page-login .login-input{
    box-shadow: 0 5px 14px rgba(15,23,42,.10) !important;
  }

  .page-login .login-input:focus{
    box-shadow:
      0 0 0 3px rgba(22,163,74,.16),
      0 8px 18px rgba(15,23,42,.16) !important;
  }

  .page-login .btn.btn--full{
    box-shadow:
      0 14px 28px rgba(21,88,192,.28),
      0 5px 12px rgba(15,23,42,.16) !important;
  }
}

/* =========================================================
   H.E. RESUMEN — NO REMUNERADAS / REMUNERADAS
   ========================================================= */

.he-resumen-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:18px;
  margin: 14px 0 18px;
  align-items:stretch;
}

.he-resumen-grid .hextra-resumen{
  margin:0 !important;
  min-height:150px;
  padding:28px 34px !important;
  border-radius:14px !important;
  border:3px solid #f59e0b !important;
  background:linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%) !important;
  box-shadow:0 12px 28px rgba(245, 158, 11, .20) !important;

  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:18px !important;
}

.he-resumen-grid .hextra-resumen__head{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.he-resumen-grid .hextra-resumen__label{
  font-size:22px !important;
  font-weight:950 !important;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:#9a3412 !important;
  line-height:1.15;
}

.he-resumen-grid .hextra-resumen__hint{
  font-size:17px !important;
  font-weight:800 !important;
  color:#b45309 !important;
  line-height:1.2;
}

.he-resumen-grid .hextra-resumen__data{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  min-width:150px;
  line-height:1.05;
}

.he-resumen-grid .hextra-resumen__valor{
  font-size:54px !important;
  font-weight:950 !important;
  color:#7c2d12 !important;
  letter-spacing:-1px;
}

.he-resumen-grid .hextra-resumen__mins{
  margin-top:8px;
  font-size:26px !important;
  font-weight:950 !important;
  color:#c2410c !important;
}

/* Tabla detalle debajo de los cuadros grandes */
.he-detalle-grid{
  margin-top:16px !important;
}

/* =========================================================
   H.E. EN CADA MARCACIÓN — CUADROS ENFRENTADOS
   ========================================================= */

/* El campo "Tipo hora extra" ocupa toda la fila,
   así los dos cuadros de H.E. quedan enfrentados debajo */
#sec-marca .mis-marca-card > div:nth-last-child(3):not(.hextra-box){
  grid-column:1 / -1 !important;
}

/* Últimos dos cuadros: NO remunerada y Remunerada */
#sec-marca .mis-marca-card > .hextra-box:nth-last-child(2){
  grid-column:1 / 2 !important;
}

#sec-marca .mis-marca-card > .hextra-box:nth-last-child(1){
  grid-column:2 / 3 !important;
}

#sec-marca .mis-marca-card > .hextra-box{
  min-height:90px;
  width:100%;
}

/* En móvil se mantienen enfrentados en 2 columnas */
@media (max-width:768px){
  .he-resumen-grid{
    grid-template-columns:1fr;
  }

  .he-resumen-grid .hextra-resumen{
    min-height:145px;
    padding:22px 24px !important;
  }

  .he-resumen-grid .hextra-resumen__label{
    font-size:18px !important;
  }

  .he-resumen-grid .hextra-resumen__hint{
    font-size:15px !important;
  }

  .he-resumen-grid .hextra-resumen__valor{
    font-size:44px !important;
  }

  .he-resumen-grid .hextra-resumen__mins{
    font-size:22px !important;
  }

  #sec-marca .mis-marca-card{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  #sec-marca .mis-marca-card > .hextra-box{
    min-height:82px;
    padding:10px !important;
  }

  #sec-marca .mis-marca-card > .hextra-box span{
    font-size:10px !important;
  }

  #sec-marca .mis-marca-card > .hextra-box b{
    font-size:16px !important;
  }
}
/* =========================================================
   EDITAR USUARIO - CAMBIO / VER CONTRASEÑA
   ========================================================= */
.password-edit-box .pw-change-check{
  display:flex !important;
  gap:8px !important;
  align-items:center !important;
  margin:4px 0 8px !important;
  font-weight:700 !important;
  color:#13213a !important;
}

.password-edit-box .pw-change-check input[type="checkbox"]{
  width:18px !important;
  height:18px !important;
  flex:0 0 auto !important;
}

.pw-field--edit{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
}

.pw-field--edit input[type="password"],
.pw-field--edit input[type="text"]{
  flex:1 1 auto !important;
  min-width:0 !important;
  margin-top:0 !important;
}

.pw-field--edit .btn--pw,
.pw-field--edit .btn--pw:link,
.pw-field--edit .btn--pw:visited{
  flex:0 0 70px !important;
  width:70px !important;
  min-width:70px !important;
  height:42px !important;
  min-height:42px !important;
  padding:0 !important;
  border-radius:14px !important;
  font-size:18px !important;
  line-height:1 !important;
  pointer-events:auto !important;
}

.pw-field--edit .btn--pw:disabled{
  opacity:.55 !important;
  cursor:not-allowed !important;
  filter:grayscale(.15) !important;
}

/* =========================================================
   VER CONTRASEÑA — CREAR / EDITAR USUARIO
   ========================================================= */

.password-edit-box{
  min-width:0 !important;
}

.pw-change-check{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:6px 0 10px !important;
  font-weight:700 !important;
  color:#123524 !important;
}

.pw-change-check input[type="checkbox"]{
  width:18px !important;
  height:18px !important;
  flex:0 0 auto !important;
  appearance:auto !important;
  -webkit-appearance:checkbox !important;
  -moz-appearance:checkbox !important;
}

.pw-field,
.pw-field--edit{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
}

.pw-field input[type="password"],
.pw-field input[type="text"],
.pw-field--edit input[type="password"],
.pw-field--edit input[type="text"]{
  flex:1 1 auto !important;
  min-width:0 !important;
  height:46px !important;
  margin-top:0 !important;
}

.btn--pw,
.btn.btn--pw,
button.btn--pw{
  flex:0 0 58px !important;
  width:58px !important;
  min-width:58px !important;
  max-width:58px !important;
  height:46px !important;
  min-height:46px !important;
  padding:0 !important;
  border-radius:14px !important;
  font-size:20px !important;
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  user-select:none !important;
}

.btn--pw:disabled,
.btn.btn--pw:disabled,
button.btn--pw:disabled{
  opacity:.75 !important;
  cursor:pointer !important;
  pointer-events:auto !important;
}

@media (max-width:820px){
  .pw-field,
  .pw-field--edit{
    gap:8px !important;
  }

  .btn--pw,
  .btn.btn--pw,
  button.btn--pw{
    flex-basis:52px !important;
    width:52px !important;
    min-width:52px !important;
    height:42px !important;
    min-height:42px !important;
    font-size:18px !important;
  }
}


/* =========================================================
   TABLAS RRHH - SCROLL VERTICAL + SOLO NOMBRE FIJO
   Reglas finales: todas las tablas se comportan como Detalle de marcaciones.
   Al bajar: encabezado fijo. Al mover horizontal: solo la primera columna
   (Nombre/Usuario según la tabla) queda fija.
   ========================================================= */
.table-wrap{
  position:relative !important;
  max-height:75vh !important;
  overflow:auto !important;
  overflow-x:auto !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  border:1px solid #dbe3ef !important;
  border-radius:16px !important;
  background:#ffffff !important;
  box-shadow:0 8px 18px rgba(15,23,42,.08), inset -18px 0 16px -18px rgba(15,23,42,.25) !important;
}

.table-wrap::before{
  content:"Desliza la tabla hacia los lados →" !important;
  display:block !important;
  position:sticky !important;
  left:0 !important;
  top:0 !important;
  z-index:40 !important;
  padding:8px 10px !important;
  background:#eff6ff !important;
  color:#1d4ed8 !important;
  border-bottom:1px solid #bfdbfe !important;
  font-size:12px !important;
  font-weight:900 !important;
}

.table-wrap .table{
  min-width:980px !important;
  width:100% !important;
  margin-top:0 !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  background:#ffffff !important;
}

.table-wrap .table th,
.table-wrap .table td{
  white-space:nowrap !important;
  vertical-align:middle !important;
}

/* Encabezado fijo en todas las tablas */
.table-wrap .table th,
.table-wrap .table thead th,
.table-wrap .table tr:first-child th{
  position:sticky !important;
  top:31px !important;
  z-index:25 !important;
  background:linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%) !important;
  color:#10233f !important;
}

/* Quitar cualquier columna fija anterior excepto la primera */
.table-wrap .table td:not(:first-child){
  position:static !important;
  left:auto !important;
  z-index:auto !important;
  box-shadow:none !important;
}

.table-wrap .table th:not(:first-child){
  left:auto !important;
  box-shadow:none !important;
}

/* SOLO la primera columna queda fija al desplazar a la izquierda */
.table-wrap .table th:first-child,
.table-wrap .table td:first-child{
  position:sticky !important;
  left:0 !important;
  z-index:30 !important;
  min-width:210px !important;
  max-width:310px !important;
  width:240px !important;
  white-space:normal !important;
  word-break:break-word !important;
  overflow-wrap:anywhere !important;
  background:#ffffff !important;
  box-shadow:8px 0 12px -10px rgba(15,23,42,.55) !important;
}

.table-wrap .table tr:first-child th:first-child,
.table-wrap .table thead th:first-child{
  z-index:50 !important;
  background:linear-gradient(180deg, #eef4ff 0%, #e3edff 100%) !important;
}

.table-wrap .table tr:nth-child(even) td:first-child{
  background:#f9fbff !important;
}

.table-wrap .table tr:hover td:first-child{
  background:#f3f8ff !important;
}

/* Mantener Detalle de marcaciones ancho porque tiene muchas columnas */
#panel-detalle .table-wrap,
#panel-detalle .table-wrap .table-wrap{
  max-height:75vh !important;
}

#panel-detalle .table{
  min-width:1280px !important;
}

@media (max-width:820px){
  .table-wrap{
    max-height:72vh !important;
  }

  .table-wrap .table{
    min-width:980px !important;
    font-size:12px !important;
  }

  .table-wrap .table th,
  .table-wrap .table td{
    padding:7px 8px !important;
  }

  .table-wrap .table th:first-child,
  .table-wrap .table td:first-child{
    min-width:170px !important;
    max-width:230px !important;
    width:190px !important;
  }
}

/* =========================================================
   TABLAS RRHH - FIJAR SOLO COLUMNA NOMBRE / EMPLEADO / USUARIO
   Corrige el problema donde se fijaba FECHA por ser primera columna.
   ========================================================= */

/* La primera columna deja de quedar fija si NO es la columna nombre */
.table-wrap .table td:first-child:not(.col-nombre-sticky){
  position: static !important;
  left: auto !important;
  z-index: auto !important;
  min-width: auto !important;
  max-width: none !important;
  width: auto !important;
  box-shadow: none !important;
}

.table-wrap .table th:first-child:not(.col-nombre-sticky){
  position: sticky !important;
  top: 31px !important;
  left: auto !important;
  z-index: 25 !important;
  min-width: auto !important;
  max-width: none !important;
  width: auto !important;
  box-shadow: none !important;
}

/* Quitar cualquier left anterior de columnas que no sean nombre */
.table-wrap .table th:not(.col-nombre-sticky),
.table-wrap .table td:not(.col-nombre-sticky){
  left: auto !important;
}

/* SOLO esta columna queda fija al mover horizontalmente */
.table-wrap .table th.col-nombre-sticky,
.table-wrap .table td.col-nombre-sticky{
  position: sticky !important;
  left: 0 !important;
  min-width: 230px !important;
  width: 250px !important;
  max-width: 330px !important;

  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;

  background: #ffffff !important;
  box-shadow: 8px 0 12px -10px rgba(15,23,42,.55) !important;
}

/* Encabezado nombre fijo */
.table-wrap .table th.col-nombre-sticky{
  top: 31px !important;
  z-index: 70 !important;
  background: linear-gradient(180deg, #eef4ff 0%, #e3edff 100%) !important;
  color: #10233f !important;
}

/* Celdas nombre fijas */
.table-wrap .table td.col-nombre-sticky{
  z-index: 45 !important;
  font-weight: 800 !important;
  color: #10233f !important;
}

/* Zebra y hover también en la columna fija */
.table-wrap .table tr:nth-child(even) td.col-nombre-sticky{
  background: #f9fbff !important;
}

.table-wrap .table tr:hover td.col-nombre-sticky{
  background: #f3f8ff !important;
}

@media (max-width:820px){
  .table-wrap .table th.col-nombre-sticky,
  .table-wrap .table td.col-nombre-sticky{
    min-width: 170px !important;
    width: 190px !important;
    max-width: 230px !important;
  }
}


/* =========================================================
   FIX FINAL TABLAS RRHH
   Nombre fijo horizontal, pero NO se monta sobre encabezado
   ========================================================= */

/* Contenedor de tablas anchas */
.table-wrap:has(table tr:first-child > :nth-child(5)){
  position: relative !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: 74vh;
}

/* Aviso "Desliza..." arriba */
.table-wrap:has(table tr:first-child > :nth-child(5))::before{
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 100 !important;
}

/* Encabezado fijo debajo del aviso */
.table-wrap:has(table tr:first-child > :nth-child(5)) .table th{
  position: sticky !important;
  top: 32px !important;
  z-index: 90 !important;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%) !important;
}

/* Quitar sticky vertical de cualquier celda normal */
.table-wrap .table td{
  top: auto !important;
  bottom: auto !important;
}

/* Columna nombre fija SOLO horizontal */
.table-wrap .table td.col-nombre-sticky{
  position: sticky !important;
  left: 0 !important;
  top: auto !important;
  bottom: auto !important;

  z-index: 20 !important; /* menor que encabezado */
  background: #ffffff !important;
  box-shadow: 8px 0 12px -10px rgba(15,23,42,.55) !important;

  min-width: 230px !important;
  width: 250px !important;
  max-width: 330px !important;

  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  font-weight: 800 !important;
}

/* Encabezado de la columna nombre */
.table-wrap .table th.col-nombre-sticky{
  position: sticky !important;
  left: 0 !important;
  top: 32px !important;

  z-index: 110 !important; /* encima de todo el encabezado */
  background: linear-gradient(180deg, #eef4ff 0%, #e3edff 100%) !important;
  box-shadow: 8px 0 12px -10px rgba(15,23,42,.55) !important;

  min-width: 230px !important;
  width: 250px !important;
  max-width: 330px !important;

  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* Mantener color alterno de filas en la columna fija */
.table-wrap .table tr:nth-child(even) td.col-nombre-sticky{
  background: #f9fbff !important;
}

.table-wrap .table tr:hover td.col-nombre-sticky{
  background: #f3f8ff !important;
}

/* En tablas pequeñas no fijar nada */
.table-wrap:not(:has(table tr:first-child > :nth-child(5))) .table th.col-nombre-sticky,
.table-wrap:not(:has(table tr:first-child > :nth-child(5))) .table td.col-nombre-sticky{
  position: static !important;
  left: auto !important;
  top: auto !important;
  z-index: auto !important;
  box-shadow: none !important;
}

/* Móvil */
@media (max-width: 820px){
  .table-wrap .table th.col-nombre-sticky,
  .table-wrap .table td.col-nombre-sticky{
    min-width: 170px !important;
    width: 190px !important;
    max-width: 230px !important;
  }

  .table-wrap:has(table tr:first-child > :nth-child(5)) .table th,
  .table-wrap .table th.col-nombre-sticky{
    top: 31px !important;
  }
}

/* =========================================================
   DETALLE MARCACIONES - RESALTAR ENTRADAS PM POR REVISAR
   Solo visual: no cambia cálculos, permisos, horarios ni marcaciones.
   ========================================================= */
#panel-detalle .table--marcas th:first-child,
#panel-detalle .table--marcas td:first-child{
  position: static !important;
  left: auto !important;
  z-index: auto !important;
  min-width: auto !important;
  max-width: none !important;
  width: auto !important;
  box-shadow: none !important;
}

#panel-detalle .table--marcas th.col-nombre-sticky,
#panel-detalle .table--marcas td.col-nombre-sticky{
  position: sticky !important;
  left: 0 !important;
  z-index: 65 !important;
  min-width: 230px !important;
  width: 250px !important;
  max-width: 330px !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  background: #ffffff !important;
  box-shadow: 8px 0 12px -10px rgba(15,23,42,.55) !important;
}

#panel-detalle .table--marcas th.col-nombre-sticky{
  top: 32px !important;
  z-index: 120 !important;
  background: linear-gradient(180deg, #eef4ff 0%, #e3edff 100%) !important;
}

#panel-detalle .table--marcas tr:nth-child(even) td.col-nombre-sticky{
  background: #f9fbff !important;
}

#panel-detalle .table--marcas tr:hover td.col-nombre-sticky{
  background: #f3f8ff !important;
}

#panel-detalle .table--marcas tr.marca-pm-revisar td.celda-entrada-pm{
  background: #fff1f2 !important;
  border-color: #fb7185 !important;
  color: #991b1b !important;
  font-weight: 900 !important;
  box-shadow: inset 0 0 0 2px rgba(225, 29, 72, .18) !important;
}

#panel-detalle .table--marcas tr.marca-pm-revisar td.celda-entrada-pm .hora-view{
  color: #991b1b !important;
  font-weight: 900 !important;
}

#panel-detalle .pm-revisar-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #dc2626;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

@media (max-width: 820px){
  #panel-detalle .table--marcas th.col-nombre-sticky,
  #panel-detalle .table--marcas td.col-nombre-sticky{
    min-width: 170px !important;
    width: 190px !important;
    max-width: 230px !important;
  }
}


/* DEMO RRHH - Logo PWA de formato cuadrado, centrado en los encabezados.
   Estas reglas se agregan sin tocar el diseño ni la lógica de las pantallas. */
#top .encab-left img[src*="logo_demo_rrhh.png"],
#dash-top .encab-left img[src*="logo_demo_rrhh.png"] {
  display: block;
  width: auto;
  height: 150px;
  max-height: 150px;
  max-width: min(100%, 240px);
  object-fit: contain;
  margin: 0 auto;
}
@media (max-width: 820px) {
  #top .encab-left img[src*="logo_demo_rrhh.png"],
  #dash-top .encab-left img[src*="logo_demo_rrhh.png"] {
    width: auto;
    height: 108px;
    max-height: 108px;
    max-width: 95%;
  }
}