/* app.css - Versión 4.0 
/* ==========================================================================
   1. VARIABLES DE COLOR PARA LOS TEMAS
   ========================================================================== */

/* [TEMA CLARO] - Por defecto */
:root {
  --bg-color: #f8f9fa;               /* Fondo general muy claro */
  --text-color: #212529;             /* Texto principal oscuro */
  --text-color-light: #555;          /* Texto secundario/grisáceo */
  
  --splash-bg-color: #ffffff;        /* Fondo de la pantalla de bienvenida */
  --logo-filter: invert(0%);         /* Filtro para el logo (en claro no se invierte) */
  
  --header-bg-color: #ffffff;        /* Fondo de la cabecera */
  --header-shadow: rgba(0, 0, 0, 0.05); /* Sombra de la cabecera */

  --panel-bg: #ffffff;               /* Fondo de los paneles y tarjetas */
  --panel-border: #e0e0e0;           /* Borde de los paneles */
  --user-zone-bg: #fff6eb;           /* Naranja Pálido para tema claro */

  --table-zebra-bg: var(--user-zone-bg);  /* <-- ¡Usa el naranja suave que querías! */
  --table-hover-bg: #e8f0ff;             /* Color para el hover (azul muy claro) */
  --table-focus-bg: rgba(13, 110, 253, 0.15); /* Color para la celda editada */

  --button-primary-bg: #0b5ed7;      /* Fondo de botones primarios */
  --button-primary-text: #ffffff;    /* Texto de botones primarios */
  --button-danger-bg: #dc3545;       /* Fondo de botones de peligro */
  --button-danger-text: #ffffff;     /* Texto de botones de peligro */
  --button-bg-color: #f0f0f0;         /* Fondo para botones de utilidad */
  --button-hover-bg-color: #e0e0e0;  /* Hover para esos botones */

  --nav-bg: #ffffff;                 /* Fondo de la barra de navegación */
  --nav-text: #495057;               /* Texto de los botones de navegación */
  --nav-active-bg: #dee2e6;          /* Fondo del botón de navegación activo */
  --nav-active-text: #000;           /* Texto del botón de navegación activo */
  --icon-filter: invert(0%);         /* Filtro para los iconos de navegación */

  /* Colores específicos de la app */
  --peticion-item-bg: #ffffff;
  --peticion-item-border: #e0e0e0;
  --peticion-revisada-bg: #f0f0f0;
  --peticion-revisada-text: #888;
  --day-cell-bg: #e8f0ff;
  --saturday-bg: rgba(163, 193, 255, 0.65);
  --sunday-holiday-bg: rgba(255, 179, 179, 0.45);

        --primary-color: #0d6efd;          /* Azul corporativo */
        --primary-color-dark: #0b5ed7;     /* Azul oscuro para hover */
        --green-color: #198754;            /* Verde para acciones positivas */
        --green-color-dark: #157347;       /* Verde oscuro para hover */
        --red-color: #dc3545;              /* Rojo para acciones de peligro */
        --red-color-dark: #bb2d3b;         /* Rojo oscuro para hover */
}

/* [TEMA OSCURO] - Se activa cuando body tiene el atributo data-theme="dark" */
[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --text-color-light: #aaa;

  --splash-bg-color: #121212;
  --logo-filter: invert(100%);
  
  --header-bg-color: #1f1f1f;
  --header-shadow: rgba(255, 255, 255, 0.05);
  
  --panel-bg: #1e1e1e;
  --panel-border: #333;
  --user-zone-bg: var(--panel-bg); /* Usa el fondo de panel oscuro */

  --table-zebra-bg: #2c2c2c;       /* <-- Gris sutil para el efecto cebra oscuro */
  --table-hover-bg: #343a40;       /* Color para el hover (gris más claro) */
  --table-focus-bg: rgba(13, 110, 253, 0.2); /* Color para la celda editada */

  --button-primary-bg: #0d6efd;
  --button-danger-bg: #e53935;
  --button-bg-color: #555;            /* Fondo para botones de utilidad */
  --button-hover-bg-color: #666;      /* Hover para esos botones */
  
  --nav-bg: #1f1f1f;
  --nav-text: #adb5bd;
  --nav-active-bg: #343a40;
  --nav-active-text: #fff;
  --icon-filter: invert(100%) brightness(0.8);
  
  /* Colores específicos de la app */
  --peticion-item-bg: #2c2c2c;
  --peticion-item-border: #444;
  --peticion-revisada-bg: #2a2a2a;
  --peticion-revisada-text: #666;
  --day-cell-bg: #1c2a38;
  --saturday-bg: #2a3a50;
  --sunday-holiday-bg: #4d2a2a;

  --primary-color: #3b82f6;     /* Azul corporativo (versión clara para modo oscuro) */
  --primary-color-dark: #2563eb;     /* Azul más intenso para hover */
  --green-color: #22c55e;            /* Verde (versión clara) */
  --green-color-dark: #16a34a;       /* Verde más intenso para hover */
  --red-color: #ef4444;              /* Rojo (versión clara) */
  --red-color-dark: #dc2626;         /* Rojo más intenso para hover */
}

/* --- CONFIGURACIÓN GENERAL --- */
body {
    font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--bg-color); /* VARIABLE APLICADA */
  color: var(--text-color);         /* VARIABLE APLICADA */
  transition: background-color 0.3s, color 0.3s; /* Transición suave para el cambio de tema */
}

/* Oculta elementos que no deben verse al inicio */
.oculto {
  display: none !important;
}

/* Animación de entrada suave para el calendario */
.fade-in-up {
  opacity: 0;
  transform: translateY(18px);
  animation: fadeInUp 0.45s ease-out forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* --- SPLASH --- */
.splash {
  /* Propiedades para que flote y se posicione por encima de todo */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;

  /* Propiedades que ya tenías para centrar el logo */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--splash-bg-color);
  height: 100vh;
  
  /* Transición mejorada para que se oculte por completo */
  transition: opacity 0.5s ease-out, visibility 0s 0.5s;
  visibility: visible;
}

.logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;    /* importante */
}

.logo-img {
  width: 65vw;       /* Tamaño grande relativo a pantalla */
  max-width: 500px;  /* Límite para móviles grandes tipo Xiaomo 15T Pro */
  filter: var(--logo-filter); /* LÍNEA AÑADIDA */
  transition: filter 0.3s;    /* LÍNEA AÑADIDA */
  height: auto;
  display: block;
  margin: 0 auto;
}

#splash .logo-img {
  animation: logo-pop 0.6s ease forwards;
}

@keyframes logo-pop {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}


.slogan {
  font-size: 1.2em;
  text-align: center;
  margin-top: 10px;
}

/* --- APP PRINCIPAL --- */
#app {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding-bottom: 140px; /* ← ADICIÓN: reserva espacio real bajo todo el contenido */
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: #0b5ed7;
  color: white;
  border-radius: 0 0 10px 10px;
}

#app-title {
  margin: 0;
  font-size: 1.5em;
}

/* Estilo para el botón de cambio de tema y otros botones de icono */
.icon-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.4em;
  cursor: pointer;
}

/* --- CONTENIDO PRINCIPAL --- */
.content {
  padding: 15px;
  text-align: center;
}

.content p {
  text-align: center;
  margin-top: 0;
  margin-bottom: 15px;
}

/* Centrado adicional de las frases principales */
#splash .slogan,
.content p {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* --- BOTONES DE CONTROL DE MES --- */
.calendar-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.calendar-controls button {
  background-color: #0b5ed7;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 0.9em;
  transition: 0.2s;
}

.calendar-controls button:hover {
  background-color: #084bb8;
}

/* --- BOTONES DE CADENCIA --- */
#btn-apply-cadence, 
#btn-clear-cadence {
  background-color: #0b5ed7;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 8px 16px;
  margin: 5px;
  font-size: 0.95em;
  cursor: pointer;
  transition: 0.2s ease;
}

#btn-apply-cadence:hover, 
#btn-clear-cadence:hover {
  background-color: #084bb8;
}

/* Contenedor para botones de aplicar/limpiar cadencia */
.cadence-button-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap; /* Asegura que se apilen si no hay espacio */
}

/* --- CALENDARIO --- */
#calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-top: 15px;
  margin-bottom: 70px; /* espacio fijo para barra inferior visual */
}

.day-cell {
  background-color: var(--day-cell-bg); /* VARIABLE APLICADA */
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  padding: 5px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 70px;
}

.day-label {
  font-weight: bold;
  margin-bottom: 4px;
}
#calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-weight: 600;
  margin-top: 12px;
  margin-bottom: 4px;
  color: #333;
}

#calendar-weekdays div {
  padding: 6px 0;
  background-color: #e6eefc; /* un gris-azul suave */
  border-radius: 6px;
  font-size: 0.9em;
}


/* --- COLORES DE DÍAS ESPECIALES --- */
.saturday {
  background-color: var(--saturday-bg); /* VARIABLE APLICADA */
}

.sunday, 
.holiday {
  background-color: var(--sunday-holiday-bg); /* VARIABLE APLICADA */
}

/* --- TURNOS --- */
.shifts-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}

.shifts-row {
  display: flex;
  width: 100%;
  flex: 1;
}

/* Ajuste M y T más altos (ocupando mitad superior) y N la inferior */
.shift-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex: 1;
  height: 100%;
  width: 100%;
}

.shift-container.night {
  height: 50%;
  width: 100%;
  margin-top: 2px;
}

.shift-cell {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85em;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000; /* texto negro */
  user-select: text;
}

/* Colores de fondo por defecto de M/T/N según tipo de día */
.day-cell:not(.saturday):not(.sunday):not(.holiday) .shift-cell {
  background-color: #e8f0ff; /* azul suave para días laborales */
}

.day-cell.saturday .shift-cell {
  background-color: rgba(163,193,255,0.65); /* azul sábado */
}

.day-cell.sunday .shift-cell,
.day-cell.holiday .shift-cell {
  background-color: rgba(255,179,179,0.45); /* rosa festivo */
}

/* --- Paleta de colores editables --- */
:root {
  --color-laboral: #e8f0ff;
  --color-saturday: rgba(163,193,255,0.65);
  --color-sunday: rgba(255,179,179,0.45);
}

/*
   ==========================================================================
   ESTILO DEL PUNTO DE EDICIÓN DE COLOR (HANDLE) - v3 (Estilo anterior, tamaño reducido)
   ==========================================================================
*/

/* Contenedor relativo para posicionar el handle */
.day-cell {
  position: relative;
}

/* REEMPLAZAR ESTE BLOQUE EN APP.CSS */

.color-handle {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translate(-50%);
  height: 12px;
  width: 24px; /* Un poco más ancho para que sea más fácil de tocar en móvil */
  font-size: 10px;
  line-height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px; /* Un rectángulo redondeado es más fácil de pulsar */
  opacity: 0.28; /* Opacidad por defecto, controlada ahora por CSS */
  cursor: pointer;
  z-index: 10;
  padding: 0;
  transition: opacity 0.2s ease;
}

/* Efecto hover solo para escritorio */
@media (hover: hover) {
  .color-handle:hover {
    opacity: 0.6;
  }
}

/* --- CAJÓN DE LICENCIAS --- */
#licencias-container {
  margin-top: 20px;
  margin-bottom: 20px; /* ahora el espacio real lo deja #app padding-bottom */
  padding: 10px 15px;
}

.licencia-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--panel-bg); /* VARIABLE APLICADA */
  border: 1px solid var(--panel-border); /* VARIABLE APLICADA */
  border-radius: 8px;
  margin-bottom: 6px;
  padding: 8px 10px;
  transition: background-color 0.3s, border-color 0.3s;
}

.licencia-nombre {
  flex: 1;
  text-align: left;
  font-weight: 500;
  color: var(--text-color); /* VARIABLE APLICADA */
}

.licencia-cantidad {
  width: 40px;
  text-align: center;
  margin: 0 10px;
  padding: 3px;
  border-radius: 6px;
  border: 1px solid var(--panel-border); /* VARIABLE APLICADA */
  background-color: var(--bg-color);     /* VARIABLE APLICADA */
  color: var(--text-color);              /* VARIABLE APLICADA */
}


.licencia-color {
  margin-left: auto;
  cursor: pointer;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
}

/* --- NAVEGACIÓN INFERIOR --- */
.bottom-nav {
  display: flex;
  justify-content: space-around;
  padding-top: 10px;
  padding-bottom: 40px !important;
  background-color: var(--nav-bg); /* VARIABLE APLICADA */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background-color 0.3s;
}

.nav-btn {
  background: none;
  border: none;
  color: var(--nav-text); /* VARIABLE APLICADA */
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  flex-grow: 1;
  text-align: center;
  transition: background-color 0.2s, color 0.2s;
}

.nav-btn.active {
  background-color: var(--nav-active-bg); /* VARIABLE APLICADA */
  color: var(--nav-active-text);         /* VARIABLE APLICADA */
}

/* ---------------------- MODAL CADENCIA (translúcido, centrado) ---------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(24,24,24,0.42); /* translúcido gris suave */
  z-index: 1000;
  transition: opacity .18s ease;
}

.modal-card {
  width: 90%;
  max-width: 520px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  transform-origin: center center;
  animation: modalIn .18s ease both;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

.modal-section { margin: 10px 0; }
.modal-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.modal-label { display:block; font-weight:600; margin-bottom:6px; text-align:left; }
.modal-type-btn {
  background:#f0f0f0; border:none; padding:8px 12px; border-radius:8px; cursor:pointer;
}
.modal-type-btn.active { background:#0b5ed7; color:#fff; }

.radio-row label {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 8px;
    border-radius: 6px;
    background-color: var(--bg-color);
    border: 1px solid var(--panel-border);
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.2s;
}

.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
.modal-action { padding:8px 12px; border-radius:8px; border:none; cursor:pointer; background:#e9e9e9; }
.modal-action.primary { background:#0b5ed7; color:#fff; }

/* responsive */
@media (max-width:420px){
  .modal-card { padding:12px; }
  .licencia-cantidad { width: 44px; }
}

/* ----- CAJÓN DE PETICIONES ----- */
#peticiones-section {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  color: #000; /* ← texto negro visible */
}

/* 🔹 Subcomponentes internos del cajón */
#peticiones-section textarea,
#peticiones-section input {
  color: #000 !important;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

#peticiones-section button {
  color: #fff !important;
  background-color: #007bff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}

#peticiones-section button:hover {
  background-color: #0056b3;
}

#peticiones-section .lista-peticiones li {
  color: #000 !important;                  /* texto negro visible */
  background-color: rgba(255, 255, 255, .85) !important; /* fondo blanco translúcido */
  border: 1px solid rgba(0,0,0,0.15);      /* borde sutil para contraste */
}


.peticiones-zona {
  margin-bottom: 25px;
}

.peticiones-zona h3 {
  font-size: 1.1em;
  margin-bottom: 10px;
  color: #e0e0e0;
}

#peticion-texto {
  display: block;             /* Aseguramos que es un bloque para poder centrarlo */
  width: 95%;                 /* Lo hacemos un poco más estrecho que el contenedor */
  height: 70px;
  margin: 0 auto 15px auto;   /* ¡La clave! Lo centramos y le damos margen inferior */
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #dcdcdc;
  background-color: #ffffff; 
  font-size: 0.95em;
  resize: none;
  box-sizing: border-box;     /* Buena práctica para que el padding no desborde */
}

.peticiones-controles {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

#enviar-peticion {
  background-color: #0b5ed7; /* <-- AZUL PRINCIPAL */
  color: #fff;
  border: none; /* Ya no necesita borde */
  border-radius: 8px;
  padding: 8px 15px; /* Un poco más de padding para mejor aspecto */
  cursor: pointer;
  transition: all 0.3s ease;
}

#enviar-peticion:hover {
  background-color: rgba(100, 150, 255, 0.5);
}

.lista-peticiones {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-peticiones li .info {
  flex: 1;
}

.lista-peticiones li input[type="checkbox"] {
  transform: scale(1.2);
  cursor: pointer;
}
/* --- Estilo del texto de hora y fecha en las peticiones --- */
#lista-peticiones-usuario li span.fecha-hora {
  display: block;
  font-size: 0.85em;
  color: var(--text-color-light); /* VARIABLE APLICADA */
  margin-top: 2px;
  font-weight: 500;
}

/* Botones de borrado en peticiones (Unificado) */
.btn-borrar-todo {
  background-color: var(--button-danger-bg); /* VARIABLE APLICADA */
  color: var(--button-danger-text);         /* VARIABLE APLICADA */
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s ease, background-color 0.3s;
}
.btn-borrar-todo:hover {
  opacity: 1;
}

/* Icono de borrar individual */
.btn-borrar-peticion, .btn-eliminar { 
  background: none;
  border: none;
  color: var(--button-danger-bg); /* VARIABLE APLICADA */
  cursor: pointer;
  font-size: 1.1em;
  opacity: 0.7;
  transition: opacity 0.2s ease, color 0.3s;
}
.btn-borrar-peticion:hover, .btn-eliminar:hover {
  opacity: 1;
}

/* === ESTILO UNIFICADO PARA PANELES DE CONTENIDO (AJUSTADO) === */
#peticiones-section,
#ajustes-section {
  background-color: #FAD7A0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  padding: 10px 8px;     /* Reducido padding vertical (antes 20px) */
  margin: 10px auto 20px; /* Reducido margen superior (antes 20px) */
}

/* === Subcajones (usuario y administrador) === */
#ajustes-section .peticiones-zona {
  background-color: var(--user-zone-bg);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin: 0 6px 20px 6px;
  transition: background-color 0.3s;
}

/* --- Estilo del título principal del cajón de peticiones --- */
#ajustes-section h2 {
  text-align: center;
  font-weight: 600;
  font-size: 1.1em;      /* Añadido: Reducimos ligeramente el tamaño del título */
  margin-top: 0;         /* Añadido: Quitamos cualquier margen superior residual */
  margin-bottom: 10px;   /* Reducido el espacio inferior (antes 15px) */
  color: #212529 !important;
}

/* --- Estilo de los subtítulos de las zonas --- */
#ajustes-section .peticiones-zona h3 {
  color: var(--text-color);
  font-weight: 500;
  margin-bottom: 15px;
  padding-bottom: 0;
  border-bottom: none;
  text-align: center;
}

/* === Estilos para el área de texto de peticiones === */
#peticion-texto {
  font-size: 1.2em; /* Ajustado para ser consistente con el título */
  line-height: 1.4;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--input-bg);
  color: var(--text-color);
}

/* === TABLA COORDINADOR === */
#tabla-coordinador-container {
  overflow-x: auto;
  margin-top: 1.4rem;
}
#tabla-coordinador {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  border-radius: 8px;
  overflow: hidden;
}

/* Estilo general para celdas y cabeceras */
#tabla-coordinador th,
#tabla-coordinador td {
  border: 1px solid var(--panel-border);
  padding: 1px 3px; /* Reducimos padding lateral en celdas para ganar espacio */
  text-align: center;
  vertical-align: middle;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
  word-wrap: break-word;
  min-height: 28px; /* <-- ¡LA SOLUCIÓN! Altura mínima para la celda */
}

/* Cabecera de la tabla */
#tabla-coordinador thead th {
  background-color: #0b5ed7;
  font-weight: 600;
  color: #ffffff;             /* <-- TEXTO BLANCO PARA CONTRASTE */
}

/* Celdas del cuerpo de la tabla */
#tabla-coordinador tbody td {
  color: var(--text-color); /* <-- CAMBIO CLAVE: Texto principal para más contraste */
  background-color: var(--panel-bg);
}

/* Rayado "cebra" para filas pares */
#tabla-coordinador tbody tr:nth-child(even) td {
  background-color: var(--table-zebra-bg);
}

/* Efecto hover sobre las filas (solo en escritorio) */
@media (hover: hover) and (pointer: fine) {
  #tabla-coordinador tbody tr:hover td {
    background-color: var(--table-hover-bg) !important;
  }
}

/* Celdas editables y en foco */
#tabla-coordinador td[contenteditable="true"] {
  font-weight: bold;
  color: var(--text-color);
}

#tabla-coordinador td[contenteditable="true"]:focus, #tabla-coordinador th[contenteditable="true"]:focus {
  background-color: var(--table-focus-bg) !important;
  outline: 2px solid var(--button-primary-bg);
  color: var(--text-color);
}

/* Alineación para columnas con mucho texto */
#tabla-coordinador td:nth-child(2),
#tabla-coordinador td:nth-child(8) {
  text-align: left;
}

/* Estilo para la fila seleccionada, para saber cuál se va a borrar o dónde se va a insertar */
tbody tr.seleccionada > td {
    /* Un fondo más notorio que funciona en ambos temas. !important para asegurar que sobreescribe otros estilos */
    background-color: var(--selected-row-bg) !important;
}

/* Añadimos un borde sutil a la izquierda y derecha de la fila para marcarla mejor */
tbody tr.seleccionada > td:first-child {
    border-left: 3px solid var(--primary-color);
}

tbody tr.seleccionada > td:last-child {
    border-right: 3px solid var(--primary-color);
}

/*
   Corrección de Contraste en Modo Oscuro:
   Fuerza el texto del editor a ser oscuro cuando la fila está seleccionada,
   ya que el fondo de selección es claro.
*/
body[data-theme='dark'] tbody tr.seleccionada .text-editor {
    color: #212529 !important; /* Usamos un color de texto oscuro para asegurar la legibilidad */
}

/* ==========================================================================
   ESTILOS DE LA PALETA DE COLORES
   ========================================================================== */

/* NUEVO: Contenedor de la paleta (el que ya tienes, pero ahora lo referenciamos) */
#color-palette {
  display: flex;
  gap: 8px;
  padding: 10px;
  background-color: var(--panel-bg);
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  position: absolute; /* Posicionamiento absoluto para flotar */
  z-index: 100;
}

/* NUEVO: Clase específica para CADA muestra de color */
.palette-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--bg-color); /* Borde que contraste con el fondo */
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.palette-swatch:hover {
  transform: scale(1.15);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* NUEVO: Estilo para el botón de restaurar */
.palette-swatch.reset-btn {
  background-color: var(--button-bg-color, #f0f0f0);
  border: 1px dashed var(--text-color-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--text-color);
}

.palette-swatch.reset-btn:hover {
  background-color: var(--button-hover-bg-color, #e0e0e0);
  transform: scale(1.1);
  box-shadow: none;
}

/* === ESTILO COMPACTO PARA PETICIONES (Móvil + Desktop) === */

/* Contenedor general */
#lista-peticiones-usuario {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}

/* Cada petición */
.peticion-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--peticion-item-bg);
  border: 1px solid var(--peticion-item-border);
  color: var(--text-color);
  padding: 10px 15px;
  border-radius: 8px;
  margin-bottom: 8px;
  transition: background-color 0.3s, border-color 0.3s;
}

.peticion-item.revisada {
  background-color: var(--peticion-revisada-bg);
}

.peticion-item.revisada .peticion-contenido span {
   color: var(--peticion-revisada-text);
   text-decoration: line-through;
}

/* Zona izquierda (texto + fecha) */
.peticion-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

/* Texto de la petición */
.peticion-left div:first-child {
  font-weight: 500;
  color: var(--text-color);
  word-wrap: break-word;
}

/* Fecha/hora */
.fecha-hora {
  font-size: 0.80rem;
  color: #677ea3;
}

/* Checkbox redondo más visible en móvil */
.peticion-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #005eff;
}

/* Botón borrar individual */
.btn-eliminar {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 0 6px;
}

/* Botón BORRAR TODO (versión compacta) */
.btn-borrar-todo {
  display: block;
  width: 100%;
  text-align: center;
  padding: 8px;
  margin-top: 8px;
  border-radius: 8px;
  background-color: #dc3545; /* Fondo rojo */
  color: white;             /* <-- TEXTO BLANCO */
  border: none;
  font-size: 0.95rem;
  font-weight: 500;
}

/* Y su hover también con texto blanco */
.btn-borrar-todo:hover {
  background-color: #bb2d3b; /* Rojo más oscuro */
  color: white;
}

/* Modo táctil (móvil): aumenta ligeramente área de toque */
@media (max-width: 640px) {
  .peticion-item {
    padding: 10px 12px;
  }
  .peticion-left div:first-child {
    font-size: 1rem;
  }
}

@keyframes epicEntrance {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  40% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.splash .logo-img {
  animation: epicEntrance 1.4s ease-out forwards;
}

/* --- ESTILOS DE BOTÓN MODERNOS --- */

/* Estilo base para los botones de la tabla del coordinador y otros */
.modern-btn {
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: background-color 0.2s, transform 0.1s;
    background-color: #6c757d; /* Gris por defecto */
}

.modern-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Color Verde (para acciones positivas como añadir filas/columnas) */
#btn-add-row,
#btn-add-col {
    background-color: var(--green-color);
}
#btn-add-row:hover,
#btn-add-col:hover {
    background-color: var(--green-color-dark);
}

/* Color Rojo (para acciones de peligro como eliminar filas/columnas) */
#btn-remove-row,
#btn-remove-col {
    background-color: var(--red-color);
}
#btn-remove-row:hover,
#btn-remove-col:hover {
    background-color: var(--red-color-dark);
}

/* ======================================= */
/* AJUSTES FINALES TABLA DEL COORDINADOR   */
/* ======================================= */

/* 1. Unifica estilos del editor de texto y garantiza altura mínima */
#tabla-coordinador th {
    font-size: 10px;
    line-height: 1.3;
    font-weight: bold;
}

#tabla-coordinador .text-editor {
    font-size: 9.5px;
    line-height: 1.3;
    font-weight: bold;
    color: var(--text-color);
    padding: 2px 3px;
}

/* =================================================== */
/* ESTILOS DEL TABLÓN DE ANUNCIOS                      */
/* =================================================== */

/* 1. Arregla el panel para que tenga fondo y se vea sólido */
#tablon-section {
    padding: 15px;
    background-color: var(--background-color);
}

/* 2. Estructura y alinea cada fila de la lista de archivos */
.tablon-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 10px;
    border-bottom: 1px solid var(--border-color);
    gap: 15px; /* Espacio entre la info y los botones */
}

.tablon-item:last-child {
    border-bottom: none;
}

.tablon-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden; /* Evita que textos largos rompan el diseño */
}

.tablon-item-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Pone "..." si el nombre es muy largo */
    color: var(--text-color);
    font-weight: bold;
}

.tablon-item-meta {
    font-size: 0.8em;
    color: var(--text-color-light);
}

.tablon-item-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0; /* Impide que los botones se deformen */
}

/* 3. Corrige los colores de los botones según tus indicaciones */

/* Botón principal "[+] Subir Archivo" pasa a ser azul */
#btn-upload-file {
    background-color: var(--primary-color);
    color: white;
}
#btn-upload-file:hover {
    background-color: var(--primary-color-dark);
}

/* Botón "Ver" pasa a ser verde */
.tablon-item-actions .view-btn {
    background-color: var(--green-color);
    color: white;
}
.tablon-item-actions .view-btn:hover {
    background-color: var(--green-color-dark);
}

/* El botón de descarga tendrá un color neutro */
.tablon-item-actions .download-btn {
    background-color: #6c757d; /* Un gris estándar */
    color: white;
}
.tablon-item-actions .download-btn:hover {
    background-color: #5a6268;
}

/* =================================================== */
/* ESTILOS DE LA PREVISUALIZACIÓN DEL TABLÓN           */
/* =================================================== */

.tablon-preview-container {
  margin-bottom: 20px;
  text-align: center;
  border: 2px dashed var(--panel-border);
  border-radius: 8px;
  padding: 15px;
  background-color: var(--bg-color);
}

.tablon-preview-container.oculto {
  display: none;
}

.tablon-preview-container h3 {
  font-size: 1.1em;
  margin-top: 0;
  margin-bottom: 15px;
  color: var(--text-color-light);
}

#tablon-preview-image {
  max-width: 100%;
  max-height: 55vh; /* Aumentamos altura máxima al 55% de la altura de la pantalla */
  border-radius: 6px;
  object-fit: contain;
  cursor: pointer; /* Indica que la imagen es clickeable */
  transition: transform 0.2s ease-in-out;
}

#tablon-preview-image:hover {
    transform: scale(1.03); /* Ligero zoom al pasar el ratón por encima */
}

/* =================================================== */
/* ESTILOS DEL MODAL DE IMAGEN (LIGHTBOX)              */
/* =================================================== */

.image-modal-overlay {
  position: fixed; /* Se posiciona sobre toda la ventana */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85); /* Fondo oscuro semitransparente */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000; /* Asegura que esté por encima de todo lo demás */
  backdrop-filter: blur(5px); /* Efecto de desenfoque del fondo */
  opacity: 1;
  transition: opacity 0.3s ease;
}

.image-modal-overlay.oculto {
  opacity: 0;
  pointer-events: none; /* Impide interactuar con el modal cuando está oculto */
}

.image-modal-content {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  border-radius: 8px;
  transform: scale(0.8);
  transition: transform 0.3s ease;
}

.image-modal-overlay:not(.oculto) .image-modal-content {
    transform: scale(1); /* Animación de zoom al aparecer el modal */
}

.image-modal-close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s;
}

.image-modal-close:hover {
  color: #bbb;
}

/* ============================================= */
/* REVISIÓN PANEL CARGA DÍAS (3 COLUMNAS)      */
/* ============================================= */

/* --- 1. Cabecera con Títulos --- */
.licencia-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 5px 10px;
    margin-bottom: 8px;
    border-bottom: 2px solid var(--panel-border);
    font-weight: bold;
    font-size: 0.8em;
    color: var(--text-color-light);
}

.licencia-nombre-header {
    flex-basis: 45%;
    text-align: left;
}

.licencia-valores-header {
    flex-basis: 40%;
    display: flex;
    justify-content: space-around;
}

.licencia-color-header {
    flex-basis: 15%;
    text-align: center;
}

/* --- 2. Filas de Permisos (Items y Total) --- */
.licencia-item,
.licencia-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.licencia-item .licencia-nombre,
.licencia-total .licencia-nombre {
    flex: 1;
    text-align: left;
}

/* Contenedor para los 3 inputs */
.licencia-valores {
    display: flex;
    gap: 5px;
    justify-content: center;
    flex-shrink: 0;
}

/* Estilo para cada input de número */
.licencia-input {
    width: 40px; /* Ancho para 2 dígitos */
    text-align: center;
    border-radius: 6px;
    border: 1px solid var(--panel-border);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 0.9em;
    padding: 4px 2px;
}

/* --- NUEVO BLOQUE CORREGIDO CON COLORES --- */
/* Estilo para los inputs de solo lectura (Restan y Totales) */
.licencia-input[readonly] {
    font-weight: bold;
    color: var(--text-color-light);
    pointer-events: none;
}

/* --- Colores de fondo específicos para cada columna --- */

/* Columna CARGA (Azul clarito) */
.licencia-item .carga, 
#total-carga {
    background-color: #eaf4ff; /* Azul muy pálido */
}

/* Columna CONSUMIDOS (Naranja clarito que antes tenía 'Restan') */
.licencia-item .consumidos, 
#total-consumidos {
    background-color: var(--table-zebra-bg); 
}

/* Columna RESTAN (Verde muy clarito) */
.licencia-item .restan, 
#total-restan {
    background-color: #e8f9e8; /* Verde muy pálido */
}

/* --- Versiones para TEMA OSCURO para asegurar el contraste --- */

body[data-theme='dark'] .licencia-item .carga,
body[data-theme='dark'] #total-carga {
    background-color: #2a3a4e; /* Azul oscuro sutil */
}

/* El color para 'consumidos' en oscuro ya es gestionado por la variable --table-zebra-bg */

body[data-theme='dark'] .licencia-item .restan,
body[data-theme='dark'] #total-restan {
    background-color: #2c422c; /* Verde oscuro sutil */
}

/* Estilo del botón de color para licencias (Corregido) */
.licencia-color-handle {
    transition: transform 0.15s ease-out;
    border-radius: 6px;
    width: 26px;
    height: 26px;
    border: 1px solid var(--panel-border);
    /* Se elimina la opacidad para que el color de fondo se vea siempre sólido */
}

.licencia-color-handle:hover {
    transform: scale(1.1); /* Efecto visual alternativo en hover */
}

/* Estilo para el "punto" sutil que ahora vive DENTRO de la casilla de color */
.licencia-inner-handle {
    position: absolute;
    inset: 0; /* Ocupa todo el espacio de su padre (la casilla) */
    background: transparent;
    border: none;
    border-radius: 6px; /* Para que coincida con la forma de la casilla */
    color: rgba(0, 0, 0, 0.5); /* Color del punto '●' */
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.1; /* Hacemos el punto casi invisible por defecto */
    transition: opacity 0.2s ease;
}

/* Al pasar el ratón sobre la casilla, el punto se hace visible */
.licencia-color-handle:hover .licencia-inner-handle {
    opacity: 0.9;
}

/* Placeholder para alinear la fila de TOTAL */
.licencia-color-placeholder {
    width: 26px; /* Mismo ancho que el botón de color */
    height: 26px;
    margin-left: 10px;
}

/* --- 4. Limpieza de Estilos Antiguos --- */
/* Quitamos márgenes que ya no son necesarios */
.licencia-cantidad {
    margin: 0;
}

/* Quitamos el elemento <label> que ya no usamos */
.licencia-item > label.licencia-nombre {
    display: none;
}

/* ============================================= */
/* AJUSTES RESPONSIVE PARA EL PANEL CARGA DÍAS   */
/* (Solo para pantallas pequeñas como móviles)   */
/* ============================================= */
@media (max-width: 600px) {

    /* 1. Reduce el tamaño de la fuente de los títulos de las columnas
       para que no se amontonen. */
    .licencia-valores-header span {
        font-size: 0.75em;
    }

    /* 2. Reduce el tamaño del nombre de cada licencia para hacer las filas 
       más compactas y que todo el panel ocupe menos altura. */
    .licencia-item .licencia-nombre {
        font-size: 0.9em;
    }
}
/* ============================================= */
/*       ESTILO BOTÓN ELIMINAR EN TABLÓN         */
/* ============================================= */

/*
 * Pone el botón "Eliminar" del panel Tablón en color rojo
 * para que sea más intuitivo y visible.
 */
.tablon-item .delete-btn {
    background-color: #d9534f; /* Un rojo estándar y visible */
    border-color: #d43f3a;
    color: #fff; /* Texto en blanco para un buen contraste */
}

/* Oscurece ligeramente el botón al pasar el ratón por encima */
.tablon-item .delete-btn:hover {
    background-color: #c9302c;
    border-color: #ac2925;
}

/* ============================================= */
/*           TÍTULO EDITABLE PRINCIPAL           */
/* ============================================= */
#editable-title {
    display: inline-block;
    background-color: #ffa94d; /* Naranja similar a la cadencia M/T */
    color: #000;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: 600;
    text-align: center;
    margin-bottom: 15px;
    cursor: text;
    transition: background-color 0.3s;
    min-width: 200px; /* Ancho mínimo para que no se vea muy pequeño */
    outline: none; /* Quitamos el outline por defecto al hacer foco */
}

/* Estilo cuando el usuario está editando el texto */
#editable-title:focus {
    background-color: #ffc07c; /* Un naranja un poco más claro */
    box-shadow: 0 0 0 3px rgba(255, 169, 77, 0.5); /* Anillo de foco visual */
}

/* Ajustes para el tema oscuro */
[data-theme="dark"] #editable-title {
    background-color: #d87d00; /* Naranja más oscuro para el tema oscuro */
    color: #fff;
}

[data-theme="dark"] #editable-title:focus {
    background-color: #e68a00;
    box-shadow: 0 0 0 3px rgba(216, 125, 0, 0.6);
}

/* ============================================= */
/*      ESTILO CONTROLES TABLA COORDINADOR       */
/* ============================================= */
#tabla-coordinador-controles {
    display: flex;
    justify-content: space-between; /* <-- La clave: separa los elementos */
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* =================================================== */
/*           PANEL DE DOCUMENTOS (PDFs)              */
/* =================================================== */

/* Grid que contiene las 4 tarjetas */
.documentos-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 sola columna */
    gap: 15px;
    margin-top: 20px;
}

/* Estilo de cada tarjeta/mini-panel */
.documento-card {
    background-color: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.documento-card h3 {
    margin: 0;
    font-size: 1em;
    font-weight: 600;
    color: var(--text-color);
}

/* Contenedor de la previsualización */
.documento-preview-container {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5; /* Proporción vertical, común en documentos */
    border: 2px dashed var(--panel-border);
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden; /* Clave para que el iframe no se desborde */
    background-color: var(--bg-color);
}

/* El iframe que mostrará el PDF */
.documento-preview-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Capa con texto "No hay PDF" que se superpone */
.preview-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-color);
    color: var(--text-color-light);
    font-size: 0.9em;
    /* Por defecto está visible. JS lo ocultará si hay PDF */
    z-index: 2; 
}

/* Botón de subida dentro de cada tarjeta */
.btn-upload-pdf {
    background-color: var(--primary-color) !important; /* Forzar azul */
    color: white !important;
    width: 100%;
}
.btn-upload-pdf:hover {
    background-color: var(--primary-color-dark) !important;
}

/* Estilo del iframe del modal a pantalla completa */
.pdf-modal-content {
    width: 95vw;
    height: 95vh;
    border: none;
    border-radius: 8px;
    background-color: #fff; /* Fondo blanco por si el PDF tarda en cargar */
}

/* =================================================== */
/*      AJUSTES TARJETAS DE DOCUMENTOS (Botones)     */
/* =================================================== */

/* Contenedor que agrupa los botones de subir y eliminar */
.documento-card-actions {
    display: flex;
    width: 100%;
    gap: 8px; /* Espacio entre los botones */
}

/* El botón de subida ahora es flexible y ocupa el espacio disponible */
.documento-card-actions .btn-upload-pdf {
    flex-grow: 1; 
}

/* El botón de eliminar es más pequeño y cuadrado, para el icono */
.documento-card-actions .btn-delete-pdf {
    flex-grow: 0;
    flex-shrink: 0;
    padding: 8px 10px;
}

/* =================================================== */
/*      AJUSTES PREVISUALIZACIÓN PDF CON IMAGEN      */
/* =================================================== */

/* El iframe ahora estará siempre oculto en la previsualización */
.documento-preview-iframe {
    display: none;
}

/* La nueva imagen de previsualización */
.documento-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 'cover' para rellenar, 'contain' para mostrar todo */
    display: none; /* Se mostrará con JS cuando exista */
    border-radius: 6px;
}

/* =================================================== */
/*      SEPARADOR VISUAL EN LA BARRA DE NAVEGACIÓN     */
/* =================================================== */

.nav-separator {
    width: 1px;
    background-color: var(--panel-border);
    /* Margen vertical para que la línea no ocupe toda la altura de la barra */
    margin-top: 8px;
    margin-bottom: 8px;
    /* Evita que el separador se estire y ocupe más espacio del necesario */
    flex-grow: 0;
    transition: background-color 0.3s; /* Para que se adapte al cambio de tema */
}

/* ============================================================= */
/*   NUEVO ESTILO BARRA DE NAVEGACIÓN (BOTONES INDIVIDUALES)   */
/* ============================================================= */

/* 1. Fondo de la barra con el azul de los sábados y espaciado */
.bottom-nav {
    background-color: var(--saturday-bg, rgba(163, 193, 255, 0.65));
    gap: 5px;   /* Espacio entre cada botón */
    padding: 5px; /* Pequeño margen interior en la barra */
}

/* 2. Estilo de cada botón con el azul de día laboral */
.nav-btn {
    background-color: var(--day-cell-bg, #e8f0ff);
    color: var(--text-color, #212529); /* Texto oscuro para buen contraste */
    font-weight: 600;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    position: relative;
    /* flex-grow: 1; -> Mantenemos esto para que ocupen todo el ancho disponible */
}

/* 3. Estilo para el botón que está ACTIVO */
.nav-btn.active {
    background-color: var(--primary-color, #0d6efd); /* Azul principal de la app */
    color: white; /* Texto blanco */
    border-color: transparent;
    font-weight: bold;
}

/* 4. Efecto hover para botones no activos (solo en escritorio) */
@media (hover: hover) and (pointer: fine) {
    .nav-btn:not(.active):hover {
        background-color: #d6e4ff; /* Un azul un poco más intenso al pasar el ratón */
        transform: translateY(-1px);
    }
}

/* ============================================================= */
/*        ESTILOS PARA NOTIFICACIONES (CONTADOR NUMÉRICO)        */
/* ============================================================= */

.nav-btn {
    position: relative; /* Necesario para que el ::after se posicione correctamente */
}

/* Estilo para el nuevo contador numérico */
.nav-btn.has-notification::after {
    content: attr(data-count); /* Usa el número del atributo data-count */
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--color-error, #dc3545);
    color: white;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    z-index: 1;
    /* Animación opcional */
    transform: scale(1);
    transition: transform 0.2s ease-out;
}

/* Oculta el contador si no tiene el atributo o está vacío/cero */
.nav-btn:not([data-count])::after,
.nav-btn[data-count=""]::after,
.nav-btn[data-count="0"]::after {
    transform: scale(0);
}

/* =================================================== */
/*      NUEVOS COLORES PANEL DOCUMENTOS (DOCS)       */
/* =================================================== */

/* 1. Fondo del panel "Docs" con el azul de día laboral */
#documentos-section {
}

/* 2. Fondo de cada tarjeta individual con el azul de los sábados */
.documento-card {
    background-color: var(--saturday-bg);
}

/* =================================================== */
/*        NUEVOS COLORES PANEL TABLÓN DE ANUNCIOS      */
/* =================================================== */

/* 1. Fondo del panel "Tablón" con el azul de día laboral */
#tablon-section {
   background-color: var(--day-cell-bg);
}

/* 2. Fondo del marco de previsualización con el azul de los sábados */
.tablon-preview-container {
    background-color: var(--saturday-bg);
    border: 1px solid var(--saturday-bg); /* Cambiamos el borde a sólido y del mismo color para unificar */
}


/* =================================================== */
/*      ESTILOS PARA LAS LISTAS DE DOCUMENTOS (PDF)    */
/* =================================================== */

.documento-file-list {
    width: 100%;
    margin-top: 10px;
}

.documento-file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5px;
    border-top: 1px solid rgba(0,0,0,0.1);
    gap: 8px;
}

.documento-file-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 3px;
}

.documento-file-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9em;
    font-weight: 500;
}

.documento-file-meta {
    font-size: 0.75em;
    color: var(--text-color-light);
}

.documento-file-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}


/* En modo oscuro, el separador de la lista debe ser más claro */
[data-theme="dark"] .documento-file-item {
    border-top-color: rgba(255,255,255,0.1);
}

/* ================================================================= */
/* AJUSTES BOTONES-ICONO EN PANELES (DOCS Y TABLÓN)                  */
/* ================================================================= */

/* 1. Reduce el espacio entre los botones en AMBAS listas */
.documento-file-actions,
.tablon-item-actions {
    gap: 5px;
}

/* 2. Estilo súper-compacto para los botones-icono en AMBAS listas */
.documento-file-actions .modern-btn,
.tablon-item-actions .modern-btn {
    padding: 5px 9px;
    font-size: 1em;
    line-height: 1;
}

/* 3. Colores para los botones de Docs (Verde y Rojo) */
.documento-file-actions .green { background-color: var(--green-color); }
.documento-file-actions .green:hover { background-color: var(--green-color-dark); }
.documento-file-actions .red { background-color: var(--red-color); }
.documento-file-actions .red:hover { background-color: var(--red-color-dark); }

/* 4. Colores para los botones de Tablón (Verde y Rojo) */
.tablon-item-actions .green { background-color: var(--green-color); }
.tablon-item-actions .green:hover { background-color: var(--green-color-dark); }
.tablon-item-actions .red { background-color: var(--red-color); }
.tablon-item-actions .red:hover { background-color: var(--red-color-dark); }

/* ============================================================= */
/*           ESTILOS PARA EL PANEL DE AUTENTICACIÓN              */
/* ============================================================= */

#auth-section {
    max-width: 400px; /* Ancho máximo del formulario */
    margin: 60px auto 0 auto; /* Margen superior para centrarlo verticalmente */
    padding: 25px;
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    text-align: center;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio entre los inputs y botones */
    margin-top: 20px;
}

.auth-form input[type="email"],
.auth-form input[type="password"] {
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 1rem;
    background-color: var(--input-bg);
    color: var(--text-color);
}

/* ============================================================= */
/*          MEJORAS EN LA PANTALLA DE AUTENTICACIÓN              */
/* ============================================================= */

/* 1. Estilo para el logo en la pantalla de autenticación */
.auth-logo {
    display: block;
    width: 50%; /* Ancho del 50% del contenedor del formulario */
    max-width: 200px; /* Ancho máximo para que no sea demasiado grande */
    margin: 0 auto 20px auto; /* Centrado automático y margen inferior */
    filter: var(--logo-filter); /* Respeta el tema claro/oscuro */
}

/* 2. Botones del formulario de autenticación */
.auth-form .modern-btn {
    padding: 12px; /* Hacemos los botones un poco más grandes */
    font-size: 1rem;
    font-weight: 600;
}

/* 3. Color AZUL para el botón de Acceder */
#btn-login {
    background-color: #0b5ed7; /* Azul corporativo oscuro */
    color: #fff;
}
#btn-login:hover {
    background-color: #0a58ca; /* Un poco más oscuro en hover */
}

/* 4. Color NARANJA para el botón de Registrarse (CORREGIDO) */
#btn-register {
    background-color: #ffa94d; /* Naranja del título editable, más brillante */
    color: #000;              /* Texto negro para mejor contraste */
}
#btn-register:hover {
    background-color: #f79a33; /* Naranja un poco más oscuro en hover */
}


/* --- NUEVO --- Contenedor para la fila de clave/recuperación */
.auth-inline-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 15px auto;
    gap: 10px; /* Espacio entre los dos elementos */
}

/* Modificación del campo de clave de grupo para que encaje en la fila */
#auth-section #group-key-input {
    width: 55%; /* Le damos un poco más de la mitad del espacio */
    margin: 0; /* Reseteamos el margen que tenía antes */
    flex-grow: 1; 
}

/* --- NUEVO --- Estilo para el botón de recuperar contraseña */
#btn-forgot-password {
    width: 45%; /* Ocupa el espacio restante */
    margin: 0;
    padding: 10px 5px; /* Lo hacemos ligeramente menos alto que los botones principales */
    font-size: 0.8em;  /* Texto más pequeño para que no desentone */
    background-color: #6c757d; /* Un color secundario, gris oscuro */
    border-color: #6c757d;
    flex-shrink: 0; /* Evita que el botón se encoja si el texto es largo */
    line-height: 1.4; /* Mejora el centrado vertical del texto */
}

#btn-forgot-password:hover {
    background-color: #5a6268;
}

/* ============================================= */
/*       ESTILOS CABECERA MEJORADA (v6.2)        */
/* ============================================= */

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  /* ¡AJUSTE! Usamos el azul principal de los botones de control (#0b5ed7) */
  background-color: #0b5ed7;
  border-bottom: 1px solid var(--border-color);
}

.header-left, .header-right {
  flex: 0 0 auto;
}

.header-center {
  flex: 1 1 0;
  text-align: center;
  margin: 0;
  padding: 0;
}

.app-header #app-title {
  margin: 0;
  font-size: 1.4em;
  /* ¡AJUSTE! Forzamos el texto a blanco para que contraste con el fondo azul */
  color: #ffffff;
}

/* El botón de logout hereda los estilos de .icon-btn, por lo que su color ya es blanco.
   Solo ajustamos el tamaño de fuente por coherencia. */
#btn-logout {
  font-size: 1.4em;
}

/* ============================================= */
/*           MENÚ DE AJUSTES (POPUP)             */
/* ============================================= */

.settings-menu-popup {
    position: absolute;
    top: 60px; /* Justo debajo de la cabecera */
    right: 15px;
    background-color: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    z-index: 200;
    overflow: hidden;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    transform-origin: top right;
}

.settings-menu-popup.oculto {
    transform: scale(0.95);
    opacity: 0;
    pointer-events: none;
}

.settings-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 15px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--panel-border);
    text-align: left;
    font-size: 1rem;
    color: var(--text-color);
    cursor: pointer;
    gap: 15px;
}

.settings-menu-item:last-child {
    border-bottom: none;
}

.settings-menu-item:hover {
    background-color: var(--table-hover-bg);
}

/* ================================================================= */
/*  CORRECCIÓN ALINEACIÓN BOTÓN NOTIFICACIONES (MENÚ AJUSTES)      */
/* ================================================================= */
#notifications-toggle-container {
    justify-content: flex-start; /* Anula 'space-between' y alinea a la izquierda */
    gap: 25px; /* Crea un espacio fijo y cómodo entre el texto y el interruptor */
}


/* Ajustes para la lista de Peticiones */
.peticion-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px; /* Espacio entre el texto y los botones */
}

.peticion-left {
    flex-grow: 1; /* El texto ocupa todo el espacio posible */
}

.peticion-right {
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre el checkbox y la papelera */
    flex-shrink: 0; /* Evita que los botones se encojan */
}

/* Indicador de petición revisada (check verde) */
.revisado-indicator {
    color: var(--green-color);
    font-size: 1.2em;
}

/* ============================================= */
/*           SISTEMA DE ALIAS DE USUARIO         */
/* ============================================= */

.settings-zone {
    background-color: var(--user-zone-bg);
    border-radius: 10px;
    padding: 15px;
    margin: 0 6px 20px 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    text-align: center;
}

.settings-zone h3 {
    margin-top: 0;
    margin-bottom: 5px;
    color: var(--text-color);
    font-weight: 500;
}

.settings-zone p {
    font-size: 0.9em;
    color: var(--text-color-light);
    margin-top: 0;
    margin-bottom: 15px;
}

.alias-input-group {
    display: flex;
    gap: 8px;
}

#user-alias-input {
    flex-grow: 1;
    padding: 8px 10px;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 1rem;
}

#btn-save-alias {
    background-color: var(--green-color);
    color: white;
    flex-shrink: 0;
}
#btn-save-alias:hover {
    background-color: var(--green-color-dark);
}

.save-status {
    display: block;
    margin-top: 8px;
    font-size: 0.85em;
    color: var(--green-color);
    min-height: 1em; /* Para que no salte el layout */
}

/* ======================================================= */
/*    AJUSTES VISUALES REFINADOS PANEL LICENCIAS (v2)    */
/* ======================================================= */

/* 1. Ensanchar el contenedor principal y cada item para aprovechar espacio */
#licencias-container {
    padding-left: 5px;  /* Menos padding lateral */
    padding-right: 5px;
}
.licencia-item {
    padding-left: 8px;
    padding-right: 8px;
    margin-left: 0;
    margin-right: 0;
}

/* 2. Ocultar las flechas en los inputs de tipo number y ajustar tamaño */
.licencia-item .licencia-input {
    width: 26px; /* Ancho ajustado */
    height: 26px;
    padding: 2px;
    font-size: 0.85em;
    -moz-appearance: textfield; /* Para Firefox */
}
.licencia-item .licencia-input::-webkit-outer-spin-button,
.licencia-item .licencia-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 3. Papelera aún más pequeña y discreta */
.licencia-item .delete-licencia-btn {
    padding: 2px 6px;       /* Mínimo padding */
    font-size: 0.8em;       /* Icono más pequeño */
    line-height: 1;
    min-width: auto;
}

/* 4. Cambiar color y estilo del botón "Añadir" */
#btn-add-licencia {
    background-color: #0b5ed7; /* Azul corporativo */
    color: #ffffff;
    width: 100%; 
    margin-top: 15px; 
    padding: 10px;
    font-size: 1em;
    font-weight: 600;
}
#btn-add-licencia:hover {
    background-color: #0a58ca;
}

/* 5. Ajuste para la fila de totales para que siga alineada */
.licencia-total .licencia-input {
    width: 26px;
    height: 26px;
    padding: 2px;
}

/* ======================================================= */
/*      ESTILOS PARA EL PANEL DE CAMBIOS DE TURNOS       */
/* ======================================================= */

/* Contenedor principal del panel */
#cambios-turnos-container {
    background-color: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    padding: 15px;
    margin: 20px 5px; /* Margen consistente con otros paneles */
}

#cambios-turnos-container h2 {
    text-align: center;
    font-size: 1.2em;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--text-color);
}

/* Mensaje cuando la lista está vacía */
.empty-list-message {
    text-align: center;
    color: var(--text-color-light);
    padding: 20px 0;
}

/* Cada item en la lista de cambios */
.cambio-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid var(--panel-border);
    transition: background-color 0.3s, border-color 0.3s;
}

.cambio-info {
    flex-grow: 1;
}

.cambio-info span {
    line-height: 1.4;
}

.cambio-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Estilos según el estado (pendiente/hecho) */
.cambio-item.status-pendiente {
    background-color: var(--user-zone-bg); /* Naranja pálido */
}

.cambio-item.status-hecho {
    background-color: #e8f9e8; /* Verde muy pálido */
    opacity: 0.7;
}

.cambio-item.status-hecho .cambio-info {
    text-decoration: line-through;
}

/* Botón de cambio de estado */
.toggle-status-btn {
    font-size: 0.8em !important;
    padding: 6px 10px !important;
    min-width: 100px;
    text-align: center;
}

.status-pendiente .toggle-status-btn {
    background-color: #f0ad4e; /* Naranja */
}
.status-hecho .toggle-status-btn {
    background-color: var(--green-color); /* Verde */
}

/* Botones de icono pequeños */
.small-icon {
    padding: 6px 10px !important;
    font-size: 1em !important;
    line-height: 1;
}

/* ======================================================= */
/*         ESTILOS PARA EL MODAL DE CAMBIO DE TURNO        */
/* ======================================================= */

.cambio-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.cambio-form-grid fieldset {
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cambio-form-grid legend {
    font-weight: 600;
    padding: 0 5px;
    color: var(--text-color);
}

.cambio-form-grid label {
    font-size: 0.8em;
    color: var(--text-color-light);
    margin-bottom: -5px;
}

.cambio-form-grid input {
    width: 100%;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--panel-border);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 0.9em;
    box-sizing: border-box;
}

/* Ajuste responsive para el grid en móviles */
@media (max-width: 500px) {
    .cambio-form-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* ======================================================= */
/*   AJUSTES ADICIONALES PANEL CAMBIOS DE TURNOS (v2)    */
/* ======================================================= */

/* 1. Pone el botón "Añadir Nuevo Cambio" en azul corporativo */
#btn-add-cambio {
    background-color: #0b5ed7; /* Azul corporativo */
    color: #ffffff;
}
#btn-add-cambio:hover {
    background-color: #0a58ca;
}

/* 2. Unifica el tamaño de los botones-icono (editar y borrar) */
.cambio-actions .small-icon {
    padding: 2px 6px !important;
    font-size: 0.8em !important;
    line-height: 1;
    min-width: auto;
}

/* ======================================================= */
/*   REESTRUCTURACIÓN MÓVIL PANEL CAMBIOS DE TURNOS      */
/* ======================================================= */

/* Solo se aplica en pantallas pequeñas (móviles) */
@media (max-width: 600px) {
    /* 1. Cambiamos el layout del contenedor de acciones */
    .cambio-actions {
        flex-direction: column; /* Apila los elementos verticalmente */
        align-items: flex-end;  /* Alinea todo a la derecha */
        gap: 5px; /* Espacio entre el botón de estado y el grupo de iconos */
    }

    /* 2. Contenedor para los dos iconos de abajo */
    .cambio-icon-actions {
        display: flex;
        gap: 5px; /* Espacio entre la pluma y la papelera */
    }
}

/* 3. Nuevos colores para los botones de icono (aplicado en todas las vistas) */

/* Botón Editar: fondo azul corporativo */
.cambio-actions .edit-cambio-btn {
    background-color: var(--primary-color);
    color: white;
}
.cambio-actions .edit-cambio-btn:hover {
    background-color: var(--primary-color-dark);
}

/* Botón Eliminar: fondo transparente y color rojo (similar a Peticiones) */
.cambio-actions .delete-cambio-btn {
    background: transparent;
    color: var(--red-color);
    font-size: 1.1em !important; /* Ligeramente más grande para compensar la falta de fondo */
    box-shadow: none;
}
.cambio-actions .delete-cambio-btn:hover {
    background: rgba(220, 53, 69, 0.1); /* Ligero fondo rojo en hover */
    transform: none;
    box-shadow: none;
}

/* ======================================================= */
/*   UNIFICACIÓN ESTILO PAPELERA (PANEL LICENCIAS)       */
/* ======================================================= */

/* Aplica el estilo transparente a la papelera del panel de licencias */
.licencia-item .delete-licencia-btn {
    background: transparent;
    color: var(--red-color);
    font-size: 1.1em !important; /* Mismo tamaño que la otra papelera */
    box-shadow: none;
    border: none;
}

.licencia-item .delete-licencia-btn:hover {
    background: rgba(220, 53, 69, 0.1); /* Ligero fondo rojo en hover */
    transform: none;
    box-shadow: none;
}

/* ======================================================= */
/*   UNIFICACIÓN ESTILO PAPELERA (PANEL LICENCIAS)       */
/* ======================================================= */

/* Aplica el estilo transparente a la papelera del panel de licencias */
.licencia-item .delete-licencia-btn {
    background: transparent;
    color: var(--red-color);
    font-size: 1.1em !important; /* Mismo tamaño que la otra papelera */
    box-shadow: none;
    border: none;
}

.licencia-item .delete-licencia-btn:hover {
    background: rgba(220, 53, 69, 0.1); /* Ligero fondo rojo en hover */
    transform: none;
    box-shadow: none;
}

/* ======================================================= */
/*   AJUSTE DE CONTRASTE PARA CAMBIOS DE TURNO 'HECHO'   */
/* ======================================================= */

/*
 * Fuerza el color del texto a ser oscuro para el estado 'hecho',
 * garantizando la legibilidad sobre el fondo verde claro en ambos temas.
 */
.cambio-item.status-hecho .cambio-info span {
    color: #333 !important;
}

/* ============================================================= */
/*       AJUSTES PARA BOTONERA DEL TABLÓN DEL COORDINADOR        */
/* ============================================================= */

/* Esto hace que el contenedor distribuya el espacio entre los botones */
.coordinator-button-bar {
    display: flex;
    justify-content: space-between;
    gap: 4px; /* Espacio uniforme entre botones */
}

/* Esto solo se aplicará al contenedor si el usuario es coordinador (gracias al JS) */
.coordinator-button-bar button {
    flex-grow: 1;            /* CLAVE: Hace que todos los botones tiendan a ocupar el mismo espacio */
    padding: 8px 3px;        /* Un poco más de alto, pero menos de ancho */
    font-size: 0.8rem;       /* Reducimos un poco más la fuente */
    margin: 0;               /* Quitamos el margen, el 'gap' del contenedor ya se encarga */
    white-space: normal;     /* Permite que el texto largo se parta en dos líneas si es necesario */
    line-height: 1.2;        /* Mejora el espaciado si el texto se parte */
    word-break: break-word;  /* Fuerza el partido de palabras si es extremadamente necesario */
}

/* ============================================================= */
/*       AJUSTES PARA PANEL DE DOCUMENTOS (POR ROLES)          */
/* ============================================================= */

/* Deshabilita la edición y cambia el cursor para no-coordinadores */
.documento-file-name[contenteditable="false"] {
    pointer-events: none;
    cursor: default;
}

/* ======================================================= */
/*    CORRECCIÓN CRÍTICA: SPLASH SCREEN NO BLOQUEANTE      */
/* ======================================================= */

.splash.oculto {
    opacity: 0;
    pointer-events: none; /* La propiedad que faltaba */
    visibility: hidden;   /* Mejor que visibility 0s 0.5s */
}

/* =================================================================== */
/*           ESTILOS PANTALLA DE ACCESO (UNIFICADO v6.6)           */
/* =================================================================== */

/* 1. Contenedor que mostraremos a los usuarios sin grupo */
#individual-mode-welcome {
    padding: 20px;
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin: 20px;
    text-align: center;
}

#individual-mode-welcome h2 {
    margin-top: 0;
    color: var(--primary-color);
}

/* 2. Estilos para el campo de clave de grupo */
#auth-section #group-key-input {
    width: 90%; 
    display: block;
    margin: 15px auto;
    background-color: var(--saturday-bg) !important; /* Forzamos color de fondo */
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;
    color: #000;
    padding: 12px; /* Aumentamos padding para igualar altura */
    border-radius: 8px;
     border: 1px solid #b0b0b0; /* Borde grisáceo más visible por defecto */
    transition: border-color 0.2s, box-shadow 0.2s; /* Transición suave para el foco */
}

/* --- ADICIÓN --- Estilo al hacer clic (foco) en el campo */
#auth-section #group-key-input:focus {
    outline: none; /* Quitamos el borde por defecto del navegador */
    border-color: var(--primary-color); /* Cambia el borde a color primario */
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2); /* Resplandor azulado sutil */
}
#auth-section #group-key-input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

/* 3. Estilo para el botón de "Uso individual" */
/* Usamos el ID del formulario para darle más especificidad y !important por si acaso */
#auth-section #btn-individual-mode {
    background-color: #FAD7A0 !important;
    color: #000 !important;
    border: none !important;
    padding: 12px !important; /* Añadimos padding para igualar altura */
    margin-top: 8px;
    font-size: 1rem;       /* Aseguramos mismo tamaño de fuente */
    font-weight: 600;      /* Aseguramos mismo grosor de fuente */
}

#auth-section #btn-individual-mode:hover {
    background-color: #f7c786 !important;
    color: #000 !important;
}

/* ============================================================= */
/*        PUNTO ROJO DE NOTIFICACIÓN (Tablón y Documentos)     */
/* ============================================================= */

/* Este estilo crea el punto rojo cuando un botón tiene la clase .has-notification */
.nav-btn.has-notification::before {
    content: '';
    position: absolute;
    top: 6px;
    right: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #dc3545; /* Rojo de notificación */
    border: 2px solid var(--nav-bg); 
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
    z-index: 2;
}

/* Si el botón activo es el que tiene la notificación, ajustamos el borde del punto
   para que coincida con el nuevo color de fondo del botón. */
.nav-btn.active.has-notification::before {
    border-color: var(--nav-active-bg);
}

/* IMPORTANTE: Esto oculta el punto rojo si el botón ya muestra un contador
   numérico (como es el caso de "Peticiones"). Así evitamos duplicados. */
.nav-btn[data-count]:not([data-count=""]):not([data-count="0"])::before {
    display: none;
}

/* ============================================================= */
/*           ESTILO PARA RESALTAR EL DÍA ACTUAL                  */
/* ============================================================= */

/* Seleccionamos la celda que tiene la clase 'today' */
.day-cell.today .day-label {
    background-color: var(--primary-color); /* Usamos el color azul principal de la app */
    color: white; /* Texto blanco para que contraste con el fondo azul */
    border-radius: 50%; /* Lo convierte en un círculo perfecto */
    width: 24px;       /* Ancho y alto fijos para el círculo */
    height: 24px;
    line-height: 24px; /* Centra el número verticalmente */
    margin: 0 auto 4px auto; /* Centra el círculo horizontalmente */
    font-weight: bold;
}

/* En el tema oscuro, el azul por defecto es un poco claro.
   Usaremos una variable más oscura para asegurar el contraste. */
[data-theme="dark"] .day-cell.today .day-label {
    background-color: var(--primary-color-dark);
}


/* ============================================================= */
/*           ESTILO PARA RESALTAR EL DÍA ACTUAL                  */
/* ============================================================= */

/* ... (el estilo para .today que ya teníamos) ... */
[data-theme="dark"] .day-cell.today .day-label {
    background-color: var(--primary-color-dark);
}

/* ▼▼▼ INICIO DEL CAMBIO ▼▼▼ */

/* ================================================================= */
/*       ESTILOS PARA VISTA LIMPIA DE CALENDARIO (CADENCIA)        */
/* ================================================================= */

/*
 * Por defecto, en los días sin cadencia, hacemos el texto y
 * el selector de color muy tenues para no sobrecargar la vista.
 * Siguen siendo funcionales al tacto/clic.
*/

/* 1. Hacemos el texto del turno (M, T, N) casi transparente */
.day-cell.no-cadence-day .shift-text {
    opacity: 0.2;
    transition: opacity 0.2s ease; /* Transición suave por si la añadimos en el futuro */
}

/* 2. Hacemos el botón de color casi transparente pero funcional */
.day-cell.no-cadence-day .color-handle {
    opacity: 0.15;
    transition: opacity 0.2s ease;
}

/*
 * Si un usuario ha editado manualmente un día sin cadencia (ha puesto
 * texto o un color), queremos que ese día resalte y no se atenúe.
 * Para ello, le quitamos la opacidad al texto si tiene la marca de editado.
*/
.day-cell.no-cadence-day .shift-cell[data-edited="true"] .shift-text,
.day-cell.no-cadence-day .shift-cell[data-user-color="true"] .shift-text {
    opacity: 1;
}

.day-cell.no-cadence-day .shift-cell[data-user-color="true"] + .color-handle {
    opacity: 1;
}

/* ▲▲▲ FIN DEL CAMBIO ▲▲▲ */

/* Estilos para el botón de mostrar/ocultar contraseña */
.password-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
    /* Hacemos que el input ocupe todo el ancho del contenedor padre */
    width: 100%; 
    /* Añadimos un padding a la derecha para que el texto no se solape con el botón */
    padding-right: 40px; 
}

.toggle-password-btn {
    position: absolute;
    right: 5px; /* Posición desde la derecha */
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.2rem; /* Tamaño del icono */
    color: #666; /* Color del icono */
    padding: 5px;
    z-index: 10;
}

.toggle-password-btn:hover {
    color: #000;
}

/* Ajuste para barras de estado en móvil */
body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* ============================================================= */
/*           ESTILOS PARA EL INTERRUPTOR (TOGGLE SWITCH)         */
/* ============================================================= */

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3; /* Color azul cuando está activo */
}

input:checked + .slider:before {
  transform: translateX(22px);
}

.slider.round {
  border-radius: 28px;
}

.slider.round:before {
  border-radius: 50%;
}