/* ============================================================================
   catalogos_modern.css — los catalogos: Equipos, Clientes y Pólizas
   ----------------------------------------------------------------------------
   Se carga DESPUES de custom.css, sidebar_modern.css, inicio_modern.css,
   solicitudes_modern.css e ingenieros_modern.css.

   TODO cuelga de  .ifx-catalogo , clase que llevan equipos_c.php,
   clientes_c.php y polizas_c.php en su <div class="right_col">, junto con la
   suya propia (.ifx-equipos / .ifx-clientes / .ifx-polizas). Fuera de ahi este
   archivo no aplica a nada.

   La paleta (--ifx-*) NO se declara aqui: vive en inicio_modern.css, que ya
   incluye las cuatro clases nuevas en su lista de anclas.

   ---- POR QUE UNA HOJA PARA LAS TRES Y NO UNA PARA CADA UNA -----------------
   Solicitudes e Ingenieros tienen hoja propia porque casi todas sus reglas
   cuelgan de columnas que solo existen alli (clave, equipo, fechas, estado /
   nivel, NSS). Con Equipos, Clientes y Pólizas pasa lo contrario: sus tablas
   son distintas pero las PIEZAS son exactamente las mismas —columna ancla con
   monograma, pastilla de color, celdas de dos lineas, opciones— y escribirlas
   tres veces solo garantiza que dentro de un año se hayan separado. Asi que la
   forma se escribe una vez contra .ifx-catalogo, y lo poco que de verdad
   cambia por pantalla —los anchos de columna y que significa cada color— va
   acotado a .ifx-equipos, .ifx-clientes o .ifx-polizas, en su apartado.

   Que la tercera pantalla no haya pedido ni una linea de JS ni una pieza nueva
   es la prueba de que el reparto estaba bien hecho: polizas_c.php reusa
   catalogos_c_script.php tal cual y solo trae sus anchos y su escalera.

   Los numeros (12px de radio, 22ms de escalonado, 30px de monograma) son los
   mismos que en las otras dos hojas a proposito: si algun dia cambian, cambian
   en las cinco pantallas.

   ---- LAS RANURAS DE COLOR --------------------------------------------------
   Ni la ficha ni la pastilla traen un tono propio: traen una ranura c0..c5 o
   cx, y es AQUI donde se decide que color de la paleta le toca. Cada pantalla
   dice que significa cada ranura (ver equipo_widget_modalidad.php,
   cliente_widget_estado.php y poliza_widget_vigencia.php); ninguna inventa un
   color.
   ========================================================================== */


/* ===================== 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-catalogo { min-height: 0 !important; }


/* ============================ ENCABEZADO ==================================
   El marcado viejo envolvia el titulo en una <table> de maquetacion con un
   <td align="right" width="150px"> para el boton. Se sustituye por el mismo
   bloque que usan solicitudes e ingenieros; lo arma ifx_cat_encabezado(). */
.ifx-catalogo .ifx-page-title .ifx-cat-sub-t {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: var(--ifx-tinta-suave);
}

/* El boton de alta. Era .btn-round.btn-success del tema —verde chillon sobre
   el campo azul— y decia solo "Agregar", sin decir agregar que. */
.ifx-catalogo .ifx-cat-nuevo.btn,
.ifx-catalogo .ifx-cat-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;
  text-decoration: none;
  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-catalogo .ifx-cat-nuevo.btn:hover,
.ifx-catalogo .ifx-cat-nuevo.btn:focus {
  color: #FFF;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow:
      inset 0 1px 0 rgba(255,255,255,.34),
      0 20px 30px -16px rgba(47, 95, 196, .95);
}
.ifx-catalogo .ifx-cat-nuevo.btn:active { transform: translateY(0); }
.ifx-catalogo .ifx-cat-nuevo.btn:focus-visible { outline: 2px solid #FFF; outline-offset: 2px; }


/* ============================== LA BARRA =================================
   Dos niveles, los mismos de las otras pantallas:
     1. las fichas, que son la clasificacion (la modalidad en Equipos, el
        estado de aprobacion en Clientes);
     2. los atajos, que son huecos de datos y por eso van en texto y no en
        tarjeta: no son una forma de ordenar el catalogo, son pendientes.
   ========================================================================= */

.ifx-catalogo .ifx-cat-barra { margin-bottom: 16px; }

.ifx-catalogo .ifx-cat-fichas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

.ifx-catalogo .ifx-cat-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-catalogo .ifx-cat-ficha:hover::before { transform: scaleY(1.18); }
.ifx-catalogo .ifx-cat-ficha:active { transform: translateY(0) scale(.985); }

.ifx-catalogo .ifx-cat-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, 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 el
   mismo arreglo que en solicitudes_modern.css y en ingenieros_modern.css. */
.ifx-catalogo .ifx-cat-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-catalogo .ifx-cat-ficha-activa { transform: translateY(-1px); }
.ifx-catalogo .ifx-cat-ficha-activa:active { transform: translateY(0) scale(.985); }

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

/* "Todos" no tiene color de clasificacion: su --f-color es la tinta fuerte y
   teñir con ella da un gris. Blanco limpio y el anillo hace el trabajo. */
.ifx-catalogo .ifx-cat-ficha-todos.ifx-cat-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);
}

/* ---- LAS RANURAS ----------------------------------------------------------
   Los mismos siete tonos para la ficha de arriba, la pastilla de la fila y el
   monograma: es lo que hace que ficha y fila se lean como la misma cosa.

   cx es el ambar, el "ojo con esto": en Equipos y Clientes le toca el hueco de
   datos ("Sin modalidad", "Pendiente de aprobar") y en Pólizas el aviso de
   vencimiento a tres meses. Mismo tono porque es el mismo mensaje.

   c5, el naranja, lo pidieron las polizas: es el peldaño entre el ambar y el
   ladrillo que hace falta cuando la escalera tiene cinco escalones y no tres
   (ver poliza_widget_vigencia.php). */
.ifx-catalogo .ifx-cat-ficha-todos { --f-color: var(--ifx-tinta-fuerte); --f-halo: rgba(37, 48, 74, .12); }
.ifx-catalogo .ifx-cat-ficha-c0    { --f-color: var(--ifx-azul-hondo);   --f-halo: var(--ifx-azul-halo); }
.ifx-catalogo .ifx-cat-ficha-c1    { --f-color: var(--ifx-cian-hondo);   --f-halo: rgba(19, 126, 143, .18); }
.ifx-catalogo .ifx-cat-ficha-c2    { --f-color: var(--ifx-ok);           --f-halo: var(--ifx-ok-halo); }
.ifx-catalogo .ifx-cat-ficha-c3    { --f-color: var(--ifx-alerta);       --f-halo: var(--ifx-alerta-halo); }
.ifx-catalogo .ifx-cat-ficha-c4    { --f-color: var(--ifx-gris);         --f-halo: var(--ifx-gris-halo); }
.ifx-catalogo .ifx-cat-ficha-c5    { --f-color: var(--ifx-naranja);      --f-halo: var(--ifx-naranja-halo); }
.ifx-catalogo .ifx-cat-ficha-cx    { --f-color: var(--ifx-aviso);        --f-halo: var(--ifx-aviso-halo); }

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

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

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

/* salida de emergencia cuando el filtro esconde lo que se busca */
.ifx-catalogo .ifx-cat-vacio {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--ifx-tinta);
}
.ifx-catalogo .ifx-cat-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-catalogo .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-catalogo .x_panel .x_content {
  padding: 6px 20px 14px;
  margin-top: 0;
}
.ifx-catalogo .x_content > br { display: none; }


/* ======================= CONTROLES DE DATATABLES ==========================
   Las dos tablas las 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. */

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

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

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

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


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

.ifx-catalogo 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-catalogo 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;
  /* el tema centra los <th> 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-catalogo table#datatable > thead > tr > th.sorting,
.ifx-catalogo table#datatable > thead > tr > th.sorting_asc,
.ifx-catalogo table#datatable > thead > tr > th.sorting_desc {
  background-image: none !important;
  padding-right: 24px;
  position: sticky;
  cursor: pointer;
  transition: color .15s ease;
}
.ifx-catalogo table#datatable > thead > tr > th.sorting:hover,
.ifx-catalogo table#datatable > thead > tr > th.sorting_asc,
.ifx-catalogo table#datatable > thead > tr > th.sorting_desc { color: var(--ifx-azul-hondo); }

.ifx-catalogo table#datatable > thead > tr > th.sorting::after,
.ifx-catalogo table#datatable > thead > tr > th.sorting_asc::after,
.ifx-catalogo 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-catalogo 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-catalogo table#datatable > thead > tr > th.sorting::after {
  margin-top: 2px;
  border-top: 5px solid currentColor;
  opacity: .28;
}
.ifx-catalogo table#datatable > thead > tr > th.sorting_asc::after {
  margin-top: -2px;
  border-bottom: 5px solid currentColor;
  opacity: 1;
}
.ifx-catalogo table#datatable > thead > tr > th.sorting_desc::after {
  margin-top: -3px;
  border-top: 5px solid currentColor;
  opacity: 1;
}

/* ---- las celdas ---- */
.ifx-catalogo 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-catalogo 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. Aqui casi todas
   las celdas son de dos lineas hechas con <span>, asi que sin esto la fila se
   va a mas del doble de alto. La regla del tema pesa 0,0,2: basta con nombrar
   el contexto. */
.ifx-catalogo 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-catalogo table#datatable.table-striped > tbody > tr:nth-of-type(odd),
.ifx-catalogo table#datatable.table-striped > tbody > tr.odd {
  background-color: rgba(255, 255, 255, .30);
}

.ifx-catalogo table#datatable > tbody > tr[data-ir] { cursor: pointer; }
.ifx-catalogo table#datatable > tbody > tr:hover > td {
  background: rgba(255, 255, 255, .78);
}
.ifx-catalogo table#datatable > tbody > tr:focus { outline: none; }
.ifx-catalogo 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 COLUMNA ANCLA -----------------------------------------------------
   La primera columna de las cuatro pantallas hace siempre lo mismo: una marca
   que se reconoce sin leer, el nombre en negrita y, debajo o al lado, el dato
   que lo desambigua. En Solicitudes esa marca era la clave partida; en
   Ingenieros, las iniciales; aqui es el simbolo de la modalidad (Equipos) o el
   logotipo del cliente. */
.ifx-catalogo .ifx-cat-ancla-c {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ifx-catalogo .ifx-cat-ancla-t { min-width: 0; }

.ifx-catalogo .ifx-cat-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;
  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;
}
/* circulo para personas, caja redondeada para cosas y empresas: la forma dice
   de que tipo es la fila antes de leerla */
.ifx-catalogo .ifx-cat-mono-circulo { border-radius: 50%; }
.ifx-catalogo .ifx-cat-mono-caja    { border-radius: 9px; }
.ifx-catalogo .ifx-cat-mono-i .fa   { font-size: 13px; }
.ifx-catalogo table#datatable > tbody > tr:hover .ifx-cat-mono { transform: scale(1.06); }

.ifx-catalogo .ifx-cat-mono-c0 { --m-color: var(--ifx-azul-hondo); --m-halo: var(--ifx-azul-halo); }
.ifx-catalogo .ifx-cat-mono-c1 { --m-color: var(--ifx-cian-hondo); --m-halo: rgba(19, 126, 143, .18); }
.ifx-catalogo .ifx-cat-mono-c2 { --m-color: var(--ifx-ok);         --m-halo: var(--ifx-ok-halo); }
.ifx-catalogo .ifx-cat-mono-c3 { --m-color: var(--ifx-alerta);     --m-halo: var(--ifx-alerta-halo); }
.ifx-catalogo .ifx-cat-mono-c4 { --m-color: var(--ifx-gris);       --m-halo: var(--ifx-gris-halo); }
.ifx-catalogo .ifx-cat-mono-c5 { --m-color: var(--ifx-naranja);    --m-halo: var(--ifx-naranja-halo); }
.ifx-catalogo .ifx-cat-mono-cx { --m-color: var(--ifx-aviso);      --m-halo: var(--ifx-aviso-halo); }

/* El logotipo del cliente ocupa el hueco del monograma y mide lo mismo. Antes
   era un <img width="60" height="60"> con .img-thumbnail: una estampa del
   doble de alto que la fila, que estiraba todo el renglon y deformaba los
   logotipos que no fueran cuadrados. Con contain se ve entero, y el fondo
   blanco es necesario porque casi todos vienen con transparencia y sobre el
   vidrio azulado se leen mal. */
.ifx-catalogo .ifx-cat-logo {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: #FFF;
  box-shadow: 0 0 0 1px var(--ifx-anillo);
  object-fit: contain;
  padding: 2px;
  transition: transform .15s ease;
}
.ifx-catalogo table#datatable > tbody > tr:hover .ifx-cat-logo { transform: scale(1.06); }

.ifx-catalogo .ifx-cat-titulo {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--ifx-tinta-fuerte);
  text-decoration: none;
}
.ifx-catalogo .ifx-cat-titulo:hover,
.ifx-catalogo .ifx-cat-titulo:focus {
  color: var(--ifx-azul-hondo);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ---- CELDAS DE DOS LINEAS -------------------------------------------------
   Marca / modelo, cliente / sucursal, responsable / puesto, razon social /
   RFC, telefono / correo. Todas se arman igual: .ifx-cat-l por linea, la
   segunda con .ifx-cat-l2 para bajarle el tono. Antes esos pares iban en la
   misma linea separados por " / ", y con nombres largos el reparto de la
   tabla se descuadraba entero. */
.ifx-catalogo .ifx-cat-l {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ifx-catalogo .ifx-cat-l + .ifx-cat-l { margin-top: 2px; }
.ifx-catalogo .ifx-cat-l2 {
  font-size: 12px;
  color: var(--ifx-tinta-suave);
}
.ifx-catalogo .ifx-cat-l .fa {
  width: 13px;
  margin-right: 6px;
  color: rgba(93, 107, 133, .70);
  font-size: 11px;
  text-align: center;
}

/* los enlaces de dentro de la fila: cliente, sucursal, poliza, responsable */
.ifx-catalogo .ifx-cat-liga {
  color: var(--ifx-azul-hondo);
  text-decoration: none;
}
.ifx-catalogo .ifx-cat-liga:hover,
.ifx-catalogo .ifx-cat-liga:focus {
  color: var(--ifx-azul-hondo);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ifx-catalogo .ifx-cat-dato { font-variant-numeric: tabular-nums; }

/* lo que falta. Se dice con letras y no con un hueco en blanco, porque es
   justo lo que cuentan los atajos de la barra y aqui se ve por que. */
.ifx-catalogo .ifx-cat-falta {
  color: rgba(93, 107, 133, .70);
  font-style: italic;
}
.ifx-catalogo .ifx-cat-nada { color: rgba(93, 107, 133, .55); }


/* ---- LA PASTILLA ----------------------------------------------------------
   Misma forma y mismo tamaño que la de estado en Solicitudes y la de nivel en
   Ingenieros. Es lo que hace que las cuatro tablas se lean como el mismo
   sistema. */
.ifx-catalogo .ifx-cat-pastilla {
  --p-color: var(--ifx-gris);
  --p-halo:  var(--ifx-gris-halo);

  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  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;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ifx-catalogo .ifx-cat-pastilla .fa { font-size: 10.5px; }

.ifx-catalogo .ifx-cat-pastilla-c0 { --p-color: var(--ifx-azul-hondo); --p-halo: var(--ifx-azul-halo); }
.ifx-catalogo .ifx-cat-pastilla-c1 { --p-color: var(--ifx-cian-hondo); --p-halo: rgba(19, 126, 143, .18); }
.ifx-catalogo .ifx-cat-pastilla-c2 { --p-color: var(--ifx-ok);         --p-halo: var(--ifx-ok-halo); }
.ifx-catalogo .ifx-cat-pastilla-c3 { --p-color: var(--ifx-alerta);     --p-halo: var(--ifx-alerta-halo); }
.ifx-catalogo .ifx-cat-pastilla-c4 { --p-color: var(--ifx-gris);       --p-halo: var(--ifx-gris-halo); }
.ifx-catalogo .ifx-cat-pastilla-c5 { --p-color: var(--ifx-naranja);    --p-halo: var(--ifx-naranja-halo); }
.ifx-catalogo .ifx-cat-pastilla-cx { --p-color: var(--ifx-aviso);      --p-halo: var(--ifx-aviso-halo); }

.ifx-catalogo td.ifx-cat-td-pastilla { white-space: nowrap; }
/* cuando la pastilla es un enlace —"Pendiente" lleva a la pantalla de
   aprobacion— se marca al pasar el raton, que si no no se adivina */
.ifx-catalogo a.ifx-cat-pastilla-liga { text-decoration: none; }
.ifx-catalogo a.ifx-cat-pastilla-liga:hover .ifx-cat-pastilla {
  box-shadow: inset 0 0 0 1.5px var(--p-color);
  filter: brightness(.97);
}

/* La marca chica que va PEGADA al nombre, no en su propia columna: en
   Ingenieros es "Team Lead" y aqui son las notas del cliente. Misma pieza. */
.ifx-catalogo .ifx-cat-nota {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  margin-left: 6px;
  border-radius: 6px;
  background: rgba(37, 48, 74, .08);
  color: var(--ifx-tinta-suave);
  font-size: 11px;
  vertical-align: 1px;
  cursor: help;
}
.ifx-catalogo .ifx-cat-nota:hover { background: rgba(37, 48, 74, .16); color: var(--ifx-tinta-fuerte); }
/* la variante que avisa de un hueco —en Pólizas, el contrato sin subir—: mismo
   tamaño y misma forma, en el ambar de siempre para que no haya que aprender
   un simbolo nuevo */
.ifx-catalogo .ifx-cat-nota-avi { background: var(--ifx-aviso-halo); color: var(--ifx-aviso); }
.ifx-catalogo .ifx-cat-nota-avi:hover { background: var(--ifx-aviso); color: #FFF; }


/* ---- 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-catalogo .ifx-cat-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-catalogo table#datatable > thead > tr > th.ifx-th-opciones { cursor: default; padding: 9px 12px 9px 4px; }
.ifx-catalogo table#datatable > tbody > tr > td.ifx-cat-opciones { padding-left: 4px; padding-right: 12px; }
.ifx-catalogo table#datatable > thead > tr > th.ifx-th-opciones::before,
.ifx-catalogo table#datatable > thead > tr > th.ifx-th-opciones::after { content: none !important; }

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


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


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

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


/* ==================== LO QUE CAMBIA EN CADA PANTALLA ======================
   Solo dos cosas: el reparto de anchos y que columnas se recortan. Todo lo de
   arriba vale igual para las dos.

   Los anchos van con !important porque DataTables escribe un width EN LINEA
   sobre cada <th> despues de medir. El 1% no es un ancho: es "lo minimo que
   quepa", que es como se le dice a una tabla de reparto automatico que una
   columna no crezca.

   Y el recorte: max-width:0 es el truco para acortar 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.
   ========================================================================= */

/* ---- EQUIPOS ---- */
.ifx-equipos table#datatable > thead > tr > th.ifx-th-eq        { width: 18% !important; }
.ifx-equipos table#datatable > thead > tr > th.ifx-th-modalidad { width: 1%; }
.ifx-equipos table#datatable > thead > tr > th.ifx-th-marca     { width: 18% !important; }
.ifx-equipos table#datatable > thead > tr > th.ifx-th-cliente   { width: 26% !important; }
.ifx-equipos table#datatable > thead > tr > th.ifx-th-resp      { width: 23% !important; }
.ifx-equipos table#datatable > thead > tr > th.ifx-th-poliza    { width: 1%; }
.ifx-equipos table#datatable > thead > tr > th.ifx-th-opciones  { width: 1%; }

.ifx-equipos table#datatable > tbody > tr > td.ifx-cat-ancla,
.ifx-equipos table#datatable > tbody > tr > td.ifx-eq-marca,
.ifx-equipos table#datatable > tbody > tr > td.ifx-eq-cliente,
.ifx-equipos table#datatable > tbody > tr > td.ifx-eq-resp {
  max-width: 0;
  overflow: hidden;
}
/* la poliza es una clave corta: ni se recorta ni se parte */
.ifx-equipos table#datatable > tbody > tr > td.ifx-eq-poliza { white-space: nowrap; }

/* ---- PÓLIZAS ---- */
/* sus pastillas son las mas largas del sistema: "Menos de 6 meses". El hueco
   que la tarjeta del telefono le reserva a la pastilla sube en consecuencia
   (ver el bloque de TELEFONO); en escritorio esta variable no la usa nadie. */
.ifx-polizas { --cat-hueco: 152px; }

.ifx-polizas table#datatable > thead > tr > th.ifx-th-pol      { width: 22% !important; }
.ifx-polizas table#datatable > thead > tr > th.ifx-th-estado   { width: 1%; }
.ifx-polizas table#datatable > thead > tr > th.ifx-th-tipo     { width: 1%; }
.ifx-polizas table#datatable > thead > tr > th.ifx-th-vence    { width: 20% !important; }
.ifx-polizas table#datatable > thead > tr > th.ifx-th-cliente  { width: 36% !important; }
.ifx-polizas table#datatable > thead > tr > th.ifx-th-opciones { width: 1%; }

.ifx-polizas table#datatable > tbody > tr > td.ifx-cat-ancla,
.ifx-polizas table#datatable > tbody > tr > td.ifx-pol-cliente {
  max-width: 0;
  overflow: hidden;
}
/* las fechas y el tipo son cortos: no se parten nunca */
.ifx-polizas table#datatable > tbody > tr > td.ifx-pol-vence,
.ifx-polizas table#datatable > tbody > tr > td.ifx-pol-tipo { white-space: nowrap; }

/* ---- CLIENTES ---- */
.ifx-clientes table#datatable > thead > tr > th.ifx-th-cli      { width: 30% !important; }
.ifx-clientes table#datatable > thead > tr > th.ifx-th-estado   { width: 1%; }
.ifx-clientes table#datatable > thead > tr > th.ifx-th-razon    { width: 28% !important; }
.ifx-clientes table#datatable > thead > tr > th.ifx-th-contacto { width: 30% !important; }
.ifx-clientes table#datatable > thead > tr > th.ifx-th-opciones { width: 1%; }

.ifx-clientes table#datatable > tbody > tr > td.ifx-cat-ancla,
.ifx-clientes table#datatable > tbody > tr > td.ifx-cli-razon,
.ifx-clientes table#datatable > tbody > tr > td.ifx-cli-contacto {
  max-width: 0;
  overflow: hidden;
}


/* =============================== COMPACTO ================================
   La misma tabla con las filas mas juntas. Cambian el relleno y el cuerpo de
   letra, y los pares de dos lineas se juntan en una sola separados por un
   punto medio: nada se esconde. Mismos numeros que en las otras pantallas. */
.ifx-catalogo.ifx-cat-compacto table#datatable > tbody > tr > td {
  padding: 4px 12px;
  font-size: 12.5px;
}
.ifx-catalogo.ifx-cat-compacto table#datatable > thead > tr > th { padding: 7px 12px; }
.ifx-catalogo.ifx-cat-compacto .ifx-cat-mono,
.ifx-catalogo.ifx-cat-compacto .ifx-cat-logo { width: 26px; height: 26px; font-size: 10.5px; }
.ifx-catalogo.ifx-cat-compacto .ifx-cat-mono-i .fa { font-size: 11.5px; }
.ifx-catalogo.ifx-cat-compacto .ifx-cat-pastilla { padding: 3px 9px 3px 8px; font-size: 11px; }
.ifx-catalogo.ifx-cat-compacto .ifx-cat-nota { width: 18px; height: 18px; font-size: 10px; }
.ifx-catalogo.ifx-cat-compacto .ifx-cat-opciones .boton-opciones-tabla { width: 24px; height: 24px; font-size: 11.5px; }

/* la columna ancla se junta igual que las demas: si se quedara en dos
   renglones seria ella sola la que fijaria el alto de la fila y compacto no
   compactaria nada */
.ifx-catalogo.ifx-cat-compacto .ifx-cat-titulo { display: inline; }
.ifx-catalogo.ifx-cat-compacto .ifx-cat-ancla-t {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ifx-catalogo.ifx-cat-compacto .ifx-cat-titulo + .ifx-cat-l { margin-left: 8px; }
.ifx-catalogo.ifx-cat-compacto .ifx-cat-titulo + .ifx-cat-l::before {
  content: "\00b7";
  margin-right: 8px;
  color: rgba(126,152,178,.75);
}

/* en compacto el renglon del System ID cabe a medias: "System ID: C..." no
   dice nada y el numero solo si, asi que se cae el rotulo */
.ifx-catalogo.ifx-cat-compacto .ifx-eq-sid-r { display: none; }

.ifx-catalogo.ifx-cat-compacto .ifx-cat-l { display: inline; }
.ifx-catalogo.ifx-cat-compacto .ifx-cat-l + .ifx-cat-l { margin: 0 0 0 8px; }
.ifx-catalogo.ifx-cat-compacto .ifx-cat-l + .ifx-cat-l::before {
  content: "\00b7";
  margin-right: 8px;
  color: rgba(126,152,178,.75);
}
/* con las lineas ya en una sola, el recorte pasa a ser cosa de la celda */
.ifx-catalogo.ifx-cat-compacto table#datatable > tbody > tr > td {
  white-space: nowrap;
  text-overflow: ellipsis;
}


/* =============================== TELEFONO ================================
   Una tabla de cinco o siete 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 las otras pantallas. */
@media (max-width: 767px) {

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

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

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

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

  .ifx-catalogo table#datatable > tbody > tr,
  .ifx-catalogo table#datatable.table-striped > tbody > tr:nth-of-type(odd),
  .ifx-catalogo 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-catalogo table#datatable > tbody > tr:hover > td { background: transparent; }

  .ifx-catalogo table#datatable > tbody > tr > td {
    border: 0 !important;
    padding: 5px 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
    max-width: none !important;
  }
  .ifx-catalogo table#datatable > 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 columna ancla hace de titulo de la tarjeta: sin etiqueta y con su
     propia linea. El hueco de la derecha es para la pastilla, que se sube a la
     esquina igual que el estado en Solicitudes. */
  /* El hueco de la derecha es para la pastilla, que va en la esquina. Los
     118px alcanzan para "Resonancia" o "Pendiente", pero no para las de
     Pólizas ("Menos de 6 meses" mide 141px) y la pastilla se montaba encima
     del titulo. Cada pantalla puede subir el suyo con --cat-hueco. */
  .ifx-catalogo table#datatable > tbody > tr > td.ifx-cat-ancla {
    display: block;
    padding: 0 var(--cat-hueco, 118px) 8px 0;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--ifx-renglon) !important;
  }
  .ifx-catalogo table#datatable > tbody > tr > td.ifx-cat-ancla::before { content: none; }
  .ifx-catalogo .ifx-cat-titulo { font-size: 14.5px; white-space: normal; }

  .ifx-catalogo table#datatable > tbody > tr > td.ifx-cat-td-pastilla {
    position: absolute;
    top: 12px; right: 14px;
    padding: 0;
    display: block;
  }
  .ifx-catalogo table#datatable > tbody > tr > td.ifx-cat-td-pastilla::before { content: none; }

  /* Las celdas de dos lineas no caben con la etiqueta al lado: el <td> es
     flex y sus dos renglones saldrian uno junto a otro. Se pasan a bloque y la
     etiqueta se va arriba, que en 390px es ademas como mejor se leen. Las de un
     solo dato —poliza, NSS— se quedan con la etiqueta a la izquierda. */
  .ifx-catalogo table#datatable > tbody > tr > td.ifx-cat-dos { display: block; }
  .ifx-catalogo table#datatable > tbody > tr > td.ifx-cat-dos::before {
    display: block;
    margin-bottom: 3px;
  }

  /* 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-catalogo .ifx-cat-l { white-space: normal; }
  .ifx-catalogo.ifx-cat-compacto .ifx-cat-ancla-t { white-space: normal; }
  .ifx-catalogo.ifx-cat-compacto table#datatable > tbody > tr > td { white-space: normal; }

  .ifx-catalogo table#datatable > tbody > tr > td.ifx-cat-opciones {
    justify-content: flex-end;
    padding-top: 8px;
  }
  .ifx-catalogo table#datatable > tbody > tr > td.ifx-cat-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-catalogo .ifx-cat-ficha {
    flex: 1 1 42%;
    min-width: 0;
    padding: 9px 12px 9px 13px;
  }
  .ifx-catalogo .ifx-cat-ficha-n { font-size: 17px; }
  .ifx-catalogo .ifx-cat-ficha-t { font-size: 11.5px; }

  .ifx-catalogo .ifx-cat-atajos { gap: 10px; }
}


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