/* ============================================================================
   solicitudes_modern.css — la seccion de Solicitudes (fase 1: los listados)
   ----------------------------------------------------------------------------
   Se carga DESPUES de custom.css, sidebar_modern.css e inicio_modern.css.

   TODO esta acotado a  .ifx-solicitudes , clase que llevan los cuatro
   listados en su <div class="right_col">. Fuera de ahi este archivo no aplica
   a nada: ninguna otra pantalla del sistema cambia.

   La paleta (--ifx-*) NO se declara aqui: vive en inicio_modern.css, que la
   declara para todas las pantallas rediseñadas.

   Las cuatro pantallas:
     solicitudes_c.php               Propietario, Gte. admin., Gte. op., TL
     ingenieros_solicitudes_c.php    ingeniero de campo
     ingenieros_tl_solicitudes_c.php TL (entrada desde su detalle)
     clientes_solicitudes_c.php      cliente propietario y administrativo
   ========================================================================== */


/* ===================== EL HUECO DEL FINAL DE LA PAGINA ====================
   Bug del tema, no del rediseño, pero aqui es donde se ve.

   setContentHeight() de build/js/custom.min.js mide $BODY.outerHeight() y con
   ese numero congela el min-height de .right_col. Corre en su
   $(document).ready, y custom.min.js se carga ANTES que js/ifix_functions.js:
   en ese instante DataTables todavia no ha paginado y la <table> tiene las
   217 filas dentro. Mide ~19,000px, los escribe como min-height y no vuelve a
   corregirlo; un segundo despues DataTables recorta a 10 filas, el contenido
   baja a ~1,300px y el min-height se queda donde estaba.

   Medido en la pantalla real con 217 filas:
       documento 19,213px | min-height 19,135px | contenido 1,294px
       -> 17,919px de vacio
   Y quitando las tres hojas del rediseño el hueco seguia siendo 17,453px: es
   del tema. Lo que cambio es que antes ese vacio era #F7F7F7, el mismo color
   que la columna, y se leia como fondo de pagina; ahora el campo esta pintado
   y se lee como un agujero.

   El min-height del tema es un estilo EN LINEA, asi que hace falta
   !important para ganarle. No se sustituye por otro valor porque
   .main_container ya lleva min-height:100vh (inicio_modern.css), que es lo que
   garantiza que el campo llegue abajo cuando la tabla es corta.

   Cuando le toque a otra pantalla con tabla larga (fase 2 y 3), se le añade
   su clase a este selector. */
body .container.body .right_col.ifx-solicitudes { min-height: 0 !important; }


/* ============================ ENCABEZADO ================================== */

/* La tabla de layout que envuelve el titulo es del marcado viejo y sigue ahi
   para no tocar mas de la cuenta. */
.ifx-solicitudes .ifx-sol-encabezado { width: 100%; }
.ifx-solicitudes .ifx-sol-encabezado td { vertical-align: bottom; }

.ifx-solicitudes .ifx-page-title .ifx-sol-sub {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: var(--ifx-tinta-suave);
}

/* El boton de Agregar. Era .btn-round.btn-success del tema, verde chillon
   sobre el campo azul. */
.ifx-solicitudes .ifx-sol-nueva.btn,
.ifx-solicitudes .ifx-sol-nueva.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 10px 20px -10px rgba(47, 95, 196, .70),
      0 0 0 1px rgba(47, 95, 196, .22);
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s cubic-bezier(.2,.8,.2,1);
}
.ifx-solicitudes .ifx-sol-nueva.btn:hover,
.ifx-solicitudes .ifx-sol-nueva.btn:focus {
  color: #FFF;
  transform: translateY(-1px);
  box-shadow:
      inset 0 1px 0 rgba(255,255,255,.40),
      0 16px 26px -12px rgba(47, 95, 196, .78),
      0 0 0 1px rgba(47, 95, 196, .30);
}
.ifx-solicitudes .ifx-sol-nueva.btn:active { transform: translateY(0); }
.ifx-solicitudes .ifx-sol-nueva.btn:focus-visible {
  outline: 2px solid var(--ifx-azul-hondo);
  outline-offset: 3px;
}


/* ============================== LA BARRA =================================
   Va en dos niveles a proposito. Antes eran siete tarjetas de vidrio en fila y
   se leia como un muro de cajas: todas pesaban lo mismo aunque no signifiquen
   lo mismo.

     nivel 1, las fichas:  Todas + los cinco estados. Es la clasificacion.
     nivel 2, los atajos:  Abiertas · Sin programar · Vencidas. Son preguntas
                           de operacion, no estados, y por eso van en texto y
                           no en tarjeta.
   ========================================================================= */

.ifx-solicitudes .ifx-sol-barra { margin-bottom: 16px; }

.ifx-solicitudes .ifx-sol-fichas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ifx-solicitudes .ifx-sol-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 de la ficha: en estado 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;
  /* Solo transform y box-shadow: son las dos que el navegador puede componer
     sin volver a calcular el diseño de la pagina. */
  transition:
      transform .18s cubic-bezier(.2,.8,.2,1),
      box-shadow .18s cubic-bezier(.2,.8,.2,1),
      background-color .18s ease;
}

/* la banda de color del estado, sobre el borde izquierdo.
   Se anima con scaleY y no con top/bottom: escalar lo compone la GPU,
   mover los bordes obliga a recalcular el diseño en cada fotograma. */
.ifx-solicitudes .ifx-sol-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-solicitudes .ifx-sol-ficha-n {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.5px;
  color: var(--f-color);
  font-variant-numeric: tabular-nums;
}
.ifx-solicitudes .ifx-sol-ficha-t {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ifx-tinta);
}
.ifx-solicitudes .ifx-sol-ficha-t .fa {
  font-size: 11px;
  color: var(--f-color);
  opacity: .9;
}

.ifx-solicitudes .ifx-sol-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-solicitudes .ifx-sol-ficha:hover::before { transform: scaleY(1.18); }
/* el hundido al pulsar: sin esto el clic no tiene acuse y la ficha se siente
   muerta durante los ~200ms que tarda el filtrado */
.ifx-solicitudes .ifx-sol-ficha:active { transform: translateY(0) scale(.985); }

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

/* la ficha encendida.
   Antes era  background: var(--f-halo)  a secas, y ahi estaba el problema: el
   halo es el color del estado al 22-24% de opacidad, asi que la ficha PERDIA
   su base blanca y lo que se veia era ese 24% mezclado con el campo azul-gris
   de la pagina (mas el backdrop-filter, que lo enturbia todavia mas). El ambar
   de "En revision" salia caqui sucio y la ficha activa parecia apagada, no
   encendida, justo al reves de lo que tiene que comunicar.

   Ahora el tinte se pinta SOBRE una base blanca propia: la capa de abajo es el
   color puro del estado y encima va un velo blanco casi opaco. El resultado es
   el mismo tono en pastel para los cinco estados, sin que el fondo de la
   pagina se cuele, y la ficha activa sigue leyendose como tarjeta blanca —
   solo que teñida. */
.ifx-solicitudes .ifx-sol-ficha-activa {
  background:
      linear-gradient(157deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.82) 100%),
      var(--f-color);
  /* el anillo saturado de 1.5px pesaba de mas ahora que la ficha va teñida y
     la banda izquierda es el doble de ancha: con el halo basta para cerrarla. */
  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: mismo gesto que el hover para que el
   clic no parezca que apaga la ficha. */
.ifx-solicitudes .ifx-sol-ficha-activa { transform: translateY(-1px); }
.ifx-solicitudes .ifx-sol-ficha-activa:active { transform: translateY(0) scale(.985); }

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

/* "Todas" no tiene color de estado: su --f-color es la tinta fuerte, y teñir
   con ella da un gris. Se la deja en blanco limpio y el anillo hace el
   trabajo, que es como se distingue "sin filtro" de "filtrado por X". */
.ifx-solicitudes .ifx-sol-ficha-todas.ifx-sol-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 cinco que las pastillas de la tabla, para que
   ficha y fila se lean como la misma cosa. */
.ifx-solicitudes .ifx-sol-ficha-todas { --f-color: var(--ifx-tinta-fuerte); --f-halo: rgba(37, 48, 74, .12); }
.ifx-solicitudes .ifx-sol-ficha-e0    { --f-color: var(--ifx-alerta);       --f-halo: var(--ifx-alerta-halo); }
.ifx-solicitudes .ifx-sol-ficha-e1    { --f-color: var(--ifx-aviso);        --f-halo: var(--ifx-aviso-halo); }
.ifx-solicitudes .ifx-sol-ficha-e2    { --f-color: var(--ifx-azul-hondo);   --f-halo: var(--ifx-azul-halo); }
.ifx-solicitudes .ifx-sol-ficha-e3    { --f-color: var(--ifx-cian-hondo);   --f-halo: rgba(19, 126, 143, .18); }
.ifx-solicitudes .ifx-sol-ficha-e4    { --f-color: var(--ifx-ok);           --f-halo: var(--ifx-ok-halo); }

/* ---- nivel 2: los atajos --------------------------------------------------
   Sin tarjeta ni fondo: son enlaces con cuenta. Asi el ojo entiende que no
   compiten con las fichas de arriba. */
.ifx-solicitudes .ifx-sol-atajos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 0 2px;
}
.ifx-solicitudes .ifx-sol-atajos-izq {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ifx-solicitudes .ifx-sol-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-solicitudes .ifx-sol-atajo b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ifx-solicitudes .ifx-sol-atajo:hover { background: rgba(255,255,255,.55); color: var(--ifx-tinta-fuerte); }
.ifx-solicitudes .ifx-sol-atajo:active { background: rgba(255,255,255,.75); }
.ifx-solicitudes .ifx-sol-atajo:focus-visible { outline: 2px solid var(--ifx-azul); outline-offset: 1px; }
.ifx-solicitudes .ifx-sol-atajo-avi { --a-color: var(--ifx-aviso); }
.ifx-solicitudes .ifx-sol-atajo-ale { --a-color: var(--ifx-alerta); }
.ifx-solicitudes .ifx-sol-atajo-activo {
  background: var(--a-color);
  color: #FFF;
}
.ifx-solicitudes .ifx-sol-atajo-activo:hover { background: var(--a-color); color: #FFF; }

/* ---- el interruptor de densidad ---- */
.ifx-solicitudes .ifx-sol-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-solicitudes .ifx-sol-densidad:hover { background: #FFF; color: var(--ifx-tinta-fuerte); }
.ifx-solicitudes .ifx-sol-densidad:focus-visible { outline: 2px solid var(--ifx-azul); outline-offset: 2px; }
.ifx-solicitudes .ifx-sol-densidad .fa { font-size: 11px; }

/* salida de emergencia cuando el filtro esconde lo que se busca */
.ifx-solicitudes .ifx-sol-vacio {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--ifx-tinta);
}
.ifx-solicitudes .ifx-sol-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 ==================================
   Sin overflow:hidden. Lo llevaba para recortar contra las esquinas
   redondeadas, pero convierte al panel en el contenedor de desplazamiento y
   con eso el encabezado pegajoso de la tabla deja de pegarse. Nada del
   contenido llega a las esquinas —.x_content tiene relleno— asi que no hacia
   falta. */
.ifx-solicitudes .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-solicitudes .x_panel .x_content {
  padding: 6px 20px 14px;
  margin-top: 0;
}
/* el <br> suelto que traia el marcado viejo arriba de la tabla */
.ifx-solicitudes .x_content > br { display: none; }


/* ======================= CONTROLES DE DATATABLES ==========================
   No se puede tocar la inicializacion (vive en js/ifix_functions.js, que no
   se modifica), asi que el buscador, el selector de cuantas y el paginador se
   quedan donde DataTables los pone y se visten desde aqui. */

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

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

.ifx-solicitudes .dataTables_filter input,
.ifx-solicitudes .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-solicitudes .dataTables_filter input {
  width: 100%;
  margin-left: 10px;
}
.ifx-solicitudes .dataTables_filter input:focus,
.ifx-solicitudes .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-solicitudes .dataTables_info {
  padding-top: 12px;
  font-size: 12.5px;
  color: var(--ifx-tinta-suave);
}

.ifx-solicitudes .dataTables_paginate .pagination { margin: 8px 0 0; }
.ifx-solicitudes .dataTables_paginate .pagination > li > a,
.ifx-solicitudes .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-solicitudes .dataTables_paginate .pagination > li > a:hover {
  background: #FFF;
  color: var(--ifx-azul-hondo);
}
.ifx-solicitudes .dataTables_paginate .pagination > .active > a,
.ifx-solicitudes .dataTables_paginate .pagination > .active > a:hover,
.ifx-solicitudes .dataTables_paginate .pagination > .active > span {
  background: var(--ifx-azul);
  color: #FFF;
  box-shadow: 0 6px 14px -8px rgba(47, 95, 196, .80);
}
.ifx-solicitudes .dataTables_paginate .pagination > .disabled > a,
.ifx-solicitudes .dataTables_paginate .pagination > .disabled > span {
  background: transparent;
  color: rgba(93, 107, 133, .5);
  box-shadow: none;
}


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

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

/* ---- el encabezado, pegajoso -----------------------------------------------
   Con 15 filas visibles el nombre de las columnas se pierde al desplazarse.
   Tiene que ir OPACO: sobre el vidrio, un fondo translucido dejaria ver las
   filas pasando por debajo. */
.ifx-solicitudes table#datatable_solicitudes > 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;
}

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

.ifx-solicitudes table#datatable_solicitudes > thead > tr > th.sorting::after,
.ifx-solicitudes table#datatable_solicitudes > thead > tr > th.sorting_asc::after,
.ifx-solicitudes table#datatable_solicitudes > 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;
}
/* sin ordenar: dos triangulos apagados, uno arriba y otro abajo */
.ifx-solicitudes table#datatable_solicitudes > 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-solicitudes table#datatable_solicitudes > thead > tr > th.sorting::after {
  margin-top: 2px;
  border-top: 5px solid currentColor;
  opacity: .28;
}
.ifx-solicitudes table#datatable_solicitudes > thead > tr > th.sorting_asc::after {
  margin-top: -2px;
  border-bottom: 5px solid currentColor;
  opacity: 1;
}
.ifx-solicitudes table#datatable_solicitudes > thead > tr > th.sorting_desc::after {
  margin-top: -3px;
  border-top: 5px solid currentColor;
  opacity: 1;
}

/* ---- anchos de columna -----------------------------------------------------
   DataTables reparte por contenido y lo hacia mal: la clave se quedaba con
   130px y se partia en dos renglones, mientras "Servicio" se llevaba 152px
   para decir siempre lo mismo. Estas son sugerencias (width sobre <th>), no
   camisas de fuerza: la tabla sigue en table-layout:auto y reparte el resto
   entre cliente y equipo, que son las que de verdad necesitan aire. */
.ifx-solicitudes table#datatable_solicitudes > thead > tr > th.ifx-th-clave    { width: 1%; }
/* Servicio sube de 12% a 16%: con 110px se quedaba en "Mantenimie…" y el tipo
   de servicio es justo lo que hay que leer de un vistazo. El aire sale del
   equipo, que con 22% iba sobrado. */
/* Van con !important porque DataTables escribe un width EN LINEA sobre cada
   <th> despues de medir, y un estilo en linea le gana a cualquier clase. */
.ifx-solicitudes table#datatable_solicitudes > thead > tr > th.ifx-th-cliente  { width: 20% !important; }
.ifx-solicitudes table#datatable_solicitudes > thead > tr > th.ifx-th-equipo   { width: 23% !important; }
.ifx-solicitudes table#datatable_solicitudes > thead > tr > th.ifx-th-servicio { width: 9%  !important; }
.ifx-solicitudes table#datatable_solicitudes > thead > tr > th.ifx-th-fecha    { width: 1%; }
.ifx-solicitudes table#datatable_solicitudes > thead > tr > th.ifx-th-estado   { width: 1%; }
.ifx-solicitudes table#datatable_solicitudes > thead > tr > th.ifx-th-opciones { width: 1%; }

/* --- y el tope de altura de la fila ----------------------------------------
   Aqui estaba lo que hacia que la fila siguiera midiendo 84px despues de
   juntar cliente y sucursal en un renglon: los nombres largos —"Radiologia
   Medica Especializada de Chiapas"— se partian en tres y cuatro renglones y
   estiraban la fila entera. Medido: filas de 74px la mas baja y 104px la mas
   alta, con el equipo ocupando una sola linea.

   max-width:0 es el truco de siempre 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. Con los anchos
   de arriba la mayoria de los nombres cabe entero; el recorte es la red. */
.ifx-solicitudes table#datatable_solicitudes > tbody > tr > td.ifx-sol-cliente,
.ifx-solicitudes table#datatable_solicitudes > tbody > tr > td.ifx-sol-equipo,
.ifx-solicitudes table#datatable_solicitudes > tbody > tr > td.ifx-sol-servicio {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- las celdas ---- */
.ifx-solicitudes table#datatable_solicitudes > 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;
  /* La transicion va AQUI y no en el <tr>: el realce del raton pinta el fondo
     de la CELDA, asi que una transicion en la fila no aplicaba a nada y el
     realce entraba de golpe. */
  transition: background-color .16s ease;
}
.ifx-solicitudes table#datatable_solicitudes > tbody > tr:last-child > td { border-bottom: 0; }

/* ESTA era la razon de fondo de que la fila se viera inflada.
   custom.css trae, sin acotar a nada:

       td span { line-height: 28px; }

   Un span dentro de CUALQUIER celda de CUALQUIER tabla del sistema mide 28px
   de interlinea, venga de donde venga su letra. Medido antes del arreglo: el
   <td> calculaba 16.9px pero cada <span> de dentro, 28px. La celda de fecha,
   que lleva dos spans en bloque, se iba a 56px de contenido ella sola; la
   pastilla de estado, a 36px. De ahi salian los 88px de fila.

   La regla del tema pesa 0,0,2 (dos elementos), asi que basta con nombrar el
   contexto para ganarle sin !important. */
.ifx-solicitudes table#datatable_solicitudes > tbody > tr > td span { line-height: inherit; }

/* El rayado se invierte. Bootstrap pinta los renglones 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 en vez
   de oscurecer.
   Ojo con el selector: la regla de Bootstrap va sobre el <tr>, no sobre el
   <td>. Apuntar al <td> no la apaga, solo la tapa a medias. */
.ifx-solicitudes table#datatable_solicitudes.table-striped > tbody > tr:nth-of-type(odd),
.ifx-solicitudes table#datatable_solicitudes.table-striped > tbody > tr.odd {
  background-color: rgba(255, 255, 255, .30);
}

.ifx-solicitudes table#datatable_solicitudes > tbody > tr[data-ir] { cursor: pointer; }
/* el realce sube a .78 para que se lea igual sobre banda y sobre hueco */
.ifx-solicitudes table#datatable_solicitudes > tbody > tr:hover > td {
  background: rgba(255, 255, 255, .78);
}
/* la fila es alcanzable con el teclado (tabindex lo pone el JS); sin este
   anillo, quien navega con Tab no sabe donde esta */
.ifx-solicitudes table#datatable_solicitudes > tbody > tr:focus { outline: none; }
.ifx-solicitudes table#datatable_solicitudes > 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 clave --------------------------------------------------
   Es la columna ancla de la fila. El prefijo del cliente se repite en todas
   sus solicitudes y no distingue nada, asi que va apagado y chico; el año y
   el consecutivo, que es lo que se lee y se dicta, en negritas. */
.ifx-solicitudes .ifx-sol-clave { white-space: nowrap; }
.ifx-solicitudes .ifx-sol-clave a,
.ifx-solicitudes .ifx-sol-clave a.liga_tablas {
  text-decoration: none;
  color: var(--ifx-azul-hondo);
}
.ifx-solicitudes .ifx-sol-clave-p {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ifx-tinta-suave);
  letter-spacing: .2px;
}
.ifx-solicitudes .ifx-sol-clave-n {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.1px;
}
.ifx-solicitudes .ifx-sol-clave a:hover .ifx-sol-clave-n { text-decoration: underline; text-underline-offset: 2px; }

/* --- cliente y equipo -------------------------------------------------------
   En un solo renglon: el nombre y, detras, la sucursal como sufijo apagado
   separada por un punto medio. Antes iban en dos renglones y eran la mitad de
   los 88px de alto que medía la fila. */
.ifx-solicitudes .ifx-sol-linea1 {
  font-weight: 600;
  color: var(--ifx-tinta-fuerte);
}
.ifx-solicitudes .ifx-sol-suc {
  color: var(--ifx-tinta-suave);
  font-size: 12px;
}
.ifx-solicitudes .ifx-sol-suc::before {
  content: "·";
  margin: 0 6px;
  color: rgba(126,152,178,.75);
}
.ifx-solicitudes .ifx-sol-linea1 a,
.ifx-solicitudes .ifx-sol-suc a { color: inherit; text-decoration: none; }
.ifx-solicitudes .ifx-sol-linea1 a:hover,
.ifx-solicitudes .ifx-sol-suc a:hover { color: var(--ifx-azul-hondo); text-decoration: underline; text-underline-offset: 2px; }

/* El badge de estado operativo, ahora solo cuando el equipo NO esta operativo.
   Y va DELANTE del nombre, no detras: con la celda recortada, un badge detras
   de "Monitor Philips IntelliVue MX450" se quedaba fuera del recorte, es decir
   desaparecia justo en las filas donde importa. Delante, la excepcion es lo
   primero que se ve y lo que se recorta es el nombre, que se puede adivinar. */
.ifx-solicitudes .ifx-sol-equipo .badge {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2px;
  vertical-align: 1px;
  /* "Parcialmente funcionando" son 24 caracteres y se comia la celda entera:
     quedaba el badge y tres puntos donde iba el nombre del equipo. Con el tope
     el badge se recorta el primero y el nombre conserva su sitio. El texto
     completo del badge lo pone el widget compartido y no se toca. */
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ifx-solicitudes .ifx-sol-equipo > div { display: inline; }

/* --- servicio -------------------------------------------------------------- */
.ifx-solicitudes .ifx-sol-servicio { color: var(--ifx-tinta); }

/* --- fechas ---------------------------------------------------------------- */
.ifx-solicitudes .ifx-sol-fecha { white-space: nowrap; }
.ifx-solicitudes .ifx-sol-fecha-d {
  display: block;
  font-variant-numeric: tabular-nums;
  color: var(--ifx-tinta-fuerte);
}
.ifx-solicitudes .ifx-sol-fecha-h {
  display: block;
  font-size: 11.5px;
  color: var(--ifx-tinta-suave);
}
.ifx-solicitudes .ifx-sol-vacia { color: rgba(93, 107, 133, .55); }

/* semaforo de antiguedad, solo sobre lo que sigue abierto */
.ifx-solicitudes .ifx-sol-fecha-tibia .ifx-sol-fecha-h { color: var(--ifx-aviso); font-weight: 600; }
.ifx-solicitudes .ifx-sol-fecha-vieja .ifx-sol-fecha-h { color: var(--ifx-alerta); font-weight: 600; }

/* la columna de Atencion */
.ifx-solicitudes .ifx-sol-sinprog .ifx-sol-fecha-h { color: rgba(93, 107, 133, .70); font-style: italic; }
.ifx-solicitudes .ifx-sol-hoy     .ifx-sol-fecha-h { color: var(--ifx-azul-hondo); font-weight: 700; }
.ifx-solicitudes .ifx-sol-vencida .ifx-sol-fecha-d { color: var(--ifx-alerta); }
.ifx-solicitudes .ifx-sol-vencida .ifx-sol-fecha-h { color: var(--ifx-alerta); font-weight: 700; }

/* el punto delante del texto: marca las tres situaciones que piden accion */
.ifx-solicitudes .ifx-sol-fecha-tibia .ifx-sol-fecha-h::before,
.ifx-solicitudes .ifx-sol-fecha-vieja .ifx-sol-fecha-h::before,
.ifx-solicitudes .ifx-sol-hoy         .ifx-sol-fecha-h::before,
.ifx-solicitudes .ifx-sol-vencida     .ifx-sol-fecha-h::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
}

/* --- la pastilla de estado -------------------------------------------------
   Sustituye al circulo de 40px que solo decia el estado por color y guardaba
   el nombre en un tooltip, que en el telefono no existe. */
.ifx-solicitudes .ifx-sol-estado {
  --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-solicitudes .ifx-sol-estado .fa { font-size: 10.5px; }

.ifx-solicitudes .ifx-sol-estado-0 { --p-color: var(--ifx-alerta);     --p-halo: var(--ifx-alerta-halo); }
.ifx-solicitudes .ifx-sol-estado-1 { --p-color: var(--ifx-aviso);      --p-halo: var(--ifx-aviso-halo); }
.ifx-solicitudes .ifx-sol-estado-2 { --p-color: var(--ifx-azul-hondo); --p-halo: var(--ifx-azul-halo); }
.ifx-solicitudes .ifx-sol-estado-3 { --p-color: var(--ifx-cian-hondo); --p-halo: rgba(19, 126, 143, .18); }
.ifx-solicitudes .ifx-sol-estado-4 { --p-color: var(--ifx-ok);         --p-halo: var(--ifx-ok-halo); }

/* --- opciones --------------------------------------------------------------
   El encabezado de esta columna no lleva texto visible: la palabra "OPCIONES"
   era lo que estiraba la columna a 101px, mientras que los dos botones que hay
   debajo miden 66px contando huecos. El texto sigue ahi para lectores de
   pantalla, y la columna entera solo se pinta cuando la consulta trae alguna
   solicitud en "Por asignar" (lo decide solicitudes_c.php).

   La tecnica de ocultar: fuera de pantalla con un recorte de 1px, que es la
   unica que no la saca del arbol de accesibilidad. display:none o
   visibility:hidden tambien la esconderian del lector. */
.ifx-solicitudes .ifx-sol-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;
}
/* sin texto, las flechitas de ordenar sobran: no hay nada que ordenar aqui */
.ifx-solicitudes table#datatable_solicitudes > thead > tr > th.ifx-th-opciones { cursor: default; padding: 9px 12px 9px 4px; }
/* y sin relleno a la izquierda: los botones ya vienen precedidos del hueco de
   la columna de Estado, no hacen falta 14px mas */
.ifx-solicitudes table#datatable_solicitudes > tbody > tr > td.ifx-sol-opciones { padding-left: 4px; padding-right: 12px; }
.ifx-solicitudes table#datatable_solicitudes > thead > tr > th.ifx-th-opciones::before,
.ifx-solicitudes table#datatable_solicitudes > thead > tr > th.ifx-th-opciones::after { content: none !important; }

.ifx-solicitudes .ifx-sol-opciones { white-space: nowrap; }
.ifx-solicitudes .ifx-sol-opciones a { text-decoration: none; }
.ifx-solicitudes .ifx-sol-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-solicitudes .ifx-sol-opciones a:hover .boton-opciones-tabla {
  background: #FFF;
  color: var(--ifx-azul-hondo);
  transform: translateY(-1px);
}
.ifx-solicitudes .ifx-sol-opciones a:hover .fa-trash { color: var(--ifx-alerta); }

/* --- el estado vacio de DataTables -----------------------------------------
   Era un renglon pelado con el texto a la izquierda. */
.ifx-solicitudes table#datatable_solicitudes td.dataTables_empty {
  padding: 44px 20px;
  text-align: center;
  color: var(--ifx-tinta-suave);
  font-size: 13.5px;
}
.ifx-solicitudes table#datatable_solicitudes td.dataTables_empty::before {
  content: "\f0e2";
  font-family: FontAwesome;
  display: block;
  margin-bottom: 10px;
  font-size: 26px;
  opacity: .35;
}

/* --- el relevo al cambiar de filtro ----------------------------------------
   La tabla se repinta entera y sin esto el cambio es un salto seco. Escalonado
   por fila: las diez a la vez se leian como un parpadeo. El escalon es de
   22ms, suficiente para que se note el barrido y poco para que no se sienta
   lento (la ultima fila entra a los ~200ms). */
.ifx-solicitudes table#datatable_solicitudes > tbody.ifx-sol-refresca > tr {
  animation: ifx-sol-entra .3s cubic-bezier(.2,.8,.2,1) both;
}
.ifx-solicitudes tbody.ifx-sol-refresca > tr:nth-child(1)  { animation-delay: 0ms; }
.ifx-solicitudes tbody.ifx-sol-refresca > tr:nth-child(2)  { animation-delay: 22ms; }
.ifx-solicitudes tbody.ifx-sol-refresca > tr:nth-child(3)  { animation-delay: 44ms; }
.ifx-solicitudes tbody.ifx-sol-refresca > tr:nth-child(4)  { animation-delay: 66ms; }
.ifx-solicitudes tbody.ifx-sol-refresca > tr:nth-child(5)  { animation-delay: 88ms; }
.ifx-solicitudes tbody.ifx-sol-refresca > tr:nth-child(6)  { animation-delay: 110ms; }
.ifx-solicitudes tbody.ifx-sol-refresca > tr:nth-child(7)  { animation-delay: 132ms; }
.ifx-solicitudes tbody.ifx-sol-refresca > tr:nth-child(8)  { animation-delay: 154ms; }
.ifx-solicitudes tbody.ifx-sol-refresca > tr:nth-child(9)  { animation-delay: 176ms; }
.ifx-solicitudes tbody.ifx-sol-refresca > tr:nth-child(n+10) { animation-delay: 198ms; }

@keyframes ifx-sol-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, el cuerpo
   de letra y las dos lineas de fecha, que pasan a una. Nada se esconde: lo que
   se ve en comodo se sigue viendo aqui.
   Medido: de ~60px por fila a ~42px, o sea de 15 filas visibles a 21 en la
   misma pantalla. */
.ifx-solicitudes.ifx-sol-compacto table#datatable_solicitudes > tbody > tr > td {
  padding: 4px 12px;
  font-size: 12.5px;
}
.ifx-solicitudes.ifx-sol-compacto table#datatable_solicitudes > thead > tr > th { padding: 7px 12px; }
/* Las dos lineas de fecha se quedan APILADAS tambien aqui. Ponerlas en una
   sola bajaba la fila a 30px, pero el reparto de columnas se iba al traste: la
   celda de fecha pasaba de 117 a 187px y el nombre del cliente se quedaba con
   103px, recortado casi siempre. Medido. Prefiero 38px de fila y los nombres
   legibles. */
.ifx-solicitudes.ifx-sol-compacto .ifx-sol-fecha-h { font-size: 11px; }
.ifx-solicitudes.ifx-sol-compacto .ifx-sol-clave-n { font-size: 13px; }
.ifx-solicitudes.ifx-sol-compacto .ifx-sol-estado { padding: 3px 9px 3px 8px; font-size: 11px; }
.ifx-solicitudes.ifx-sol-compacto .ifx-sol-opciones .boton-opciones-tabla { width: 24px; height: 24px; font-size: 11.5px; }
.ifx-solicitudes.ifx-sol-compacto .ifx-sol-equipo .badge { font-size: 10px; padding: 1px 7px; }


/* =============================== TELEFONO ================================
   La tabla de ocho columnas no cabe en un telefono y los ingenieros abren
   esto desde el telefono. Mismo marcado: cada fila pasa a ser una tarjeta y
   cada celda estrena su etiqueta, que viaja en data-etiqueta.

   Ojo: DataTables no oculta la columna 0, la SACA del DOM (visible:false), asi
   que aqui no hay una celda de Id invisible estorbando. */
@media (max-width: 767px) {

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

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

  .ifx-solicitudes table#datatable_solicitudes > thead { display: none; }

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

  /* la tarjeta se pinta pareja: aqui el rayado alterno sobra, porque cada fila
     ya esta separada de la siguiente por su propio recuadro */
  .ifx-solicitudes table#datatable_solicitudes > tbody > tr,
  .ifx-solicitudes table#datatable_solicitudes.table-striped > tbody > tr:nth-of-type(odd),
  .ifx-solicitudes table#datatable_solicitudes.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-solicitudes table#datatable_solicitudes > tbody > tr:hover > td { background: transparent; }

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

  /* la clave hace de titulo de la tarjeta: sin etiqueta y con su propia linea */
  .ifx-solicitudes table#datatable_solicitudes > tbody > tr > td.ifx-sol-clave {
    display: block;
    padding: 0 130px 8px 0;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--ifx-renglon) !important;
    white-space: normal;
  }
  .ifx-solicitudes table#datatable_solicitudes > tbody > tr > td.ifx-sol-clave::before { content: none; }
  .ifx-solicitudes .ifx-sol-clave-n { font-size: 15px; }

  /* el estado se sube a la esquina de la tarjeta, al lado de la clave */
  .ifx-solicitudes table#datatable_solicitudes > tbody > tr > td.ifx-sol-td-estado {
    position: absolute;
    top: 12px; right: 14px;
    padding: 0;
  }
  .ifx-solicitudes table#datatable_solicitudes > tbody > tr > td.ifx-sol-td-estado::before { content: none; }

  .ifx-solicitudes table#datatable_solicitudes > tbody > tr > td.ifx-sol-opciones {
    justify-content: flex-end;
    padding-top: 8px;
  }
  .ifx-solicitudes table#datatable_solicitudes > tbody > tr > td.ifx-sol-opciones::before { content: none; }
  /* si el estado no es 0 la celda de opciones va vacia: sin esto queda un
     renglon en blanco al pie de cada tarjeta */
  .ifx-solicitudes table#datatable_solicitudes > tbody > tr > td.ifx-sol-opciones:empty { display: none; }

  .ifx-solicitudes .ifx-sol-fecha { white-space: normal; }
  .ifx-solicitudes .ifx-sol-fecha-d,
  .ifx-solicitudes .ifx-sol-fecha-h { display: inline; }
  .ifx-solicitudes .ifx-sol-fecha-h { margin-left: 7px; }

  /* El recorte con puntos suspensivos es cosa del escritorio, donde la fila
     tiene que caber en una linea. En la tarjeta hay ancho de sobra y el texto
     debe envolverse: si no, el nombre del cliente sale cortado teniendo el
     renglon entero libre debajo. */
  .ifx-solicitudes table#datatable_solicitudes > tbody > tr > td.ifx-sol-cliente,
  .ifx-solicitudes table#datatable_solicitudes > tbody > tr > td.ifx-sol-equipo,
  .ifx-solicitudes table#datatable_solicitudes > tbody > tr > td.ifx-sol-servicio {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  /* El badge del equipo lo envuelve un <div> propio del widget, que en la
     tarjeta cae como hermano del nombre. Va DELANTE, en el mismo renglon: es
     lo que da la alarma y tiene que verse antes que el nombre.
     El nombre lleva base 0 para que pueda encogerse y partirse dentro de su
     hueco, en vez de empujar el renglon. */
  .ifx-solicitudes table#datatable_solicitudes > tbody > tr > td.ifx-sol-equipo > div {
    display: inline;
    flex: 0 0 auto;
  }
  .ifx-solicitudes .ifx-sol-equipo .badge { margin: 0 6px 0 0; max-width: 130px; }
  .ifx-solicitudes table#datatable_solicitudes > tbody > tr > td.ifx-sol-equipo .ifx-sol-linea1 {
    flex: 1 1 0;
    min-width: 0;
  }

  /* la sucursal, debajo del cliente y sin el punto medio */
  .ifx-solicitudes table#datatable_solicitudes > tbody > tr > td.ifx-sol-cliente { flex-wrap: wrap; }
  .ifx-solicitudes table#datatable_solicitudes > tbody > tr > td.ifx-sol-cliente .ifx-sol-linea1 { flex: 1 1 0; min-width: 0; }
  .ifx-solicitudes table#datatable_solicitudes > tbody > tr > td.ifx-sol-cliente .ifx-sol-suc { flex: 1 0 100%; padding-left: 96px; }
  .ifx-solicitudes table#datatable_solicitudes > tbody > tr > td.ifx-sol-cliente .ifx-sol-suc::before { content: none; }

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

  .ifx-solicitudes .ifx-sol-atajos { gap: 10px; }

  .ifx-solicitudes .ifx-sol-encabezado,
  .ifx-solicitudes .ifx-sol-encabezado tbody,
  .ifx-solicitudes .ifx-sol-encabezado tr,
  .ifx-solicitudes .ifx-sol-encabezado td { display: block; width: auto !important; }
  .ifx-solicitudes .ifx-sol-encabezado td[align="right"] { text-align: left !important; margin-top: 12px; }
}


/* ========================= 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-solicitudes .ifx-sol-ficha,
  .ifx-solicitudes .ifx-sol-ficha::before,
  .ifx-solicitudes .ifx-sol-nueva.btn,
  .ifx-solicitudes .ifx-sol-opciones .boton-opciones-tabla {
    transition-property: background-color, color, box-shadow;
  }
  .ifx-solicitudes .ifx-sol-ficha:hover,
  .ifx-solicitudes .ifx-sol-ficha:active,
  .ifx-solicitudes .ifx-sol-ficha-activa,
  .ifx-solicitudes .ifx-sol-nueva.btn:hover,
  .ifx-solicitudes .ifx-sol-opciones a:hover .boton-opciones-tabla { transform: none; }
  .ifx-solicitudes .ifx-sol-ficha:hover::before { transform: none; }
  .ifx-solicitudes table#datatable_solicitudes > tbody.ifx-sol-refresca > tr { animation: none; }
}