/* 
  Estilos globales para Control Horario
  Aplicado a los paneles de Admin, Empleado y Fabricante para un look&feel homogéneo.
  Se utiliza principalmente Tailwind CSS, pero este fichero define bases y helpers.
*/

body {
  background-color: #f8fafc; /* Tailwind slate-50 */
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Transición suave para todos los botones */
button {
  transition: background-color 0.2s ease-in-out;
}

/* Estilos para el nuevo dashboard de empleado: Action Ring */
.ring-action-button {
  transition: transform 0.1s ease-out, background-color 0.2s, filter 0.2s;
}

/* Efecto de hundimiento al presionar */
.ring-action-button:active {
  transform: scale(0.97);
  filter: brightness(0.9);
}

/* Animación de pulso al completar la acción */
.ring-action-button.is-animating {
  animation: button-pulse 0.4s ease-out;
}

@keyframes button-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.status-text-in {
    color: #16a34a; /* Tailwind green-600 */
}
.status-text-out {
    color: #dc2626; /* Tailwind red-600 */
}

.session-info-box {
    background-color: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid #e5e7eb;
    min-width: 120px;
    text-align: center;
}

#ringProgressCircle, #ringOvertimeCircle, #ringOvertimeCriticalCircle {
    transition: stroke-dashoffset 0.5s ease-out;
}

/* Estilos para el modal de desglose */
.breakdown-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6; /* gray-100 */
}
.breakdown-row.total {
    font-weight: 600;
    color: #0c4a6e; /* sky-900 */
    border-top: 1px solid #e5e7eb; /* gray-200 */
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}


/*
  Clases de ayuda para colores de texto semánticos.
  Útil para aplicar estilos dinámicamente desde JS.
*/
.text-success, .saldo-positivo {
    color: #059669; /* Tailwind green-600 */
    font-weight: 600;
}

.text-danger, .saldo-negativo {
    color: #dc2626; /* Tailwind red-600 */
    font-weight: 600;
}

.text-info, .saldo-positivo-extra {
    color: #2563eb; /* Tailwind blue-600 */
    font-weight: 600;
}

/* --- ESTILOS PARA LOGIN --- */
.login-icon-wrapper {
  background-color: #e0f2fe; /* sky-100 */
  color: #0284c7; /* sky-600 */
  border-radius: 9999px;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

@media (min-width: 640px) {
  .login-icon-wrapper {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
  }
}

.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards;
}

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


/*
  Ajustes responsivos para pantallas pequeñas (móviles).
  Tailwind se encarga de la mayoría, pero aquí se pueden añadir ajustes globales.
*/
@media (max-width: 640px) {
    /* Reducir un poco el padding general en móviles */
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Ajustar tamaños de fuente de cabeceras en móvil */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.125rem; }
    
    /* --- MOBILE CALENDAR STYLES --- */
    #adminCalendarGrid {
      gap: 2px;
    }
  
    #adminCalendarGrid .calendar-cell {
      min-height: 56px;
      padding: 2px;
    }
  
    #adminCalendarGrid .calendar-cell .day-number {
      font-size: 0.7rem; /* 11.2px */
    }
  


    /* --- MOBILE OPTIMIZATION --- */

    /* Compact login view */
    #loginView { 
        margin-top: 1rem !important; 
        padding: 1rem !important; 
    }
    /* Smaller login title */
    #loginView h2 { 
        font-size: 1.1rem !important; 
        margin-bottom: 1rem !important; 
    }

    /* Compact app header */
    #appView > header { 
        padding: 0.5rem !important; 
        margin-bottom: 1rem !important; 
    }
    #appView > header #logoEmpresaCabecera { 
        height: 1.75rem; 
    }
    #appView > header #nombreEmpresaCabecera { 
        font-size: 0.8rem; 
        margin-top: 0.125rem; 
    }
    
    /* Compact date display */
    #currentDateDisplayAdmin { 
        font-size: 1rem; 
    }
    #headerTimezoneInfo { 
        font-size: 0.7rem; 
    }

    /* Compact dashboard cards & reduce spacing */
    #dashboardContent .grid.gap-4 {
        gap: 0.75rem;
    }
    #dashboardContent .space-y-4 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 1rem;
    }
    .stat-card-interactive { 
        padding: 0.75rem !important; 
        min-height: auto;
    }
    .stat-card-interactive > div:first-child {
        margin-bottom: 0.25rem;
    }
    .stat-card-interactive .stat-count { 
        font-size: 1.75rem !important; 
    }
    .stat-card-interactive h4 { 
        font-size: 0.875rem; 
    }

    /* Reduce general section padding and margins */
    .tab-content > section, section.mb-4, section.mb-6 { 
        padding: 1rem !important; 
        margin-bottom: 1rem !important;
    }
    
    .tab-content > .bg-white {
      margin-top: 0.5rem !important;
    }

    /* Footer */
    footer { 
        padding-top: 1rem !important; 
        padding-bottom: 1rem !important; 
    }
}

/* Specific class to force vertical layout in header for mobile */
@media (max-width: 639px) { /* sm breakpoint is 640px */
    #appView > header > div:first-child {
        flex-direction: column !important;
        align-items: center;
        text-align: center;
        gap: 0.25rem !important;
    }
}

/* Estilo unificado para el eslogan en el pie de página */
footer #footerSlogan {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #94a3b8; /* Tailwind slate-400 */
}

/* Indicador de scroll para pestañas y botones */
.tabs-wrapper {
  position: relative;
}
.tabs-wrapper nav {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.tabs-wrapper nav::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.tab-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #d1d5db; /* gray-300 */
  color: #374151; /* gray-700 */
  width: 2rem;
  height: 2rem;
  border-radius: 9999px; /* rounded-full */
  font-size: 1.25rem;
  font-weight: bold;
  cursor: pointer;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}
.tab-scroll-btn:hover {
  background-color: #f9fafb; /* gray-50 */
  color: #000;
}
.tab-scroll-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.tab-scroll-btn.left-0 { left: -0.5rem; }
.tab-scroll-btn.right-0 { right: -0.5rem; }


/* Contenedor para tablas con scroll horizontal en móvil */
.table-wrapper {
  position: relative;
  overflow-x: auto;
}
.table-wrapper::-webkit-scrollbar {
  display: none;
}
.table-wrapper {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
@media (max-width: 768px) { /* breakpoint 'md' de Tailwind */
  .table-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2rem; /* Más sutil que para las pestañas */
    background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
    pointer-events: none;
    border-radius: 0.5rem; /* Hereda el redondeo si lo hay */
  }
}

/* Estilos para los iconos de información de las pestañas */
.tab-info-icon::before {
  content: 'i';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: serif;
  font-style: italic;
  font-weight: bold;
  color: #9ca3af; /* gray-400 */
  border: 1px solid #d1d5db; /* gray-300 */
  border-radius: 9999px; /* rounded-full */
  width: 1.125rem; /* h-4.5 */
  height: 1.125rem; /* w-4.5 */
  line-height: 1;
  font-size: 0.8rem;
  margin-left: 0.25rem; /* ml-1 */
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.tab-info-icon:hover::before {
    background-color: #e5e7eb; /* gray-200 */
    color: #4b5563; /* gray-600 */
    border-color: #9ca3af; /* gray-400 */
}

/* Estilos para iconos de info GENÉRICOS (ej. en login) */
.info-icon::before {
  content: 'i';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: serif;
  font-style: italic;
  font-weight: bold;
  color: #9ca3af; /* gray-400 */
  border: 1px solid #d1d5db; /* gray-300 */
  border-radius: 9999px; /* rounded-full */
  width: 1.25rem; 
  height: 1.25rem;
  line-height: 1;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.info-icon:hover::before {
    background-color: #e5e7eb; /* gray-200 */
    color: #4b5563; /* gray-600 */
    border-color: #9ca3af; /* gray-400 */
}

/* --- ESTILOS PARA MODALES RESPONSIVE --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex; /* cambiado de 'hidden' */
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
}

.modal-content {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 28rem; /* default max-width, can be overridden */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
    padding: 1.25rem;
}

.modal-form-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.modal-footer {
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
}

/* Ocultar modales por defecto */
.modal-overlay.hidden {
    display: none;
}

/* --- Estilos de Foco Globales para Mejorar la Visibilidad --- */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #0ea5e9; /* sky-500 */
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.4);
}

/* --- CALENDAR STYLES --- */
#adminCalendarGrid .calendar-cell {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  position: relative;
  overflow: hidden;
  min-height: 64px;
}

#adminCalendarGrid .calendar-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

/* Force dark text for readability */
#adminCalendarGrid .calendar-cell span {
  color: #1f2937 !important; /* text-gray-800 */
}

/* Special case for muted weekend text when there's no activity */
#adminCalendarGrid .calendar-cell.bg-slate-100 span {
    color: #475569 !important; /* text-slate-600 */
}

/* Day number */
#adminCalendarGrid .calendar-cell .day-number {
  font-weight: 500;
}

/* Hours number */
#adminCalendarGrid .calendar-cell .hours-number {
  font-weight: 700;
}

/* Highlight for today's date */
#adminCalendarGrid .calendar-cell.ring-2 .day-number {
    font-weight: 700;
}

/* --- ESTILO PARA RESALTAR CAJAS DE FILTROS --- */
.filter-actions-box {
  border: 1px solid #bae6fd; /* sky-200 */
  box-shadow: 0 0 15px rgba(14, 165, 233, 0.2); /* sky-500 con opacidad */
}

/* --- TABLE SCROLLER BUTTONS (CORRECTED) --- */
.table-scroll-btn {
  position: sticky; /* <-- Clave para el posicionamiento */
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid #d1d5db; /* gray-300 */
  color: #374151; /* gray-700 */
  width: 2.5rem;   /* Aumentado para mejor tacto */
  height: 2.5rem;  /* Aumentado para mejor tacto */
  border-radius: 9999px;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* Sombra más pronunciada */
  transition: all 0.2s ease;
}

.table-scroll-btn.left { left: 0.5rem; }
.table-scroll-btn.right { right: 0.5rem; }

.table-scroll-btn:hover {
  background-color: #f9fafb; /* gray-50 */
  color: #000;
  transform: translateY(-50%) scale(1.05);
}

.table-scroll-btn:disabled {
  opacity: 0.2;
  cursor: not-allowed;
  transform: translateY(-50%) scale(1);
}

.table-scroll-btn.hidden {
  display: none;
}

/* --- ESTILOS PARA LAS TARJETAS DE RESUMEN DE EMPLEADOS Y FESTIVOS --- */
.stat-card {
  padding: 1rem;
  border-radius: 0.5rem;
}
.stat-card-title {
  font-size: 0.875rem; /* text-sm */
  color: #4b5563; /* text-gray-600 */
  font-weight: 500;
}
.stat-card-number {
  font-size: 2.25rem; /* text-4xl */
  font-weight: 700; /* font-bold */
  line-height: 1.1;
  margin-top: 0.25rem;
}

/* --- NUEVOS ESTILOS DASHBOARD --- */
.stat-card-interactive {
  cursor: pointer;
  transition: box-shadow 0.2s ease-in-out;
}
.stat-card-interactive:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.stat-card-interactive .stat-list {
  max-height: 400px;
  overflow-y: auto;
}
.chevron-icon {
  transition: transform 0.3s ease;
}

.employee-stat-card {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* gap-3 */
  padding: 0.75rem; /* p-3 */
  border-bottom: 1px solid #f3f4f6; /* border-gray-100 */
}
.employee-stat-card:last-child {
  border-bottom: none;
}
.avatar {
  width: 2.5rem; /* w-10 */
  height: 2.5rem; /* h-10 */
  border-radius: 9999px; /* rounded-full */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  flex-shrink: 0;
}
.employee-info {
  flex-grow: 1;
  min-width: 0;
}
.progress-bar-bg {
  width: 100%;
  background-color: #e5e7eb; /* bg-gray-200 */
  border-radius: 9999px; /* rounded-full */
  height: 0.5rem; /* h-2 */
  margin-top: 0.25rem; /* mt-1 */
  overflow: hidden;
}
.progress-bar-fill {
  background-color: #10b981; /* bg-emerald-500 */
  height: 100%;
  border-radius: 9999px;
  transition: width 0.5s ease-in-out;
}
.timeline {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem; /* text-xs */
  color: #6b7280; /* text-gray-500 */
  margin-top: 0.25rem; /* mt-1 */
}
.employee-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.25rem;
}
.employee-list-item .avatar {
  width: 2rem; /* h-8 w-8 */
  height: 2rem;
  font-size: 0.875rem; /* text-sm */
}

/* --- ESTILOS PARA RESALTAR SECCIÓN DE SOPORTE --- */
#supportSection {
  transition: all 0.3s ease-in-out;
  border-radius: 0.75rem; /* rounded-xl */
  padding: 1.5rem; /* p-6 */
  border: 1px solid transparent;
}

/* Estado: Permiso concedido, pero sin sesión activa */
#supportSectionContainer.support-enabled #supportSection {
  background-color: #fef9c3; /* yellow-100 */
  border-color: #fde047; /* yellow-300 */
}
#supportSectionContainer.support-enabled h3 {
  color: #a16207; /* yellow-700 */
}

/* Estado: Sesión de soporte activa (técnico conectado) */
#supportSectionContainer.support-active #supportSection {
  background-color: #fee2e2; /* red-100 */
  border-color: #f87171; /* red-400 */
  animation: pulse-border 2s infinite;
}
#supportSectionContainer.support-active h3 {
  color: #b91c1c; /* red-700 */
}

@keyframes pulse-border {
  0% { border-color: #f87171; } /* red-400 */
  50% { border-color: #ef4444; } /* red-500 */
  100% { border-color: #f87171; } /* red-400 */
}

/* --- ESTILOS PARA INTERRUPTOR (TOGGLE) DE SOPORTE --- */
#supportToggle:checked ~ .dot {
  transform: translateX(1.5rem);
  background-color: #10b981; /* emerald-500 */
}
#supportToggle:checked ~ .block {
  background-color: #a7f3d0; /* emerald-200 */
}

/* --- NUEVO ESTILO PARA BOTONES DE FILTRO ACTIVOS --- */
.filter-btn-active {
  background-color: #dc2626 !important; /* red-600 */
  color: white !important;
  border-color: #b91c1c !important; /* red-700 */
}

/* --- SPINNER DE CARGA PARA BOTONES --- */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner-sm {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 0.6s linear infinite;
}

/* --- ESTILOS PARA ACCESO EXTERNO --- */
#readOnlyBanner {
    background-color: #f59e0b; /* amber-500 */
    color: #1f2937; /* gray-800 */
}

/* --- ESTILOS PARA INTERRUPTOR (TOGGLE) DE ACCESO EXTERNO --- */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: #22c55e; /* green-500 */
}
input:focus + .slider {
  box-shadow: 0 0 1px #22c55e;
}
input:checked + .slider:before {
  -webkit-transform: translateX(22px);
  -ms-transform: translateX(22px);
  transform: translateX(22px);
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}


@media (max-width: 640px) {
  #costHistoryContainer .accordion-header > span.text-lg {
    font-size: 1rem; /* Reduce de 'lg' a 'base' */
  }
  #costHistoryContainer .accordion-header span.text-md {
    font-size: 0.875rem; /* Reduce de 'md' a 'sm' */
  }
}

@media (max-width: 640px) {
    #loginView > .flex.items-center { /* Div del icono y título */
        margin-bottom: 1rem; /* Menos espacio debajo del título */
    }
    #loginView .text-2xl {
        font-size: 1.25rem; /* Título más pequeño */
    }
    #formLogin {
        margin-top: 1rem; /* Menos espacio sobre el formulario */
        padding-top: 1rem;
    }
    #formLogin > div {
         /* Reduce el espacio entre Usuario, Clave y Botón */
        margin-top: 0.75rem;
    }
}

/* Corrección para modales en pantallas pequeñas */
.modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 4rem); /* Altura máxima del 90% de la pantalla */
}

#infoModalContent, #legalModalContent, .modal-form-content {
    overflow-y: auto; /* Permite scroll vertical SOLO en el contenido */
    flex-shrink: 1;
    min-height: 0; /* Soluciona el problema de flexbox que impide encoger */
    -webkit-overflow-scrolling: touch; /* AÑADIDO: Activa el scroll nativo en iOS */
}

/* --- ESTILOS PARA LA NUEVA VISTA COMPACTA DEL DASHBOARD --- */
@media (max-width: 640px) {
    /* 
Ocultar elementos de la cabecera azul que ya no se usan 
    #appView > header.bg-sky-700 {
        display: none;
    }
    #appView > .text-center {
        display: none;
    }
*/
    
    /* Mostrar y estilizar la nueva cabecera compacta */
    #employee-info-header {
        display: block !important;
    }
    #btnSalir {
        display: block !important;
    }

    /* 6 y 7: Reorganizar Círculo de Fichaje y sus elementos */
    #dashboard-main-section {
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
    }
    #status-block {
        flex-basis: 25%;
        text-align: center;
    }
    #statusText {
        font-size: 1.1rem;
        line-height: 1.2;
        margin: 0;
    }
    #actionRingContainer {
        width: 10rem; /* 160px */
        height: 10rem;
    }
    #actionRingContent #ringLiveTime { font-size: 1.5rem; }
    #actionRingContent #ringTimer { font-size: 1.875rem; }
    #actionRingContent #ringActionButton {
        width: 6.5rem;
        padding: 0.5rem;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }
    #session-info-block {
        flex-basis: 25%;
        text-align: center;
        space-y: 0.5rem;
    }
    .session-info-box {
        padding: 0.25rem 0.5rem;
        min-width: unset;
        display: block !important; /* Asegurar que se vean en móvil */
        opacity: 1 !important;
    }
    .session-info-box p:first-child { font-size: 0.65rem; }
    .session-info-box p:last-child { font-size: 1rem; }

    #hoursSummaryText {
        font-size: 0.75rem;
        margin-top: 0.5rem;
    }

}




/* ============================================
   CORRECCIÓN DEFINITIVA PARA MÓVIL ≤ 640px ------------ TENGO DUDAS DE REFORZAR DEMASIADO
   Versión 2 columnas en botones
   ============================================ */

@media (max-width: 640px) {

    /* ------ TITULAR SUPERIOR (fecha del día) ------ */
    .top-date {
        font-size: 13px !important;
        font-weight: 400 !important;
        margin-bottom: 6px !important;
        line-height: 1.2 !important;
    }

    /* ------ CONTENEDOR GENERAL DE FILTROS ------ */
    .filters,
    .filter-actions-box,
    .filter-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    /* ------ FILA DE CONTROLES (inputs/select) ------ */
    .filter-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* ------ ELEMENTO INDIVIDUAL EN 2 COLUMNAS ------ */
    .filter-item,
    .filter-row > * {
        flex: 1 1 48% !important;
        min-width: 0 !important; /* Crítico para iPhone */
        max-width: 100% !important;
    }

    /* ------ INPUTS / SELECTS / FECHAS ------ */
    select,
    input[type="date"],
    input[type="text"],
    input[type="number"],
    input[type="search"] {
        width: 100% !important;
        padding: 6px 10px !important;
        font-size: 13px !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        height: auto !important;
    }

    /* ------ BOTONES PEQUEÑOS Y MEDIOS (2 columnas) ------ */
    .button-row,
    .filter-buttons,
    .cost-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .button-row button,
    .filter-buttons button,
    .cost-buttons button,
    button.action-button {
        flex: 1 1 48% !important;
        width: 100% !important;
        padding: 10px !important;
        font-size: 14px !important;
        min-width: 0 !important;
        height: auto !important;
    }

    /* ------ BOTONES GRANDES (Cargar / PDF / Añadir Fichaje) ------ */
    .action-button.large {
        flex: 1 1 48% !important; /* sigue en 2 columnas */
    }

    /* ------ SEGURIDAD GLOBAL ------ */
    .filters * {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }
}

/* ============================================
   FECHA SUPERIOR — MISMA FUENTE QUE ZONA HORARIA
   ============================================ */
#currentDateDisplayAdmin,
.top-date-display,
.current-date-label {
    font-size: 0.75rem !important;      /* igual a text-sm */
    font-weight: 400 !important;         /* igual que timezoneLabel */
    color: #4b5563 !important;           /* text-gray-600 */
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ============================================================
   FIX UNIVERSAL PARA MOVIL (≤ 640px)
   PRIORIDAD MÁXIMA PARA EVITAR SOLAPES Y FORZAR GRID
   ============================================================ */
@media (max-width: 640px) {

    /* Anula el flex-wrap de Tailwind y fuerza grid uniforme */
    .filter-actions-box > .flex {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* Todo input/select más pequeño y sin desbordar */
    .filter-actions-box input,
    .filter-actions-box select {
        width: 100% !important;
        padding: 0.35rem !important;
        font-size: 0.75rem !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Fechas SIEMPRE en la misma fila */
    .filter-actions-box input[type="date"] {
        grid-column: span 1 !important;
    }

    /* Grupos de botones SIEMPRE 2 por fila */
    .filter-actions-box .flex.items-center.rounded-md {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .filter-actions-box .flex.items-center.rounded-md button {
        width: 100% !important;
        height: auto !important;
        padding: 10px 4px !important;
        white-space: normal !important;
        text-align: center !important;
        font-size: 0.75rem !important;
    }

    /* Fix especial días festivos (fecha ocupa ancho completo) */
    #formFestivo input[type="date"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fix especial histórico costes → estructura vertical correcta */
    #costHistoryFilters .flex {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    #costHistoryFilters .month-year-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }

    #costHistoryFilters .cost-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }
}

/* ===== COLORES DE TARJETAS NUEVAS (MAÑANA) ===== */
.border-purple-500 {
  border-top-color: #8b5cf6 !important;
}

.border-blue-500 {
  border-top-color: #3b82f6 !important;
}

/* ===== REFORZAR GRID DEL DASHBOARD PARA 6 TARJETAS ===== */
#dashboardContent .stat-card-grid {
    display: grid;
          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
         grid-auto-rows: auto;
         gap: 16px;
}

@media (min-width: 640px) {
    #dashboardContent .stat-card-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ===== RESPONSIVE: TARJETAS MAÑANA ===== */
@media (max-width: 640px) {
    .stat-card-interactive h4 {
        font-size: 0.8rem !important;
    }
    .stat-card-interactive .stat-count {
        font-size: 1.5rem !important;
    }
}


/* ==========================================================
   FIX iPhone: horas del calendario admin se cortan
   - fuerza tamaño menor con clamp()
   - evita recorte horizontal por fuente grande
   ========================================================== */

/* General móvil (mejor que 1rem en iPhone) */
@media (max-width: 640px) {
  #adminCalendarGrid .calendar-cell .hours-number {
    font-size: 0.75rem !important;     /* 12px */
    line-height: 1 !important;         
    font-weight: 600 !important;
    letter-spacing: -0.02em;
    white-space: nowrap;
    display: block;
    max-width: 100%;
    text-align: center;
  }
}

/* iPhone/very small widths: aún más compacto */
@media (max-width: 430px) {
  #adminCalendarGrid .calendar-cell {
    min-height: 52px; /* un poco más compacto, reduce "corte" visual */
    padding: 1px;
  }

  #adminCalendarGrid .calendar-cell .hours-number {
    font-size: clamp(0.55rem, 2.4vw, 0.78rem) !important;
    line-height: 1.00 !important;
    letter-spacing: -0.02em; /* ayuda a que entren 4-5 caracteres */
  }
}


/* ==========================================================
   OVERRIDE FINAL (ADMIN) - iPhone: horas del calendario cortadas
   - Evita auto-escalado de fuentes en iOS Safari
   - Fuerza tamaño equivalente a EMPLEADO en móvil
   ========================================================== */

/* 1) iOS Safari puede auto-escalar textos: lo neutralizamos */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 2) Móvil: forzar horas más pequeñas y que no “salten” de ancho */
@media (max-width: 640px) {
  #adminCalendarGrid .calendar-cell .hours-number {
    font-size: clamp(0.52rem, 2.2vw, 0.68rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    display: block;
    max-width: 100%;
    text-align: center;
    letter-spacing: -0.03em;
    font-weight: 600 !important;

  }
}

/* 3) iPhone muy estrecho: un punto más de seguridad */
@media (max-width: 390px) {
  #adminCalendarGrid .calendar-cell .hours-number {
    font-size: 0.68rem !important;
  }
}

/* ==========================================================
   ADMIN TABS EN REJILLA (sin scroll lateral)
   ========================================================== */

#adminTabs.admin-tabs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0;
  overflow: visible !important;
}

#adminTabs.admin-tabs-grid .tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 0;
  white-space: normal;
  text-align: center;
  line-height: 1.15;
  padding: 0.55rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  background: #fff;
  font-size: 0.85rem;
}

#adminTabs.admin-tabs-grid .tab-btn span:first-child {
  overflow-wrap: anywhere;
}

#adminTabs.admin-tabs-grid .tab-btn.border-sky-500 {
  border-width: 2px;
  background: #f0f9ff;
}

#adminTabs.admin-tabs-grid .tab-btn.text-sky-600 {
  color: #0284c7;
}

#adminTabs.admin-tabs-grid .tab-btn.text-gray-500 {
  color: #6b7280;
}

#adminTabs.admin-tabs-grid .tab-btn:hover {
  background: #f8fafc;
}

#adminTabs.admin-tabs-grid .tab-info-icon::before {
  margin-left: 0;
  width: 1rem;
  height: 1rem;
  font-size: 0.72rem;
}

/* Tablet */
@media (min-width: 640px) {
  #adminTabs.admin-tabs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Desktop */
@media (min-width: 1024px) {
  #adminTabs.admin-tabs-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ==========================================================
   ADMIN TABS MÁS COMPACTOS (AJUSTE FINO)
   ========================================================== */

#adminTabs.admin-tabs-grid {
  gap: 0.4rem !important; /* antes 0.5rem */
}

#adminTabs.admin-tabs-grid .tab-btn {
  padding: 0.4rem 0.35rem !important;   /* antes ~0.55rem */
  font-size: 0.78rem !important;        /* antes 0.85rem */
  line-height: 1.1 !important;
  min-height: 34px;                     /* controla altura */
}

/* Icono info más pequeño */
#adminTabs.admin-tabs-grid .tab-info-icon::before {
  width: 0.85rem;
  height: 0.85rem;
  font-size: 0.65rem;
}

/* Ajuste adicional SOLO móvil */
@media (max-width: 640px) {
  #adminTabs.admin-tabs-grid {
    gap: 0.35rem !important;
  }

  #adminTabs.admin-tabs-grid .tab-btn {
    padding: 0.35rem 0.25rem !important;
    font-size: 0.75rem !important;
    min-height: 32px;
  }
}

/* ==========================================================
   ADMIN TABS ULTRA COMPACTOS (AJUSTE VERTICAL FINO)
   ========================================================== */

#adminTabs.admin-tabs-grid .tab-btn {
  padding-top: 0.28rem !important;
  padding-bottom: 0.28rem !important;
  padding-left: 0.3rem !important;
  padding-right: 0.3rem !important;

  font-size: 0.74rem !important;
  line-height: 1.05 !important;

  min-height: 30px; /* antes 32px */
}

/* Ajuste del texto interno (evita que “empuje” altura) */
#adminTabs.admin-tabs-grid .tab-btn span:first-child {
  line-height: 1.05 !important;
}

/* Ajuste icono info aún más compacto */
#adminTabs.admin-tabs-grid .tab-info-icon::before {
  width: 0.75rem;
  height: 0.75rem;
  font-size: 0.6rem;
  margin-left: 0.15rem;
}

/* Móvil aún más comprimido */
@media (max-width: 640px) {
  #adminTabs.admin-tabs-grid .tab-btn {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    font-size: 0.72rem !important;
    min-height: 28px;
  }
}

/* ==========================================================
   CABECERA SECUNDARIA (FECHA + TIMEZONE) MÁS DISCRETA
   ========================================================== */

#currentDateDisplayAdmin,
#headerTimezoneInfo {
  font-size: 0.68rem !important;   /* antes ~0.75rem */
  color: #6b7280 !important;       /* más tenue */
  line-height: 1.1 !important;
}

/* En móvil aún más ligera */
@media (max-width: 640px) {
  #currentDateDisplayAdmin,
  #headerTimezoneInfo {
    font-size: 0.65rem !important;
  }
}

/* Reducir presencia visual global de la fila */
#currentDateDisplayAdmin {
  font-weight: 400 !important;
}

#headerTimezoneInfo {
  opacity: 0.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================
   ADMIN DASHBOARD - TARJETAS MÁS COMPACTAS EN VERTICAL
   ========================================================== */

/* Reduce padding general de cada ficha */
#dashboardContent .stat-card,
#dashboardContent .stat-card-interactive {
  padding-top: 0.7rem !important;
  padding-bottom: 0.7rem !important;
}

/* Reduce hueco entre la línea superior de color y el título */
#dashboardContent .stat-card-title,
#dashboardContent .stat-card-interactive h4 {
  margin-top: 0.15rem !important;
  margin-bottom: 0.2rem !important;
  line-height: 1.15 !important;
}

/* Reduce hueco entre número principal y resto del contenido */
#dashboardContent .stat-card-number,
#dashboardContent .stat-card-interactive .stat-count {
  margin-top: 0.1rem !important;
  margin-bottom: 0.15rem !important;
  line-height: 1.05 !important;
}

/* Reduce espacio del texto pequeño inferior */
#dashboardContent .stat-card p.text-xs,
#dashboardContent .stat-card p.text-sm,
#dashboardContent .stat-card-interactive p.text-xs,
#dashboardContent .stat-card-interactive p.text-sm,
#dashboardContent .stat-card-interactive .text-xs,
#dashboardContent .stat-card-interactive .text-sm {
  margin-top: 0.1rem !important;
  margin-bottom: 0 !important;
  line-height: 1.15 !important;
}

/* Si dentro hay bloques apilados con space-y, los compacta */
#dashboardContent .space-y-1 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.15rem !important;
}

#dashboardContent .space-y-2 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.25rem !important;
}

#dashboardContent .space-y-3 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.35rem !important;
}

/* Móvil: todavía un poco más compacto */
@media (max-width: 640px) {
  #dashboardContent .stat-card,
  #dashboardContent .stat-card-interactive {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  #dashboardContent .stat-card-title,
  #dashboardContent .stat-card-interactive h4 {
    margin-top: 0.1rem !important;
    margin-bottom: 0.15rem !important;
  }

  #dashboardContent .stat-card-number,
  #dashboardContent .stat-card-interactive .stat-count {
    margin-top: 0.05rem !important;
    margin-bottom: 0.1rem !important;
  }
}



/* ==========================================================
   ADMIN DASHBOARD - ELIMINAR AIRE INFERIOR REAL
   ========================================================== */

#dashboardContent .stat-card,
#dashboardContent .stat-card-interactive {
  min-height: unset !important;
  height: auto !important;
}

/* Si el contenido interno está en columna con separación forzada */
#dashboardContent .stat-card > div,
#dashboardContent .stat-card-interactive > div {
  justify-content: flex-start !important;
  align-items: flex-start;
  height: auto !important;
}

/* Último texto inferior: quitar margen que pueda empujar */
#dashboardContent .stat-card p:last-child,
#dashboardContent .stat-card-interactive p:last-child,
#dashboardContent .stat-card .text-xs:last-child,
#dashboardContent .stat-card-interactive .text-xs:last-child,
#dashboardContent .stat-card .text-sm:last-child,
#dashboardContent .stat-card-interactive .text-sm:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.1 !important;
}

/* Si hay bloques con separación vertical automática */
#dashboardContent .stat-card .space-y-1 > :last-child,
#dashboardContent .stat-card .space-y-2 > :last-child,
#dashboardContent .stat-card .space-y-3 > :last-child,
#dashboardContent .stat-card-interactive .space-y-1 > :last-child,
#dashboardContent .stat-card-interactive .space-y-2 > :last-child,
#dashboardContent .stat-card-interactive .space-y-3 > :last-child {
  margin-bottom: 0 !important;
}


/* ==========================================================
   FICHAJES - TABLA MÁS COMPACTA EN MÓVIL
   ========================================================== */

@media (max-width: 640px) {

  /* Tabla de fichajes: letra más pequeña y compacta */
  #fichajesContent table,
  #employeeFichajesContent table,
  #fichajesTable,
  #employeeFichajesTable {
    font-size: 0.78rem !important;
    table-layout: auto;
    border-collapse: collapse;
  }

  /* Encabezados y celdas: menos aire lateral */
  #fichajesContent th,
  #fichajesContent td,
  #employeeFichajesContent th,
  #employeeFichajesContent td,
  #fichajesTable th,
  #fichajesTable td,
  #employeeFichajesTable th,
  #employeeFichajesTable td {
    padding: 0.38rem 0.38rem !important;
    line-height: 1.15 !important;
    vertical-align: top;
  }

  /* Encabezados algo más pequeños para que no empujen */
  #fichajesContent th,
  #employeeFichajesContent th,
  #fichajesTable th,
  #employeeFichajesTable th {
    font-size: 0.68rem !important;
    white-space: nowrap;
    letter-spacing: -0.01em;
  }

  /* Columnas largas: permitir 2 líneas */
  #fichajesContent td,
  #employeeFichajesContent td,
  #fichajesTable td,
  #employeeFichajesTable td {
    white-space: nowrap;
  }

  /* Fecha/hora y OT pueden romper en dos líneas */
  #fichajesContent td.fecha-hora,
  #fichajesContent td.ot-col,
  #employeeFichajesContent td.fecha-hora,
  #employeeFichajesContent td.ot-col,
  #fichajesTable td.fecha-hora,
  #fichajesTable td.ot-col,
  #employeeFichajesTable td.fecha-hora,
  #employeeFichajesTable td.ot-col {
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.1 !important;
  }

  /* Si no tiene clases puestas, al menos deje la OT y fecha compactas por posición típica */
  #fichajesContent td:nth-child(3),
  #fichajesContent td:nth-child(4),
  #employeeFichajesContent td:nth-child(3),
  #employeeFichajesContent td:nth-child(4),
  #fichajesTable td:nth-child(3),
  #fichajesTable td:nth-child(4),
  #employeeFichajesTable td:nth-child(3),
  #employeeFichajesTable td:nth-child(4) {
    white-space: normal;
    line-height: 1.1 !important;
  }

  /* ID y TIPO más estrechos */
  #fichajesContent th:nth-child(1),
  #fichajesContent td:nth-child(1),
  #employeeFichajesContent th:nth-child(1),
  #employeeFichajesContent td:nth-child(1),
  #fichajesTable th:nth-child(1),
  #fichajesTable td:nth-child(1),
  #employeeFichajesTable th:nth-child(1),
  #employeeFichajesTable td:nth-child(1) {
    width: 2.3rem;
    min-width: 2.3rem;
    text-align: center;
  }

  #fichajesContent th:nth-child(2),
  #fichajesContent td:nth-child(2),
  #employeeFichajesContent th:nth-child(2),
  #employeeFichajesContent td:nth-child(2),
  #fichajesTable th:nth-child(2),
  #fichajesTable td:nth-child(2),
  #employeeFichajesTable th:nth-child(2),
  #employeeFichajesTable td:nth-child(2) {
    width: 3.2rem;
    min-width: 3.2rem;
  }

  /* Fecha/hora más compacta */
  #fichajesContent th:nth-child(3),
  #fichajesContent td:nth-child(3),
  #employeeFichajesContent th:nth-child(3),
  #employeeFichajesContent td:nth-child(3),
  #fichajesTable th:nth-child(3),
  #fichajesTable td:nth-child(3),
  #employeeFichajesTable th:nth-child(3),
  #employeeFichajesTable td:nth-child(3) {
    min-width: 5.3rem;
    max-width: 5.6rem;
  }

  /* OT/cliente: permitir columna más estrecha con salto */
  #fichajesContent th:nth-child(4),
  #fichajesContent td:nth-child(4),
  #employeeFichajesContent th:nth-child(4),
  #employeeFichajesContent td:nth-child(4),
  #fichajesTable th:nth-child(4),
  #fichajesTable td:nth-child(4),
  #employeeFichajesTable th:nth-child(4),
  #employeeFichajesTable td:nth-child(4) {
    min-width: 4.8rem;
    max-width: 5.4rem;
  }

  /* Filas de total día: que respiren bien */
  #fichajesContent tr[class*="total"] td,
  #employeeFichajesContent tr[class*="total"] td,
  #fichajesTable tr[class*="total"] td,
  #employeeFichajesTable tr[class*="total"] td {
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
    font-size: 0.8rem !important;
  }
}

@media (max-width: 640px) {
  .ot-col {
    max-width: 5rem !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

/* ==========================================================
   TABLA FICHAJES - COMPACTA EN MÓVIL
   ========================================================== */

@media (max-width: 640px) {
  .fichajes-table {
    font-size: 0.78rem !important;
  }

  .fichajes-table th,
  .fichajes-table td {
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
    line-height: 1.12 !important;
    vertical-align: top;
  }

  .fichajes-table th {
    font-size: 0.66rem !important;
    letter-spacing: -0.01em;
  }

  .fichajes-table .col-id {
    width: 2.2rem;
    min-width: 2.2rem;
    text-align: center;
  }

  .fichajes-table .col-type {
    width: 3.2rem;
    min-width: 3.2rem;
  }

  .fichajes-table .col-datetime {
    min-width: 5.3rem;
    max-width: 5.6rem;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .fichajes-table .col-location {
    width: 2.6rem;
    min-width: 2.6rem;
    text-align: center;
  }

  .fichajes-table .col-hours {
    width: 3rem;
    min-width: 3rem;
    white-space: nowrap;
  }

  .fichajes-table .col-ot {
    min-width: 4.8rem;
    max-width: 5.4rem;
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.08 !important;
  }

  .fichajes-table .col-entry-used {
    min-width: 5rem;
    max-width: 5.5rem;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .fichajes-table .col-notes {
    min-width: 4.5rem;
    max-width: 5.2rem;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .fichajes-table .col-actions {
    min-width: 3.5rem;
    white-space: nowrap;
  }
}



/* ==========================================================
   CLIENTES / OTs - CONTENCIÓN REAL EN MÓVIL
   Fuerza que TODO el contenido entre en el ancho del viewport
   ========================================================== */

@media (max-width: 640px) {

  /* ----- CONTENEDOR GENERAL DEL TAB ----- */
  #clientsContent,
  #workOrdersContent {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Todo bloque interno debe poder encoger */
  #clientsContent *,
  #workOrdersContent * {
    box-sizing: border-box;
    min-width: 0;
  }

  /* ----- TARJETAS / SECCIONES ----- */
  #clientsContent > .bg-white,
#workOrdersContent > .bg-white,
#clientsContent .stat-card,
#workOrdersContent .stat-card,
#clientsContent section,
#workOrdersContent section,
#clientsContent .rounded-lg,
#workOrdersContent .rounded-lg,
#clientsContent .rounded-xl,
#workOrdersContent .rounded-xl {
    width: 100% !important;
    max-width: 100% !important;
}

  /* ----- FILAS FLEX: convertir en columna para no empujar ancho ----- */
  #clientsContent .flex,
  #workOrdersContent .flex {
    min-width: 0 !important;
  }

  /* Filas típicas de cabecera/filtros/botones */
  #clientsContent .flex.justify-between,
  #workOrdersContent .flex.justify-between,
  #clientsContent .flex.items-center,
  #workOrdersContent .flex.items-center,
  #clientsContent .flex.gap-2,
  #workOrdersContent .flex.gap-2,
  #clientsContent .flex.gap-3,
  #workOrdersContent .flex.gap-3,
  #clientsContent .flex.gap-4,
  #workOrdersContent .flex.gap-4 {
    flex-wrap: wrap !important;
  }

  /* ----- FORMULARIOS: siempre contenidos ----- */
  #clientsContent form,
  #workOrdersContent form {
    width: 100% !important;
    max-width: 100% !important;
  }

  #clientsContent form > div,
  #workOrdersContent form > div,
  #clientsContent .grid,
  #workOrdersContent .grid {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Grids de formularios a 1 columna por defecto */
  #clientsContent .grid,
  #workOrdersContent .grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Si quiere mantener 2 columnas en algunos bloques cortos */
  #clientsContent .grid.grid-cols-2,
  #workOrdersContent .grid.grid-cols-2,
  #clientsContent .sm\\:grid-cols-2,
  #workOrdersContent .sm\\:grid-cols-2 {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ----- INPUTS / SELECTS / TEXTAREAS ----- */
  #clientsContent input,
  #clientsContent select,
  #clientsContent textarea,
  #workOrdersContent input,
  #workOrdersContent select,
  #workOrdersContent textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 0.82rem !important;
    padding: 0.55rem 0.65rem !important;
  }

  /* ----- BOTONERAS: dentro del ancho móvil ----- */
  #clientsContent .button-row,
  #workOrdersContent .button-row,
  #clientsContent .action-row,
  #workOrdersContent .action-row,
  #clientsContent .cost-buttons,
  #workOrdersContent .cost-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  #clientsContent button,
  #workOrdersContent button,
  #clientsContent .btn,
  #workOrdersContent .btn {
    max-width: 100% !important;
  }

  /* Cabeceras con título + botones: partir en 2 filas */
  #clientsContent .section-header,
  #workOrdersContent .section-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem !important;
  }

  /* Si no hay clase section-header, atacar patrones típicos */
  #clientsContent .bg-white > .flex:first-child,
  #workOrdersContent .bg-white > .flex:first-child {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 0.6rem !important;
  }

  /* Grupo de botones de arriba a la derecha */
  #clientsContent .bg-white > .flex:first-child > div:last-child,
  #workOrdersContent .bg-white > .flex:first-child > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  /* ----- TABLAS: solo la tabla puede scrollear horizontal ----- */
  #clientsContent .table-wrapper,
  #workOrdersContent .table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  #clientsContent table,
  #workOrdersContent table {
    width: 100% !important;
    min-width: 560px !important;   /* bastante más razonable */
    max-width: none !important;
    table-layout: auto !important;
  }

  #clientsContent th,
  #clientsContent td,
  #workOrdersContent th,
  #workOrdersContent td {
    padding: 0.42rem 0.45rem !important;
    font-size: 0.72rem !important;
    line-height: 1.15 !important;
    vertical-align: top !important;
  }

  #clientsContent th,
  #workOrdersContent th {
    font-size: 0.64rem !important;
    white-space: nowrap !important;
    letter-spacing: -0.01em;
  }

  #clientsContent td,
  #workOrdersContent td {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Última columna con acciones en vertical */
  #clientsContent td:last-child,
  #workOrdersContent td:last-child {
    white-space: normal !important;
  }

  #clientsContent td:last-child .action-stack,
  #workOrdersContent td:last-child .action-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.2rem !important;
  }
}


/* ==========================================================
   CLIENTES / OTs - FILTROS MÁS LIMPIOS EN MÓVIL
   ========================================================== */

@media (max-width: 640px) {
  #clientsContent .filter-actions-box,
  #workOrdersContent .filter-actions-box {
    border: 1px solid #bae6fd !important;
    border-radius: 0.5rem !important;
    padding: 0.9rem !important;
    box-shadow: 0 0 8px rgba(14, 165, 233, 0.08) !important;
    overflow: visible !important;
  }

  #clientsContent .filter-actions-box h4,
  #workOrdersContent .filter-actions-box h4 {
    margin-bottom: 0.75rem !important;
  }

  #clientsContent .filter-actions-box .grid,
  #workOrdersContent .filter-actions-box .grid {
    gap: 0.85rem !important;
  }

  #clientsContent .filter-actions-box .flex.flex-wrap,
  #workOrdersContent .filter-actions-box .flex.flex-wrap {
    gap: 0.6rem !important;
    margin-top: 0.85rem !important;
  }
}


/* ==========================================================
   CLIENTES / OTs - TABLAS CON SCROLL HORIZONTAL REAL
   ========================================================== */

@media (max-width: 640px) {
  #clientsContent .table-wrapper,
  #workOrdersContent .table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative;
  }

  /* El contenedor interno que recibe la tabla NO debe recortar */
  #listaClientesOt,
  #listaOrdenesTrabajo {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
  }

  /* La tabla debe poder ser más ancha que el viewport */
  #clientsContent table,
  #workOrdersContent table {
    width: max-content !important;
    min-width: 720px !important;
    max-width: none !important;
    table-layout: auto !important;
  }

  /* Celdas compactas pero legibles */
  #clientsContent th,
  #clientsContent td,
  #workOrdersContent th,
  #workOrdersContent td {
    padding: 0.45rem 0.55rem !important;
    font-size: 0.74rem !important;
    line-height: 1.15 !important;
    vertical-align: top !important;
  }

  /* Algunas columnas largas sí pueden partir */
  #workOrdersContent td:nth-child(3),
  #workOrdersContent td:nth-child(4),
  #clientsContent td:nth-child(1),
  #clientsContent td:nth-child(2) {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Acciones verticales si hay stack */
  #clientsContent td:last-child,
  #workOrdersContent td:last-child {
    white-space: normal !important;
  }

  #clientsContent td:last-child .action-stack,
  #workOrdersContent td:last-child .action-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.2rem !important;
  }
}



/* ==========================================================
   FILA TOTAL DÍA - FICHAJES
   ========================================================== */

.total-dia-row td {
  background-color: #fef2f2 !important;   /* red-50 */
  color: #b91c1c !important;              /* red-700 */
  border-top: 2px solid #ef4444 !important;
  border-bottom: 2px solid #ef4444 !important;
}

.total-dia-row td:first-child {
  border-left: 2px solid #ef4444 !important;
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.total-dia-row td:last-child {
  border-right: 2px solid #ef4444 !important;
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.total-dia-row .total-dia-hours {
  text-align: right !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

.total-dia-row .total-dia-empty {
  color: transparent !important;
}

/* móvil: que siga viéndose claro */
@media (max-width: 640px) {
  .total-dia-row td {
    padding-top: 0.42rem !important;
    padding-bottom: 0.42rem !important;
    font-size: 0.78rem !important;
  }

  .total-dia-row .total-dia-hours {
    font-size: 0.8rem !important;
  }
}


@media (max-width: 640px) and (min-width: 390px) {
  #adminTabs.admin-tabs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #adminTabs.admin-tabs-grid .tab-btn {
    font-size: 0.68rem !important;
    padding: 0.22rem 0.2rem !important;
    min-height: 26px !important;
    line-height: 1.0 !important;
  }

  #adminTabs.admin-tabs-grid .tab-info-icon::before {
    width: 0.68rem !important;
    height: 0.68rem !important;
    font-size: 0.54rem !important;
  }
}




/* ==========================================================
   1) AJUSTES FICHAJES -> MISMA TIPOGRAFÍA QUE FICHAJES
   ========================================================== */

#tblAjustes table {
  width: 100%;
  border-collapse: collapse;
}

#tblAjustes thead th {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;      /* igual filosofía que fichajes */
  font-weight: 500;
  text-transform: uppercase;
  color: #6b7280;
  text-align: left;
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

#tblAjustes tbody td {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;     /* text-sm */
  line-height: 1.2;
  vertical-align: top;
}

/* Si alguna celda de justificación o texto largo empuja demasiado */
#tblAjustes td {
  overflow-wrap: anywhere;
}

/* ==========================================================
   2) CLIENTES / OTs -> MISMO ANCHO VISUAL QUE EL RESTO
   SOLO ESCRITORIO / TABLET GRANDE
   ========================================================== */

@media (min-width: 641px) {
  #clientsContent,
  #workOrdersContent {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Todas las secciones internas igual de contenidas que las demás pestañas */
  #clientsContent > section,
  #workOrdersContent > section,
  #clientsContent > div,
  #workOrdersContent > div {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  /* Resúmenes superiores */
  #clientsContent .stat-card,
  #workOrdersContent .stat-card {
    width: 100%;
    box-sizing: border-box;
  }

  /* Caja principal blanca */
  #clientsContent .bg-white,
  #workOrdersContent .bg-white {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Tablas dentro del ancho del panel, no a pantalla completa */
  #clientsContent .table-wrapper,
  #workOrdersContent .table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
  }

  #clientsContent table,
  #workOrdersContent table {
    width: 100%;
    min-width: 0;
    table-layout: auto;
  }
}

/* ==========================================================
   ADMIN OTs - FILTROS RESPONSIVE LIMPIOS
   ========================================================== */

/* FILTROS PRINCIPALES */
#ot-admin-main-filters {
  display: grid;
  gap: 0.75rem;
}

/* PC: meter lo máximo por línea */
@media (min-width: 1024px) {
  #ot-admin-main-filters {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: end;
  }

  #ot-admin-main-filters .ot-filter-item {
    min-width: 0;
  }

  #ot-admin-main-filters .ot-filter-item-client {
    grid-column: span 1;
  }

  #ot-admin-main-filters .ot-filter-item-search {
    grid-column: span 1;
  }
}

/* Tablet: 3 por fila */
@media (min-width: 641px) and (max-width: 1023px) {
  #ot-admin-main-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #ot-admin-main-filters .ot-filter-item-client,
  #ot-admin-main-filters .ot-filter-item-search {
    grid-column: span 3;
  }
}

/* Móvil: mínimo 2 por fila */
@media (max-width: 640px) {
  #ot-admin-main-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #ot-admin-main-filters .ot-filter-item-client,
  #ot-admin-main-filters .ot-filter-item-search {
    grid-column: span 2;
  }
}


/* ==========================================================
   ADMIN OTs - BOTONES RÁPIDOS FECHA
   ========================================================== */

/* Escritorio y tablet */
@media (min-width: 641px) {
  #ot-admin-date-quick-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    align-items: center !important;
  }

  #ot-admin-date-quick-filters > div {
    display: flex !important;
    width: auto !important;
  }

  #ot-admin-date-quick-filters > div button {
    width: auto !important;
    flex: 0 0 auto !important;
  }

  #btnOtLimpiar {
    width: auto !important;
  }
}

/* Móvil */
@media (max-width: 640px) {
  #ot-admin-date-quick-filters {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  #ot-admin-date-quick-filters > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    width: 100% !important;
  }

  #ot-admin-date-quick-filters > div button {
    width: 100% !important;
    min-width: 0 !important;
    flex: unset !important;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
    white-space: normal !important;
    text-align: center !important;
  }

  #btnOtLimpiar {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}

/* ==========================================================
   RESÚMENES SUPERIORES EN MÓVIL: SOLO LAS TARJETAS DE RESUMEN
   ========================================================== */

@media (max-width: 640px) {

  /* Clientes: 2 en una fila */
  #clientsContent > section:first-child > div.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
    align-items: stretch !important;
  }

  /* OTs: 4 en una fila */
  #workOrdersContent > section:first-child > div.grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
    align-items: stretch !important;
  }

  /* Empresa: solo el grid del resumen */
  #companyContent > section > section:first-child > div.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
    align-items: stretch !important;
  }

  /* Empleados: solo el grid del resumen */
  #employeesContent > section:first-child > div.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
    align-items: stretch !important;
  }

  /* tarjetas de resumen únicamente */
  #clientsContent > section:first-child .stat-card,
  #workOrdersContent > section:first-child .stat-card,
  #companyContent > section > section:first-child .stat-card,
  #employeesContent > section:first-child .stat-card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0.7rem 0.7rem !important;
    border-radius: 0.6rem !important;
  }

  /* títulos */
  #clientsContent > section:first-child .stat-card-title,
  #workOrdersContent > section:first-child .stat-card-title,
  #companyContent > section > section:first-child .stat-card-title,
  #employeesContent > section:first-child .stat-card-title {
    font-size: 0.72rem !important;
    line-height: 1.05 !important;
    margin-bottom: 0.2rem !important;
    word-break: break-word;
  }

  /* números */
  #clientsContent > section:first-child .stat-card-number,
  #workOrdersContent > section:first-child .stat-card-number,
  #companyContent > section > section:first-child .stat-card-number,
  #employeesContent > section:first-child .stat-card-number {
    font-size: 1.15rem !important;
    line-height: 1 !important;
  }
}

.toggle-input:checked ~ .dot {
  transform: translateX(1.5rem);
  background-color: #10b981;
}

.toggle-input:checked ~ .block {
  background-color: #a7f3d0;
}

.toggle-click-ui {
  pointer-events: none;
}

#e_terminal_activo:checked ~ .dot {
  transform: translateX(1.5rem);
  background-color: #10b981;
}

#e_terminal_activo:checked ~ .block {
  background-color: #a7f3d0;
}