/* =========================================================
   CUSTOM THEME — Gama azul moderna 2026
   ========================================================= */

@font-face {
  font-family: 'Rogueland';
  src: url('/trainia/assets/fonts/rogueland.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------
   Variables y tipografía base
---------------------------------*/
:root{
  /* === Tokens corporativos Zerolynx (canónicos) === */
  --zl-blue:#1e71b8;
  --zl-blue-deep:#1a62a0;
  --zl-ink:#1d273f;

  /* === Bootstrap overrides → unificados al azul corporativo === */
  --bs-primary:#1e71b8;
  --bs-secondary:#4b6a8a;
  --bs-dark:#1d273f;
  --bs-light:#f1f5fb;
  --bs-body-font-family:Figtree, Helvetica, Arial, sans-serif;
  --bs-body-font-size:0.875rem;
  --bs-body-line-height:1.5;
  --bs-body-color:#1d273f;

  /* === Radius (escala única 4/8/12) === */
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-pill:999px;

  /* === Elevación (3 niveles) === */
  --shadow-sm:0 1px 3px rgba(29,39,63,.06);
  --shadow-md:0 4px 12px rgba(29,39,63,.08);
  --shadow-lg:0 8px 24px rgba(29,39,63,.12);

  --input-border:#bfdbfe;

  /* === Paleta azul (re-anclada al corporativo) === */
  --blue-50:#eff6ff;
  --blue-100:#dbeafe;
  --blue-200:#bfdbfe;
  --blue-600:#1e71b8;   /* antes #2563eb — ahora corporativo */
  --blue-700:#1a62a0;
  --blue-800:#155080;
  --blue-900:#1d273f;

  /* === Texto (jerarquía) === */
  --text-primary:#1d273f;
  --text-secondary:#4b6a8a;
  --text-muted:#64748b;

  /* === Layout: ancho del sidebar (toggle colapsable) === */
  --sidebar-width: 200px;

  /* === Señales (semántica universal) === */
  --signal-success:#16a34a;
  --signal-success-deep:#15803d;
  --signal-danger:#dc2626;
  --signal-danger-deep:#b91c1c;
  --signal-warning:#d97706;
  --signal-warning-deep:#b45309;
  --signal-info:#1e71b8;

  /* Naranja editor (acción "editar" en tablas).
     Tono custom histórico de CuatrIA, distinto de --signal-warning para que
     "editar" no se confunda con "atención". Cambiar aquí afecta a todos los
     btn-icon--edit del CRM. */
  --zl-edit:#E5722B;
  --zl-edit-deep:#c9601f;
}

/* ------------------------------
   Base
---------------------------------*/
body{
  background-color:#f0f5ff;
  font-family:var(--bs-body-font-family);
  font-size:var(--bs-body-font-size);
  line-height:var(--bs-body-line-height);
  color:var(--bs-body-color);
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--bs-body-font-family);
  font-weight:600;
  color:var(--bs-dark);
}

/* Alto contraste (forced-colors, p. ej. modo de contraste de Windows): los anillos
   de foco basados en box-shadow se descartan, dejando controles sin indicador de
   foco. Se garantiza uno con un outline que el sistema colorea (WCAG 2.4.7). */
@media (forced-colors: active){
  :focus-visible{
    outline:2px solid Highlight !important;
    outline-offset:2px !important;
  }
}

/* Ajustes container utilitarios */
.container.py-4{padding-top:.5rem!important;padding-bottom:.5rem!important;}
.container.px-5{padding-right:1rem!important;padding-left:1rem!important;}

/* Contenidos principales (vistas) */
.contenido-div,
.contenido-evaluaciones{
  flex:1 !important;
  width:100%;
  padding-left:32px;
  padding-right:32px;
  box-sizing:border-box;
}

/* ------------------------------
   Navbar superior
---------------------------------*/
.navbar-top{
  background:#fff;
  border-bottom:1px solid var(--blue-100);
  box-shadow:0 1px 8px rgba(37,99,235,.08);
  padding:.5rem 1rem;
  position:fixed; top:0; left:220px; right:0;
  z-index:1030;
  display:flex; align-items:center; justify-content:space-between;
}
.navbar-top .dropdown-menu{
  border-radius:16px; border:1px solid var(--blue-100);
  box-shadow:0 8px 24px rgba(37,99,235,.12);
}
.navbar-top .dropdown-item:hover{ background-color:var(--blue-50); color:var(--blue-600); }

/* ------------------------------
   Tarjetas / Modales / Secciones
---------------------------------*/
/* Card: superficie elevada con padding interno (header/body/footer no son hijos directos) */
.card{
  border:none!important;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  background:#fff;
  padding:1.5rem;
}
/* Modal-content: aire generoso (1.5rem outer) + paddings internos de Bootstrap.
   Esto restablece la sensación de "modales del CRM con aire" del refactor previo. */
.modal-content{
  border:none!important;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  background:#fff;
  padding:1.5rem;
}
.modal-content > .modal-footer{ gap: .5rem; }

/* === Indicador de campo requerido === */
/* Asterisco rojo cuando el siguiente elemento (o un input dentro de un wrapper)
   tiene atributo required. Sólo dentro de modal-body para no afectar formularios
   distintos en el resto de la app. */
.modal-body label:has(+ input[required])::after,
.modal-body label:has(+ select[required])::after,
.modal-body label:has(+ textarea[required])::after,
.modal-body label:has(+ * input[required])::after,
.modal-body label:has(+ * select[required])::after,
.modal-body label:has(+ * textarea[required])::after{
  content: ' *';
  color: var(--signal-danger);
  font-weight: 700;
  margin-left: 1px;
}

/* === Form sections (fieldset + legend) — agrupación visual en forms largos === */
.form-section {
  border: none;
  padding: 0;
  margin: 0 0 1.25rem;
  width: 100%;
}
.form-section + .form-section {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--blue-100);
}
.form-section__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--zl-blue);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 .85rem;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.form-section__title .bi { font-size: 14px; }
/* form-section__grid es solo un hook semántico — el layout lo aporta .row g-3 (Bootstrap).
   No definimos display:flex aquí para no chocar con el sistema gutter de Bootstrap. */

/* === Helper text bajo input (Bootstrap form-text + tokens corporativos) === */
.form-text {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: .25rem;
  line-height: 1.4;
  display: block;
}
.form-text code {
  background: var(--blue-50);
  color: var(--zl-blue);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* === Validación inline (errores por campo) === */
/* Bootstrap aporta .is-invalid base; refuerzo tokens corporativos para coherencia. */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: var(--signal-danger);
  background-image: none; /* quita el icono Bootstrap por defecto */
  padding-right: .75rem;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--signal-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .2);
}
.invalid-feedback {
  display: block;
  width: 100%;
  margin-top: .35rem;
  font-size: 12px;
  color: var(--signal-danger-deep);
  line-height: 1.4;
}
.invalid-feedback:empty { display: none; }
/* Sólo se muestra cuando hay .is-invalid en el campo previo (Bootstrap) o cuando
   tiene contenido (forzado por el helper JS). */
.form-control:not(.is-invalid) + .invalid-feedback:not(:empty),
.form-select:not(.is-invalid) + .invalid-feedback:not(:empty) {
  /* Conserva visible hasta que el usuario empiece a teclear */
}

/* === Loading state en botón submit del modal === */
.modal button[type="submit"].is-loading{
  pointer-events: none;
  opacity: .85;
}
.modal button[type="submit"].is-loading::after{
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: .5rem;
  vertical-align: -2px;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: login-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .modal button[type="submit"].is-loading::after{ animation: none; }
  /* Quien pide movimiento reducido no debe percibir desplazamientos en hover
     (tarjetas, botones de tabla, renombrar). Se anulan transición y transform. */
  .dashboard-box,
  .table td .btn,
  .btn-rename{
    transition:none!important;
  }
  .dashboard-box:hover,
  .table td .btn:hover,
  .btn-rename:hover{
    transform:none!important;
  }
}
/* Botones Guardar/Cancelar en modales — Guardar=success verde, Cancelar=neutro blanco */
.modal .btn-primary{
  background:var(--signal-success);
  border-color:transparent;
  color:#fff;
}
.modal .btn-primary:hover{
  background:var(--signal-success-deep);
  color:#fff;
}
.modal .btn-outline-secondary,
.modal .btn-secondary{
  background:#fff;
  border:1px solid var(--blue-200) !important;
  color:var(--zl-ink);
}
.modal .btn-outline-secondary:hover,
.modal .btn-secondary:hover{
  background:var(--blue-50);
  color:var(--zl-ink);
}
.card + .card{ margin-top:1rem; }
.card-header{
  background:transparent; border-bottom:none;
  font-weight:500; color:var(--bs-dark);
}

/* Cajas de sección */
.section-box{
  background:#fff;
  border-radius:var(--radius-lg);
  padding:1.5rem;
  margin-bottom:2rem;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--blue-100);
  font-size:12px !important;
}
.section-box .table{ margin-bottom:0; }

/* ------------------------------
   Formularios
---------------------------------*/
.form-control{
  border-radius:6px;
  border:1px solid var(--input-border);
  font-size:14px;
}
.form-control:focus{
  border-color:var(--bs-primary);
  box-shadow:0 0 0 .15rem rgba(37,99,235,.2);
  outline:none!important;
}

/* Buscador dinámico: la lupa va DENTRO del campo (decorativa), sin recuadro tipo
   botón. La búsqueda se lanza al escribir, no requiere pulsar nada. */
.trainia-search{
  position:relative;
  display:block;
  width:100%;
  min-width:0; /* permite que el buscador ceda espacio en barras de una sola línea */
}
.trainia-search > .bi{
  position:absolute;
  left:.65rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--text-muted);
  font-size:.85rem;
  pointer-events:none;
}
.trainia-search input[type="search"]{
  width:100%;
  padding-left:1.95rem;
}

/* ------------------------------
   Botones (con refuerzo anti-override)
---------------------------------*/
.btn{
  border-radius:var(--radius-md);
  font-weight:500;
  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease;
  font-family:var(--bs-body-font-family);
  border:1px solid transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--zl-blue);
}
/* El atajo `border:1px solid transparent` de .btn borra el borde que Bootstrap
   da a los botones outline en reposo, dejándolos como texto/icono suelto sin
   caja. Se devuelve el borde (del color propio de cada variante) para que se
   vean como botones también sin hover. */
.btn-outline-primary,.btn-outline-secondary,.btn-outline-success,
.btn-outline-danger,.btn-outline-warning,.btn-outline-info,.btn-outline-dark{
  border-color:currentColor;
}

/* Paleta principal — semántica universal de color */
.btn-primary{
  background-color:var(--zl-blue);
  color:#fff;
}
.btn-primary:hover{
  background-color:var(--zl-blue-deep);
  color:#fff;
}
.btn-success{ background:var(--signal-success); color:#fff; }
.btn-success:hover{ background:var(--signal-success-deep); color:#fff; }
.btn-danger{ background:var(--signal-danger); color:#fff; }
.btn-danger:hover{ background:var(--signal-danger-deep); color:#fff; }
/* Fondo en el tono profundo para que el texto blanco alcance AA (~5:1);
   --signal-warning (#d97706) con blanco solo da 3.19:1. */
.btn-warning{ background:var(--signal-warning-deep); color:#fff; }
.btn-warning:hover{ background:var(--signal-warning-deep); color:#fff; }

/* Botones custom / DataTables — radio coherente con .btn principal */
.btn-action,
.btn-modern,
button.dt-button,
.dt-button,
.buttons-html5,
.buttons-html5.btn-modern,
div.dt-buttons > .dt-button,
div.dt-buttons > button.dt-button{
  background:var(--zl-blue) !important;
  color:#fff !important;
  border:1px solid transparent !important;
  border-radius:var(--radius-md) !important;
  padding:.45rem 1rem !important;
  font-size:.875rem !important;
  font-weight:500 !important;
  transition:background-color .2s ease, box-shadow .2s ease;
  background-image:none !important;
  box-shadow:none;
}
.btn-action:hover,
.btn-modern:hover,
button.dt-button:hover,
.dt-button:hover,
.buttons-html5:hover,
.buttons-html5.btn-modern:hover,
div.dt-buttons > .dt-button:hover,
div.dt-buttons > button.dt-button:hover{
  background:var(--zl-blue-deep) !important;
  color:#fff !important;
  background-image:none !important;
}
.dt-btn-azul{
  background:var(--zl-blue) !important;
  color:#fff !important;
  border-radius:var(--radius-md) !important;
}
.dt-btn-azul:hover{ background:var(--zl-blue-deep) !important; }
.dt-btn-verde{
  background:var(--signal-success) !important;
  color:#fff !important;
  border-radius:var(--radius-md) !important;
}
.dt-btn-verde:hover{ background:var(--signal-success-deep) !important; }

/* ------------------------------
   Sidebar — estilos base (logo + headings de sección)
   Los items <a> se estilan en el bloque "Sidebar" más abajo (~L1163).
---------------------------------*/
.sidebar-logo{
  padding:.5rem .75rem .4rem;
  border-bottom:1px solid var(--blue-100);
  margin-bottom:.35rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  /* Pegado arriba durante el scroll vertical del sidebar */
  position:sticky;
  top:0;
  background:#fff;
  z-index:1;
}
/* Logo + firma agrupados: se alinean a la derecha para que "by Zerolynx"
   quede bajo la "A" del wordmark. El grupo va centrado en el menú (lo centra
   .sidebar-logo con align-items:center). */
.sidebar-logo__brand{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}
/* Firma corporativa bajo el wordmark; oculta en el estado colapsado. */
.sidebar-logo__by{
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--text-muted);
  text-transform:none;
  line-height:1;
}

/* Etiquetas de sección semánticas (Negocio / Operaciones / RRHH).
   Cada sección lleva un divisor superior fino → grupos claramente separados. */
.sidebar .sidebar-section{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--text-muted);
  padding:.85rem 1.5rem .35rem;
  margin:.6rem 10px 0;
  border-top:1px solid var(--blue-100);
}

/* ------------------------------
   Tablas (estilo moderno 2026)
---------------------------------*/
.table{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  border-spacing:0;
  background:transparent;
}
.table th,.table td{
  vertical-align:middle!important;
  border:none!important;
  border-bottom:1px solid #edf2fb!important;
  word-break:normal;
  overflow-wrap:break-word;
  white-space:normal;
  hyphens:none;
  padding:.4rem .5rem;
  font-size:12px; /* subido desde 10px: lectura más cómoda en tablas densas (baja visión) */
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}

/* Opt-in por columna — añade .col-truncate o .col-wrap al <th>/<td> */
.table .col-truncate{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:0; /* truco para que table-layout:fixed respete el ancho de la columna */
}
.table .col-wrap{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:break-word;
}
.table .col-nums{
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.table thead th{
  background:#f8fafc!important;
  color:var(--zl-ink)!important;
  text-transform:uppercase; font-weight:700;
  letter-spacing:.04em;
  font-size:11px; /* subido desde 10px */
  border:none!important;
  border-bottom:2px solid var(--zl-blue)!important;
  box-shadow:none;
  padding:.5rem .65rem;
  white-space:nowrap;
}
.table thead th:last-child{
  box-shadow:none;
}
/* Iconos de ordenación DataTables — flechas blancas y texto centrado */
.table thead th.sorting,
.table thead th.sorting_asc,
.table thead th.sorting_desc{
  padding-left:26px!important;  /* iguala el padding-right:26px de DataTables → texto centrado */
}
.table thead th.sorting::before,
.table thead th.sorting::after,
.table thead th.sorting_asc::before,
.table thead th.sorting_asc::after,
.table thead th.sorting_desc::before,
.table thead th.sorting_desc::after{
  opacity:.35!important;
  color:#1d273f!important;
}
.table thead th.sorting_asc::before,
.table thead th.sorting_desc::after{
  opacity:.9!important;
}
/* Vista Global asignaciones: mismo estilo moderno que el resto de tablas */
.vista-asignaciones thead th{
  background:#f8fafc!important;
  color:#1d273f!important;
  border-bottom:2px solid #1e71b8!important;
  box-shadow:none!important;
}
/* Ausencias: cabecera clara igual que el resto de tablas */
.vista-ausencias th{
  background:#f8fafc!important;
  color:#1d273f!important;
  border-bottom:2px solid #1e71b8!important;
}
.vista-ausencias th .mes{ color:#64748b!important; }
.vista-ausencias th .dia{ color:#1d273f!important; }
.table tbody tr{
  background:#fff;
  transition:background .15s ease;
}
.table tbody tr:last-child td{ border-bottom:none!important; }
.table tbody tr:hover{ background:#f4f8ff; }

/* Anular bandas — Bootstrap table-striped */
.table-striped>tbody>tr:nth-of-type(odd)>*,
.table-striped>tbody>tr:nth-of-type(even)>*{
  --bs-table-accent-bg:transparent;
  --bs-table-striped-bg:transparent;
  --bs-table-bg-state:transparent;
  background-color:#fff!important;
}

/* Anular bandas — DataTables: fuerza blanco en todos los td */
table.dataTable tbody tr td,
table.dataTable tbody tr.odd td,
table.dataTable tbody tr.even td{
  background-color:#fff!important;
}
table.dataTable tbody tr:hover td,
table.dataTable tbody tr.odd:hover td,
table.dataTable tbody tr.even:hover td{
  background-color:#f4f8ff!important;
}

/* === Etapa-badge: chip compacto (icono + texto + color) ===
   Reemplaza el wash de toda la celda. WCAG-safe: color + icono + texto.
   El badge respeta el ancho de su celda: icono fijo, texto con ellipsis. */
.etapa-badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  max-width:100%;
  padding:3px 8px;
  border-radius:var(--radius-sm);
  font-size:11px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.01em;
  border:1px solid transparent;
  vertical-align:middle;
  min-width:0;
  overflow:hidden;
}
.etapa-badge .bi{ font-size:12px; flex-shrink:0; }
.etapa-badge__text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

.etapa-badge--pendiente       { background:rgba(124, 58,237,.10); color:#6d28d9; border-color:rgba(124, 58,237,.20); }
.etapa-badge--redactando      { background:rgba(29, 78,216,.10); color:#1d4ed8; border-color:rgba(29, 78,216,.20); }
.etapa-badge--enviada         { background:rgba( 2,132,199,.10); color:#0284c7; border-color:rgba( 2,132,199,.20); }
.etapa-badge--ejecucion       { background:rgba(15,118,110,.10); color:#0f766e; border-color:rgba(15,118,110,.20); }
.etapa-badge--finalizado      { background:rgba(67, 56,202,.10); color:#4338ca; border-color:rgba(67, 56,202,.20); }
.etapa-badge--factura-enviada { background:rgba(180, 83,  9,.10); color:#b45309; border-color:rgba(180, 83,  9,.20); }
.etapa-badge--cobrada         { background:rgba( 6, 95, 70,.10); color:#065f46; border-color:rgba( 6, 95, 70,.20); }
.etapa-badge--descartado      { background:rgba(100,116,139,.12); color:#475569; border-color:rgba(100,116,139,.22); }
.etapa-badge--perdida         { background:rgba(30, 64,175,.10); color:#1e40af; border-color:rgba(30, 64,175,.20); }
.etapa-badge--ganada          { background:rgba(161, 98,  7,.10); color:#a16207; border-color:rgba(161, 98,  7,.20); } /* adjudicado sin iniciar */

/* Wrapper tablas */
.table-responsive{ overflow-x:auto; max-width:100%; }

/* === Empty state para tablas (sin datos / sin coincidencias) === */
.dt-empty-state{
  padding:2.5rem 1.25rem;
  text-align:center;
  color:var(--text-muted);
}
.dt-empty-state__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--blue-50);
  color:var(--zl-blue);
  margin:0 auto .75rem;
}
.dt-empty-state__icon .bi{ font-size:24px; line-height:1; }
.dt-empty-state__title{
  font-size:15px;
  font-weight:600;
  color:var(--zl-ink);
  margin:0 0 .35rem;
}
.dt-empty-state__desc{
  font-size:13px;
  color:var(--text-secondary);
  margin:0 0 1rem;
  max-width:36ch;
  margin-left:auto;
  margin-right:auto;
  line-height:1.5;
}
.dt-empty-state__cta{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.5rem 1rem;
  background:var(--zl-blue);
  color:#fff;
  border:none;
  border-radius:var(--radius-md);
  font-size:13px;
  font-weight:500;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .15s ease;
}
.dt-empty-state__cta:hover{ background:var(--zl-blue-deep); color:#fff; }
.dt-empty-state__cta:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--zl-blue);
}
/* Variante --filter: cuando hay datos pero el filtro está vacío */
.dt-empty-state--filter .dt-empty-state__icon{
  background:#fef3c7;
  color:var(--signal-warning-deep);
}

/* === Wrapper visual de DataTables / tablas con borde redondeado === */
.dt-wrapper{
  border:1px solid var(--blue-200);
  border-radius:var(--radius-md);
  overflow:clip;
  margin-top:.5rem;
}
.dt-wrapper--flush{ margin-top:0; }
/* Cuando se compone con .table-responsive de Bootstrap, conservar scroll-x */
.table-responsive.dt-wrapper{ overflow-x:auto; }

/* (Sticky header reservado — pendiente de implementación robusta con DataTables.
   La clase .table-sticky-header en el HTML queda como no-op por ahora.) */

/* Fila/acciones compactas */
.table td .d-flex{ flex-wrap:wrap; gap:.25rem; justify-content:center; }
.table td .btn{ width:28px; height:28px; padding:0; }
.table td .btn:hover{ transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.15); }
/* Excepción: botones de TEXTO dentro de una celda (no solo icono). La regla de
   arriba está pensada para botones-icono 28×28; sin esta excepción, un botón con
   texto ("Asignar", "PDF") se comprime a 28×28 y su contenido desborda/solapa.
   Mayor especificidad (0,3,1) que .table td .btn (0,2,1). */
.table td .btn.btn-cell{ width:auto; height:auto; padding:.28rem .6rem; }

/* === Botoneras de tabla (helper compartido) === */
.table-actions{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  justify-content:center;
  align-items:center;
}
.table-actions form{ margin:0; display:inline-flex; }

/* Botón-icono 28×28 — usado en filas de tabla y list-group */
.btn-icon{
  width:28px;
  height:28px;
  flex-shrink:0;        /* no encogerse en filas flex (evita que el icono se solape con el texto) */
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-md);
  border:1px solid transparent;
  color:#fff;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-icon .bi{ font-size:14px; line-height:1; }
.btn-icon:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--zl-blue);
}

/* Variantes — todas usan tokens, sin hex hardcoded */
.btn-icon--success{ background:var(--signal-success); }
.btn-icon--success:hover{ background:var(--signal-success-deep); color:#fff; }

.btn-icon--danger{ background:var(--signal-danger); }
.btn-icon--danger:hover{ background:var(--signal-danger-deep); color:#fff; }

.btn-icon--warning{ background:var(--signal-warning); }
.btn-icon--warning:hover{ background:var(--signal-warning-deep); color:#fff; }

.btn-icon--primary{ background:var(--zl-blue); }
.btn-icon--primary:hover{ background:var(--zl-blue-deep); color:#fff; }

/* Edit: naranja editor (token --zl-edit). Tono custom de CuatrIA. */
.btn-icon--edit{ background:var(--zl-edit); }
.btn-icon--edit:hover{ background:var(--zl-edit-deep); color:#fff; }

.btn-icon--neutral{
  background:var(--blue-50);
  border-color:var(--blue-200);
  color:var(--zl-ink);
}
.btn-icon--neutral:hover{
  background:var(--blue-100);
  border-color:var(--zl-blue);
  color:var(--zl-ink);
}

/* Botón renombrar archivos */
.btn-rename,
.btn-rename-ok,
.btn-rename-cancel{
  width:28px; height:28px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1; border:none;
  transition:all .15s ease;
}
.btn-rename{
  background:var(--zl-edit);
  border:none !important;
  color:#fff;
}
.btn-rename:hover{ background:var(--zl-edit-deep); color:#fff; transform:translateY(-1px); }
.btn-rename-ok{ background:rgba(20,184,166,.88); color:#fff; }
.btn-rename-ok:hover{ background:rgba(15,150,135,.95); color:#fff; transform:translateY(-1px); }
.btn-rename-cancel{ background:#ef4444; color:#fff; }
.btn-rename-cancel:hover{ background:#dc2626; color:#fff; transform:translateY(-1px); }
/* Gap entre botones de archivos */
.list-group-item .btn-group{ gap:3px; }
.list-group-item .btn-group .btn{
  width:28px; height:28px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:none !important;
}
.list-group-item .btn-group .btn-outline-secondary{
  background:#1e71b8!important; color:#fff!important;
}
.list-group-item .btn-group .btn-outline-secondary:hover{
  background:#1a62a0!important; color:#fff!important; transform:translateY(-1px);
}
.list-group-item .btn-group .btn-outline-danger{
  background:#ef4444; color:#fff;
}
.list-group-item .btn-group .btn-outline-danger:hover{
  background:#dc2626; color:#fff; transform:translateY(-1px);
}

/* Modal de previsualización apilado sobre otros modales */
#modal-file-preview { z-index: 1200 !important; }
.modal-backdrop.preview-backdrop { z-index: 1150 !important; }

/* DataTables helpers */
div.dataTables_wrapper div.bottom{ margin-top:24px; }
table.dataTable.no-footer { border-bottom: none; }

/* (Bloque #empresasTable_* retirado: era CSS muerto heredado de CuatrIA, para un
   id que no existe en TrainIA. El id real de la tabla de empresas es
   #tablaEmpresas y su ancho se controla en el <style> de la vista.) */

/* ------------------------------
   Utilidades comunes
---------------------------------*/
.list-group-item{ white-space:normal; word-wrap:break-word; overflow-wrap:anywhere; }

/* Dropzone unificada */
.dropzone{
  border:2px dashed var(--blue-200,#bfdbfe); border-radius:6px;
  padding:16px; text-align:center;
  color:#4b6a8a; background:var(--blue-50); cursor:pointer;
  transition:background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out;
}
.dropzone.dragover{ background:var(--blue-100); border-color:var(--blue-600); color:var(--blue-700); }

/* Altura fija para listados (Documentación, etc.) */
.fixed-height-box{ height:200px; overflow-y:auto; overflow-x:hidden; margin:0; padding-left:0; }
#categorias-contenedor .col-12.col-md-6 > .p-3{ display:flex; flex-direction:column; }
#categorias-contenedor .fixed-height-box + .dropzone{ margin-top:8px; }
@media (max-width:576px){ .fixed-height-box{ height:200px; } }

/* ------------------------------
   Dashboard
---------------------------------*/
.dashboard-box{
  height:300px;
  display:flex; flex-direction:column;
  justify-content:flex-start; align-items:stretch;
  overflow:hidden;
  padding:0;
  background:#fff !important;
  border:1px solid var(--blue-100) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow-md);
  transition:box-shadow .2s ease, transform .2s ease;
}
.dashboard-box:hover{
  box-shadow:0 6px 20px rgba(37,99,235,.12);
  transform:translateY(-1px);
}
.dashboard-box .info-card-header{
  flex-shrink:0;
  width:100%;
  border-radius:0;
}
.dashboard-box h6{
  font-size:.75rem;
  font-weight:600;
  color:var(--blue-800);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:.5rem;
  width:100%;
  text-align:center;
}
.dashboard-box canvas{
  width:100%!important;
  max-height:220px;
}

/* Info cards (Información general del dashboard) */
.info-card{
  background:#fff;
  border:1px solid var(--blue-100);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.info-card-header{
  background:var(--zl-ink);
  color:#fff;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  padding:.55rem .85rem;
  display:flex;
  align-items:center;
  gap:.4rem;
}
.info-card-header .bi{ font-size:13px; opacity:.9; }
.info-card-list{
  list-style:none;
  margin:0;
  padding:0;
  overflow-y:auto;
  max-height:250px;
  flex:1;
}
.info-card-list li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:.5rem;
  padding:.3rem .85rem;
  font-size:11px;
  border-bottom:1px solid #f0f5ff;
}
.info-card-list li:last-child{ border-bottom:none; }
.info-card-list li:hover{ background:#f8fbff; }
.info-key{ color:#1d273f; font-weight:600; flex-shrink:0; }
.info-val{ color:#4b6a8a; text-align:right; }

/* Cumpleaños del mes (con foto) */
.cumple-list{
  list-style:none;
  margin:0;
  padding:0;
  overflow-y:auto;
  max-height:320px;
  flex:1;
}
.cumple-item{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.45rem .85rem;
  border-bottom:1px solid #f0f5ff;
}
.cumple-item:last-child{ border-bottom:none; }
.cumple-item:hover{ background:#f8fbff; }
.cumple-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid #cbd5e1;
  flex-shrink:0;
}
.cumple-avatar--ini{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#dbeafe;
  color:#1e71b8;
  font-size:12px;
  font-weight:700;
  letter-spacing:-.5px;
}
.cumple-nombre{
  color:#1d273f;
  font-weight:600;
  font-size:12px;
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:.4rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cumple-fecha{
  color:#4b6a8a;
  font-size:11px;
  font-weight:600;
  flex-shrink:0;
}
.cumple-badge{
  background:#f59e0b;
  color:#fff;
  font-size:9px;
  font-weight:700;
  letter-spacing:.03em;
  padding:.1rem .4rem;
  border-radius:999px;
  flex-shrink:0;
}
.cumple-empty{ color:#94a3b8; font-size:11px; padding:.45rem .85rem; }
/* Resaltado del cumpleañero de hoy */
.cumple-item--hoy{
  background:linear-gradient(90deg,#fff7ed,#fffbeb);
  border-left:3px solid #f59e0b;
}
.cumple-item--hoy:hover{ background:linear-gradient(90deg,#ffedd5,#fef3c7); }
.cumple-item--hoy .cumple-avatar{ border-color:#f59e0b; box-shadow:0 0 0 2px #fde68a; }
.cumple-item--hoy .cumple-nombre{ color:#b45309; }

/* KPIs numéricos en el box de Edad Media */
.dashboard-box h4{
  font-size:1.4rem;
  color:var(--blue-600);
  margin:.1rem 0;
}

/* Acordeón simple (info general) */
#contenidoInfoGeneral{ display:none; transition:all .3s ease; }
#contenidoInfoGeneral.show{ display:block; }

/* =========================================================
   AUSENCIAS — SOLO líneas verticales (scoped por vista)
   (Añade class="vista-ausencias" a un contenedor padre)
========================================================= */
.vista-ausencias .table-responsive{ width:100%; }
.vista-ausencias table{
  width:100%;
  border-collapse:collapse !important;
  table-layout:fixed;
  border:0 !important;
}
.vista-ausencias th,
.vista-ausencias td{
  border-top:none !important;
  border-bottom:none !important;
  border-left:.5px solid #ced4da !important;
  padding:1px;
  text-align:center;
  vertical-align:middle;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vista-ausencias th:last-child,
.vista-ausencias td:last-child{
  border-right:.5px solid #ced4da !important;
}
.vista-ausencias th{
  background:var(--blue-50); font-weight:600; font-size:13px;
}
.vista-ausencias th .mes{ display:block; font-size:11px; color:#4b6a8a; }
.vista-ausencias th .dia{ display:block; font-size:16px; color:var(--blue-900); font-weight:500; }
.vista-ausencias th.hoy{ background:#1e71b8 !important; color:#fff !important; }
.vista-ausencias th.hoy .mes{ color:rgba(255,255,255,.85) !important; }
.vista-ausencias th.hoy .dia{ color:#fff !important; font-weight:700; }
.vista-ausencias td{ background:#fff; height:42px; position:relative; }
.vista-ausencias tr:hover{ background:var(--blue-50); }

/* Celdas de ausencia */
.vista-ausencias .ausencia-cell{
  width:25px; height:25px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; margin:auto;
}
.vista-ausencias .ausencia-cell i{ font-size:13px; opacity:.8; }

/* Celdas/usuario (Ausencias) — FIX imagen redondeada y tamaño */
.vista-ausencias .usuario-col { padding:.5rem .75rem !important; }
.vista-ausencias .usuario-nombre { white-space:nowrap; }
.vista-ausencias .usuario-info{
  display:flex;
  align-items:center;
  gap:6px;
  line-height:1;
}

/* Iniciales (fallback sin foto) */
.vista-ausencias .usuario-iniciales{
  width:25px;
  height:25px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:12px;
  flex-shrink:0;
  background:var(--blue-100);
  color:var(--blue-700);
}

/* Foto real (img) */
.vista-ausencias .usuario-info img.usuario-foto{
  width:25px !important;
  height:25px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  display:block !important;
  flex-shrink:0;
}

/* Tooltip flotante */
.tooltip-custom{
  position:fixed;
  background:rgba(30,58,95,.92); color:#fff;
  padding:5px 8px; border-radius:4px; font-size:11px;
  pointer-events:none; z-index:9999;
  max-width:250px; white-space:normal;
  box-shadow:0 2px 8px rgba(37,99,235,.2);
}

/* ------------------------------
   LOGIN PAGE
---------------------------------*/
.login-body{
  font-family: 'Figtree', sans-serif;
  /* Mismo canvas que la app, con dos halos de marca muy sutiles en las esquinas
     que dan profundidad sin caer en el "SaaS marketing" pastel. */
  background:
    radial-gradient(circle at 0% 0%, rgba(30,113,184,0.10) 0%, transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(29,39,63,0.06) 0%, transparent 45%),
    #f0f5ff;
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 1.5rem;
}

.login-card{
  max-width: 420px;
  width: 100%;
  padding: 2.25rem 2rem;
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(29, 39, 63, .10), 0 4px 12px rgba(29, 39, 63, .06);
  background: #fff;
  text-align: center;
}

.login-logo{
  width: 180px;
  height: auto;
  margin: 0 auto 1.25rem;
  display: block;
}

.login-title{
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--zl-ink);
  margin: 0 0 .25rem;
}
.login-subtitle{
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
  letter-spacing: .02em;
}

/* Inputs del login: foco con halo corporativo (override del Bootstrap) */
.login-card .form-label{
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: .35rem;
}
.login-card .form-control{
  font-size: 14px;
  padding: .55rem .75rem;
  border-color: var(--blue-200);
  border-radius: var(--radius-md);
}
.login-card .form-control:focus{
  border-color: var(--zl-blue);
  box-shadow: 0 0 0 3px var(--zl-blue);
  outline: none;
}

/* Wrapper del campo password con botón ojo embebido */
.login-password-wrap{
  position: relative;
}
.login-password-wrap .form-control{ padding-right: 2.5rem; }
.login-password-toggle{
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.login-password-toggle:hover{
  background: var(--blue-50);
  color: var(--zl-blue);
}
.login-password-toggle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--zl-blue);
}
.login-password-toggle .bi{ font-size: 16px; }

/* Botón submit con estado loading */
#loginSubmit{
  padding: .65rem 1rem;
  font-size: 14px;
  font-weight: 600;
  position: relative;
}
#loginSubmit .login-submit__spinner{
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: login-spin .7s linear infinite;
  margin-left: .5rem;
}
#loginSubmit.is-loading .login-submit__spinner{
  display: inline-block;
  vertical-align: -3px;
}
#loginSubmit.is-loading .login-submit__label{ opacity: .85; }
@keyframes login-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  #loginSubmit .login-submit__spinner{ animation: none; }
}

/* Texto de ayuda + footer */
.login-help{
  margin: 1.25rem 0 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.login-help a{
  color: var(--zl-blue);
  text-decoration: none;
  font-weight: 500;
}
.login-help a:hover{ text-decoration: underline; }

.login-footer{
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: .04em;
}

/* Alert de error coherente con el sistema */
.login-card .alert-danger{
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--signal-danger-deep);
  font-size: 13px;
  border-radius: var(--radius-md);
  text-align: left;
}
.login-card .alert-danger .bi{ color: var(--signal-danger); }

/* (legal page styles moved inline to views/legal.php) */

/* ------------------------------
   Alertas informativas
---------------------------------*/
.alert-info{
  background:#e8f1fb !important;
  border:1px solid #b8d4f0 !important;
  color:#1d273f !important;
}
.alert-info .bi{ color:#1e71b8 !important; }
.alert-info .btn-close{ filter:none; opacity:.5; }
.alert-info .btn-close:hover{ opacity:1; }

/* ------------------------------
   PROYECTOS (extras)
---------------------------------*/
/* Columna Etapa */
.etapa-cell{
  font-size:11px;
  font-weight:600;
  border-radius:var(--radius-sm);
}
/* Clases planas de etapa (usadas en .kanban-col-header). Para celda/badge usar .etapa-badge--* */
.etapa-redactando      { background:rgba( 29,  78, 216, 0.12); color:#1d4ed8; }
.etapa-enviada         { background:rgba(  2, 132, 199, 0.12); color:#0284c7; }
.etapa-ejecucion       { background:rgba( 15, 118, 110, 0.15); color:#0f766e; }
.etapa-finalizado      { background:rgba( 67,  56, 202, 0.12); color:#4338ca; }
.etapa-factura-enviada { background:rgba(180,  83,   9, 0.15); color:#b45309; }
.etapa-cobrada         { background:rgba(  6,  95,  70, 0.12); color:#065f46; }
.etapa-descartado      { background:rgba(100, 116, 139, 0.14); color:#475569; }
.etapa-perdida         { background:rgba( 30,  64, 175, 0.12); color:#1e40af; }
.etapa-ganada          { background:rgba(161,  98,   7, 0.15); color:#a16207; }
.contenedor-proyectos{ display:flex; flex-wrap:wrap; gap:10px; }
.proyecto-imputado{ display:flex; align-items:center; border-radius:4px; white-space:nowrap; }
.proyecto-imputado input{ width:80px; margin-left:6px; }
.table-danger{ background-color:#fef2f2 !important; }
.table-success{ background-color:#f0fdf4 !important; }

/* ===============================
   MI PERFIL — estilos específicos
=============================== */

/* Tarjeta "hero" del perfil */
.perfil-hero-card{
  max-width:340px;
  max-height:200px;
  background:linear-gradient(135deg, var(--blue-50), var(--blue-100));
  padding:.9rem !important;
}

/* Avatar interactivo */
.avatar-container{ position:relative; display:inline-block; cursor:pointer; }
.avatar-container input[type="file"]{ display:none; }
.avatar-container img{ transition:opacity .3s ease; }
.avatar-container:hover img{ opacity:.7; }

.avatar-overlay{
  position:absolute; bottom:0; right:0;
  background:rgba(37,99,235,.65);
  border-radius:50%;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; font-size:16px;
}

/* Máscaras/seguridad salario */
#salarioMask{ user-select:none; }

/* Utilidades locales usadas en la vista */
.equal-height{ display:flex; flex-direction:column; height:100%; }
.px-16px{ padding-left:16px !important; padding-right:16px !important; }

/* Select2 normalizado para que herede tu tipografía y tamaños */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple{
  font-family:inherit !important;
  font-size:.875rem !important;
  line-height:1.5 !important;
  padding:.25rem .5rem !important;
  height:auto !important;
}
.select2-container .select2-selection__rendered{
  font-family:inherit !important;
  font-size:inherit !important;
  color:inherit !important;
}
.select2-container .select2-search__field{
  font-family:inherit !important;
  font-size:inherit !important;
}
.select2-dropdown{ font-family:inherit !important; font-size:.875rem !important; }

/* =========================================================
   IMPUTACIONES — estilos propios (scoped)
   Añade class="vista-imputaciones" a un contenedor padre
========================================================= */

.vista-imputaciones .section-box{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background-color:#fff;
  border-radius:8px;
  padding:1rem;
  box-shadow:0 0 8px rgba(37,99,235,.07);
}
.vista-imputaciones .section-inner{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}
.vista-imputaciones .extra-actions{ padding-top:1rem; margin-top:auto; }

/* Tabla: badges y filas especiales */
.vista-imputaciones .fila-ausencia{ background-color:#fef2f2 !important; }
.vista-imputaciones .ausencia-badge{
  display:flex; align-items:center; justify-content:center;
  gap:6px; font-size:11px; line-height:1; padding:4px 0;
}

/* Listado de proyectos y campos de horas */
.vista-imputaciones .contenedor-proyectos{
  display:flex; flex-wrap:wrap; gap:10px;
}
.vista-imputaciones .proyecto-imputado{
  display:flex; align-items:center; border-radius:4px; white-space:nowrap;
}
.vista-imputaciones .proyecto-imputado input{
  width:80px; margin-left:6px;
}

/* ----- Ajuste para que section-box ocupe todo el alto visible ----- */
.vista-imputaciones {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 115px);
}

.vista-imputaciones .section-box {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem 1.5rem;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 0 8px rgba(37,99,235,.07);
}

/* =========================================================
   ASIGNACIONES — Estilos de la vista
   ========================================================= */

.vista-asignaciones .asignaciones-wrapper{
  display:flex;
  width:100%;
  overflow-x:hidden;
}

.vista-asignaciones .tabla-empleados{
  min-width:70px;
  max-width:70px;
  background-color:#fff;
  border-right:1px solid var(--blue-100);
}

.vista-asignaciones .tabla-scroll{
  overflow-x:auto;
  width:100%;
}

.vista-asignaciones .tabla-scroll table{
  min-width:1200px;
}

/* Encabezados pegajosos */
.vista-asignaciones thead th{
  background:#f8fafc!important;
  border-bottom:2px solid #1e71b8!important;
  position:sticky;
  top:0;
  z-index:2;
}

/* Tablas que no deben ocupar todo el ancho */
.vista-asignaciones table.sin-width{ width:auto!important; }

/* Opciones coloreadas por proyecto */
.vista-asignaciones select.proyecto-select option[data-color]{ color:#fff; }

/* Wrapper para select con flecha custom */
.vista-asignaciones .select-wrapper{
  position:relative;
  display:inline-block;
  width:100%;
}
.vista-asignaciones .select-wrapper select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:none;
  padding-right:1.5rem;
  color:var(--zl-ink);
  border:1px solid var(--blue-200);
  width:100%;
  font-size:12px;
  padding:.2rem .3rem;
  cursor:pointer;
  background-color:#fff;
}
.vista-asignaciones .select-wrapper .custom-arrow{
  position:absolute;
  top:50%;
  right:3px;
  pointer-events:none;
  transform:translateY(-50%);
  font-size:0rem;
  color:#000;
}

/* Hoy (encabezado y celda) */
.vista-asignaciones th.hoy{ background-color:var(--blue-100)!important; color:var(--blue-800)!important; }
.vista-asignaciones td.hoy-celda{ background-color:var(--blue-50); }

/* Primera columna pegajosa (empleado) */
.vista-asignaciones table#asignacionesTable th:first-child,
.vista-asignaciones table#asignacionesTable td:first-child{
  position:sticky;
  left:0;
  background-color:#ffffff;
  z-index:3;
  box-shadow:2px 0 5px -2px rgba(37,99,235,.12);
}

/* Marca visual para días de AUSENCIA */
.vista-asignaciones td.celda-ausencia{
  background:#fef2f2;
  text-align:center;
}

/* Badge de ausencia centrado con icono */
.vista-asignaciones .ausencia-badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  font-size:10px;
  line-height:1;
  margin:2px 0;
}

/* ===========================
   NAVBAR + SIDEBAR (layout)
   =========================== */

.layout-with-sidebar {
  margin: 0;
  padding-top: 60px;
  padding-left: var(--sidebar-width);
  background-color: #f0f5ff;
  transition: padding-left .2s ease;
}

/* Topbar — chrome sólido, anclado a la zona de contenido (a la derecha del sidebar) */
/* Enlace "Saltar al contenido": oculto hasta recibir foco por teclado, y
   entonces visible en la esquina superior izquierda por encima de todo. */
.skip-link:focus {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 3000;
  width: auto;
  height: auto;
  padding: .5rem .9rem;
  background: var(--zl-blue);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

.topbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  height: 60px;
  width: calc(100% - var(--sidebar-width));
  transition: left .2s ease, width .2s ease;
  background-color: #fff;
  border-bottom: 1px solid var(--blue-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  z-index: 1030;
  box-shadow: var(--shadow-sm);
}
/* Mantén la clase legacy para no romper el JS de scroll, pero ya es no-op */
.topbar.scrolled { background-color: #fff; box-shadow: var(--shadow-sm); }

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  width: var(--sidebar-width);
  background-color: #ffffff;
  border-right: 1px solid var(--blue-100);
  padding-top: 1rem;
  /* Por debajo del backdrop de los modales (1050) para que estos oscurezcan
     también el sidebar y no tape el borde izquierdo del diálogo. Por encima de
     la topbar (1030) y del contenido. */
  z-index: 1040;
  box-shadow: 2px 0 8px rgba(29,39,63,.06);
  overflow-y: auto;
  overflow-x: hidden;
  transition: width .2s ease;
  /* Scrollbar fino tipo macOS */
  scrollbar-width: thin;
  scrollbar-color: var(--blue-200) transparent;
  /* Flex column para empujar el toggle al fondo del flujo natural sin flotar */
  display: flex;
  flex-direction: column;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background: var(--blue-100);
  border-radius: var(--radius-pill);
}
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--blue-200); }

/* Links del sidebar */
.sidebar a {
  color: var(--text-secondary);
  text-decoration: none;
  padding: 7px 14px;
  margin: 2px 10px;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.875rem;       /* 14px — body del sistema */
  font-weight: 500;
  line-height: 1.3;
  border-radius: var(--radius-md);
  transition: background-color 0.2s ease, color 0.2s ease;
}
/* Iconos: tamaño y ancho fijo + color azul corporativo siempre.
   El cerebro SVG usa stroke=currentColor → hereda el color del .bi (azul). */
.sidebar a .bi,
.sidebar a > svg {
  font-size: 1rem;            /* 16px — iconos un poco mayores que el texto */
  width: 18px;
  height: 18px;
  text-align: center;
  flex-shrink: 0;
  color: var(--zl-blue);      /* siempre azul corporativo, distingue del texto secundario */
  /* Anula el margin-right inline del SVG cerebro y el .me-2 Bootstrap */
  margin: 0 !important;
}
.sidebar a > svg { display: inline-block; }
/* En el item activo o hover, el icono mantiene el azul corporativo (no hereda) */
.sidebar a:hover .bi, .sidebar a:hover > svg,
.sidebar a.active .bi, .sidebar a.active > svg { color: var(--zl-blue); }
.sidebar a:hover { background-color: var(--blue-50); color: var(--zl-blue); }
.sidebar a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--zl-blue);
}
.sidebar a.active {
  background-color: var(--blue-100);
  color: var(--blue-800); /* AA sobre --blue-100 (el azul base se queda en 4.2:1) */
  font-weight: 600;
}
/* Sub-items: más pequeños y con sangría más clara para indicar nivel */
.sidebar .sub {
  padding-left: 32px;
  font-size: 0.8125rem;       /* 13px — un escalón debajo del top-level */
  font-weight: 400;
}
.sidebar .sub.active { font-weight: 600; }

/* === Responsive < 992px: contenido más compacto === */
@media (max-width: 991.98px){
  /* El JS de sidebar fuerza body.sidebar-collapsed → --sidebar-width pasa a 64px.
     Aquí ajustamos el padding lateral del contenido para no desperdiciar espacio. */
  .contenido-div.px-5,
  .contenido-evaluaciones.px-5{
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  /* Reducir padding del topbar también */
  .topbar{ padding: 0 12px; }
}
@media (max-width: 575.98px){
  /* En móvil pequeño, el sidebar puede ser muy intrusivo. Decisión:
     mantener colapsado a 64px (siempre visible) en lugar de off-canvas,
     porque la nav es la principal acción del usuario. */
  .contenido-div.px-5,
  .contenido-evaluaciones.px-5{
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }
}

/* === Botón toggle (colapsar / expandir) ===
   margin-top:auto + flex-shrink:0 dentro de .sidebar (flex column) →
   queda siempre justo después del último item, sin flotar.
   Si hay scroll por exceso de items, queda al final del scroll. */
.sidebar-toggle {
  margin-top: auto;
  flex-shrink: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  padding: .55rem .85rem;
  background: #fff;
  border: none;
  border-top: 1px solid var(--blue-100);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
  /* Pegado al fondo del viewport del sidebar cuando hay scroll */
  position: sticky;
  bottom: 0;
}
.sidebar-toggle:hover { background: var(--blue-50); color: var(--zl-blue); }
.sidebar-toggle:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--zl-blue);
}
.sidebar-toggle .bi { font-size: 16px; transition: transform .2s ease; }
.sidebar-toggle__hint {
  font-size: 11px;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}

/* Logo compacto: oculto por defecto, visible al colapsar */
.sidebar-logo__compact { display: none; }

/* === Estado colapsado === */
body.sidebar-collapsed { --sidebar-width: 64px; }

/* Centrar items, ocultar texto, conservar icono */
body.sidebar-collapsed .sidebar a {
  justify-content: center;
  padding: 8px 0;
  margin: 2px 8px;
  gap: 0;
}
body.sidebar-collapsed .sidebar .sub {
  padding-left: 0;
  font-size: 0;          /* el icono mantiene su tamaño explícito (18px CSS) */
}
body.sidebar-collapsed .sidebar-label { display: none; }

/* Headings de sección colapsados a un divisor visual */
body.sidebar-collapsed .sidebar .sidebar-section {
  font-size: 0;
  padding: .35rem 0 0;
  margin: .25rem 10px 0;
  height: 1px;
  overflow: hidden;
}

/* Logo: ocultar el completo, mostrar el compacto */
body.sidebar-collapsed .sidebar-logo__full { display: none; }
body.sidebar-collapsed .sidebar-logo__by { display: none; }
body.sidebar-collapsed .sidebar-logo__brand { display: none; }
body.sidebar-collapsed .sidebar-logo__compact {
  display: block;
  width: 32px;
  height: 32px;
}
body.sidebar-collapsed .sidebar-logo { padding: .55rem 0 .45rem; }

/* Toggle: hint oculto, chevron rotado */
body.sidebar-collapsed .sidebar-toggle {
  justify-content: center;
  padding: .55rem 0;
}
body.sidebar-collapsed .sidebar-toggle__hint { display: none; }
body.sidebar-collapsed .sidebar-toggle .bi { transform: rotate(180deg); }

/* (Bloque legacy de .btn-modern — eliminado para no pisar el radio del bloque DataTables) */

/* === Título de página en topbar (zona izquierda) === */
.topbar-title{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-size:15px;
  font-weight:600;
  color:var(--zl-ink);
  letter-spacing:-.01em;
  flex-shrink:0;
  margin:0;               /* rótulo de página (chrome), no encabezado */
  line-height:1.2;
}
.topbar-title .bi,
.topbar-title__svg{
  font-size:18px;
  color:var(--zl-blue);
  flex-shrink:0;
}
.topbar-title__svg{ width:18px; height:18px; }

/* === Ticker de cursos (centro de la topbar) === */
/* Se centra respecto a la BARRA completa (no al hueco sobrante entre título y menú,
   que es asimétrico) con posicionamiento absoluto: así queda centrado sea cual sea
   el ancho de los elementos laterales. Píldora sutil con fundido suave. */
.topbar-ticker{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  min-width:0;
  max-width:440px;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  justify-content:center;
  padding:.32rem .85rem;
  border-radius:var(--radius-pill);
  background:var(--blue-50);
  border:1px solid var(--blue-100);
  text-decoration:none;
  font-size:12.5px;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  transition:background-color .15s ease, border-color .15s ease;
}
.topbar-ticker:hover{ background:var(--blue-100); border-color:var(--blue-200); }
.topbar-ticker:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--zl-blue); }
.topbar-ticker__ico{ color:var(--zl-blue); font-size:14px; flex-shrink:0; }
.topbar-ticker__lead{
  color:var(--text-muted);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:10px;
  flex-shrink:0;
}
.topbar-ticker__msg{
  color:var(--zl-ink);
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:opacity .5s ease;
}
.topbar-ticker__msg.is-fading{ opacity:0; }
/* En pantallas donde la topbar se estrecha, el ticker desaparece para no competir
   con el título ni el menú de usuario. */
@media (max-width:1200px){ .topbar-ticker{ display:none; } }
@media (prefers-reduced-motion: reduce){ .topbar-ticker__msg{ transition:none; } }

/* Título de vista: es un <h1> REAL dentro de <main> (para lectores de pantalla y
   navegación por encabezados), pero oculto visualmente porque el título visible lo
   muestra el rótulo de la topbar. Se oculta con la técnica "visually-hidden" (clip),
   NO con display:none, que lo sacaría del árbol de accesibilidad. Cubre tanto el
   H1 hijo directo como el envuelto en la cabecera flex (progreso, itinerarios,
   curso, test, mi formación). */
.contenido-div > h1:first-child,
.contenido-div > div:first-child > h1,
.contenido-evaluaciones > h1:first-child{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* === Bloque cronómetro del topbar === */
.topbar-timer{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:13px;
  line-height:1;
  color:var(--text-secondary);
}
.topbar-timer > *{ line-height:1; } /* todos los hijos al mismo line-box → flex centra exacto */
.topbar-timer__label{
  text-transform:uppercase;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--text-muted);
  display:inline-flex;
  align-items:center;
}
.topbar-timer__meter{
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  min-width:240px;
}
.topbar-timer__value{
  font-size:13px;
  font-weight:700;
  color:var(--zl-blue);
  font-variant-numeric:tabular-nums;
  display:inline-flex;
  align-items:center;
}
.topbar-timer__target{
  font-size:12px;
  color:var(--text-muted);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.topbar-timer__bar{
  flex:1 1 auto;
  min-width:80px;
  height:5px;
  background:var(--blue-100);
  border-radius:var(--radius-pill);
  overflow:hidden;
}
.topbar-timer__bar-fill{
  height:100%;
  width:var(--progress, 0%);
  background:var(--zl-blue);
  border-radius:var(--radius-pill);
  transition:width .35s ease, background-color .25s ease;
}
/* Estados por umbral — el color de la barra responde al % */
.topbar-timer:not([style*="--progress: 0"]) .topbar-timer__bar-fill{
  /* default: azul corporativo */
}
/* Casi completa (≥ 90%) → ámbar */
.topbar-timer[data-state="warn"] .topbar-timer__bar-fill{
  background:var(--signal-warning);
}
.topbar-timer[data-state="warn"] .topbar-timer__value{
  color:var(--signal-warning-deep);
}
/* Completada (≥ 100%) → verde success */
.topbar-timer[data-state="done"] .topbar-timer__bar-fill{
  background:var(--signal-success);
}
.topbar-timer[data-state="done"] .topbar-timer__value{
  color:var(--signal-success-deep);
}
.topbar-timer__divider{
  width:1px;
  height:20px;
  background:var(--blue-200);
  flex-shrink:0;
}
.topbar-timer__select-label{
  font-size:13px;
  color:var(--text-secondary);
  margin:0;
  display:inline-flex;
  align-items:center;
}
/* Native select: por defecto VISIBLE (fallback sin JS) con estilos básicos.
   Cuando navbar.js construye el custom select añade .tt-select alrededor y lo oculta. */
.topbar-timer__select{
  border:1px solid var(--blue-200) !important;
  border-radius:var(--radius-md) !important;
  font-size:13px !important;
  padding:.3rem .65rem !important;
  background-color:#fff !important;
  color:var(--zl-ink) !important;
  height:auto !important;
  min-width:200px;
}
.tt-select .topbar-timer__select{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
  min-width:0 !important;
}

/* === Custom select (sync con el native) === */
.tt-select{
  position:relative;
  min-width:220px;
  font-family:var(--bs-body-font-family);
}
.tt-select__trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  padding:.35rem .65rem;
  border:1px solid var(--blue-200);
  border-radius:var(--radius-md);
  background:#fff;
  color:var(--zl-ink);
  font-size:13px;
  line-height:1.2;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
  text-align:left;
}
.tt-select__trigger:hover:not([disabled]){ border-color:var(--zl-blue); }
.tt-select__trigger:focus-visible{
  outline:none;
  border-color:var(--zl-blue);
  box-shadow:0 0 0 3px var(--zl-blue);
}
.tt-select__trigger[disabled],
.tt-select.is-disabled .tt-select__trigger{
  background:var(--blue-50);
  color:var(--text-muted);
  cursor:not-allowed;
  pointer-events:none;
}
.tt-select__label{
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.tt-select__chevron{
  flex-shrink:0;
  font-size:14px;
  color:var(--text-muted);
  transition:transform .2s ease;
}
.tt-select.is-open .tt-select__chevron{ transform:rotate(180deg); }

.tt-select__menu{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  z-index:1100;
  min-width:100%;
  max-width:480px;
  width:max-content;
  background:#fff;
  border:1px solid var(--blue-100);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  max-height:320px;
  overflow-y:auto;
  padding:4px;
  display:none;
}
.tt-select.is-open .tt-select__menu{ display:block; }

.tt-select__option{
  display:flex;
  align-items:flex-start;
  gap:6px;
  padding:.5rem .65rem;
  font-size:13px;
  color:var(--zl-ink);
  cursor:pointer;
  border-radius:var(--radius-sm);
  font-variant-numeric:tabular-nums;
  white-space:normal;
  word-break:break-word;
  line-height:1.35;
  transition:background-color .12s ease;
}
.tt-select__option:hover,
.tt-select__option.is-active{ background:var(--blue-50); color:var(--zl-ink); }
.tt-select__option.is-selected{
  background:var(--blue-100);
  color:var(--zl-blue);
  font-weight:600;
}
.tt-select__option.is-selected::before{
  content:"\F26E"; /* bi-check */
  font-family:"bootstrap-icons";
  font-size:14px;
  color:var(--zl-blue);
  flex-shrink:0;
}
.tt-select__option:not(.is-selected)::before{
  content:"";
  width:14px;
  flex-shrink:0;
}
.topbar-timer__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  border-radius:var(--radius-md);
  border:1px solid var(--signal-success);
  background:#fff;
  color:var(--signal-success);
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease;
}
.topbar-timer__btn:hover{
  background:var(--signal-success);
  color:#fff;
}
/* Estado activo: explícito por clase (server-side) o detectado por icono (cliente) */
.topbar-timer__btn--active,
.topbar-timer__btn:has(.bi-stop-fill){
  background:var(--signal-danger);
  border-color:var(--signal-danger);
  color:#fff;
  position:relative;
}
.topbar-timer__btn--active:hover,
.topbar-timer__btn:has(.bi-stop-fill):hover{
  background:var(--signal-danger-deep);
  border-color:var(--signal-danger-deep);
  color:#fff;
}

/* Pulse anillo expansivo cuando está activo — recordatorio sutil */
.topbar-timer__btn--active::after,
.topbar-timer__btn:has(.bi-stop-fill)::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  border:2px solid var(--signal-danger);
  opacity:0;
  animation:topbar-timer-pulse 2s ease-out infinite;
  pointer-events:none;
}
@keyframes topbar-timer-pulse{
  0%   { transform:scale(1);    opacity:.7; }
  100% { transform:scale(1.35); opacity:0;   }
}
@media (prefers-reduced-motion: reduce){
  .topbar-timer__btn--active::after,
  .topbar-timer__btn:has(.bi-stop-fill)::after{ animation:none; opacity:0; }
}
.topbar-timer__btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--zl-blue);
}
.topbar-timer__max{
  font-size:12px;
  color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}
.topbar-timer__ausente{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem .65rem;
  background:#fef3c7;
  color:var(--signal-warning-deep);
  border:1px solid #fde68a;
  border-radius:var(--radius-md);
  font-size:12px;
  font-weight:600;
}
.topbar-timer__ausente .bi{ font-size:14px; }

/* ------------------------------
   Menú de usuario
---------------------------------*/
/* === Pills del topbar (gear, notif, user) — sistema unificado === */
.topbar-gear-btn,
.user-menu-btn,
.notif-btn {
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  border-radius: var(--radius-md);
  color: var(--zl-ink);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.topbar-gear-btn:hover,
.user-menu-btn:hover,
.notif-btn:hover {
  background: var(--blue-100);
  border-color: var(--zl-blue);
  color: var(--zl-ink);
}
.topbar-gear-btn:focus-visible,
.user-menu-btn:focus-visible,
.notif-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--zl-blue);
}

.topbar-gear-btn { padding: .4rem .55rem; }

.user-menu-btn{
  display:flex; align-items:center; gap:.5rem;
  padding:.35rem .65rem;
}
/* Sustituye el caret Bootstrap por un chevron consistente con el resto del sistema */
.user-menu-btn::after{
  content:"\F282"; /* bi-chevron-down */
  font-family:"bootstrap-icons";
  font-size:12px;
  color:var(--text-muted);
  border:none;
  margin:0 0 0 .15rem;
  transition:transform .2s ease;
  line-height:1;
}
.user-menu-btn[aria-expanded="true"]::after{
  transform:rotate(180deg);
  color:var(--zl-blue);
}
.user-menu-avatar{
  width:28px !important; height:28px !important; min-width:28px;
  border-radius:50% !important; object-fit:cover;
  border:2px solid var(--blue-100);
  flex-shrink:0;
  align-self:center;
  display:block;
}
.user-menu-info{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.2; min-width:0; }
.user-menu-name{ font-size:13px; font-weight:500; }
/* Último acceso (ENS op.acc): el usuario debe poder detectar logins que no fueron suyos */
.user-menu-lastlogin{ font-size:10.5px; font-weight:400; color:var(--text-muted); white-space:nowrap; }

.user-menu-dropdown{
  min-width:220px;
  border:1px solid var(--blue-100) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow-lg) !important;
  padding:.4rem 0;
  overflow:hidden;
}
.user-menu-header{
  display:flex; align-items:center; gap:.55rem;
  padding:.55rem .85rem .45rem;
  font-size:12px; font-weight:700;
  color:var(--zl-blue);
  background:var(--blue-50);
  border-bottom:1px solid var(--blue-100);
  pointer-events:none;
}
.user-menu-header-avatar{
  width:26px; height:26px;
  border-radius:50%; object-fit:cover;
  border:2px solid var(--blue-100);
}
.user-menu-item{
  display:flex; align-items:center; gap:.55rem;
  padding:.5rem .85rem;
  font-size:13px; color:var(--text-secondary);
  text-decoration:none;
  transition:background-color .15s ease, color .15s ease;
}
.user-menu-item:hover{ background:var(--blue-50); color:var(--zl-ink); }
.user-menu-item:focus-visible{
  outline:none;
  background:var(--blue-50);
  color:var(--zl-ink);
  box-shadow: inset 0 0 0 2px var(--zl-blue);
}
.user-menu-item .bi{ font-size:14px; width:16px; text-align:center; }
.user-menu-item--logout{ color:var(--signal-danger); }
.user-menu-item--logout:hover{ background:#fef2f2; color:var(--signal-danger-deep); }
.user-menu-divider{ margin:.3rem 0; border-color:var(--blue-100); }

/* ------------------------------
   Notificaciones
---------------------------------*/
.notif-btn{
  position:relative;
  padding:.4rem .55rem;
}

/* Skeleton mientras carga AJAX — mismas dimensiones que el botón final */
.notif-skeleton{
  display:inline-block;
  width:38px;
  height:38px;
  border-radius:var(--radius-md);
  background:linear-gradient(90deg,
    var(--blue-50) 0%,
    var(--blue-100) 50%,
    var(--blue-50) 100%);
  background-size:200% 100%;
  animation:notif-skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes notif-skeleton-shimmer{
  0%   { background-position:  100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce){
  .notif-skeleton{ animation:none; background:var(--blue-100); }
}
.notif-badge{
  position:absolute;
  top:-4px; right:-4px;
  min-width:16px; height:16px;
  border-radius:var(--radius-pill);
  font-size:10px;
  font-weight:600;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
  color:#fff;
  border:2px solid #fff;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
  transform:translateZ(0);
}
.notif-badge--red  { background:var(--signal-danger); }
.notif-badge--amber{ background:var(--signal-warning-deep); } /* texto blanco: AA */

.notif-dropdown{
  list-style:none;
  padding:0; margin:0;
  width:340px;
  max-height:600px;
  overflow-y:auto;
  border:1px solid var(--blue-100) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow-lg) !important;
  background:#fff;
}
.notif-dropdown-header{
  display:flex;
  align-items:center;
  gap:.4rem;
  padding:.55rem .85rem .4rem;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--zl-blue);
  background:var(--blue-50);
  border-bottom:1px solid var(--blue-100);
  pointer-events:none;
}
.notif-dropdown-header--sep{
  margin-top:4px;
  border-top:1px solid var(--blue-100);
}
/* La cabecera de grupo es no interactiva (pointer-events:none), pero si lleva una
   acción (p. ej. el botón «Aprobar todos» del SGI) hay que re-habilitar el clic
   sobre ella y empujarla a la derecha. */
.notif-dropdown-header .notif-item__action{
  margin-left:auto;
  pointer-events:auto;
}
.notif-dropdown-header .notif-item__action *{
  pointer-events:auto;
  text-transform:none;
  letter-spacing:normal;
}
.notif-item{
  display:flex;
  align-items:stretch;
  font-size:13px;
  line-height:1.4;
  border-bottom:1px solid var(--blue-50);
}
.notif-item:last-child{ border-bottom:none; }
.notif-item__link{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:.55rem .85rem;
  color:var(--text-secondary);
  text-decoration:none;
  transition:background-color .15s ease, color .15s ease;
}
.notif-item__link:hover,
.notif-item__link:focus,
.notif-item__link:focus-visible{
  background:var(--blue-50);
  color:var(--zl-ink);
  text-decoration:none;
  outline:none;
}
.notif-item__icon{
  flex-shrink:0;
  width:18px;
  margin-top:1px;
  font-size:14px;
  text-align:center;
  color:var(--zl-blue);
}
.notif-item__text{
  flex:1;
  min-width:0;
  word-break:break-word;
}
.notif-item__action{
  display:flex;
  align-items:center;
  padding-right:.85rem;
  flex-shrink:0;
}

/* Footer siempre al fondo — sticky footer con flexbox */
body.layout-with-sidebar{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
.contenido-div,
.contenido-evaluaciones{
  flex:1 0 auto;
}
.app-footer{
  flex-shrink:0;
  background:#fff;
  border-top:1px solid var(--blue-100);
  font-size:11px !important;
  padding:.35rem 1rem !important;
  line-height:1.4;
}
.app-footer a{ font-size:11px !important; }

/* ---- Drag & drop entre carpetas de documentación ---- */
.doc-item-dragging {
  opacity: 0.35;
  cursor: grabbing;
}

.doc-categoria-box {
  transition: outline 0.1s, background-color 0.1s;
}

.doc-categoria-box.doc-move-target {
  outline: 2px dashed #1e71b8;
  background-color: #eaf3fb !important;
}

/* =========================================================
   OPERACIONES — Grid de Planificación interactivo
   ========================================================= */

.plan-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  min-height: 24px;
}
.plan-status-txt { font-size: 11px; color: #64748b; }


/* =========================================================
   OPERACIONES — Calendario de empleado
   ========================================================= */

/* Cabecera de días (Lun–Vie) */
.op-calendar-header {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-bottom: 4px;
}

.op-cal-header-cell {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
  padding: 4px 0;
}

/* Grid principal del calendario */
.op-calendar-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

/* Celda base */
.op-cal-cell {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color .2s, box-shadow .15s;
}

.op-cal-cell:hover {
  box-shadow: var(--shadow-md);
  border-color: #bfdbfe;
}

/* Celda vacía (relleno de inicio de mes) */
.op-cal-cell--empty {
  background: transparent;
  border-color: transparent;
  pointer-events: none;
}

/* Celda fin de semana */
.op-cal-cell--weekend {
  background: #f8fafc;
  border-color: #f1f5f9;
}

/* Celda de hoy */
.op-cal-cell--today {
  border-color: #1e71b8 !important;
  box-shadow: 0 0 0 1px #1e71b8;
}

/* Celda sobre-asignada */
.op-cal-cell--over {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px #ef4444;
}

/* Número de día */
.op-cal-num {
  font-size: 0.74rem;
  font-weight: 700;
  color: #94a3b8;
  line-height: 1;
  margin-bottom: 0.28rem;
}

.op-cal-cell--today .op-cal-num {
  color: #1e71b8;
}

.op-cal-cell--over .op-cal-num {
  color: #ef4444;
}

/* Bloque de proyecto dentro de la celda */
.op-cal-bloque {
  border-radius: 5px;
  padding: 0.22rem 0.48rem;
  border-left: 3px solid currentColor;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  cursor: default;
}

.op-cal-bloque-label {
  font-size: 0.63rem;
  font-weight: 500;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
}

.op-cal-bloque-horas {
  font-size: 0.6rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Total de horas al pie de la celda */
.op-cal-total {
  font-size: 0.58rem;
  font-weight: 600;
  color: #64748b;
  text-align: right;
  margin-top: auto;
  padding-top: 3px;
  border-top: 1px solid #e2e8f0;
}

.op-cal-cell--over .op-cal-total {
  color: #dc2626;
  font-weight: 700;
}

/* =========================================================
   OPERACIONES — Heatmap de carga del equipo
   ========================================================= */

.op-heatmap-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
  font-size: 11px;
  table-layout: fixed;
}

.op-heatmap-table thead th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
  text-align: center;
  padding: 6px 4px;
  white-space: nowrap;
  background: #f8fafc;
  position: sticky;
  top: 0;
  z-index: 2;
}

.op-heatmap-table thead th.op-hm-sort:hover {
  color: #1e71b8;
}

.op-hm-nombre {
  text-align: left !important;
  font-weight: 600;
  color: #1e3a5f;
  padding: 6px 10px 6px 4px !important;
  white-space: nowrap;
  min-width: 160px;
  width: 160px;
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
}

.op-heatmap-table thead th.op-hm-nombre {
  z-index: 3;
  background: #f8fafc;
}

/* Celda de mes coloreada */
.op-hm-cel {
  width: 56px;
  min-width: 56px;
  height: 40px;
  border-radius: 5px;
  text-align: center;
  vertical-align: middle;
  cursor: default;
  transition: transform .12s;
  line-height: 1.2;
  padding: 3px 2px;
}

.op-hm-cel:hover {
  transform: scale(1.1);
  z-index: 2;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* Fila alterna */
.op-heatmap-table tbody tr:nth-child(even) .op-hm-nombre {
  background: #f8fafc;
}

/* =====================================================================
   RESPONSIVE HARDENING v2 — auditoría exhaustiva
   ===================================================================== */

/* --- Padding lateral del contenido principal: progresivo --- */
@media (max-width: 1199.98px){
  .contenido-div, .contenido-evaluaciones{
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (max-width: 767.98px){
  .contenido-div, .contenido-evaluaciones{
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (max-width: 479.98px){
  .contenido-div, .contenido-evaluaciones{
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* --- Tablas: scroll horizontal universal en mobile/narrow ---
   Cubre 3 escenarios:
   (a) Tabla envuelta por DataTables → div.dataTables_wrapper
   (b) Tabla envuelta en .dt-wrapper o .table-responsive
   (c) Tabla "desnuda" dentro de .integ-card-body
*/
@media (max-width: 1199.98px){
  /* (a) DataTables crea este wrapper automáticamente */
  div.dataTables_wrapper{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* La tabla DataTable puede ser ancha; permitir scroll-x sin comprimir */
  div.dataTables_wrapper > table.dataTable,
  div.dataTables_wrapper .dataTables_scrollHead,
  div.dataTables_wrapper .dataTables_scrollBody{
    min-width: 720px;
  }
  /* (c) Cualquier .integ-card-body con tabla → scroll-x interno */
  .integ-card-body{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .integ-card-body > table,
  .integ-card-body > .dataTables_wrapper > table{
    min-width: 720px;
  }
  /* Forzar que la asignaciones-table pueda ser scrolleada (ya tiene tabla-scroll) */
  .vista-asignaciones .tabla-scroll table{
    min-width: 800px; /* reducido desde 1200px en mobile */
  }
}
@media (max-width: 575.98px){
  /* En móvil estrecho: anchura mínima reducida para que quepa con menos scroll */
  div.dataTables_wrapper > table.dataTable,
  .integ-card-body > table,
  .integ-card-body > .dataTables_wrapper > table{
    min-width: 560px;
  }
}

/* --- Filtros y barras de acción sobre tablas: wrap correcto --- */
@media (max-width: 991.98px){
  /* Cualquier d-flex con filtros + botones → wrap, sin anchos fijos rompiendo */
  .integ-card-header,
  .integ-card-body > .d-flex,
  .integ-card-body > .row.align-items-center{
    flex-wrap: wrap !important;
    gap: .5rem !important;
  }
  /* Inputs/selects con max-width fijos no deben empujar el contenedor */
  .form-select-sm,
  .form-control-sm{
    min-width: 0;
    max-width: 100%;
  }
  /* input-group con max-width inline → permitir reducir */
  .input-group{
    flex-wrap: nowrap;
    min-width: 0;
  }
  /* Inputs de fecha con width:145px inline → caben dos por fila si hace falta */
  input[type="date"][style*="width:145px"],
  input[type="date"][style*="width: 145px"]{
    width: 100% !important;
    min-width: 130px;
    max-width: 160px;
  }
}

/* --- Modales --- */
@media (max-width: 991.98px){
  .modal-xl, .modal-lg{
    max-width: calc(100% - 2rem) !important;
  }
  /* Inline style="max-width:920px" en views/tienda.php — neutralizar */
  .modal-dialog[style*="max-width"]{
    max-width: calc(100% - 2rem) !important;
  }
}

/* --- Cards y KPIs del dashboard --- */
@media (max-width: 991.98px){
  /* Las KPI-cards originales del dashboard usan col-md-3 col-lg-2; OK */
  /* Pero los "fixed-height-box" pueden cortar contenido */
  .fixed-height-box{
    height: auto !important;
    min-height: 200px;
    max-height: 300px;
  }
  /* Charts: que la altura no rompa el flex */
  .chart-card{
    height: auto !important;
    min-height: 280px;
  }
  canvas{
    max-width: 100% !important;
    height: auto !important;
  }
}

/* --- Topbar: sidebar en mobile no debe robar ancho del topbar --- */
@media (max-width: 575.98px){
  /* Sidebar 64px ya está. Topbar usa left:var(--sidebar-width). OK. */
  /* Reducir altura de topbar para ganar espacio vertical */
  .topbar{ height: 52px; padding: 0 8px; }
  /* El despeje de la topbar lo da el padding-top del body; al reducir la topbar
     a 52px, ajustamos AHÍ (no en .contenido-div, que ya lleva su .py-4) para no
     sumar dos compensaciones y dejar una banda muerta bajo la topbar. */
  body.layout-with-sidebar{ padding-top: 52px; }
}

/* --- Imágenes y embeds: nunca desbordan --- */
img, video, iframe, embed, object{
  max-width: 100%;
  height: auto;
}

/* --- Toasts inline: no salir del viewport --- */
@media (max-width: 575.98px){
  [id$="-toast"][style*="position:fixed"],
  [id$="-toast"][style*="position: fixed"],
  .toast.position-fixed{
    left: .5rem !important;
    right: .5rem !important;
    bottom: .5rem !important;
    max-width: calc(100% - 1rem) !important;
    min-width: 0 !important;
  }
}

/* --- Listas largas con pre/code: sin overflow visible --- */
pre, code{
  overflow-x: auto;
  max-width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* --- Asignaciones / heatmap: scroll-x natural --- */
@media (max-width: 991.98px){
  .op-heatmap-table,
  .vista-asignaciones .asignaciones-wrapper{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .vista-asignaciones .asignaciones-wrapper{
    overflow-x: auto !important; /* override del overflow:hidden original */
  }
}

/* =====================================================================
   RESPONSIVE HARDENING v1 (mantenido, complementa al v2 arriba)
   Objetivo: que en <992px y especialmente <768px:
   - Las tablas no desborden el contenedor → scroll horizontal interno
   - El topbar no se monte sobre sí mismo → ocultar piezas no críticas
   - Los modales y forms quepan sin overflow horizontal
   No toca el aspecto en desktop ≥992px.
   ===================================================================== */

/* --- Tablas: scroll horizontal en vez de desbordar --- */
@media (max-width: 991.98px){
  /* Cualquier .dt-wrapper deja de ocultar overflow y permite scroll-x.
     overflow:clip → overflow:auto solo en X; mantiene border-radius con clip-path. */
  .dt-wrapper{
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
  /* La tabla puede ser más ancha que el wrapper sin forzar wrap raro */
  .dt-wrapper > table.dataTable,
  .dt-wrapper > .table{
    min-width: 600px; /* fuerza scroll-x en lugar de comprimir columnas hasta romper */
  }
  /* Cabeceras: dejar wrap si hace falta para que no fuercen scroll innecesario */
  .table thead th{
    white-space: normal;
  }
  /* Búsqueda y paginado de DataTables apilados verticalmente */
  div.dataTables_wrapper div.dataTables_filter,
  div.dataTables_wrapper div.dataTables_length,
  div.dataTables_wrapper div.dataTables_info,
  div.dataTables_wrapper div.dataTables_paginate{
    text-align: left !important;
    float: none !important;
    width: 100%;
  }
  div.dataTables_wrapper div.dataTables_paginate{
    margin-top: .5rem;
  }
  div.dataTables_wrapper .dataTables_filter input{
    width: 100%;
    margin-left: 0 !important;
    margin-top: .25rem;
  }
}

/* --- Topbar: ocultar piezas progresivamente para evitar solapamiento --- */
@media (max-width: 1199.98px){
  /* Ocultar el "/ 8h00m" y el divisor: el valor principal sigue visible */
  .topbar-timer__target{ display: none; }
}
@media (max-width: 991.98px){
  /* Ocultar label, barra de progreso, separador y label "Imputar a" */
  .topbar-timer__label,
  .topbar-timer__bar,
  .topbar-timer__select-label,
  .topbar-timer__divider:first-of-type{ display: none; }
  /* El meter ya no necesita reservar espacio para la barra → min-width:0
     y el contador queda pegado al lado izquierdo del bloque ms-auto */
  .topbar-timer__meter{
    min-width: 0;
    gap: 0;
  }
  /* Reducir gap interno del cronómetro */
  .topbar-timer{ gap: .35rem; }
  /* Nombre de usuario solo icono/avatar */
  .user-menu-info{ display: none; }
  /* Topbar más compacto */
  .topbar{ padding: 0 12px; gap: .5rem; }
  .topbar-title span{
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width: 767.98px){
  /* Ocultar el select "Imputar a" y el ausente — no caben sin solapamiento */
  .topbar-timer__select-label,
  .topbar-timer__select,
  .tt-select,
  .topbar-timer__ausente,
  .topbar-timer__divider{ display: none; }
  /* Mantener solo: contador, barra, botón play/stop */
  .topbar-timer{ flex-shrink: 1; min-width: 0; }
  .topbar-timer__meter{ min-width: 0; }
  .topbar-title__svg,
  .topbar-title .bi{ font-size: 16px; }
  .topbar-title span{ max-width: 100px; }
}
@media (max-width: 479.98px){
  /* En móvil muy pequeño: ocultar título de página (icono lo identifica) */
  .topbar-title span{ display: none; }
}

/* --- Modales: sin overflow horizontal en mobile --- */
@media (max-width: 575.98px){
  .modal-dialog{
    margin: .5rem;
    max-width: calc(100% - 1rem);
  }
  .modal-content{
    padding: 1rem;
  }
  /* Forms con .row → columnas a 100% en móvil ya lo hace Bootstrap (col-md-*),
     pero forzamos que cualquier col-* dentro de modal no desborde */
  .modal-body .col,
  .modal-body [class*="col-"]{
    min-width: 0;
  }
  /* Botones de footer apilados verticalmente */
  .modal-footer{
    flex-direction: column-reverse;
    align-items: stretch;
    gap: .5rem;
  }
  .modal-footer .btn{ margin: 0 !important; width: 100%; }
}

/* --- Forms y cards: prevenir overflow general --- */
@media (max-width: 991.98px){
  /* Cualquier card/section no debería desbordar horizontalmente */
  .card, .card-body{
    min-width: 0;
  }
  /* Inputs largos (urls, emails) no deben empujar el layout */
  input[type="url"],
  input[type="email"],
  input[type="text"]{
    max-width: 100%;
  }
  /* Form sections: el grid 2 columnas pasa a 1 */
  .form-section__grid,
  .row.g-3 > .col-md-6,
  .row > .col-md-6{
    /* Bootstrap ya lo hace, pero refuerzo para que tema custom no sobreescriba */
    min-width: 0;
  }
  /* Helpers y .form-text con texto largo no salen del contenedor */
  .form-text{
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* --- Headings y títulos largos: nunca cortados ni montados --- */
@media (max-width: 767.98px){
  h1, h2, h3, h4, h5, h6,
  .page-title,
  .section-title{
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  /* Filtros y barras de acción apilados */
  .page-actions,
  .filtros-bar,
  .toolbar{
    flex-wrap: wrap;
    gap: .5rem;
  }
  .page-actions > *,
  .filtros-bar > *{
    flex: 1 1 auto;
  }
}

/* --- Kanban / cards horizontales: scroll-x en móvil --- */
@media (max-width: 991.98px){
  .kanban-board,
  .kanban-columns,
  .scroll-x{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
}

/* --- Dashboard KPIs: 2 columnas en tablet, 1 en móvil --- */
@media (max-width: 767.98px){
  .kpi-grid > *,
  .dashboard-kpis > *{
    min-width: 0;
  }
}

/* =====================================================================
   BOTONES DE ACCIÓN: solo icono en mobile (<576px)
   Aplica a botones del cuerpo de vistas que tienen <i class="bi"> + texto.
   Excluye: modales, table-actions, kanban, topbar, sidebar, dropdowns,
   paginación, tabs y botones-icono ya colapsados.
   ===================================================================== */
/* .plan-tab colapsa antes (≤767px) — son varias tabs en una fila y se desbordan rápido */
@media (max-width: 767.98px){
  .contenido-div .plan-tab:has(> .bi),
  .contenido-evaluaciones .plan-tab:has(> .bi){
    font-size: 0 !important;
    padding-left: .55rem !important;
    padding-right: .55rem !important;
    gap: 0 !important;
    line-height: 1 !important;
    min-width: 34px;
  }
  .contenido-div .plan-tab:has(> .bi) > .bi,
  .contenido-evaluaciones .plan-tab:has(> .bi) > .bi{
    font-size: 15px !important;
    margin: 0 !important;
    line-height: 1 !important;
  }
}

@media (max-width: 575.98px){
  /* Colapsar texto vía font-size:0; el icono interior recupera tamaño */
  .contenido-div .btn:has(> .bi),
  .contenido-evaluaciones .btn:has(> .bi){
    font-size: 0 !important;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
    gap: 0 !important;
    line-height: 1 !important;
    min-width: 34px;
  }
  .contenido-div .btn:has(> .bi) > .bi,
  .contenido-evaluaciones .btn:has(> .bi) > .bi{
    font-size: 15px !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  /* RESTAURAR texto donde es esencial — selector más específico para ganar
     a la regla anterior sin necesidad de !important adicional */
  .contenido-div .modal .btn:has(> .bi),
  .contenido-evaluaciones .modal .btn:has(> .bi),
  .contenido-div .table-actions .btn:has(> .bi),
  .contenido-div .kanban-card .btn:has(> .bi),
  .contenido-div .dropdown-menu .btn:has(> .bi),
  .contenido-div .nav .btn:has(> .bi),
  .contenido-div .pagination .btn:has(> .bi),
  .contenido-div .rte-toolbar .btn:has(> .bi){
    font-size: 0.8125rem !important;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
    min-width: auto !important;
  }
  .contenido-div .modal .btn:has(> .bi) > .bi,
  .contenido-evaluaciones .modal .btn:has(> .bi) > .bi{
    font-size: 0.875rem !important;
    margin-right: .25rem !important;
  }
  /* Botones que SÍ son icono-puro de origen: respetar tamaño */
  .contenido-div .btn-icon,
  .contenido-evaluaciones .btn-icon,
  .contenido-div .btn-close,
  .contenido-div .plan-cal-btn{
    font-size: inherit !important;
    min-width: auto;
  }

  /* Botones de DataTables (Copy/CSV/Excel/PDF): solo icono ya están bien;
     si tienen texto, colapsarlo también */
  .dt-buttons .btn:has(> .bi){
    font-size: 0 !important;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }
  .dt-buttons .btn:has(> .bi) > .bi{
    font-size: 15px !important;
    margin: 0 !important;
  }
  /* DataTables Buttons que NO usan <i class="bi"> sino texto plano:
     reducir padding y font para que quepan */
  .dt-buttons .btn:not(:has(> .bi)){
    font-size: 11px !important;
    padding: .25rem .5rem !important;
  }
}

/* =====================================================================
   DataTables Responsive plugin — integración visual
   ===================================================================== */
/* El plugin Responsive ya gestiona el ancho: dejamos que la tabla colapse
   columnas en lugar de forzar scroll-x con min-width. Anula el min-width
   defensivo del bloque RESPONSIVE HARDENING v2 para tablas DT con responsive. */
@media (max-width: 1199.98px){
  .dataTables_wrapper.dtr-inline > table.dataTable,
  .integ-card-body > .dataTables_wrapper.dtr-inline > table.dataTable{
    min-width: 0 !important;
  }
  .integ-card-body:has(> .dataTables_wrapper.dtr-inline){
    overflow-x: visible;
  }
}

/* Botón "+" de expansión: estilo corporativo */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before{
  background-color: var(--zl-blue) !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 1px var(--zl-blue) !important;
  font-weight: 700 !important;
  line-height: 13px !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before{
  background-color: var(--signal-danger) !important;
  box-shadow: 0 0 0 1px var(--signal-danger) !important;
}

/* Detalle expandido: estilo coherente con el CRM */
table.dataTable > tbody > tr.child ul.dtr-details{
  padding: .5rem 0;
}
table.dataTable > tbody > tr.child ul.dtr-details > li{
  border-bottom: 1px solid var(--blue-100);
  padding: .35rem 0;
  display: flex;
  align-items: center;
  gap: .5rem;
}
table.dataTable > tbody > tr.child ul.dtr-details > li:last-child{
  border-bottom: none;
}
table.dataTable > tbody > tr.child span.dtr-title{
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  min-width: 110px;
}
table.dataTable > tbody > tr.child span.dtr-data{
  font-size: 12px;
  color: var(--zl-ink);
  flex: 1;
}

/* =====================================================================
   Tablas SIN DataTables (audit, listados simples) — fix de overflow
   ===================================================================== */
@media (max-width: 991.98px){
  /* El wrapper .table-responsive ya da scroll-x; reforzarlo */
  .table-responsive,
  .table-responsive.dt-wrapper{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* En la tabla de auditoría las celdas tienen .text-nowrap que las hace
     desbordar visualmente. Permitir wrap a partir de 992px hacia abajo. */
  .audit-table td.text-nowrap,
  .audit-table th{
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  /* Reducir tamaño y padding para que quepa más por celda */
  .audit-table td,
  .audit-table th{
    font-size: 11px !important;
    padding: .35rem .4rem !important;
  }
  /* Anchos sugeridos para que las columnas críticas no se estrujen
     (la tabla mantiene scroll-x si aún así no cabe) */
  .audit-table{
    min-width: 540px;
    table-layout: auto;
  }
}
@media (max-width: 575.98px){
  .audit-table td,
  .audit-table th{
    font-size: 10px !important;
    padding: .3rem .25rem !important;
  }
  .audit-table{ min-width: 460px; }
  /* La columna "(#1)" detrás del nombre se puede ocultar — info redundante */
  .audit-table td .text-muted.small{ display: none; }
}

/* Patrón general: cualquier celda con .text-nowrap dentro de tabla en mobile
   pasa a wrap si el ancho no permite scroll-x cómodo. */
@media (max-width: 575.98px){
  .table td.text-nowrap{
    white-space: normal !important;
    word-break: break-word;
  }
}

/* =====================================================================
   Cabeceras abreviadas (mobile) — clase aplicada por table-headers-mobile.js
   ===================================================================== */
.table thead th.th-abbrev{
  text-align: center;
  letter-spacing: 0;
  cursor: help;
  /* Ancho mínimo para que la "X." no se trague el padding de sort */
  min-width: 28px;
}
.table thead th.th-abbrev.sorting,
.table thead th.th-abbrev.sorting_asc,
.table thead th.th-abbrev.sorting_desc{
  /* Padding extra para que la flecha de sort no pise la inicial */
  padding-left: 22px !important;
  padding-right: 18px !important;
}