/* ============================================================================
   ingenieros_modern.css — la seccion de Ingenieros
   ----------------------------------------------------------------------------
   Se carga DESPUES de custom.css, sidebar_modern.css, inicio_modern.css y
   solicitudes_modern.css.

   TODO esta acotado a  .ifx-ingenieros , clase que lleva ingenieros_c.php en
   su <div class="right_col">. Fuera de ahi este archivo no aplica a nada.

   La paleta (--ifx-*) NO se declara aqui: vive en inicio_modern.css, que ya
   incluye .ifx-ingenieros y .ifx-ingenieros-pagina en su lista de anclas.

   ---- POR QUE ES UNA HOJA APARTE Y NO UNA LINEA EN LA DE SOLICITUDES --------
   Se penso en ampliar los selectores de solicitudes_modern.css a las dos
   pantallas. No sale: casi todas sus reglas cuelgan de #datatable_solicitudes
   y de nombres de columna que aqui no existen (clave, equipo, sucursal,
   fechas, estado). Lo que de verdad se comparte son los TOKENS, y esos ya
   estan compartidos. Lo que se repite aqui es la forma —misma ficha, misma
   pastilla, mismo panel de vidrio, mismos 12px de radio— escrita contra las
   columnas de esta tabla. Los numeros son los mismos a proposito: si algun
   dia cambian, cambian en las dos.
   ========================================================================== */


/* ===================== EL HUECO DEL FINAL DE LA PAGINA ====================
   Mismo bug del tema documentado en solicitudes_modern.css: setContentHeight()
   de build/js/custom.min.js congela el min-height de .right_col midiendo la
   tabla ANTES de que DataTables pagine, y deja miles de pixeles de vacio. Con
   el campo pintado ese vacio deja de leerse como fondo y se lee como agujero.
   .main_container ya lleva min-height:100vh, que es lo que garantiza que el
   campo llegue abajo. */
body .container.body .right_col.ifx-ingenieros { min-height: 0 !important; }


/* ============================ ENCABEZADO ==================================
   El marcado viejo envolvia el titulo en una <table> de maquetacion con un
   <td align="right"> para el boton. Se sustituye por el mismo bloque que usa
   solicitudes: .ifx-ing-encabezado con .page-title dentro. */
.ifx-ingenieros .ifx-ing-encabezado { width: 100%; }
.ifx-ingenieros .ifx-ing-encabezado td { vertical-align: bottom; }

.ifx-ingenieros .ifx-page-title .ifx-ing-sub {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: var(--ifx-tinta-suave);
}
/* El <i class="fa fa-users"> que traia el <h3>: en solicitudes el titulo va
   pelado y aqui tiene que verse igual. El icono ya esta en el menu lateral,
   que es donde dice en que seccion estas. */
.ifx-ingenieros .ifx-page-title h3 > .fa { display: none; }

/* El boton de Agregar. Era .btn-round.btn-success del tema, verde chillon
   sobre el campo azul; el mismo cambio que en solicitudes. */
.ifx-ingenieros .ifx-ing-nuevo.btn,
.ifx-ingenieros .ifx-ing-nuevo.btn-success {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(160deg, var(--ifx-azul-claro) 0%, var(--ifx-azul) 42%, var(--ifx-azul-hondo) 100%);
  color: #FFF;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1px;
  white-space: nowrap;
  box-shadow:
      inset 0 1px 0 rgba(255,255,255,.34),
      0 12px 22px -14px rgba(47, 95, 196, .90);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s cubic-bezier(.2,.8,.2,1);
}
.ifx-ingenieros .ifx-ing-nuevo.btn:hover,
.ifx-ingenieros .ifx-ing-nuevo.btn:focus {
  color: #FFF;
  transform: translateY(-2px);
  box-shadow:
      inset 0 1px 0 rgba(255,255,255,.34),
      0 20px 30px -16px rgba(47, 95, 196, .95);
}
.ifx-ingenieros .ifx-ing-nuevo.btn:active { transform: translateY(0); }
.ifx-ingenieros .ifx-ing-nuevo.btn:focus-visible { outline: 2px solid #FFF; outline-offset: 2px; }


/* ============================== LA BARRA =================================
   Dos niveles, igual que en solicitudes:
     1. las fichas, que son la clasificacion (aqui el nivel del ingeniero);
     2. los atajos, que son cortes de operacion y por eso van en texto y no en
        tarjeta.
   ========================================================================= */

.ifx-ingenieros .ifx-ing-barra { margin-bottom: 16px; }

.ifx-ingenieros .ifx-ing-fichas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ifx-ingenieros .ifx-ing-ficha {
  --f-color: var(--ifx-gris);
  --f-halo:  var(--ifx-gris-halo);

  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 14px 9px 13px;
  border: 0;
  border-radius: var(--ifx-radio-chico);
  /* recorta la banda de ::before al redondeo: en activo la banda va de arriba
     a abajo y sin esto sus esquinas salen cuadradas */
  overflow: hidden;
  background: var(--ifx-vidrio);
  -webkit-backdrop-filter: var(--ifx-desenfoque);
  backdrop-filter: var(--ifx-desenfoque);
  box-shadow:
      inset 0 1px 0 var(--ifx-filo-alto),
      0 10px 20px -16px rgba(30, 42, 80, .40),
      0 0 0 1px var(--ifx-anillo);
  color: var(--ifx-tinta);
  text-align: left;
  cursor: pointer;
  transition:
      transform .18s cubic-bezier(.2,.8,.2,1),
      box-shadow .18s cubic-bezier(.2,.8,.2,1),
      background-color .18s ease;
}

.ifx-ingenieros .ifx-ing-ficha::before {
  content: "";
  position: absolute;
  left: 0; top: 9px; bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--f-color);
  opacity: .85;
  transform-origin: center;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
}

.ifx-ingenieros .ifx-ing-ficha-n {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.5px;
  color: var(--f-color);
  font-variant-numeric: tabular-nums;
}
.ifx-ingenieros .ifx-ing-ficha-t {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ifx-tinta);
}
.ifx-ingenieros .ifx-ing-ficha-t .fa {
  font-size: 11px;
  color: var(--f-color);
  opacity: .9;
}

.ifx-ingenieros .ifx-ing-ficha:hover {
  transform: translateY(-2px);
  box-shadow:
      inset 0 1px 0 var(--ifx-filo-alto),
      0 18px 28px -18px rgba(30, 42, 80, .52),
      0 0 0 1px var(--ifx-anillo);
}
.ifx-ingenieros .ifx-ing-ficha:hover::before { transform: scaleY(1.18); }
.ifx-ingenieros .ifx-ing-ficha:active { transform: translateY(0) scale(.985); }

.ifx-ingenieros .ifx-ing-ficha:focus-visible {
  outline: 2px solid var(--ifx-azul);
  outline-offset: 2px;
}

/* La ficha encendida. El tinte se pinta SOBRE una base blanca propia —capa de
   abajo el color puro del nivel, encima un velo blanco casi opaco— y no con el
   halo a secas: el halo es el color al 22% y sin base blanca lo que se ve es
   esa transparencia mezclada con el campo azul de la pagina, que sale sucia.
   Es exactamente el mismo arreglo que en solicitudes_modern.css. */
.ifx-ingenieros .ifx-ing-ficha-activa {
  background:
      linear-gradient(157deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.82) 100%),
      var(--f-color);
  box-shadow:
      inset 0 1px 0 rgba(255,255,255,.70),
      inset 0 0 0 1px var(--f-halo),
      0 14px 24px -16px rgba(30, 42, 80, .46);
}
/* seleccionada = levantada, no hundida */
.ifx-ingenieros .ifx-ing-ficha-activa { transform: translateY(-1px); }
.ifx-ingenieros .ifx-ing-ficha-activa:active { transform: translateY(0) scale(.985); }

.ifx-ingenieros .ifx-ing-ficha-activa::before { top: 0; bottom: 0; width: 4px; opacity: 1; border-radius: 0; }
.ifx-ingenieros .ifx-ing-ficha-activa .ifx-ing-ficha-t { color: var(--f-color); }
.ifx-ingenieros .ifx-ing-ficha-activa .ifx-ing-ficha-t .fa { opacity: 1; }

/* "Todos" no tiene color de nivel: su --f-color es la tinta fuerte y teñir con
   ella da un gris. Blanco limpio y el anillo hace el trabajo. */
.ifx-ingenieros .ifx-ing-ficha-todos.ifx-ing-ficha-activa {
  background: var(--ifx-vidrio-alto);
  box-shadow:
      inset 0 1px 0 var(--ifx-filo-alto),
      inset 0 0 0 1.5px rgba(37, 48, 74, .28),
      0 14px 24px -16px rgba(30, 42, 80, .46);
}

/* colores por ficha: los mismos que las pastillas de la tabla, para que ficha
   y fila se lean como la misma cosa. */
.ifx-ingenieros .ifx-ing-ficha-todos { --f-color: var(--ifx-tinta-fuerte); --f-halo: rgba(37, 48, 74, .12); }
.ifx-ingenieros .ifx-ing-ficha-n0    { --f-color: var(--ifx-azul-hondo);   --f-halo: var(--ifx-azul-halo); }
.ifx-ingenieros .ifx-ing-ficha-n1    { --f-color: var(--ifx-cian-hondo);   --f-halo: rgba(19, 126, 143, .18); }
.ifx-ingenieros .ifx-ing-ficha-n2    { --f-color: var(--ifx-ok);           --f-halo: var(--ifx-ok-halo); }
.ifx-ingenieros .ifx-ing-ficha-nx    { --f-color: var(--ifx-aviso);        --f-halo: var(--ifx-aviso-halo); }

/* ---- nivel 2: los atajos ---- */
.ifx-ingenieros .ifx-ing-atajos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 0 2px;
}
.ifx-ingenieros .ifx-ing-atajos-izq {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ifx-ingenieros .ifx-ing-atajo {
  --a-color: var(--ifx-tinta-suave);
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--a-color);
  font-size: 12.5px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ifx-ingenieros .ifx-ing-atajo b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ifx-ingenieros .ifx-ing-atajo:hover { background: rgba(255,255,255,.55); color: var(--ifx-tinta-fuerte); }
.ifx-ingenieros .ifx-ing-atajo:active { background: rgba(255,255,255,.75); }
.ifx-ingenieros .ifx-ing-atajo:focus-visible { outline: 2px solid var(--ifx-azul); outline-offset: 1px; }
.ifx-ingenieros .ifx-ing-atajo-avi { --a-color: var(--ifx-aviso); }
.ifx-ingenieros .ifx-ing-atajo-activo { background: var(--a-color); color: #FFF; }
.ifx-ingenieros .ifx-ing-atajo-activo:hover { background: var(--a-color); color: #FFF; }

/* ---- el interruptor de densidad ---- */
.ifx-ingenieros .ifx-ing-densidad {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  box-shadow: 0 0 0 1px var(--ifx-anillo);
  color: var(--ifx-tinta-suave);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ifx-ingenieros .ifx-ing-densidad:hover { background: #FFF; color: var(--ifx-tinta-fuerte); }
.ifx-ingenieros .ifx-ing-densidad:focus-visible { outline: 2px solid var(--ifx-azul); outline-offset: 2px; }
.ifx-ingenieros .ifx-ing-densidad .fa { font-size: 11px; }

/* salida de emergencia cuando el filtro esconde lo que se busca */
.ifx-ingenieros .ifx-ing-vacio {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--ifx-tinta);
}
.ifx-ingenieros .ifx-ing-vacio-b {
  border: 0;
  padding: 0;
  background: none;
  color: var(--ifx-azul-hondo);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}


/* ============================== EL PANEL ================================== */
.ifx-ingenieros .x_panel {
  border: 0;
  padding: 0;
  margin-bottom: 22px;
  border-radius: var(--ifx-radio);
  background: var(--ifx-vidrio);
  -webkit-backdrop-filter: var(--ifx-desenfoque);
  backdrop-filter: var(--ifx-desenfoque);
  box-shadow: var(--ifx-sombra);
}
.ifx-ingenieros .x_panel .x_content {
  padding: 6px 20px 14px;
  margin-top: 0;
}
.ifx-ingenieros .x_content > br { display: none; }


/* ======================= CONTROLES DE DATATABLES ==========================
   La tabla la inicializa el TEMA: build/js/custom.js, linea 2527,
   $('#datatable').dataTable(). No se toca; el buscador, el selector de cuantas
   y el paginador se quedan donde DataTables los pone y se visten desde aqui,
   igual que en solicitudes. */

.ifx-ingenieros .dataTables_wrapper { padding-top: 12px; }

.ifx-ingenieros .dataTables_length,
.ifx-ingenieros .dataTables_filter {
  font-size: 12.5px;
  color: var(--ifx-tinta-suave);
}
.ifx-ingenieros .dataTables_filter { text-align: right; }
.ifx-ingenieros .dataTables_filter label { font-weight: 500; width: 100%; max-width: 340px; }

.ifx-ingenieros .dataTables_filter input,
.ifx-ingenieros .dataTables_length select {
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.72);
  box-shadow: var(--ifx-bandeja-borde);
  color: var(--ifx-tinta);
  font-size: 13px;
  transition: box-shadow .16s ease, background-color .16s ease;
}
.ifx-ingenieros .dataTables_filter input {
  width: 100%;
  margin-left: 10px;
}
.ifx-ingenieros .dataTables_filter input:focus,
.ifx-ingenieros .dataTables_length select:focus {
  outline: none;
  background: #FFF;
  box-shadow: inset 0 0 0 1.5px var(--ifx-azul), 0 0 0 4px var(--ifx-azul-halo);
}

.ifx-ingenieros .dataTables_info {
  padding-top: 12px;
  font-size: 12.5px;
  color: var(--ifx-tinta-suave);
}

.ifx-ingenieros .dataTables_paginate .pagination { margin: 8px 0 0; }
.ifx-ingenieros .dataTables_paginate .pagination > li > a,
.ifx-ingenieros .dataTables_paginate .pagination > li > span {
  border: 0;
  margin: 0 3px;
  min-width: 34px;
  text-align: center;
  border-radius: 9px;
  background: rgba(255,255,255,.60);
  color: var(--ifx-tinta);
  box-shadow: 0 0 0 1px var(--ifx-anillo);
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.ifx-ingenieros .dataTables_paginate .pagination > li > a:hover {
  background: #FFF;
  color: var(--ifx-azul-hondo);
}
.ifx-ingenieros .dataTables_paginate .pagination > .active > a,
.ifx-ingenieros .dataTables_paginate .pagination > .active > a:hover,
.ifx-ingenieros .dataTables_paginate .pagination > .active > span {
  background: var(--ifx-azul);
  color: #FFF;
  box-shadow: 0 6px 14px -8px rgba(47, 95, 196, .80);
}
.ifx-ingenieros .dataTables_paginate .pagination > .disabled > a,
.ifx-ingenieros .dataTables_paginate .pagination > .disabled > span {
  background: transparent;
  color: rgba(93, 107, 133, .5);
  box-shadow: none;
}


/* ================================ LA TABLA ================================ */

.ifx-ingenieros table#datatable {
  border: 0;
  margin: 0;
  background: transparent;
  border-collapse: separate;
  border-spacing: 0;
}

/* ---- el encabezado, pegajoso. Opaco a proposito: sobre el vidrio, un fondo
        translucido dejaria ver las filas pasando por debajo. ---- */
.ifx-ingenieros table#datatable > thead > tr > th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  border: 0;
  border-bottom: 1px solid var(--ifx-borde-suave);
  padding: 9px 14px;
  background: #F2F5FA;
  color: var(--ifx-tinta-suave);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  white-space: nowrap;
  /* Bootstrap ya alinea los <th> a la izquierda, pero el tema centra los de
     .table-bordered en algunas pantallas y aqui el encabezado tiene que caer
     a plomo con el contenido de su columna. */
  text-align: left;
}

/* ---- las flechitas de ordenar: las del tema son imagenes de fondo en gris
        que desentonan. Se apagan y se dibujan dos triangulos con bordes, que
        heredan el color y no piden ningun archivo. ---- */
.ifx-ingenieros table#datatable > thead > tr > th.sorting,
.ifx-ingenieros table#datatable > thead > tr > th.sorting_asc,
.ifx-ingenieros table#datatable > thead > tr > th.sorting_desc {
  background-image: none !important;
  padding-right: 24px;
  position: sticky;
  cursor: pointer;
  transition: color .15s ease;
}
.ifx-ingenieros table#datatable > thead > tr > th.sorting:hover,
.ifx-ingenieros table#datatable > thead > tr > th.sorting_asc,
.ifx-ingenieros table#datatable > thead > tr > th.sorting_desc { color: var(--ifx-azul-hondo); }

.ifx-ingenieros table#datatable > thead > tr > th.sorting::after,
.ifx-ingenieros table#datatable > thead > tr > th.sorting_asc::after,
.ifx-ingenieros table#datatable > thead > tr > th.sorting_desc::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.ifx-ingenieros table#datatable > thead > tr > th.sorting::before {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  margin-top: -7px;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid currentColor;
  opacity: .28;
}
.ifx-ingenieros table#datatable > thead > tr > th.sorting::after {
  margin-top: 2px;
  border-top: 5px solid currentColor;
  opacity: .28;
}
.ifx-ingenieros table#datatable > thead > tr > th.sorting_asc::after {
  margin-top: -2px;
  border-bottom: 5px solid currentColor;
  opacity: 1;
}
.ifx-ingenieros table#datatable > thead > tr > th.sorting_desc::after {
  margin-top: -3px;
  border-top: 5px solid currentColor;
  opacity: 1;
}

/* ---- anchos de columna -----------------------------------------------------
   El reparto viejo lo fijaba un  width="40%"  en el <th> de contacto, que le
   daba a la columna de correos y telefonos casi la mitad de la tabla mientras
   el nombre de la persona —lo que se busca— se quedaba con lo que sobraba.
   Aqui manda el nombre. Van con !important porque DataTables escribe un width
   EN LINEA sobre cada <th> despues de medir. */
.ifx-ingenieros table#datatable > thead > tr > th.ifx-th-ing      { width: 32% !important; }
.ifx-ingenieros table#datatable > thead > tr > th.ifx-th-nivel    { width: 1%; }
.ifx-ingenieros table#datatable > thead > tr > th.ifx-th-contacto { width: 34% !important; }
.ifx-ingenieros table#datatable > thead > tr > th.ifx-th-nss      { width: 1%; }
.ifx-ingenieros table#datatable > thead > tr > th.ifx-th-opciones { width: 1%; }

/* el tope de altura de la fila: max-width:0 es el truco para recortar dentro
   de una tabla de reparto automatico. El navegador sigue dando a la columna el
   ancho que le toca por el <th>, pero la celda deja de crecer con su contenido
   y el texto se corta con puntos suspensivos en vez de saltar de renglon. */
.ifx-ingenieros table#datatable > tbody > tr > td.ifx-ing-persona,
.ifx-ingenieros table#datatable > tbody > tr > td.ifx-ing-contacto {
  max-width: 0;
  overflow: hidden;
}

/* ---- las celdas ---- */
.ifx-ingenieros table#datatable > tbody > tr > td {
  border: 0;
  border-bottom: 1px solid var(--ifx-renglon);
  padding: 9px 14px;
  vertical-align: middle;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ifx-tinta);
  background: transparent;
  transition: background-color .16s ease;
}
.ifx-ingenieros table#datatable > tbody > tr:last-child > td { border-bottom: 0; }

/* custom.css trae, sin acotar a nada,  td span { line-height: 28px }  — un
   <span> dentro de CUALQUIER celda mide 28px de interlinea. La celda de
   contacto lleva seis spans en tres bloques y se iba sola a 84px de alto. La
   regla del tema pesa 0,0,2, asi que basta con nombrar el contexto. */
.ifx-ingenieros table#datatable > tbody > tr > td span { line-height: inherit; }

/* El rayado se invierte: Bootstrap pinta los impares con rgba(0,0,0,.05) —una
   sombra— y sobre el vidrio eso se ve sucio, ademas de competir con el realce
   del raton, que es blanco. Aqui la banda ACLARA. Ojo con el selector: la
   regla de Bootstrap va sobre el <tr>, no sobre el <td>. */
.ifx-ingenieros table#datatable.table-striped > tbody > tr:nth-of-type(odd),
.ifx-ingenieros table#datatable.table-striped > tbody > tr.odd {
  background-color: rgba(255, 255, 255, .30);
}

.ifx-ingenieros table#datatable > tbody > tr[data-ir] { cursor: pointer; }
.ifx-ingenieros table#datatable > tbody > tr:hover > td {
  background: rgba(255, 255, 255, .78);
}
.ifx-ingenieros table#datatable > tbody > tr:focus { outline: none; }
.ifx-ingenieros table#datatable > tbody > tr:focus-visible > td {
  background: rgba(255, 255, 255, .90);
  box-shadow: inset 0 2px 0 var(--ifx-azul), inset 0 -2px 0 var(--ifx-azul);
}

/* --- la celda de la persona -------------------------------------------------
   Es la columna ancla, el equivalente de la clave en solicitudes. El monograma
   hace lo que alli hacia el consecutivo: dar algo que se reconozca de un
   vistazo antes de leer el nombre entero. Va teñido del color del nivel, asi
   que la fila dice el nivel dos veces —monograma y pastilla— y se puede barrer
   la lista por color sin leer. */
.ifx-ingenieros .ifx-ing-persona-c {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ifx-ingenieros .ifx-ing-mono {
  --m-color: var(--ifx-gris);
  --m-halo:  var(--ifx-gris-halo);

  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--m-halo);
  box-shadow: inset 0 0 0 1px var(--m-color);
  color: var(--m-color);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .3px;
  transition: transform .15s ease;
}
.ifx-ingenieros table#datatable > tbody > tr:hover .ifx-ing-mono { transform: scale(1.06); }

.ifx-ingenieros .ifx-ing-mono-0 { --m-color: var(--ifx-azul-hondo); --m-halo: var(--ifx-azul-halo); }
.ifx-ingenieros .ifx-ing-mono-1 { --m-color: var(--ifx-cian-hondo); --m-halo: rgba(19, 126, 143, .18); }
.ifx-ingenieros .ifx-ing-mono-2 { --m-color: var(--ifx-ok);         --m-halo: var(--ifx-ok-halo); }
.ifx-ingenieros .ifx-ing-mono-x { --m-color: var(--ifx-aviso);      --m-halo: var(--ifx-aviso-halo); }

/* el nombre y, debajo, el distintivo de team lead — pero en el MISMO renglon
   cuando cabe: el <br> que traia el marcado viejo hacia que cada team lead
   midiera el doble que sus compañeros y la lista quedaba en escalera. */
.ifx-ingenieros .ifx-ing-persona-t {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ifx-ingenieros .ifx-ing-nombre {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--ifx-tinta-fuerte);
  text-decoration: none;
}
.ifx-ingenieros .ifx-ing-nombre:hover,
.ifx-ingenieros .ifx-ing-nombre:focus {
  color: var(--ifx-azul-hondo);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* El distintivo de team lead. Era un .badge.badge-info del tema —azul
   cyan de Bootstrap, del que no queda nada mas en la pantalla— en su propio
   renglon. Aqui es una pastilla chica al lado del nombre. */
.ifx-ingenieros .ifx-ing-tl {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(37, 48, 74, .10);
  box-shadow: inset 0 0 0 1px rgba(37, 48, 74, .30);
  color: var(--ifx-tinta-fuerte);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
}
.ifx-ingenieros .ifx-ing-tl .fa { font-size: 9.5px; }

/* --- la pastilla de nivel ---------------------------------------------------
   Misma forma y mismo tamaño que la pastilla de estado de solicitudes: es lo
   que hace que las dos tablas se lean como el mismo sistema. Antes el nivel
   era texto pelado en una celda. */
.ifx-ingenieros .ifx-ing-nivel {
  --p-color: var(--ifx-gris);
  --p-halo:  var(--ifx-gris-halo);

  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  background: var(--p-halo);
  box-shadow: inset 0 0 0 1px var(--p-color);
  color: var(--p-color);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.ifx-ingenieros .ifx-ing-nivel .fa { font-size: 10.5px; }

.ifx-ingenieros .ifx-ing-nivel-0 { --p-color: var(--ifx-azul-hondo); --p-halo: var(--ifx-azul-halo); }
.ifx-ingenieros .ifx-ing-nivel-1 { --p-color: var(--ifx-cian-hondo); --p-halo: rgba(19, 126, 143, .18); }
.ifx-ingenieros .ifx-ing-nivel-2 { --p-color: var(--ifx-ok);         --p-halo: var(--ifx-ok-halo); }
.ifx-ingenieros .ifx-ing-nivel-x { --p-color: var(--ifx-aviso);      --p-halo: var(--ifx-aviso-halo); }
.ifx-ingenieros td.ifx-ing-td-nivel { white-space: nowrap; }

/* --- contacto ---------------------------------------------------------------
   Tres <div> apilados con un icono suelto delante de cada uno, y el tercero
   salia SIEMPRE aunque el telefono de emergencias estuviera vacio: quedaba un
   renglon con un icono de telefono y un badge rojo "Emergencias" y nada mas.
   Ahora son dos lineas —correo arriba, telefonos abajo— y cada trozo solo se
   pinta si tiene contenido (lo decide ingenieros_c.php). */
.ifx-ingenieros .ifx-ing-contacto-l {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ifx-ingenieros .ifx-ing-contacto-l + .ifx-ing-contacto-l { margin-top: 2px; }

.ifx-ingenieros .ifx-ing-contacto .fa {
  width: 13px;
  margin-right: 6px;
  color: rgba(93, 107, 133, .70);
  font-size: 11px;
  text-align: center;
}
.ifx-ingenieros .ifx-ing-correo {
  color: var(--ifx-azul-hondo);
  text-decoration: none;
}
.ifx-ingenieros .ifx-ing-correo:hover { text-decoration: underline; text-underline-offset: 2px; }
.ifx-ingenieros .ifx-ing-tel { font-variant-numeric: tabular-nums; }
/* el segundo telefono, detras del primero y separado por un punto medio: el
   mismo recurso que usa la sucursal en la tabla de solicitudes */
.ifx-ingenieros .ifx-ing-tel2 { color: var(--ifx-tinta-suave); }
.ifx-ingenieros .ifx-ing-tel2::before {
  content: "·";
  margin: 0 6px;
  color: rgba(126,152,178,.75);
}
/* "Emergencias" era un .badge.badge-danger: rojo pleno gritando en cada fila
   por un dato que es bueno tener, no una alarma. Aqui es una marca discreta. */
.ifx-ingenieros .ifx-ing-emg {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(169, 59, 48, .12);
  color: var(--ifx-alerta);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2px;
  vertical-align: 1px;
}
/* cuando falta el correo o el telefono principal: es lo que cuenta el atajo
   "Sin contacto" de la barra, y aqui se ve por que */
.ifx-ingenieros .ifx-ing-falta {
  color: rgba(93, 107, 133, .70);
  font-style: italic;
}

/* --- NSS -------------------------------------------------------------------- */
.ifx-ingenieros .ifx-ing-nss {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ifx-tinta);
}
.ifx-ingenieros .ifx-ing-vacio-d { color: rgba(93, 107, 133, .55); }

/* --- opciones ---------------------------------------------------------------
   El titulo de la columna va solo para lectores de pantalla: la palabra
   "OPCIONES" medía mas que los dos botones que hay debajo. */
.ifx-ingenieros .ifx-ing-oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.ifx-ingenieros table#datatable > thead > tr > th.ifx-th-opciones { cursor: default; padding: 9px 12px 9px 4px; }
.ifx-ingenieros table#datatable > tbody > tr > td.ifx-ing-opciones { padding-left: 4px; padding-right: 12px; }
.ifx-ingenieros table#datatable > thead > tr > th.ifx-th-opciones::before,
.ifx-ingenieros table#datatable > thead > tr > th.ifx-th-opciones::after { content: none !important; }

.ifx-ingenieros .ifx-ing-opciones { white-space: nowrap; }
.ifx-ingenieros .ifx-ing-opciones a { text-decoration: none; }
.ifx-ingenieros .ifx-ing-opciones .boton-opciones-tabla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  margin: 0 1px;
  border-radius: 9px;
  background: rgba(255,255,255,.62);
  box-shadow: 0 0 0 1px var(--ifx-anillo);
  color: var(--ifx-tinta-suave);
  font-size: 12.5px;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.ifx-ingenieros .ifx-ing-opciones a:hover .boton-opciones-tabla {
  background: #FFF;
  color: var(--ifx-azul-hondo);
  transform: translateY(-1px);
}
.ifx-ingenieros .ifx-ing-opciones a:hover .fa-trash { color: var(--ifx-alerta); }

/* --- el estado vacio de DataTables --- */
.ifx-ingenieros table#datatable td.dataTables_empty {
  padding: 44px 20px;
  text-align: center;
  color: var(--ifx-tinta-suave);
  font-size: 13.5px;
}
.ifx-ingenieros table#datatable td.dataTables_empty::before {
  content: "\f0c0";
  font-family: FontAwesome;
  display: block;
  margin-bottom: 10px;
  font-size: 26px;
  opacity: .35;
}

/* --- el relevo al cambiar de filtro ---
   Mismo escalonado de 22ms que en solicitudes: las filas a la vez se leian
   como un parpadeo. */
.ifx-ingenieros table#datatable > tbody.ifx-ing-refresca > tr {
  animation: ifx-ing-entra .3s cubic-bezier(.2,.8,.2,1) both;
}
.ifx-ingenieros tbody.ifx-ing-refresca > tr:nth-child(1)  { animation-delay: 0ms; }
.ifx-ingenieros tbody.ifx-ing-refresca > tr:nth-child(2)  { animation-delay: 22ms; }
.ifx-ingenieros tbody.ifx-ing-refresca > tr:nth-child(3)  { animation-delay: 44ms; }
.ifx-ingenieros tbody.ifx-ing-refresca > tr:nth-child(4)  { animation-delay: 66ms; }
.ifx-ingenieros tbody.ifx-ing-refresca > tr:nth-child(5)  { animation-delay: 88ms; }
.ifx-ingenieros tbody.ifx-ing-refresca > tr:nth-child(6)  { animation-delay: 110ms; }
.ifx-ingenieros tbody.ifx-ing-refresca > tr:nth-child(7)  { animation-delay: 132ms; }
.ifx-ingenieros tbody.ifx-ing-refresca > tr:nth-child(8)  { animation-delay: 154ms; }
.ifx-ingenieros tbody.ifx-ing-refresca > tr:nth-child(9)  { animation-delay: 176ms; }
.ifx-ingenieros tbody.ifx-ing-refresca > tr:nth-child(n+10) { animation-delay: 198ms; }

@keyframes ifx-ing-entra {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}


/* =============================== COMPACTO ================================
   La misma tabla con las filas mas juntas. Solo cambia el relleno y el cuerpo
   de letra: nada se esconde. Mismos numeros que en solicitudes. */
.ifx-ingenieros.ifx-ing-compacto table#datatable > tbody > tr > td {
  padding: 4px 12px;
  font-size: 12.5px;
}
.ifx-ingenieros.ifx-ing-compacto table#datatable > thead > tr > th { padding: 7px 12px; }
.ifx-ingenieros.ifx-ing-compacto .ifx-ing-mono { width: 26px; height: 26px; font-size: 10.5px; }
.ifx-ingenieros.ifx-ing-compacto .ifx-ing-nivel { padding: 3px 9px 3px 8px; font-size: 11px; }
.ifx-ingenieros.ifx-ing-compacto .ifx-ing-tl { font-size: 10px; padding: 1px 7px; }
.ifx-ingenieros.ifx-ing-compacto .ifx-ing-opciones .boton-opciones-tabla { width: 24px; height: 24px; font-size: 11.5px; }
/* en compacto el correo y los telefonos se juntan en un renglon: es la unica
   celda de dos lineas y sin esto compacto no bajaria de 46px */
.ifx-ingenieros.ifx-ing-compacto .ifx-ing-contacto-l { display: inline; }
.ifx-ingenieros.ifx-ing-compacto .ifx-ing-contacto-l + .ifx-ing-contacto-l { margin: 0 0 0 10px; }


/* =============================== TELEFONO ================================
   La tabla de cinco columnas no cabe en un telefono. Mismo marcado: cada fila
   pasa a ser una tarjeta y cada celda estrena su etiqueta, que viaja en
   data-etiqueta. Igual que en solicitudes. */
@media (max-width: 767px) {

  .ifx-ingenieros .x_panel .x_content { padding: 6px 12px 12px; }

  .ifx-ingenieros .dataTables_filter { text-align: left; }
  .ifx-ingenieros .dataTables_filter label { max-width: none; }
  .ifx-ingenieros .dataTables_filter input { margin: 6px 0 0; display: block; }
  .ifx-ingenieros .dataTables_length { text-align: left; }
  .ifx-ingenieros .dataTables_length label { font-weight: 500; }

  .ifx-ingenieros table#datatable > thead { display: none; }

  .ifx-ingenieros table#datatable,
  .ifx-ingenieros table#datatable > tbody,
  .ifx-ingenieros table#datatable > tbody > tr,
  .ifx-ingenieros table#datatable > tbody > tr > td {
    display: block;
    width: auto !important;
  }

  .ifx-ingenieros table#datatable > tbody > tr,
  .ifx-ingenieros table#datatable.table-striped > tbody > tr:nth-of-type(odd),
  .ifx-ingenieros table#datatable.table-striped > tbody > tr.odd {
    position: relative;
    margin: 0 0 12px;
    padding: 14px 16px 12px;
    border-radius: var(--ifx-radio-chico);
    background-color: rgba(255,255,255,.60);
    box-shadow: inset 0 0 0 1px var(--ifx-anillo);
  }
  .ifx-ingenieros table#datatable > tbody > tr:hover > td { background: transparent; }

  .ifx-ingenieros table#datatable > tbody > tr > td {
    border: 0 !important;
    padding: 5px 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .ifx-ingenieros table#datatable > tbody > tr > td::before {
    content: attr(data-etiqueta);
    flex: 0 0 74px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--ifx-tinta-suave);
    line-height: 1.5;
  }

  /* la persona hace de titulo de la tarjeta: sin etiqueta y con su propia
     linea. El hueco de la derecha es para la pastilla de nivel, que se sube a
     la esquina igual que el estado en solicitudes. */
  .ifx-ingenieros table#datatable > tbody > tr > td.ifx-ing-persona {
    display: block;
    max-width: none;
    padding: 0 118px 8px 0;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--ifx-renglon) !important;
  }
  .ifx-ingenieros table#datatable > tbody > tr > td.ifx-ing-persona::before { content: none; }
  .ifx-ingenieros .ifx-ing-nombre { font-size: 14.5px; }
  /* el distintivo de TL se baja debajo del nombre: al lado no cabe con el
     hueco que se reserva para la pastilla */
  .ifx-ingenieros .ifx-ing-persona-t { flex-wrap: wrap; gap: 4px 8px; }
  .ifx-ingenieros .ifx-ing-nombre { flex: 1 1 100%; white-space: normal; }

  .ifx-ingenieros table#datatable > tbody > tr > td.ifx-ing-td-nivel {
    position: absolute;
    top: 12px; right: 14px;
    padding: 0;
  }
  .ifx-ingenieros table#datatable > tbody > tr > td.ifx-ing-td-nivel::before { content: none; }

  /* en la tarjeta hay ancho de sobra: el recorte con puntos suspensivos es
     cosa del escritorio, donde la fila tiene que caber en una linea */
  .ifx-ingenieros table#datatable > tbody > tr > td.ifx-ing-contacto {
    max-width: none;
    display: block;
  }
  .ifx-ingenieros table#datatable > tbody > tr > td.ifx-ing-contacto::before { display: block; margin-bottom: 3px; }
  .ifx-ingenieros .ifx-ing-contacto-l { white-space: normal; }

  .ifx-ingenieros table#datatable > tbody > tr > td.ifx-ing-opciones {
    justify-content: flex-end;
    padding-top: 8px;
  }
  .ifx-ingenieros table#datatable > tbody > tr > td.ifx-ing-opciones::before { content: none; }

  /* fichas en dos columnas. La base NO es calc(50% - 4px): dos de esas mas el
     hueco de 8px suman justo el ancho y basta medio pixel de redondeo para que
     la segunda se vaya al renglon siguiente. Con 42% sobran 30px de holgura y
     el flex-grow las estira hasta llenar el renglon igual. */
  .ifx-ingenieros .ifx-ing-ficha {
    flex: 1 1 42%;
    min-width: 0;
    padding: 9px 12px 9px 13px;
  }
  .ifx-ingenieros .ifx-ing-ficha-n { font-size: 17px; }
  .ifx-ingenieros .ifx-ing-ficha-t { font-size: 11.5px; }

  .ifx-ingenieros .ifx-ing-atajos { gap: 10px; }

  .ifx-ingenieros .ifx-ing-encabezado,
  .ifx-ingenieros .ifx-ing-encabezado tbody,
  .ifx-ingenieros .ifx-ing-encabezado tr,
  .ifx-ingenieros .ifx-ing-encabezado td { display: block; width: auto !important; }
}


/* ========================= MENOS MOVIMIENTO =============================== */
/* Quien lo pide en su sistema no ve ni desplazamientos ni entradas animadas.
   Los cambios de color se quedan: son informacion, no adorno. */
@media (prefers-reduced-motion: reduce) {
  .ifx-ingenieros .ifx-ing-ficha,
  .ifx-ingenieros .ifx-ing-ficha::before,
  .ifx-ingenieros .ifx-ing-nuevo.btn,
  .ifx-ingenieros .ifx-ing-mono,
  .ifx-ingenieros .ifx-ing-opciones .boton-opciones-tabla {
    transition-property: background-color, color, box-shadow;
  }
  .ifx-ingenieros .ifx-ing-ficha:hover,
  .ifx-ingenieros .ifx-ing-ficha:active,
  .ifx-ingenieros .ifx-ing-ficha-activa,
  .ifx-ingenieros .ifx-ing-nuevo.btn:hover,
  .ifx-ingenieros table#datatable > tbody > tr:hover .ifx-ing-mono,
  .ifx-ingenieros .ifx-ing-opciones a:hover .boton-opciones-tabla { transform: none; }
  .ifx-ingenieros .ifx-ing-ficha:hover::before { transform: none; }
  .ifx-ingenieros table#datatable > tbody.ifx-ing-refresca > tr { animation: none; }
}