/* ===== Variables CSS globales ===== */
:root {
  --color-primary: #00A1FF;
  --color-primary-light: #5192f3;
  --color-primary-hover: #a1cbf9;
  --color-primary-dark: #0c1749;
  --color-accent: #0d6efd;
  --color-success: green;
  --color-danger: red;
  --color-warning: orange;
  --color-text: #333;
  --color-text-muted: #555;
  --color-text-light: #888;
  --color-bg: #fff;
  --color-bg-muted: #f8f8f8;
  --color-bg-surface: #f1f3f7;
  --color-card-bg: #fff;
  --color-popover-bg: #fff;
  --color-hover: rgba(59,130,246,0.04);
  --color-border: #dee2e6;
  --color-border-light: #ccc;
  --fs-xs: 0.75rem;
  --fs-sm: 0.85rem;
  --fs-base: 1rem;
  --fs-md: 1.05rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.6rem;
  --radius-sm: 0.35rem;
  --radius-md: 6px;
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  /* Tokens extendidos para componentes reutilizables (barra de listado, etc.) */
  --color-background-primary: #fff;
  --color-background-secondary: #f3f4f6;
  --color-background-info: rgba(24, 95, 165, 0.10);
  --color-border-tertiary: #e5e7eb;
  --color-border-secondary: #d1d5db;
  --color-border-info: #185FA5;
  --color-text-primary: #1f2937;
  --color-text-secondary: #4b5563;
  --color-text-tertiary: #6b7280;
  --color-text-info: #185FA5;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  /* Breakpoint único: 768px */
}

/* ===== Dark mode (auto + manual toggle) ===== */
/* Paleta:
   Fondo     #090D24 (lienzo de la app)
   Surface   #0E1649 (tarjetas y paneles)
   Surface 2 #18204F (modales, menús)
   Surface 3 #222C63 (popovers, tooltips) → variable nueva --color-popover-bg */
/* Shared dark variables — applied by system preference OR manual toggle */
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) {
    --color-text: #E8ECF7;
    --color-text-muted: #B7BFD9;
    --color-text-light: #8B94B5;
    --color-bg: #090D24;
    --color-bg-muted: #0B113A;
    --color-bg-surface: #18204F;
    --color-card-bg: #0E1649;
    --color-popover-bg: #222C63;
    --color-hover: rgba(255,255,255,0.04);
    --color-border: #222C63;
    --color-border-light: #2D386F;
    --color-text-primary: #E8ECF7;
    --color-text-secondary: #B7BFD9;
    --color-text-tertiary: #8B94B5;
    --color-background-primary: #090D24;
    --color-background-secondary: #0E1649;
    --color-background-info: rgba(81, 146, 243, 0.18);
    --color-border-tertiary: #222C63;
    --color-border-secondary: #2D386F;
    color-scheme: dark;
  }
}
.dark-mode {
  --color-text: #E8ECF7;
  --color-text-muted: #B7BFD9;
  --color-text-light: #8B94B5;
  --color-bg: #090D24;
  --color-bg-muted: #0B113A;
  --color-bg-surface: #18204F;
  --color-card-bg: #0E1649;
  --color-popover-bg: #222C63;
  --color-hover: rgba(255,255,255,0.04);
  --color-border: #222C63;
  --color-border-light: #2D386F;
  --color-text-primary: #E8ECF7;
  --color-text-secondary: #B7BFD9;
  --color-text-tertiary: #8B94B5;
  --color-background-primary: #090D24;
  --color-background-secondary: #0E1649;
  --color-background-info: rgba(81, 146, 243, 0.18);
  --color-border-tertiary: #222C63;
  --color-border-secondary: #2D386F;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  body:not(.light-mode),
  .dark-mode {
    background-color: var(--color-bg);
    color: var(--color-text);
  }
}
.dark-mode,
.dark-mode body {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .card,
  :root:not(.light-mode) .modal-content,
  :root:not(.light-mode) .dropdown-menu {
    background-color: var(--color-bg-muted) !important;
    color: var(--color-text);
    border-color: var(--color-border);
  }
}
.dark-mode .card,
.dark-mode .modal-content,
.dark-mode .dropdown-menu {
  background-color: var(--color-bg-muted) !important;
  color: var(--color-text);
  border-color: var(--color-border);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .navbar:not(.portal-navbar),
  :root:not(.light-mode) .bg-light {
    background-color: var(--color-bg-muted) !important;
  }
}
.dark-mode .navbar:not(.portal-navbar),
.dark-mode .bg-light {
  background-color: var(--color-bg-muted) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .form-control,
  :root:not(.light-mode) .form-select {
    background-color: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
  }
  :root:not(.light-mode) .form-control:focus,
  :root:not(.light-mode) .form-select:focus {
    background-color: var(--color-bg);
    color: var(--color-text);
  }
}
.dark-mode .form-control,
.dark-mode .form-select {
  background-color: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border-light);
  border-width: 1.5px;
}
.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
  background-color: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border-light);
}

/* Placeholders más visibles en dark mode */
.dark-mode .form-control::placeholder,
.dark-mode .form-select::placeholder,
.dark-mode textarea::placeholder,
.dark-mode input::placeholder {
  color: #c0c6d0 !important;
  opacity: 1 !important;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .form-control,
  :root:not(.light-mode) .form-select {
    background-color: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border-light);
    border-width: 1.5px;
  }
  :root:not(.light-mode) .form-control:focus,
  :root:not(.light-mode) .form-select:focus {
    background-color: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border-light);
  }
  :root:not(.light-mode) .form-control::placeholder,
  :root:not(.light-mode) .form-select::placeholder,
  :root:not(.light-mode) textarea::placeholder,
  :root:not(.light-mode) input::placeholder {
    color: #c0c6d0 !important;
    opacity: 1 !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .dropdown-item {
    color: var(--color-text);
  }
  :root:not(.light-mode) .dropdown-item:hover,
  :root:not(.light-mode) .dropdown-item:focus {
    background-color: var(--color-border);
    color: var(--color-text);
  }
  :root:not(.light-mode) .btn-outline-secondary {
    color: var(--color-text-muted);
    border-color: var(--color-border);
  }
  :root:not(.light-mode) #footer_esquio {
    background-color: var(--color-primary-dark) !important;
  }
  :root:not(.light-mode) hr {
    border-color: var(--color-border) !important;
  }
  :root:not(.light-mode) .table {
    color: var(--color-text);
  }
}
.dark-mode .dropdown-item {
  color: var(--color-text);
}
.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
  background-color: var(--color-border);
  color: var(--color-text);
}
.dark-mode .btn-outline-secondary {
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.dark-mode #footer_esquio {
  background-color: var(--color-primary-dark) !important;
}
.dark-mode hr {
  border-color: var(--color-border) !important;
}
.dark-mode .table {
  color: var(--color-text);
  --bs-table-color: var(--color-text);
  --bs-table-striped-color: var(--color-text);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
}
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .table {
    color: var(--color-text);
    --bs-table-color: var(--color-text);
    --bs-table-striped-color: var(--color-text);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  }
}

/* Dark mode toggle button */
.dark-mode-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
}
.dark-mode-toggle i {
  font-size: 1.1rem;
}

/* ===== Tipografía global =====
   Poppins en todos los pesos comunes. Cada @font-face mapea el peso
   numérico al fichero correspondiente para que font-weight: 300/400/500/600/700
   resuelva al archivo correcto sin que el navegador tenga que sintetizar. */
@font-face {
  font-family: 'Poppins';
  src: url('Poppins/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('Poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('Poppins/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('Poppins/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('Poppins/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('Poppins/Poppins-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

html, body {
  font-family:
    "Poppins",
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
}

/* En móvil, nunca permitir scroll horizontal de la página:
   algún elemento (barra, modal, tabla) puede pasar 1-2px y desplazar todo
   haciendo que el bottom-nav y el contenido no cuadren. */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
}

/* ===== Transiciones globales ===== */
.btn,
button,
a,
.form-control,
.form-select,
.dropdown-item {
  transition: all var(--transition-fast);
}
.btn:active:not(:disabled) {
  transform: scale(0.97);
}
.dropdown-item:hover {
  background-color: var(--color-primary-hover);
}

/* ===== Focus visible para accesibilidad ===== */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.btn:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 0.2rem rgba(2, 101, 189, 0.25);
}

/* ===== Flecha del header ===== */
.flecha_volver {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0.25rem;
  border-radius: var(--radius-sm);
  transition: transform var(--transition-fast);
  color: inherit;
}
.flecha_volver:focus {
  outline: revert;
}
#flecha_header:hover,
.flecha_volver:hover {
  transform: scale(1.12);
}

/* Flecha más visible en dark mode */
.dark-mode #flecha_header,
.dark-mode .flecha_volver {
  color: #f0f2f5;
  opacity: 1;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) #flecha_header,
  :root:not(.light-mode) .flecha_volver {
    color: #f0f2f5;
    opacity: 1;
  }
}

/* ===== FAB Jornada (Floating Action Button) ===== */
.fab-jornada {
  position: fixed !important;
  bottom: 24px !important; /* Valor para escritorio */
  right: 24px !important;
  z-index: 1060 !important;
  left: auto !important;
  top: auto !important;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
}
.fab-jornada:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}
.fab-jornada:active {
  transform: scale(0.95);
}
.fab-jornada-entrar {
  background: linear-gradient(135deg, #10b981, #059669);
}
.fab-jornada-salir {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}
.fab-hidden {
  display: none !important;
}
@keyframes fabBounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(30px);
  }
  60% {
    opacity: 1;
    transform: scale(1.1) translateY(-5px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
@media (max-width: 768px) {
  .fab-jornada {
    /* Subimos el botón para que no tape el navBar. 
       Ajusta el valor de 100px según el alto de tu barra */
    bottom: 75px !important; 
    right: 16px !important;
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
  }
}
#InicioFin_Jornada img {
  /* legacy — keep for backwards compat if img still used */
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}
#InicioFin_Jornada:hover img {
  box-shadow: 0 6px 20px rgba(2, 101, 189, 0.3);
}

/* ===== Estilos iconos ===== */
/* Legacy img icons (keep for backwards compat) */
.pdf_icono {
  width: auto;
  max-width: 1.6rem;
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.35rem;
  transition: transform var(--transition-fast);
}
.bolsa_dinero {
  width: auto;
  max-width: 1.6rem;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.6rem;
  transition: transform var(--transition-fast);
}
.bolsa_dinero:hover,
.pdf_icono:hover {
  transform: scale(1.07);
}

/* ===== Action icon buttons (Bootstrap Icons) ===== */
.btn-accion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--color-primary, #0265bd);
  font-size: 1.1rem;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    transform 0.15s;
  margin-left: 2px;
  padding: 0;
}
.btn-accion:hover {
  background: rgba(2, 101, 189, 0.1);
  transform: scale(1.1);
}

/* ===== Toggle switch para modo acción ventas (genérico) ===== */
.toggle-accion {
  display: inline-block;
  width: 34px;
  height: 18px;
  position: relative;
  flex-shrink: 0;
}
.toggle-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #ccc;
  border-radius: 18px;
  transition: background 0.2s;
  cursor: pointer;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.check-accion:checked + .toggle-slider {
  background: #0265bd;
}
.check-accion:checked + .toggle-slider::before {
  transform: translateX(16px);
}

/* ===== Botón flotante acción ventas ===== */
.float-accion-ventas {
  position: fixed;
  bottom: 110px;
  right: 35px;
  z-index: 1020;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.float-accion-ventas-btn {
  border-radius: 50px;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  border: none;
  transition: filter 0.2s, transform 0.15s;
  box-shadow: 0 6px 20px rgba(2, 101, 189, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.float-accion-ventas-btn:hover,
.float-accion-ventas-btn:focus {
  filter: brightness(1.1);
  color: #fff;
  transform: scale(1.03);
}
.float-accion-ventas-btn:active {
  transform: scale(0.97);
}
.float-accion-ventas-btn-sec {
  border-radius: 50px;
  padding: 10px 20px;
  font-size: 0.9rem;
  white-space: nowrap;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  transition: background 0.2s, transform 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.float-accion-ventas-btn-sec:hover,
.float-accion-ventas-btn-sec:focus {
  background: var(--color-bg-muted);
  color: var(--color-text);
  transform: scale(1.03);
}
.float-accion-ventas-barra {
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
@media (max-width: 576px) {
  .float-accion-ventas {
    bottom: 78px;
    right: 78px;
    left: auto;
    flex-direction: row-reverse;
    align-items: center;
    gap: 12px;
  }
  .float-accion-ventas-barra {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .float-accion-ventas .fav-label {
    display: none;
  }
  .float-accion-ventas-btn {
    width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 50%;
    font-size: 1.35rem;
    gap: 0;
  }
  .float-accion-ventas-btn i {
    font-size: 1.35rem;
  }
  .float-accion-ventas-btn-sec {
    width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 50%;
    font-size: 1.35rem;
    gap: 0;
  }
  .float-accion-ventas-btn-sec i {
    font-size: 1.35rem;
  }
  body.modo-accion-activo .float-accion-ventas {
    right: 16px;
  }
}

/* Toggle acción ventas — dark mode */
.dark-mode .toggle-slider,
:root:not(.light-mode) .toggle-slider {
  background: var(--color-border);
}
.dark-mode .check-accion:checked + .toggle-slider,
:root:not(.light-mode) .check-accion:checked + .toggle-slider {
  background: var(--color-primary);
}

/* ===== Modal líneas acción — layout ===== */
.modal-lineas-accion {
  max-width: 700px;
  width: 95vw;
}
/* Móvil: ocupar todo el ancho disponible (modal tipo bottom-sheet de Bootstrap) */
@media (max-width: 768px) {
  .modal-lineas-accion {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .modal-lineas-content {
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
  }
  .modal-lineas-header {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .modal-lineas-header .modal-title { font-size: 0.95rem; }
  .modal-lineas-search { padding: 8px 12px; }
  .modal-lineas-footer {
    padding: 10px 12px;
    gap: 6px;
    flex-wrap: wrap;
  }
  .modal-lineas-footer .btn { font-size: 0.82rem; padding: 6px 10px; }
  .linea-accion-item { padding: 10px 12px; }
}
.modal-lineas-content {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  max-height: 85vh;
}
.modal-lineas-header {
  border-bottom: 1px solid var(--color-border);
  padding: 12px 16px;
  display: flex;
  align-items: center;
}
.modal-lineas-footer {
  border-top: 1px solid var(--color-border);
  padding: 10px 16px;
}
.modal-lineas-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-muted);
}
.modal-lineas-search input::placeholder {
  color: var(--color-text-light);
}

/* Filas de líneas dentro del modal */
.linea-accion-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border-light);
  cursor: pointer;
  transition: background 0.15s;
}
.linea-accion-item:hover {
  background: rgba(2, 101, 189, 0.04);
}
.linea-accion-item:last-child {
  border-bottom: none;
}
.linea-accion-item.search-highlight {
  background: rgba(255, 193, 7, 0.15);
}
.linea-accion-item.search-current {
  background: rgba(255, 193, 7, 0.35);
}
.linea-accion-check {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}
.linea-accion-desc {
  flex: 1;
  min-width: 0;
}
.linea-accion-desc-nombre {
  font-weight: 600;
  font-size: 0.9em;
  color: var(--color-text);
}
.linea-accion-desc-codigo {
  font-size: 0.8em;
  color: var(--color-text-muted);
}
.linea-accion-desc-detalle {
  font-size: 0.8em;
  color: var(--color-text-light);
}
.linea-accion-importe {
  font-weight: 600;
  font-size: 0.9em;
  white-space: nowrap;
  color: var(--color-text);
}

/* Dark mode overrides para el modal */
.dark-mode .modal-lineas-content,
:root:not(.light-mode) .modal-lineas-content {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border);
}
.dark-mode .modal-lineas-header,
:root:not(.light-mode) .modal-lineas-header {
  border-bottom-color: var(--color-border);
}
.dark-mode .modal-lineas-footer,
:root:not(.light-mode) .modal-lineas-footer {
  border-top-color: var(--color-border);
}
.dark-mode .modal-lineas-search,
:root:not(.light-mode) .modal-lineas-search {
  background: var(--color-bg-muted);
  border-bottom-color: var(--color-border);
}
.dark-mode .linea-accion-item,
:root:not(.light-mode) .linea-accion-item {
  border-bottom-color: var(--color-border);
}
.dark-mode .linea-accion-item:hover,
:root:not(.light-mode) .linea-accion-item:hover {
  background: rgba(255, 255, 255, 0.03);
}
.dark-mode .linea-accion-item.search-highlight,
:root:not(.light-mode) .linea-accion-item.search-highlight {
  background: rgba(255, 193, 7, 0.1);
}
.dark-mode .linea-accion-item.search-current,
:root:not(.light-mode) .linea-accion-item.search-current {
  background: rgba(255, 193, 7, 0.25);
}

/* Fila marcada en modo acción */
.fila-accion-marcada {
  background: rgba(2, 101, 189, 0.14) !important;
}

/* Móvil: en modo acción, los badges (Total/Parcial + precio) caen a la línea
   inferior para no cortarse junto al estado y al botón de elegir líneas. */
@media (max-width: 768px) {
  .badges-accion-wrap {
    display: block;
    margin-top: 4px;
  }
  .badges-accion-wrap .badge-tipo-accion {
    margin-left: 0 !important;
  }
}
.dark-mode .fila-accion-marcada,
:root:not(.light-mode) .fila-accion-marcada {
  background: rgba(81, 146, 243, 0.22) !important;
}

/* Badge importe en fila — dark mode */
.dark-mode .badge-importe-accion,
:root:not(.light-mode) .badge-importe-accion {
  background: #c88a00 !important;
  color: #fff !important;
}

/* Precio total en modal header — dark mode */
.dark-mode #modalLineasTotal,
:root:not(.light-mode) #modalLineasTotal {
  background: #c88a00;
  color: #fff;
}


/* =========================================================
   NUEVO PEDIDO / DOCUMENTO DE VENTA — Diseño tipo Holded/Odoo
   Genérico multi-documento (pedido / factura / presupuesto)
   ========================================================= */

.np-page {
  --np-gap: 16px;
  --np-radius: 10px;
  --np-border: var(--color-border);
  --np-dirty: #f59e0b;
  --np-error: #ef4444;
  --np-ok: #10b981;

  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 16px 120px 16px;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: var(--np-gap);
}

/* ========= CARDS ========= */
.np-card {
  background: var(--color-bg);
  border: 1px solid var(--np-border);
  border-radius: var(--np-radius);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: visible;
}

/* ========= DATOS PRINCIPALES ========= */
.np-principal { padding: 0; }
.np-principal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  flex-wrap: wrap;
  border-top-left-radius: var(--np-radius);
  border-top-right-radius: var(--np-radius);
}
.np-principal-title {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.np-principal-tipo {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}
.np-principal-num {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.82);
  font-weight: 500;
  margin-top: 3px;
}
.np-principal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.np-principal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 14px;
  padding: 14px 18px;
}

/* ========= SECCIONES (Cabecera, Líneas) ========= */
.np-section { padding: 0; }
.np-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(2, 101, 189, 0.14), rgba(2, 101, 189, 0.07));
  border-bottom: 1px solid rgba(2, 101, 189, 0.25);
  border-top-left-radius: var(--np-radius);
  border-top-right-radius: var(--np-radius);
}
.np-section-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.np-section-title i { color: var(--color-primary); font-size: 0.95rem; }

/* Sección colapsable */
.np-section-collapsible .np-section-head { cursor: pointer; user-select: none; }
.np-section-toggle {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: background .15s, transform .25s;
  margin-left: auto;
}
.np-section-toggle:hover { background: rgba(2, 101, 189, 0.12); }
.np-section-collapsible.np-section-collapsed .np-section-toggle { transform: rotate(-90deg); }
.np-section-collapsible.np-section-collapsed .np-section-grid { display: none; }
.np-section-collapsible.np-section-collapsed .np-section-head { border-bottom: none; }
.np-section-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  gap: 2px;
}
.np-total-main {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.np-total-main strong {
  color: var(--color-primary);
  font-size: 1.1rem;
  font-weight: 700;
  margin-left: 4px;
}
.np-total-con-iva {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  opacity: 0.85;
}
.np-total-con-iva span { font-weight: 600; }
.np-section-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 14px;
  padding: 14px 16px;
}

/* ========= CAMPOS ========= */
.np-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}
.np-field label {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 3px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.np-field input,
.np-field select,
.np-field textarea {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--np-border);
  border-radius: 6px;
  font-size: 0.82rem;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.np-field input:focus,
.np-field select:focus,
.np-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(2, 101, 189, 0.12);
}
.np-field input:read-only:not(#npCaractCliente) {
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
}
.np-field-textarea { grid-column: 1 / -1; }
.np-field-textarea textarea { resize: vertical; min-height: 60px; }
.np-field[hidden] { display: none !important; }

.np-field.np-field-dirty > input,
.np-field.np-field-dirty > select,
.np-field.np-field-dirty > textarea {
  border-left: 3px solid var(--np-dirty);
  padding-left: 9px;
}
.np-field.np-field-dirty > label::after {
  content: "●"; color: var(--np-dirty); margin-left: 6px; font-size: 0.65rem;
}
.np-field.np-field-error > input,
.np-field.np-field-error > select,
.np-field.np-field-error > textarea {
  border-color: var(--np-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

/* Buscador con dropdown (cliente) */
.np-buscador { position: relative; }
.np-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 320px;
  z-index: 1050;
  background: var(--color-bg);
  border: 1px solid var(--np-border);
  border-radius: 12px;
  max-height: 340px;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.08);
  padding: 4px;
}
.np-dropdown .np-art-option {
  border-radius: 8px;
  border-bottom: none;
  margin: 2px 0;
  padding: 10px 12px;
  transition: background .12s;
}
.np-dropdown .np-art-option:hover {
  background: linear-gradient(135deg, rgba(2, 101, 189, 0.1), rgba(2, 101, 189, 0.05));
}
.np-dropdown .np-art-option-desc { font-weight: 600; color: var(--color-text); }
.np-dropdown .np-art-option-codigo { font-size: 0.72rem; opacity: 0.8; }

/* ========= BADGES Y ESTADO SYNC (sobre fondo azul) ========= */
.np-badge-dirty {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 200, 80, 0.22);
  color: #ffd580;
  border: 1px solid rgba(255, 200, 80, 0.4);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.np-badge-dirty i { font-size: 0.48rem; }

.np-sync {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 0.95rem;
  cursor: default;
  overflow: hidden;
}
.np-sync-label { display: none; }
.np-sync-ok            { background: rgba(16, 185, 129, 0.35); border-color: rgba(16, 185, 129, 0.6); }
.np-sync-local         { background: rgba(245, 158, 11, 0.38); border-color: rgba(245, 158, 11, 0.6); }
.np-sync-sincronizando { background: rgba(59, 130, 246, 0.45); border-color: rgba(59, 130, 246, 0.8); }
.np-sync-sincronizando i { animation: np-spin 1.2s linear infinite; }
.np-sync-error         { background: rgba(239, 68, 68, 0.4); border-color: rgba(239, 68, 68, 0.7); cursor: pointer; }
@keyframes np-spin { to { transform: rotate(360deg); } }

/* ========= BOTÓN AJUSTES (abre drawer) ========= */
.np-btn-ajustes {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: all .15s;
}
.np-btn-ajustes:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.5);
}

/* ========= BOTÓN GUARDAR SPLIT (sobre fondo azul) ========= */
.np-btn-guardar-grupo {
  position: relative;
  display: inline-flex;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  border-radius: 8px;
}
.np-btn-guardar-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: #fff;
  color: var(--color-primary);
  border: none;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.np-btn-guardar-main:hover { background: rgba(255,255,255,0.92); color: var(--color-primary-dark); }
.np-btn-guardar-drop {
  width: 30px;
  padding: 0;
  background: #fff;
  color: var(--color-primary);
  border: none;
  border-left: 1px solid rgba(2, 101, 189, 0.18);
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  cursor: pointer;
  font-size: 0.82rem;
}
.np-btn-guardar-drop:hover { background: rgba(255,255,255,0.92); }
.np-guardar-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--color-bg);
  border: 1px solid var(--np-border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
  z-index: 10;
  overflow: hidden;
}
.np-guardar-menu.np-menu-visible { display: block; }
.np-guardar-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 11px 14px; background: transparent; border: none;
  color: var(--color-text); font-size: 0.88rem; cursor: pointer; text-align: left;
}
.np-guardar-menu button:hover { background: var(--color-bg-muted); }
.np-guardar-menu button i { color: var(--color-primary); font-size: 0.95rem; }

/* ========= TABLA DE LÍNEAS ========= */
.np-lines-wrap { overflow-x: auto; }
.np-lines-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.np-lines-table thead th {
  padding: 10px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-bg-muted);
  border-bottom: 1px solid var(--np-border);
  text-align: left;
}
.np-lines-table tbody tr {
  border-bottom: 1px solid var(--color-border-light);
  transition: background .15s;
}
.np-lines-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.015); }
.np-lines-table tbody tr:hover { background: var(--color-bg-muted); }
.np-lines-table tbody tr.np-line-dirty { box-shadow: inset 3px 0 0 var(--np-dirty); }
.np-lines-table tbody tr.np-line-nueva { box-shadow: inset 3px 0 0 var(--np-ok); }
.np-lines-table tbody tr.np-line-error { box-shadow: inset 3px 0 0 var(--np-error); background: rgba(239, 68, 68, 0.05); }
.np-lines-table td { padding: 8px 6px; vertical-align: middle; }

/* Columnas: orden, codigo, desc, cant, um, precio, dto, iva, importe, acciones */
.np-th-orden,    .np-lines-table td:nth-child(1)  { width: 34px; text-align: center; color: var(--color-text-muted); font-size: 0.76rem; }
.np-th-codigo,   .np-lines-table td:nth-child(2)  { width: 12%; }
.np-th-desc,     .np-lines-table td:nth-child(3)  { width: auto; }
.np-th-cant,     .np-lines-table td:nth-child(4)  { width: 80px; text-align: right; }
.np-th-um,       .np-lines-table td:nth-child(5)  { width: 64px; text-align: center; }
.np-th-precio,   .np-lines-table td:nth-child(6)  { width: 100px; text-align: right; }
.np-th-dto,      .np-lines-table td:nth-child(7)  { width: 72px; text-align: right; }
.np-th-iva,      .np-lines-table td:nth-child(8)  { width: 76px; text-align: right; }
.np-th-importe,  .np-lines-table td:nth-child(9)  { width: 112px; text-align: right; }
.np-th-acciones, .np-lines-table td:nth-child(10) { width: 44px; text-align: center; }

.np-input {
  width: 100%;
  height: 34px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.85rem;
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  line-height: 1;
  box-sizing: border-box;
  transition: all .15s;
}
.np-input:is(select) { padding: 0 4px; }
.np-lines-table td > .np-input,
.np-lines-table td > .np-art-buscar > .np-input { vertical-align: middle; }
.np-input:hover { background: var(--color-bg); border-color: var(--color-border-light); }
.np-input:focus {
  outline: none;
  background: var(--color-bg);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(2, 101, 189, 0.12);
}
.np-input-num { text-align: right; }
.np-input-um  { text-align: center; padding: 7px 4px; }
.np-total-linea { text-align: right; font-weight: 700; font-size: 0.9rem; padding-right: 10px !important; }


.np-acciones-cell { white-space: nowrap; text-align: center; }
.np-line-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all .15s;
}
.np-line-action:hover { background: rgba(2, 101, 189, 0.08); color: var(--color-primary); }
.np-line-action-delete:hover { background: rgba(239, 68, 68, 0.1); color: var(--np-error); }

.np-lines-empty td {
  padding: 40px 16px !important;
  text-align: center !important;
  color: var(--color-text-muted);
}
.np-lines-empty i { font-size: 2rem; display: block; margin-bottom: 8px; opacity: 0.5; }
.np-lines-empty span { font-size: 0.9rem; }
.np-lines-empty:hover { background: transparent !important; }

.np-lines-add {
  padding: 12px 18px;
  border-top: 1px solid var(--color-border-light);
}
.np-btn-add-linea {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px dashed var(--color-primary);
  color: var(--color-primary);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.np-btn-add-linea:hover { background: rgba(2, 101, 189, 0.08); }

/* Dropdown artículos flotante */
.np-art-buscar { position: relative; }
.np-art-dropdown {
  display: none;
  position: fixed;
  z-index: 1060;
  background: var(--color-bg);
  border: 1px solid var(--np-border);
  border-radius: 12px;
  max-height: 340px;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.08);
  padding: 4px;
}
.np-art-option {
  display: flex; gap: 10px; padding: 10px 12px; cursor: pointer;
  font-size: 0.84rem; align-items: center;
  border-radius: 8px;
  margin: 2px 0;
  transition: background .12s;
}
.np-art-option:hover {
  background: linear-gradient(135deg, rgba(2, 101, 189, 0.1), rgba(2, 101, 189, 0.05));
}
.np-art-option-codigo {
  font-weight: 700; color: var(--color-primary); white-space: nowrap;
  font-size: 0.72rem; flex-shrink: 0;
  padding: 2px 8px;
  background: rgba(2, 101, 189, 0.1);
  border-radius: 4px;
}
.np-art-option-desc {
  flex: 1; min-width: 0; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  line-height: 1.35; font-weight: 500;
}
.np-art-option-precio {
  font-weight: 700; color: var(--color-primary);
  font-size: 0.85rem; white-space: nowrap; flex-shrink: 0;
}

/* IVA */
.np-iva-badge { display: inline-flex; align-items: center; gap: 2px; padding: 3px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; background: var(--color-bg-muted); color: var(--color-text); border: 1px solid var(--np-border); white-space: nowrap; }
.np-iva-remove { background: none; border: none; color: var(--color-text-muted); cursor: pointer; font-size: 0.95rem; padding: 0 2px; line-height: 1; }
.np-iva-remove:hover { color: var(--np-error); }
.np-iva-select { background: transparent; border: none; color: var(--color-text); font-size: 0.75rem; font-weight: 600; cursor: pointer; padding: 0; outline: none; -webkit-appearance: none; appearance: none; }
.np-iva-add { background: none; border: 1px dashed var(--np-border); border-radius: 6px; color: var(--color-text-muted); cursor: pointer; font-size: 0.72rem; padding: 3px 9px; }
.np-iva-add:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ========= DRAWER LATERAL DERECHO ========= */
.np-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 1080;
}
.np-drawer-backdrop.np-drawer-open {
  opacity: 1;
  pointer-events: auto;
}
.np-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  max-width: 88vw;
  background: var(--color-bg);
  border-left: 1px solid var(--np-border);
  box-shadow: -10px 0 30px rgba(0,0,0,0.15);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.np-drawer.np-drawer-open { transform: translateX(0); }
.np-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--np-border);
  background: var(--color-bg);
}
.np-drawer-head h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.np-drawer-head h3 i { color: var(--color-primary); }
.np-drawer-head-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.np-drawer-close,
.np-drawer-reset {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 6px;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.np-drawer-close:hover { background: var(--color-bg-muted); color: var(--color-text); }
.np-drawer-reset:hover { background: rgba(2, 101, 189, 0.1); color: var(--color-primary); }
.np-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px 20px 14px;
}
.np-drawer-section {
  margin-top: 14px;
}
.np-drawer-section h4 {
  margin: 0 0 8px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.np-drawer-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--color-text);
  transition: background .15s;
}
.np-drawer-check:hover { background: var(--color-bg-muted); }
.np-drawer-check input[type="checkbox"] {
  accent-color: var(--color-primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.np-drawer-check input[disabled] { cursor: not-allowed; opacity: 0.5; }
.np-drawer-check input[disabled] + span { color: var(--color-text-muted); }

/* ========= SAVE BAR MÓVIL ========= */
.np-mobile-save-bar { display: none; }

/* ========= DARK MODE ========= */
.dark-mode .np-card,
:root:not(.light-mode) .np-card {
  background: var(--color-bg);
  border-color: var(--color-border);
}
.dark-mode .np-lines-table thead th,
:root:not(.light-mode) .np-lines-table thead th { background: var(--color-bg-muted); }
.dark-mode .np-lines-table tbody tr:nth-child(even),
:root:not(.light-mode) .np-lines-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.015); }
.dark-mode .np-section-head,
:root:not(.light-mode) .np-section-head {
  background: linear-gradient(135deg, rgba(2, 101, 189, 0.2), rgba(2, 101, 189, 0.08));
  border-bottom-color: rgba(2, 101, 189, 0.35);
}
.dark-mode .np-section-title,
:root:not(.light-mode) .np-section-title { color: #7bb8f0; }
.dark-mode .np-field input,
.dark-mode .np-field select,
.dark-mode .np-field textarea,
:root:not(.light-mode) .np-field input,
:root:not(.light-mode) .np-field select,
:root:not(.light-mode) .np-field textarea {
  background: var(--color-bg-muted);
  border-color: var(--color-border);
}
.dark-mode .np-input:hover,
:root:not(.light-mode) .np-input:hover { background: rgba(255,255,255,0.04); }
.dark-mode .np-btn-add-linea,
:root:not(.light-mode) .np-btn-add-linea { color: #7bb8f0; border-color: #7bb8f0; }
.dark-mode .np-toolbar-btn,
:root:not(.light-mode) .np-toolbar-btn { background: var(--color-bg-muted); }
.dark-mode .np-drawer,
:root:not(.light-mode) .np-drawer { background: var(--color-bg); }
.dark-mode .np-drawer-head,
:root:not(.light-mode) .np-drawer-head { background: var(--color-bg); }
.dark-mode .np-dropdown,
.dark-mode .np-art-dropdown,
:root:not(.light-mode) .np-dropdown,
:root:not(.light-mode) .np-art-dropdown {
  background: var(--color-bg);
  border-color: var(--color-border);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
}

/* ========= RESPONSIVE ========= */
@media (max-width: 1200px) {
  .np-principal-grid { grid-template-columns: repeat(3, 1fr); }
  .np-section-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1000px) {
  .np-principal-grid { grid-template-columns: repeat(2, 1fr); }
  .np-section-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .np-principal-header { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .np-principal-title { flex: 1 1 auto; }
  .np-principal-actions { flex-wrap: wrap; gap: 6px; }
  .np-principal-grid { grid-template-columns: repeat(2, 1fr); padding: 12px 14px; }
  .np-section-head { padding: 9px 14px; flex-wrap: wrap; gap: 8px; }
  .np-section-grid { grid-template-columns: 1fr; padding: 12px 14px; }
}

@media (max-width: 576px) {
  .np-page { padding: 8px 8px 100px 8px; gap: 10px; }
  .np-principal-grid { grid-template-columns: 1fr; gap: 10px; }
  .np-principal-tipo { font-size: 0.95rem; }
  .np-principal-num  { font-size: 0.7rem; }
  .np-btn-label { display: none; }
  .np-btn-guardar-main { padding: 8px 12px; }
  .np-btn-ajustes { display: inline-flex; }
  /* Inputs más grandes para tap en móvil */
  .np-field input,
  .np-field select,
  .np-field textarea { padding: 10px 12px; font-size: 0.92rem; }
  .np-field label { font-size: 0.72rem; }

  .np-lines-wrap { overflow: visible; }
  .np-lines-table,
  .np-lines-table thead,
  .np-lines-table tbody { display: block; width: 100% !important; }
  .np-lines-table thead { display: none; }

  /* Cada fila = tarjeta compacta con grid semántico */
  .np-lines-table tbody tr {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas:
      "codigo codigo codigo codigo codigo"
      "desc   desc   desc   desc   desc"
      "cant   um     precio dto    iva"
      "importe importe importe importe importe";
    gap: 8px 6px;
    border: 1px solid var(--np-border);
    border-radius: 12px;
    margin: 10px 6px;
    padding: 12px 40px 12px 10px;
    background: var(--color-bg);
    position: relative;
    width: auto !important;
  }
  .np-lines-table tbody tr:nth-child(even),
  .np-lines-table tbody tr:hover { background: var(--color-bg); }

  .np-lines-table td {
    display: block;
    width: auto !important;
    padding: 0 !important;
    text-align: left !important;
    min-width: 0;
  }
  .np-lines-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
  }
  .np-lines-table td:nth-child(1)  { display: none; } /* Nº orden oculto en móvil */
  .np-lines-table td:nth-child(2)  { grid-area: codigo; }
  .np-lines-table td:nth-child(3)  { grid-area: desc; }
  .np-lines-table td:nth-child(4)  { grid-area: cant; }
  .np-lines-table td:nth-child(5)  { grid-area: um; }
  .np-lines-table td:nth-child(6)  { grid-area: precio; }
  .np-lines-table td:nth-child(7)  { grid-area: dto; }
  .np-lines-table td:nth-child(8)  { grid-area: iva; }
  .np-lines-table td:nth-child(9)  { grid-area: importe; }
  .np-lines-table td:nth-child(10) {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 0 !important;
  }
  .np-lines-table td:nth-child(10)::before { display: none; }
  /* Inputs de la tabla de líneas: compactos en móvil */
  .np-lines-table .np-input {
    padding: 6px 6px;
    font-size: 0.82rem;
    min-width: 0;
  }
  .np-lines-table .np-input-codigo,
  .np-lines-table .np-input-desc {
    padding: 8px 10px;
    font-size: 0.9rem;
  }
  /* Importe destacado en su fila completa */
  .np-lines-table td.np-total-linea {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-primary);
    text-align: right !important;
    padding-top: 6px !important;
    border-top: 1px dashed var(--color-border-light);
    margin-top: 2px;
  }
  /* Dropdown del código de artículo: full-width sobre el viewport, no cortado */
  .np-art-dropdown {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
  }
  /* Estado vacío: una sola celda */
  .np-lines-empty {
    display: block !important;
    border: 1px dashed var(--color-border) !important;
    background: transparent !important;
    padding: 24px !important;
  }
  .np-lines-empty td {
    display: block !important;
    text-align: center !important;
  }
  .np-lines-empty td::before { display: none; }

  .np-drawer { width: 88vw; }

  .np-mobile-save-bar {
    display: block;
    position: fixed; bottom: 0; left: 0; right: 0;
    padding: 10px 14px;
    background: var(--color-bg);
    border-top: 1px solid var(--np-border);
    z-index: 40;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
  }
  .np-btn-guardar-mobile {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 4px 14px rgba(2, 101, 189, 0.3);
  }
}

/* =========================================================
   CARRITOS DE VENTAS (estado 12.9 listado / 12.91 detalle)
   Reutiliza tokens de np-* donde es posible.
   ========================================================= */

.carr-page {
  max-width: 100%;
  margin: 0 auto;
  padding: 16px 16px 120px 16px;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: var(--np-gap);
  position: relative;
}

/* ========= HEADER de carritos — reutiliza .bl-bar del listado de ventas ========= */
/* Solo se sobreescriben los estados de .np-sync-* para que funcionen sobre el
   fondo claro de .bl-bar (originalmente estaban diseñados para un gradiente azul oscuro). */
.carr-page .bl-icon-btn.np-sync-ok {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.45);
  color: #059669;
}
.carr-page .bl-icon-btn.np-sync-local {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.5);
  color: #d97706;
}
.carr-page .bl-icon-btn.np-sync-sincronizando {
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.5);
  color: #2563eb;
}
.carr-page .bl-icon-btn.np-sync-error {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.5);
  color: #dc2626;
}
/* Espacio entre la barra y las cards del listado */
.carr-page .bl-container { margin-bottom: 20px; }

/* ========= LISTADO DE CARRITOS ========= */
.carr-listado {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.carr-card {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  padding: 14px 16px;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.carr-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 14px rgba(2, 101, 189, 0.15);
  transform: translateY(-1px);
}
.carr-card.carr-card-readonly {
  cursor: default;
}
.carr-card.carr-card-readonly:hover {
  border-color: var(--color-border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transform: none;
}

.carr-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.carr-card-cliente {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.carr-card-cliente.carr-sin-cliente {
  color: var(--color-text-muted);
  font-weight: 500;
  font-style: italic;
}
.carr-card-estado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.carr-card-estado-pendiente {
  background: rgba(245, 158, 11, 0.12);
  color: var(--np-dirty, #f59e0b);
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.carr-card-estado-convertido {
  background: rgba(16, 185, 129, 0.12);
  color: var(--np-ok, #10b981);
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.carr-card-estado-local {
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.35);
  font-style: italic;
}
/* Aceptado offline, pendiente de crear el pedido al sincronizar (verde). */
.carr-card-estado-aceptado-local {
  background: rgba(16, 185, 129, 0.14);
  color: var(--np-ok, #10b981);
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.carr-card-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.carr-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.carr-card-meta-item i { font-size: 0.82rem; }

.carr-card-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 8px;
  border-top: 1px dashed var(--color-border-light);
}
.carr-card-total-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-weight: 600;
}
.carr-card-total-valor {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
}

.carr-card-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
}
.carr-card-action {
  flex: 1;
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all .15s;
}
.carr-card-action i { font-size: 0.82rem; }
.carr-card-action:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(2, 101, 189, 0.06);
}
.carr-card-action-aceptar {
  flex: 1;
  background: linear-gradient(180deg, var(--bl-accent-soft), var(--bl-accent-softer));
  border-color: var(--bl-accent-line);
  color: var(--color-primary);
}
.carr-card-action-aceptar:hover {
  background: var(--bl-accent-line);
  border-color: var(--bl-accent-line);
  color: var(--color-primary);
}
.carr-card-action-icon {
  flex: 0 0 auto;
  width: 38px;
  padding: 5px 0;
}
.carr-card-action-icon i { margin: 0; }
.carr-card-action-eliminar:hover {
  border-color: var(--np-error, #ef4444);
  color: var(--np-error, #ef4444);
  background: rgba(239, 68, 68, 0.08);
}
.carr-card-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.carr-card-firmado-icon {
  margin-left: auto;
  color: var(--np-ok, #10b981);
}
.carr-card-firmado-icon i { font-size: 0.95rem; }

/* Aviso de pendientes locales */
.carr-pendientes-aviso {
  grid-column: 1 / -1;
  padding: 12px 16px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 10px;
  color: #b45309;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.carr-pendientes-aviso i { font-size: 1.1rem; }

/* ========= EMPTY STATE ========= */
.carr-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--color-text-muted);
}
.carr-empty-icon {
  font-size: 3.5rem;
  color: var(--color-border);
  margin-bottom: 12px;
}
.carr-empty h3 {
  font-size: 1.1rem;
  color: var(--color-text);
  margin: 0 0 6px 0;
}
.carr-empty p {
  margin: 0 0 20px 0;
  font-size: 0.9rem;
}

/* Viejo mobile bar — ya no se usa, el boton aceptar va inline */
.carr-btn-aceptar-full {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(2, 101, 189, 0.3);
}
.carr-btn-aceptar-full:hover { filter: brightness(1.08); }

/* ========= FAB ========= */
.carr-fab {
  position: fixed;
  right: 24px;
  bottom: 100px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  border: none;
  box-shadow: 0 6px 20px rgba(2, 101, 189, 0.35);
  cursor: pointer;
  font-size: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  transition: transform .15s, box-shadow .15s;
}
.carr-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 28px rgba(2, 101, 189, 0.5);
}
/* FAB secundario (rehacer carrito): por encima del primario, gris.
   Usamos doble clase (.carr-fab.carr-fab-secondary) para subir especificidad
   y evitar que la regla móvil de .carr-fab (más abajo en el archivo) pise el
   bottom del secundario. */
.carr-fab.carr-fab-secondary {
  background: var(--color-bg);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  width: 48px;
  height: 48px;
  font-size: 1.25rem;
  bottom: 168px;
}
.carr-fab.carr-fab-secondary:hover {
  box-shadow: 0 6px 22px rgba(0,0,0,0.22);
  background: var(--bl-accent-soft, rgba(2, 101, 189, 0.08));
}
@media (max-width: 576px) {
  .carr-fab.carr-fab-secondary { bottom: 152px; right: 16px; width: 44px; height: 44px; }
}
.carr-rehacer-item .carr-cliente-item-icon {
  background: var(--bl-accent-soft, rgba(2, 101, 189, 0.1));
  color: var(--color-primary);
}

/* ===== Item de pedido en modal "Rehacer pedido" — layout responsive ===== */
.carr-pedido-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.carr-pedido-fila1 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.carr-pedido-titulo {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.carr-pedido-badge {
  flex: 0 0 auto;
  font-size: 0.68rem !important;
  padding: 2px 8px;
  white-space: nowrap;
}
.carr-pedido-fila2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 0.74rem;
  color: var(--color-text-muted);
}
.carr-pedido-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.carr-pedido-meta i {
  font-size: 0.85em;
  opacity: 0.8;
}
.carr-pedido-importe {
  font-weight: 600;
  color: var(--color-text);
}
@media (max-width: 480px) {
  .carr-pedido-item { padding: 10px 12px; gap: 10px; }
  .carr-pedido-item .carr-cliente-item-icon { width: 32px; height: 32px; min-width: 32px; font-size: 0.85rem; }
  .carr-pedido-titulo { font-size: 0.86rem; }
  .carr-pedido-fila2 { font-size: 0.72rem; gap: 3px 8px; }
  .carr-pedido-fecha { flex-basis: 100%; }
  .carr-pedido-item .carr-cliente-item-arrow { display: none; }
}

/* ========= BOTONES COMUNES ========= */
.carr-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s;
}
.carr-btn-primary:hover { filter: brightness(1.08); color: #fff; }
.carr-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.carr-btn-secondary:hover {
  background: var(--color-bg-muted);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.carr-btn-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: transparent;
  border: 1px dashed var(--color-primary);
  color: var(--color-primary);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.carr-btn-add:hover { background: rgba(2, 101, 189, 0.08); }
.carr-btn-icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.carr-btn-icon:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.carr-btn-icon:disabled { opacity: 0.4; cursor: not-allowed; }

.carr-required { color: var(--np-error, #ef4444); }

.carr-field-with-btn {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.carr-field-with-btn > select,
.carr-field-with-btn > input { flex: 1; min-width: 0; }

.carr-firma-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--color-bg-muted);
  border: 1px dashed var(--color-border);
  color: var(--color-text-muted);
  border-radius: 8px;
  font-size: 0.86rem;
  cursor: pointer;
  justify-content: center;
  width: 100%;
}
.carr-firma-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ========= LÍNEAS DEL CARRITO ========= */
.carr-lineas {
  padding: 4px 0;
}
.carr-linea {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-light);
}
.carr-linea:last-child { border-bottom: none; }
.carr-linea:hover { background: var(--color-bg-muted); }
.carr-linea-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.carr-linea-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
}
.carr-linea-importe {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 1.05rem;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}
.carr-linea:last-child { border-bottom: none; }
.carr-linea:hover { background: var(--color-bg-muted); }
.carr-linea-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.carr-linea-nombre {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}
.carr-linea-nombre.carr-linea-nombre-truncado {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.carr-linea-precio-ud {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.carr-linea-precio-input {
  width: 60px;
  padding: 2px 4px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-bg);
  text-align: right;
  -moz-appearance: textfield;
  appearance: textfield;
}
.carr-linea-precio-input::-webkit-outer-spin-button,
.carr-linea-precio-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.carr-linea-precio-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(2, 101, 189, 0.15);
}
.carr-linea-precio-suf { white-space: nowrap; }
.carr-linea-cantidad {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-bg-muted);
}
.carr-linea-cantidad input {
  width: 30px;
  padding: 4px 0;
  text-align: center;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 700;
  outline: none;
  -moz-appearance: textfield;
}
.carr-linea-cantidad input::-webkit-outer-spin-button,
.carr-linea-cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.carr-cant-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all .12s;
  padding: 0;
}
.carr-cant-btn:hover {
  color: var(--color-primary);
  background: rgba(2, 101, 189, 0.06);
}
.carr-linea-del {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.carr-linea-del:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--np-error, #ef4444);
}

/* Observaciones toggle */
.carr-obs-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}
.carr-obs-toggle label { margin-bottom: 0; }
.carr-btn-icon-sm {
  width: 26px;
  height: 26px;
  font-size: 0.85rem;
}
.carr-btn-sm { padding: 7px 14px; font-size: 0.82rem; }

/* Grid datos pedido: 2 cols en desktop */
.carr-datos-grid { grid-template-columns: 1fr 1fr !important; }

/* Inputs del carrito detalle — estilos base (modo claro) */
.carr-detalle-page .np-section-grid input,
.carr-detalle-page .np-section-grid select,
.carr-detalle-page .np-section-grid textarea {
  border: 1px solid var(--color-border);
  border-radius: 7px;
  padding: 8px 11px;
  font-size: 0.87rem;
  background: var(--color-bg);
  color: var(--color-text);
}
.carr-detalle-page .np-section-grid input:focus,
.carr-detalle-page .np-section-grid select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(2, 101, 189, 0.12);
}
.carr-detalle-page .np-section-grid input[readonly] {
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
}

/* Footer datos pedido */
.carr-datos-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--color-border-light);
}
.carr-det-id {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-family: monospace;
}
.carr-datos-footer-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Botón aceptar pedido fijo abajo */
.carr-aceptar-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 500px;
  padding: 0;
  z-index: 40;
  background: none;
  border: none;
  box-shadow: none;
}
@media (min-width: 577px) {
  .carr-aceptar-bar { bottom: 75px; }
}
.carr-detalle-page {
  max-width: 100%;
  margin: 0 auto;
  padding: 16px 0 180px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 992px) {
  .carr-detalle-page {
    max-width: 75%;
    padding: 16px 0 180px 0;
  }
  .carr-page {
    max-width: 75%;
    padding: 16px 0 120px 0;
  }
}
.carr-btn-aceptar-full {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(2, 101, 189, 0.3);
}
.carr-btn-aceptar-full:hover { filter: brightness(1.08); }
.carr-btn-aceptar-full:disabled { opacity: 0.6; cursor: not-allowed; }

/* Barra inferior partida: borrador (gris) + aceptar (azul) */
.carr-aceptar-bar-split {
  display: flex;
  gap: 10px;
  max-width: 640px;
}
.carr-aceptar-bar-split .carr-btn-aceptar-full { flex: 2; }
.carr-aceptar-bar-split .carr-btn-borrador { flex: 1; }
.carr-btn-borrador {
  padding: 14px;
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.carr-btn-borrador:hover {
  background: var(--color-bg-muted, rgba(0,0,0,0.04));
  color: var(--color-text);
  border-color: var(--color-text-muted);
}
@media (max-width: 480px) {
  .carr-aceptar-bar-split .carr-aceptar-label { display: none; }
  .carr-aceptar-bar-split .carr-btn-borrador,
  .carr-aceptar-bar-split .carr-btn-aceptar-full { padding: 12px; }
}

.carr-lineas-empty {
  padding: 16px;
  text-align: center;
  color: var(--color-text-muted);
}
.carr-lineas-empty i { font-size: 1.4rem; display: block; margin-bottom: 4px; opacity: 0.4; }
.carr-lineas-empty span { display: block; font-size: 0.82rem; }

/* ========= MODAL DE BÚSQUEDA DE ARTÍCULOS ========= */
.carr-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 1080;
}
.carr-modal-backdrop.carr-modal-open {
  opacity: 1;
  pointer-events: auto;
}
.carr-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 90%;
  max-width: 720px;
  height: 80vh;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: transform .2s, opacity .2s;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.carr-modal.carr-modal-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.carr-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(135deg, rgba(2, 101, 189, 0.08), rgba(2, 101, 189, 0.04));
}
.carr-modal-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.carr-modal-head h3 i { color: var(--color-primary); }
.carr-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 6px;
  font-size: 1rem;
}
.carr-modal-close:hover { background: var(--color-bg-muted); color: var(--color-text); }

.carr-modal-search {
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border-light);
}
.carr-modal-search input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.95rem;
}
.carr-modal-search input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(2, 101, 189, 0.12);
}

.carr-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  min-height: 50vh;
}

/* ===== Campos del modal genérico (js/modalForm.js) ===== */
/* El modal genérico (mf) hereda .carr-modal pero no quiere altura fija:
   debe ajustarse al contenido para que no quede hueco vacío bajo los botones. */
.mf-modal {
  height: auto !important;
  max-height: 90vh !important;
}
.mf-body {
  min-height: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 1 auto;
  overflow-y: auto;
}
/* Tamaño coherente del select: el popup nativo del navegador es difícil de
   limitar entre navegadores, pero al menos en Firefox max-height respeta el
   alto del listado abierto. Chrome lo limita por su cuenta a ~50% viewport. */
select.mf-input { max-height: 42px; }
select.mf-input[size] { max-height: 240px; }
.mf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mf-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 0;
}
.mf-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.95rem;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mf-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(2, 101, 189, 0.12);
}
.mf-input[readonly] {
  background: var(--color-bg-muted, rgba(0,0,0,0.04));
  cursor: not-allowed;
}
.mf-display {
  padding: 10px 12px;
  background: var(--color-bg-muted, rgba(0,0,0,0.04));
  border-radius: 8px;
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.95rem;
}
@media (max-width: 576px) {
  .mf-body { padding: 16px; }
}
.carr-modal-hint {
  padding: 30px 20px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.carr-modal-hint i { font-size: 1.8rem; opacity: 0.5; }

/* Cajitas de artículos en el modal */
.carr-art-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 4px;
}
.carr-art-chip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .12s;
  background: var(--color-bg);
  min-width: 0;
  overflow: hidden;
}
.carr-chip-foto {
  width: 36px;
  height: 36px;
  min-width: 36px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border-light);
}
.carr-chip-foto-ph {
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-muted);
  border: 1px dashed var(--color-border);
  border-radius: 6px;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}
.carr-art-chip:hover {
  background: var(--color-bg-muted);
  border-color: var(--color-primary);
}
.carr-art-chip.carr-art-selected {
  background: rgba(2, 101, 189, 0.1);
  border-color: var(--color-primary);
}
.carr-chip-check {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid var(--color-border);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  color: transparent;
  transition: all .12s;
}
.carr-art-chip.carr-art-selected .carr-chip-check {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.carr-chip-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.carr-chip-nombre {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.carr-chip-precio {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 2px;
}

/* Modal firma — tamaño ajustado al canvas, sin heredar height:80vh del .carr-modal */
.carr-modal-firma { max-width: 500px; height: auto !important; max-height: none !important; }
.carr-firma-canvas-area {
  padding: 10px;
}
.carr-firma-canvas-area canvas {
  width: 100%;
  height: 180px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
  display: block;
}
.carr-firma-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.carr-firma-del {
  color: var(--color-text-muted) !important;
}
.carr-firma-del:hover {
  color: var(--np-error, #ef4444) !important;
  background: rgba(239, 68, 68, 0.1) !important;
}
.carr-firma-btn.carr-firma-firmado,
#carrFirmaBtn.carr-firma-firmado {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(2, 101, 189, 0.06);
}

/* Modal cliente / contacto */
.carr-modal-cliente { max-width: 480px; height: auto; max-height: 90vh; }
@media (min-width: 768px) {
  .carr-modal-cliente { height: 80vh; }
}
.carr-contacto-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  min-height: auto !important;
}
.carr-contacto-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.carr-contacto-field label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.carr-contacto-field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.9rem;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
}
.carr-contacto-field input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(2, 101, 189, 0.12);
}
.carr-contacto-field input.carr-field-error {
  border-color: var(--np-error, #ef4444);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
.carr-cliente-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 4px 6px;
  border-radius: 10px;
  cursor: pointer;
  transition: all .12s;
}
.carr-cliente-item:hover {
  background: var(--color-bg-muted);
}
.carr-cliente-item-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: rgba(2, 101, 189, 0.1);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}
.carr-cliente-item-info {
  flex: 1;
  min-width: 0;
}
.carr-cliente-item-nombre {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carr-cliente-item-cif {
  font-size: 0.74rem;
  color: var(--color-text-muted);
}
.carr-cliente-item-arrow {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.carr-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-muted);
  gap: 10px;
  flex-wrap: wrap;
}
.carr-modal-seleccion {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-weight: 600;
}
.carr-modal-seleccion span { color: var(--color-primary); font-size: 1rem; }
.carr-modal-actions {
  display: flex;
  gap: 8px;
}

/* ========= DARK MODE ========= */
.dark-mode .carr-card,
:root:not(.light-mode) .carr-card {
  background: var(--color-bg);
  border-color: var(--color-border);
}
.dark-mode .carr-card:hover,
:root:not(.light-mode) .carr-card:hover {
  box-shadow: 0 4px 14px rgba(2, 101, 189, 0.25);
}
.dark-mode .carr-modal,
:root:not(.light-mode) .carr-modal {
  background: var(--color-bg);
  border-color: var(--color-border);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.dark-mode .carr-art-chip:hover,
:root:not(.light-mode) .carr-art-chip:hover {
  background: rgba(255,255,255,0.04);
}
.dark-mode .carr-art-chip.carr-art-selected,
:root:not(.light-mode) .carr-art-chip.carr-art-selected {
  background: rgba(2, 101, 189, 0.2);
}
.dark-mode .carr-modal-head,
:root:not(.light-mode) .carr-modal-head {
  background: linear-gradient(135deg, rgba(2, 101, 189, 0.2), rgba(2, 101, 189, 0.08));
}
/* Dark mode carritos: no necesita overrides manuales.
   Las variables CSS (--color-bg, --color-border, --color-text, etc.)
   ya cambian automáticamente en dark mode gracias al bloque :root.
   color-scheme: dark en :root se encarga de los dropdown nativos. */

/* ========= RESPONSIVE ========= */
@media (max-width: 1050px) {
  .carr-listado {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
  .carr-detalle-page {
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  /* Listado */
  .carr-page { padding: 8px 0 110px 0; overflow-x: hidden; max-width: 100vw; }
  /* El header usa .bl-container/.bl-bar que ya tienen sus propias reglas móvil */
  .carr-listado { grid-template-columns: 1fr; gap: 8px; padding: 0; }
  .carr-page .bl-container { margin-bottom: 6px; }
  .carr-card { border-radius: 0; border-left: none; border-right: none; margin: 0; padding: 12px 14px; overflow: hidden; }
  .carr-card-actions { gap: 4px; }
  .carr-card-action { padding: 8px 6px; font-size: 0.72rem; }
  .carr-fab { right: 16px; bottom: 90px; width: 52px; height: 52px; }

  /* Detalle: full width, nada se sale de la pantalla */
  .carr-detalle-page {
    max-width: 100%;
    padding: 0 0 140px 0;
    gap: 0;
    overflow-x: hidden;
  }
  .carr-detalle-page .np-card {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .carr-detalle-page .np-section-head {
    padding: 10px 14px;
    border-radius: 0;
  }
  .carr-detalle-page .np-section-grid {
    padding: 12px 14px;
  }

  /* Líneas: full width, nada se sale */
  .carr-linea { padding: 10px 14px; gap: 6px; overflow: hidden; }
  .carr-linea-top { overflow: hidden; min-width: 0; }
  .carr-linea-info { overflow: hidden; min-width: 0; }
  .carr-linea-nombre { font-size: 0.88rem; word-break: break-word; }
  .carr-linea-precio-ud { font-size: 0.74rem; }
  .carr-linea-importe { font-size: 0.92rem; }
  .carr-linea-cantidad input { width: 40px; font-size: 0.88rem; padding: 5px 2px; }
  .carr-cant-btn { width: 28px; height: 28px; min-width: 28px; }
  .carr-linea-del { width: 28px; height: 28px; min-width: 28px; }

  /* Botón aceptar: full width */
  .carr-aceptar-bar {
    width: calc(100% - 24px);
    max-width: 100%;
    bottom: 70px;
  }

  /* Modal: casi full screen */
  .carr-modal { width: 100%; height: 90vh; border-radius: 12px 12px 0 0; top: auto; bottom: 0; left: 0; transform: translateY(100%); }
  .carr-modal.carr-modal-open { transform: translateY(0); }
  /* .carr-modal-cliente / -firma tienen max-width propio (480/500px) que, junto
     al left:0 de arriba, los dejaba anclados a la izquierda en vez de full-width.
     En móvil deben comportarse como bottom-sheet igual que el resto. */
  .carr-modal-cliente, .carr-modal-firma { max-width: 100%; }
  .carr-modal-head, .carr-modal-search, .carr-modal-foot { padding: 12px 14px; }
  .carr-art-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .carr-art-chip { padding: 8px 10px; margin-bottom: 6px; }
  .carr-chip-foto, .carr-chip-foto-ph { width: 32px; height: 32px; min-width: 32px; }

  /* Datos pedido: campos a full */
  .carr-datos-grid { grid-template-columns: 1fr !important; }
  .carr-datos-footer { padding: 10px 14px; }
}

/* ===== Header dropdown: usuario y sociedad ===== */
.header-info-static {
  cursor: default !important;
  opacity: 0.7;
  pointer-events: none;
}
.header-info-static:hover, .header-info-static:focus, .header-info-static:active {
  background: transparent !important;
}
.header-sociedad-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
  padding: 2px 16px !important;
  pointer-events: auto;
}
.header-sociedad-row span {
  pointer-events: none;
}
.btn-cambiar-sociedad {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 0.8rem;
  transition: all 0.15s;
  pointer-events: auto;
}
.btn-cambiar-sociedad:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: rgba(2, 101, 189, 0.06);
}

/* ===== Pagina elegir sociedad ===== */
.selector-sociedad {
  max-width: 450px;
  margin: 0 auto;
  padding: 20px 15px;
}
.selector-sociedad-titulo {
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}
.selector-sociedad-titulo i {
  margin-right: 6px;
  color: var(--color-primary);
}
.selector-sociedad-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  margin-bottom: 8px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}
.selector-sociedad-item i:first-child {
  color: var(--color-primary);
  font-size: 1.1rem;
}
.selector-sociedad-item span {
  flex: 1;
}
.selector-sociedad-item:hover {
  border-color: var(--color-primary);
  background: rgba(2, 101, 189, 0.05);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.selector-sociedad-activa {
  border-color: var(--color-primary);
  background: rgba(2, 101, 189, 0.08);
}
.selector-sociedad-check {
  color: var(--color-primary);
  font-size: 1rem;
}
/* Dark mode */
.dark-mode .selector-sociedad-item:hover,
:root:not(.light-mode) .selector-sociedad-item:hover {
  background: rgba(81, 146, 243, 0.1);
}
.dark-mode .selector-sociedad-activa,
:root:not(.light-mode) .selector-sociedad-activa {
  background: rgba(81, 146, 243, 0.15);
}

.btn-accion.btn-accion-danger {
  color: #dc3545;
}
.btn-accion.btn-accion-danger:hover {
  background: rgba(220, 53, 69, 0.1);
}
.btn-accion.btn-accion-success {
  color: #198754;
}
.btn-accion.btn-accion-success:hover {
  background: rgba(25, 135, 84, 0.1);
}
.dark-mode .btn-accion {
  color: #5ba3e6;
}
.dark-mode .btn-accion:hover {
  background: rgba(91, 163, 230, 0.15);
}
.dark-mode .btn-accion.btn-accion-danger {
  color: #f87171;
}
.dark-mode .btn-accion.btn-accion-danger:hover {
  background: rgba(248, 113, 113, 0.15);
}
.dark-mode .btn-accion.btn-accion-success {
  color: #4ade80;
}
.dark-mode .btn-accion.btn-accion-success:hover {
  background: rgba(74, 222, 128, 0.15);
}

/* ===== Mobile: sin sombras en cards ===== */
@media (max-width: 768px) {
  .card {
    box-shadow: none;
    border: none;
  }
  #TxtBoxBuscarHeader {
    display: none !important;
  }
  #TxtHeaderPrincipal {
    font-size: var(--fs-md);
  }
  .panel-deslizable {
    width: 70%;
  }
}
@media (min-width: 769px) {
  .panel-deslizable {
    width: 20%;
  }
}

/* ===== Header layout ===== */
.navbar .container-fluid .d-flex {
  gap: 0.5rem;
}
#TxtHeaderPrincipal {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* !important para vencer al .fs-3 de Bootstrap (que también lleva !important). */
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em;
}
#TxtBoxBuscarHeader {
  min-width: 140px;
  max-width: 40%;
  position: relative;
}
#TxtBoxBuscarHeader input {
  padding-right: 40px;
}

/* ===== Botón flotante acciones (FAB) ===== */
.btn_acciones {
  position: fixed !important;
  right: 35px !important;
  bottom: 24px !important;
  left: auto !important;
  top: auto !important;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-primary-dark)
  );
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1060;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: 0 6px 20px rgba(2, 101, 189, 0.35);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.btn_acciones:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 28px rgba(2, 101, 189, 0.45);
}
.btn_acciones:active {
  transform: scale(0.95);
}
.btn_acciones i {
  color: #fff !important;
  font-size: 1.5rem;
  line-height: 1;
}
.btn_acciones img {
  /* fallback for any remaining img usage */
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1);
}
/* Ocultar el FAB mientras haya un modal Bootstrap abierto:
   el z-index del FAB (1060) es mayor que el del modal (1055) y se solapa
   con sus botones (Guardar/Cancelar), sobre todo en móvil. */
body.modal-open .btn_acciones {
  display: none !important;
}
/* Drawer/panel custom de Gestión de Personal (.gp-panel) — no es un .modal de
   Bootstrap, así que body.modal-open no se activa. Lo escondemos manualmente
   con :has() para que el FAB "+ Nuevo" no se solape con los botones del panel. */
body:has(.gp-panel.show) .btn_acciones,
body:has(.gp-panel-backdrop.show) .btn_acciones {
  display: none !important;
}
/* Variante extended: pill con icono + label (estados como 4.1 "Añadir",
   4.9 "Solicitar"). Mantiene el mismo gradiente, sombra y posición; solo
   se ensancha para acoger el texto. En móvil vuelve a circular para no
   estorbar la pantalla pequeña. */
.btn_acciones.btn_acciones-extended {
  width: auto;
  min-width: 56px;
  height: 56px;
  padding: 0 1.2rem;
  gap: 0.55rem;
  border-radius: 999px;
}
.btn_acciones-label {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #fff;
  line-height: 1;
}
@media (max-width: 576px) {
  .btn_acciones {
    width: 50px !important;
    height: 50px !important;
    /* Pegado al borde inferior — calc() respeta la safe-area de iOS para
       que el botón no quede oculto bajo el notch / home indicator. */
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
    right: 16px !important;
    left: auto !important;
    font-size: 1.35rem !important;
  }
  .btn_acciones i {
    font-size: 1.35rem !important;
  }
  /* Variante extended en móvil: mantiene el texto pero algo más compacta. */
  .btn_acciones.btn_acciones-extended {
    width: auto !important;
    min-width: 50px;
    padding: 0 1rem !important;
    gap: 0.45rem;
  }
  .btn_acciones-label { font-size: 0.85rem; }
}

/* ===== Vacaciones tipos ===== */
.btn-check-vacaciones-tipos {
  background-color: #f0f0f0;
  color: #696969;
  border-color: #a8a8a8;
  transition: all var(--transition-base);
}
.btn-check:checked + .btn-check-vacaciones-tipos {
  background-color: var(--color-accent);
  color: #fff;
  border-color: #fff;
}

/* ===== Vacaciones — layout por componentes (vc-*) ===== */
.vc-container { padding: 0.75rem 0; }
/* Móvil: el aire lateral (1rem) lo gestiona #hub-content (envuelve TODAS las
   pestañas del hub Mi Zona: Resumen, Ausencias, Vacaciones, Contratos…) para
   que coincida exactamente con el margen de las pestañas. Las cards internas
   solo aportan aire vertical. */
@media (max-width: 991px) {
    .vc-container { padding: 0.6rem 0; }
    #hub-content { padding: 0 1rem; }
    /* documentos.html envuelve cada sección del hub en una .row.h-100 que en
       desktop garantiza altura mínima del viewport. En móvil ese estirón
       genera una franja en blanco enorme debajo del listado; lo dejamos
       que se ajuste al contenido. */
    #hub-content > .row.h-100,
    #hub-content .row.h-100 {
        height: auto !important;
    }
}

/* Toolbar superior con dropdown de año + chips de tipos */
.vc-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.9rem;
  background: var(--color-bg-muted, #f5f7fa);
  border: 1px solid var(--color-border, #e9ecef);
  border-radius: 12px;
  /* Anular cualquier estilo heredado de .panel-deslizable: la barra es fija arriba */
  position: static !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  top: auto !important; right: auto !important; left: auto !important; bottom: auto !important;
  box-shadow: none !important;
}
.vc-ano { flex-shrink: 0; }
.vc-ano .dropdown-toggle {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 1rem; border-radius: 999px;
  font-weight: 600; font-size: 0.85rem;
  border: 1px solid var(--color-border, #e1e5ec);
  background: var(--color-bg, #fff);
  color: var(--color-text, #1f2937);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vc-ano .dropdown-toggle::after { margin-left: 0.15rem; border-top-color: var(--color-text-light, #6b7280); }
.vc-ano .dropdown-toggle .bi { font-size: 0.95rem; color: var(--color-primary, #0265bd); line-height: 1; }
.vc-ano .dropdown-toggle:hover,
.vc-ano .dropdown.show > .dropdown-toggle {
  border-color: var(--color-primary, #0265bd);
  box-shadow: 0 0 0 3px rgba(2, 101, 189, 0.10);
}
.vc-ano .dropdown-menu {
  border-radius: 12px;
  border: 1px solid var(--color-border, #e1e5ec);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  padding: 0.3rem;
  min-width: 170px;
}
.vc-ano .dropdown-item {
  border-radius: 8px; padding: 0.45rem 0.7rem;
  font-size: 0.85rem; font-weight: 500;
  color: var(--color-text, #1f2937);
  transition: background 0.12s, color 0.12s;
}
.vc-ano .dropdown-item:hover,
.vc-ano .dropdown-item:focus {
  background: rgba(2, 101, 189, 0.08);
  color: var(--color-primary, #0265bd);
}

/* Chips de tipos */
.vc-chips {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  align-items: center;
}
.vc-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.85rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #dee2e6);
  color: var(--color-text-light, #6c757d);
  cursor: pointer; margin: 0; line-height: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.vc-chip:hover { border-color: var(--color-primary, #0265bd); color: var(--color-primary, #0265bd); }
.btn-check:checked + .vc-chip {
  background: var(--color-primary, #0265bd);
  border-color: var(--color-primary, #0265bd);
  color: #fff;
  box-shadow: 0 2px 6px rgba(2, 101, 189, 0.25);
}
.vc-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.vc-chip-dot-conc  { background: #22c55e; }
.vc-chip-dot-disf  { background: #3b82f6; }
.vc-chip-dot-pend  { background: #f59e0b; }
.vc-chip-dot-deneg { background: #ef4444; }
.vc-chip-dot-fest  { background: #8b5cf6; }
.btn-check:checked + .vc-chip .vc-chip-dot {
  background: #fff !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* Grid de componentes: Resumen 340px + Listado 1fr.
   align-items: start para que la card del resumen ocupe solo su altura natural
   (la del gráfico) y no se estire para igualar el alto del listado. */
.vc-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 992px) {
  .vc-grid { grid-template-columns: 1fr; }
}

/* Card común */
.vc-card {
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #e9ecef);
  border-radius: 12px;
  padding: 1.1rem;
  transition: box-shadow 0.15s;
}
.vc-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); }
.vc-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.9rem;
}
.vc-card-title {
  font-size: 0.92rem; font-weight: 700; color: var(--color-text, #212529);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.vc-card-title i { font-size: 1.1rem; color: var(--color-primary, #0265bd); }

/* Card del gráfico — semi-donut con bordes redondeados en la base */
.vc-card-resumen .vc-chart-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: 0.4rem 0;
}
.vc-chart-canvas-vac {
  width: 260px !important;
  height: 140px !important;
}

/* Listado: contenedor con scroll suave si crece */
.vc-card-lista .vc-lista-body {
  max-height: 520px;
  overflow-y: auto;
  margin: -0.25rem;
  padding: 0.25rem;
}

/* ===== Vacaciones — rediseño en secciones (Pendientes / Aceptadas / Disfrutadas) =====
   .vc-card-lista-sections marca el modo nuevo y desactiva el aspecto card del
   wrapper (cada sección ya pinta su propio fondo + header). */
.vc-card-lista.vc-card-lista-sections {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.vc-card-lista.vc-card-lista-sections .vc-lista-body {
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 0;
}
.vc-sections-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.vc-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.vc-section-header {
  display: flex;
  align-items: center;
}
.vc-section-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: var(--color-text, #1f2937);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.01em;
}
/* Contadores junto al título de la sección — fondo tintado del color del estado */
.vc-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.vc-badge-pendientes  { background: rgba(253, 152, 67, 0.18);  color: #b35a0e; }
.vc-badge-aceptadas   { background: rgba(13, 110, 253, 0.16);  color: #0a58ca; }
.vc-badge-disfrutadas { background: rgba(40, 167, 69, 0.18);   color: #1e7e34; }

/* Lista de items dentro de cada sección */
.vc-section-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.vc-section-empty {
  font-size: 0.85rem;
  color: var(--color-text-light, #6b7280);
  padding: 0.65rem 0.85rem;
  background: var(--color-card-bg, #fff);
  border: 1px dashed var(--color-border, #e5e7eb);
  border-radius: 12px;
}

/* === Item de vacación === */
.vc-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.85rem;
  background: var(--color-card-bg, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.vc-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Chip de fecha (día grande + mes abreviado en mayúsculas) */
.vc-item-chip {
  width: 48px; height: 48px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
}
.vc-chip-day {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.vc-chip-month {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
  opacity: 0.85;
}
.vc-chip-pendientes  { background: rgba(253, 152, 67, 0.20); color: #b35a0e; }
.vc-chip-aceptadas   { background: rgba(13, 110, 253, 0.18); color: #0a58ca; }
.vc-chip-disfrutadas { background: rgba(40, 167, 69, 0.20);  color: #1e7e34; }

/* Contenido principal */
.vc-item-content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vc-item-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-text, #1f2937);
}
.vc-item-meta {
  font-size: 13px;
  color: var(--color-text-light, #6b7280);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.vc-item-meta i { font-size: 0.85rem; }
.vc-item-desc {
  font-size: 12.5px;
  color: var(--color-text-light, #6b7280);
  font-style: italic;
  margin-top: 1px;
}

/* Acciones de la derecha */
.vc-item-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
}
.vc-item-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.vc-item-badge i { font-size: 0.85rem; }
.vc-badge-success { background: rgba(40, 167, 69, 0.16);  color: #1e7e34; }
.vc-badge-info    { background: rgba(13, 110, 253, 0.14); color: #0a58ca; }

.vc-item-btn {
  background: transparent;
  border: none;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--color-text-light, #6b7280);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.vc-item-btn:hover { background: var(--color-bg-muted, #f3f4f6); }
.vc-item-btn-delete:hover { color: #dc2626; background: rgba(220, 38, 38, 0.08); }

/* === Dark mode === */
html.dark-mode .vc-section-title,
.dark-mode .vc-section-title { color: var(--color-text, #f3f4f6); }
html.dark-mode .vc-section-empty,
.dark-mode .vc-section-empty {
  background: var(--color-card-bg);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--color-text-light, #9ca3af);
}
html.dark-mode .vc-item,
.dark-mode .vc-item {
  background: var(--color-card-bg);
  border-color: rgba(255, 255, 255, 0.08);
}
html.dark-mode .vc-item-btn:hover,
.dark-mode .vc-item-btn:hover { background: rgba(255, 255, 255, 0.06); }
html.dark-mode .vc-item-title,
.dark-mode .vc-item-title { color: var(--color-text, #f3f4f6); }
html.dark-mode .vc-item-meta,
.dark-mode .vc-item-meta { color: var(--color-text-light, #9ca3af); }

/* === Móvil: compacto === */
@media (max-width: 575px) {
  .vc-item {
    padding: 0.6rem 0.7rem;
    gap: 0.7rem;
  }
  .vc-item-chip { width: 44px; height: 44px; }
  .vc-item-title { font-size: 14px; }
  .vc-item-meta  { font-size: 12.5px; }
  .vc-item-badge { padding: 3px 9px; font-size: 11.5px; }
  .vc-item-btn { width: 30px; height: 30px; }
}

/* Modo oscuro */
html.dark-mode .vc-toolbar, .dark-mode .vc-toolbar {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
html.dark-mode .vc-chip, .dark-mode .vc-chip {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--color-text-light, #9ca3af);
}
html.dark-mode .vc-ano .dropdown-toggle, .dark-mode .vc-ano .dropdown-toggle {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--color-text, #f3f4f6);
}
html.dark-mode .vc-card, .dark-mode .vc-card {
  background: var(--color-card-bg, #1f2937);
  border-color: rgba(255, 255, 255, 0.08);
}
html.dark-mode .vc-ano .dropdown-menu, .dark-mode .vc-ano .dropdown-menu {
  background: var(--color-card-bg, #1f2937);
  border-color: rgba(255, 255, 255, 0.08);
}
html.dark-mode .vc-ano .dropdown-item, .dark-mode .vc-ano .dropdown-item {
  color: var(--color-text, #f3f4f6);
}

@media (max-width: 540px) {
  .vc-toolbar { padding: 0.45rem 0.5rem; gap: 0.4rem; }
  .vc-chip { padding: 0.35rem 0.7rem; font-size: 0.75rem; }
  .vc-card { padding: 0.85rem; }
  /* En móvil "30/05/2026 - 31/05/2026" no cabe en col-5 con nowrap y
     se cortaba por la derecha. Permitimos que la pill rompa por el guion
     y reducimos un punto la tipografía. */
  .vc-card-lista .badge-estado,
  table#cuerpo .vc-card-lista .badge-estado {
    white-space: normal !important;
    text-align: center;
    font-size: 0.7rem !important;
    padding: 0.22rem 0.55rem !important;
    max-width: 100%;
    line-height: 1.25;
  }
}

/* ===== Calendario eventos en Resumen (Situación General) ===== */
.sit-cal-card {
  background: var(--color-card-bg, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  padding: 0.9rem 1rem;
  position: relative;
}
html.dark-mode .sit-cal-card,
.dark-mode .sit-cal-card {
  background: var(--color-card-bg, #1f2937);
  border-color: var(--color-border, #374151);
}
.sit-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.sit-cal-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text, #111827);
  text-transform: capitalize;
}
.sit-cal-nav {
  background: transparent;
  border: 1px solid var(--color-border, #e5e7eb);
  color: var(--color-text-secondary, #6b7280);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sit-cal-nav:hover {
  background: rgba(2, 101, 189, 0.08);
  color: var(--color-primary, #0265bd);
}
.sit-cal-grid-head,
.sit-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.sit-cal-dh {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-secondary, #9ca3af);
  padding: 0.2rem 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.sit-cal-cell {
  position: relative;
  min-height: 40px;
  border-radius: 6px;
  padding: 0.25rem 0.3rem 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-size: 0.78rem;
  color: var(--color-text, #111827);
  background: transparent;
  border: 1px solid transparent;
}
.sit-cal-cell-out {
  color: var(--color-text-secondary, #c5cad1);
  opacity: 0.45;
}
.sit-cal-cell-hoy {
  background: rgba(2, 101, 189, 0.08);
  border-color: rgba(2, 101, 189, 0.25);
  font-weight: 600;
}
.sit-cal-cell-conev {
  cursor: pointer;
}
.sit-cal-cell-conev:hover {
  background: rgba(2, 101, 189, 0.06);
}
.sit-cal-num {
  line-height: 1.1;
}
.sit-cal-dots {
  display: inline-flex;
  gap: 2px;
  margin-top: 3px;
}
.sit-cal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.sit-cal-dot-vac-disf  { background: #3b82f6; }  /* azul     - vac. disfrutadas */
.sit-cal-dot-vac-acep  { background: #22c55e; }  /* verde    - vac. aceptadas futuras */
.sit-cal-dot-vac-pend  { background: #f59e0b; }  /* ámbar    - vac. pendientes */
.sit-cal-dot-asist-just { background: #14b8a6; } /* teal     - asist. justificadas */
.sit-cal-dot-asist-noj  { background: #ef4444; } /* rojo     - asist. no justificadas */
.sit-cal-dot-asist-pend { background: #a855f7; } /* morado   - asist. pendientes de justificar */

.sit-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--color-border, #e5e7eb);
  font-size: 0.72rem;
  color: var(--color-text-secondary, #6b7280);
}
.sit-cal-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sit-cal-popover {
  position: absolute;
  z-index: 50;
  min-width: 200px;
  max-width: 260px;
  background: var(--color-card-bg, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 0.55rem 0.7rem;
  transform: translateX(-50%);
  font-size: 0.82rem;
}
html.dark-mode .sit-cal-popover,
.dark-mode .sit-cal-popover {
  background: var(--color-card-bg, #1f2937);
  border-color: var(--color-border, #374151);
  color: var(--color-text, #f3f4f6);
}
.sit-cal-pop-title {
  font-weight: 700;
  font-size: 0.82rem;
  margin-bottom: 0.35rem;
  color: var(--color-text, #111827);
}
.sit-cal-pop-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 0.2rem 0;
}
.sit-cal-pop-text { flex: 1; min-width: 0; }
.sit-cal-pop-titev {
  font-weight: 600;
  font-size: 0.78rem;
}
.sit-cal-pop-desc {
  font-size: 0.72rem;
  color: var(--color-text-secondary, #6b7280);
  word-break: break-word;
}

/* ===== Solicitud Vacaciones: Año oculto ===== */
/* El campo "Año" sigue en el DOM (para que jQuery lo recoja en el submit) pero
   off-screen: el usuario no lo edita; JS lo rellena con el año de FechaInicio. */
.vac-input-oculto {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ===== Margenes movil bootstrap ===== */
#no-margin {
  margin-left: 0px !important;
  margin-right: 0px !important;
}
#no-padding {
  padding: 0px !important;
}

/* ===== Password input ===== */
.c_img {
  border-top-left-radius: var(--bs-border-radius-pill) !important;
  border-bottom-left-radius: var(--bs-border-radius-pill) !important;
  border-right: 0px !important;
}
#ImgPwContainer {
  border-top-right-radius: var(--bs-border-radius-pill) !important;
  border-bottom-right-radius: var(--bs-border-radius-pill) !important;
  background-color: var(--color-bg);
  border-left: 0px !important;
}

/* ===== Firma ===== */
#wrapperFirma {
  border: 1px solid var(--color-text);
  width: 100%;
  height: 200px;
  display: block;
  margin: 0 auto;
}

/* ===== Menu secciones ===== */
.PestanaMenu {
  color: #757575;
  font-weight: 500;
}

/* ===== Ocultar caret en dropdowns avatar y tres puntos ===== */
.dropdown-toggle-no-caret::after {
  display: none !important;
}

/* ===== Cookie modal ===== */
#cookie-modal {
  display: none;
  position: fixed;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: var(--color-bg-muted);
  border-top: 1px solid var(--color-border-light);
  text-align: center;
  z-index: 1060;
  bottom: 0;
}
#cookie-modal.cookie-modal-above-nav {
  bottom: 62px;
}

#header_agrupado img {
  transition: height 0.5s ease;
}

/* ===== Spinner animation ===== */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ===== FullCalendar — modern styling ===== */
/* Container */
#calendar {
  padding: 0.75rem;
  font-family: "Poppins", "Inter", system-ui, sans-serif;
}
/* Toolbar (prev/title/next) */
.fc .fc-toolbar {
  margin-bottom: 0.75rem !important;
}
.fc .fc-toolbar-title {
  font-size: 1.35rem !important;
  font-weight: 700;
  color: var(--color-text, #333);
  text-transform: capitalize;
}
.fc .fc-button {
  background: var(--color-bg-muted, #f0f2f5) !important;
  border: 1px solid var(--color-border-light, #e0e0e0) !important;
  color: var(--color-text, #333) !important;
  border-radius: 10px !important;
  padding: 0.4rem 0.75rem !important;
  font-weight: 600;
  box-shadow: none !important;
  transition:
    background var(--transition-fast),
    transform var(--transition-fast);
}
.fc .fc-button:hover {
  background: var(--color-primary-hover, #e8f0fe) !important;
  color: var(--color-primary) !important;
  transform: scale(1.05);
}
.fc .fc-button:active {
  transform: scale(0.95);
}
/* Day header (lunes, martes...) */
.fc .fc-col-header-cell {
  background: var(--color-primary) !important;
  border: none !important;
  padding: 0.5rem 0 !important;
}
.fc .fc-col-header-cell-cushion {
  color: #fff !important;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none !important;
  text-transform: capitalize;
}
/* Day cells */
.fc .fc-daygrid-day {
  border-color: var(--color-border-light, #eee) !important;
  transition: background var(--transition-fast);
}
.fc .fc-daygrid-day:hover {
  background: rgba(2, 101, 189, 0.03);
}
.fc .fc-daygrid-day-number {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-muted, #666);
  padding: 0.35rem 0.5rem !important;
  text-decoration: none !important;
}
/* Today */
.fc .fc-day-today {
  background: rgba(2, 101, 189, 0.06) !important;
}
.fc .fc-day-today .fc-daygrid-day-number {
  background: var(--color-primary);
  color: #fff !important;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
/* Events — keep DB colors, polish shape */
.fc .fc-event,
.fc .fc-daygrid-event {
  border: none !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  font-size: 0.78rem !important;
  font-weight: 500;
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.fc .fc-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
  filter: brightness(1.05);
}
.fc .fc-daygrid-event-dot {
  display: none !important;
}
.fc .fc-event-time {
  font-size: 0.7rem !important;
  opacity: 0.85;
}
/* More events link */
.fc .fc-daygrid-more-link {
  color: var(--color-primary) !important;
  font-weight: 600;
  font-size: 0.78rem;
}
/* Day frame height */
.fc-daygrid-day-frame {
  min-height: 80px;
  margin-bottom: 0;
}
/* Outer border */
.fc .fc-scrollgrid {
  border-radius: 12px !important;
  overflow: hidden;
  border-color: var(--color-border-light, #eee) !important;
}
/* Remove double borders */
.fc .fc-scrollgrid td:last-of-type {
  border-right: none !important;
}
.fc .fc-scrollgrid tr:last-child td {
  border-bottom: none !important;
}
/* Dark mode calendar */
.dark-mode .fc .fc-toolbar-title {
  color: var(--color-text);
}
.dark-mode .fc .fc-button {
  background: var(--color-bg-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}
.dark-mode .fc .fc-button:hover {
  background: var(--color-border) !important;
}
.dark-mode .fc .fc-col-header-cell {
  background: var(--color-primary-dark) !important;
}
.dark-mode .fc .fc-daygrid-day {
  border-color: var(--color-border) !important;
}
.dark-mode .fc .fc-daygrid-day:hover {
  background: rgba(255, 255, 255, 0.03);
}
.dark-mode .fc .fc-daygrid-day-number {
  color: var(--color-text-muted);
}
.dark-mode .fc .fc-day-today {
  background: rgba(91, 163, 230, 0.08) !important;
}
.dark-mode .fc .fc-scrollgrid {
  border-color: var(--color-border) !important;
}

/* Popover "+X more" */
.fc-popover {
  background: var(--color-bg, #fff) !important;
  border: 1px solid var(--color-border, #dee2e6);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.fc-popover .fc-popover-header {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-radius: 8px 8px 0 0;
  padding: 0.5rem;
}
.fc-popover .fc-popover-body {
  background: var(--color-bg, #fff) !important;
  border-radius: 0 0 8px 8px;
}
.dark-mode .fc-popover {
  background: var(--color-bg-muted) !important;
  border-color: var(--color-border) !important;
}
.dark-mode .fc-popover .fc-popover-body {
  background: var(--color-bg-muted) !important;
}

/* ===== Lupa header ===== */
#LupaHeader2 {
  position: absolute;
  right: 10px;
  top: 45%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
#LupaHeader3 {
  top: 45%;
  transform: translateY(-50%);
}

/* ===== Panel deslizable ===== */
.panel-deslizable {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  background-color: var(--color-bg);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform var(--transition-base);
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}
.panel-contenido {
  padding: 20px;
}
.aparienciaBoton {
  cursor: pointer;
}
.rotar_imagen_90 {
  transform: rotate(90deg);
}
.seccion-panelDeslizable {
  margin-left: 20px;
}
.form-switch {
  display: flex !important;
  flex-direction: row-reverse !important;
  align-content: start;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
}
/* Bootstrap por defecto saca el toggle del flujo con float y margen negativo
   para encajarlo a la izquierda del label dentro de un .form-check. Cuando
   convertimos el contenedor en flex row-reverse, esos negativos provocan que
   el toggle se solape encima del label. Los neutralizamos solo dentro de
   .form-switch. */
.form-switch .form-check-input {
  margin-left: 0 !important;
  float: none !important;
}
.form-switch .form-check-label {
  padding-left: 0 !important;
}

/* ===== Artículos Venta ===== */
.art-codigo  { font-size: 0.85em; color: #555; }
.art-familia { font-size: 0.8em;  color: #999; }
.art-precio  { font-weight: 700;  color: #0265bd; }
.art-stock   { font-size: 0.8em;  color: #888; margin-top: 4px; }
.art-badge-servicio {
  display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.7em;
  background: #e8f4fd; color: #0265bd;
}
.art-badge-producto {
  display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.7em;
  background: #e8fde8; color: #27ae60;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .art-codigo  { color: var(--color-text-muted); }
  :root:not(.light-mode) .art-familia { color: var(--color-text-light); }
  :root:not(.light-mode) .art-precio  { color: var(--color-primary-light); }
  :root:not(.light-mode) .art-stock   { color: var(--color-text-light); }
  :root:not(.light-mode) .art-badge-servicio { background: #1a3a5c; color: #5bb8ff; }
  :root:not(.light-mode) .art-badge-producto { background: #1a3c1a; color: #5bdb6e; }
}
.dark-mode .art-codigo  { color: var(--color-text-muted); }
.dark-mode .art-familia { color: var(--color-text-light); }
.dark-mode .art-precio  { color: var(--color-primary-light); }
.dark-mode .art-stock   { color: var(--color-text-light); }
.dark-mode .art-badge-servicio { background: #1a3a5c; color: #5bb8ff; }
.dark-mode .art-badge-producto { background: #1a3c1a; color: #5bdb6e; }

/* ===== Toast personalizado ===== */
#toastContainer {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 360px;
  width: calc(100% - 2rem);
}
#toastContainer .toast {
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  animation: toastSlideIn 0.35s ease-out;
  font-size: 0.9rem;
}
@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===== Breadcrumb ===== */
.header-spacer {
  min-height: 0.5rem;
}
.bc-nav {
  padding: 0.1rem 0;
}
.breadcrumb-portal {
  background: transparent;
  padding: 0.4rem 0.75rem;
  margin: 0;
  font-size: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  --bs-breadcrumb-divider: "";
}
/* Each breadcrumb item */
.breadcrumb-portal .bc-item {
  font-size: 0.82rem;
  animation: bcSlideIn 0.3s ease-out both;
  display: inline-flex;
  align-items: center;
}
@keyframes bcSlideIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* Chevron separator */
.breadcrumb-portal .bc-item + .bc-item::before {
  content: "" !important;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 0.35rem;
  background: currentColor;
  opacity: 0.3;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E")
    no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E")
    no-repeat center;
  flex-shrink: 0;
  vertical-align: middle;
}
/* Icon inside breadcrumb */
.bc-icon {
  font-size: 0.8rem;
  margin-right: 0.3rem;
  vertical-align: -1px;
  color: inherit;
}

.dark-mode .bc-icon {
  color: #c0c6d0;
}

/* Clickable crumbs */
.breadcrumb-portal .bc-item a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
  display: inline-flex;
  align-items: center;
}
.breadcrumb-portal .bc-item a:hover {
  background: rgba(2, 101, 189, 0.08);
  color: var(--color-primary-dark);
}
.breadcrumb-portal .bc-item a:active {
  background: rgba(2, 101, 189, 0.15);
  transform: scale(0.97);
}

/* Dark mode breadcrumb links */
.dark-mode .breadcrumb-portal .bc-item a {
  color: #7dbef5;
}

.dark-mode .breadcrumb-portal .bc-item a:hover {
  background: rgba(125, 190, 245, 0.15);
  color: #a1cbf9;
}

/* Active (last) crumb */
.breadcrumb-portal .bc-active {
  color: var(--color-text);
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  background: var(--color-bg-muted, #f0f2f5);
  border-radius: 6px;
}

/* Dark mode */
.dark-mode .breadcrumb-portal .bc-item a:hover {
  background: rgba(91, 163, 230, 0.1);
}
.dark-mode .breadcrumb-portal .bc-active {
  background: var(--color-bg-surface);
  color: #e0e0e0;
  font-weight: 600;
}

/* Separador del breadcrumb más visible en dark mode */
.dark-mode .breadcrumb-portal .bc-item + .bc-item::before {
  opacity: 0.5;
  background: #7dbef5;
}

/* ===== Loading spinner en botones ===== */
.btn-loading {
  pointer-events: none;
  opacity: 0.75;
  position: relative;
}
.btn-loading .btn-text {
  visibility: hidden;
}
.btn-loading::after {
  content: "";
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  top: 50%;
  left: 50%;
  margin-top: -0.55rem;
  margin-left: -0.55rem;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ===== Clases reutilizables para inline styles ===== */
.text-estado {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.text-vehiculo {
  font-weight: 700;
  font-size: var(--fs-xl);
}
.text-matricula {
  color: var(--color-text-light);
  font-size: 0.95rem;
}
.text-ruta {
  color: var(--color-text-light);
  font-size: 0.95rem;
}
.card-viaje {
  border: 2px solid var(--color-primary) !important;
  border-radius: var(--radius-md);
}

.divider {
  margin: 0;
  border-color: var(--color-border);
}
.error-field {
  display: none;
  color: var(--color-danger);
  font-size: var(--fs-sm);
  margin-top: 4px;
}
.footer-text-sm {
  font-size: var(--fs-xs);
}
.footer-icon {
  font-size: 25px;
  width: 30px;
}
.footer-link {
  text-decoration: none;
  color: inherit;
}

@media (max-width: 768px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100%;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    z-index: 1050;
    padding: 0.25rem 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
  }
  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    padding: 0.35rem 0.1rem;
    color: var(--color-text-light);
    text-decoration: none;
    font-size: 0.65rem;
    cursor: pointer;
    transition: color var(--transition-fast);
    gap: 0.15rem;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
  }
  .bottom-nav-item i {
    font-size: 1.2rem;
  }
  .bottom-nav-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px;
    text-align: center;
  }
  .bottom-nav-item:active {
    color: var(--color-primary);
  }
  .bottom-nav-active {
    color: var(--color-primary);
    font-weight: 600;
  }
  .bottom-nav-active i {
    color: var(--color-primary);
  }
  /* Add bottom padding to body so content isn't hidden behind nav */
  #cuerpo {
    padding-bottom: 70px;
  }
  /* Move floating action button above bottom nav */
  @media (min-width: 577px) and (max-width: 768px) {
    .btn_acciones {
      bottom: 90px !important;
    }
    .float-accion-ventas {
      bottom: 90px;
    }
  }
  /* Mobile section list style */
  .mobile-section-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Que la lista de secciones del Inicio cubra el espacio hasta el bottom-nav,
       aunque haya pocos items (header ~64 + breadcrumb ~30 + bottom-nav ~70). */
    min-height: calc(100vh - 170px);
    background: var(--color-bg);
  }
  .mobile-section-list .mobile-section-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.2rem;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background var(--transition-fast);
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-bg);
  }
  .mobile-section-list .mobile-section-item:active {
    background: var(--color-bg-muted);
  }
  .mobile-section-list .mobile-section-item img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
  }
  .mobile-section-list .mobile-section-item .mobile-section-name {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--color-text) !important;
  }
  .mobile-section-list .mobile-section-item > i:first-child {
    color: #0265bd !important;
  }
  /* Hide the grid on mobile, show list */
  .section-grid-desktop {
    display: none !important;
  }
  .mobile-section-list {
    display: flex !important;
  }
}
@media (min-width: 769px) {
  .mobile-section-list {
    display: none !important;
  }
}
/* ===== 3. Header/Navbar gradient ===== */
.portal-navbar {
  /* Degradado invertido: oscuro a la izquierda, claro a la derecha.
     Azul oscuro fijo (#0c1749) en lugar de var(--color-primary-dark)
     para dar más contraste y que el header destaque borde a borde. */
  background: linear-gradient(
    135deg,
    #0c1749 0%,
    var(--color-primary) 100%
  ) !important;
  border: none;
}

/* En escritorio (≥ 992px) TODO el portal va a ancho completo: header,
   breadcrumb y el contenido (#cuerpo) — antes el col-lg-9 dejaba márgenes
   laterales vacíos en pantallas anchas. Añadimos un padding horizontal al
   col que se expande a 100% para que el contenido no quede pegado al
   borde del viewport. Las cards y el header pierden el redondeo lateral. */
@media (min-width: 992px) {
  .row > .col-lg-9 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* Padding lateral solo para los col-lg-9 del CONTENIDO (los que NO están
     dentro del header). El header debe quedar flush con el viewport. */
  body :not(#header_agrupado) > .row > .col-lg-9 {
    padding-left: clamp(16px, 2vw, 32px) !important;
    padding-right: clamp(16px, 2vw, 32px) !important;
  }
  #header_agrupado > .row .card {
    border-radius: 0;
  }
}
.portal-navbar #TxtHeaderPrincipal {
  color: #fff;
}
/* Logo de empresa a la izquierda del título del header */
.header-brand-logo {
  height: 36px;
  width: auto;
  max-width: 44px;
  object-fit: contain;
  flex-shrink: 0;
}
.header-brand { min-width: 0; }
/* (back arrow is now a Bootstrap Icon, no filter needed) */
.portal-navbar .btn-group .dropdown-toggle-no-caret[style*="color:#333"] {
  color: #fff !important;
}

/* ===== Header icon buttons (search, etc.) ===== */
.header-icon-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  font-size: 1.15rem;
  transition:
    background var(--transition-fast),
    transform var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.header-icon-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}
.header-icon-btn:active {
  transform: scale(0.9);
  background: rgba(255, 255, 255, 0.25);
}

/* ===== Campana de notificaciones (placeholder) =====
   El badge se muestra cuando setNotificacionesCount(n) recibe n > 0. */
.header-bell {
  position: relative;
}
.header-bell-badge {
  position: absolute;
  bottom: 2px;
  left: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #f97316;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--color-primary, #0265bd);
  pointer-events: none;
}
.header-bell-badge[hidden] { display: none; }

/* ===== Panel desplegable de notificaciones ===== */
.notif-wrapper {
  position: relative;
  display: inline-flex;
}
.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: var(--color-card-bg, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  z-index: 1080;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.notif-panel.is-open {
  opacity: 1;
  transform: translateY(0);
}
.notif-panel[hidden] { display: none; }
.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--color-border, #f3f4f6);
  background: rgba(2, 101, 189, 0.04);
}
.notif-panel-titulo {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text, #1f2937);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.notif-panel-titulo i { color: var(--color-primary, #0265bd); }
.notif-panel-mark-all {
  background: transparent;
  border: none;
  color: var(--color-text-light, #6b7280);
  font-size: 1rem;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.notif-panel-mark-all:hover {
  background: rgba(2, 101, 189, 0.08);
  color: var(--color-primary, #0265bd);
}
.notif-panel-lista {
  max-height: 360px;
  overflow-y: auto;
}
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--color-border, #f3f4f6);
  background: var(--color-card-bg, #fff);
  transition: background 0.15s ease;
}
.notif-item:hover { background: rgba(2, 101, 189, 0.04); }
.notif-item:last-child { border-bottom: none; }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-msg {
  font-size: 0.85rem;
  color: var(--color-text, #1f2937);
  line-height: 1.3;
  word-break: break-word;
}
.notif-item-fecha {
  font-size: 0.72rem;
  color: var(--color-text-light, #6b7280);
  margin-top: 0.2rem;
}
.notif-item-leida {
  background: transparent;
  border: 1px solid var(--color-border, #e5e7eb);
  color: var(--color-text-light, #6b7280);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.notif-item-leida:hover {
  background: var(--color-primary, #0265bd);
  border-color: var(--color-primary, #0265bd);
  color: #fff;
}
.notif-empty {
  text-align: center;
  color: var(--color-text-light, #6b7280);
  font-size: 0.85rem;
  padding: 1.2rem 0.8rem;
}
html.dark-mode .notif-panel,
.dark-mode .notif-panel {
  background: var(--color-card-bg, #1f2937);
  border-color: rgba(255, 255, 255, 0.08);
}
html.dark-mode .notif-panel-header,
.dark-mode .notif-panel-header {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
html.dark-mode .notif-item,
.dark-mode .notif-item {
  background: var(--color-card-bg, #1f2937);
  border-color: rgba(255, 255, 255, 0.06);
}
@media (max-width: 540px) {
  .notif-panel {
    width: calc(100vw - 24px);
    right: -12px;
  }
}
#BtnRefrescarVentas.refrescando i {
  animation: np-spin 0.8s linear infinite;
}
#BtnRefrescarVentas.refrescando {
  pointer-events: none;
}

/* ===== Header search bar overlay ===== */
.header-search-bar {
  align-items: center;
  width: 100%;
  animation: headerSearchIn 0.2s ease-out;
}
.header-search-bar:not(.d-none) {
  display: flex !important;
}
/* ===== Header bar layout ===== */
.header-bar {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  position: relative;
}
.header-bar-left {
  display: flex;
  align-items: center;
  z-index: 2;
}
.header-bar-center {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  padding: 0 120px;
}
.header-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  z-index: 2;
  position: relative;
}

/* ===== Search input inline (absoluto respecto a bar-right, no empuja nada) ===== */
.header-search-wrap {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  margin-right: 12px;
  z-index: 3;
}
.header-search-inline {
  background: rgba(255, 255, 255, 0.15) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 5px 28px 5px 12px !important;
  font-size: 0.82rem;
  height: 32px;
  width: 100%;
}
.header-search-inline::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
}
.header-search-inline:focus {
  background: rgba(255, 255, 255, 0.25) !important;
  box-shadow: none !important;
  outline: none !important;
}
.header-search-clear {
  position: absolute;
  right: 12px;
  top: 0;
  bottom: 0;
  height: 100%;
  z-index: 3;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}
.header-search-clear:hover { color: #fff; }
.dark-mode .header-search-inline {
  background: rgba(255, 255, 255, 0.1) !important;
}
.dark-mode .header-search-inline:focus {
  background: rgba(255, 255, 255, 0.18) !important;
}

/* Mobile */
@media (max-width: 576px) {
  .header-bar-center {
    position: static;
    text-align: left;
    font-size: 1.05rem;
    padding: 0 0 0 4px;
    pointer-events: auto;
    flex: 1;
    min-width: 0;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .header-search-wrap {
    position: static !important;
    transform: none !important;
    display: flex;
    align-items: center;
    width: auto;
    flex-shrink: 1;
    min-width: 0;
    margin-right: 4px;
  }
  .header-search-inline {
    width: 110px !important;
  }
  .header-search-clear {
    position: static !important;
    margin-left: -26px;
    flex-shrink: 0;
  }
}

/* Compatibilidad con clases antiguas */
.header-search-input-wrap { flex: 1; min-width: 0; }
.header-search-input {
  background: rgba(255, 255, 255, 0.15) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 0.4rem 0.75rem !important;
  font-size: 0.95rem;
}
.header-search-input::placeholder { color: rgba(255, 255, 255, 0.6); }
.header-search-input:focus {
  background: rgba(255, 255, 255, 0.25) !important;
  box-shadow: none !important;
  color: #fff !important;
}
@keyframes headerSearchIn {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
.dark-mode .header-search-input { background: rgba(255, 255, 255, 0.1) !important; }
.dark-mode .header-search-input:focus { background: rgba(255, 255, 255, 0.18) !important; }
.portal-navbar .dropdown-menu {
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.portal-navbar .dropdown-menu .dropdown-item {
  padding: 0.55rem 1rem;
}
.portal-navbar #TxtBoxInputBuscarHeader {
  border-radius: 50px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.portal-navbar #TxtBoxInputBuscarHeader::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.portal-navbar #TxtBoxInputBuscarHeader:focus {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: none;
}

/* ===== Header compact — shrink on scroll (WhatsApp style)
   Solo en movil. En escritorio el header conserva su tamaño aunque
   se haga scroll (sigue siendo fixed-top). ===== */
#header_agrupado {
  transition: all 0.25s ease;
  /* Sticky en lugar de fixed: el header acompaña al scroll de la página
     (igual que la barra organizadora .bl-container) y se pega arriba
     cuando llega al borde del viewport. La back button siempre accesible. */
  position: sticky;
  top: 0;
  z-index: 1030;
}
/* La .card de Bootstrap metía 1px de borde + esquinas redondeadas, así que la
   barra azul arrancaba en top:1 y se veía una línea blanca justo encima —
   evidente desde que el menú lateral quedó anclado y su cabecera llega a top:0.
   Es una barra de aplicación, no una tarjeta flotante: va a ras. */
#header_agrupado > .row .card {
  border: 0;
  border-radius: 0;
}
/* Dropdowns del header por encima de cualquier cosa del contenido */
#header_agrupado .dropdown-menu,
.portal-navbar .dropdown-menu {
  z-index: 1040;
}
@media (max-width: 768px) {
  .header-compact .portal-navbar {
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
  }
  .header-compact #TxtHeaderPrincipal {
    font-size: 0.95rem !important;
    transition: font-size 0.25s ease;
  }
  .header-compact .header-icon-btn {
    width: 30px;
    height: 30px;
    font-size: 1rem;
  }
  .header-compact .avatar-btn {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.85rem !important;
  }
  .header-compact .bc-nav {
    padding: 0.15rem 0 !important;
    font-size: 0.75rem;
  }
}

/* ===== Header title fade-in animation ===== */
.header-title-anim {
  animation: headerTitleIn 0.35s ease-out;
  color: #fff;
  transition: font-size 0.25s ease;
}
@keyframes headerTitleIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Jornada active dot on avatar ===== */
.avatar-btn {
  overflow: visible !important;
}
.jornada-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  background: #22c55e;
  border: 2px solid #fff;
  border-radius: 50%;
  display: block;
  z-index: 2;
  pointer-events: none;
  animation: jornadaPulse 2s ease-in-out infinite;
}
@keyframes jornadaPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
  }
}
.dark-mode .jornada-dot {
  border-color: #1a1a2e;
}

/* ===== 2. Section cards — responsive dashboard grid ===== */
.button-container .row {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  padding: 1.5rem;
  max-width: 700px;
  margin: 0 auto !important;
  justify-items: center;
}
.button-container .row > div {
  max-width: 100% !important;
  flex: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.boton-seccion {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    background var(--transition-base) !important;
  border-radius: 16px !important;
  overflow: hidden;
  border: 1px solid var(--color-border-light) !important;
  background: var(--color-bg) !important;
  width: 100% !important;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.5rem;
  cursor: pointer;
}
.boton-seccion:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(2, 101, 189, 0.15) !important;
  border-color: var(--color-primary) !important;
  background: var(--color-bg-surface, #f8faff) !important;
}
.boton-seccion img {
  transition: transform var(--transition-base);
  max-width: 56px;
  max-height: 56px;
  object-fit: contain;
}
.boton-seccion:hover img {
  transform: scale(1.1);
}
.boton-seccion .PestanaMenu {
  margin-top: 0.5rem;
  margin-bottom: 0;
  font-size: 0.95rem !important;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
}
/* ===== Section icon buttons (Bootstrap Icons) ===== */
.boton-seccion .seccion-icon {
  font-size: 2.5rem;
  color: var(--color-primary) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(2, 101, 189, 0.1) !important;
  margin: 0 auto;
  transition:
    transform var(--transition-base),
    color var(--transition-base),
    background var(--transition-base);
  line-height: 1;
  -webkit-text-fill-color: var(--color-primary);
}
.boton-seccion .seccion-icon::before {
  display: inline-block;
}
.boton-seccion:hover .seccion-icon {
  transform: scale(1.1);
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  background: var(--color-primary) !important;
}
.dark-mode .boton-seccion {
  border-color: var(--color-border) !important;
  background: var(--color-bg-muted) !important;
}
.dark-mode .boton-seccion:hover {
  border-color: #5ba3e6 !important;
  background: var(--color-bg-surface) !important;
}
.dark-mode .boton-seccion .seccion-icon {
  color: #5ba3e6 !important;
  -webkit-text-fill-color: #5ba3e6 !important;
  background: rgba(91, 163, 230, 0.12) !important;
}
.dark-mode .boton-seccion:hover .seccion-icon {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #5ba3e6 !important;
}
.seccion-accent-bar {
  border-left: 4px solid var(--color-primary);
  border-radius: 12px;
  padding: 0.5rem;
  transition: border-color var(--transition-base);
}
/* ===== Jornada section icon transition ===== */
#pestanaEnJornada[style*="flex"],
#pestanaFueraJornada[style*="flex"] {
  animation: jornadaIconIn 0.5s ease-out;
}
@keyframes jornadaIconIn {
  0% {
    opacity: 0;
    transform: scale(0.8) rotateY(90deg);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05) rotateY(-5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateY(0);
  }
}

/* Responsive: larger cards on bigger screens */
@media (min-width: 768px) {
  .button-container .row {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    padding: 2rem;
    max-width: 580px;
  }
}
@media (min-width: 1200px) {
  .button-container .row {
    max-width: 640px;
    gap: 1.5rem;
  }
}

/* ===== 4. Document list styling ===== */
.table-bordered-bottom tbody tr {
  transition: background-color var(--transition-fast);
}
.table-bordered-bottom tbody tr:hover {
  background-color: rgba(2, 101, 189, 0.05);
}
.table-bordered-bottom td {
  padding: 0.75rem 0.5rem;
  vertical-align: middle;
}
.table-bordered-bottom .Identificador h5 {
  font-size: var(--fs-base);
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.badge-estado {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: 50px;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* ===== 5. Jornada screen ===== */
.jornada-clock {
  letter-spacing: 0.03em;
}
.jornada-clock #fechaActualAutomatica {
  font-variant-numeric: tabular-nums;
}

/* Flip-clock */
.flip-clock-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.flip-clock-date {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-secondary, #555);
  letter-spacing: 0.04em;
}
.flip-clock-digits {
  display: flex;
  align-items: center;
  gap: 6px;
}
.flip-digit {
  position: relative;
  width: 52px;
  height: 72px;
  border-radius: 8px;
  background: var(--color-bg-surface, #f0f2f5);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.flip-digit-val {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-text-primary, #1a1a2e);
  line-height: 1;
  user-select: none;
}
.flip-clock-sep {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-primary, #0265bd);
  line-height: 72px;
  animation: blink-sep 1s step-end infinite;
}
@keyframes blink-sep {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
.flip-clock-gmt {
  font-size: 0.8rem;
  color: var(--color-text-secondary, #888);
  margin-top: 0.15rem;
}

/* Mobile flip-clock smaller */
@media (max-width: 576px) {
  .flip-digit {
    width: 40px;
    height: 56px;
  }
  .flip-digit-val {
    font-size: 1.8rem;
  }
  .flip-clock-sep {
    font-size: 1.8rem;
    line-height: 56px;
  }
}

/* Info jornada activa (inicio + tiempo transcurrido) */
.jornada-nombre {
  font-weight: 700;
}
.jornada-info-activa {
  display: flex;
  justify-content: center;
  margin-top: 0.75rem;
}
.jornada-info-row {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  background: rgba(16, 185, 129, 0.07);
  border: 1px solid rgba(16, 185, 129, 0.18);
  border-radius: 12px;
  padding: 0.6rem 1.5rem;
}
.jornada-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
.jornada-info-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary, #888);
}
.jornada-info-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text-primary, #1a1a2e);
}
.jornada-info-divider {
  width: 1px;
  height: 32px;
  background: rgba(0, 0, 0, 0.12);
}
.dark-mode .jornada-info-row {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.2);
}
.dark-mode .jornada-info-value {
  color: #e0e0e0;
}
.dark-mode .jornada-info-divider {
  background: rgba(255, 255, 255, 0.12);
}
.jornada-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: var(--fs-sm);
}
.jornada-status-badge.en-jornada {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.jornada-status-badge.fuera-jornada {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}
.pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  display: inline-block;
  animation: pulse-ring 1.5s ease-in-out infinite;
}
@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}
/* ===== 6. Content fade transition ===== */
#cuerpo {
  transition: opacity 0.15s ease;
}

/* ===== Pull-to-refresh ===== */
.ptr-indicator {
  position: fixed;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg, #fff);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: top 0.2s ease;
  z-index: 1050;
}
.ptr-indicator i {
  color: var(--color-primary, #0265bd);
  font-size: 1.2rem;
  transition: transform 0.2s ease;
}
.ptr-indicator.pulling i {
  transform: rotate(180deg);
}
.ptr-indicator.refreshing i {
  animation: ptr-spin 0.8s linear infinite;
}
@keyframes ptr-spin {
  100% {
    transform: rotate(360deg);
  }
}

/* ===== Empty state ===== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
}
.empty-state-icon {
  width: 120px;
  height: 120px;
  margin-bottom: 1.25rem;
  opacity: 0.5;
}
.empty-state-text {
  font-size: 1.05rem;
  color: var(--color-text-secondary, #888);
  font-weight: 500;
}
.empty-state-sub {
  font-size: 0.85rem;
  color: var(--color-text-muted, #aaa);
  margin-top: 0.35rem;
}

/* ===== 6. Skeleton loader ===== */
.skeleton-loader {
  padding: 1.5rem;
  max-width: 700px;
  margin: 0 auto;
}
.skeleton-line {
  height: 1rem;
  background: linear-gradient(
    90deg,
    var(--color-bg-muted) 25%,
    #e8e8e8 50%,
    var(--color-bg-muted) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
}
.skeleton-line.w75 {
  width: 75%;
}
.skeleton-line.w50 {
  width: 50%;
}
.skeleton-line.w90 {
  width: 90%;
}
.skeleton-block {
  height: 6rem;
  background: linear-gradient(
    90deg,
    var(--color-bg-muted) 25%,
    #e8e8e8 50%,
    var(--color-bg-muted) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
}
@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* (breadcrumb styles consolidated above) */

/* ===== 6e. Footer compact mobile ===== */
@media (max-width: 768px) {
  #footer_esquio .container {
    padding: 1rem !important;
  }
  #footer_esquio .row > div {
    margin-bottom: 0.5rem !important;
  }
  #footer_esquio .fa-ul li {
    margin-bottom: 0.5rem !important;
  }
  #footer_esquio img {
    max-width: 80px;
  }
}

/* ===== Dark mode - new elements =====
   Respetar preferencia explícita: si el usuario eligió .light-mode, no
   aplicar el dark del OS. Mismo patrón que otras secciones del CSS. */
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .portal-navbar {
    background: linear-gradient(135deg, #0d2440 0%, #0a1a2e 100%) !important;
  }
  :root:not(.light-mode) .skeleton-line,
  :root:not(.light-mode) .skeleton-block {
    background: linear-gradient(
      90deg,
      var(--color-bg-muted) 25%,
      var(--color-border) 50%,
      var(--color-bg-muted) 75%
    );
    background-size: 200% 100%;
  }
  :root:not(.light-mode) .badge-estado {
    opacity: 0.9;
  }
  :root:not(.light-mode) .flip-digit {
    background: #2a2d35;
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  :root:not(.light-mode) .flip-digit-val {
    color: #e0e0e0;
  }
}
.dark-mode .portal-navbar {
  background: linear-gradient(135deg, #0d2440 0%, #0a1a2e 100%) !important;
}
.dark-mode .skeleton-line,
.dark-mode .skeleton-block {
  background: linear-gradient(
    90deg,
    var(--color-bg-muted) 25%,
    var(--color-border) 50%,
    var(--color-bg-muted) 75%
  );
  background-size: 200% 100%;
}
.dark-mode .badge-estado {
  opacity: 0.9;
}
.dark-mode .flip-digit {
  background: #2a2d35;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.dark-mode .flip-digit-val {
  color: #e0e0e0;
}
/* Dark mode: list & menu text legibility */
.dark-mode .PestanaMenu {
  color: var(--color-text-muted) !important;
}
.dark-mode .boton-seccion .PestanaMenu {
  color: var(--color-text) !important;
}
.dark-mode .table-bordered-bottom .Identificador h5 {
  color: var(--color-text);
}
.dark-mode .table-bordered-bottom details summary {
  color: var(--color-text-muted);
}
.dark-mode .table-bordered-bottom details p {
  color: var(--color-text-muted);
}
.dark-mode .table-bordered-bottom tr:hover {
  background-color: rgba(91, 163, 230, 0.08);
}
/* Ventas (presupuestos, pedidos, albaranes, facturas): aclarar colores en dark mode */
.dark-mode .table-bordered-bottom .Identificador span[style*="color:#555"] {
  color: #adb5bd !important;
}
.dark-mode .table-bordered-bottom .Identificador span[style*="color:#999"] {
  color: #8a9199 !important;
}
.dark-mode .table-bordered-bottom span[style*="color:#3498db"] {
  color: #6cb8e6 !important;
}
.dark-mode .table-bordered-bottom span[style*="color:#e67e22"] {
  color: #f0a05a !important;
}
.dark-mode .table-bordered-bottom span[style*="color:#27ae60"] {
  color: #5dd492 !important;
}
.dark-mode .table-bordered-bottom span[style*="color:#e74c3c"] {
  color: #f07a6e !important;
}
.dark-mode .table-bordered-bottom span[style*="color:#d4a017"] {
  color: #e8c24a !important;
}
.dark-mode .table-bordered-bottom div[style*="color:#3498db"] {
  color: #6cb8e6 !important;
}
.dark-mode .table-bordered-bottom div[style*="color:#e67e22"] {
  color: #f0a05a !important;
}
.dark-mode .table-bordered-bottom div[style*="color:#27ae60"] {
  color: #5dd492 !important;
}
.dark-mode .table-bordered-bottom div[style*="color:#e74c3c"] {
  color: #f07a6e !important;
}
.dark-mode .table-bordered-bottom div[style*="color:#d4a017"] {
  color: #e8c24a !important;
}
.dark-mode .bottom-nav {
  background: var(--color-bg-muted) !important;
  border-top-color: var(--color-border) !important;
}
.dark-mode .bottom-nav-item {
  color: var(--color-text-muted);
}
.dark-mode .bottom-nav-active i {
  color: #5ba3e6;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .PestanaMenu {
    color: var(--color-text-muted) !important;
  }
  :root:not(.light-mode) .boton-seccion .PestanaMenu {
    color: var(--color-text) !important;
  }
  :root:not(.light-mode) .table-bordered-bottom .Identificador h5 {
    color: var(--color-text);
  }
  :root:not(.light-mode) .table-bordered-bottom details summary {
    color: var(--color-text-muted);
  }
  :root:not(.light-mode) .table-bordered-bottom details p {
    color: var(--color-text-muted);
  }
  :root:not(.light-mode) .table-bordered-bottom tr:hover {
    background-color: rgba(91, 163, 230, 0.08);
  }
  :root:not(.light-mode) .bottom-nav {
    background: var(--color-bg-muted) !important;
    border-top-color: var(--color-border) !important;
  }
  :root:not(.light-mode) .bottom-nav-item {
    color: var(--color-text-muted);
  }
  :root:not(.light-mode) .bottom-nav-active i {
    color: #5ba3e6;
  }
  :root:not(.light-mode) .boton-seccion .seccion-icon {
    color: #5ba3e6 !important;
    -webkit-text-fill-color: #5ba3e6 !important;
    background: rgba(91, 163, 230, 0.12) !important;
  }
  :root:not(.light-mode) .boton-seccion:hover .seccion-icon {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: #5ba3e6 !important;
  }
}

/* ===== Dashboard Situación General ===== */
.dashboard-situacion {
  padding: 0.5rem 0;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
  padding: 0;
}
.dash-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.2rem;
  border-radius: 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}
.dash-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.dash-card-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.dash-card-body {
  flex: 1;
  min-width: 0;
}
.dash-card-valor {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-card-titulo {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}
.dash-card-sub {
  font-size: var(--fs-xs);
  color: var(--color-text-light);
  margin-top: 0.25rem;
  line-height: 1.3;
}
.dark-mode .dash-card {
  background: var(--color-bg-muted);
  border-color: var(--color-border);
}
.dark-mode .dash-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .dash-card {
    background: var(--color-bg-muted);
    border-color: var(--color-border);
  }
  :root:not(.light-mode) .dash-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  }
}
@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .dash-card {
    padding: 1rem;
  }
  .dash-card-valor {
    font-size: 1.3rem;
  }
}

/* ===== Login page redesign ===== */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    #00A1FF 0%,
    #0E1649 100%
  );
  padding: 1rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}
.login-wrapper {
  width: 100%;
  max-width: 420px;
  padding: 0 1rem;
}
.login-card {
  background: var(--color-bg);
  border-radius: 16px;
  padding: 2.5rem 2rem 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
}
.login-logo img {
  max-width: 200px;
  
  object-fit: contain;
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
  border-radius: 6px;
}
.login-title {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
}
.login-subtitle {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: 1.8rem;
}
.login-input-group {
  position: relative;
  margin-bottom: 1rem;
}
.login-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-light);
  font-size: 0.95rem;
  z-index: 2;
}
.login-input {
  padding: 0.75rem 0.75rem 0.75rem 2.6rem !important;
  border-radius: 50px !important;
  border: 1.5px solid var(--color-border) !important;
  font-size: 0.95rem;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}
.login-input::placeholder {
  color: var(--color-text-muted);
}
.login-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(2, 101, 189, 0.15) !important;
}
.login-input-pw {
  padding-right: 3rem !important;
}
.login-eye-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--color-text-light);
  font-size: 0.95rem;
  z-index: 2;
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
}
.login-eye-btn:hover {
  color: var(--color-primary);
}
/* Checkbox "Mantener sesión iniciada" en el form de login.
   Checkbox nativo oculto; pintamos un cuadrado custom con ::before del span
   para tener control total del color, radio y check animado. */
.login-remember {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.35rem 0 1rem 0.2rem;
  font-size: 0.85rem;
  color: var(--color-text-light, #6b7280);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
}
.login-remember:hover { color: var(--color-text, #1f2937); }
/* Ocultamos el checkbox nativo pero sin display:none — mantenemos accesibilidad
   (focus por teclado, screen readers, tests que buscan #recordarSesion). */
.login-remember input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin: 0;
}
/* El pseudo-elemento del span hace de "caja" del checkbox visual. */
.login-remember span {
  position: relative;
  padding-left: 1.6rem;
  line-height: 1.2;
}
.login-remember span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border, #d1d5db);
  border-radius: 5px;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
/* Checkmark (SVG inline como mask). Aparece cuando el input está marcado. */
.login-remember span::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) scale(0);
  transform-origin: center;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.5 4L6 11.5L2.5 8' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.5 4L6 11.5L2.5 8' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1.4);
  pointer-events: none;
}
/* Hover en la caja (aunque el ratón no esté sobre ella exactamente). */
.login-remember:hover span::before {
  border-color: var(--color-primary, #0265bd);
}
/* Estado marcado: fondo azul + tick blanco. */
.login-remember input[type="checkbox"]:checked ~ span::before {
  background: var(--color-primary, #0265bd);
  border-color: var(--color-primary, #0265bd);
}
.login-remember input[type="checkbox"]:checked ~ span::after {
  transform: translateY(-50%) scale(1);
}
/* Focus ring accesible (solo al llegar con teclado). */
.login-remember input[type="checkbox"]:focus-visible ~ span::before {
  box-shadow: 0 0 0 3px rgba(2, 101, 189, 0.2);
}
.login-btn {
  width: 100%;
  padding: 0.75rem;
  border-radius: 50px;
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-primary-dark)
  );
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.5px;
  border: none;
  margin-top: 0.8rem;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}
.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(2, 101, 189, 0.4);
  color: #fff;
}
.login-btn:active {
  transform: translateY(0);
}
.login-links {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.login-links a {
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: color var(--transition-fast);
}
.login-links a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* Mobile adjustments for login */
@media (max-width: 768px) {
  .login-page {
    padding: 0;
    margin: 0;
  }
  .login-card {
    border-radius: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 1.5rem;
    box-shadow: none;
  }
  .login-wrapper {
    max-width: 100%;
    padding: 0;
  }
}

/* Dark mode login */
@media (prefers-color-scheme: dark) {
  .login-page {
    background: linear-gradient(135deg, #0a1628 0%, #0d1b2a 50%, #1b2838 100%);
  }
  .login-card {
    background: var(--color-bg-muted);
  }
  .login-eye-btn {
    color: var(--color-text-light);
  }
}
.dark-mode .login-page {
  background: linear-gradient(135deg, #0a1628 0%, #0d1b2a 50%, #1b2838 100%);
}
.dark-mode .login-card {
  background: var(--color-bg-muted);
}
.dark-mode .login-eye-btn {
  color: var(--color-text-light);
}

/* ===== Modal de alta de usuario (Portal del Empleado) ===== */
.alta-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.alta-modal-overlay.show { display: flex; }
.alta-modal-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--color-bg, #fff);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  padding: 1.75rem 1.5rem 1.5rem;
}
.alta-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
}
.alta-modal-close:hover { color: #475569; }
.alta-modal-head { text-align: center; margin-bottom: 1.1rem; }
.alta-modal-head i { font-size: 2.4rem; color: var(--color-primary, #0265bd); }
.alta-modal-head h3 { margin: 0.5rem 0 0.1rem; font-size: 1.2rem; }
.alta-modal-head p { margin: 0; color: #64748b; font-size: 0.85rem; }
.alta-modal-msg {
  display: none;
  margin-top: 0.9rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  font-size: 0.85rem;
  text-align: center;
}
.alta-modal-msg.ok { display: block; background: #dcfce7; color: #166534; }
.alta-modal-msg.err { display: block; background: #fee2e2; color: #991b1b; }
.dark-mode .alta-modal-card { background: var(--color-bg-muted); }

/* ===== Ripple effect ===== */
.ripple-container {
  position: relative;
  overflow: hidden;
}
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: ripple-anim 0.6s ease-out forwards;
  pointer-events: none;
}
@keyframes ripple-anim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ===== Modal mejorado ===== */
.modal-content {
  border-radius: 16px !important;
  overflow: hidden;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.modal-header {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 100%
  );
  color: #fff;
  border-bottom: none;
  padding: 1rem 1.25rem;
}
.modal-header .modal-title {
  font-weight: 600;
  font-size: 1.05rem;
}
.modal-header .btn-close {
  filter: brightness(0) invert(1);
  opacity: 0.8;
}
.modal-header .btn-close:hover {
  opacity: 1;
}
.modal-footer {
  border-top: 1px solid var(--color-border, #dee2e6);
  padding: 0.75rem 1.25rem;
}
.modal-body {
  padding: 1.25rem;
}

/* Modal slide-up en móvil */
@media (max-width: 768px) {
  .modal-dialog {
    margin: 0;
    max-width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
  }
  .modal-content {
    border-radius: 16px 16px 0 0 !important;
    max-height: 90vh;
    overflow-y: auto;
  }
  .modal.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
  }
  .modal.show .modal-dialog {
    transform: translateY(0);
  }
}

.clip-archivos-btn {
  position: relative;
}
.clip-archivos-btn .clip-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #3b82f6;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 0.05rem 0.35rem;
  line-height: 1.1;
  pointer-events: none;
  min-width: 14px;
  text-align: center;
}
.clip-archivos-drop {
  position: fixed;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #dee2e6);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  min-width: 240px;
  max-width: 320px;
  padding: 0.4rem;
  z-index: 1090;
}
.clip-archivos-drop-list {
  max-height: 220px;
  overflow-y: auto;
}
.clip-archivos-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--color-text, #212529);
}
.clip-archivos-item:hover {
  background: var(--color-card-bg, #f0f4ff);
}
.clip-archivos-item i.icono-archivo {
  font-size: 1rem;
  color: var(--color-text-light, #6c757d);
  flex-shrink: 0;
}
.clip-archivos-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clip-archivos-item-fecha {
  font-size: 0.68rem;
  color: var(--color-text-light, #9ca3af);
  white-space: nowrap;
}
.clip-firma-icono {
  color: #f59e0b;
  font-size: 0.95rem;
  flex-shrink: 0;
  padding: 0.15rem 0.3rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.clip-firma-icono:hover {
  color: #d97706;
  background: rgba(245, 158, 11, 0.12);
}
.dark-mode .clip-firma-icono {
  color: #fbbf24;
}
.dark-mode .clip-firma-icono:hover {
  color: #fcd34d;
  background: rgba(251, 191, 36, 0.18);
}
.clip-archivos-empty {
  padding: 0.6rem 0.5rem;
  font-size: 0.78rem;
  color: var(--color-text-light, #9ca3af);
  text-align: center;
}
.clip-archivos-add {
  width: 100%;
  background: none;
  border: none;
  color: #3b82f6;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.35rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}
.clip-archivos-add:hover {
  background: rgba(59, 130, 246, 0.1);
}
.clip-archivos-add[disabled] {
  color: var(--color-text-light, #9ca3af);
  cursor: not-allowed;
}

/* =====================================================================
   Menú lateral (offcanvas) — abre desde el avatar
   ===================================================================== */
/* Anchos del cajón. Van en :root y no en .side-menu-drawer porque el <body>
   también los necesita (padding-left) y las variables no suben por el árbol. */
:root {
  --sm-ancho: 268px;
  --sm-ancho-rail: 56px;
  /* Alto de la cabecera del menú. Debe coincidir con la barra azul de la app
     para que las dos arranquen y acaben a la misma altura; smInit() lo mide
     del DOM en cada repintado y este valor es solo el arranque. */
  --sm-cabecera-h: 52px;
}
.side-menu-drawer {
  /* Bootstrap fija el ancho con .offcanvas-start { width: var(--bs-offcanvas-width) }.
     Un `width` propio empata en especificidad y no gana de forma fiable, así que
     se redefine la variable: se resuelve en este elemento pase lo que pase con
     el orden de las hojas de estilo. */
  --bs-offcanvas-width: var(--sm-ancho);
  width: var(--sm-ancho);
  max-width: 90vw;
  z-index: 1080;
  /* Gris, NO el blanco del contenido: ese cambio de superficie es lo que hace
     que el cajón se lea como un panel y no como una franja de la página.
     Fondo propio también para no depender del default de Bootstrap, que puede
     llegar tarde en la primera carga y dejar el menú translúcido.
     Este es el ÚNICO valor que hay que tocar para aclarar/oscurecer el panel:
     va en variable porque el flyout de hover comparte el mismo gris y así no
     se desincronizan. El hover y el item activo son negros translúcidos y se
     recalculan solos sobre el gris que se ponga aquí. */
  --sm-panel-bg: rgb(243, 244, 246);
  /* Gris de hover y de item seleccionado. Sólido (no negro translúcido) para
     que sea exactamente este tono; si cambias --sm-panel-bg, revisa que siga
     contrastando. En oscuro lo pisan las reglas .dark-mode de más abajo. */
  --sm-hover: #e8e9ed;
  background-color: var(--sm-panel-bg);
  /* Suaviza el trazo: sin esto la tipografía a este tamaño se ve engordada. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Ocultar el FAB de jornada cuando el menu lateral este abierto */
body:has(.offcanvas.show) .fab-jornada { display: none !important; }

/* ===== Escritorio: el cajón deja de ser offcanvas y queda anclado =====
   No se toca el JS de Bootstrap: se le fuerza por CSS a estar siempre visible
   y se le aparta sitio con un padding en el body (sigue siendo position:fixed).
   Los items conservan su data-bs-dismiss, pero hide() sobre un offcanvas que
   nunca se mostró sale por la primera línea, así que no hay backdrop ni
   parpadeo. Sin hamburguesa ni aspa: aquí no hay nada que abrir ni cerrar. */
@media (min-width: 992px) {
  body { padding-left: var(--sm-ancho); transition: padding-left 0.18s ease; }
  .side-menu-drawer {
    transform: none !important;
    visibility: visible !important;
    box-shadow: none;
    border-right: 1px solid var(--color-border, #e5e7eb);
    transition: width 0.18s ease, box-shadow 0.18s ease;
  }
  #hamburger_header,
  .side-menu-drawer .btn-close { display: none !important; }

  /* ===== Modo rail: solo iconos =====
     El <html> lleva .sm-colapsado (lo pone smToggleColapso y lo restaura
     smInit desde localStorage). El cajón encoge a --sm-ancho-rail y el body
     encoge con él. Al pasar el ratón vuelve al ancho completo SIN mover el
     contenido: se despliega ENCIMA, y por eso lleva sombra. */
  html.sm-colapsado body { padding-left: var(--sm-ancho-rail); }
  html.sm-colapsado .side-menu-drawer {
    width: var(--sm-ancho-rail);
    --bs-offcanvas-width: var(--sm-ancho-rail);
  }
  html.sm-colapsado .side-menu-drawer:hover {
    width: var(--sm-ancho);
    --bs-offcanvas-width: var(--sm-ancho);
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.12);
  }

  /* Lo que se esconde en rail y vuelve al pasar el ratón. Se agrupa con
     :not(:hover) para no tener que repetir cada regla en su versión inversa. */
  html.sm-colapsado .side-menu-drawer:not(:hover) .side-menu-item span,
  html.sm-colapsado .side-menu-drawer:not(:hover) .side-menu-arrow,
  html.sm-colapsado .side-menu-drawer:not(:hover) .side-menu-user-info,
  html.sm-colapsado .side-menu-drawer:not(:hover) .side-menu-parent.open > .side-menu-children {
    display: none;
  }
  /* Iconos centrados en la columna estrecha. */
  html.sm-colapsado .side-menu-drawer:not(:hover) .side-menu-item { justify-content: center; padding-left: 0; padding-right: 0; }
  html.sm-colapsado .side-menu-drawer:not(:hover) .side-menu-header { padding: 0.6rem 0; justify-content: center; }
  html.sm-colapsado .side-menu-drawer:not(:hover) .side-menu-user { justify-content: center; }
  /* El pie de 3 botones no cabe en 56px: se apila. */
  html.sm-colapsado .side-menu-drawer:not(:hover) .side-menu-footer { flex-direction: column; padding: 0.5rem 0.35rem; }

  /* Botón de contraer/expandir: pegado al borde derecho, a media altura y
     medio fuera. Solo aparece al pasar el ratón por el cajón, igual que en
     Holded, para no meter ruido permanente. */
  .side-menu-collapse-btn {
    position: absolute;
    right: -13px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1085;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--color-border, #e5e7eb);
    background: #fff;
    color: var(--color-text-light, #888);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
  }
  .side-menu-drawer:hover .side-menu-collapse-btn { opacity: 1; pointer-events: auto; }
  .side-menu-collapse-btn:hover { color: var(--color-primary-dark, #0c1749); background: var(--sm-hover, #e8e9ed); }
  .side-menu-collapse-btn i { font-size: 0.7rem; }
  /* Mismo botón, chevron al revés: en rail sirve para volver a fijarlo abierto. */
  html.sm-colapsado .side-menu-collapse-btn i { transform: rotate(180deg); }
}
/* Fuera de escritorio no hay nada que contraer: el cajón es offcanvas. */
.side-menu-collapse-btn { display: none; }
@media (min-width: 992px) { .side-menu-collapse-btn { display: flex; } }
:root:not(.light-mode) .side-menu-drawer,
.dark-mode .side-menu-drawer { border-right-color: rgba(255,255,255,0.08); }
.side-menu-header {
  /* Degradado invertido: oscuro a la izquierda, claro a la derecha. */
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff;
  /* Alto fijo igualado a la barra de la app; el padding vertical se va a 0 y
     centra el contenido para que las dos cabeceras casen exactamente. */
  height: var(--sm-cabecera-h);
  min-height: var(--sm-cabecera-h);
  padding: 0 0.85rem;
  align-items: center;
}
.side-menu-user {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.side-menu-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.8rem;
  color: #fff;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.28);
}
.side-menu-user-info { min-width: 0; flex: 1; }
.side-menu-user-name {
  font-weight: 600;
  font-size: 0.845rem;
  /* line-height explícito: heredando el del body, las dos líneas (nombre +
     "Editar perfil") no cabían en el alto de la cabecera. */
  line-height: 1.25;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-menu-misdatos {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.8);
  font-size: 0.735rem;
  padding: 1px 0;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.side-menu-misdatos:hover { color: #fff; }
.side-menu-drawer .btn-close {
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

/* Los items son "píldoras": el <ul> aporta el margen lateral y el item
   redondea su propio fondo, en vez de teñir la fila entera de lado a lado.
   Rebaja mucho el peso visual del cajón. */
.side-menu-list {
  list-style: none;
  padding: 0.4rem 0.45rem;
  margin: 0;
}
.side-menu-list li { margin: 0; }
.side-menu-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  font-size: 0.845rem;
  font-weight: 500;
  /* Sin esto hereda el line-height del body y la fila se va a ~37px. */
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--color-text, #222);
  text-align: left;
  cursor: pointer;
  transition: background 0.13s ease, color 0.13s ease;
}
/* Iconos en gris y a escala del texto: el azul fuerte a 1.5rem competía con
   las etiquetas y era lo que hacía "gritar" al menú. El color de marca se
   reserva para hover y para el item activo. */
.side-menu-item i.bi {
  font-size: 0.95rem;
  width: 1.15rem;
  text-align: center;
  color: var(--color-text-light, #9ca3af);
  transition: color 0.13s ease;
}
.side-menu-item span { flex: 1; }
.side-menu-item:hover { background: var(--sm-hover, #e8e9ed); }
.side-menu-item:hover i.bi { color: var(--color-primary, #00A1FF); }
/* Pulsado: un punto más oscuro que el hover, para que se note el clic. */
.side-menu-item:active { background: #dfe1e6; }

.side-menu-toggle .side-menu-chevron {
  font-size: 0.85rem !important;
  width: auto !important;
  color: var(--color-text-light, #9ca3af) !important;
  transition: transform 0.2s ease;
}
.side-menu-toggle:not(.collapsed) .side-menu-chevron { transform: rotate(180deg); }

.side-menu-sublist {
  list-style: none;
  padding: 0;
  margin: 0;
  background: rgba(0,0,0,0.025);
}
.side-menu-sublist li button {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0.55rem 1.1rem 0.55rem 3.2rem;
  font-size: 0.9rem;
  color: var(--color-text, #444);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.side-menu-sublist li button:hover { background: var(--color-primary-hover, rgba(2,101,189,0.08)); }
/* Cuando el button de la sublist es .side-menu-item (RRHH / Organización),
   recuperamos el flex+gap+padding del item normal y solo añadimos una sangría
   suave a la izquierda para diferenciarlos visualmente del nivel superior. */
.side-menu-sublist li button.side-menu-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.55rem 1.1rem 0.55rem 1.8rem;
  font-size: 0.9rem;
}

.side-menu-section-header {
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-light, #9ca3af);
  letter-spacing: 0.06em;
  padding: 0.9rem 1.1rem 0.3rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* Versión colapsable del header de sección — botón con chevron a la derecha.
   Conserva la tipografía/colores del header normal; solo añade interactividad. */
.side-menu-section-collapsible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-light, #9ca3af);
  letter-spacing: 0.06em;
  padding: 0.9rem 1.1rem 0.3rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.side-menu-section-collapsible:hover { color: var(--color-text, #374151); }
.side-menu-section-chevron {
  font-size: 0.85rem;
  transition: transform 0.18s ease;
}
.side-menu-section-collapsible[aria-expanded="false"] .side-menu-section-chevron {
  transform: rotate(-90deg);
}
.side-menu-section-collapsible[aria-expanded="false"] + .side-menu-sublist {
  display: none;
}

/* ===== Menú de un solo nivel: flyout al hover + acordeón al click =====
   La MISMA <ul class="side-menu-children"> hace las dos veces: acordeón cuando
   el <li> padre tiene .open, y panel flotante cuando el JS le pone .as-flyout
   (position:fixed, si no el overflow del offcanvas lo recortaría). Nunca las
   dos a la vez — de eso se encarga el JS. */
.side-menu-parent { position: relative; }
/* La flecha ► indica que tiene hijos; girada 90° cuando el acordeón está abierto. */
/* El .bi.side-menu-arrow es a la vez icono del item, así que hay que ganarle a
   `.side-menu-item i.bi` en especificidad o hereda su tamaño y su hueco. */
.side-menu-item i.bi.side-menu-arrow {
  margin-left: auto; font-size: 0.62rem; width: auto; flex: 0 0 auto;
  opacity: 0.65;
  transition: transform 0.18s ease, opacity 0.15s ease, color 0.15s ease;
}
.side-menu-parent:hover > .side-menu-parent-nav .side-menu-arrow { opacity: 1; }
.side-menu-parent:hover > .side-menu-parent-nav .side-menu-arrow { color: var(--color-primary, #00A1FF); }
.side-menu-parent.open > .side-menu-parent-nav .side-menu-arrow {
  transform: rotate(90deg); color: var(--color-primary, #00A1FF);
}
/* Un solo hijo visible tras el gating: deja de comportarse como padre. */
.side-menu-parent.sm-solo-uno > .side-menu-parent-nav .side-menu-arrow { display: none; }

.side-menu-children { display: none; list-style: none; margin: 0; padding: 0; }
.side-menu-children li { margin: 0; }
.side-menu-children button.side-menu-item { width: 100%; }

/* --- Acordeón en línea. Sin iconos y con guía vertical: la jerarquía se lee
       de un vistazo sin que los hijos compitan con las raíces. El 1.6rem del
       margen izquierdo alinea la guía con el centro del icono del padre
       (0.45rem del <ul> + 0.6rem del item + medio icono). --- */
.side-menu-parent.open > .side-menu-children {
  display: block;
  margin: 0.1rem 0 0.3rem 1.6rem;
  padding-left: 0.35rem;
  border-left: 1px solid var(--color-border, #e5e7eb);
}
/* Mismo color de texto que las raíces: la jerarquía ya la marcan la sangría,
   la guía vertical, el cuerpo menor y el peso 400. Apagarlos además de todo
   eso los dejaba desvaídos sobre el gris del panel. */
.side-menu-parent.open > .side-menu-children > li > .side-menu-item {
  padding: 0.35rem 0.6rem;
  font-size: 0.815rem;
  font-weight: 400;
  color: var(--color-text, #222);
}

/* --- Panel flotante (hover). Va después del bloque del acordeón para ganar a
       igualdad de especificidad si ambos coincidieran. --- */
.side-menu-parent > .side-menu-children.as-flyout {
  display: block;
  position: fixed; z-index: 1090;
  min-width: 206px; max-height: 82vh; overflow-y: auto;
  margin: 0; padding: 5px; border-left: none;
  /* Mismo gris que el panel: el flyout es una prolongación del menú, no una
     tarjeta del contenido. Lo separa del fondo blanco el borde y la sombra. */
  background: var(--sm-panel-bg, #f3f4f6);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}
.side-menu-children.as-flyout > li > .side-menu-item {
  border-radius: 6px; padding: 0.42rem 0.65rem; font-size: 0.82rem; font-weight: 400;
  transition: background 0.12s ease;
}
/* Sombreado CLARO al pasar el ratón (deja obvio qué item se va a pulsar). */
.side-menu-children.as-flyout > li > .side-menu-item:hover,
.side-menu-children.as-flyout > li > .side-menu-item:focus-visible {
  background: var(--sm-hover, #e8e9ed);
  color: var(--color-text, #222);
}

/* --- Item activo: píldora gris neutra + semibold, y el icono en color de
       marca. Sin barra lateral ni fondo azul: a este tamaño pesaban demasiado.
       Lo restaura smInit() desde localStorage, porque pinta.php reinyecta el
       header en cada navegación. --- */
.side-menu-item.active { font-weight: 600; }
.side-menu-root > li > .side-menu-item.active {
  background: var(--sm-hover, #e8e9ed);
  color: var(--color-primary-dark, #0c1749);
}
.side-menu-root > li > .side-menu-item.active i.bi { color: var(--color-primary, #00A1FF); }
.side-menu-children > li > .side-menu-item.active {
  background: var(--sm-hover, #e8e9ed);
  color: var(--color-text, #222);
  font-weight: 600;
}

html.dark-mode .side-menu-parent > .side-menu-children.as-flyout,
.dark-mode .side-menu-parent > .side-menu-children.as-flyout {
  background: var(--color-card-bg); border-color: rgba(255,255,255,0.1);
}
html.dark-mode .side-menu-children.as-flyout > li > .side-menu-item:hover,
.dark-mode .side-menu-children.as-flyout > li > .side-menu-item:hover {
  background: rgba(255, 255, 255, 0.08); color: var(--color-text, #f3f4f6);
}
html.dark-mode .side-menu-parent.open > .side-menu-children,
.dark-mode .side-menu-parent.open > .side-menu-children { border-left-color: rgba(255,255,255,0.12); }
html.dark-mode .side-menu-item.active,
.dark-mode .side-menu-item.active { color: var(--color-text, #f3f4f6); }
html.dark-mode .side-menu-root > li > .side-menu-item.active,
.dark-mode .side-menu-root > li > .side-menu-item.active,
html.dark-mode .side-menu-children > li > .side-menu-item.active,
.dark-mode .side-menu-children > li > .side-menu-item.active { background: rgba(255,255,255,0.08); }

.side-menu-logout i { color: var(--color-danger, #dc3545) !important; }
.side-menu-logout span { color: var(--color-danger, #dc3545); font-weight: 600; }

/* Pie del drawer: anclado al fondo con flex */
.side-menu-drawer .offcanvas-body {
  display: flex;
  flex-direction: column;
  padding: 0;
}
/* Pie: tres botones repartidos a lo ancho, con caja pero discreta. El beige
   (#f5f1e8) de antes y los 40px de alto pesaban más que cualquier entrada del
   menú para tres acciones secundarias; ahora es gris neutro y 32px. */
.side-menu-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.6rem;
  border-top: 1px solid rgba(0,0,0,0.07);
}
.side-menu-footer-btn {
  /* padding:0 + min-width:0 para que flex:1 reparta a partes iguales: el botón
     de modo oscuro arrastra .dark-mode-toggle (padding 0.25rem 1rem) y sin esto
     su min-content lo hacía 20px más ancho que los otros dos. */
  flex: 1;
  padding: 0;
  min-width: 0;
  background: rgba(0,0,0,0.028);
  border: 1px solid rgba(0,0,0,0.08);
  height: 32px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-light, #888);
  transition: background 0.13s ease, border-color 0.13s ease, color 0.13s ease, transform 0.1s ease;
}
.side-menu-footer-btn i { font-size: 0.95rem; }
.side-menu-footer-btn:hover {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.14);
  color: var(--color-primary-dark);
  box-shadow: none;
}
.side-menu-footer-btn:active { transform: scale(0.97); }
.side-menu-footer-btn.side-menu-footer-logout {
  color: var(--color-danger, #dc3545);
}
.side-menu-footer-btn.side-menu-footer-logout:hover {
  background: rgba(220,53,69,0.1);
  color: var(--color-danger, #dc3545);
  box-shadow: none;
}

/* Dark mode: misma caja discreta, en translúcido claro sobre el surface. */
html.dark-mode .side-menu-footer-btn,
.dark-mode .side-menu-footer-btn {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
}
html.dark-mode .side-menu-footer-btn:hover,
.dark-mode .side-menu-footer-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: var(--color-text, #f3f4f6);
}
html.dark-mode .side-menu-footer-btn.side-menu-footer-logout,
.dark-mode .side-menu-footer-btn.side-menu-footer-logout { color: var(--color-danger, #dc3545); }
html.dark-mode .side-menu-footer-btn.side-menu-footer-logout:hover,
.dark-mode .side-menu-footer-btn.side-menu-footer-logout:hover {
  background: rgba(220,53,69,0.18);
  color: var(--color-danger, #dc3545);
}

/* Dark mode */
/* Fondo del drawer: Bootstrap .offcanvas viene en blanco por defecto.
   Forzamos Surface 2 (#18204F) para menús y los iconos del menú al primary
   claro para que destaquen sobre fondo oscuro. La rama :root:not(.light-mode)
   va envuelta en la media query dark — antes matcheaba también en sistema
   claro sin clase asignada, dejando el bg undefined y el menú translúcido. */
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .side-menu-drawer {
    background-color: var(--color-bg-surface) !important;
    color: var(--color-text);
  }
}
.dark-mode .side-menu-drawer {
  background-color: var(--color-bg-surface) !important;
  color: var(--color-text);
}
:root:not(.light-mode) .side-menu-item,
.dark-mode .side-menu-item { color: var(--color-text); }
/* OJO: aquí NO va una regla de color para .side-menu-item i.bi. El selector
   :root:not(.light-mode) matchea también en modo claro (el <html> solo lleva
   .light-mode si se togglea a mano), así que cualquier color que se ponga aquí
   pisa al del modo claro. El gris #888 de la regla base ya se lee bien sobre
   el blanco y sobre el surface oscuro, y el azul de hover/activo lo aplican
   las reglas base sin necesidad de rama dark. */
:root:not(.light-mode) .side-menu-sublist,
.dark-mode .side-menu-sublist { background: rgba(255,255,255,0.04); }
:root:not(.light-mode) .side-menu-sublist li button,
.dark-mode .side-menu-sublist li button { color: var(--color-text); }
:root:not(.light-mode) .side-menu-section-collapsible,
.dark-mode .side-menu-section-collapsible {
  border-top-color: rgba(255,255,255,0.08);
  color: var(--color-text-light);
}
:root:not(.light-mode) .side-menu-section-collapsible:hover,
.dark-mode .side-menu-section-collapsible:hover { color: var(--color-text); }
:root:not(.light-mode) .side-menu-section-header,
.dark-mode .side-menu-section-header {
  border-top-color: rgba(255,255,255,0.08);
  color: var(--color-text-light);
}
:root:not(.light-mode) .side-menu-footer,
.dark-mode .side-menu-footer { border-top-color: rgba(255,255,255,0.08); }
:root:not(.light-mode) .side-menu-item:hover,
:root:not(.light-mode) .side-menu-sublist li button:hover,
.dark-mode .side-menu-item:hover,
.dark-mode .side-menu-sublist li button:hover { background: rgba(255,255,255,0.06); }

/* =====================================================================
   Situación General — rediseño dashboard
   ===================================================================== */

/* =====================================================================
   Listados modernos (table#cuerpo)
   Estilo aplicado a TODOS los listados del Portal Empleado generados
   por DibujaLineas_PortalEmpleado / muestra_documentos. Mantiene el
   mismo HTML; solo reestiliza la presentación.
   ===================================================================== */

table#cuerpo {
    border: none !important;
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0.5rem 0 1rem !important;
    width: 100%;
    font-size: 0.92rem;
    color: var(--color-text, #374151);
}
table#cuerpo > tbody {
    background: var(--color-bg, #fff);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.05);
    display: table-row-group;
    overflow: hidden;
}
/* Cancelar el rayado clásico de table-striped */
table#cuerpo.table-striped > tbody > tr {
    background-color: transparent !important;
}
/* Filas con separador fino y hover suave */
table#cuerpo > tbody > tr {
    border-bottom: 1px solid var(--color-border, #f3f4f6);
    transition: background 0.12s ease;
}
table#cuerpo > tbody > tr:first-child td:first-child { border-top-left-radius: 12px; }
table#cuerpo > tbody > tr:first-child td:last-child  { border-top-right-radius: 12px; }
table#cuerpo > tbody > tr:last-child td:first-child  { border-bottom-left-radius: 12px; }
table#cuerpo > tbody > tr:last-child td:last-child   { border-bottom-right-radius: 12px; }
table#cuerpo > tbody > tr:last-child { border-bottom: none; }
table#cuerpo > tbody > tr:hover {
    background: var(--color-bg-muted, #f9fafb) !important;
}
/* Celdas: padding aéreo, sin bordes Bootstrap */
table#cuerpo > tbody > tr > td {
    padding: 0.95rem 1.1rem !important;
    vertical-align: middle !important;
    border: none !important;
    background: transparent !important;
}

/* Bloque Identificador: avatar + título + sub-info */
table#cuerpo .Identificador {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
}
table#cuerpo .Identificador > h5 {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: var(--color-text, #1f2937) !important;
    margin: 0 0 0.15rem 0 !important;
    line-height: 1.35 !important;
    word-break: break-word;
}
table#cuerpo .Identificador-body {
    flex: 1 1 auto;
    min-width: 0;
}
table#cuerpo .Identificador p {
    font-size: 0.78rem !important;
    color: var(--color-text-light, #6b7280) !important;
    margin: 0.15rem 0 0 !important;
    line-height: 1.45 !important;
}
table#cuerpo .Identificador p span[style*="color"] {
    font-weight: 500;
}

/* Details/summary moderno (sin marker nativo) */
table#cuerpo .Identificador details { display: inline-block; }
table#cuerpo .Identificador details summary {
    list-style: none;
    cursor: pointer;
    color: var(--color-primary, #0265bd);
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.15rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
table#cuerpo .Identificador details summary::-webkit-details-marker { display: none; }
table#cuerpo .Identificador details summary::before {
    content: "\F285"; /* bi-chevron-right */
    font-family: "bootstrap-icons";
    font-size: 0.7rem;
    transition: transform 0.15s ease;
    color: var(--color-text-light, #9ca3af);
}
table#cuerpo .Identificador details[open] summary::before { transform: rotate(90deg); }
table#cuerpo .Identificador details summary:hover::before,
table#cuerpo .Identificador details summary:hover { color: var(--color-primary, #0265bd); }
/* Si details ya viene "open" desde PHP, el summary suele estar vacío y desentona */
table#cuerpo .Identificador details[open] summary:empty { display: none; }

/* Avatar circular: lo añade aplicarAvataresListado() en JS */
table#cuerpo .listado-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Badge de estado: más redondeado y con padding decente */
table#cuerpo .badge-estado {
    display: inline-block;
    padding: 0.28rem 0.7rem !important;
    border-radius: 14px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Botones de acción (bi-eye, paperclip, etc.) — pill outline */
table#cuerpo .btn-accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    margin-left: 0.25rem !important;
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-bg, #fff);
    border-radius: 8px;
    color: var(--color-text-light, #6b7280);
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
    cursor: pointer;
}
table#cuerpo .btn-accion:hover {
    border-color: var(--color-primary, #0265bd);
    color: var(--color-primary, #0265bd);
    background: rgba(2, 101, 189, 0.05);
}
table#cuerpo .btn-accion i { font-size: 0.95rem; }
table#cuerpo .btn-accion.btn-accion-success {
    color: #16a34a;
    border-color: rgba(22, 163, 74, 0.35);
    background: rgba(22, 163, 74, 0.06);
}
table#cuerpo .btn-accion .clip-badge {
    position: relative;
    top: -6px; right: -2px;
    margin-left: -4px;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 0 4px;
    border-radius: 10px;
    background: var(--color-primary, #0265bd);
    color: #fff;
}

/* Columna derecha: badge encima, acciones debajo */
table#cuerpo .col-5 > div#fecha_a {
    gap: 0.35rem;
}

/* Empty state: el HTML del empty-state existente sale ahora más limpio */
.empty-state {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-text-light, #6b7280);
}

/* Dark mode */
html.dark-mode table#cuerpo > tbody,
.dark-mode table#cuerpo > tbody {
    background: rgba(255,255,255,0.03);
    box-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.06);
}
html.dark-mode table#cuerpo > tbody > tr,
.dark-mode table#cuerpo > tbody > tr {
    border-bottom-color: rgba(255,255,255,0.07);
}
html.dark-mode table#cuerpo > tbody > tr:hover,
.dark-mode table#cuerpo > tbody > tr:hover {
    background: rgba(255,255,255,0.05) !important;
}
html.dark-mode table#cuerpo .Identificador > h5,
.dark-mode table#cuerpo .Identificador > h5 { color: var(--color-text, #f3f4f6) !important; }
html.dark-mode table#cuerpo .btn-accion,
.dark-mode table#cuerpo .btn-accion {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.75);
}
html.dark-mode table#cuerpo .btn-accion:hover,
.dark-mode table#cuerpo .btn-accion:hover {
    background: rgba(2,101,189,0.18);
    border-color: var(--color-primary, #0265bd);
    color: #fff;
}

/* =====================================================================
   Nóminas (4.8) — listado dedicado .nom-*
   Markup propio emitido por DibujaLineas_PortalEmpleado cuando esNominas.
   Filas tipo "tarjeta limpia": chip de estado + importe destacado + acciones.
   ===================================================================== */

/* documentos.html envuelve %LineasE% en un Bootstrap .card.shadow-2-strong.
   Cuando dentro hay un .nom-list-card, neutralizamos esa card exterior para
   evitar el doble borde y la doble sombra. */
.card:has(.nom-list-card) {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Card que contiene toolbar + tabla como una sola superficie.
   margin-top a 0 para que no se sume al padding del <section> envolvente. */
.nom-list-card {
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    margin: 0 0 1rem;
}

/* Toolbar superior: contador discreto a la izquierda + buscador a la derecha */
.nom-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.15rem;
    border-bottom: 1px solid var(--color-border, #eef0f3);
    background: var(--color-bg, #fff);
    flex-wrap: wrap;
}
.nom-list-subtitle {
    font-size: 0.82rem;
    color: var(--color-text-light, #6b7280);
    font-weight: 500;
    line-height: 1.2;
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
}
.nom-list-count {
    color: var(--color-text, #111827);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

/* Buscador del toolbar */
.nom-list-search {
    position: relative;
    flex: 0 1 280px;
    min-width: 180px;
}
.nom-list-search > i.bi {
    position: absolute;
    left: 0.85rem; top: 50%; transform: translateY(-50%);
    color: var(--color-text-light, #9ca3af);
    font-size: 0.88rem;
    pointer-events: none;
}
.nom-list-search > input {
    width: 100%;
    height: 36px;
    padding: 0 0.9rem 0 2.2rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    background: var(--color-bg-muted, #f9fafb);
    color: var(--color-text, #1f2937);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.nom-list-search > input::placeholder { color: var(--color-text-light, #9ca3af); }
.nom-list-search > input:focus {
    border-color: var(--color-primary, #0265bd);
    box-shadow: 0 0 0 3px rgba(2, 101, 189, 0.12);
    background: var(--color-bg, #fff);
}

/* Estado "sin resultados" del buscador local */
.nom-empty-search {
    padding: 1.6rem 1rem;
    text-align: center;
    color: var(--color-text-light, #6b7280);
    font-size: 0.85rem;
    display: none;
}

/* La tabla pierde su card propia dentro del wrapper (no doble sombra) */
.nom-list-card table#cuerpo {
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    width: 100%;
}
.nom-list-card table#cuerpo > tbody {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
/* Anular el hover azulado de .table-bordered-bottom para no duplicar */
.nom-list-card .table-bordered-bottom tbody tr:hover { background-color: transparent; }

/* Hover y transición — aplica a cualquier fila dentro del card (nom-row o no) */
.nom-list-card table#cuerpo > tbody > tr {
    transition: background 0.12s ease;
}
.nom-list-card table#cuerpo > tbody > tr:hover {
    background: var(--color-bg-muted, #f9fafb) !important;
}

/* Separadores en la celda (los borders sobre <tr> no renderizan con border-collapse:collapse).
   Aplica a cualquier td del card; el padding compacto adicional solo a .nom-cell. */
.nom-list-card table#cuerpo > tbody > tr > td {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--color-border, #e5e7eb) !important;
    box-shadow: none !important;
}
.nom-list-card table#cuerpo > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}
.nom-list-card table#cuerpo > tbody > tr.nom-row > td.nom-cell {
    padding: 0.85rem 1.15rem !important;
}

/* Fila: dos columnas (main / side), centradas verticalmente */
.nom-row-grid {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}
.nom-row-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
}
.nom-row-side {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    justify-content: flex-end;
}

/* Título de la fila */
.nom-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text, #111827);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Chip de estado (Pagado / Pendiente). Usa el color que viene del back en
   la propiedad CSS color: y derivamos un fondo translúcido vía currentColor.
   Para navegadores que no soportan color-mix, se queda con borde + texto. */
.nom-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
@supports (background: color-mix(in srgb, red 10%, transparent)) {
    .nom-status {
        border-color: transparent;
        background: color-mix(in srgb, currentColor 12%, transparent);
    }
}
.nom-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Subtítulo de fila (descripcion3/descripcion4 en Asistencias, Incidencias, etc.).
   Inline: ocupa el espacio restante de .nom-row-main y trunca con ellipsis. */
.nom-subtitle {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text-light, #6b7280);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nom-subtitle p { margin: 0; display: inline; }
.nom-subtitle-sep {
    display: inline-block;
    margin: 0 0.45rem;
    color: var(--color-border, #d1d5db);
    font-weight: 600;
}

/* Importe destacado */
.nom-amount {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--color-text, #111827);
    letter-spacing: -0.015em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Bloque de acciones (eye / clip / etc.) — botones fantasma.
   Selector con #cuerpo para batir la especificidad de table#cuerpo .btn-accion. */
.nom-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.nom-list-card table#cuerpo .nom-actions .btn-accion {
    position: relative;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 8px;
    color: var(--color-text-light, #6b7280);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    cursor: pointer;
}
.nom-list-card table#cuerpo .nom-actions .btn-accion:hover {
    background: rgba(2, 101, 189, 0.08);
    color: var(--color-primary, #0265bd);
    border-color: rgba(2, 101, 189, 0.18);
}
.nom-list-card table#cuerpo .nom-actions .btn-accion i { font-size: 1rem; line-height: 1; }
.nom-list-card table#cuerpo .nom-actions .btn-accion .clip-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin: 0;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border-radius: 10px;
    background: var(--color-primary, #0265bd);
    color: #fff;
    border: 2px solid var(--color-bg, #fff);
    box-sizing: content-box;
}

/* Responsive: en móviles, importe + chip ceden algo de espacio */
@media (max-width: 576px) {
    .nom-list-toolbar { padding: 0.7rem 0.9rem; }
    .nom-list-card table#cuerpo > tbody > tr.nom-row > td.nom-cell {
        padding: 0.75rem 0.9rem !important;
    }
    .nom-row-side { gap: 0.7rem; }
    .nom-amount { font-size: 0.95rem; }
    /* En móvil dejamos que el subtítulo caiga a su propia línea
       para no truncar tanto la información secundaria */
    .nom-subtitle {
        flex: 0 0 100%;
        white-space: normal;
    }
    .nom-title { font-size: 0.88rem; }
}

/* Dark mode */
html.dark-mode .nom-list-card,
.dark-mode .nom-list-card {
    background: var(--color-card-bg, #1e1e36);
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.2);
}
html.dark-mode .nom-list-toolbar,
.dark-mode .nom-list-toolbar {
    background: var(--color-card-bg, #1e1e36);
    border-bottom-color: rgba(255,255,255,0.07);
}
html.dark-mode .nom-list-count,
.dark-mode .nom-list-count { color: var(--color-text, #f3f4f6); }
html.dark-mode .nom-list-search > input,
.dark-mode .nom-list-search > input {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.12);
    color: var(--color-text, #f3f4f6);
}
html.dark-mode .nom-list-search > input:focus,
.dark-mode .nom-list-search > input:focus {
    background: rgba(255,255,255,0.06);
}
html.dark-mode .nom-list-card table#cuerpo > tbody > tr > td,
.dark-mode .nom-list-card table#cuerpo > tbody > tr > td {
    border-bottom-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode .nom-list-card table#cuerpo > tbody > tr:last-child > td,
.dark-mode .nom-list-card table#cuerpo > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}
html.dark-mode .nom-list-card table#cuerpo > tbody > tr:hover,
.dark-mode .nom-list-card table#cuerpo > tbody > tr:hover {
    background: rgba(255,255,255,0.035) !important;
}
html.dark-mode .nom-title,
.dark-mode .nom-title { color: var(--color-text, #f3f4f6); }
html.dark-mode .nom-subtitle,
.dark-mode .nom-subtitle { color: rgba(255,255,255,0.6); }
html.dark-mode .nom-amount,
.dark-mode .nom-amount { color: var(--color-text, #f3f4f6); }
html.dark-mode .nom-list-card table#cuerpo .nom-actions .btn-accion,
.dark-mode .nom-list-card table#cuerpo .nom-actions .btn-accion {
    color: rgba(255,255,255,0.65);
    background: transparent;
    border-color: transparent;
}
html.dark-mode .nom-list-card table#cuerpo .nom-actions .btn-accion:hover,
.dark-mode .nom-list-card table#cuerpo .nom-actions .btn-accion:hover {
    background: rgba(81, 146, 243, 0.15);
    border-color: rgba(81, 146, 243, 0.3);
    color: var(--color-primary-light, #5192f3);
}
html.dark-mode .nom-list-card table#cuerpo .nom-actions .btn-accion .clip-badge,
.dark-mode .nom-list-card table#cuerpo .nom-actions .btn-accion .clip-badge {
    border-color: var(--color-card-bg, #1e1e36);
}

/* Paginación cliente (12 por página) */
.nom-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.7rem 1.15rem;
    border-top: 1px solid var(--color-border, #eef0f3);
    background: var(--color-bg-muted, #fafbfc);
    flex-wrap: wrap;
}
.nom-pag-info {
    font-size: 0.78rem;
    color: var(--color-text-light, #6b7280);
    line-height: 1.4;
}
.nom-pag-info strong {
    color: var(--color-text, #111827);
    font-weight: 600;
}
.nom-pag-buttons {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.nom-pag-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 0.55rem;
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-bg, #fff);
    border-radius: 8px;
    color: var(--color-text, #1f2937);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    line-height: 1;
}
.nom-pag-btn.nom-pag-nav { font-size: 1rem; }
.nom-pag-btn:hover:not(:disabled):not(.active) {
    border-color: var(--color-primary, #0265bd);
    color: var(--color-primary, #0265bd);
    background: rgba(2, 101, 189, 0.06);
}
.nom-pag-btn.active {
    background: var(--color-primary, #0265bd);
    border-color: var(--color-primary, #0265bd);
    color: #fff;
    cursor: default;
}
.nom-pag-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.nom-pag-ellipsis {
    color: var(--color-text-light, #9ca3af);
    font-size: 0.85rem;
    padding: 0 0.25rem;
    user-select: none;
}

/* Responsive: en móvil empilamos main/side dentro de la celda */
@media (max-width: 576px) {
    .nom-list-toolbar { padding: 0.7rem 0.85rem; gap: 0.55rem; }
    .nom-list-search { flex: 1 1 100%; }
    .nom-list-card table#cuerpo > tbody > tr.nom-row > td.nom-cell {
        padding: 0.7rem 0.85rem !important;
    }
    .nom-row-grid { flex-direction: column; align-items: stretch; gap: 0.45rem; }
    .nom-row-main { flex-wrap: wrap; gap: 0.35rem 0.65rem; }
    .nom-row-side { justify-content: space-between; width: 100%; }
    .nom-pagination { justify-content: center; padding: 0.65rem 0.85rem; }
    .nom-pag-info { width: 100%; text-align: center; }
}

/* Dark mode paginación */
html.dark-mode .nom-pagination,
.dark-mode .nom-pagination {
    background: rgba(255,255,255,0.02);
    border-top-color: rgba(255,255,255,0.07);
}
html.dark-mode .nom-pag-info,
.dark-mode .nom-pag-info { color: rgba(255,255,255,0.65); }
html.dark-mode .nom-pag-info strong,
.dark-mode .nom-pag-info strong { color: var(--color-text, #f3f4f6); }
html.dark-mode .nom-pag-btn,
.dark-mode .nom-pag-btn {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.12);
    color: var(--color-text, #f3f4f6);
}
html.dark-mode .nom-pag-btn:hover:not(:disabled):not(.active),
.dark-mode .nom-pag-btn:hover:not(:disabled):not(.active) {
    background: rgba(81,146,243,0.15);
    border-color: rgba(81,146,243,0.3);
    color: var(--color-primary-light, #5192f3);
}

/* Loader del hub mientras se carga una sección por AJAX */
.hub-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 2rem 1rem;
    color: var(--color-text-light, #6b7280);
    gap: 0.85rem;
}
.hub-loader .spinner-border {
    width: 2.75rem;
    height: 2.75rem;
    color: var(--color-primary, #0265bd);
    border-width: 0.28em;
}
.hub-loader-text {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-text-light, #6b7280);
}
html.dark-mode .hub-loader,
.dark-mode .hub-loader {
    color: rgba(255,255,255,0.7);
}

/* Menú de navegación tipo tabs por encima del grid */
.sit-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0 0.25rem;
}
/* En móvil, los botones se ponen en una sola fila con scroll horizontal.
   Mismo margen lateral (1rem) que las cards del dashboard para que "Resumen"
   no quede pegado al borde izquierdo. */
@media (max-width: 991px) {
    .sit-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        padding-left: 1rem;
        padding-right: 1rem;
        scroll-padding-left: 1rem;
        scroll-padding-right: 1rem;
    }
    .sit-tabs::-webkit-scrollbar { display: none; } /* WebKit */
    .sit-tab-btn { flex-shrink: 0; }
}
.sit-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.95rem;
    border-radius: 10px;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text, #374151);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
.sit-tab-btn i { font-size: 0.95rem; line-height: 1; }
.sit-tab-btn:hover {
    border-color: var(--color-primary, #0265bd);
    color: var(--color-primary, #0265bd);
    background: rgba(2, 101, 189, 0.06);
}
.sit-tab-btn.active {
    background: var(--color-primary, #0265bd);
    border-color: var(--color-primary, #0265bd);
    color: #fff;
    box-shadow: 0 1px 3px rgba(2, 101, 189, 0.25);
}
.sit-tab-btn.active:hover {
    background: var(--color-primary-dark, #014a8a);
    border-color: var(--color-primary-dark, #014a8a);
    color: #fff;
}
.sit-tab-btn:focus,
.sit-tab-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(2,101,189,0.20);
}

/* Dark mode */
html.dark-mode .sit-tab-btn,
.dark-mode .sit-tab-btn {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.12);
    color: var(--color-text, #f3f4f6);
}
html.dark-mode .sit-tab-btn:hover,
.dark-mode .sit-tab-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.25);
    color: #fff;
}
html.dark-mode .sit-tab-btn.active,
.dark-mode .sit-tab-btn.active {
    background: var(--color-primary, #0265bd);
    border-color: var(--color-primary, #0265bd);
    color: #fff;
}
html.dark-mode .sit-tab-btn.active:hover,
.dark-mode .sit-tab-btn.active:hover {
    background: var(--color-primary-dark, #014a8a);
    border-color: var(--color-primary-dark, #014a8a);
    color: #fff;
}

.sit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1rem 0;
}
@media (max-width: 991px) { .sit-grid { grid-template-columns: 1fr; } }

.sit-col-left { display: flex; flex-direction: column; gap: 1rem; }
.sit-col-right { display: flex; flex-direction: column; gap: 1rem; }

/* ===== Fase 1 (móvil): cards independientes apiladas =====
   En móvil rompemos la unidad visual de .sit-hero-card. El wrapper pierde
   su borde y sombra (queda como contenedor lógico), y .sit-hero + cada
   .sit-stat reciben su propia card (radius + border + shadow + bg). Más
   aire vertical entre todos los bloques del dashboard.
   Breakpoint a 991px = misma anchura a la que .sit-grid colapsa a 1 columna. */
@media (max-width: 991px) {
    /* Aire vertical solo: el lateral lo gestiona #hub-content (que envuelve
       todas las pestañas del hub Mi Zona) para que el margen coincida con el
       de las pestañas Resumen/Ausencias/Vacaciones. */
    .sit-grid { padding: 0.85rem 0; gap: 1.25rem; }
    .sit-col-left, .sit-col-right { gap: 1.25rem; }

    /* Wrapper se vuelve neutral: ya no es la card, es solo flex container. */
    .sit-hero-card {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    /* El hero ahora es su propia card con borders propios. */
    .sit-hero {
        border-radius: 18px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
    }
    /* Sub-sección de stats pasa de borde-separador a 2 cards independientes. */
    .sit-hero-stats {
        gap: 1rem;
    }
    .sit-hero-stats > .sit-stat {
        /* !important porque hay una regla global más abajo en el archivo que
           hace `background: transparent; border: none` (parte del diseño unificado
           desktop). Sin !important se sobreescribe esta variante móvil. */
        background: var(--color-card-bg, #fff) !important;
        border: 1.5px solid #d6dbe3 !important;
        border-radius: 14px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
        padding: 1rem 1.1rem !important;
    }
    html.dark-mode .sit-hero-stats > .sit-stat,
    .dark-mode .sit-hero-stats > .sit-stat {
        border-color: rgba(255, 255, 255, 0.12) !important;
    }
    /* Quitar el separador vertical: ahora hay gap entre cards. */
    .sit-hero-stats > .sit-stat + .sit-stat {
        border-left: none !important;
    }
    html.dark-mode .sit-hero-stats > .sit-stat,
    .dark-mode .sit-hero-stats > .sit-stat {
        background: var(--color-card-bg);
        border-color: var(--color-border);
    }

    /* ===== Fase 2 (móvil): hero más generoso =====
       Más padding, cronómetro grande y badge de estado más visible. */
    .sit-hero {
        padding: 1.4rem 1.35rem 1.5rem;
    }
    .sit-hero-fecha { font-size: 15px; }
    .sit-hero-fecha-meta { font-size: 12.5px; }
    .sit-hero-timer {
        font-size: 80px;
        margin: 0.85rem 0 0.85rem;
        gap: 14px;
    }
    .sit-hero-status-dot {
        width: 12px; height: 12px;
        box-shadow: 0 0 0 5px rgba(255,255,255,0.18);
    }
    /* Badge "Inicio HH:MM" / "Desconectado" / "Pausa" más prominente. */
    .sit-hero-inicio {
        font-size: 12.5px;
        padding: 0.35rem 0.85rem;
        gap: 0.45rem;
    }
    .sit-hero-inicio i { font-size: 0.95rem; }
    /* Divider con un pelín más de aire. */
    .sit-hero-divider { margin: 0.85rem 0 0.95rem; }
    /* Bloque inferior: "00h 00min / 07h 00min" y pills Vigo + mapa + histórico. */
    .sit-hero-progress { font-size: 15px; }
    .sit-hero-bottom { gap: 1rem; }
    .sit-hero-pill {
        padding: 0.4rem 0.85rem;
        font-size: 13px;
    }
    .sit-hero-pill-map {
        height: 32px;
        padding: 0 0.9rem;
        font-size: 13px;
    }

    /* ===== Fase 3 (móvil): botones de jornada en pill ancho con texto =====
       En desktop son FAB redondos (64×64). En móvil queremos pills horizontales
       con icono + label, ocupando todo el ancho del hero.
       Layout: fila 1 = [fecha-wrap, badge inicio]; fila 2 = [actions full width]. */
    .sit-hero-top {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.65rem 0.85rem;
        margin-bottom: 0.85rem;     /* separa de .sit-hero-timer en móvil */
    }
    .sit-hero-fecha-wrap { flex: 1 1 0; }
    .sit-hero-inicio { margin-left: auto; flex-shrink: 0; }
    .sit-hero-actions {
        flex-basis: 100%;           /* fuerza segunda fila */
        width: 100%;
        gap: 0.6rem;
        align-items: stretch;
        margin-top: 0.85rem;        /* separa del pill "Inicio HH:MM" de arriba */
    }
    .sit-action-btn,
    .sit-action-btn.sit-action-btn-sec {
        width: auto !important;
        flex: 1 1 0;
        min-width: 0;
        height: 48px !important;
        border-radius: 999px !important;     /* Pill totalmente redondeado */
        font-size: 1rem;
        padding: 0 0.9rem;
        gap: 0.5rem;
        font-weight: 700;
    }
    /* En móvil ambos botones se ensanchan: anulamos icon-only para que el
       botón compacto vuelva a mostrar texto y ocupe su columna. */
    .sit-action-btn.sit-action-btn-icon-only { padding: 0 0.9rem !important; }
    .sit-action-btn.sit-action-btn-icon-only .sit-action-label { display: inline-block !important; }
    /* Label visible en móvil — el !important vence al display:none global
       sin importar el orden de carga del CSS. */
    .sit-action-btn .sit-action-label {
        display: inline-block !important;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.005em;
        line-height: 1;
    }
    .sit-action-btn i { font-size: 1.15rem; }
    .sit-action-btn.sit-action-btn-sec i { font-size: 1.1rem; }
}

/* Botón "Finalizar": mismo lenguaje que "Iniciar fichaje" — pill blanco con
   icono + texto en azul primario. Cuando lleva `disabled` (en pausa) se
   combina con .sit-action-btn-icon-only para reducirse a un cuadrado compacto
   que indica acción bloqueada. */
.sit-action-btn.sit-action-btn-stop {
    background: #fff !important;
    color: var(--color-primary, #0265bd) !important;
    border: none !important;
}
.sit-action-btn.sit-action-btn-stop:hover:not(:disabled) {
    background: #fff !important;
    color: var(--color-primary-dark, #014a8a) !important;
}
.sit-action-btn.sit-action-btn-stop:active:not(:disabled) {
    background: #fff !important;
}
.sit-action-btn.sit-action-btn-stop:disabled {
    background: rgba(255,255,255,0.20) !important;
    color: rgba(255,255,255,0.55) !important;
    box-shadow: none;
    opacity: 1;
}

/* Card unificada: hero arriba + stats abajo */
.sit-hero-card {
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    overflow: hidden;
}
html.dark-mode .sit-hero-card,
.dark-mode .sit-hero-card {
    background: var(--color-card-bg, #1f2937);
    border-color: var(--color-border, #374151);
}

/* Hero blue (arriba). Degradado invertido: oscuro → claro. */
.sit-hero {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    color: #fff;
    padding: 1.1rem 1.25rem;
    /* el border-radius lo aplica .sit-hero-card */
}
/* En modo oscuro el gradiente del primary brillaba demasiado sobre el resto
   de cards. Bajamos a un degradado Surface 1 → navy para que el hero se
   integre con la paleta sin perder identidad azul. */
html.dark-mode .sit-hero,
.dark-mode .sit-hero {
    background: linear-gradient(135deg, var(--color-card-bg), #1E3A9C);
}

/* Sub-seccion de stats (abajo, fondo blanco) */
.sit-hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.sit-hero-stats > .sit-stat {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0.95rem 1.25rem;
}
.sit-hero-stats > .sit-stat + .sit-stat {
    border-left: 1px solid var(--color-border, #e5e7eb);
}
html.dark-mode .sit-hero-stats > .sit-stat + .sit-stat,
.dark-mode .sit-hero-stats > .sit-stat + .sit-stat {
    border-left-color: rgba(255,255,255,0.08);
}
.sit-hero-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;             /* permite que .sit-hero-actions baje a su fila */
    gap: 0.5rem 0.85rem;
    /* margin-bottom lo controlan los media queries: móvil ~0.85rem, desktop 0
       (este último cuando sit-hero-top pasa a display:contents en el grid). */
}
/* La fecha se queda a la izquierda; el badge .sit-hero-inicio se pega
   a la derecha; las acciones van a fila propia debajo, alineadas a la dcha. */
.sit-hero-top > .sit-hero-fecha-wrap { flex: 1 1 0; }
.sit-hero-top > .sit-hero-inicio { margin-left: auto; flex-shrink: 0; }
.sit-hero-top > .sit-hero-actions {
    flex-basis: 100%;
    width: 100%;
    justify-content: flex-end;
    margin-top: 0.35rem;
}
.sit-hero-fecha-wrap { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

/* ===== Desktop (≥992px): grid 2 columnas en .sit-hero =====
   Fila 1: fecha (izq) | badge (dcha).
   Fila 2: timer (izq) | botones (dcha).
   Fila 3+: divider y bottom abarcan las 2 columnas.
   `display: contents` "abre" .sit-hero-top y .sit-hero-timer para que sus hijos
   sean items directos del grid. */
@media (min-width: 992px) {
    .sit-hero {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 1rem;
        row-gap: 0.55rem;
    }
    /* Abrimos solo .sit-hero-top para que sus 3 hijos sean items del grid;
       .sit-hero-timer se mantiene como una unidad (su layout interno funciona). */
    .sit-hero-top { display: contents; }
    .sit-hero-top { margin-bottom: 0; }
    .sit-hero-fecha-wrap { grid-row: 1; grid-column: 1; align-self: center; }
    .sit-hero-top > .sit-hero-inicio {
        grid-row: 1; grid-column: 2;
        align-self: center;
        justify-self: end;          /* no estirar a todo el ancho de la celda */
        margin-left: 0;            /* el grid ya empuja a la dcha */
    }
    .sit-hero-timer {
        grid-row: 2; grid-column: 1;
        align-self: center;
        margin: 0;                  /* anula los márgenes que tenía como bloque suelto */
    }
    .sit-hero-top > .sit-hero-actions {
        grid-row: 2; grid-column: 2;
        flex-basis: auto;
        width: auto;
        margin-top: 0;
        justify-content: flex-end;
        align-self: center;
    }
    .sit-hero-divider { grid-column: 1 / -1; }
    .sit-hero-bottom { grid-column: 1 / -1; }
}
.sit-hero-fecha {
    font-size: 0.95rem;
    font-weight: 600;
    opacity: 0.95;
}
.sit-hero-fecha-meta {
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.78;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-variant-numeric: tabular-nums;
}
.sit-hero-sep { opacity: 0.55; }
.sit-hero-actions { display: flex; gap: 0.65rem; align-items: center; }
/* Desktop: botones Iniciar/Reanudar/Finalizar como pill blanco con icono + texto.
   El media query móvil de Fase 3 los reescribe a pill ancho que ocupa toda la fila. */
.sit-action-label { display: inline-block; }
.sit-action-btn {
    height: 56px;
    padding: 0 1.4rem;
    border-radius: 14px;
    background: #fff;
    border: none;
    color: var(--color-primary, #0265bd);
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.55rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease, color 0.15s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    position: relative;
}
.sit-action-btn i { font-size: 1.35rem; }
.sit-action-btn:hover:not(:disabled) {
    background: #f4f8ff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}
.sit-action-btn:active:not(:disabled) { transform: translateY(0); }
.sit-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Modificador: botón compacto que muestra solo el icono (sin texto) en desktop.
   En móvil la regla del @media restaura el formato pill ancho con texto. */
.sit-action-btn.sit-action-btn-icon-only {
    width: 56px;
    padding: 0;
}
.sit-action-btn.sit-action-btn-icon-only .sit-action-label { display: none; }

/* Botón secundario (Pausa cuando hay jornada activa): cuadrado azul translúcido
   pegado al primario, icono solo, sin pill blanco. Mantiene la jerarquía visual. */
.sit-action-btn.sit-action-btn-sec {
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 14px;
    background: rgba(255,255,255,0.20);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.sit-action-btn.sit-action-btn-sec i { font-size: 1.5rem; }
.sit-action-btn.sit-action-btn-sec:hover:not(:disabled) {
    background: rgba(255,255,255,0.30);
    transform: none;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}

.sit-hero-timer {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0.55rem 0 0.65rem;
}
/* Override post-base: en desktop el timer es mucho mayor. Va aquí (después de la
   regla base) para ganar la cascada al tener misma especificidad. */
@media (min-width: 992px) {
    .sit-hero-timer {
        font-size: 3rem;
        font-weight: 800;
        letter-spacing: -0.02em;
    }
}
.sit-hero-status-dot {
    width: 10px; height: 10px; border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.sit-hero-inicio {
    margin-left: auto;
    font-size: 0.74rem;
    font-weight: 600;
    background: rgba(255,255,255,0.18);
    color: #fff;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
}
.sit-hero-inicio i { font-size: 0.85rem; opacity: 1; }
/* Variantes por estado de jornada */
.sit-hero-inicio.sit-hero-inicio-activa {
    background: rgba(34, 197, 94, 0.95);
    border-color: rgba(255,255,255,0.25);
    color: #fff;
}
.sit-hero-inicio.sit-hero-inicio-pausa {
    background: rgba(245, 158, 11, 0.95);
    border-color: rgba(255,255,255,0.25);
    color: #fff;
}
.sit-hero-inicio.sit-hero-inicio-fuera {
    background: rgba(239, 68, 68, 0.95);
    border-color: rgba(255,255,255,0.25);
    color: #fff;
}
.sit-hero-divider {
    border-top: 1px solid rgba(255,255,255,0.22);
    margin: 0.55rem 0 0.7rem;
}
.sit-hero-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.sit-hero-progress {
    font-size: 0.92rem;
    font-weight: 600;
    opacity: 0.95;
}
.sit-hero-progress-sep { opacity: 0.55; margin: 0 0.15rem; }
.sit-hero-pill {
    background: rgba(255,255,255,0.22);
    color: #fff;
    border-radius: 999px;
    padding: 0.28rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.sit-hero-pill-group {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.sit-hero-pill-map {
    background: rgba(255,255,255,0.22);
    color: #fff;
    border: none;
    border-radius: 999px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0 0.75rem;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    transition: background 0.15s ease;
    white-space: nowrap;
}
.sit-hero-pill-map-label {
    display: inline-block;
}
.sit-hero-pill-map:hover { background: rgba(255,255,255,0.36); }
.sit-hero-pill-map:active { transform: scale(0.94); }
.sit-hero-pill-map[aria-expanded="true"] {
    background: #fff;
    color: var(--color-primary, #0265bd);
}

/* Desplegable del mapa de ubicación */
.sit-mapa-panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.32s ease, margin-top 0.32s ease, padding 0.32s ease;
    margin-top: 0;
}
.sit-mapa-panel[hidden] { display: none; }
.sit-mapa-panel.is-open {
    max-height: 360px;
    margin-top: 0.8rem;
}
.sit-mapa-panel-inner {
    background: rgba(255,255,255,0.96);
    border-radius: 12px;
    padding: 0.55rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    position: relative;
}
/* Dark mode: el wrapper compartido por el panel del mapa y el histórico
   pasa de blanco a Surface 2 para integrarse con la paleta nocturna. */
html.dark-mode .sit-mapa-panel-inner,
.dark-mode .sit-mapa-panel-inner {
    background: var(--color-bg-surface, #18204F);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
html.dark-mode .sit-mapa-estado,
.dark-mode .sit-mapa-estado { color: var(--color-text-light); }
.sit-mapa-contenedor {
    height: 240px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #eef2f7;
}
.sit-mapa-contenedor:empty {
    background: repeating-linear-gradient(45deg, #eef2f7, #eef2f7 10px, #e3e8ef 10px, #e3e8ef 20px);
}
.sit-mapa-estado {
    text-align: center;
    color: #475569;
    font-size: 0.82rem;
    padding: 0.5rem 0 0.2rem;
    min-height: 1.2rem;
}
.sit-mapa-estado.is-error { color: #b91c1c; }
.sit-mapa-estado.is-hidden { display: none; }

/* Panel histórico de fichajes: comparte transición y caja con .sit-mapa-panel,
   pero le dejamos un max-height mayor cuando hay muchos registros y scroll
   propio en la lista. */
.sit-historico-panel.is-open { max-height: 420px; }
.sit-historico-titulo {
    font-weight: 600;
    color: var(--color-text, #1f2937);
    font-size: 0.92rem;
    padding: 0.1rem 0.2rem 0.45rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.sit-historico-titulo i { color: var(--color-primary, #0265bd); }
.sit-historico-lista {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-right: 0.2rem;
}
.sit-hist-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    background: var(--color-bg, #fff);
    font-size: 0.82rem;
}
.sit-hist-row-main {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}
.sit-hist-row-dia {
    font-weight: 600;
    color: var(--color-text, #1f2937);
    text-transform: capitalize;
}
.sit-hist-row-fecha {
    color: var(--color-text-light, #6b7280);
    font-size: 0.74rem;
}
.sit-hist-row-horas {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.sit-hist-rango {
    color: var(--color-text, #1f2937);
    font-weight: 500;
}
.sit-hist-duracion {
    color: var(--color-text-light, #6b7280);
    font-size: 0.74rem;
}
.sit-hist-row.sit-hist-activa { border-color: #16a34a; }
.sit-hist-row.sit-hist-activa .sit-hist-duracion { color: #16a34a; font-weight: 600; }
.sit-hist-vacio {
    text-align: center;
    color: var(--color-text-light, #6b7280);
    font-size: 0.85rem;
    padding: 0.8rem 0.4rem;
}
html.dark-mode .sit-hist-row,
.dark-mode .sit-hist-row {
    background: var(--color-card-bg, #1f2937);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Stats tiles */
.sit-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.sit-stat {
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    padding: 0.95rem 1.1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.sit-stat-label {
    color: var(--color-text-light, #6b7280);
    font-size: 0.78rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
}
.sit-stat-value {
    color: var(--color-text, #1f2937);
    font-size: 1.35rem;
    font-weight: 700;
}

/* ===== Sección de dashboard (Mis vacaciones / Solicitudes pendientes) =====
   Header fuera de la card, contenido dentro de la card. Mismo lenguaje que
   las secciones de la pestaña Vacaciones (vc-section-*). */
.sit-section {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.sit-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.15rem;            /* alineado con el contenido de la card */
}
.sit-section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.sit-section-anio {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-light, #9ca3af);
    letter-spacing: 0;
}
.sit-section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.sit-section-badge-warn { background: rgba(253, 152, 67, 0.18); color: #b35a0e; }
.sit-section-link {
    background: transparent;
    border: none;
    color: var(--color-primary, #0265bd);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    transition: background 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.sit-section-link:hover { background: rgba(2, 101, 189, 0.06); }
html.dark-mode .sit-section-title,
.dark-mode .sit-section-title { color: var(--color-text, #f3f4f6); }
html.dark-mode .sit-section-anio,
.dark-mode .sit-section-anio { color: var(--color-text-light, #9ca3af); }

/* Card derecha: ausencias */
.sit-ausencias {
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    overflow: hidden;
}
.sit-ausencias-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--color-border, #f3f4f6);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text, #1f2937);
}
.sit-ausencias-body { padding: 0.85rem 1.1rem 1rem; }
.sit-ausencias-titulo {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    margin-bottom: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.sit-ausencias-anio {
    font-weight: 500;
    color: var(--color-text-light, #6b7280);
    font-size: 0.85rem;
    margin-left: 0.2rem;
}
.sit-vac-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.sit-vac-col { display: flex; flex-direction: column; gap: 0.18rem; }
.sit-vac-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.4rem;
    vertical-align: middle;
}
.sit-vac-dot.dot-blue       { background: var(--color-primary, #0265bd); }
.sit-vac-dot.dot-grey       { background: #9ca3af; }
.sit-vac-dot.dot-grey-light { background: #d1d5db; }
.sit-vac-dot.dot-orange     { background: #f59e0b; }
.sit-vac-label {
    font-size: 0.74rem;
    color: var(--color-text-light, #6b7280);
    display: flex;
    align-items: center;
}
/* Variante completa para desktop, abreviada para móvil. Solo una visible
   en cada viewport para no duplicar texto. */
.sit-vac-label-short { display: none; }
.sit-vac-label-full  { display: inline; }
@media (max-width: 991px) {
    .sit-vac-label-short { display: inline; }
    .sit-vac-label-full  { display: none; }
}
.sit-vac-num {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
}
.sit-vac-num.text-blue { color: var(--color-primary, #0265bd); }
.sit-vac-bar {
    height: 6px;
    background: var(--color-border, #e5e7eb);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 1rem;
}
.sit-vac-bar-fill {
    height: 100%;
    background: var(--color-primary, #0265bd);
    transition: width 0.3s ease;
}

/* Pendientes */
.sit-pend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.4rem;
    border-top: 1px solid var(--color-border, #f3f4f6);
    margin-top: 0.3rem;
    margin-bottom: 0.2rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-text, #1f2937);
}
.sit-pend-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.sit-pend-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.4rem;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.sit-pend-item:hover { background: var(--color-bg-muted, #f9fafb); }
.sit-pend-fecha {
    background: var(--color-bg-muted, #f3f4f6);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    text-align: center;
    min-width: 42px;
}
.sit-pend-dia {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    line-height: 1.05;
}
.sit-pend-mes {
    font-size: 0.6rem;
    color: var(--color-text-light, #6b7280);
    font-weight: 600;
    text-transform: uppercase;
}
.sit-pend-info { flex: 1; min-width: 0; }
.sit-pend-nombre {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text, #1f2937);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sit-pend-tipo {
    font-size: 0.72rem;
    color: var(--color-text-light, #6b7280);
}
.sit-pend-tag {
    font-size: 0.78rem;
    color: var(--color-text-light, #6b7280);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.sit-pend-estado {
    font-size: 0.78rem;
    font-weight: 600;
    color: #f59e0b;
    flex-shrink: 0;
}
.sit-pend-empty {
    padding: 0.85rem;
    color: var(--color-text-light, #9ca3af);
    font-size: 0.85rem;
    text-align: center;
    font-style: italic;
}

.sit-link-btn {
    background: transparent;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 50%;
    width: 30px; height: 30px;
    color: var(--color-primary, #0265bd);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.sit-link-btn:hover {
    background: var(--color-primary-hover, rgba(2,101,189,0.08));
    border-color: var(--color-primary, #0265bd);
}

/* Dark mode */
html.dark-mode .sit-stat,
.dark-mode .sit-stat,
html.dark-mode .sit-ausencias,
.dark-mode .sit-ausencias {
    background: var(--color-card-bg, #1f2937);
    border-color: var(--color-border, #374151);
}
html.dark-mode .sit-vac-bar,
.dark-mode .sit-vac-bar { background: rgba(255,255,255,0.1); }
html.dark-mode .sit-pend-item:hover,
.dark-mode .sit-pend-item:hover { background: rgba(255,255,255,0.04); }
html.dark-mode .sit-pend-fecha,
.dark-mode .sit-pend-fecha { background: rgba(255,255,255,0.06); }
html.dark-mode .sit-link-btn,
.dark-mode .sit-link-btn { border-color: rgba(255,255,255,0.12); }
html.dark-mode .sit-ausencias-header,
.dark-mode .sit-ausencias-header,
html.dark-mode .sit-pend-header,
.dark-mode .sit-pend-header { border-color: rgba(255,255,255,0.08); }

/* ===== Nóminas recientes (card en columna derecha) ===== */
.sit-nominas {
    background: var(--color-bg, #fff);
    border-radius: 12px;
    border: 1px solid var(--color-border, #e5e7eb);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    overflow: hidden;
}
.sit-nominas-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--color-border, #f3f4f6);
}
.sit-nominas-header > span {
    flex: 1;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text, #1f2937);
}
.sit-nominas-toggle {
    background: transparent;
    border: none;
    padding: 0.25rem;
    color: var(--color-text-light, #9ca3af);
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.12s ease, background 0.12s ease;
}
.sit-nominas-toggle:hover {
    color: var(--color-primary, #0265bd);
    background: rgba(2, 101, 189, 0.06);
}
.sit-nominas-toggle i { font-size: 1rem; }
.sit-nominas-body {
    padding: 0.25rem 0;
}
.sit-nomina-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
    align-items: center;
    padding: 0.7rem 1.1rem;
    border-bottom: 1px solid var(--color-border, #f3f4f6);
}
.sit-nomina-item:last-child { border-bottom: none; }
.sit-nomina-mes {
    font-size: 0.88rem;
    color: var(--color-text, #374151);
    font-weight: 500;
}
.sit-nomina-importe {
    font-size: 0.88rem;
    color: var(--color-text-light, #6b7280);
    letter-spacing: 0.08em;
    min-width: 64px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.sit-nomina-estado {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.22rem 0.7rem;
    border-radius: 14px;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.sit-nom-estado-pagado {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}
.sit-nom-estado-pendiente {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

/* Dark mode nóminas */
html.dark-mode .sit-nominas,
.dark-mode .sit-nominas {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.10);
}
html.dark-mode .sit-nominas-header,
.dark-mode .sit-nominas-header,
html.dark-mode .sit-nomina-item,
.dark-mode .sit-nomina-item { border-color: rgba(255,255,255,0.08); }
html.dark-mode .sit-nomina-mes,
.dark-mode .sit-nomina-mes { color: var(--color-text, #f3f4f6); }
html.dark-mode .sit-nomina-importe,
.dark-mode .sit-nomina-importe { color: rgba(255,255,255,0.75); }

/* ===== Tareas (card en columna derecha del Resumen Perfil) ===== */
.sit-tareas {
    background: var(--color-bg, #fff);
    border-radius: 12px;
    border: 1px solid var(--color-border, #e5e7eb);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    overflow: hidden;
}
.sit-tareas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--color-border, #f3f4f6);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text, #1f2937);
}
.sit-tareas-body { padding: 0.9rem 1.1rem 1rem; }
.sit-tareas-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.sit-tareas-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.1rem 0;
}
.sit-tareas-num {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text, #1f2937);
}
.sit-tareas-num-venc { color: #dc2626; }
.sit-tareas-num-pend { color: #f59e0b; }
.sit-tareas-num-sin  { color: var(--color-text-light, #6b7280); }
.sit-tareas-label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-text-light, #6b7280);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.sit-tareas-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.sit-tareas-dot-venc { background: #dc2626; }
.sit-tareas-dot-pend { background: #f59e0b; }
.sit-tareas-dot-sin  { background: #9ca3af; }
.sit-tareas-empty {
    color: var(--color-text-light, #6b7280);
    font-size: 0.82rem;
    padding: 0.4rem 0 0.1rem;
}
.sit-tareas-lista { padding-top: 0.3rem; }

/* Dark mode tareas */
html.dark-mode .sit-tareas,
.dark-mode .sit-tareas {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.10);
}
html.dark-mode .sit-tareas-header,
.dark-mode .sit-tareas-header { border-color: rgba(255,255,255,0.08); }
html.dark-mode .sit-tareas-num-sin,
.dark-mode .sit-tareas-num-sin { color: rgba(255,255,255,0.7); }

/* Tile "Horas semanales" con barra de progreso */
.sit-stat-with-progress {
    display: flex;
    flex-direction: column;
}
.sit-stat-progress-target {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-light, #9ca3af);
    margin-left: 0.25rem;
}
.sit-stat-progress {
    margin-top: 0.55rem;
    height: 6px;
    background: var(--color-border, #e5e7eb);
    border-radius: 999px;
    overflow: hidden;
}
.sit-stat-progress-bar {
    height: 100%;
    background: var(--color-primary, #0265bd);
    border-radius: 999px;
    transition: width 0.4s ease;
}
html.dark-mode .sit-stat-progress,
.dark-mode .sit-stat-progress { background: rgba(255,255,255,0.1); }

/* Chart mini embebido en tile "Media diaria" */
.sit-stat-with-chart {
    display: flex;
    flex-direction: column;
}
.sit-stat-with-chart .sit-stat-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-light, #6b7280);
    letter-spacing: 0.02em;
    margin-bottom: 0.15rem;
}
.sit-stat-chart {
    margin-top: 0.35rem;
    flex: 1;
    min-height: 0;
}
.sit-stat-chart-svg {
    width: 100%;
    height: 70px;
    display: block;
}
.sit-stat-chart-svg rect:hover { opacity: 0.85; }

.mc-page {
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* La tabla controla el reparto fijo de anchos para que el contenido nunca
   desborde la celda (sin esto, el email largo empuja el ancho del td). */
#mcTabla { table-layout: fixed; width: 100%; }

/* Celdas: padding cómodo + word-wrap para textos largos */
.mc-cell {
  vertical-align: top;
  padding: 10px 12px;
  overflow: hidden;
}
.mc-cell-info { word-break: break-word; }

/* Bloque izquierda */
.mc-nombre {
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.25;
  word-break: break-word;
}
.mc-subtitulo {
  font-size: 0.82em;
  color: var(--color-text-muted);
  margin-top: 2px;
  word-break: break-word;
}
.mc-direccion {
  font-size: 0.78em;
  color: var(--color-text-muted);
  margin-top: 4px;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  word-break: break-word;
}
.mc-direccion i { flex-shrink: 0; margin-top: 2px; }

/* Bloque derecha (contacto): apilado en columna, alineado a la derecha,
   con cada enlace truncado por ellipsis si excede el ancho de la celda */
.mc-cell-contacto {
  text-align: right;
}
.mc-cell-contacto .mc-link {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-cell-contacto .mc-tel {
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.92rem;
  margin-bottom: 4px;
}
.mc-cell-contacto .mc-email {
  color: var(--color-primary);
  font-size: 0.8rem;
}
.mc-link {
  color: var(--color-primary);
  text-decoration: none;
}
.mc-link:hover { text-decoration: underline; }
.mc-link i { margin-right: 3px; }

/* Estado vacío */
.mc-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--color-text-muted);
  gap: 6px;
}
.mc-empty i { font-size: 3rem; color: var(--color-border); }
.mc-empty-title { font-size: 1rem; font-weight: 600; color: var(--color-text); }
.mc-empty-sub { font-size: 0.85rem; }

/* Móvil: celdas más estrechas → tipografías ligeramente menores y
   reparto col-7/col-5 más equilibrado para que el contacto no se aplaste */
@media (max-width: 768px) {
  .mc-cell { padding: 8px 8px; }
  .mc-nombre { font-size: 0.92rem; }
  .mc-subtitulo { font-size: 0.74em; }
  .mc-direccion { font-size: 0.74em; }
  .mc-cell-contacto .mc-tel { font-size: 0.82rem; }
  .mc-cell-contacto .mc-email { font-size: 0.72rem; }
}

/* ===== Datos Comercial (12.7) — 3 secciones: Mis Datos, Resumen, Calendario ===== */
.dc-page {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 14px 16px 120px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}
.dc-section {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
.dc-section-title {
  margin: 0;
  padding: 12px 18px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary);
  background: linear-gradient(135deg, rgba(2,101,189,0.08), rgba(2,101,189,0.02));
  border-bottom: 1px solid var(--color-border-light);
}
.dc-section-body { padding: 14px 18px; color: var(--color-text); }

/* Toggle de preferencia "incluir clientes asignados" */
.dc-pref-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "check label" "check help";
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
  cursor: pointer;
  user-select: none;
}
.dc-pref-toggle input[type="checkbox"] {
  grid-area: check;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: #0265bd;
}
.dc-pref-label {
  grid-area: label;
  font-weight: 600;
  color: var(--color-text);
}
.dc-pref-help {
  grid-area: help;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.35;
}

.dc-empty {
  text-align: center;
  padding: 28px 12px;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

/* Mis Datos — pares label/valor en 2 columnas */
.dc-datos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}
.dc-dato { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dc-dato-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  font-weight: 600;
}
.dc-dato-valor {
  font-size: 0.95rem;
  color: var(--color-text);
  word-break: break-word;
}

/* Resumen — lista clicable: TipoDoc | Contador | Importe | flecha
   Columnas con anchos fijos para que queden alineadas en todas las filas. */
.dc-resumen-lista {
  display: flex;
  flex-direction: column;
}
.dc-resumen-item {
  display: grid;
  grid-template-columns: 1fr 60px 130px 18px;
  gap: 14px;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.92rem;
}
.dc-resumen-item:last-child { border-bottom: none; }
.dc-resumen-item.dc-clicable {
  cursor: pointer;
  transition: background 0.15s;
}
.dc-resumen-item.dc-clicable:hover { background: var(--color-bg-muted); }
.dc-resumen-titulo {
  color: var(--color-text);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dc-resumen-contador {
  color: var(--color-primary);
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.dc-resumen-importe {
  color: var(--color-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.dc-resumen-flecha {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-align: right;
}
.dark-mode .dc-resumen-item.dc-clicable:hover,
:root:not(.light-mode) .dc-resumen-item.dc-clicable:hover {
  background: rgba(255,255,255,0.04);
}

/* Calendario — el contenedor de FullCalendar */
#dcCalendario { width: 100%; }

/* Móvil */
@media (max-width: 768px) {
  .dc-page { padding: 10px 10px 100px 10px; gap: 12px; }
  .dc-section-title { padding: 10px 14px; font-size: 0.98rem; }
  .dc-section-body { padding: 12px 14px; }
  .dc-datos-grid { grid-template-columns: 1fr; gap: 10px; }
  /* Resumen en móvil: 3 columnas alineadas (título / contador / importe / flecha) */
  .dc-resumen-item {
    grid-template-columns: 1fr 40px 90px 14px;
    gap: 8px;
    font-size: 0.86rem;
  }

  /* FullCalendar dentro de Datos Comercial: compactar para móvil */
  #dcCalendario .fc-toolbar { flex-wrap: wrap; gap: 6px; }
  #dcCalendario .fc-toolbar-chunk { display: flex; align-items: center; gap: 4px; }
  #dcCalendario .fc-toolbar-title { font-size: 1rem !important; }
  #dcCalendario .fc-button {
    padding: 4px 8px !important;
    font-size: 0.78rem !important;
  }
  /* Footer toolbar (las vistas: Mes/Lista) ocupa toda la línea */
  #dcCalendario .fc-footer-toolbar {
    margin-top: 8px !important;
    justify-content: center;
  }
  #dcCalendario .fc-footer-toolbar .fc-toolbar-chunk { width: 100%; justify-content: center; }
  /* Header de días: muy compacto */
  #dcCalendario .fc-col-header-cell-cushion {
    font-size: 0.72rem !important;
    padding: 4px 0 !important;
  }
  #dcCalendario .fc-daygrid-day-number {
    font-size: 0.78rem !important;
    padding: 2px 4px !important;
  }
  #dcCalendario .fc-daygrid-day-frame { min-height: 50px; }
}

/* Dark mode */
.dark-mode .dc-section,
:root:not(.light-mode) .dc-section {
  background: var(--color-bg-muted);
  border-color: var(--color-border);
}
.dark-mode .dc-section-title,
:root:not(.light-mode) .dc-section-title {
  background: linear-gradient(135deg, rgba(81,146,243,0.12), rgba(81,146,243,0.04));
  color: var(--color-primary-light);
  border-bottom-color: var(--color-border);
}
/* ===== Artículos Venta (12.6) — listado desde IndexedDB ===== */
/* Reutiliza .bl-container/.bl-bar de barraListado.css para el aspecto de la barra. */
.av-orden-select {
  border: 1px solid var(--bl-accent-line, var(--color-border));
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 0.82rem;
  cursor: pointer;
  margin-left: 6px;
}
.av-orden-select:focus {
  outline: none;
  border-color: var(--color-primary);
}
/* En móvil con búsqueda activa, ocultar el select de orden igual que las demás cosas */
.bl-container.bl-search-mode .av-orden-select { display: none; }
/* En modo búsqueda en Artículos Venta, ocultar el botón lupa de la derecha:
   ya está el botón X para cerrar/limpiar, y el botón derecho solo borraba texto. */
#avBlContainer.bl-search-mode .bl-search-btn { display: none; }
.av-loading {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}
.av-loading i {
  display: inline-block;
  animation: spin 0.8s linear infinite;
  margin-right: 8px;
  font-size: 1.1rem;
}
/* Spinner del modal carrito (paginación de artículos) */
.carr-art-spinner {
  grid-column: 1 / -1;
  text-align: center;
  padding: 14px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.carr-art-spinner i {
  display: inline-block;
  animation: spin 0.8s linear infinite;
  margin-right: 6px;
}
.av-sentinel {
  height: 1px;
  margin-top: 8px;
}
.av-spinner {
  text-align: center;
  padding: 14px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.av-spinner i {
  display: inline-block;
  animation: spin 0.8s linear infinite;
  margin-right: 6px;
}
.av-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--color-text-muted);
  gap: 6px;
}
.av-empty i { font-size: 3rem; color: var(--color-border); }
.av-empty-title { font-size: 1rem; font-weight: 600; color: var(--color-text); }
.av-empty-sub { font-size: 0.85rem; }

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ OFFLINE: Listado simple (Ventas + Cobros) — clases offline-only        ║
   ║ Usado por js/offlineVentas.js y js/offlineCobros.js dentro de          ║
   ║ #offlineListaWrapper (insertado por offlineRouter al renderizar        ║
   ║ las secciones 12.1–12.5 cuando hay modo offline activo).               ║
   ║ NO reusa .bl-* online: el diseño es propio y deliberadamente más       ║
   ║ simple (sin filtros/sort/export/refresh). Aislado entre marcadores     ║
   ║ OFFLINE para facilitar el merge con la rama del compañero.            ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

/* Contenedor offline: mismo ancho que el listado online (~1400px max, centrado
   con margen lateral pequeño). Aplica solo cuando el router inyecta el wrapper. */
#offlineListaWrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px 80px;
}

/* Barra organizadora offline */
.offline-bl {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f3f7fb;
  border: 1px solid #d8e2ec;
  border-radius: 10px 10px 0 0;
  padding: 10px 14px 12px;
  margin-bottom: 0;
  font-family: "Poppins", Inter, system-ui, sans-serif;
}
.offline-bl-titulo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.offline-bl-titulo {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-primary);
}
.offline-bl-contador {
  display: inline-flex;
  align-items: center;
  min-width: 32px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}
.offline-bl-contador-sep { opacity: 0.7; margin: 0 2px; font-weight: 400; }
.offline-bl-importe {
  margin-left: auto;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  font-weight: 600;
}
.offline-bl-search-row {
  position: relative;
  display: flex;
  align-items: center;
}
.offline-bl-search-icon {
  position: absolute;
  left: 10px;
  color: var(--color-text-light);
  font-size: 0.85rem;
  pointer-events: none;
}
.offline-bl-search {
  flex: 1;
  height: 34px;
  padding: 4px 12px 4px 30px;
  border: 1px solid #cdd6df;
  border-radius: 8px;
  font-size: 0.88rem;
  background: #fff;
  color: var(--color-text);
  outline: none;
  transition: border-color 0.15s;
}
.offline-bl-search:focus { border-color: var(--color-primary); }
.offline-bl-aviso {
  margin-top: 8px;
  padding: 6px 10px;
  background: #fff8e6;
  border: 1px solid #ffe0a0;
  border-radius: 6px;
  font-size: 0.78rem;
  color: #8a6d3b;
  display: flex;
  align-items: center;
  gap: 6px;
}
.offline-bl-aviso .bi { font-size: 0.9rem; }

/* Lista de filas */
.offline-lista {
  background: #fff;
  border: 1px solid #d8e2ec;
  border-top: none;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}
.offline-lista-vacia {
  padding: 40px 16px;
  text-align: center;
  color: var(--color-text-light);
  font-size: 0.9rem;
}
/* Filas no-clicables a nivel de fila: solo botones internos (cobros) son
   interactivos. Zebra striping en lugar de border-bottom (igual que el
   listado online .table-striped). */
.offline-lista-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: default;
}
/* Avatar de fila (artículos). 48px desktop, 40px móvil. Placeholder con
   icono cuando la imagen falla (clase .sin-imagen la añade el onerror). */
.offline-row-imagen {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.offline-row-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.offline-row-imagen.sin-imagen::before {
  content: '\F1C0'; /* bi-box-seam (Bootstrap Icons codepoint) */
  font-family: 'bootstrap-icons';
  font-size: 1.1rem;
  color: #bbb;
}
.offline-lista-row:nth-child(even) { background: #f7f9fc; }
.offline-lista-row.es-encolado { background: #fff7e6; }
.offline-lista-row-left {
  flex: 1 1 60%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.offline-lista-row-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  text-align: right;
}
/* Tamaños copiados de pinta_ventas.php (font-size en em) para que en móvil
   se vea igual de denso que el listado online. */
.offline-row-titulo {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.offline-row-cliente {
  font-size: 0.85em;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.offline-row-estado {
  font-size: 0.8em;
  color: var(--color-text-muted);
}
.offline-row-importe {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-primary);
  line-height: 1.2;
}
.offline-row-fecha {
  font-size: 0.75em;
  color: var(--color-text-muted);
  line-height: 1;
  margin-top: 3px;
}
.offline-row-pdf-disabled {
  margin-top: 4px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--color-text-light);
  opacity: 0.45;
  cursor: not-allowed;
}
/* Móvil: edge-to-edge + tipografía compacta.
   - Wrapper sin padding lateral → la card ocupa 100% del viewport.
   - .offline-bl / .offline-lista pierden border lateral y radius para que
     no se vean "bordes sueltos" al pegarse al borde.
   - Padding interno de la barra y filas reducido (igual que online :8px). */
@media (max-width: 480px) {
  #offlineListaWrapper { padding: 0 0 80px; }
  .offline-bl {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .offline-lista {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .offline-lista-row { padding: 8px 12px; gap: 8px; }
  .offline-row-titulo { font-size: 0.9rem; }
  .offline-row-importe { font-size: 0.9rem; }
  .offline-row-pdf-disabled { width: 24px; height: 24px; margin-top: 2px; font-size: 0.85rem; }
  .offline-row-imagen { width: 40px; height: 40px; border-radius: 5px; }
}
.offline-row-accion { margin-top: 4px; }
.offline-row-btn-pagar {
  border: none;
  background: var(--color-primary);
  color: #fff;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.offline-row-btn-pagar:hover { background: var(--color-primary-dark); }
.offline-row-badge-encolado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fd7e14;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
}
/* ╚═══════════ /OFFLINE ═══════════════════════════════════════════════╝ */

/* =====================================================================
   Gestión de Personal (estado 22)
   ===================================================================== */
/* Card unificada: toolbar arriba + tabla abajo bajo la misma superficie. */
.gp-list-card {
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    margin: 0.5rem 0 1rem;
}
html.dark-mode .gp-list-card,
.dark-mode .gp-list-card {
    background: var(--color-card-bg);
    border-color: var(--color-border);
}
.gp-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; flex-wrap: wrap;
    /* Padding interno (ya no necesita separación arriba/abajo: vive dentro de
       la card unificada y la línea divisoria separa de la tabla). */
    padding: 0.9rem 1.15rem;
    border-bottom: 1px solid var(--color-border, #eef0f3);
    background: var(--color-bg, #fff);
}
html.dark-mode .gp-toolbar,
.dark-mode .gp-toolbar {
    background: transparent;
    border-bottom-color: rgba(255,255,255,0.08);
}
.gp-toolbar-left { display: flex; align-items: center; gap: 0.75rem; }
.gp-toolbar-right { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* Botón "Filtros" del toolbar — pill outline con icono + label + badge contador.
   Mismo lenguaje que .gp-btn-icon pero con padding horizontal para el texto. */
.gp-btn-filtros {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.9rem;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #d6dbe3);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text, #374151);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gp-btn-filtros:hover {
    background: rgba(2,101,189,0.06);
    border-color: var(--color-primary, #0265bd);
    color: var(--color-primary, #0265bd);
}
.gp-btn-filtros i { font-size: 0.95rem; }
.gp-btn-filtros-label { white-space: nowrap; }
.gp-filtros-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--color-primary, #0265bd);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 0.2rem;
}
html.dark-mode .gp-btn-filtros,
.dark-mode .gp-btn-filtros {
    background: var(--color-card-bg);
    border-color: rgba(255,255,255,0.12);
    color: var(--color-text, #e5e7eb);
}
.gp-tabs { display: inline-flex; gap: 0.3rem; }
.gp-tab-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.42rem 0.95rem; border-radius: 10px;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    font-size: 0.82rem; font-weight: 500; color: var(--color-text, #374151);
    cursor: pointer; transition: all 0.15s ease;
}
.gp-tab-btn:hover {
    border-color: var(--color-primary, #0265bd); color: var(--color-primary, #0265bd);
    background: rgba(2,101,189,0.06);
}
.gp-tab-btn.active {
    background: var(--color-primary, #0265bd);
    border-color: var(--color-primary, #0265bd);
    color: #fff;
    box-shadow: 0 1px 3px rgba(2,101,189,0.25);
}
.gp-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; padding: 0 0.35rem; height: 18px; border-radius: 9px;
    background: rgba(0,0,0,0.08); font-size: 0.65rem; font-weight: 700;
}
.gp-tab-btn.active .gp-count { background: rgba(255,255,255,0.25); }

/* Filtro Sociedad + toggle Mostrar inactivos */
.gp-field-label {
    font-size: 0.74rem; font-weight: 600; color: var(--color-text-light, #6b7280);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.gp-select-sociedad {
    padding: 0.42rem 2rem 0.42rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-bg, #fff) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath fill='%236b7280' d='M3.5 6.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E") no-repeat right 0.6rem center;
    appearance: none;
    font-size: 0.85rem; color: var(--color-text, #374151);
    min-width: 220px; cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gp-select-sociedad:focus {
    outline: none; border-color: var(--color-primary, #0265bd);
    box-shadow: 0 0 0 3px rgba(2,101,189,0.12);
}
.gp-switch {
    display: inline-flex; align-items: center; gap: 0.5rem;
    cursor: pointer; user-select: none;
}
.gp-switch input { position: absolute; opacity: 0; pointer-events: none; }
.gp-switch-slider {
    position: relative; width: 36px; height: 20px; flex-shrink: 0;
    background: var(--color-border, #e5e7eb); border-radius: 999px;
    transition: background 0.15s ease;
}
.gp-switch-slider::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; background: #fff; border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: left 0.15s ease;
}
.gp-switch input:checked + .gp-switch-slider { background: var(--color-primary, #0265bd); }
.gp-switch input:checked + .gp-switch-slider::after { left: 18px; }
.gp-switch-text { font-size: 0.82rem; color: var(--color-text, #374151); }

/* ===== Responsive móvil (≤ 768px) ===== */
@media (max-width: 768px) {
    /* Toolbar: todo en columna y a ancho completo, sin cortes a la derecha */
    .gp-toolbar { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .gp-toolbar-left,
    .gp-toolbar-right { flex-direction: column; align-items: stretch; gap: 0.55rem; width: 100%; }
    .gp-field-label { padding-left: 0.1rem; }
    .gp-select-sociedad { width: 100%; min-width: 0; }
    .gp-search { width: 100%; min-width: 0; }
    .gp-btn-primary { width: 100%; justify-content: center; }
    .gp-switch { padding: 0.25rem 0; align-self: flex-start; }

    /* Tabla: dejamos visibles solo Personal + NIF + Acciones.
       El resto se ve al editar; el estado lo movemos a un dot sobre el avatar. */
    .gp-table thead th:nth-child(3),  /* Email   */
    .gp-table thead th:nth-child(4),  /* Móvil   */
    .gp-table thead th:nth-child(5),  /* Centro  */
    .gp-table thead th:nth-child(6),  /* Estado  */
    .gp-table tbody td:nth-child(3),
    .gp-table tbody td:nth-child(4),
    .gp-table tbody td:nth-child(5),
    .gp-table tbody td:nth-child(6) { display: none; }
    .gp-table thead th { font-size: 0.65rem; padding: 0.55rem 0.7rem; }
    .gp-table tbody td  { padding: 0.7rem 0.7rem; font-size: 0.85rem; }

    /* Estado como dot en el avatar (inactivo = rojo, activo = verde) */
    .gp-cell-personal { gap: 0.6rem; }
    .gp-avatar { position: relative; width: 34px; height: 34px; font-size: 0.85rem; }
    .gp-row .gp-avatar::after {
        content: '';
        position: absolute;
        bottom: -1px; right: -1px;
        width: 11px; height: 11px;
        border-radius: 50%;
        background: #22c55e;        /* activo */
        border: 2px solid var(--color-bg, #fff);
    }
    .gp-row[data-activo="0"] .gp-avatar::after { background: #dc2626; }

    /* Acciones más compactas */
    .gp-action { width: 30px; height: 30px; margin-left: 0.2rem; }
}
.gp-search {
    padding: 0.45rem 0.85rem; border-radius: 10px;
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-bg, #fff); color: var(--color-text, #374151);
    font-size: 0.85rem; min-width: 260px; transition: border-color 0.15s ease;
}
.gp-search:focus { outline: none; border-color: var(--color-primary, #0265bd); box-shadow: 0 0 0 3px rgba(2,101,189,0.12); }
.gp-btn-primary {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.45rem 1rem; border-radius: 10px;
    background: var(--color-primary, #0265bd); border: 1px solid var(--color-primary, #0265bd);
    color: #fff; font-weight: 600; font-size: 0.85rem; cursor: pointer;
    transition: background 0.15s ease;
}
.gp-btn-primary:hover { background: var(--color-primary-dark, #014a8a); border-color: var(--color-primary-dark, #014a8a); }
.gp-btn-secondary {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.45rem 1rem; border-radius: 10px;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    color: var(--color-text, #374151); font-weight: 600; font-size: 0.85rem; cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.gp-btn-secondary:hover { background: var(--color-bg-muted, #f8f9fa); border-color: var(--color-text-light, #6b7280); }
.gp-btn-icon {
    width: 36px; height: 36px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    color: var(--color-text-light, #6b7280);
    cursor: pointer; transition: all 0.15s ease;
}
.gp-btn-icon:hover {
    background: var(--color-bg-muted, #f8f9fa);
    border-color: var(--color-text-light, #6b7280);
    color: var(--color-text, #374151);
}

/* ===== Kebab "Catálogos" + menú desplegable ===== */
.gp-kebab-wrap { position: relative; display: inline-block; }
/* position: fixed para escapar del overflow:hidden de .gp-list-card. Las
   coordenadas (top/left) las pone gpKebabToggle() en JS usando
   getBoundingClientRect() del botón. */
.gp-kebab-menu {
    position: fixed; z-index: 1080;
    min-width: 200px; padding: 0.4rem 0;
    background: var(--color-popover-bg, var(--color-bg, #fff));
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    animation: gpKebabFade 0.12s ease;
}
.gp-kebab-menu[hidden] { display: none; }
.gp-kebab-header {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
    color: var(--color-text-light, #6b7280); text-transform: uppercase;
    padding: 0.3rem 0.85rem 0.4rem;
}
.gp-kebab-item {
    display: flex; align-items: center; gap: 0.6rem;
    width: 100%; padding: 0.55rem 0.85rem;
    background: transparent; border: none; cursor: pointer;
    font-size: 0.88rem; color: var(--color-text, #374151);
    text-align: left;
}
.gp-kebab-item i { font-size: 1rem; color: var(--color-primary, #0265bd); width: 1.25rem; text-align: center; }
.gp-kebab-item:hover { background: var(--color-bg-muted, rgba(2,101,189,0.06)); }
.gp-kebab-item-disabled { opacity: 0.5; cursor: not-allowed; }
.gp-kebab-item-disabled:hover { background: transparent; }
@keyframes gpKebabFade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== Modal centrado del catálogo (cargos) ===== */
.gp-cat-backdrop {
    position: fixed; inset: 0; z-index: 1090;
    background: rgba(0,0,0,0.45); opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
}
.gp-cat-backdrop.show { opacity: 1; pointer-events: auto; }
.gp-cat {
    position: fixed; z-index: 1095;
    top: 50%; left: 50%; transform: translate(-50%, -45%);
    width: min(720px, 92vw); max-height: 88vh;
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    display: flex; flex-direction: column;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease, transform 0.22s ease;
}
.gp-cat.show {
    opacity: 1; pointer-events: auto;
    transform: translate(-50%, -50%);
}
.gp-cat-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.gp-cat-header h5 {
    margin: 0; font-size: 1rem; font-weight: 600;
    display: flex; align-items: center; gap: 0.5rem;
    color: var(--color-text, #1f2937);
}
.gp-cat-header h5 i { color: var(--color-primary, #0265bd); }
.gp-cat-close {
    background: transparent; border: none; cursor: pointer;
    width: 32px; height: 32px; border-radius: 8px;
    color: var(--color-text-light, #6b7280);
    display: inline-flex; align-items: center; justify-content: center;
}
.gp-cat-close:hover { background: var(--color-bg-muted, #f3f4f6); color: var(--color-text, #1f2937); }
.gp-cat-body {
    padding: 1rem 1.2rem;
    overflow-y: auto;
    flex: 1;
}
.gp-cat-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.6rem; margin-bottom: 0.75rem;
}
.gp-cat-info { font-size: 0.82rem; color: var(--color-text-light, #6b7280); }
.gp-cat-list-wrap {
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
}
.gp-cat-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.88rem; }
.gp-cat-table thead th {
    padding: 0.55rem 0.85rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--color-text-light, #6b7280);
    background: var(--color-bg-muted, #f9fafb);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    text-align: left;
}
.gp-cat-table tbody td {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--color-border, #f3f4f6);
    vertical-align: middle;
    color: var(--color-text, #1f2937);
}
.gp-cat-table tbody tr:last-child td { border-bottom: none; }
.gp-cat-table tbody tr:hover { background: var(--color-bg-muted, rgba(0,0,0,0.02)); }
.gp-cat-empty {
    text-align: center; padding: 1.5rem 0.5rem !important;
    color: var(--color-text-light, #6b7280); font-style: italic;
}
.gp-cat-form {
    margin-top: 1rem; padding: 1rem;
    background: var(--color-bg-muted, #f9fafb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
}
.gp-cat-form h6 {
    margin: 0 0 0.75rem; font-size: 0.9rem; font-weight: 600;
    color: var(--color-text, #1f2937);
}
.gp-cat-form-actions {
    margin-top: 1rem;
    display: flex; justify-content: flex-end; gap: 0.5rem;
}

/* Dark mode overrides puntuales para el modal del catálogo */
html.dark-mode .gp-cat,
.dark-mode .gp-cat { background: var(--color-bg-surface, #18204F); }
html.dark-mode .gp-cat-form,
.dark-mode .gp-cat-form {
    background: var(--color-card-bg);
    border-color: var(--color-border);
}

/* ===== Editor de turnos: tramos con chips de días + horas ===== */
.gp-turno-dias-label {
    display: block;
    margin-top: 1rem; margin-bottom: 0.55rem;
    font-size: 0.78rem; font-weight: 600;
    color: var(--color-text-light, #6b7280);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.gp-turno-dias {
    display: flex; flex-direction: column; gap: 0.55rem;
}
.gp-turno-tramo-row {
    display: grid;
    /* 4 columnas: chips días | horas | Margen+Duración apilados | papelera.
       Apilamos Margen y Duración en la misma columna para dejar más ancho a
       los chips de días (evita que se apilen en vertical). */
    grid-template-columns: 1fr auto auto 36px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
}
/* Stack vertical de Margen sobre Duración. Alineados a la derecha para que
   los inputs (mismo ancho) queden en columna. */
.gp-turno-tramo-mg-dur-stack {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: flex-end;
}
/* Etiquetas ancho fijo → los inputs de Margen y Duración quedan alineados.
   El ancho da para "MARGEN DE REDONDEO" en dos líneas sin descolocar el
   input, que sigue centrado contra la etiqueta. */
.gp-turno-tramo-mg-dur-stack .gp-turno-tramo-margen-label {
    display: inline-block;
    width: 6.2rem;
    text-align: right;
    line-height: 1.15;
}
.gp-turno-tramo-margen {
    display: flex; align-items: center; gap: 0.35rem;
}
.gp-turno-tramo-margen-label {
    font-size: 0.74rem; font-weight: 600;
    color: var(--color-text-light, #6b7280);
    text-transform: uppercase; letter-spacing: 0.04em;
    cursor: help;
    margin: 0;
}
.gp-turno-tramo-mg {
    width: 60px;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    text-align: right;
}
.gp-turno-tramo-margen-suf {
    font-size: 0.78rem;
    color: var(--color-text-light, #6b7280);
}
/* Duración jornada flexible — mismo layout que Margen. */
.gp-turno-tramo-dur-wrap {
    display: flex; align-items: center; gap: 0.35rem;
}
.gp-turno-tramo-dur {
    width: 66px;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    text-align: right;
}
.gp-turno-tramo-dias {
    display: flex; flex-wrap: wrap; gap: 0.25rem;
}
.gp-turno-chip-dia {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    font-size: 0.78rem; font-weight: 600;
    color: var(--color-text-light, #6b7280);
    cursor: pointer; user-select: none;
    transition: all 0.12s ease;
    padding: 0;
}
.gp-turno-chip-dia:hover {
    border-color: var(--color-primary, #0265bd);
    color: var(--color-primary, #0265bd);
}
.gp-turno-chip-dia.is-active {
    background: var(--color-primary, #0265bd);
    border-color: var(--color-primary, #0265bd);
    color: #fff;
}
.gp-turno-tramo-horas {
    display: flex; align-items: center; gap: 0.4rem;
}
.gp-turno-tramo-hi,
.gp-turno-tramo-hf {
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    width: 110px;
}
.gp-turno-dia-sep {
    color: var(--color-text-light, #9ca3af);
    font-weight: 600;
}
.gp-turno-tramo-del {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    color: #dc3545;
    cursor: pointer;
    transition: all 0.12s ease;
}
.gp-turno-tramo-del:hover {
    background: rgba(220,53,69,0.08);
    border-color: #dc3545;
}
.gp-turno-add-tramo {
    margin-top: 0.6rem;
}

@media (max-width: 576px) {
    .gp-cat { width: 96vw; max-height: 90vh; }
    .gp-cat-header, .gp-cat-body { padding: 0.85rem 0.95rem; }
    .gp-kebab-menu { right: auto; left: 0; }
    .gp-turno-tramo-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .gp-turno-tramo-horas { justify-content: space-between; }
    .gp-turno-tramo-hi, .gp-turno-tramo-hf { flex: 1; width: auto; }
    .gp-turno-tramo-margen { justify-self: start; }
    .gp-turno-tramo-dur-wrap { justify-self: start; }
    .gp-turno-tramo-mg-dur-stack {
        justify-self: start;
        align-items: flex-start;
        flex-direction: row;
        gap: 0.75rem;
    }
    .gp-turno-tramo-del { justify-self: end; }
}

/* Vive dentro de .gp-list-card → sin border/shadow propios para evitar el
   doble marco. El radius lo hereda del wrapper (overflow: hidden). */
.gp-list-card .gp-table-wrap {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow-x: auto;
}
.gp-table-wrap {
    background: var(--color-bg, #fff);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.05);
    overflow: hidden;
}
.gp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.88rem; }
.gp-table thead th {
    padding: 0.7rem 1rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--color-text-light, #6b7280);
    background: var(--color-bg-muted, #f9fafb);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    text-align: left;
}
.gp-table tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--color-border, #f3f4f6);
    vertical-align: middle;
}
.gp-table tbody tr:last-child td { border-bottom: none; }
.gp-table tbody tr.gp-row { cursor: pointer; }
.gp-table tbody tr:hover { background: var(--color-bg-muted, #f9fafb); }
.gp-empty { padding: 2.5rem 1rem !important; text-align: center; color: var(--color-text-light, #6b7280); }
.gp-cell-personal { display: flex; align-items: center; gap: 0.75rem; }
.gp-avatar {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--color-primary, #0265bd), var(--color-primary-dark, #014a8a));
    color: #fff; font-weight: 700; font-size: 0.9rem;
}
.gp-nombre { font-weight: 600; color: var(--color-text, #1f2937); line-height: 1.3; }
.gp-sub { font-size: 0.72rem; color: var(--color-text-light, #6b7280); line-height: 1.3; }
.gp-badge {
    display: inline-block; padding: 0.25rem 0.65rem; border-radius: 14px;
    font-size: 0.7rem; font-weight: 600;
}
.gp-badge-on { background: rgba(22,163,74,0.12); color: #15803d; }
.gp-badge-off { background: rgba(220,38,38,0.10); color: #b91c1c; }
.gp-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px; padding: 0;
    margin-left: 0.25rem; border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-bg, #fff); color: var(--color-text-light, #6b7280);
    cursor: pointer; transition: all 0.12s ease;
}
.gp-action:hover { border-color: var(--color-primary, #0265bd); color: var(--color-primary, #0265bd); background: rgba(2,101,189,0.05); }
.gp-action-danger:hover { border-color: #dc2626; color: #dc2626; background: rgba(220,38,38,0.06); }
.gp-action-ok:hover { border-color: #16a34a; color: #16a34a; background: rgba(22,163,74,0.06); }

/* ===== Panel lateral deslizante (sin dependencia de Bootstrap Offcanvas) ===== */
.gp-panel-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1054;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.gp-panel-backdrop.show { opacity: 1; pointer-events: auto; }
.gp-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 460px; max-width: 100%;
    background: var(--color-bg, #fff);
    box-shadow: -4px 0 20px rgba(0,0,0,0.12);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 1055;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.gp-panel.show { transform: translateX(0); }
@media (max-width: 575px) { .gp-panel { width: 100%; } }

.gp-panel-header {
    position: relative;
    padding: 1rem 1.25rem 0.85rem;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.gp-panel-close {
    position: absolute; top: 0.7rem; right: 0.9rem;
    width: 32px; height: 32px; border-radius: 50%;
    border: none; background: transparent;
    color: var(--color-text-light, #6b7280); font-size: 1.05rem;
    cursor: pointer; transition: background 0.12s ease, color 0.12s ease;
    display: inline-flex; align-items: center; justify-content: center;
}
.gp-panel-close:hover { background: var(--color-bg-muted, #f3f4f6); color: var(--color-text, #1f2937); }

.gp-panel-identity {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 0.35rem; padding-right: 2rem; margin-top: 0.25rem;
}
.gp-panel-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--color-primary, #0265bd), var(--color-primary-dark, #014a8a));
    color: #fff; font-weight: 700; font-size: 1.25rem;
    margin-bottom: 0.15rem;
}
.gp-panel-name {
    font-size: 1.05rem; font-weight: 700; color: var(--color-text, #1f2937);
    line-height: 1.25; word-break: break-word;
}
.gp-panel-sub { font-size: 0.78rem; color: var(--color-text-light, #6b7280); }

.gp-panel-quick {
    display: flex; gap: 0.5rem; flex-wrap: wrap;
    margin-top: 0.85rem;
}
.gp-panel-quick button {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.2rem;
    min-width: 64px; padding: 0.45rem 0.5rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    background: var(--color-bg, #fff);
    color: var(--color-text-light, #6b7280);
    font-size: 0.7rem; font-weight: 500;
    cursor: pointer;
    transition: all 0.12s ease;
}
.gp-panel-quick button:hover:not([disabled]) {
    color: var(--color-primary, #0265bd);
    border-color: var(--color-primary, #0265bd);
    background: rgba(2,101,189,0.05);
}
.gp-panel-quick button i { font-size: 1.05rem; }
.gp-panel-quick button[disabled] { opacity: 0.4; cursor: not-allowed; }

.gp-panel-body {
    padding: 1rem 1.25rem;
    overflow-y: auto; flex: 1 1 auto;
}

/* Modo lectura */
.gp-info-block {
    background: var(--color-bg-muted, #f9fafb);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}
.gp-info-block-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.7rem;
}
.gp-info-block-header h6 {
    margin: 0; font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-text, #374151);
}
.gp-info-edit-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    border: none; background: transparent;
    color: var(--color-primary, #0265bd); font-weight: 600; font-size: 0.78rem;
    cursor: pointer; padding: 0.2rem 0.45rem; border-radius: 6px;
    transition: background 0.12s ease;
}
.gp-info-edit-btn:hover { background: rgba(2,101,189,0.08); }
.gp-info-list { margin: 0; }
.gp-info-list div.gp-info-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; padding: 0.45rem 0;
    border-bottom: 1px solid var(--color-border, #eef0f3);
    font-size: 0.85rem;
}
.gp-info-list div.gp-info-row:last-child { border-bottom: none; }
.gp-info-list .gp-info-label { color: var(--color-text-light, #6b7280); font-size: 0.76rem; flex-shrink: 0; }
.gp-info-list .gp-info-value { color: var(--color-text, #1f2937); font-weight: 500; text-align: right; word-break: break-word; }
.gp-info-list .gp-info-value.empty { color: var(--color-text-light, #9ca3af); font-style: italic; font-weight: 400; }

/* Modo edición */
.gp-panel .gp-section-title,
.gp-cat .gp-section-title {
    margin-top: 1.1rem; margin-bottom: 0.6rem;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    color: var(--color-text-light, #6b7280); letter-spacing: 0.06em;
    border-bottom: 1px solid var(--color-border, #f3f4f6); padding-bottom: 0.35rem;
}
/* Lista de permisos (pantallas + configuraciones) en el editor de identidad. */
.gp-perm-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.4rem 1rem;
    max-height: 240px;
    overflow-y: auto;
    padding: 0.4rem 0.2rem;
}
.gp-perm-list .gp-perm-empty {
    grid-column: 1 / -1;
    color: var(--color-text-light, #9ca3af);
    font-style: italic;
    font-size: 0.85rem;
    text-align: center;
    padding: 0.6rem 0;
}
/* Cabecera de grupo dentro del listado de permisos: ocupa toda la fila del grid
   para separar las pantallas por categoría (RRHH, Organización, Portal…). */
.gp-perm-list .gp-perm-group-title {
    grid-column: 1 / -1;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-light, #6b7280);
    margin-top: 0.55rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
}
.gp-perm-list .gp-perm-group-title:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* ===== Vista Calendario de Vacaciones (estado 34) ===== */
.vac-vista-toggle { display: inline-flex; border: 1px solid var(--color-border, #dee2e6); border-radius: 8px; overflow: hidden; margin-right: 0.5rem; }
.vac-vista-btn { background: var(--color-bg, #fff); border: none; padding: 0.42rem 0.7rem; font-size: 0.82rem; color: var(--color-text-light, #6c757d); cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; }
.vac-vista-btn + .vac-vista-btn { border-left: 1px solid var(--color-border, #dee2e6); }
.vac-vista-btn.vac-vista-activa { background: #3b82f6; color: #fff; }
.vac-cal-toolbar { display: flex; align-items: center; gap: 0.6rem; margin: 0.3rem 0 0.8rem; flex-wrap: wrap; }
.vac-cal-nav { background: var(--color-bg, #fff); border: 1px solid var(--color-border, #dee2e6); border-radius: 6px; padding: 0.3rem 0.55rem; cursor: pointer; color: var(--color-text-light, #6c757d); }
.vac-cal-nav:hover { color: #3b82f6; border-color: #3b82f6; }
.vac-cal-mes { font-weight: 700; font-size: 0.95rem; min-width: 150px; text-align: center; text-transform: capitalize; color: var(--color-text, #212529); }
.vac-cal-leyenda { display: flex; gap: 0.9rem; margin-left: auto; font-size: 0.74rem; color: var(--color-text-light, #6c757d); flex-wrap: wrap; }
.vac-cal-leyenda span { display: inline-flex; align-items: center; gap: 0.3rem; }
.vac-cal-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
/* La vista calendario es un panel que continúa sin costura el toolbar (que tiene
   las esquinas inferiores abiertas), igual que la tabla en la vista lista. */
#vacVistaCalendario {
    max-width: 100%;
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-top: none;
    border-radius: 0 0 14px 14px;
    padding: 0.55rem 1rem 1rem;
}
.vac-cal, .vac-cal * { box-sizing: border-box; }
.vac-cal { border: 1px solid var(--color-border, #e9ecef); border-radius: 10px; overflow: hidden; width: 100%; max-width: 100%; }
.vac-cal-toolbar { margin: 0.1rem 0 0.7rem; }
.vac-cal-header { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--color-bg-soft, #f8f9fa); border-bottom: 1px solid var(--color-border, #e9ecef); }
.vac-cal-header-cell { padding: 0.4rem; text-align: center; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; color: var(--color-text-light, #6c757d); }
.vac-cal-row { position: relative; border-bottom: 1px solid var(--color-border, #e9ecef); }
.vac-cal-row:last-child { border-bottom: none; }
.vac-cal-cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.vac-cal-cell { border-right: 1px solid var(--color-border, #eef0f2); }
.vac-cal-cell:last-child { border-right: none; }
.vac-cal-cell.vac-cal-we { background: rgba(0,0,0,0.02); }
.vac-cal-cell.vac-cal-today { background: rgba(59,130,246,0.08); }
.vac-cal-daynum { font-size: 0.75rem; color: var(--color-text, #374151); padding: 0.2rem 0.35rem; }
.vac-cal-cell.vac-cal-other .vac-cal-daynum { color: var(--color-text-light, #c0c4c9); }
.vac-cal-evlayer { position: absolute; inset: 0; }
.vac-cal-ev { position: absolute; height: 18px; line-height: 18px; font-size: 0.7rem; font-weight: 600; padding: 0 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-radius: 4px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.vac-cal-mas { position: absolute; font-size: 0.68rem; color: var(--color-text-light, #6c757d); padding-left: 4px; }
@media (prefers-color-scheme: dark) {
    body:not(.light-mode) .vac-cal-cell.vac-cal-we { background: rgba(255,255,255,0.025); }
    body:not(.light-mode) .vac-cal-cell.vac-cal-today { background: rgba(59,130,246,0.15); }
}
.gp-perm-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text, #1f2937);
    cursor: pointer;
}
.gp-perm-item input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}
.gp-panel .gp-section-title:first-child { margin-top: 0; }
.gp-panel .form-label { font-size: 0.78rem; font-weight: 500; color: var(--color-text, #374151); margin-bottom: 0.3rem; }

/* Pie con botones */
.gp-panel-footer {
    display: flex; justify-content: flex-end; gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-bg, #fff);
}

/* Dark mode */
html.dark-mode .gp-panel,
.dark-mode .gp-panel { background: var(--color-card-bg, #1f2937); }
html.dark-mode .gp-panel-name,
.dark-mode .gp-panel-name { color: #f3f4f6; }
html.dark-mode .gp-info-block,
.dark-mode .gp-info-block { background: rgba(255,255,255,0.04); }

/* ===== Modal de Observaciones ===== */
.obs-lista { max-height: 360px; overflow-y: auto; padding-right: 0.25rem; }
.obs-cargando, .obs-vacio { font-size: 0.88rem; }
.obs-item {
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    background: var(--color-card-bg, #fff);
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.obs-item:last-child { margin-bottom: 0; }
.obs-item-fecha {
    font-size: 0.74rem;
    color: var(--color-text-light, #6b7280);
    margin-bottom: 0.25rem;
}
.obs-item-texto {
    font-size: 0.9rem;
    color: var(--color-text, #1f2937);
    white-space: pre-wrap;
    word-break: break-word;
}
.obs-form { border-top: 1px solid var(--color-border, #f3f4f6); padding-top: 0.75rem; }
html.dark-mode .obs-item,
.dark-mode .obs-item {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

/* ===== Modal de Exportación (Gestión de Personal) ===== */
.gp-export-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1054;
    opacity: 0; pointer-events: none;
    transition: opacity 0.22s ease;
}
.gp-export-backdrop.show { opacity: 1; pointer-events: auto; }
.gp-export-modal {
    position: fixed; top: 50%; left: 50%;
    width: 580px; max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    background: var(--color-bg, #fff);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.22);
    z-index: 1055;
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0; pointer-events: none;
    transition: transform 0.22s cubic-bezier(0.4,0,0.2,1), opacity 0.18s ease;
    display: flex; flex-direction: column; overflow: hidden;
}
.gp-export-modal.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.gp-export-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.gp-export-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--color-text, #1f2937); display: inline-flex; align-items: center; gap: 0.5rem; }
.gp-export-close {
    width: 30px; height: 30px; border: none; background: transparent;
    border-radius: 50%; color: var(--color-text-light, #6b7280);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.gp-export-close:hover { background: var(--color-bg-muted, #f3f4f6); color: var(--color-text, #1f2937); }
.gp-export-body { padding: 1rem 1.1rem; overflow-y: auto; flex: 1 1 auto; }
.gp-export-section { margin-bottom: 0.95rem; }
.gp-export-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.35rem; }
.gp-export-label {
    display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    color: var(--color-text-light, #6b7280); letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}
.gp-export-select {
    width: 100%; padding: 0.5rem 0.7rem; border-radius: 8px;
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-bg, #fff); color: var(--color-text, #1f2937);
    font-size: 0.88rem;
}
.gp-export-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.gp-export-chips span {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.25rem 0.6rem; border-radius: 12px;
    background: rgba(2,101,189,0.08); color: var(--color-primary, #0265bd);
    font-size: 0.75rem; font-weight: 600;
}
.gp-export-quick { display: inline-flex; gap: 0.3rem; }
.gp-export-quick button {
    display: inline-flex; align-items: center; gap: 0.3rem;
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-bg, #fff); color: var(--color-text-light, #6b7280);
    padding: 0.2rem 0.55rem; border-radius: 6px; font-size: 0.72rem; cursor: pointer;
}
.gp-export-quick button:hover { color: var(--color-primary, #0265bd); border-color: var(--color-primary, #0265bd); }
.gp-export-cols {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1rem;
    max-height: 220px; overflow-y: auto;
    padding: 0.55rem; border: 1px solid var(--color-border, #e5e7eb); border-radius: 8px;
    background: var(--color-bg-muted, #f9fafb);
}
.gp-export-cols label {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.83rem; color: var(--color-text, #1f2937); cursor: pointer;
    padding: 0.15rem 0.25rem; border-radius: 4px;
}
.gp-export-cols label:hover { background: rgba(2,101,189,0.06); }
.gp-export-cols input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--color-primary, #0265bd); }
.gp-export-fechas {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
}
.gp-export-orden {
    display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: stretch;
}
.gp-export-orden-dir {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.5rem 0.85rem; border-radius: 8px;
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-bg, #fff); color: var(--color-text, #1f2937);
    font-size: 0.78rem; font-weight: 600; cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.gp-export-orden-dir:hover { border-color: var(--color-primary, #0265bd); color: var(--color-primary, #0265bd); }
.gp-export-orden-dir[data-dir="DESC"] i { transform: rotate(180deg); }
.gp-export-fechas small {
    display: block; font-size: 0.7rem; color: var(--color-text-light, #6b7280);
    margin-bottom: 0.2rem;
}
.gp-export-formato { display: inline-flex; gap: 0.5rem; }
.gp-export-fmt { cursor: pointer; }
.gp-export-fmt input { position: absolute; opacity: 0; pointer-events: none; }
.gp-export-fmt span {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.95rem; border-radius: 10px;
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-bg, #fff); color: var(--color-text, #374151);
    font-weight: 500; font-size: 0.85rem; transition: all 0.15s ease;
}
.gp-export-fmt span i { font-size: 1.05rem; }
.gp-export-fmt:hover span { border-color: var(--color-primary, #0265bd); color: var(--color-primary, #0265bd); }
.gp-export-fmt input:checked + span {
    background: var(--color-primary, #0265bd);
    border-color: var(--color-primary, #0265bd);
    color: #fff;
    box-shadow: 0 1px 3px rgba(2,101,189,0.25);
}
.gp-export-footer {
    display: flex; justify-content: flex-end; gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-bg-muted, #f9fafb);
}
html.dark-mode .gp-export-modal,
.dark-mode .gp-export-modal { background: var(--color-card-bg, #1f2937); }
html.dark-mode .gp-export-cols,
.dark-mode .gp-export-cols { background: rgba(255,255,255,0.04); }

/* =====================================================================
   Festividades (estado 23)
   Layout de 2 paneles: centros (izq) + festivos (der).
   ===================================================================== */
.fest-page {
    padding: 0.75rem 1rem 2rem;
}
.fest-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.fest-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    margin: 0 0 0.2rem;
}
.fest-subtitle {
    font-size: 0.83rem;
    color: var(--color-text-light, #6b7280);
}
.fest-ano-select {
    display: inline-block;
    border: 1px solid var(--color-border, #d6dbe3);
    border-radius: 8px;
    padding: 0.15rem 0.55rem;
    font-size: 0.85rem;
    background: var(--color-bg, #fff);
    color: var(--color-text, #1f2937);
    margin: 0 0.2rem;
    cursor: pointer;
}
.fest-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    background: linear-gradient(135deg, var(--color-primary, #0265bd), var(--color-primary-dark, #0c1749));
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(2, 101, 189, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fest-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(2, 101, 189, 0.36); }

.fest-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 1rem;
}
@media (max-width: 991px) {
    .fest-grid { grid-template-columns: 1fr; }
}

.fest-card {
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.fest-card-header {
    padding: 0.85rem 1.15rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text, #1f2937);
    border-bottom: 1px solid var(--color-border, #eef0f3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.fest-card-header i { color: var(--color-primary, #0265bd); margin-right: 0.4rem; }
.fest-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--color-text-light, #9ca3af);
    font-style: italic;
    font-size: 0.88rem;
}

/* === Panel de centros === */
.fest-centros-list {
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 480px;
    overflow-y: auto;
}
.fest-centro-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease;
    width: 100%;
}
.fest-centro-item:hover { background: rgba(2, 101, 189, 0.05); }
.fest-centro-item.fest-centro-active {
    background: rgba(2, 101, 189, 0.09);
    border-color: rgba(2, 101, 189, 0.4);
}
.fest-centro-avatar {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--color-bg-muted, #f3f4f6);
    color: var(--color-text-light, #6b7280);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fest-centro-active .fest-centro-avatar {
    background: var(--color-primary, #0265bd);
    color: #fff;
}
.fest-centro-info { flex: 1; min-width: 0; }
.fest-centro-nombre {
    font-weight: 600;
    color: var(--color-text, #1f2937);
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fest-centro-active .fest-centro-nombre { color: var(--color-primary, #0265bd); }
.fest-centro-sub {
    font-size: 0.78rem;
    color: var(--color-text-light, #6b7280);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fest-centro-count {
    background: var(--color-bg-muted, #f3f4f6);
    color: var(--color-text-light, #6b7280);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.fest-centro-active .fest-centro-count {
    background: var(--color-primary, #0265bd);
    color: #fff;
}

/* Resumen del centro */
.fest-resumen {
    border-top: 1px solid var(--color-border, #eef0f3);
    padding: 0.85rem 1.15rem;
    background: var(--color-bg-muted, #f9fafb);
}
.fest-resumen-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light, #9ca3af);
    margin-bottom: 0.5rem;
}
.fest-resumen-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.87rem;
    color: var(--color-text, #1f2937);
}
.fest-resumen-val {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.fest-resumen-total {
    border-top: 1px solid var(--color-border, #eef0f3);
    margin-top: 0.35rem;
    padding-top: 0.55rem;
    font-weight: 700;
    color: var(--color-primary, #0265bd);
}
.fest-resumen-total .fest-resumen-val { color: var(--color-primary, #0265bd); }

/* Dots para el resumen */
.fest-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.fest-dot-nacional   { background: #6b7280; }
.fest-dot-autonomico { background: #93c5fd; }
.fest-dot-local      { background: #3b82f6; }

/* === Filtros (badges) === */
.fest-filtros {
    display: inline-flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.fest-badge {
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.fest-filtro-btn.fest-filtro-off { opacity: 0.35; }
.fest-badge-nacional   { background: #e5e7eb; color: #374151; }
.fest-badge-autonomico { background: #dbeafe; color: #1e40af; }
.fest-badge-local      { background: #3b82f6; color: #fff; }

/* === Lista de festivos === */
.fest-list {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 640px;
    overflow-y: auto;
}
.fest-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    transition: background 0.15s ease;
}
.fest-item:hover { background: var(--color-bg-muted, #f9fafb); }
.fest-item-fecha {
    text-align: center;
    line-height: 1;
    min-width: 44px;
    flex-shrink: 0;
}
.fest-item-dia {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    font-variant-numeric: tabular-nums;
}
.fest-item-mes {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-light, #6b7280);
    letter-spacing: 0.08em;
    margin-top: 0.15rem;
}
.fest-item-info { flex: 1; min-width: 0; }
.fest-item-titulo {
    font-weight: 700;
    color: var(--color-text, #1f2937);
    font-size: 0.92rem;
    line-height: 1.25;
}
.fest-item-sub {
    font-size: 0.78rem;
    color: var(--color-text-light, #6b7280);
    margin-top: 0.15rem;
}
.fest-item-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.fest-item-badge { flex-shrink: 0; }
.fest-item-delete {
    background: transparent;
    border: none;
    color: var(--color-danger, #ef4444);
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: background 0.15s ease;
}
.fest-item-delete:hover { background: rgba(239, 68, 68, 0.1); }

/* === Modal: radios de tipo === */
.fest-tipo-radios {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.fest-tipo-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--color-border, #d6dbe3);
    border-radius: 999px;
    background: var(--color-bg, #fff);
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--color-text, #1f2937);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.fest-tipo-radio:has(input:checked) {
    border-color: var(--color-primary, #0265bd);
    background: rgba(2, 101, 189, 0.06);
    color: var(--color-primary, #0265bd);
    font-weight: 600;
}
.fest-tipo-radio input { margin: 0; }

/* Buscador de localidad (autocompletado) */
.fest-loc-resultados {
    border: 1px solid var(--color-border, #d6dbe3);
    border-radius: 8px;
    margin-top: 0.35rem;
    max-height: 200px;
    overflow-y: auto;
    background: var(--color-bg, #fff);
}
.fest-loc-item {
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border, #f3f4f6);
    font-size: 0.85rem;
}
.fest-loc-item:hover { background: var(--color-bg-muted, #f3f4f6); }
.fest-loc-item:last-child { border-bottom: none; }
.fest-loc-item-provincia { color: var(--color-text-light, #9ca3af); font-size: 0.75rem; margin-left: 0.4rem; }
.fest-loc-chip {
    margin-top: 0.35rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    background: rgba(2, 101, 189, 0.09);
    border-radius: 999px;
    color: var(--color-primary, #0265bd);
    font-weight: 600;
    font-size: 0.85rem;
}
.fest-loc-chip-x {
    background: transparent;
    border: none;
    color: var(--color-primary, #0265bd);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.15rem;
}

/* Dark mode */
html.dark-mode .fest-card,
.dark-mode .fest-card {
    background: var(--color-card-bg);
    border-color: rgba(255, 255, 255, 0.08);
}
html.dark-mode .fest-title,
.dark-mode .fest-title { color: var(--color-text, #f3f4f6); }
html.dark-mode .fest-centro-item:hover,
.dark-mode .fest-centro-item:hover { background: rgba(255, 255, 255, 0.04); }
html.dark-mode .fest-item:hover,
.dark-mode .fest-item:hover { background: rgba(255, 255, 255, 0.03); }
html.dark-mode .fest-resumen,
.dark-mode .fest-resumen { background: rgba(255, 255, 255, 0.03); }

/* =====================================================================
   Departamentos (estado 24) — pestaña dedicada con grid de cards
   ===================================================================== */
.dep-page { padding: 0.75rem 1rem 2.5rem; }
.dep-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.dep-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    margin: 0 0 0.2rem;
}
.dep-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-light, #6b7280);
}
.dep-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.dep-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.05rem;
    background: linear-gradient(135deg, var(--color-primary, #0265bd), var(--color-primary-dark, #0c1749));
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(2, 101, 189, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dep-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(2, 101, 189, 0.36); }
.dep-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    background: transparent;
    color: var(--color-text-light, #6b7280);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}
.dep-btn-secondary:hover { background: var(--color-bg-muted, #f9fafb); color: var(--color-text, #1f2937); }

/* Toolbar: filtro sociedad */
.dep-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    margin-bottom: 1rem;
}
.dep-field-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-light, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.dep-select-sociedad {
    background: transparent;
    border: 1px solid var(--color-border, #d6dbe3);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
    color: var(--color-text, #1f2937);
    cursor: pointer;
    min-width: 220px;
}

/* Grid */
.dep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.dep-empty {
    grid-column: 1 / -1;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-text-light, #9ca3af);
    font-style: italic;
    background: var(--color-card-bg, #fff);
    border: 1px dashed var(--color-border, #e5e7eb);
    border-radius: 14px;
}

/* Card */
.dep-card {
    position: relative;
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    padding: 1.05rem 1.15rem 0.85rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    overflow: hidden;
}
.dep-card::before {
    content: "";
    position: absolute;
    top: 0.85rem;
    bottom: 0.85rem;
    left: 0.55rem;
    width: 4px;
    border-radius: 999px;
    background: var(--dep-color, #3b82f6);
}
.dep-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.dep-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding-left: 0.75rem;   /* deja hueco a la barra de color */
}
.dep-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    letter-spacing: -0.01em;
}
.dep-card-delete {
    background: transparent;
    border: none;
    color: var(--color-danger, #ef4444);
    cursor: pointer;
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.dep-card-delete:hover { background: rgba(239, 68, 68, 0.1); }
.dep-card-sub {
    padding-left: 0.75rem;
    font-size: 0.8rem;
    color: var(--color-text-light, #6b7280);
    min-height: 1.2rem;
}
.dep-card-sub-empty {
    font-style: italic;
    color: var(--color-text-light, #9ca3af);
}
.dep-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    padding-left: 0.75rem;
    border-top: 1px solid var(--color-border, #f3f4f6);
}
.dep-card-count {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--color-text-light, #6b7280);
    font-weight: 500;
}
.dep-card-count i { font-size: 0.9rem; }
.dep-card-editar {
    background: transparent;
    border: none;
    color: var(--color-primary, #0265bd);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: background 0.15s ease;
}
.dep-card-editar:hover { background: rgba(2, 101, 189, 0.08); }

/* Modal */
.dep-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    display: none;
    z-index: 1040;
}
.dep-modal-backdrop.show { display: block; }
.dep-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 560px;
    width: calc(100% - 2rem);
    background: var(--color-card-bg, #fff);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
    display: none;
    z-index: 1050;
}
.dep-modal.show { display: block; }
.dep-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border, #eef0f3);
}
.dep-modal-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.dep-modal-header h5 i { color: var(--color-primary, #0265bd); }
.dep-modal-close {
    background: transparent;
    border: none;
    color: var(--color-text-light, #6b7280);
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}
.dep-modal-close:hover { background: var(--color-bg-muted, #f3f4f6); color: var(--color-text, #1f2937); }
.dep-modal-body { padding: 1.25rem 1.25rem 1.35rem; }
.dep-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.15rem;
}

/* Dark mode */
html.dark-mode .dep-card,
.dark-mode .dep-card {
    background: var(--color-card-bg);
    border-color: rgba(255, 255, 255, 0.08);
}
html.dark-mode .dep-modal,
.dark-mode .dep-modal { background: var(--color-card-bg); }
html.dark-mode .dep-toolbar,
.dark-mode .dep-toolbar {
    background: var(--color-card-bg);
    border-color: rgba(255, 255, 255, 0.08);
}
html.dark-mode .dep-title,
.dark-mode .dep-title { color: var(--color-text, #f3f4f6); }

/* =====================================================================
   Centros de trabajo (estado 25) — grid de cards similar a Departamentos
   pero con más info por card (dirección, población, teléfono, email).
   ===================================================================== */
.cen-page { padding: 0.75rem 1rem 2.5rem; }
.cen-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.cen-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    margin: 0 0 0.2rem;
}
.cen-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-light, #6b7280);
}
.cen-actions { display: inline-flex; align-items: center; gap: 0.5rem; }
.cen-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.05rem;
    background: linear-gradient(135deg, var(--color-primary, #0265bd), var(--color-primary-dark, #0c1749));
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(2, 101, 189, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cen-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(2, 101, 189, 0.36); }
.cen-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    background: transparent;
    color: var(--color-text-light, #6b7280);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}
.cen-btn-secondary:hover { background: var(--color-bg-muted, #f9fafb); color: var(--color-text, #1f2937); }

.cen-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    margin-bottom: 1rem;
}
.cen-field-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-light, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cen-select-sociedad {
    background: transparent;
    border: 1px solid var(--color-border, #d6dbe3);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
    color: var(--color-text, #1f2937);
    cursor: pointer;
    min-width: 220px;
}

/* Grid — cards más grandes que Departamentos porque tienen 4-5 líneas de datos */
.cen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.cen-empty {
    grid-column: 1 / -1;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-text-light, #9ca3af);
    font-style: italic;
    background: var(--color-card-bg, #fff);
    border: 1px dashed var(--color-border, #e5e7eb);
    border-radius: 14px;
}

.cen-card {
    position: relative;
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    padding: 1.05rem 1.15rem 0.85rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    transition: box-shadow 0.15s ease;
    overflow: hidden;
}
.cen-card::before {
    content: "";
    position: absolute;
    top: 0.85rem;
    bottom: 0.85rem;
    left: 0.55rem;
    width: 4px;
    border-radius: 999px;
    background: var(--cen-color, #3b82f6);
}
.cen-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.cen-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding-left: 0.75rem;
}
.cen-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    letter-spacing: -0.01em;
}
.cen-card-delete {
    background: transparent;
    border: none;
    color: var(--color-danger, #ef4444);
    cursor: pointer;
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.cen-card-delete:hover { background: rgba(239, 68, 68, 0.1); }
.cen-card-body {
    padding-left: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.cen-card-linea {
    font-size: 0.83rem;
    color: var(--color-text, #1f2937);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    line-height: 1.35;
}
.cen-card-linea i {
    font-size: 0.85rem;
    color: var(--color-text-light, #9ca3af);
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
}
.cen-card-linea-muted {
    color: var(--color-text-light, #6b7280);
    padding-left: 1.45rem;   /* alinea con el texto de las líneas con icono */
    font-size: 0.78rem;
}
.cen-card-linea-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cen-card-linea-empty {
    font-style: italic;
    color: var(--color-text-light, #9ca3af);
    font-size: 0.8rem;
}
.cen-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    padding-left: 0.75rem;
    border-top: 1px solid var(--color-border, #f3f4f6);
}
.cen-card-count {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--color-text-light, #6b7280);
    font-weight: 500;
}
.cen-card-count i { font-size: 0.9rem; }
.cen-card-editar {
    background: transparent;
    border: none;
    color: var(--color-primary, #0265bd);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: background 0.15s ease;
}
.cen-card-editar:hover { background: rgba(2, 101, 189, 0.08); }

/* Modal */
.cen-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    display: none;
    z-index: 1040;
}
.cen-modal-backdrop.show { display: block; }
.cen-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 640px;
    width: calc(100% - 2rem);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background: var(--color-card-bg, #fff);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
    display: none;
    z-index: 1050;
}
.cen-modal.show { display: block; }
.cen-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border, #eef0f3);
    position: sticky;
    top: 0;
    background: var(--color-card-bg, #fff);
    z-index: 1;
}
.cen-modal-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.cen-modal-header h5 i { color: var(--color-primary, #0265bd); }
.cen-modal-close {
    background: transparent;
    border: none;
    color: var(--color-text-light, #6b7280);
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}
.cen-modal-close:hover { background: var(--color-bg-muted, #f3f4f6); color: var(--color-text, #1f2937); }
.cen-modal-body { padding: 1.25rem 1.25rem 1.35rem; }
.cen-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.15rem;
}

/* Dark mode */
html.dark-mode .cen-card,
.dark-mode .cen-card {
    background: var(--color-card-bg);
    border-color: rgba(255, 255, 255, 0.08);
}
html.dark-mode .cen-modal,
.dark-mode .cen-modal,
html.dark-mode .cen-modal-header,
.dark-mode .cen-modal-header { background: var(--color-card-bg); }
html.dark-mode .cen-toolbar,
.dark-mode .cen-toolbar {
    background: var(--color-card-bg);
    border-color: rgba(255, 255, 255, 0.08);
}
html.dark-mode .cen-title,
.dark-mode .cen-title { color: var(--color-text, #f3f4f6); }
html.dark-mode .cen-card-title,
.dark-mode .cen-card-title { color: var(--color-text, #f3f4f6); }

/* =====================================================================
   Toggle Lista / Grid — compartido para Departamentos y Centros de trabajo.
   Es un segmented control con 2 iconos (list / grid).
   ===================================================================== */
.dep-view-toggle,
.cen-view-toggle {
    display: inline-flex;
    background: var(--color-bg-muted, #f3f4f6);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}
.dep-view-btn,
.cen-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--color-text-light, #6b7280);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.dep-view-btn:hover,
.cen-view-btn:hover { color: var(--color-text, #1f2937); }
.dep-view-btn-active,
.cen-view-btn-active {
    background: var(--color-card-bg, #fff);
    color: var(--color-primary, #0265bd);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
html.dark-mode .dep-view-toggle,
.dark-mode .dep-view-toggle,
html.dark-mode .cen-view-toggle,
.dark-mode .cen-view-toggle { background: rgba(255, 255, 255, 0.05); }
html.dark-mode .dep-view-btn-active,
.dark-mode .dep-view-btn-active,
html.dark-mode .cen-view-btn-active,
.dark-mode .cen-view-btn-active {
    background: var(--color-card-bg);
    color: var(--color-primary, #5192F3);
}

/* ============ MODO LISTA — Departamentos ============ */
.dep-grid.dep-grid-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.dep-grid.dep-grid-list .dep-card {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
    grid-template-rows: auto;
    gap: 1rem;
    padding: 0.85rem 1rem 0.85rem 1.35rem;
    align-items: center;
}
.dep-grid.dep-grid-list .dep-card::before {
    top: 0.85rem;
    bottom: 0.85rem;
}
.dep-grid.dep-grid-list .dep-card-header {
    padding-left: 0;
    align-items: center;
    order: 1;
}
.dep-grid.dep-grid-list .dep-card-header .dep-card-delete { display: none; }
.dep-grid.dep-grid-list .dep-card-sub {
    padding-left: 0;
    order: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dep-grid.dep-grid-list .dep-card-footer {
    order: 3;
    padding-left: 0;
    padding-top: 0;
    margin-top: 0;
    border-top: none;
    gap: 0.75rem;
    justify-content: flex-end;
}
.dep-grid.dep-grid-list .dep-card-count { white-space: nowrap; }
.dep-grid.dep-grid-list .dep-card-editar { font-size: 0.85rem; }
/* Papelera se muestra al final como una 4ª columna en list mode */
.dep-grid.dep-grid-list .dep-card-delete-list {
    background: transparent;
    border: none;
    color: var(--color-danger, #ef4444);
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    font-size: 1rem;
    transition: background 0.15s ease;
    order: 4;
}
.dep-grid.dep-grid-list .dep-card-delete-list:hover { background: rgba(239, 68, 68, 0.1); }

/* ============ MODO LISTA — Centros de trabajo ============ */
.cen-grid.cen-grid-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.cen-grid.cen-grid-list .cen-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 0.8fr) auto auto;
    grid-template-rows: auto;
    gap: 1rem;
    padding: 0.85rem 1rem 0.85rem 1.35rem;
    align-items: center;
}
.cen-grid.cen-grid-list .cen-card::before {
    top: 0.85rem;
    bottom: 0.85rem;
}
.cen-grid.cen-grid-list .cen-card-header {
    padding-left: 0;
    align-items: center;
    order: 1;
    min-width: 0;
}
.cen-grid.cen-grid-list .cen-card-header .cen-card-delete { display: none; }
.cen-grid.cen-grid-list .cen-card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Body en lista: solo mostramos 1 línea (dirección) */
.cen-grid.cen-grid-list .cen-card-body {
    padding-left: 0;
    order: 2;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    overflow: hidden;
}
.cen-grid.cen-grid-list .cen-card-body .cen-card-linea {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.82rem;
}
.cen-grid.cen-grid-list .cen-card-body .cen-card-linea-muted { display: none; }
.cen-grid.cen-grid-list .cen-card-body .cen-card-linea:nth-child(n+2) { display: none; }
.cen-grid.cen-grid-list .cen-card-footer {
    order: 3;
    padding-left: 0;
    padding-top: 0;
    margin-top: 0;
    border-top: none;
    gap: 0.75rem;
    justify-content: flex-end;
}
.cen-grid.cen-grid-list .cen-card-count { white-space: nowrap; }
.cen-grid.cen-grid-list .cen-card-delete-list {
    background: transparent;
    border: none;
    color: var(--color-danger, #ef4444);
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    font-size: 1rem;
    transition: background 0.15s ease;
    order: 5;
}
.cen-grid.cen-grid-list .cen-card-delete-list:hover { background: rgba(239, 68, 68, 0.1); }

/* Responsive: en móvil, el modo lista colapsa a lo mismo que grid */
@media (max-width: 640px) {
    .dep-grid.dep-grid-list .dep-card,
    .cen-grid.cen-grid-list .cen-card { grid-template-columns: 1fr; }
    .dep-grid.dep-grid-list .dep-card-footer,
    .cen-grid.cen-grid-list .cen-card-footer { justify-content: space-between; }
}

/* =====================================================================
   Sociedades (estado 26) — solo super-admin. Mismo lenguaje visual que
   Departamentos / Centros, con las líneas específicas de sociedad
   (razón social, tipo doc + documento, dirección, contacto).
   ===================================================================== */
.soc-page { padding: 0.75rem 1rem 2.5rem; }
.soc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.soc-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    margin: 0 0 0.2rem;
}
.soc-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-light, #6b7280);
}
.soc-actions { display: inline-flex; align-items: center; gap: 0.5rem; }
.soc-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.05rem;
    background: linear-gradient(135deg, var(--color-primary, #0265bd), var(--color-primary-dark, #0c1749));
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(2, 101, 189, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.soc-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(2, 101, 189, 0.36); }
.soc-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    background: transparent;
    color: var(--color-text-light, #6b7280);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}
.soc-btn-secondary:hover { background: var(--color-bg-muted, #f9fafb); color: var(--color-text, #1f2937); }

/* Toggle vista */
.soc-view-toggle {
    display: inline-flex;
    background: var(--color-bg-muted, #f3f4f6);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}
.soc-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--color-text-light, #6b7280);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.soc-view-btn:hover { color: var(--color-text, #1f2937); }
.soc-view-btn-active {
    background: var(--color-card-bg, #fff);
    color: var(--color-primary, #0265bd);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.soc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}
.soc-empty {
    grid-column: 1 / -1;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-text-light, #9ca3af);
    font-style: italic;
    background: var(--color-card-bg, #fff);
    border: 1px dashed var(--color-border, #e5e7eb);
    border-radius: 14px;
}

.soc-card {
    position: relative;
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    padding: 1.05rem 1.15rem 0.85rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    transition: box-shadow 0.15s ease;
    overflow: hidden;
}
.soc-card::before {
    content: "";
    position: absolute;
    top: 0.85rem;
    bottom: 0.85rem;
    left: 0.55rem;
    width: 4px;
    border-radius: 999px;
    background: var(--soc-color, #3b82f6);
}
.soc-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.soc-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding-left: 0.75rem;
}
.soc-card-title-wrap { min-width: 0; }
.soc-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.soc-card-sub {
    font-size: 0.78rem;
    color: var(--color-text-light, #9ca3af);
    line-height: 1.25;
    margin-top: 0.1rem;
}
.soc-card-delete {
    background: transparent;
    border: none;
    color: var(--color-danger, #ef4444);
    cursor: pointer;
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.soc-card-delete:hover { background: rgba(239, 68, 68, 0.1); }
.soc-card-body {
    padding-left: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.soc-card-linea {
    font-size: 0.83rem;
    color: var(--color-text, #1f2937);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    line-height: 1.35;
}
.soc-card-linea i {
    font-size: 0.85rem;
    color: var(--color-text-light, #9ca3af);
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
}
.soc-card-linea-muted {
    color: var(--color-text-light, #6b7280);
    padding-left: 1.45rem;
    font-size: 0.78rem;
}
.soc-card-linea-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.soc-card-linea-empty {
    font-style: italic;
    color: var(--color-text-light, #9ca3af);
    font-size: 0.8rem;
}
.soc-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    padding-left: 0.75rem;
    border-top: 1px solid var(--color-border, #f3f4f6);
}
.soc-card-count {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--color-text-light, #6b7280);
    font-weight: 500;
}
.soc-card-count i { font-size: 0.9rem; }
.soc-card-editar {
    background: transparent;
    border: none;
    color: var(--color-primary, #0265bd);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: background 0.15s ease;
}
.soc-card-editar:hover { background: rgba(2, 101, 189, 0.08); }

/* Modal */
.soc-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    display: none;
    z-index: 1040;
}
.soc-modal-backdrop.show { display: block; }
.soc-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 720px;
    width: calc(100% - 2rem);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background: var(--color-card-bg, #fff);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
    display: none;
    z-index: 1050;
}
.soc-modal.show { display: block; }
.soc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border, #eef0f3);
    position: sticky;
    top: 0;
    background: var(--color-card-bg, #fff);
    z-index: 1;
}
.soc-modal-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.soc-modal-header h5 i { color: var(--color-primary, #0265bd); }
.soc-modal-close {
    background: transparent;
    border: none;
    color: var(--color-text-light, #6b7280);
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}
.soc-modal-close:hover { background: var(--color-bg-muted, #f3f4f6); color: var(--color-text, #1f2937); }
.soc-modal-body { padding: 1.25rem 1.25rem 1.35rem; }
.soc-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.15rem;
}

/* Modo lista — misma lógica que dep/cen */
.soc-grid.soc-grid-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.soc-grid.soc-grid-list .soc-card {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 0.9fr) auto auto;
    grid-template-rows: auto;
    gap: 1rem;
    padding: 0.85rem 1rem 0.85rem 1.35rem;
    align-items: center;
}
.soc-grid.soc-grid-list .soc-card::before { top: 0.85rem; bottom: 0.85rem; }
.soc-grid.soc-grid-list .soc-card-header {
    padding-left: 0;
    align-items: center;
    order: 1;
    min-width: 0;
}
.soc-grid.soc-grid-list .soc-card-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-grid.soc-grid-list .soc-card-header .soc-card-delete { display: none; }
.soc-grid.soc-grid-list .soc-card-sub { display: none; }  /* razón social secundaria oculta en list */
.soc-grid.soc-grid-list .soc-card-body {
    padding-left: 0;
    order: 2;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    overflow: hidden;
}
.soc-grid.soc-grid-list .soc-card-body .soc-card-linea {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.82rem;
}
.soc-grid.soc-grid-list .soc-card-body .soc-card-linea-muted { display: none; }
.soc-grid.soc-grid-list .soc-card-body .soc-card-linea:nth-child(n+2) { display: none; }
.soc-grid.soc-grid-list .soc-card-footer {
    order: 3;
    padding-left: 0;
    padding-top: 0;
    margin-top: 0;
    border-top: none;
    gap: 0.75rem;
    justify-content: flex-end;
}
.soc-grid.soc-grid-list .soc-card-count { white-space: nowrap; }
.soc-grid.soc-grid-list .soc-card-delete-list {
    background: transparent;
    border: none;
    color: var(--color-danger, #ef4444);
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    font-size: 1rem;
    transition: background 0.15s ease;
    order: 5;
}
.soc-grid.soc-grid-list .soc-card-delete-list:hover { background: rgba(239, 68, 68, 0.1); }

/* Responsive modo lista → 1 columna */
@media (max-width: 640px) {
    .soc-grid.soc-grid-list .soc-card { grid-template-columns: 1fr; }
    .soc-grid.soc-grid-list .soc-card-footer { justify-content: space-between; }
}

/* Dark mode */
html.dark-mode .soc-card,
.dark-mode .soc-card {
    background: var(--color-card-bg);
    border-color: rgba(255, 255, 255, 0.08);
}
html.dark-mode .soc-modal,
.dark-mode .soc-modal,
html.dark-mode .soc-modal-header,
.dark-mode .soc-modal-header { background: var(--color-card-bg); }
html.dark-mode .soc-view-toggle,
.dark-mode .soc-view-toggle { background: rgba(255, 255, 255, 0.05); }
html.dark-mode .soc-view-btn-active,
.dark-mode .soc-view-btn-active { background: var(--color-card-bg); color: var(--color-primary, #5192F3); }
html.dark-mode .soc-title,
.dark-mode .soc-title { color: var(--color-text, #f3f4f6); }
html.dark-mode .soc-card-title,
.dark-mode .soc-card-title { color: var(--color-text, #f3f4f6); }

/* =====================================================================
   Turnos (estado 27) — grid de cards con chips L-D + boxes horario/semana
   ===================================================================== */
.turn-page { padding: 0.75rem 1rem 2.5rem; }
.turn-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.turn-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    margin: 0 0 0.2rem;
}
.turn-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-light, #6b7280);
}
.turn-actions { display: inline-flex; align-items: center; gap: 0.5rem; }
.turn-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.05rem;
    background: linear-gradient(135deg, var(--color-primary, #0265bd), var(--color-primary-dark, #0c1749));
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(2, 101, 189, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.turn-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(2, 101, 189, 0.36); }

/* Toggle vista */
.turn-view-toggle {
    display: inline-flex;
    background: var(--color-bg-muted, #f3f4f6);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}
.turn-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--color-text-light, #6b7280);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.turn-view-btn:hover { color: var(--color-text, #1f2937); }
.turn-view-btn-active {
    background: var(--color-card-bg, #fff);
    color: var(--color-primary, #0265bd);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.turn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1rem;
}
.turn-empty {
    grid-column: 1 / -1;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-text-light, #9ca3af);
    font-style: italic;
    background: var(--color-card-bg, #fff);
    border: 1px dashed var(--color-border, #e5e7eb);
    border-radius: 14px;
}

.turn-card {
    position: relative;
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    padding: 1.05rem 1.15rem 0.85rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    transition: box-shadow 0.15s ease;
}
.turn-card::before {
    content: "";
    position: absolute;
    top: 0.85rem;
    bottom: 0.85rem;
    left: 0.55rem;
    width: 4px;
    border-radius: 999px;
    background: var(--turn-color, #3b82f6);
}
.turn-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.turn-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding-left: 0.75rem;
}
.turn-card-title-wrap { min-width: 0; }
.turn-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.turn-card-sub {
    font-size: 0.78rem;
    color: var(--color-text-light, #9ca3af);
    margin-top: 0.1rem;
}
.turn-card-delete {
    background: transparent;
    border: none;
    color: var(--color-danger, #ef4444);
    cursor: pointer;
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.turn-card-delete:hover { background: rgba(239, 68, 68, 0.1); }

/* Chips días L M X J V S D — inactivos gris, activos color del turno */
.turn-card-dias {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    padding-left: 0.75rem;
}
.turn-dia-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    background: var(--color-bg-muted, #f3f4f6);
    color: var(--color-text-light, #9ca3af);
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1;
    border: 1px solid transparent;
}
/* Activo: fondo con color del turno tintado + texto en color oscuro del turno.
   Usamos color-mix cuando existe (navegadores modernos); fallback en semi-transp
   sobre var(--turn-color) para navegadores viejos vía rgba fallback... el chip
   siempre pinta legible porque el color base es medio-oscuro. */
.turn-dia-chip-active {
    background: color-mix(in srgb, var(--turn-color) 20%, white);
    color: color-mix(in srgb, var(--turn-color) 75%, black);
    border-color: color-mix(in srgb, var(--turn-color) 30%, transparent);
}

/* Boxes: HORARIO / SEMANAL */
.turn-card-boxes {
    display: flex;
    gap: 0.5rem;
    padding-left: 0.75rem;
}
.turn-card-box {
    flex: 1 1 auto;
    background: var(--color-bg-muted, #f9fafb);
    border: 1px solid var(--color-border, #eef0f3);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    min-width: 0;
}
.turn-card-box.turn-card-box-sm { flex: 0 0 auto; min-width: 90px; }
.turn-box-label {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--color-text-light, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
}
.turn-box-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    line-height: 1.25;
    /* Nota: si el horario contiene varios tramos separados por " · ", se envuelve
       a 2 líneas si hace falta. */
    word-break: break-word;
}

.turn-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.15rem;
    padding-top: 0.6rem;
    padding-left: 0.75rem;
    border-top: 1px solid var(--color-border, #f3f4f6);
}
.turn-card-count {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--color-text-light, #6b7280);
    font-weight: 500;
}
.turn-card-count i { font-size: 0.9rem; }
.turn-card-editar {
    background: transparent;
    border: none;
    color: var(--color-primary, #0265bd);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: background 0.15s ease;
}
.turn-card-editar:hover { background: rgba(2, 101, 189, 0.08); }

/* Modo lista: linealiza la card. La fila de chips se comprime, los boxes se
   pierden (se muestra solo el subtítulo con horario/horas) y la papelera pasa
   a última columna. */
.turn-grid.turn-grid-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.turn-grid.turn-grid-list .turn-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, 1fr) auto auto;
    grid-template-rows: auto;
    gap: 1rem;
    padding: 0.85rem 1rem 0.85rem 1.35rem;
    align-items: center;
}
.turn-grid.turn-grid-list .turn-card::before { top: 0.85rem; bottom: 0.85rem; }
.turn-grid.turn-grid-list .turn-card-header {
    padding-left: 0; order: 1; align-items: center; min-width: 0;
}
.turn-grid.turn-grid-list .turn-card-header .turn-card-delete { display: none; }
.turn-grid.turn-grid-list .turn-card-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.turn-grid.turn-grid-list .turn-card-dias { padding-left: 0; order: 2; grid-template-columns: repeat(7, 20px); }
.turn-grid.turn-grid-list .turn-dia-chip { padding: 3px 0; font-size: 0.68rem; }
.turn-grid.turn-grid-list .turn-card-boxes {
    padding-left: 0; order: 3; gap: 0.5rem; min-width: 0;
}
.turn-grid.turn-grid-list .turn-card-box {
    padding: 0.35rem 0.55rem;
    background: transparent;
    border: none;
    overflow: hidden;
}
.turn-grid.turn-grid-list .turn-box-label { display: none; }
.turn-grid.turn-grid-list .turn-box-value {
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.turn-grid.turn-grid-list .turn-card-footer {
    order: 4; padding-left: 0; padding-top: 0; margin-top: 0;
    border-top: none; gap: 0.75rem; justify-content: flex-end;
}
.turn-grid.turn-grid-list .turn-card-count { white-space: nowrap; }
.turn-grid.turn-grid-list .turn-card-delete-list {
    background: transparent;
    border: none;
    color: var(--color-danger, #ef4444);
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    font-size: 1rem;
    transition: background 0.15s ease;
    order: 5;
}
.turn-grid.turn-grid-list .turn-card-delete-list:hover { background: rgba(239, 68, 68, 0.1); }

@media (max-width: 640px) {
    .turn-grid.turn-grid-list .turn-card { grid-template-columns: 1fr; }
    .turn-grid.turn-grid-list .turn-card-footer { justify-content: space-between; }
}

/* Dark mode */
html.dark-mode .turn-card,
.dark-mode .turn-card {
    background: var(--color-card-bg);
    border-color: rgba(255, 255, 255, 0.08);
}
html.dark-mode .turn-card-box,
.dark-mode .turn-card-box {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
}
html.dark-mode .turn-view-toggle,
.dark-mode .turn-view-toggle { background: rgba(255, 255, 255, 0.05); }
html.dark-mode .turn-view-btn-active,
.dark-mode .turn-view-btn-active { background: var(--color-card-bg); color: var(--color-primary, #5192F3); }
html.dark-mode .turn-title,
.dark-mode .turn-title,
html.dark-mode .turn-card-title,
.dark-mode .turn-card-title,
html.dark-mode .turn-box-value,
.dark-mode .turn-box-value { color: var(--color-text, #f3f4f6); }
html.dark-mode .turn-dia-chip,
.dark-mode .turn-dia-chip { background: rgba(255, 255, 255, 0.03); }

/* Modo "solo formulario" del modal de turnos — activado por la nueva pantalla
   Turnos (estado 27) cuando abre el editor directamente. Oculta la cabecera
   "Catálogo de turnos" y la tabla de listado (redundantes: el usuario ya está
   en el listado de tarjetas de la nueva pantalla). Solo se ve el form. */
.gp-cat.turn-form-only .gp-cat-header,
.gp-cat.turn-form-only .gp-cat-body {
    display: none;
}
.gp-cat.turn-form-only .gp-cat-form {
    /* En modo catálogo el form vive debajo de la tabla; aquí lo dejamos como
       único contenido del modal, sin margen superior extra. */
    margin-top: 0;
    padding-top: 1rem;
}

/* =====================================================================
   Tipos de ausencias (estado 28) — grid de cards simples con nombre,
   descripción y contador de usos. Reutiliza el modal gpCatTiposAsist
   en modo form-only (misma técnica que Turnos).
   ===================================================================== */
.tausen-page { padding: 0.75rem 1rem 2.5rem; }
.tausen-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.tausen-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    margin: 0 0 0.2rem;
}
.tausen-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-light, #6b7280);
}
.tausen-actions { display: inline-flex; align-items: center; gap: 0.5rem; }
.tausen-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.05rem;
    background: linear-gradient(135deg, var(--color-primary, #0265bd), var(--color-primary-dark, #0c1749));
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(2, 101, 189, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tausen-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(2, 101, 189, 0.36); }

/* Toggle vista */
.tausen-view-toggle {
    display: inline-flex;
    background: var(--color-bg-muted, #f3f4f6);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}
.tausen-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--color-text-light, #6b7280);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.tausen-view-btn:hover { color: var(--color-text, #1f2937); }
.tausen-view-btn-active {
    background: var(--color-card-bg, #fff);
    color: var(--color-primary, #0265bd);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.tausen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.tausen-empty {
    grid-column: 1 / -1;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-text-light, #9ca3af);
    font-style: italic;
    background: var(--color-card-bg, #fff);
    border: 1px dashed var(--color-border, #e5e7eb);
    border-radius: 14px;
}

.tausen-card {
    position: relative;
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    padding: 1.05rem 1.15rem 0.85rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    transition: box-shadow 0.15s ease;
    overflow: hidden;
}
.tausen-card::before {
    content: "";
    position: absolute;
    top: 0.85rem;
    bottom: 0.85rem;
    left: 0.55rem;
    width: 4px;
    border-radius: 999px;
    background: var(--tausen-color, #3b82f6);
}
.tausen-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.tausen-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding-left: 0.75rem;
}
.tausen-card-title-wrap { min-width: 0; }
.tausen-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.tausen-card-delete {
    background: transparent;
    border: none;
    color: var(--color-danger, #ef4444);
    cursor: pointer;
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.tausen-card-delete:hover { background: rgba(239, 68, 68, 0.1); }
.tausen-card-body {
    padding-left: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.tausen-card-desc {
    font-size: 0.83rem;
    color: var(--color-text, #1f2937);
    line-height: 1.4;
}
.tausen-card-desc-empty {
    color: var(--color-text-light, #9ca3af);
    font-style: italic;
    font-size: 0.8rem;
}
.tausen-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    padding-left: 0.75rem;
    border-top: 1px solid var(--color-border, #f3f4f6);
}
.tausen-card-count {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--color-text-light, #6b7280);
    font-weight: 500;
}
.tausen-card-count i { font-size: 0.9rem; }
.tausen-card-editar {
    background: transparent;
    border: none;
    color: var(--color-primary, #0265bd);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: background 0.15s ease;
}
.tausen-card-editar:hover { background: rgba(2, 101, 189, 0.08); }

/* Modo lista — misma lógica que dep/cen/soc: cards en fila con la
   descripción truncada y footer alineado a la derecha. */
.tausen-grid.tausen-grid-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.tausen-grid.tausen-grid-list .tausen-card {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) auto auto;
    grid-template-rows: auto;
    gap: 1rem;
    padding: 0.85rem 1rem 0.85rem 1.35rem;
    align-items: center;
}
.tausen-grid.tausen-grid-list .tausen-card::before { top: 0.85rem; bottom: 0.85rem; }
.tausen-grid.tausen-grid-list .tausen-card-header {
    padding-left: 0;
    align-items: center;
    order: 1;
    min-width: 0;
}
.tausen-grid.tausen-grid-list .tausen-card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tausen-grid.tausen-grid-list .tausen-card-header .tausen-card-delete { display: none; }
.tausen-grid.tausen-grid-list .tausen-card-body {
    padding-left: 0;
    order: 2;
    min-width: 0;
}
.tausen-grid.tausen-grid-list .tausen-card-desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.82rem;
}
.tausen-grid.tausen-grid-list .tausen-card-footer {
    order: 3;
    padding-left: 0;
    padding-top: 0;
    margin-top: 0;
    border-top: none;
    gap: 0.75rem;
    justify-content: flex-end;
}
.tausen-grid.tausen-grid-list .tausen-card-count { white-space: nowrap; }
.tausen-grid.tausen-grid-list .tausen-card-delete-list {
    background: transparent;
    border: none;
    color: var(--color-danger, #ef4444);
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    font-size: 1rem;
    transition: background 0.15s ease;
    order: 4;
}
.tausen-grid.tausen-grid-list .tausen-card-delete-list:hover { background: rgba(239, 68, 68, 0.1); }

/* Responsive modo lista → 1 columna en móvil */
@media (max-width: 640px) {
    .tausen-grid.tausen-grid-list .tausen-card { grid-template-columns: 1fr; }
    .tausen-grid.tausen-grid-list .tausen-card-footer { justify-content: space-between; }
}

/* Dark mode */
html.dark-mode .tausen-card,
.dark-mode .tausen-card {
    background: var(--color-card-bg);
    border-color: rgba(255, 255, 255, 0.08);
}
html.dark-mode .tausen-view-toggle,
.dark-mode .tausen-view-toggle { background: rgba(255, 255, 255, 0.05); }
html.dark-mode .tausen-view-btn-active,
.dark-mode .tausen-view-btn-active { background: var(--color-card-bg); color: var(--color-primary, #5192F3); }
html.dark-mode .tausen-title,
.dark-mode .tausen-title,
html.dark-mode .tausen-card-title,
.dark-mode .tausen-card-title { color: var(--color-text, #f3f4f6); }

/* Modo "solo formulario" del modal de tipos de asistencia — activado por
   la nueva pantalla de Tipos de ausencias (estado 28). Oculta la cabecera
   "Tipos de asistencias" y la tabla de listado del catálogo antiguo (que
   sería redundante con el grid de esta misma página). Solo se ve el form. */
.gp-cat.tausen-form-only .gp-cat-header,
.gp-cat.tausen-form-only .gp-cat-body {
    display: none;
}
.gp-cat.tausen-form-only .gp-cat-form {
    margin-top: 0;
    padding-top: 1rem;
}

/* =====================================================================
   Cargos (estado 29) — grid de cards con nombre, sociedad (badge sub),
   cargo padre, salario y contador de empleados asignados. Reutiliza el
   modal gpCatCargos en modo form-only.
   ===================================================================== */
.carg-page { padding: 0.75rem 1rem 2.5rem; }
.carg-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.carg-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    margin: 0 0 0.2rem;
}
.carg-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-light, #6b7280);
}
.carg-actions { display: inline-flex; align-items: center; gap: 0.5rem; }
.carg-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.05rem;
    background: linear-gradient(135deg, var(--color-primary, #0265bd), var(--color-primary-dark, #0c1749));
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(2, 101, 189, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.carg-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(2, 101, 189, 0.36); }

/* Toggle vista */
.carg-view-toggle {
    display: inline-flex;
    background: var(--color-bg-muted, #f3f4f6);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}
.carg-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--color-text-light, #6b7280);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.carg-view-btn:hover { color: var(--color-text, #1f2937); }
.carg-view-btn-active {
    background: var(--color-card-bg, #fff);
    color: var(--color-primary, #0265bd);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.carg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.carg-empty {
    grid-column: 1 / -1;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-text-light, #9ca3af);
    font-style: italic;
    background: var(--color-card-bg, #fff);
    border: 1px dashed var(--color-border, #e5e7eb);
    border-radius: 14px;
}

.carg-card {
    position: relative;
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    padding: 1.05rem 1.15rem 0.85rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    transition: box-shadow 0.15s ease;
    overflow: hidden;
}
.carg-card::before {
    content: "";
    position: absolute;
    top: 0.85rem;
    bottom: 0.85rem;
    left: 0.55rem;
    width: 4px;
    border-radius: 999px;
    background: var(--carg-color, #3b82f6);
}
.carg-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.carg-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding-left: 0.75rem;
}
.carg-card-title-wrap { min-width: 0; }
.carg-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.carg-card-sub {
    font-size: 0.78rem;
    color: var(--color-text-light, #9ca3af);
    line-height: 1.25;
    margin-top: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.carg-card-body {
    padding-left: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.carg-card-linea {
    font-size: 0.83rem;
    color: var(--color-text, #1f2937);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    line-height: 1.35;
}
.carg-card-linea i {
    font-size: 0.85rem;
    color: var(--color-text-light, #9ca3af);
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
}
.carg-card-linea-sal { font-weight: 600; }
.carg-card-linea-empty {
    font-style: italic;
    color: var(--color-text-light, #9ca3af);
    font-size: 0.8rem;
}
.carg-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    padding-left: 0.75rem;
    border-top: 1px solid var(--color-border, #f3f4f6);
}
.carg-card-count {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--color-text-light, #6b7280);
    font-weight: 500;
}
.carg-card-count i { font-size: 0.9rem; }
.carg-card-editar {
    background: transparent;
    border: none;
    color: var(--color-primary, #0265bd);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: background 0.15s ease;
}
.carg-card-editar:hover { background: rgba(2, 101, 189, 0.08); }

/* Modo lista */
.carg-grid.carg-grid-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.carg-grid.carg-grid-list .carg-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr) auto auto;
    grid-template-rows: auto;
    gap: 1rem;
    padding: 0.85rem 1rem 0.85rem 1.35rem;
    align-items: center;
}
.carg-grid.carg-grid-list .carg-card::before { top: 0.85rem; bottom: 0.85rem; }
.carg-grid.carg-grid-list .carg-card-header {
    padding-left: 0;
    align-items: center;
    order: 1;
    min-width: 0;
}
.carg-grid.carg-grid-list .carg-card-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carg-grid.carg-grid-list .carg-card-body {
    padding-left: 0;
    order: 2;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    overflow: hidden;
}
.carg-grid.carg-grid-list .carg-card-linea {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.82rem;
}
.carg-grid.carg-grid-list .carg-card-footer {
    order: 3;
    padding-left: 0;
    padding-top: 0;
    margin-top: 0;
    border-top: none;
    gap: 0.75rem;
    justify-content: flex-end;
}
.carg-grid.carg-grid-list .carg-card-count { white-space: nowrap; }

/* Responsive modo lista → 1 columna en móvil */
@media (max-width: 640px) {
    .carg-grid.carg-grid-list .carg-card { grid-template-columns: 1fr; }
    .carg-grid.carg-grid-list .carg-card-footer { justify-content: space-between; }
}

/* Dark mode */
html.dark-mode .carg-card,
.dark-mode .carg-card {
    background: var(--color-card-bg);
    border-color: rgba(255, 255, 255, 0.08);
}
html.dark-mode .carg-view-toggle,
.dark-mode .carg-view-toggle { background: rgba(255, 255, 255, 0.05); }
html.dark-mode .carg-view-btn-active,
.dark-mode .carg-view-btn-active { background: var(--color-card-bg); color: var(--color-primary, #5192F3); }
html.dark-mode .carg-title,
.dark-mode .carg-title,
html.dark-mode .carg-card-title,
.dark-mode .carg-card-title { color: var(--color-text, #f3f4f6); }

/* Modo "solo formulario" del modal de cargos — mismo patrón que Turnos
   y TiposAusencias. Oculta la cabecera "Catálogo de cargos" y la tabla
   de listado (redundantes con el grid de esta misma página). */
.gp-cat.carg-form-only .gp-cat-header,
.gp-cat.carg-form-only .gp-cat-body {
    display: none;
}
.gp-cat.carg-form-only .gp-cat-form {
    margin-top: 0;
    padding-top: 1rem;
}

/* =====================================================================
   Fichajes (estado 30) — panel de administración RRHH. 4 tarjetas KPI
   + toolbar + tabla expandible por día/empleado + modal edición hora.
   ===================================================================== */
.fich-page { padding: 1rem 1.5rem 2.5rem; }
@media (max-width: 640px) { .fich-page { padding: 0.75rem 0.75rem 2rem; } }
.fich-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    margin: 0 0 1rem;
}

/* KPIs */
.fich-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.fich-kpi {
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    padding: 1.1rem 1.15rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.15s ease;
}
.fich-kpi:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); }
.fich-kpi-body { min-width: 0; }
.fich-kpi-label {
    font-size: 0.82rem;
    color: var(--color-text-light, #6b7280);
    font-weight: 500;
    margin-bottom: 0.35rem;
}
.fich-kpi-val {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text, #1f2937);
    margin-bottom: 0.3rem;
}
.fich-kpi-sub {
    font-size: 0.75rem;
    color: var(--color-text-light, #9ca3af);
}
.fich-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.fich-kpi-danger  .fich-kpi-icon { background: rgba(239, 68, 68, 0.12);  color: #ef4444; }
.fich-kpi-warning .fich-kpi-icon { background: rgba(245, 158, 11, 0.14); color: #d97706; }
.fich-kpi-purple  .fich-kpi-icon { background: rgba(139, 92, 246, 0.14); color: #8b5cf6; }
.fich-kpi-info    .fich-kpi-icon { background: rgba(59, 130, 246, 0.14); color: #3b82f6; }

/* Toolbar */
.fich-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px 14px 0 0;
    border-bottom: none;
    flex-wrap: wrap;
}
.fich-toolbar-left, .fich-toolbar-right {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.fich-mes {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    font-size: 0.88rem;
    background: var(--color-bg-muted, #f9fafb);
    cursor: pointer;
}
/* Navegador de mes: ‹ [Mes Año] › . Sustituye al <select> de "últimos 12
   meses", que impedía consultar meses futuros. La píldora central abre un
   selector de mes + año (.fich-mespop). */
.fich-mesnav { display: inline-flex; align-items: center; gap: 0.35rem; }
.fich-mesnav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    background: var(--color-bg-muted, #f9fafb);
    color: var(--color-text, #374151);
    font-size: 0.95rem; cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.fich-mesnav-btn:hover { background: var(--color-primary-hover, rgba(2,101,189,0.08)); border-color: var(--color-primary, #00A1FF); color: var(--color-primary, #00A1FF); }
.fich-mesnav-pill {
    min-width: 9.5rem; height: 34px; padding: 0 0.9rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    background: var(--color-bg-muted, #f9fafb);
    color: var(--color-text, #374151);
    font-size: 0.88rem; font-weight: 600; cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.fich-mesnav-pill:hover { background: var(--color-primary-hover, rgba(2,101,189,0.08)); border-color: var(--color-primary, #00A1FF); }
.fich-mespop {
    position: fixed; z-index: 1100;
    width: 232px; padding: 0.6rem;
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}
.fich-mespop-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-bottom: 0.5rem; }
.fich-mespop-head .fich-mesnav-btn { width: 28px; height: 28px; font-size: 0.85rem; }
.fich-mespop-ano { font-size: 0.95rem; font-weight: 700; color: var(--color-text, #374151); }
.fich-mespop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
.fich-mespop-mes {
    padding: 0.42rem 0; border: 1px solid transparent; border-radius: 6px;
    background: var(--color-bg-muted, #f6f7f9);
    color: var(--color-text, #374151);
    font-size: 0.8rem; cursor: pointer;
}
.fich-mespop-mes:hover { background: var(--color-primary-hover, rgba(2,101,189,0.10)); border-color: var(--color-primary, #00A1FF); }
.fich-mespop-mes.activo { background: var(--color-primary, #00A1FF); border-color: var(--color-primary, #00A1FF); color: #fff; font-weight: 700; }
html.dark-mode .fich-mespop, .dark-mode .fich-mespop { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); }

/* Selector de orden de los nombres del panel. */
.fpanel-orden { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 12px; color: var(--color-text-light, #6c757d); margin: 0; }
.fpanel-orden select {
    padding: 0.22rem 0.4rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 6px;
    background: var(--color-bg-muted, #f9fafb);
    color: var(--color-text, #374151);
    font-size: 12px; cursor: pointer;
}

.fich-search {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.fich-search i {
    position: absolute;
    left: 10px;
    color: var(--color-text-light, #9ca3af);
    pointer-events: none;
    font-size: 0.9rem;
}
.fich-search input {
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    font-size: 0.85rem;
    background: var(--color-bg-muted, #f9fafb);
    min-width: 240px;
}
/* ── Buscador con filtros desplegables (Fichajes 30 · Planning 35) ──────────
   Sustituye al buscador colapsable tras una lupa Y al botón "Filtrar" que abría
   un modal. Una sola caja ancha: texto a la izquierda, botón de filtros a la
   derecha y el panel de filtros desplegándose justo debajo. El contador de
   filtros activos cuelga del botón, así que se sabe que hay filtros puestos sin
   abrir nada. `.fich-search` (sin -col) NO se toca: la reutilizan Nóminas,
   Contratos, Ausencias y Vacaciones. */
/* Vive DENTRO del toolbar, a la derecha de la leyenda: como bloque propio a
   todo lo ancho se comía una línea entera de cabecera. Alto ajustado al de
   .fich-btn-ghost (~35px) para que quede a ras con el resto de la barra. */
/* El wrapper NO añade caja propia sobre la barra: es él mismo la caja de 34px,
   en flex y con `align-self: center` explícito. Cuando era un <div> de bloque
   que solo envolvía a la barra, su alto salía del contenido y el conjunto no
   se asentaba en la misma línea que .fich-mesnav-btn / .fich-rango. Ahora el
   buscador es, de caja, idéntico a un botón del navegador de mes. */
.fich-buscador {
    position: relative;
    display: flex; align-items: center; align-self: center;
    flex: 0 0 auto;
    height: 34px;
    box-sizing: border-box;
}
.fich-buscador-bar {
    display: flex; align-items: center; gap: 0.4rem;
    width: 250px; max-width: 100%;
    /* height:100% + border-box → 34px CON el borde incluido, exactamente la
       misma caja que .fich-mesnav-btn. Fijar la altura con paddings dejaba
       siempre un par de píxeles de deriva respecto al resto de la fila. */
    height: 100%; box-sizing: border-box;
    padding: 0 0.2rem 0 0.7rem;
    /* Mismo relleno y mismo radio que .fich-mesnav-btn / .fich-mesnav-pill.
       Con fondo blanco sobre una barra blanca era el único control sin suelo, y
       con radio 999px la única forma redonda de la fila: se leía como si
       flotara más bajo que sus vecinos aun estando alineado al píxel (medido:
       misma caja y misma tinta, desvío 0,00 px). */
    background: var(--color-bg-muted, #f9fafb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fich-buscador-bar:focus-within,
.fich-buscador.abierto .fich-buscador-bar {
    border-color: var(--color-primary, #0265bd);
    box-shadow: 0 0 0 3px rgba(2,101,189,0.12);
}
.fich-buscador-lupa { flex: none; display: flex; font-size: 0.88rem; line-height: 1; color: var(--color-text-light, #9ca3af); }
/* Sin `height:100%` en el input: la barra ya lo centra, y un alto porcentual
   sobre un item flex se resuelve de forma distinta según el navegador — era
   una fuente de deriva vertical gratuita. `line-height` normalizado para que
   el alto del texto no dependa del `normal` de cada fuente. */
.fich-buscador-bar input {
    flex: 1 1 auto; min-width: 0;
    border: 0; background: transparent; padding: 0;
    font-size: 0.85rem; line-height: 1.2; color: var(--color-text, #374151);
}
.fich-buscador-bar input:focus { outline: none; }
.fich-buscador-fbtn {
    position: relative; flex: none;
    width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.82rem;
    background: var(--color-bg-muted, #f3f4f6); color: var(--color-text-light, #6b7280);
}
.fich-buscador-fbtn:hover { background: var(--color-border, #e5e7eb); }
.fich-buscador.abierto .fich-buscador-fbtn { background: var(--color-primary, #0265bd); color: #fff; }
.fich-buscador-fbtn .fich-badge { position: absolute; top: -4px; right: -4px; }
/* Panel desplegable. Es MÁS ANCHO que la caja (que solo mide 250px), así que se
   ancla a su borde izquierdo y crece hacia la derecha con min-width; el tope de
   viewport evita que se salga en pantallas estrechas.
   z-index 30 = por encima de la cabecera sticky del panel (6) y de la columna
   de nombres (5), que si no lo tapaban. */
.fich-buscador-panel {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
    /* 620px: con 430 los nombres largos de centro ("Centro de trabajo de
       Esquio 2.0") partían en dos líneas y las listas quedaban apretadas.
       Si a ese ancho el panel se saliera por la derecha, fichAbrirFiltros()
       lo desplaza (el anclaje CSS por sí solo no puede saberlo). */
    min-width: min(620px, calc(100vw - 2rem));
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(15,23,42,0.16);
    padding: 0.35rem 1.15rem 1rem;
}
.fich-buscador-panel[hidden] { display: none; }
/* Fila de filtro: etiqueta a la izquierda, control a la derecha, con hairline
   de separación (la última hace de línea sobre los botones). */
.fich-frow {
    display: grid; grid-template-columns: 170px minmax(0, 1fr);
    align-items: center; gap: 1.25rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--color-border, #eef0f3);
}
.fich-frow > label {
    margin: 0; display: flex; flex-direction: column; gap: 2px;
    font-size: 0.85rem; color: var(--color-text-light, #6b7280);
}
.fich-fctl { min-width: 0; }
/* Estado en Planning: el backend fuerza estado='all', así que el control no
   pinta nada. Se oculta pero se deja en el DOM para que fichAplicarFiltros()
   siga leyendo sus checkboxes sin ramificar por vista. */
.fich-frow-oculta { display: none; }
/* Dentro del panel las listas de checkboxes van más bajas: con cuatro filas a
   190px el desplegable ocupaba casi toda la pantalla. */
.fich-buscador-panel .fich-chk-list { max-height: 150px; }
.fich-buscador-acciones {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 1rem; padding-top: 0.9rem;
}
.fich-flink {
    background: transparent; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-size: 0.85rem; color: var(--color-text-light, #6b7280);
}
.fich-flink:hover { color: var(--color-text, #374151); text-decoration: underline; }
@media (max-width: 640px) {
    .fich-frow { grid-template-columns: 1fr; gap: 0.35rem; align-items: start; }
}
html.dark-mode .fich-buscador-bar, .dark-mode .fich-buscador-bar,
html.dark-mode .fich-buscador-panel, .dark-mode .fich-buscador-panel {
    background: var(--color-card-bg); border-color: rgba(255,255,255,0.1);
}
html.dark-mode .fich-buscador-bar input, .dark-mode .fich-buscador-bar input { color: var(--color-text); }
html.dark-mode .fich-frow, .dark-mode .fich-frow { border-bottom-color: rgba(255,255,255,0.07); }
html.dark-mode .fich-buscador-fbtn, .dark-mode .fich-buscador-fbtn { background: rgba(255,255,255,0.07); }
html.dark-mode .fich-buscador-fbtn:hover, .dark-mode .fich-buscador-fbtn:hover { background: rgba(255,255,255,0.13); }
/* Menú "⋯" (más acciones) del toolbar */
.fich-more { position: relative; }
.fich-more-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 172px;
    background: var(--color-card-bg, #fff); border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 11px; box-shadow: 0 12px 30px rgba(15,23,42,0.18); padding: 6px; }
.fich-more-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    font: inherit; font-size: 0.85rem; color: var(--color-text, #374151); background: transparent;
    border: 0; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.fich-more-item:hover { background: var(--color-bg-muted, #f3f4f6); }
html.dark-mode .fich-more-menu, .dark-mode .fich-more-menu { background: var(--color-card-bg); border-color: rgba(255,255,255,0.1); }
html.dark-mode .fich-more-item:hover, .dark-mode .fich-more-item:hover { background: rgba(255,255,255,0.06); }
.fich-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    background: transparent;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    color: var(--color-text, #1f2937);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease;
}
.fich-btn-ghost:hover { background: var(--color-bg-muted, #f3f4f6); }
/* En el toolbar de Fichajes/Planning el ghost por defecto sale 36px de alto y
   desalinea la fila, que va toda a 34px (ver la nota de alturas en
   docs/spec-fichajes.md). */
.fich-toolbar .fich-btn-ghost { height: 34px; padding-top: 0; padding-bottom: 0; }
.fich-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--color-primary, #0265bd), var(--color-primary-dark, #0c1749));
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(2, 101, 189, 0.24);
}
.fich-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.fich-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary, #0265bd);
    color: #fff;
    border-radius: 10px;
    padding: 0 6px;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    margin-left: 0.25rem;
}
.fich-view-toggle {
    display: inline-flex;
    background: var(--color-bg-muted, #f3f4f6);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.fich-view-btn {
    padding: 0.4rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--color-text-light, #6b7280);
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.fich-view-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.fich-view-btn-active { background: var(--color-card-bg, #fff); color: var(--color-primary, #0265bd); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

/* Tabla */
.fich-tabla-wrap {
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 0 0 14px 14px;
    overflow-x: auto;
}
.fich-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.87rem;
}
.fich-tabla thead th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-light, #6b7280);
    background: var(--color-bg-muted, #f9fafb);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.fich-tabla tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--color-border, #f3f4f6);
    vertical-align: middle;
}
.fich-tabla tbody tr:hover td { background: rgba(59, 130, 246, 0.03); }
.fich-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-text-light, #9ca3af);
    font-style: italic;
}
.fich-chevron {
    background: transparent;
    border: none;
    color: var(--color-text-light, #6b7280);
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 6px;
    transition: background 0.15s ease;
    font-size: 0.9rem;
}
.fich-chevron:hover { background: var(--color-bg-muted, #f3f4f6); color: var(--color-primary, #0265bd); }
.fich-fila-expandida .fich-chevron { color: var(--color-primary, #0265bd); }
.fich-empleado { display: flex; align-items: center; gap: 0.65rem; }
.fich-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.fich-empleado-info { min-width: 0; }
.fich-empleado-nombre {
    font-weight: 600;
    color: var(--color-text, #1f2937);
    line-height: 1.2;
}
.fich-empleado-centro {
    font-size: 0.75rem;
    color: var(--color-text-light, #9ca3af);
    margin-top: 0.1rem;
}
.fich-fecha { font-weight: 500; color: var(--color-text, #1f2937); }
.fich-fecha-dia {
    font-size: 0.72rem;
    color: var(--color-text-light, #9ca3af);
    margin-top: 0.1rem;
}
.fich-hora { font-weight: 600; color: var(--color-text, #1f2937); font-variant-numeric: tabular-nums; }
.fich-pausas, .fich-neto { color: var(--color-text-light, #6b7280); font-variant-numeric: tabular-nums; }
.fich-neto { font-weight: 600; color: var(--color-text, #1f2937); }
.fich-ubi { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--color-text, #1f2937); }
.fich-ubi i { color: var(--color-text-light, #9ca3af); }
.fich-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.fich-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.fich-pill-ok     { background: rgba(16, 185, 129, 0.12); color: #059669; }
.fich-pill-warn   { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.fich-pill-purple { background: rgba(139, 92, 246, 0.14); color: #7c3aed; }
.fich-pill-danger { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.fich-pill-amber  { background: rgba(217, 165, 52, 0.20); color: #9a6a0d; }
.fich-pill-info   { background: rgba(59, 130, 246, 0.14); color: #2563eb; }
.fich-pill-teal   { background: rgba(20, 184, 166, 0.16); color: #0d9488; }
/* ── Detalle del día ───────────────────────────────────────────────────────
   Una sola columna: título de sección, badge de estado, lista de tramos y una
   franja de auditoría al pie. Antes eran dos tarjetas ("Eventos del día" y
   "Auditoría") en rejilla, y la de auditoría ocupaba media pantalla para una
   línea de texto. */
.fich-dia { display: flex; flex-direction: column; }
.fich-dia-sec-tit { font-size: 0.72rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--color-text-light, #9aa3ad); margin-bottom: 0.55rem; }
.fich-dia-sec-tit-2 { margin-top: 1.15rem; }
/* "Detalles": el porqué de la incidencia, en viñetas y en lenguaje natural.
   Solo se pinta cuando hay algo que contar — un día normal no gasta ni una
   línea. Sustituye a la franja "Estado de la jornada", que repetía el estado
   que ahora lleva el icono de la cabecera. */
.fich-dia-detalles { margin: 0 0 0.2rem; padding-left: 1.05rem; }
.fich-dia-detalles li { font-size: 0.84rem; color: var(--color-text-light, #6b7280); margin-bottom: 0.15rem; }
.fich-dia-detalles b { color: var(--color-text, #374151); font-weight: 700; }
/* Icono de estado en la cabecera: el color lo pone _fichDiaPintarIcono(). */
.fich-dia-modal .fich-modal-header h5 > .bi { font-size: 1.15rem; }
/* Cabecera del modal a dos líneas: nombre y fecha larga. */
.fich-dia-head { display: inline-flex; flex-direction: column; gap: 1px; min-width: 0; }
.fich-dia-fecha { font-size: 0.78rem; font-weight: 400; text-transform: none;
    letter-spacing: 0; color: var(--color-text-light, #6b7280); }
.fich-dia-acciones { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
/* Bloque de vacación/solicitud dentro del modal de detalle (medidor + datos). */
.fich-dia-vac { display: flex; align-items: center; gap: 1rem; margin: 0.25rem 0 0.4rem; }
.fich-dia-vac-gauge { flex: none; }
.fich-dia-vac-info { min-width: 0; display: flex; flex-direction: column; gap: 0.35rem;
    font-size: 0.88rem; color: var(--color-text-light, #6b7280); }
.fich-dia-vac-row .k { color: var(--color-text-light, #6b7280); margin-right: 0.25rem; }
.fich-dia-vac-row b { color: var(--color-text, #374151); }
/* Aprobar (verde) / Denegar (rojo) reutilizan los botones de acción del modal. */
.fich-btn-cerrar-jornada.fich-dia-aprobar { background: #16a34a; box-shadow: 0 2px 8px rgba(22,163,74,0.28); }
.fich-btn-cerrar-jornada.fich-dia-aprobar:hover { box-shadow: 0 4px 12px rgba(22,163,74,0.36); }
.fich-btn-alta.fich-dia-denegar { color: #dc2626; }
.fich-btn-alta.fich-dia-denegar:hover { background: rgba(220,38,38,0.10); border-color: #dc2626; }

/* Tramos: eventos de una línea de tiempo, SIN tarjeta propia (el fichaje debe
   leerse como un evento, no como una caja). Solo la ausencia lleva fondo,
   porque es la que reclama una decisión. */
/* Cada registro es UNA línea: "Fichaje · 07:59 → 12:48 · 04h 49m", con el
   centro en una segunda línea si lo hay. Sin tarjetas ni columnas: la duración
   pegada al extremo derecho obligaba a saltar la vista de un lado a otro. */
/* (Las clases .fich-tramo* de la lista plana se retiraron: todo el detalle del
   día se dibuja ya con la línea de tiempo .fich-tl*. Sobrevive .fich-tramo-btn,
   que es el botón de acción de un tramo.) */
/* ── Línea de tiempo de los fichajes ───────────────────────────────────────
   Un raíl continuo a la izquierda con las HORAS en su eje. Cada tramo se dibuja
   ENTRE dos marcas, así que la hora de fin de uno es la de inicio del siguiente
   y no se repite. Con 11 registros, la lista anterior —cada fila cargando
   "07:58 → 13:30" más su duración— era imposible de seguir.
   Rejilla de 3 columnas: hora · raíl · descripción. */
.fich-tl { list-style: none; margin: 0.2rem 0 0; padding: 0; }
.fich-tl > li { display: grid; grid-template-columns: 48px 18px minmax(0, 1fr);
    align-items: center; column-gap: 0.5rem; }
/* La línea la dibuja la columna del medio, continua en TODAS las filas: así no
   hay que empalmar segmentos ni cuadrar alturas. */
.fich-tl-rail { position: relative; align-self: stretch; }
.fich-tl-rail::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
    width: 2px; transform: translateX(-50%); background: var(--color-border, #e5e7eb);
}
.fich-tl > li:first-child .fich-tl-rail::before { top: 50%; }
.fich-tl > li:last-child  .fich-tl-rail::before { bottom: 50%; }
/* Marca de hora: punto sobre el raíl. */
.fich-tl-p { min-height: 22px; }
.fich-tl-p .fich-tl-rail::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%);
    background: var(--color-card-bg, #fff); border: 2px solid #3f9d5f;
}
.fich-tl-p.pausa .fich-tl-rail::after { border-color: #b45309; }
.fich-tl-p.aus.just .fich-tl-rail::after { border-color: #14b8a6; }
.fich-tl-p.aus.nj   .fich-tl-rail::after { border-color: #f97316; }
/* CAMBIO de tipo: la marca separa dos tramos distintos (p. ej. fin del fichaje e
   inicio de una ausencia). Se dibuja más grande y con un halo, para que se lea
   como una frontera y no como un punto más del eje — sin esto, el fichaje y la
   ausencia parecían un único bloque continuo. */
.fich-tl-p.cambio .fich-tl-rail::after {
    width: 13px; height: 13px; border-width: 3px;
    box-shadow: 0 0 0 3px var(--color-card-bg, #fff);
}
.fich-tl-p.cambio .fich-tl-h { font-weight: 700; }
.fich-tl-h { font-size: 0.9rem; font-weight: 600; text-align: right;
    font-variant-numeric: tabular-nums; color: var(--color-text, #374151); }
/* La hora es el punto de edición: sin lápices sueltos por la lista. */
.fich-tl-h-ed { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit;
    font-weight: 600; text-align: right; color: var(--color-text, #374151);
    border-bottom: 1px dotted var(--color-border, #c7cdd4); }
.fich-tl-h-ed:hover { color: var(--color-primary, #00A1FF); border-bottom-color: var(--color-primary, #00A1FF); }
.fich-tl-p-abierta .fich-tl-h { color: var(--color-text-light, #9aa3ad); }
/* Fecha de un cierre en OTRO día: línea pequeña encima de la hora, en la misma
   columna de 48px, para que no parta con el "·" suelto ni pegue un salto. */
.fich-tl-h-dia2 { display: block; font-size: 0.6rem; font-weight: 600; line-height: 1.05;
    letter-spacing: 0.2px; color: var(--color-text-light, #9aa3ad); }
.fich-tl-nota { font-size: 0.8rem; font-style: italic; color: var(--color-text-light, #9aa3ad); }
/* Tramo: qué pasó entre dos marcas. */
.fich-tl-s { min-height: 34px; }
.fich-tl-s .fich-tl-body { display: flex; align-items: center; gap: 0.15rem 0.55rem;
    font-size: 0.86rem; padding: 0.25rem 0; }
/* Dos líneas: titular (qué es) y debajo los datos (cuánto, dónde, estado). */
.fich-tl-txt { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.fich-tl-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.5rem;
    font-size: 0.78rem; color: var(--color-text-light, #9aa3ad); }
/* Separador entre datos, para que no parezcan una frase corrida. */
.fich-tl-meta > span + span::before { content: "·"; margin-right: 0.5rem; opacity: .6; }
/* El color del raíl dice de qué es el tramo: verde trabajado, gris pausa y el
   color del estado en las ausencias. Es la misma clave que la leyenda del panel. */
.fich-tl-s.trabajo   .fich-tl-rail::before { background: #3f9d5f; }
.fich-tl-s.pausa     .fich-tl-rail::before { background: #b45309; }
.fich-tl-s.aus.just  .fich-tl-rail::before { background: #14b8a6; }
.fich-tl-s.aus.nj    .fich-tl-rail::before { background: #f97316; }
.fich-tl-tit { font-weight: 700; color: var(--color-text, #374151); }
.fich-tl-s.pausa .fich-tl-tit { font-weight: 600; color: #b45309; }
.fich-tl-s.pausa .fich-tl-tit i { margin-right: 0.15rem; }
/* Café más claro en oscuro para que el raíl/punto/título de la pausa contrasten */
html.dark-mode .fich-tl-s.pausa .fich-tl-rail::before,
.dark-mode .fich-tl-s.pausa .fich-tl-rail::before { background: #f59e0b; }
html.dark-mode .fich-tl-s.pausa .fich-tl-tit,
.dark-mode .fich-tl-s.pausa .fich-tl-tit { color: #f59e0b; }
html.dark-mode .fich-tl-p.pausa .fich-tl-rail::after,
.dark-mode .fich-tl-p.pausa .fich-tl-rail::after { border-color: #f59e0b; }
.fich-tl-dur { font-variant-numeric: tabular-nums; color: var(--color-text-light, #6b7280); }
.fich-tl-centro { font-size: 0.78rem; color: var(--color-text-light, #9aa3ad); }
.fich-tl-meta .fich-tl-dur, .fich-tl-meta .fich-tl-centro { font-size: inherit; color: inherit; }
/* Estado de la ausencia: el color del raíl ya lo dice, así que el texto va en
   pequeño y como matiz — lo que importa es el TIPO (baja, cita médica…). */
.fich-tl-estado { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .04em;
    font-weight: 700; }
.fich-tl-s.aus.just .fich-tl-estado { color: #0d9488; }
.fich-tl-s.aus.nj   .fich-tl-estado { color: #f97316; }
/* Acciones del tramo (editar / clip / justificar), empujadas a la derecha. */
.fich-tl-acc { margin-left: auto; display: flex; align-items: center; gap: 0.35rem; flex: none; }
/* Ausencia de DÍA COMPLETO: no tiene punto en el eje, así que su raíl no se
   dibuja y la columna de la hora lleva el rango en texto. */
.fich-tl-sinrail .fich-tl-rail::before, .fich-tl-s.sinrail .fich-tl-rail::before { display: none; }
.fich-tl-h-dia { font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .03em; color: var(--color-text-light, #9aa3ad); }
html.dark-mode .fich-tl-p .fich-tl-rail::after, .dark-mode .fich-tl-p .fich-tl-rail::after {
    background: var(--color-card-bg);
}

/* Botón de acción de un tramo: "Editar" en el fichaje, "Justificar" / "Quitar"
   en la ausencia. Van a la derecha de su línea (.fich-tl-acc). */
.fich-tramo-btn {
    display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap;
    padding: 0.26rem 0.6rem; border-radius: 7px; cursor: pointer;
    border: 1px solid var(--color-border, #e5e7eb); background: var(--color-card-bg, #fff);
    color: var(--color-text-light, #6b7280); font-size: 0.76rem; font-weight: 600;
    transition: border-color .12s ease, color .12s ease;
}
.fich-tramo-btn:hover { border-color: var(--color-primary, #00A1FF); color: var(--color-primary, #00A1FF); }
.fich-tramo-btn-ok { border-color: rgba(20,184,166,0.5); color: #0d9488; }
.fich-tramo-btn-ok:hover { border-color: #0d9488; color: #0d9488; background: rgba(20,184,166,0.08); }
/* Aprobar / Denegar de una solicitud de vacaciones (a la derecha de su registro) */
.fich-tramo-btn-ap { border-color: rgba(20,184,166,0.5); color: #0d9488; }
.fich-tramo-btn-ap:hover { border-color: #0d9488; color: #0d9488; background: rgba(20,184,166,0.08); }
.fich-tramo-btn-no { border-color: rgba(239,68,68,0.5); color: #dc2626; }
.fich-tramo-btn-no:hover { border-color: #dc2626; color: #dc2626; background: rgba(239,68,68,0.08); }

/* Bolita del registro de vacaciones (la línea es "sinrail", así que la ponemos a mano) */
.fich-tl-s.vac .fich-tl-rail { position: relative; }
.fich-tl-dot {
    display: block; width: 11px; height: 11px; border-radius: 50%;
    margin: 0.28rem auto 0; box-shadow: 0 0 0 3px rgba(0,161,255,0.16);
}
.fich-tl-s.vac .fich-tl-dot { background: #00A1FF; box-shadow: 0 0 0 3px rgba(0,161,255,0.16); }
.fich-tl-s.vac.pend .fich-tl-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }

/* Medidor de bolsa, centrado, arriba del detalle de una solicitud */
.fich-dia-solgauge { display: flex; justify-content: center; padding: 0.2rem 0 0.6rem; }
html.dark-mode .fich-tramo-btn, .dark-mode .fich-tramo-btn {
    background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12);
}
/* (Los chips .fich-tramo-adj se sustituyeron por el CLIP genérico del portal:
   icono + contador y desplegable con la lista, igual que en Ausencias. Y el
   botón de justificar dejó de ir en una línea propia: es .fich-tramo-btn a la
   derecha de la fila, como el de editar.) */
/* El clip dentro de la fila comparte alto con los botones de acción. */
.fich-tl-acc .clip-archivos-btn { position: relative; }

/* Auditoría: una franja al pie, no una columna. */
.fich-dia-audit { margin-top: 1.1rem; padding-top: 0.8rem;
    border-top: 1px solid var(--color-border, #eef0f3);
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.6rem;
    font-size: 0.78rem; color: var(--color-text-light, #6b7280); }
.fich-dia-audit-tit { font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    font-size: 0.68rem; color: var(--color-text-light, #9aa3ad); }
.fich-dia-audit-mas { border: 0; background: transparent; padding: 0; cursor: pointer;
    font: inherit; color: var(--color-primary, #00A1FF); text-decoration: underline; }
.fich-dia-audit-log { flex: 1 1 100%; margin: 0.4rem 0 0; padding: 0.5rem 0.6rem;
    background: var(--color-bg-muted, #f9fafb); border-radius: 8px;
    font-size: 0.72rem; white-space: pre-wrap; }
html.dark-mode .fich-dia-audit-log, .dark-mode .fich-dia-audit-log {
    background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: var(--color-text);
}

/* (El bloque .fich-ausblock / .fich-ausrow* se retiró con el rediseño del
   detalle del día: la ausencia es ahora un .fich-tramo más.) */

/* ===== Vista PANEL (heatmap mes × empleado) ===== */
/* (El toggle Lista/Panel se retiró al separar Fichajes (30) y Planning (35) en
   dos pantallas con entrada propia en el menú lateral.) */
/* Selector de rango Semana / Mes / Año (mismo lenguaje que el toggle de vista). */
/* Caja de 34px ENTERA (border-box), igual que .fich-mesnav-btn. Antes componía
   la altura como 32px de botón + 2px de borde: a zoom ≥125% esa suma redondea
   distinto que una caja de 34px de una pieza y el grupo se desviaba 0,5px del
   resto de la fila. */
.fich-rango { display: inline-flex; align-items: stretch; height: 34px; box-sizing: border-box;
    border: 1px solid var(--color-border, #dee2e6); border-radius: 8px; overflow: hidden; margin-right: 0.5rem; }
.fich-rango-btn { background: var(--color-bg, #fff); border: none; height: 100%; padding: 0 0.7rem; font-size: 0.82rem; color: var(--color-text-light, #6c757d); cursor: pointer; }
.fich-rango-btn + .fich-rango-btn { border-left: 1px solid var(--color-border, #dee2e6); }
.fich-rango-btn.activo { background: #3b82f6; color: #fff; }
.fich-rango-btn:disabled { opacity: 0.45; cursor: not-allowed; }
html.dark-mode .fich-rango-btn, .dark-mode .fich-rango-btn { background: var(--color-card-bg); }
html.dark-mode .fich-rango-btn.activo, .dark-mode .fich-rango-btn.activo { background: #3b82f6; color: #fff; }

/* El panel se conecta con la toolbar (que tiene el borde inferior abierto),
   igual que la lista: mismo borde, sin borde superior y redondeo inferior. */
#fichVistaPanel,
#vacVistaPanel {
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-top: none;
    border-radius: 0 0 14px 14px;
    padding: 0.85rem 1rem 1rem;
}
.fpanel-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; margin: 0 0 10px; }
/* Panel de FICHAJES (Opción B): la leyenda vive INLINE en el toolbar; esta barra
   solo lleva el contador de empleados a la derecha, en una línea fina sobre la
   rejilla. */
.fpanel-bar-fich { display: flex; align-items: center; justify-content: flex-end;
    gap: 8px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border, #eceff2); }
/* (El popover de leyenda —.fpleg-pop / -toggle / -caret / -menu— se retiró: la
   leyenda dejó de ser un desplegable del toolbar y vive fija en .fpanel-pie.
   .fpleg-item sigue en uso, ahí abajo. .fpleg-nota se retiró con el ítem
   "Sin turno / futuro".) */
/* Pie del panel: leyenda a la izquierda, aviso de interacción a la derecha. */
.fpanel-pie {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 6px 18px; margin-top: 10px;
}
/* Navegación de mes del panel de Vacaciones (prev / etiqueta / next). */
.fpanel-nav { display: inline-flex; align-items: center; gap: 8px; }
.fpanel-mes-label { font-size: 0.95rem; font-weight: 600; color: var(--color-text, #374151); min-width: 8.5rem; text-align: center; }
.fpanel-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--color-text-light, #6c757d); }
.fpanel-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fpanel-range { font-size: 12.5px; color: var(--color-text-light, #6c757d); }
.fq { width: 12px; height: 12px; border-radius: 3px; background: var(--color-border, #e5e7eb); display: inline-block; flex: none; }
.fq-ok  { background: #3f9d5f; }
.fq-cur { background: #8fcfa4; }
.fq-mid { background: #d9a534; }
.fq-bad { background: #cd4b3a; }
.fq-vac { background: #3b82f6; }
/* Solicitud de vacaciones: el MISMO azul que las aprobadas pero desaturado, para
   que se lea como "vacaciones, todavía no firmes" y no como un estado ajeno. */
.fq-vacp{ background: #93c5fd; }
.fq-aus { background: #14b8a6; }
/* #6: leyenda como filtro — ítems clicables + atenuado de lo no seleccionado. */
.fpleg-item { cursor: pointer; user-select: none; padding: 1px 5px; border-radius: 5px; }
.fpleg-item:hover { background: var(--color-primary-hover, rgba(2,101,189,0.08)); }
.fpleg-item.active { background: var(--color-primary-hover, rgba(2,101,189,0.16)); font-weight: 700; }
#fpanelBody.fp-filtering .fpcell[data-c] { opacity: 0.14; transition: opacity 0.12s ease; }
#fpanelBody.fp-hl-ok  .fpcell.lv-ok,
#fpanelBody.fp-hl-cur .fpcell.lv-cur,
#fpanelBody.fp-hl-mid .fpcell.lv-mid,
#fpanelBody.fp-hl-bad .fpcell.lv-bad,
#fpanelBody.fp-hl-vac .fpcell.lv-vac,
#fpanelBody.fp-hl-vacp .fpcell.lv-vacp,
#fpanelBody.fp-hl-aus .fpcell.lv-aus,
#fpanelBody.fp-hl-anj .fpcell.lv-anj { opacity: 1; }

/* El panel scrollea POR DENTRO, no arrastrando la página. Sin esto la cabecera
   sticky no servía de nada: overflow-x:auto ya convierte a .fpanel-wrap en el
   contenedor de scroll de referencia para position:sticky, pero como nunca
   desbordaba en vertical, al scrollear la ventana el bloque de cabeceras se
   iba con todo y acababa escondido bajo la barra de la app.
   Ventaja añadida: los contadores de arriba y el toolbar quedan siempre a la
   vista mientras se recorre la lista de empleados. */
.fpanel-wrap {
    overflow: auto;
    max-height: calc(100vh - 330px);
    min-height: 320px;
    overscroll-behavior: contain;   /* al llegar al final no arrastra la página */
}
#fpanelBody { min-width: max-content; }
/* Fila del panel: bloque de información (nombre + métricas) + rejilla de días.
   El bloque va en un único contenedor sticky para que las 5 columnas se queden
   fijas al hacer scroll horizontal sin tener que calcular un `left` por cada una. */
/* nombre + trabaj. + planificado + dif. · rejilla · resto de columnas.
   La ecuación (hecho − planificado = diferencia) va con el nombre porque es lo
   que se lee siempre; lo que la explica —ausencias y vacaciones— queda al otro
   lado de la rejilla. */
/* El track del panel va a `max-content`, NO a `1fr`: con `1fr` se quedaba todo
   el espacio sobrante de la fila y empujaba el bloque derecho contra el borde
   de la pantalla, dejando un vacío enorme entre el último día del mes y las
   columnas. Con `max-content` mide justo lo que ocupan los cubos y las columnas
   arrancan pegadas al panel; `justify-content: start` empaqueta la fila a la
   izquierda en vez de repartir el sobrante. */
.fprow { display: grid;
    grid-template-columns: var(--fp-info-w, 454px) var(--fp-mid, max-content) var(--fp-met-w, 268px);
    justify-content: start;
    align-items: center; gap: 0; margin-bottom: 3px; }
/* EXCEPCIÓN — vista AÑO: ahí los 12 cubos-mes usan `flex: 1 1 0` para repartirse
   el ancho disponible (ver el bloque .fp-ano más abajo), así que su aportación a
   `max-content` es CERO y el track se colapsaba a nada. En año el track vuelve a
   ser `1fr`, que es lo que esos cubos necesitan para repartirse.
   La variable se usa en TODOS los tramos responsive; si se añade uno nuevo, debe
   escribir `var(--fp-mid, …)` y no un valor fijo. */
#fpanelBody.fp-ano { --fp-mid: 1fr; }
/* (La columna de resumen anual —.fpsummary / .fpsum-* / .fpano-*— se retiró
   junto con su petición en segundo plano. Ver docs/spec-fichajes.md §18.) */
/* Bloque IZQUIERDO: nombre · trabaj. · planificado · balance
   (256+56+80+62 = 454, que es --fp-info-w). "PLANIFICADO" y "BALANCE" son
   palabras sueltas que no pueden partirse, así que sus columnas tienen que
   caberlas enteras + los 8px de canalón.
   El nombre son 256px porque el más largo del roster pide 218px de texto más
   34 de estructura (lápiz 20 + hueco 6 + canalón 8). Medido, no estimado: con
   los 200px anteriores se truncaban 4 de 20 nombres. El ellipsis sigue como red
   de seguridad para roster con nombres aún más largos. */
.fpinfo {
    position: sticky; left: 0; z-index: 5;
    display: grid; grid-template-columns: var(--fp-nom-w, 256px) 56px 80px 62px;
    align-items: center; min-width: 0;
    background: var(--color-card-bg, #fff);
    border-right: 1px solid var(--color-border, #e5e7eb);
    box-shadow: -16px 0 0 var(--color-card-bg, #fff);
}
/* Bloque DERECHO: a. just. · a. n. just. · h. vac. · solic. vac.
   (62+72+58+76 = 268, que es --fp-met-w). Sticky por el mismo motivo que el
   nombre: si la rejilla desborda, no deben irse de pantalla. */
.fpmet {
    position: sticky; right: 0; z-index: 5;
    display: grid; grid-template-columns: 62px 72px 58px 76px;
    align-items: center; min-width: 0;
    background: var(--color-card-bg, #fff);
    border-left: 1px solid var(--color-border, #e5e7eb);
    box-shadow: 16px 0 0 var(--color-card-bg, #fff);
}
html.dark-mode .fpinfo, .dark-mode .fpinfo {
    background: var(--color-card-bg); border-right-color: rgba(255,255,255,0.08);
    box-shadow: -16px 0 0 var(--color-card-bg);
}
html.dark-mode .fpmet, .dark-mode .fpmet {
    background: var(--color-card-bg); border-left-color: rgba(255,255,255,0.08);
    box-shadow: 16px 0 0 var(--color-card-bg);
}
/* Métricas: número a la derecha, como en una tabla de importes. */
.fpm { text-align: right; padding-right: 10px; font-size: 12px; font-variant-numeric: tabular-nums;
    color: var(--color-text, #374151); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fpm-suave { color: var(--color-text-light, #6b7280); }
.fpm-neg   { color: #cd4b3a; font-weight: 700; }
/* Solo la ausencia NO justificada se colorea (naranja, como su celda en la
   rejilla): es la que resta en la diferencia. La justificada va en negro
   normal — es un dato informativo y en teal competía por la atención. */
.fpm-anj   { color: #f97316; font-weight: 700; }
/* Solicitudes pendientes: azul legible (el #93c5fd del cubo no tiene contraste
   suficiente como texto). Es un aviso suave — hay algo que resolver — sin el
   peso en negrita de la ausencia no justificada, que sí resta horas. */
.fpm-vacp  { color: #2563eb; }
html.dark-mode .fpm-vacp, .dark-mode .fpm-vacp { color: #93c5fd; }
.fpm-pos   { color: #3f9d5f; font-weight: 700; }
.fpm-nulo  { color: var(--color-border, #c7cdd4); }
.fpm[title] { cursor: help; }
/* Bloque de cabeceras (nombres de columna + eje de meses + eje de días) PEGADO
   arriba al scrollear: con 23 filas, al bajar se perdía de vista qué columna
   era cuál y qué día era cada cubo, y había que subir a mirar.
   top:0 y NO --nav-h: quien scrollea es .fpanel-wrap (overflow:auto), así que
   el sticky se ancla a ESE contenedor, no al viewport. Descontar la altura de
   la barra de la app dejaba una banda blanca de 60px dentro del panel. */
.fpanel-cab {
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--color-card-bg, #fff);
    box-shadow: 0 1px 0 var(--color-border, #e5e7eb);
}
html.dark-mode .fpanel-cab, .dark-mode .fpanel-cab {
    background: var(--color-card-bg); box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}
/* La cabecera es UNA sola fila: nombres de columna · eje (mes sobre día) · año.
   `align-items: end` pega el bloque de nombres al fondo, de modo que terminan a
   la altura de los números de día, justo encima de los datos que nombran. */
.fprow-head { margin-bottom: 6px; align-items: end; }
/* Los dos ejes apilados ocupan la MISMA celda de rejilla que .fpcells en las
   filas de datos, así que heredan su ancho y su padding y los cuadraditos
   siguen cuadrando columna a columna. */
.fpaxis { min-width: 0; }
/* Etiquetas alineadas ABAJO. "Aus. just." y "Diferencia total" ocupan dos
   líneas y el resto una, así que centradas quedaban a alturas distintas y la
   vista tenía que ir arriba y abajo. Alineadas por abajo, todas terminan en la
   misma línea, justo encima de los datos que nombran. */
.fprow-head .fpinfo,
.fprow-head .fpmet { align-items: end; }
/* Las cabeceras SALTAN DE LÍNEA en vez de recortarse: con etiquetas largas
   ("Diferencia total", "Aus. just.") el ellipsis dejaba "DIFERENCIA TO…", y
   ensanchar las columnas para que cupieran en una línea se comía la rejilla. */
/* Sin letter-spacing y a 10px: cada 0.02em de más en "SOLICITUDES" obligaba a
   ensanchar la columna, y el bloque de la izquierda ya se come 668px.
   `overflow-wrap: anywhere` es el CORTAFUEGOS: si una palabra no cabe (fuente
   distinta, zoom del navegador, un idioma más largo), se parte en la línea
   siguiente en vez de desbordar y pisar la cabecera vecina. Sin él, `overflow:
   hidden` recortaba por la izquierda y las etiquetas se leían pegadas. */
/* UNA sola línea: las etiquetas se abreviaron para que quepan ("Diferencia" →
   "Dif.", "Vacaciones" → "H. vac.", "Solicitudes" → "Solic. vac.") y el nombre
   completo vive en la tarjeta flotante. El ellipsis es el cortafuegos por si
   con otra fuente o zoom alguna se pasa: recorta con "…" en vez de saltar de
   línea y descuadrar la altura de las columnas. */
.fph { text-align: right; padding-right: 8px; font-size: 10px; font-weight: 700;
    letter-spacing: 0; text-transform: uppercase; color: var(--color-text-light, #9aa3ad);
    white-space: nowrap; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; }
.fph-nom { text-align: left; padding-right: 8px; }
.fph[data-tip] { cursor: help; }
/* Cabeceras ordenables: pulsar ordena por la columna. */
.fph.fph-sort { cursor: pointer; user-select: none; }
.fph.fph-sort:hover { color: var(--color-text, #374151); }
.fph.fph-active { color: var(--color-primary, #00A1FF); }
.fph-caret { font-size: 8px; margin-left: 2px; }
/* (El plegado de columnas —.fpcols-toggle / .fp-cols-min— se retiró: ahora el
   reparto izquierda/derecha es fijo. Ver docs/spec-fichajes.md §18.) */
/* En anchos intermedios el bloque derecho aprieta la rejilla: se oculta y la
   fila pasa a 2 columnas (nombre + ecuación · rejilla). */
@media (max-width: 1450px) {
    .fprow  { grid-template-columns: var(--fp-info-w, 454px) var(--fp-mid, max-content); }
    .fpmet, .fprow-head .fpmet { display: none; }
}
/* En estrecho no caben tampoco las métricas de la izquierda: solo el nombre y
   la rejilla, que ya scrollea. */
@media (max-width: 1050px) {
    .fprow  { grid-template-columns: 170px var(--fp-mid, max-content); }
    .fpinfo { grid-template-columns: 170px; }
    .fpm, .fph:not(.fph-nom) { display: none; }
}
/* Nombres alineados a la IZQUIERDA: pegados a la rejilla (como estaban, en
   text-align:right) costaba seguir la fila y leer la lista de un vistazo.
   El sticky vive ahora en .fpinfo, que envuelve nombre + métricas. */
.fplabel { font-size: 12.5px; font-weight: 600; text-align: left; color: var(--color-text, #374151);
    display: flex; align-items: center; gap: 6px; min-width: 0;
    padding: 2px 8px 2px 0; white-space: nowrap; overflow: hidden; }
.fplabel[title] { cursor: help; }
.fplabel-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Lápiz "ver / editar ficha": oculto hasta pasar el ratón por la fila, para no
   ensuciar la columna de nombres. El nombre no es clicable a propósito, así no
   se abre la ficha sin querer. En táctil (sin hover) va siempre visible. */
.fplabel-edit { margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent;
    color: var(--color-text-light, #9aa3ad); font-size: 12px; cursor: pointer; opacity: 0;
    transition: opacity .12s ease, color .12s ease, background .12s ease; }
.fprow:hover .fplabel-edit, .fplabel-edit:focus-visible { opacity: 1; }
.fplabel-edit:hover { color: var(--color-primary, #00A1FF); background: var(--color-primary-hover, rgba(2,101,189,0.10)); }
@media (hover: none) { .fplabel-edit { opacity: 1; } }
/* Interruptor GLOBAL "detalle en barras", junto al contador de empleados.
   Antes había uno por fila (.fplabel-det, retirado): con 23 empleados dejaba
   filas altas y filas bajas mezcladas y no había forma de comparar. */
.fpanel-range { display: inline-flex; align-items: center; gap: 0.6rem; }   /* completa la regla de arriba */
.fpdet-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 6px;
    border: 1px solid var(--color-border, #e5e7eb);
    background: transparent; cursor: pointer;
    color: var(--color-text-light, #6b7280); font-size: 11.5px; font-weight: 600;
    transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.fpdet-toggle i { font-size: 12px; }
.fpdet-toggle:hover { color: var(--color-primary-dark, #0c1749); border-color: var(--color-text-light, #9aa3ad); }
.fpdet-toggle.activo {
    color: var(--color-primary, #00A1FF);
    border-color: var(--color-primary, #00A1FF);
    background: var(--color-primary-hover, rgba(2,101,189,0.10));
}
.fpanel-nemp { color: var(--color-text-light, #9aa3ad); }
/* Fila en modo DETALLE: barras apiladas por evento en vez de cubos. */
.fprow-bar .fpcells {
    align-items: flex-end;
    /* Eje base: una línea fina bajo todas las barras da sensación de "suelo". */
    border-bottom: 1px solid var(--color-border, #e2e6ea);
}
.fprow-bar .fpcell.fpbar {
    height: 48px; background: transparent !important; position: relative;
    border-radius: 0; box-shadow: none;
}
.fprow-bar .fpcell.fpbar.fpcell-hoy { box-shadow: none; }
/* Pista del turno: barra "vacía" que se va llenando con lo hecho. */
.fpbar-track {
    position: absolute; left: 1px; right: 1px; bottom: 0;
    background: var(--color-border, #eceff2); opacity: 0.5;
    border-radius: 3px 3px 0 0; transition: opacity 0.1s ease;
}
.fpbar-seg {
    position: absolute; left: 1px; right: 1px; border-radius: 0;
    transition: filter 0.1s ease;
}
.fpbar-seg.fpbar-top { border-radius: 3px 3px 0 0; }
.fpbar-t { background: linear-gradient(180deg, #4bad6b, #3f9d5f); }
/* Horas extra: por encima del objetivo, verde lima → destaca el "de más". */
.fpbar-t.fpbar-extra { background: linear-gradient(180deg, #8fd44b, #6fbf3a); }
.fpbar-a { background: linear-gradient(180deg, #1ecaba, #14b8a6); }
/* Ausencia NO justificada: naranja (se ve, pero no computa como trabajada). */
.fpbar-anj { background: linear-gradient(180deg, #fb923c, #f97316); }
.fpbar-v { background: linear-gradient(180deg, #5b96f8, #3b82f6); }
/* Solicitud sin aprobar: mismo azul, desaturado (igual que el cubo lv-vacp). */
.fpbar-vp { background: linear-gradient(180deg, #bfdbfe, #93c5fd); }
/* Falta: el MISMO rojo del cubo (#cd4b3a) pero en tinta plana y rebajado, no en
   rayado diagonal. Sigue leyéndose como "hueco por cubrir" y no como bloque
   rojo macizo —para eso está la transparencia—, pero sin el ruido visual de las
   rayas, que a 14px de ancho de barra se convertían en un moteado. */
.fpbar-falta { background: rgba(205, 75, 58, 0.38); }
/* Realce al pasar el ratón sobre una barra (día). */
.fprow-bar .fpcell.fpbar:hover .fpbar-seg   { filter: brightness(1.08) saturate(1.04); }
.fprow-bar .fpcell.fpbar:hover .fpbar-track { opacity: 0.8; }
/* Cuadraditos más estrechos que antes (eran 24px con 4px de hueco) para dejar
   sitio a las columnas de métricas sin que el mes se salga de pantalla. */
.fpcells { display: flex; gap: 3px; padding-left: 10px; }
.fpcell { width: 14px; height: 22px; border-radius: 3px; background: var(--color-border, #eceff2); flex: none; }
.fpcell.wk { margin-left: 7px; }
.fpcell.lv-ok  { background: #3f9d5f; }
.fpcell.lv-mid { background: #d9a534; }
.fpcell.lv-bad { background: #cd4b3a; }
/* Jornada EN CURSO: verde claro. Misma familia que "completo" —está trabajando,
   no hay nada que corregir— pero distinguible de una jornada ya cerrada. */
.fpcell.lv-cur { background: #8fcfa4; }
.fpcell.lv-vac { background: #3b82f6; }
/* Solicitud de vacaciones sin aprobar: azul claro. Lleva borde para no
   confundirse con una celda vacía en pantallas poco contrastadas. */
.fpcell.lv-vacp{ background: #93c5fd; box-shadow: inset 0 0 0 1px rgba(59,130,246,0.45); }
.fpcell.lv-aus { background: #14b8a6; }
.fpcell.lv-anj { background: #f97316; }   /* ausencia no justificada (prioridad) */
/* Vista SEMANA: mismas medidas que el mes. Antes ensanchaba los cubos a 46px
   para llenar el hueco de las 7 columnas, pero eso rompía la lectura al
   alternar entre vistas: el mismo día cambiaba de tamaño según el rango. */
#fpanelBody.fp-semana .fpcell.wk { margin-left: 6px; }
.dowlbl { font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--color-text-light, #9aa3ad); }
/* Vista AÑO: 12 columnas-mes anchas (una celda = un mes, color = estado dominante).
   REPARTEN el ancho disponible en vez de medir 62px fijos: con medida fija
   (12×62 + huecos = 810px) el año no cabía junto a las métricas y sacaba barra
   de scroll horizontal por debajo de ~1850px. Los tramos responsive que encogen
   los cubos del mes no llegaban aquí: `#id.clase .clase` gana en especificidad
   a `.fpcell`. El max-width conserva el tamaño original en pantallas anchas. */
#fpanelBody.fp-ano .fpcells { gap: 6px; }
#fpanelBody.fp-ano .fpcell {
    flex: 1 1 0; min-width: 0; width: auto; max-width: 62px;
    height: 30px; border-radius: 5px;
}
.fpcell.fpcell-ano { cursor: pointer; }
.fpcell.fpcell-ano.fpcell-empty { background: var(--color-border, #eceff2); }
.fpcell[data-ano]:hover { outline: 2px solid var(--color-text-light, #9aa3ad); outline-offset: 1px; }
/* Celdas clicables: las que tienen dato (data-c) y las "vírgenes" (data-v), que
   abren el popover de alta (fichaje / vacación / ausencia). */
.fpcell[data-c], .fpcell[data-v] { cursor: pointer; }
.fpcell[data-c]:hover, .fpcell[data-v]:hover { outline: 2px solid var(--color-text-light, #9aa3ad); outline-offset: 1px; }
.fpcell.sel { outline: 2px solid var(--color-primary, #00A1FF); outline-offset: 1px; }
/* Columna de HOY: sin borde. Damos una ligera ELEVACIÓN (la celda "flota" con
   una sombra suave) + un halo tenue de acento. Se nota sin ser agresivo. */
.fpcell.fpcell-hoy {
  position: relative;
  z-index: 2;
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--color-primary, #00A1FF),
              0 2px 6px rgba(15, 23, 42, 0.22);
}
/* En las celdas de hoy SIN dato el anillo solo dibujaría un cuadro vacío: les
   damos además un relleno de acento para que la columna se lea entera. */
.fpcell.fpcell-hoy:not([data-c]) { background: rgba(0, 161, 255, 0.18); }
html.dark-mode .fpcell.fpcell-hoy, .dark-mode .fpcell.fpcell-hoy {
  box-shadow: 0 0 0 2px var(--color-primary, #00A1FF),
              0 2px 8px rgba(0, 0, 0, 0.55);
}
html.dark-mode .fpcell.fpcell-hoy:not([data-c]), .dark-mode .fpcell.fpcell-hoy:not([data-c]) {
  background: rgba(0, 161, 255, 0.28);
}

/* Popover táctil de celda (estado del día + acciones). */
.fich-cellpop {
  position: fixed; z-index: 1100;
  min-width: 224px; max-width: 300px;
  background: var(--color-card-bg, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.24);
  overflow: hidden;
  font-size: 0.85rem;
  animation: fichCellPopIn 0.12s ease;
}
@keyframes fichCellPopIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fich-cellpop-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.8rem; color: #fff; font-weight: 700; font-size: 0.9rem; }
.fich-cellpop-body { padding: 0.6rem 0.8rem 0.5rem; color: var(--color-text, #374151); }
.fich-cellpop-who { font-weight: 600; margin-bottom: 0.4rem; }
.fich-cellpop-row { margin-bottom: 0.2rem; }
.fich-cellpop-row .k { color: var(--color-text-light, #6b7280); }
.fich-cellpop-actions { display: flex; gap: 0.5rem; padding: 0.1rem 0.8rem 0.75rem; flex-wrap: wrap; }
.fich-cellpop-btn {
  font: inherit; font-size: 0.82rem; font-weight: 600;
  padding: 0.42rem 0.7rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--color-border, #e5e7eb); background: var(--color-bg-muted, #f9fafb); color: var(--color-text, #374151);
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.fich-cellpop-btn:hover { background: var(--color-primary-hover, rgba(2,101,189,0.08)); }
.fich-cellpop-btn.primary { background: var(--color-primary, #00A1FF); border-color: var(--color-primary, #00A1FF); color: #fff; }
.fich-cellpop-btn.primary:hover { filter: brightness(1.05); }
html.dark-mode .fich-cellpop, .dark-mode .fich-cellpop { background: var(--color-card-bg); border-color: rgba(255,255,255,0.1); }
html.dark-mode .fich-cellpop-btn, .dark-mode .fich-cellpop-btn { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); color: var(--color-text, #f3f4f6); }
/* Botones Aprobar (verde) / Denegar (rojo) del popover de solicitud. */
.fich-cellpop-btn.fich-cellpop-ok { background: #16a34a; border-color: #16a34a; color: #fff; }
.fich-cellpop-btn.fich-cellpop-ok:hover { filter: brightness(1.06); }
.fich-cellpop-btn.fich-cellpop-no { color: #dc2626; }
.fich-cellpop-btn.fich-cellpop-no:hover { background: rgba(220,38,38,0.10); border-color: #dc2626; }
.fich-cellpop-warn { color: #c2410c; font-size: 0.8rem; }
.fich-cellpop-gauge { display: flex; justify-content: center; padding: 4px 0 2px; }
/* Medidor semicircular de vacaciones (popover y hover). */
.fich-hc-gauge { display: flex; justify-content: center; margin: 2px 0 6px; }
.fich-vacgauge .fvg-track { stroke: var(--color-border, #e2e7ee); }
.fich-vacgauge .fvg-num { font-size: 15px; font-weight: 700; fill: var(--color-text, #1f2937); }
.fich-vacgauge .fvg-lbl { font-size: 8px; letter-spacing: .02em; fill: var(--color-text-light, #9aa3ad); text-transform: uppercase; }
html.dark-mode .fich-vacgauge .fvg-num, .dark-mode .fich-vacgauge .fvg-num { fill: var(--color-text, #f3f4f6); }

/* Tarjeta de detalle al pasar el ratón por una celda del panel (informativa). */
.fich-hovercard {
  position: fixed; z-index: 1200; pointer-events: none;
  min-width: 190px; max-width: 250px;
  background: var(--color-card-bg, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 11px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.20);
  overflow: hidden; font-size: 0.78rem; line-height: 1.35;
  animation: fichCellPopIn 0.1s ease;
}
.fich-hc-head { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.7rem; color: #fff; font-weight: 700; font-size: 0.8rem; }
.fich-hc-head i { font-size: 0.9rem; }
.fich-hc-body { padding: 0.5rem 0.7rem 0.6rem; color: var(--color-text, #374151); }
.fich-hc-emp { font-weight: 700; font-size: 0.82rem; }
.fich-hc-day { color: var(--color-text-light, #6b7280); font-size: 0.72rem; margin-bottom: 0.4rem; text-transform: capitalize; }
.fich-hc-row { display: flex; justify-content: space-between; gap: 0.9rem; padding: 0.08rem 0; }
.fich-hc-row .k { color: var(--color-text-light, #6b7280); }
.fich-hc-row .v { font-weight: 600; text-align: right; }
.fich-hc-note { margin-top: 0.35rem; color: var(--color-text-light, #6b7280); font-size: 0.72rem; }
.fich-hc-note.warn { color: #c07a13; }
/* Rango de la solicitud, junto a los días: secundario respecto a la cifra. */
.fich-hc-tenue { font-weight: 400; color: var(--color-text-light, #9aa3ad); }
/* Saldo negativo: se pasaría de su bolsa anual. */
.fich-hc-mal { color: #cd4b3a; font-weight: 700; }
/* Tarjeta de las cabeceras y las métricas: texto corrido en vez de filas
   clave/valor, y algo más ancha porque son frases, no cifras. */
.fich-hc-tip { color: var(--color-text, #374151); }
.fich-hovercard:has(.fich-hc-tip) { max-width: 300px; }
/* Cursor de ayuda solo donde hay tarjeta (antes lo daba .fpm[title]). */
.fpm[data-tip] { cursor: help; }
html.dark-mode .fich-hovercard, .dark-mode .fich-hovercard { background: var(--color-card-bg); border-color: rgba(255,255,255,0.1); }
html.dark-mode .fich-hc-note.warn, .dark-mode .fich-hc-note.warn { color: #e0b055; }

.fptick { background: transparent !important; height: 15px; position: relative; }
.fptick .mlbl { position: absolute; left: 0; top: 0; font-size: 10px; color: var(--color-text-light, #9aa3ad); white-space: nowrap; font-weight: 700; }
.fptick .dlbl { position: absolute; left: -1px; top: 0; font-size: 9.5px; color: var(--color-text-light, #9aa3ad); white-space: nowrap; }
.fptick .dlbl-dom { color: #cd4b3a; font-weight: 700; }
.fptick .dlbl-fest { color: #7c3aed; font-weight: 700; cursor: help; }   /* festivo */
/* Cabecera de la columna de HOY: número en píldora de acento + etiqueta "HOY"
   sobre la columna, para localizar el día sin contar cuadraditos. */
.fptick .dlbl-hoy { left: -3px; padding: 0 3px; border-radius: 4px; font-weight: 800;
    color: #fff; background: var(--color-primary, #00A1FF); }
.fptick .hoylbl { position: absolute; left: 50%; top: 1px; transform: translateX(-50%);
    font-size: 8.5px; font-weight: 800; letter-spacing: .06em;
    color: var(--color-primary, #00A1FF); white-space: nowrap; }
.fpanel-axisdays { margin-bottom: 6px; }
/* Dentro de la cabecera fusionada los números de día se anclan ABAJO de su
   banda (no arriba): así comparten línea con la última línea de los nombres de
   columna, que van pegados al fondo. Fuera de .fpaxis siguen arriba — el panel
   de Vacaciones reutiliza .fptick con su propia maquetación. */
.fpaxis .fptick .dlbl { top: auto; bottom: 0; }
/* Finde / festivo: sombreado sutil solo en las celdas SIN dato (las que tienen
   fichaje/vacaciones conservan su color). :not([data-c]) = celda vacía. */
.fpcell.fpcell-we:not([data-c]) { background: #c4cbd5; }
html.dark-mode .fpcell.fpcell-we:not([data-c]), .dark-mode .fpcell.fpcell-we:not([data-c]) { background: rgba(255,255,255,0.15); }
/* (.fpanel-sel se retiró con el aviso "Pulsa una celda para ver el detalle".) */
.fpanel-pie .fpleg-item { white-space: nowrap; }

/* Modal detalle del día: capa por debajo del modal de edición (1040/1050) para
   poder abrir la edición de hora encima. */
.fich-dia-backdrop { z-index: 1030; }
.fich-dia-modal { z-index: 1035; max-width: 720px; }

/* Fila expandida */
.fich-detalle-row td { padding: 0 !important; background: var(--color-bg-muted, #fafbfc); }
.fich-detalle {
    padding: 1.25rem;
    border-top: 2px solid var(--color-primary, #0265bd);
}
.fich-detalle-loading, .fich-detalle-error, .fich-detalle-vacio { color: var(--color-text-light, #6b7280); font-style: italic; }
.fich-detalle-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; }
@media (max-width: 900px) { .fich-detalle-grid { grid-template-columns: 1fr; } }
.fich-detalle-panel {
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    padding: 1rem;
}
.fich-detalle-titulo {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-light, #6b7280);
    margin-bottom: 0.75rem;
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.fich-eventos { list-style: none; padding: 0; margin: 0; }
.fich-evento {
    display: grid;
    grid-template-columns: 50px 32px 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0;
    border-bottom: 1px dashed var(--color-border, #f3f4f6);
}
.fich-evento:last-child { border-bottom: none; }
.fich-evento-hora { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text, #1f2937); }
.fich-evento-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
}
.fich-evento-t0 .fich-evento-icon { background: rgba(16, 185, 129, 0.14); color: #059669; }
.fich-evento-t1 .fich-evento-icon { background: rgba(239, 68, 68, 0.12);  color: #dc2626; }
.fich-evento-t2 .fich-evento-icon { background: rgba(245, 158, 11, 0.14); color: #d97706; }
.fich-evento-t3 .fich-evento-icon { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.fich-evento-etiqueta { font-weight: 500; color: var(--color-text, #1f2937); }
.fich-evento-sub {
    font-size: 0.75rem;
    color: var(--color-text-light, #9ca3af);
    display: inline-flex; align-items: center; gap: 0.3rem;
    margin-top: 0.1rem;
}
.fich-btn-editar {
    background: transparent;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 6px;
    padding: 0.35rem 0.55rem;
    color: var(--color-primary, #0265bd);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s ease;
}
.fich-btn-editar:hover { background: rgba(2, 101, 189, 0.08); }

/* Cabecera del panel de eventos: título a la izquierda + botón "Cerrar
   jornada" a la derecha cuando la jornada quedó abierta. */
.fich-detalle-titulo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.fich-detalle-titulo-row .fich-detalle-titulo { margin-bottom: 0; }
.fich-detalle-estado { margin: 0 0 0.8rem; }
.fich-btn-cerrar-jornada {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);   /* naranja "acción pendiente" */
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fich-btn-cerrar-jornada:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.36); }
.fich-btn-cerrar-jornada i { font-size: 0.9rem; }
/* Acciones de un día en FALTA: "Registrar fichaje" es la principal (naranja) y
   "Nueva ausencia" / "Nueva vacación" van en secundario — las tres son salidas
   válidas, pero el olvido de fichaje es la más frecuente. */
.fich-detalle-acciones { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.fich-btn-alta {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.7rem; border-radius: 8px;
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-bg-muted, #f9fafb);
    color: var(--color-text, #374151);
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
    transition: border-color .12s ease, color .12s ease;
}
.fich-btn-alta:hover { border-color: var(--color-primary, #00A1FF); color: var(--color-primary, #00A1FF); }
.fich-btn-alta i { font-size: 0.85rem; }
html.dark-mode .fich-btn-alta, .dark-mode .fich-btn-alta {
    background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: var(--color-text);
}

.fich-audit-linea { font-size: 0.85rem; color: var(--color-text, #1f2937); margin-bottom: 0.35rem; }
.fich-audit-label { color: var(--color-text-light, #6b7280); font-weight: 500; margin-right: 0.35rem; }
.fich-audit-vacio { font-size: 0.85rem; color: var(--color-text-light, #9ca3af); font-style: italic; }
.fich-audit-log { margin-top: 0.75rem; }
.fich-audit-log pre {
    margin-top: 0.35rem;
    background: var(--color-bg-muted, #f9fafb);
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--color-text, #1f2937);
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
}

/* Modales */
.fich-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.4);
    display: none;
    z-index: 1040;
}
.fich-modal-backdrop.show { display: block; }
.fich-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    max-width: 620px;
    width: calc(100% - 2rem);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background: var(--color-card-bg, #fff);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
    display: none;
    z-index: 1050;
}
.fich-modal.show { display: block; }
.fich-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border, #eef0f3);
    position: sticky; top: 0;
    background: var(--color-card-bg, #fff);
    z-index: 1;
}
.fich-modal-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    display: inline-flex; align-items: center; gap: 0.5rem;
}
.fich-modal-header h5 i { color: var(--color-primary, #0265bd); }
.fich-modal-close {
    background: transparent;
    border: none;
    color: var(--color-text-light, #6b7280);
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
}
.fich-modal-close:hover { background: var(--color-bg-muted, #f3f4f6); color: var(--color-text, #1f2937); }
.fich-modal-body { padding: 1.25rem; }
/* Filtro de centro por checkboxes (multi-selección). */
.fich-chk-list { display: flex; flex-direction: column; gap: 6px; max-height: 190px; overflow-y: auto;
    border: 1px solid var(--color-border, #e5e7eb); border-radius: 8px; padding: 8px 10px; }
.fich-chk { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; margin: 0; font-weight: 400; }
.fich-chk input { cursor: pointer; margin: 0; }
.fich-chk-hint { font-size: 0.76rem; font-weight: 400; color: var(--color-text-light, #6b7280); }
.fich-chk-empty { font-size: 0.85rem; color: var(--color-text-light, #6b7280); }
html.dark-mode .fich-chk-list, .dark-mode .fich-chk-list { border-color: rgba(255,255,255,0.1); }
.fich-modal-empleado {
    padding: 0.55rem 0.75rem;
    background: var(--color-bg-muted, #f9fafb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    color: var(--color-text, #1f2937);
    font-size: 0.9rem;
}
.fich-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.15rem;
}

/* Dark mode */
html.dark-mode .fich-kpi, .dark-mode .fich-kpi,
html.dark-mode .fich-toolbar, .dark-mode .fich-toolbar,
html.dark-mode .fich-tabla-wrap, .dark-mode .fich-tabla-wrap,
html.dark-mode .fich-modal, .dark-mode .fich-modal,
html.dark-mode .fich-modal-header, .dark-mode .fich-modal-header,
html.dark-mode .fich-detalle-panel, .dark-mode .fich-detalle-panel {
    background: var(--color-card-bg);
    border-color: rgba(255, 255, 255, 0.08);
}
html.dark-mode .fich-title, .dark-mode .fich-title,
html.dark-mode .fich-kpi-val, .dark-mode .fich-kpi-val,
html.dark-mode .fich-empleado-nombre, .dark-mode .fich-empleado-nombre,
html.dark-mode .fich-fecha, .dark-mode .fich-fecha,
html.dark-mode .fich-hora, .dark-mode .fich-hora,
html.dark-mode .fich-neto, .dark-mode .fich-neto { color: var(--color-text, #f3f4f6); }
html.dark-mode .fich-tabla thead th, .dark-mode .fich-tabla thead th,
html.dark-mode .fich-detalle-row td, .dark-mode .fich-detalle-row td { background: rgba(255,255,255,0.03); }
html.dark-mode .fich-view-btn-active, .dark-mode .fich-view-btn-active { background: var(--color-card-bg); color: var(--color-primary, #5192F3); }
html.dark-mode #fichVistaPanel, .dark-mode #fichVistaPanel,
html.dark-mode #vacVistaPanel, .dark-mode #vacVistaPanel,
html.dark-mode .fplabel, .dark-mode .fplabel { background: var(--color-card-bg); color: var(--color-text, #f3f4f6);
    border-right-color: rgba(255,255,255,0.08);
    box-shadow: -16px 0 0 var(--color-card-bg); }

/* ===== Importador de Personal desde Excel (Gestión de Personal > Importar) =====
   Spec: docs/spec-importador-personal-excel.md */
.gpimp-steps {
  display: flex; gap: .5rem; flex-wrap: wrap;
  margin-bottom: 1rem; padding-bottom: .75rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.gpimp-step {
  font-size: .85rem; font-weight: 600; padding: .35rem .75rem;
  border-radius: 999px; opacity: .45;
  background: var(--bs-secondary-bg, #e9ecef);
  color: var(--bs-body-color, #212529);
}
.gpimp-step-on { opacity: 1; background: #0d6efd; color: #fff; }

.gpimp-drop {
  border: 2px dashed var(--bs-border-color, #adb5bd);
  border-radius: .75rem; padding: 2.5rem 1rem; text-align: center;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.gpimp-drop:hover, .gpimp-drop-over { border-color: #0d6efd; background: rgba(13,110,253,.06); }
.gpimp-drop i { font-size: 2.5rem; color: #0d6efd; display: block; margin-bottom: .5rem; }

.gpimp-resumen { display: flex; gap: .5rem; flex-wrap: wrap; }
.gpimp-badge {
  display: inline-block; font-size: .8rem; font-weight: 600;
  padding: .25rem .6rem; border-radius: 999px;
}
.gpimp-badge-ok   { background: #d1e7dd; color: #0a3622; }
.gpimp-badge-ko   { background: #f8d7da; color: #58151c; }
.gpimp-badge-warn { background: #fff3cd; color: #664d03; }

html.dark-mode .gpimp-badge-ok,   .dark-mode .gpimp-badge-ok   { background: #0a3622; color: #75b798; }
html.dark-mode .gpimp-badge-ko,   .dark-mode .gpimp-badge-ko   { background: #58151c; color: #ea868f; }
html.dark-mode .gpimp-badge-warn, .dark-mode .gpimp-badge-warn { background: #664d03; color: #ffda6a; }

/* ===== Modal "Editar perfil" (menú lateral > bajo el nombre) ===== */
.side-menu-editarperfil {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.85);
  font-size: 0.75rem;
  line-height: 1.3;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.side-menu-editarperfil:hover { color: #fff; }

.perfil-dialog { max-width: 640px; }
.perfil-header { background: linear-gradient(135deg, #0d6efd, #0a58ca); color: #fff; }
.perfil-header .modal-title { font-weight: 600; }
.perfil-header .btn-close { filter: brightness(0) invert(1); opacity: .85; }

.perfil-body { padding: 1.25rem 1.5rem; }

.perfil-id { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.perfil-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.6rem; color: #fff; flex-shrink: 0;
  background: linear-gradient(135deg, #E91E63, #F48FB1);
}
.perfil-id-nombre { font-weight: 700; font-size: 1.15rem; color: var(--bs-body-color, #212529); }
.perfil-id-sub { color: var(--bs-secondary-color, #6c757d); font-size: .9rem; }

.perfil-nota {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(13,110,253,.08); color: #0a58ca;
  border-radius: .5rem; padding: .6rem .8rem; font-size: .85rem; margin-bottom: 1.25rem;
}
.perfil-nota i { font-size: 1rem; }

/* Sistema de 6 columnas: media fila = 3, fila completa = 6, tercio (tallas) = 2.
   En móvil todo apila a ancho completo. */
.perfil-grid { display: grid; grid-template-columns: 1fr; gap: .9rem 1rem; }
.perfil-field { display: flex; flex-direction: column; }
.perfil-field label {
  font-size: .8rem; font-weight: 600; margin-bottom: .3rem;
  color: var(--bs-secondary-color, #6c757d);
}
.perfil-sep {
  margin-top: .5rem; padding-top: .6rem;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--bs-secondary-color, #6c757d);
}
@media (min-width: 576px) {
  .perfil-grid { grid-template-columns: repeat(6, 1fr); }
  .perfil-field { grid-column: span 3; }        /* media fila por defecto */
  .perfil-field-full { grid-column: 1 / -1; }    /* fila completa */
  .perfil-field-third { grid-column: span 2; }   /* tercio (tallas) */
  .perfil-sep { grid-column: 1 / -1; }
}

.perfil-footer { border-top: 1px solid var(--bs-border-color, #dee2e6); }

html.dark-mode .perfil-id-nombre, .dark-mode .perfil-id-nombre { color: #e9ecef; }
html.dark-mode .perfil-nota, .dark-mode .perfil-nota { background: rgba(13,110,253,.15); color: #9ec5fe; }

/* ===== Conteo de bolsa en el modal de solicitud de vacaciones (estado 4.9) =====
   Va ARRIBA del selector de fechas: al pedir días, lo primero que hace falta
   saber es cuántos quedan. Replica el bloque de "Mis vacaciones" de Mi perfil
   en versión compacta para que se reconozca como el mismo dato. */
.vac-conteo {
    background: var(--color-bg-muted, #f9fafb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    margin-bottom: 1rem;
}
.vac-conteo-cols { display: flex; gap: 0.5rem; }
.vac-conteo-col { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vac-conteo-num { font-size: 1.35rem; font-weight: 700; line-height: 1.1; color: var(--color-text, #1f2937); }
.vac-conteo-disp { color: var(--color-primary, #00A1FF); }
.vac-conteo-lbl { font-size: 0.72rem; color: var(--color-text-light, #6b7280); }
.vac-conteo-bar { height: 5px; border-radius: 3px; margin-top: 0.6rem; overflow: hidden;
    background: var(--color-border, #e5e7eb); }
.vac-conteo-bar-fill { height: 100%; background: var(--color-primary, #00A1FF); }
.vac-conteo-pie { margin-top: 0.4rem; font-size: 0.68rem; color: var(--color-text-light, #9ca3af); }
html.dark-mode .vac-conteo, .dark-mode .vac-conteo {
    background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1);
}


/* ===== Panel de fichajes: nada de scroll horizontal =====
   Con 8 columnas de métricas + 31 cubos del mes hay un ancho mínimo que no
   cabe en pantallas medianas (y el menú lateral anclado se lleva otros 268px).
   Antes que sacar barra lateral —que obliga a arrastrar para ver la rejilla—
   se va recortando por tramos. Mes y semana encogen A LA VEZ, así los cubos
   siguen midiendo lo mismo entre vistas.
   Los tramos van de mayor a menor y todos por ENCIMA de 1050px, que es donde
   la regla de arriba deja solo el nombre y la rejilla. */
/* El tamaño de los cubos NO lleva min-width: por debajo de 1050px solo quedan
   el nombre y la rejilla, y ahí siguen haciendo falta cubos pequeños. */
@media (max-width: 1550px) {
    .fpcells { gap: 2px; padding-left: 6px; }
    .fpcell,
    #fpanelBody.fp-semana .fpcell { width: 10px; }
    .fpcell.wk,
    #fpanelBody.fp-semana .fpcell.wk { margin-left: 5px; }
}
/* Por debajo de 1450px el bloque derecho ya no se pinta, así que estos tramos
   solo aprietan nombre + la ecuación (4 columnas). Las sumas tienen que cuadrar
   con el primer track de .fprow. */
@media (max-width: 1350px) and (min-width: 1051px) {
    .fprow  { grid-template-columns: 316px var(--fp-mid, max-content); }
    .fpinfo { grid-template-columns: 160px 48px 68px 40px; }
}
@media (max-width: 1250px) {
    .fpcell,
    #fpanelBody.fp-semana .fpcell { width: 9px; }
}
@media (max-width: 1250px) and (min-width: 1051px) {
    .fprow  { grid-template-columns: 284px var(--fp-mid, max-content); }
    .fpinfo { grid-template-columns: 140px 44px 62px 38px; }
}

/* Interruptor de detalle + descarga + contador, en línea con el resto de la
   barra (antes iban en una segunda fila propia bajo el toolbar). */
.fich-toolbar-right .fpanel-range { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.fich-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; padding: 0; }

/* Las 4 tarjetas de KPI al PIE de la página: arriba empujaban la rejilla, que
   es lo que se viene a mirar. Un poco de aire por encima para separarlas. */
.fich-kpis-pie { margin-top: 1.25rem; }

/* ===== Tarjetas KPI compactas y filtrables =====
   Cifra y subtítulo en la misma línea: apilados ocupaban tres alturas de texto
   para dos datos y empujaban la rejilla. */
.fich-kpi { padding: 0.75rem 0.9rem; align-items: center; }
.fich-kpi-cifra { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.fich-kpi-val { font-size: 1.5rem; margin-bottom: 0; flex: 0 0 auto; }
.fich-kpi-sub { line-height: 1.25; }
.fich-kpi-label { margin-bottom: 0.15rem; }

/* En Planning la tarjeta filtra la lista al pulsarla (solo si tiene a alguien). */
.fich-kpi-filtrable { cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease, transform .1s ease; }
.fich-kpi-filtrable:hover { border-color: var(--color-text-light, #9aa3ad); box-shadow: 0 2px 10px rgba(15,23,42,.08); }
.fich-kpi-filtrable:active { transform: translateY(1px); }
.fich-kpi-filtrable:focus-visible { outline: 2px solid var(--color-primary, #00A1FF); outline-offset: 2px; }
/* Tarjeta cuyo filtro está aplicado. */
.fich-kpi.activo { border-color: var(--color-primary, #00A1FF); box-shadow: inset 0 0 0 1px var(--color-primary, #00A1FF); }

/* Chip del filtro activo, junto al contador de empleados. */
.fich-kpi-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 6px 3px 9px; border-radius: 999px;
    background: var(--color-primary-hover, rgba(2,101,189,0.10));
    color: var(--color-primary-dark, #0c1749);
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.fich-kpi-chip button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: inherit; cursor: pointer; font-size: 10px;
}
.fich-kpi-chip button:hover { background: rgba(0,0,0,0.12); }