/* shared.css - estilos compartidos para Sistema RRHH */

.table-container td{ vertical-align: middle; }
.table-container th, .table-container td{ vertical-align: middle; }
.actions{ white-space: nowrap; }
.table-container .btn:not(.btn-anim-refresh):not(.btn-anim-search):not(.btn-anim-new):hover{ transform: none !important; }

#tabla-empleados th+th, #tabla-empleados td+td,
#tabla-fichadas th+th, #tabla-fichadas td+td,
#tabla-fichadas-hoy th+th, #tabla-fichadas-hoy td+td,
#tabla-feriados th+th, #tabla-feriados td+td,
#tabla-usuarios th+th, #tabla-usuarios td+td,
#tabla-est-empleados th+th, #tabla-est-empleados td+td,
#tabla-estadisticas-sectores th+th, #tabla-estadisticas-sectores td+td,
#tabla th+th, #tabla td+td{
  border-left: 1px solid rgba(148,163,184,.4);
}

.btn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
}

/* Ocultar caret global salvo en campos editables */
body * {
  caret-color: transparent !important;
}

input, textarea, select {
  caret-color: auto !important;
}

.icon-refresh{ width:18px; height:18px; vertical-align:middle; }
button[title]{ cursor:pointer; }


/* Animaciones botones (Gestión de Empleados) - estilo "Dashboard" */
.btn-anim-refresh,
.btn-anim-search,
.btn-anim-new{
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}

.btn-anim-refresh:hover,
.btn-anim-search:hover,
.btn-anim-new:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
}

/* Detalle extra para el icono de actualizar */
.btn-anim-refresh .icon-refresh{
  transition: transform .25s ease;
}
.btn-anim-refresh:hover .icon-refresh{
  transform: rotate(180deg);
}
.btn-anim-refresh .icon-refresh{
  transition: transform .25s ease;
}
.btn-anim-refresh:hover .icon-refresh{
  transform: translateY(-2px) rotate(180deg);
}

@keyframes btnPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.btn-anim-search{
  transition: transform .2s ease;
}
.btn-anim-search:hover{
  transform: translateY(-2px);
  animation: btnPulse .35s ease-in-out;
}

@keyframes btnPop {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}
.btn-anim-new{
  transition: transform .2s ease;
}
.btn-anim-new:hover{
  transform: translateY(-2px);
  animation: btnPop .35s ease-in-out;
}
.btn-anim-refresh .icon-refresh{
  transition: transform .35s ease;
}
.btn-anim-refresh:hover .icon-refresh{
  transform: rotate(180deg);
}

@keyframes btnPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.btn-anim-search{
  transition: transform .2s ease;
}
.btn-anim-search:hover{
  animation: btnPulse .35s ease-in-out;
}

@keyframes btnPop {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}
.btn-anim-new{
  transition: transform .2s ease;
}
.btn-anim-new:hover{
  animation: btnPop .35s ease-in-out;
}


/* Hover tipo Dashboard (forzado) - Gestión de Empleados */
#empleados .controls .btn-anim-refresh:hover,
#empleados .controls .btn-anim-search:hover,
#empleados .controls .btn-anim-new:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.25) !important;
}

/* === Fix: evitar que los dropdowns (Personal/Estadísticas) se desplacen al perder hover === */
.tabs details.dropdown > summary.tab,
.tabs details.dropdown > summary.tab:hover{
  transform: none !important;
  box-shadow: none !important;
}
#empleados .controls .btn-anim-refresh:hover .icon-refresh{
  transform: translateY(-1px) rotate(180deg) !important;
}


/* Efecto "Dashboard" en botones y navegación */
button:not(:disabled):not(.no-hover),
.btn:not(:disabled):not(.no-hover),
a.btn:not(.no-hover),
.navbar a:not(.no-hover),
.navbar button:not(:disabled):not(.no-hover),
.menu a:not(.no-hover),
.menu button:not(:disabled):not(.no-hover),
.topbar a:not(.no-hover),
.topbar button:not(:disabled):not(.no-hover),
nav a:not(.no-hover),
nav button:not(:disabled):not(.no-hover),
.tabs .tab:not(.no-hover){
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  will-change: transform;
}

button:not(:disabled):not(.no-hover):hover,
.btn:not(:disabled):not(.no-hover):hover,
a.btn:not(.no-hover):hover,
.navbar a:not(.no-hover):hover,
.navbar button:not(:disabled):not(.no-hover):hover,
.menu a:not(.no-hover):hover,
.menu button:not(:disabled):not(.no-hover):hover,
.topbar a:not(.no-hover):hover,
.topbar button:not(:disabled):not(.no-hover):hover,
nav a:not(.no-hover):hover,
nav button:not(:disabled):not(.no-hover):hover,
.tabs .tab:not(.no-hover):hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.25) !important;
}


/* Evitar que el header fijo tape el contenido */
:root{
  --fixed-header-space: 110px;
}

.container,
.content,
.page,
.wrap{
  padding-top: var(--fixed-header-space);
}

/* Asegurar que los controles del header queden arriba */
.header-buttons{
  z-index: 9999;
}


/* Reservar espacio cuando hay header fijo */
body.has-fixed-header{
  padding-top: var(--fixed-header-space) !important;
}


/* Respaldo: si algún layout usa contenedores con posicionamiento propio */
body.has-fixed-header .container{
  padding-top: 0; /* body ya empuja */
}

/* === Patch UI: ocultar "ovalo" del contenedor superior (header-buttons) === */
.header-buttons{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* === Patch UI: centrar notificaciones (toast) arriba === */
.notification{
  left: 50% !important;
  right: auto !important;
  top: 18px !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  text-align: center;
}
@keyframes toastDown{
  from{ transform: translate(-50%, -10px); opacity: 0; }
  to  { transform: translate(-50%, 0px);  opacity: 1; }
}
.notification{
  animation: toastDown .18s ease-out !important;
}

/* === Patch UI: quitar resaltado celeste de tabs/menú (estado .active) === */
.navbar a.active, .navbar button.active,
.topbar a.active, .topbar button.active,
.menu a.active, .menu button.active,
nav a.active, nav button.active,
.dropdown-menu a.active, .dropdown-menu button.active,
.tabs .tab.active, summary.active,
.tabs details.dropdown > summary.tab,
.tabs details.dropdown[open] > summary.tab,
.dropdown > .dropdown-toggle.active,
details > summary.active{
  background: transparent !important;
  border-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: inherit !important;
  text-decoration: none !important;
}
.navbar a.active, .navbar button.active,
.topbar a.active, .topbar button.active,
.menu a.active, .menu button.active,
nav a.active, nav button.active,
.tabs .tab.active, summary.active{
  font-weight: 700 !important;
}

/* === Patch UI: quitar "azul" de opciones dentro de dropdown (Personal / Estadísticas) === */
details.dropdown .menu button,
details.dropdown .menu a,
.dropdown .menu button,
.dropdown .menu a{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: inherit !important;
}
/* Mantener un hover sutil */
details.dropdown .menu button:hover,
details.dropdown .menu a:hover,
.dropdown .menu button:hover,
.dropdown .menu a:hover{
  background: rgba(148,163,184,.12) !important;
}
/* Opcional: que ocupen todo el ancho sin parecer "botón" */
details.dropdown .menu button,
.dropdown .menu button{
  width: 100% !important;
  text-align: left !important;
  border-radius: 10px !important;
}

/* =========================
   Tablas responsive (tipografía/padding)
   Objetivo: que las tablas anchas entren mejor en pantallas chicas.
========================= */
.table-wrapper table,
.table-container table,
.table-container,
.table-wrapper{
  max-width: 100%;
}

/* Permitir que los encabezados ocupen 2 líneas si hace falta */
.table-wrapper th,
.table-container th{
  white-space: normal;
  line-height: 1.1;
}

/* Por defecto, mantener valores en una línea */
.table-wrapper td,
.table-container td{
  white-space: nowrap;
}

@media (max-width: 1600px){
  .table-wrapper table, .table-container table{ font-size: 12.5px; }
  .table-wrapper th, .table-container th{ padding: 12px 14px; }
  .table-wrapper td, .table-container td{ padding: 10px 14px; }
}

@media (max-width: 1366px){
  .table-wrapper table, .table-container table{ font-size: 12px; }
  .table-wrapper th, .table-container th{ padding: 10px 12px; font-size: 10px; }
  .table-wrapper td, .table-container td{ padding: 8px 12px; }
}

@media (max-width: 1200px){
  .table-wrapper table, .table-container table{ font-size: 11px; }
  .table-wrapper th, .table-container th{ padding: 9px 10px; font-size: 10px; }
  .table-wrapper td, .table-container td{ padding: 7px 10px; }
}

/* === RESPONSIVE TABLE TYPOGRAPHY (AUTO) === */
/*
  Objetivo:
  - Achicar tipografía y padding de tablas en pantallas más chicas (notebook / 1366 / 1200)
  - Sin tocar layout de páginas específicas.
*/
:root{
  --tbl-font: 13.5px;
  --tbl-th-font: 11px;
  --tbl-pad-y: 12px;
  --tbl-pad-x: 14px;
  --tbl-icon: 1em;
}

.table-wrapper table,
.table-container table,
table#tabla,
table[id^="tabla-"]{
  font-size: var(--tbl-font);
}

.table-wrapper th, .table-wrapper td,
.table-container th, .table-container td,
table#tabla th, table#tabla td,
table[id^="tabla-"] th, table[id^="tabla-"] td{
  padding: var(--tbl-pad-y) var(--tbl-pad-x);
}

.table-wrapper th,
.table-container th,
table#tabla th,
table[id^="tabla-"] th{
  white-space: normal;
  line-height: 1.1;
  font-size: var(--tbl-th-font);
}

.table-wrapper td,
.table-container td,
table#tabla td,
table[id^="tabla-"] td{
  white-space: nowrap;
}

@media (max-width: 1600px){
  :root{
    --tbl-font: 13px;
    --tbl-th-font: 10.5px;
    --tbl-pad-y: 10px;
    --tbl-pad-x: 12px;
  }
}

@media (max-width: 1366px){
  :root{
    --tbl-font: 12px;
    --tbl-th-font: 10px;
    --tbl-pad-y: 8px;
    --tbl-pad-x: 10px;
  }
}

@media (max-width: 1200px){
  :root{
    --tbl-font: 11px;
    --tbl-th-font: 9.5px;
    --tbl-pad-y: 7px;
    --tbl-pad-x: 8px;
  }
}

@media (max-width: 992px){
  td.detalle{ white-space: normal; }
}
/* === END RESPONSIVE TABLE TYPOGRAPHY (AUTO) === */



/* === Visibilidad de badges (Justificaciones: 'Sí/No/Pendiente') === */
.badge{ display:inline-block; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:800; line-height:1; }
.badge.b-ok{ background:#00c853 !important; color:#06150a !important; box-shadow:0 0 0 1px rgba(0,0,0,.25) inset; }
.badge.b-danger{ background:#ff1744 !important; color:#1a060a !important; box-shadow:0 0 0 1px rgba(0,0,0,.25) inset; }
.badge.b-muted{ background:#cfd8e3 !important; color:#101828 !important; box-shadow:0 0 0 1px rgba(0,0,0,.15) inset; }
body.dark .badge.b-ok{ color:#001a08 !important; }
body.dark .badge.b-danger{ color:#220008 !important; }



/* === Botones Sí/No (Justificaciones) === */
.btn-ok{
  background:#00c853 !important;
  color:#06150a !important;
  border:1px solid rgba(0,0,0,.35) !important;
  box-shadow:0 0 0 2px rgba(0,200,83,.22) !important;
}
.btn-danger{
  background:#ff1744 !important;
  color:#1a060a !important;
  border:1px solid rgba(0,0,0,.35) !important;
  box-shadow:0 0 0 2px rgba(255,23,68,.18) !important;
}
/* Asegurar legibilidad en modo claro también */
body:not(.dark) .btn-ok{ color:#05210e !important; }
body:not(.dark) .btn-danger{ color:#26080d !important; }


/* === Botón secundario (Adjuntos: Descargar) ===
   Asegura contraste en modo claro y oscuro para .btn-secondary
*/
body:not(.dark) .btn.btn-secondary,
body:not(.dark) a.btn.btn-secondary{
  color:#111827 !important;
  background:#e5e7eb !important;
  border:1px solid #cbd5e1 !important;
}
body:not(.dark) .btn.btn-secondary:hover,
body:not(.dark) a.btn.btn-secondary:hover{
  background:#dbe3ec !important;
  border-color:#b8c4d3 !important;
}

body.dark .btn.btn-secondary,
body.dark a.btn.btn-secondary{
  color:rgba(255,255,255,.92) !important;
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.30) !important;
}
body.dark .btn.btn-secondary:hover,
body.dark a.btn.btn-secondary:hover{
  background:rgba(255,255,255,.18) !important;
  border-color:rgba(255,255,255,.38) !important;
}


/* === RESPONSIVE LAYOUT (NOTEBOOK / SMALL SCREENS) ===
   Objetivo: mejorar visualización en pantallas chicas sin tocar cada page.css
   - Contenedores fluidos + padding adaptable
   - Botoneras y filtros que envuelven (wrap) en vez de desbordar
   - Tablas con scroll horizontal cuando no entran
*/
*, *::before, *::after{ box-sizing: border-box; }
img, video, canvas{ max-width: 100%; height: auto; }

.container{
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(10px, 2vw, 18px);
  padding-right: clamp(10px, 2vw, 18px);
}

/* Evitar que se "rompan" layouts por elementos largos */
.table-wrapper, .table-container{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-wrapper table, .table-container table{
  min-width: 760px;
}

/* Botoneras y filtros: permitir wrap en pantallas chicas */
@media (max-width: 1366px){
  .header-buttons{
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .header-buttons .btn,
  .header-buttons button,
  .header-buttons a{
    flex: 0 1 auto;
  }
  .filter, .form-group{
    flex: 1 1 240px;
    min-width: 220px;
  }
}

@media (max-width: 1200px){
  .container{
    max-width: none;
    padding-left: 12px;
    padding-right: 12px;
  }
  .filter, .form-group{
    flex: 1 1 220px;
    min-width: 200px;
  }
  .btn, button.btn{
    padding: 10px 12px;
    font-size: 13px;
  }
  .card{
    border-radius: 14px;
  }
}

@media (max-width: 992px){
  .table-wrapper table, .table-container table{
    min-width: 680px;
  }
  .filter, .form-group{
    min-width: 180px;
  }
}
/* === END RESPONSIVE LAYOUT === */