/* ============================================================================
   usuarios_modern.css — la pantalla Usuarios
   ----------------------------------------------------------------------------
   Se carga DESPUES de custom.css, sidebar_modern.css, inicio_modern.css,
   solicitudes_modern.css, ingenieros_modern.css y catalogos_modern.css.

   TODO cuelga de  .ifx-usuarios , clase que lleva usuarios_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-usuarios y .ifx-usuarios-pagina en su lista de anclas.

   ---- POR QUE ESTA PANTALLA NO ES UNA TABLA ---------------------------------
   Las otras cinco lo son porque sus registros son comparables entre si: dos
   pólizas se leen igual, dos equipos se leen igual. Los usuarios no. Medido
   sobre el padron real (83 personas):

       la columna Cliente  venia vacia en 29 de 83   (los 16 de iFix mas 13
                                                      cuentas sueltas)
       la columna Teléfono venia vacia en 35 de 83

   Dos de seis columnas en blanco un tercio del tiempo. Y la tabla la
   inicializa el tema sin opciones —$('#datatable').dataTable(), custom.js
   linea 2527— asi que paginaba de diez en diez: nueve páginas para ver a la
   propia gente de la casa.

   Aqui la forma es un DIRECTORIO en tres bloques:

       1. iFix        tarjetas, una por persona: son 16 y caben de un vistazo
       2. Clientes    el listado completo de empresas; cada una despliega su
                      gente al tocarla
       3. Sin empresa tarjetas otra vez, porque no hay empresa que agrupe

   ---- QUE SE REUSA ----------------------------------------------------------
   usuarios_c.php lleva TAMBIEN la clase .ifx-catalogo, asi que el encabezado,
   la barra de fichas, los atajos, el boton de densidad, el monograma y la
   pastilla salen tal cual de catalogos_modern.css. Las reglas de tabla de esa
   hoja cuelgan de  table#datatable , que aqui no existe, y no aplican a nada.
   Este archivo solo escribe lo que falta: el directorio y sus colores.
   ========================================================================== */


/* ===================== EL HUECO DEL FINAL DE LA PAGINA ====================
   Mismo bug del tema documentado en las otras hojas: setContentHeight() de
   build/js/custom.min.js congela el min-height de .right_col y deja un vacio
   que, con el campo pintado, se lee como agujero. */
body .container.body .right_col.ifx-usuarios { min-height: 0 !important; }

/* Filtrar, buscar y plegar se hacen con el atributo hidden. El navegador lo
   aplica con display:none desde SU hoja, que pierde contra cualquier regla de
   autor; y aqui hay elementos flex, grid e inline-block. Sin esta linea, nada
   de eso escondia nada. */
.ifx-usuarios [hidden] { display: none !important; }


/* ======================== LAS RANURAS DE COLOR ============================
   El color no dice "de que tipo es" sino DE QUE LADO ESTA:

       azul / cian  gente de iFix
       violeta      gente del cliente
       ambar        el hueco: una cuenta de cliente sin empresa

   y el relleno dice el mando: solida = propietario, contorno = el resto.
   El reparto de roles a ranuras vive en usuario_widget_rol.php.

   Cada pieza lee su propia variable —--f-* la ficha, --m-* el monograma,
   --p-* la pastilla— asi que las tres se declaran juntas por ranura. Las
   reglas base estan en catalogos_modern.css con la misma especificidad (dos
   clases); estas ganan por ir despues en el orden de carga. */
.ifx-usuarios .ifx-cat-ficha-ifx0    { --f-color: var(--ifx-azul-hondo); --f-halo: var(--ifx-azul-halo); }
.ifx-usuarios .ifx-cat-mono-ifx0     { --m-color: var(--ifx-azul-hondo); --m-halo: var(--ifx-azul-halo); }
.ifx-usuarios .ifx-cat-pastilla-ifx0 { --p-color: var(--ifx-azul-hondo); --p-halo: var(--ifx-azul-halo); }
.ifx-usuarios .ifx-usu-r-ifx0        { --f-color: var(--ifx-azul-hondo); }

.ifx-usuarios .ifx-cat-ficha-ifx1    { --f-color: var(--ifx-azul-hondo); --f-halo: var(--ifx-azul-halo); }
.ifx-usuarios .ifx-cat-mono-ifx1     { --m-color: var(--ifx-azul-hondo); --m-halo: var(--ifx-azul-halo); }
.ifx-usuarios .ifx-cat-pastilla-ifx1 { --p-color: var(--ifx-azul-hondo); --p-halo: var(--ifx-azul-halo); }
.ifx-usuarios .ifx-usu-r-ifx1        { --f-color: var(--ifx-azul-hondo); }

.ifx-usuarios .ifx-cat-ficha-ifx2    { --f-color: var(--ifx-cian-hondo); --f-halo: rgba(19, 126, 143, .18); }
.ifx-usuarios .ifx-cat-mono-ifx2     { --m-color: var(--ifx-cian-hondo); --m-halo: rgba(19, 126, 143, .18); }
.ifx-usuarios .ifx-cat-pastilla-ifx2 { --p-color: var(--ifx-cian-hondo); --p-halo: rgba(19, 126, 143, .18); }
.ifx-usuarios .ifx-usu-r-ifx2        { --f-color: var(--ifx-cian-hondo); }

.ifx-usuarios .ifx-cat-ficha-cli0    { --f-color: var(--ifx-violeta); --f-halo: var(--ifx-violeta-halo); }
.ifx-usuarios .ifx-cat-mono-cli0     { --m-color: var(--ifx-violeta); --m-halo: var(--ifx-violeta-halo); }
.ifx-usuarios .ifx-cat-pastilla-cli0 { --p-color: var(--ifx-violeta); --p-halo: var(--ifx-violeta-halo); }
.ifx-usuarios .ifx-usu-r-cli0        { --f-color: var(--ifx-violeta); }

.ifx-usuarios .ifx-cat-ficha-cli1    { --f-color: var(--ifx-violeta); --f-halo: var(--ifx-violeta-halo); }
.ifx-usuarios .ifx-cat-mono-cli1     { --m-color: var(--ifx-violeta); --m-halo: var(--ifx-violeta-halo); }
.ifx-usuarios .ifx-cat-pastilla-cli1 { --p-color: var(--ifx-violeta); --p-halo: var(--ifx-violeta-halo); }
.ifx-usuarios .ifx-usu-r-cli1        { --f-color: var(--ifx-violeta); }

.ifx-usuarios .ifx-cat-ficha-xx      { --f-color: var(--ifx-aviso); --f-halo: var(--ifx-aviso-halo); }
.ifx-usuarios .ifx-cat-mono-xx       { --m-color: var(--ifx-aviso); --m-halo: var(--ifx-aviso-halo); }
.ifx-usuarios .ifx-cat-pastilla-xx   { --p-color: var(--ifx-aviso); --p-halo: var(--ifx-aviso-halo); }
.ifx-usuarios .ifx-usu-r-xx          { --f-color: var(--ifx-aviso); }

/* El emblema de la EMPRESA va en tinta y no en color: la empresa no es un rol.
   El color de una fila lo ponen las personas que tiene dentro. */
.ifx-usuarios .ifx-cat-mono-emp { --m-color: var(--ifx-tinta-fuerte); --m-halo: rgba(37, 48, 74, .10); }

/* La pastilla: sin anillo y con menos peso. Ochenta y tres pastillas con fondo
   teñido Y anillo Y negrita hacian que la pagina se leyera como un tablero de
   colores. La RELLENA se queda entera —es el escalon de mando de cada lado— y
   asi es lo unico que salta. */
.ifx-usuarios .ifx-cat-pastilla {
  box-shadow: none;
  font-weight: 600;
  padding: 4px 10px 4px 8px;
}
.ifx-usuarios .ifx-cat-pastilla .fa { opacity: .75; }
.ifx-usuarios .ifx-cat-pastilla.ifx-usu-mando {
  background: var(--p-color);
  color: #FFF;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(20, 32, 58, .18);
}
.ifx-usuarios .ifx-cat-pastilla.ifx-usu-mando .fa { opacity: .92; }


/* ============================== EL BUSCADOR ===============================
   La tabla traia el buscador de DataTables. Al dejar de ser tabla hay que
   reponerlo: con 83 personas repartidas en 28 empresas plegadas, teclear un
   nombre es la via rapida. Ademas ABRE sola la empresa que coincide. */
.ifx-usuarios .ifx-usu-buscar {
  position: relative;
  margin-left: auto;
  flex: 0 0 292px;
}
.ifx-usuarios .ifx-usu-buscar > .fa {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--ifx-tinta-suave);
  pointer-events: none;
}
.ifx-usuarios .ifx-usu-buscar input {
  width: 100%;
  height: 32px;
  padding: 0 11px 0 30px;
  font-size: 12.5px;
  color: var(--ifx-tinta-fuerte);
  background: rgba(255, 255, 255, .62);
  border: 1px solid var(--ifx-borde-suave);
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.ifx-usuarios .ifx-usu-buscar input::placeholder { color: var(--ifx-tinta-suave); }
.ifx-usuarios .ifx-usu-buscar input:focus {
  background: rgba(255, 255, 255, .92);
  border-color: var(--ifx-azul);
  box-shadow: 0 0 0 3px var(--ifx-azul-halo);
}


/* =============================== LOS GRUPOS ===============================
   Tres bloques, en este orden y por esta razon:
     1. iFix        es de quien mas seguido se toca el permiso
     2. Clientes    el grueso, agrupado por empresa
     3. Sin empresa el hueco, al final, porque es una lista de pendientes */
.ifx-usuarios .ifx-usu-grupo { margin: 0 0 26px; }

.ifx-usuarios .ifx-usu-grupo-t {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--ifx-tinta-fuerte);
}
/* una linea que se aleja del titulo: son tres capitulos, no tres parrafos */
.ifx-usuarios .ifx-usu-grupo-t::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(96, 116, 168, .34), rgba(96, 116, 168, 0) 70%);
}
.ifx-usuarios .ifx-usu-grupo-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--g-halo, rgba(37, 48, 74, .12));
  color: var(--g-color, var(--ifx-tinta-fuerte));
  font-size: 12px;
}
.ifx-usuarios .ifx-usu-grupo-n {
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--ifx-tinta-suave);
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(96, 116, 168, .22);
  border-radius: 999px;
  white-space: nowrap;
}
.ifx-usuarios .ifx-usu-grupo-s {
  margin: 0 0 12px 35px;
  font-size: 12px;
  color: var(--ifx-tinta-suave);
}
.ifx-usuarios .ifx-usu-grupo-casa     { --g-color: var(--ifx-azul-hondo); --g-halo: var(--ifx-azul-halo); }
.ifx-usuarios .ifx-usu-grupo-clientes { --g-color: var(--ifx-violeta);    --g-halo: var(--ifx-violeta-halo); }
.ifx-usuarios .ifx-usu-grupo-huecos   { --g-color: var(--ifx-aviso);      --g-halo: var(--ifx-aviso-halo); }

/* "Abrir todas / Cerrar todas". Va DESPUES de la linea del encabezado, a la
   derecha del todo, porque no es parte del titulo sino un mando. */
.ifx-usuarios .ifx-usu-todas {
  order: 9;
  flex: 0 0 auto;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ifx-tinta-suave);
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(96, 116, 168, .22);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}
.ifx-usuarios .ifx-usu-todas:hover { background: #FFF; color: var(--ifx-tinta-fuerte); }
.ifx-usuarios .ifx-usu-todas:focus-visible { outline: 2px solid var(--ifx-azul); outline-offset: 1px; }


/* ======================= TARJETA DE PERSONA (suelta) ======================
   Para los bloques de iFix y de las cuentas sin empresa, donde no hay empresa
   que agrupe. Rejilla de ancho minimo: caben cuatro o cinco por renglon segun
   la pantalla y bajan solas a una en el telefono. */
.ifx-usuarios .ifx-usu-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.ifx-usuarios .ifx-usu-tarjeta {
  position: relative;
  padding: 13px 14px 12px;
  background: var(--ifx-vidrio);
  -webkit-backdrop-filter: var(--ifx-desenfoque);
  backdrop-filter: var(--ifx-desenfoque);
  border: 1px solid var(--ifx-filo);
  border-radius: var(--ifx-radio-chico);
  box-shadow: 0 1px 2px rgba(20, 32, 58, .06), 0 6px 18px rgba(20, 32, 58, .07);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}
/* el filo de color a la izquierda: el mismo recurso que la ficha activa de la
   barra, para que la tarjeta diga su lado sin leer la pastilla */
.ifx-usuarios .ifx-usu-tarjeta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--f-color, var(--ifx-gris));
  opacity: .85;
}
.ifx-usuarios .ifx-usu-tarjeta:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(20, 32, 58, .08), 0 12px 26px rgba(20, 32, 58, .12);
}

.ifx-usuarios .ifx-usu-cab { display: flex; align-items: flex-start; gap: 10px; }
.ifx-usuarios .ifx-usu-id  { flex: 1; min-width: 0; }

.ifx-usuarios .ifx-usu-nombre {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ifx-tinta-fuerte);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ifx-usuarios .ifx-usu-nombre:hover,
.ifx-usuarios .ifx-usu-nombre:focus { color: var(--ifx-azul-hondo); text-decoration: underline; }

/* el rol y, si lo tiene, el encargo: en la misma linea y partiendo si no caben */
.ifx-usuarios .ifx-usu-marcas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.ifx-usuarios .ifx-usu-marcas .ifx-usu-resp { margin-left: 0; vertical-align: 0; }

.ifx-usuarios .ifx-usu-datos {
  list-style: none;
  margin: 10px 0 0;
  padding: 9px 0 0;
  border-top: 1px solid rgba(96, 116, 168, .16);
}
.ifx-usuarios .ifx-usu-datos li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ifx-tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ifx-usuarios .ifx-usu-datos li + li { margin-top: 3px; }
.ifx-usuarios .ifx-usu-datos .fa {
  flex: 0 0 13px;
  width: 13px;
  font-size: 11px;
  color: var(--ifx-tinta-suave);
}
.ifx-usuarios .ifx-usu-datos a {
  color: var(--ifx-tinta);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ifx-usuarios .ifx-usu-datos a:hover { color: var(--ifx-azul-hondo); text-decoration: underline; }
/* lo que falta se dice con todas sus letras: es justo lo que cuenta el atajo */
.ifx-usuarios .ifx-usu-falta { color: var(--ifx-tinta-suave); font-style: italic; font-size: 11px; opacity: .8; }


/* ---- las tres acciones de siempre: llave, lapiz y bote -------------------
   Son el tercer trozo del renglon del nombre y no una pieza flotante encima:
   asi el nombre se queda con lo que sobra y no hay que reservarle un hueco a
   ojo.

   SIEMPRE visibles, en las tarjetas y en los renglones. Antes se encendian al
   pasar por encima y se veian mejor, pero son las tres unicas cosas que se
   pueden HACER en esta pantalla: esconderlas obliga a barrer con el raton para
   descubrir donde estan, y con pantalla tactil no hay "encima" que valga.
   Que se vean cuesta un poco de ruido; que no se vean cuesta no encontrarlas. */
.ifx-usuarios .ifx-usu-acciones { display: inline-flex; gap: 3px; }
.ifx-usuarios .ifx-usu-tarjeta .ifx-usu-acciones {
  flex: 0 0 auto;
  align-self: flex-start;
  margin: -5px -6px 0 4px;
}
.ifx-usuarios .ifx-usu-acc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--ifx-tinta-suave);
  font-size: 15px;
  text-decoration: none;
  transition: background-color .14s ease, color .14s ease;
}
.ifx-usuarios .ifx-usu-acc:hover,
.ifx-usuarios .ifx-usu-acc:focus { background: rgba(255, 255, 255, .85); color: var(--ifx-azul-hondo); }
.ifx-usuarios .ifx-usu-acc-borrar:hover,
.ifx-usuarios .ifx-usu-acc-borrar:focus { color: var(--ifx-alerta); }
.ifx-usuarios .ifx-usu-acc:focus-visible { outline: 2px solid var(--ifx-azul); outline-offset: 1px; }


/* ==================== EL LISTADO DE EMPRESAS (acordeon) ===================
   Una sola columna a todo lo ancho, y no tarjetas en tres columnas como en la
   primera version. Tres razones:

     - tienen que salir TODAS las empresas, tengan gente o no, y una empresa
       sin nadie no da para una tarjeta;
     - plegadas son 28 renglones: en tres columnas quedarian tres listas
       alfabeticas paralelas, que no se leen;
     - a todo lo ancho cabe entero un nombre como "Servicios Hospitalarios El
       Nevado SA DE CV", que en una columna de 455px se cortaba.

   El listado es UN panel con renglones divididos por una linea, no 28 cajas
   sueltas: es un indice, y un indice se lee de corrido. */
.ifx-usuarios .ifx-usu-listado {
  background: var(--ifx-vidrio);
  -webkit-backdrop-filter: var(--ifx-desenfoque);
  backdrop-filter: var(--ifx-desenfoque);
  border: 1px solid var(--ifx-filo);
  border-radius: var(--ifx-radio-chico);
  box-shadow: 0 1px 2px rgba(20, 32, 58, .06), 0 6px 18px rgba(20, 32, 58, .07);
  overflow: hidden;
}
.ifx-usuarios .ifx-usu-empresa + .ifx-usu-empresa { border-top: 1px solid var(--ifx-renglon); }

/* ---- el renglon de la empresa ---- */
.ifx-usuarios .ifx-usu-empresa-c {
  display: flex;
  align-items: center;
  transition: background-color .14s ease;
}
.ifx-usuarios .ifx-usu-empresa-c:hover { background: rgba(255, 255, 255, .5); }

/* La cabecera es un <button> de verdad: se alcanza con el tabulador, se abre
   con Enter o espacio y un lector de pantalla anuncia si esta desplegada. */
.ifx-usuarios .ifx-usu-abrir {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 6px 9px 12px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.ifx-usuarios .ifx-usu-abrir:focus-visible { outline: 2px solid var(--ifx-azul); outline-offset: -2px; }
/* una empresa sin nadie no despliega nada: el boton se apaga pero el renglon
   se queda, que es justamente el aviso */
.ifx-usuarios .ifx-usu-abrir[disabled] { cursor: default; opacity: .78; }
.ifx-usuarios .ifx-usu-abrir[disabled] .ifx-usu-flecha { visibility: hidden; }

.ifx-usuarios .ifx-usu-flecha {
  flex: 0 0 10px;
  width: 10px;
  font-size: 11px;
  color: var(--ifx-tinta-suave);
  transition: transform .3s cubic-bezier(.25, .85, .3, 1), color .16s ease;
}
.ifx-usuarios .ifx-usu-empresa.ifx-usu-abierta .ifx-usu-flecha {
  transform: rotate(90deg);
  color: var(--ifx-violeta);
}

/* Una ranura de 44px para el emblema, lleve logotipo o iniciales: si midieran
   distinto, el nombre de cada empresa empezaria en un sitio y la columna se
   leeria en zigzag. Ancha de mas a proposito —muchos logotipos son apaisados y
   en una caja cuadrada de 30 quedaban ilegibles. */
.ifx-usuarios .ifx-usu-abrir .ifx-cat-mono { margin: 0 7px; }
.ifx-usuarios .ifx-usu-logo {
  flex: 0 0 44px;
  width: 44px;
  height: 30px;
  object-fit: contain;
  background: #FFF;
  border-radius: var(--ifx-radio-chico);
  box-shadow: inset 0 0 0 1px rgba(37, 48, 74, .12);
  padding: 2px 3px;
}

.ifx-usuarios .ifx-usu-empresa-n {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--ifx-tinta-fuerte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ifx-usuarios .ifx-usu-cuenta {
  flex: 0 0 auto;
  padding-left: 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ifx-violeta);
  white-space: nowrap;
}
/* la empresa a la que todavia no entra nadie: se dice con letras, no con un
   cero, y en ambar, que es el color del hueco en todo el sistema */
.ifx-usuarios .ifx-usu-cuenta-nadie { color: var(--ifx-aviso); font-style: italic; font-weight: 500; }

/* la liga a la ficha del cliente va FUERA del boton: una liga dentro de un
   boton no es marcado valido y ademas seria imposible de acertar */
/* la liga a la ficha del cliente: mismo tamaño y mismo tono que las acciones
   de las personas, y tambien siempre a la vista */
.ifx-usuarios .ifx-usu-ficha {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  border-radius: 9px;
  font-size: 15px;
  color: var(--ifx-tinta-suave);
  text-decoration: none;
  transition: background-color .14s ease, color .14s ease;
}
.ifx-usuarios .ifx-usu-ficha:hover,
.ifx-usuarios .ifx-usu-ficha:focus { background: rgba(255, 255, 255, .85); color: var(--ifx-violeta); }
.ifx-usuarios .ifx-usu-ficha:focus-visible { outline: 2px solid var(--ifx-azul); outline-offset: 1px; }


/* ---- el cajon con la gente ----
   Va hundido respecto al renglon de la empresa —fondo un punto mas oscuro y un
   filo violeta a la izquierda— para que se lea como "esto de aqui es de esa
   empresa" y no como mas renglones del indice. */
.ifx-usuarios .ifx-usu-personas {
  list-style: none;
  margin: 0;
  padding: 0;
  /* la linea de arriba va como sombra interior y no como borde: un borde son
     1px de alto que la rejilla no puede encoger, y el cajon plegado se quedaba
     en 1px en vez de en cero —una raya de mas debajo de cada empresa. */
  box-shadow: inset 0 1px 0 var(--ifx-renglon);
  border-left: 3px solid var(--ifx-violeta);
  background: rgba(126, 140, 190, .07);
}
.ifx-usuarios .ifx-usu-persona {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px 8px 22px;
  transition: background-color .14s ease;
}
/* ---- EL DESPLIEGUE ------------------------------------------------------
   Con TRANSICIONES y no con una animacion, y esa es toda la diferencia: una
   transicion que no llega a correr deja el elemento en su estado FINAL —abierto
   y visible—, mientras que una animacion detenida deja pegado su primer
   fotograma. La primera version del cajon usaba  animation: ... both  y se
   abria VACIO en cuanto el motor no avanzaba el reloj de animaciones, cosa que
   pasa en mas sitios de los que parece: una vista incrustada, una pestaña en
   segundo plano, al imprimir.

   grid-template-rows de 0fr a 1fr es lo que permite llegar hasta el alto real
   del contenido sin medirlo en JavaScript ni inventarse un max-height que
   sobre o falte. Donde no se sepa interpolar, el cajon abre de golpe: se ve
   peor, no se rompe.

   Y visibility, ademas de opacity: con opacity 0 a secas el contenido plegado
   seguiria siendo alcanzable con el tabulador y lo seguiria leyendo un lector
   de pantalla. La transicion de 0s con retardo hace que se oculte AL FINAL del
   cierre, no al principio, que es lo que dejaria el cajon vacio mientras se
   pliega. */
.ifx-usuarios .ifx-usu-cajon {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  visibility: hidden;
  transition: grid-template-rows .3s cubic-bezier(.25, .85, .3, 1),
              visibility 0s linear .3s;
}
.ifx-usuarios .ifx-usu-empresa.ifx-usu-abierta .ifx-usu-cajon {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .3s cubic-bezier(.25, .85, .3, 1),
              visibility 0s;
}
/* min-height:0 es obligatorio: sin el, la fila de la rejilla no baja de la
   altura minima de su contenido y el cajon nunca se cierra del todo. */
.ifx-usuarios .ifx-usu-cajon > .ifx-usu-personas {
  min-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .3s cubic-bezier(.25, .85, .3, 1);
}
.ifx-usuarios .ifx-usu-abierta .ifx-usu-cajon > .ifx-usu-personas {
  opacity: 1;
  transform: none;
  /* un pelo despues de que el hueco empiece a abrirse: la lista entra en el
     sitio que ya se le hizo, en vez de estirarse con el */
  transition-delay: .05s, .05s;
}
.ifx-usuarios .ifx-usu-persona + .ifx-usu-persona { border-top: 1px solid var(--ifx-renglon); }
.ifx-usuarios .ifx-usu-persona:hover { background: rgba(255, 255, 255, .55); }

.ifx-usuarios .ifx-usu-p-t { flex: 1; min-width: 0; }
/* aqui el nombre parte en dos antes que cortarse: en un directorio, un nombre
   a medias no sirve para nada */
.ifx-usuarios .ifx-usu-persona .ifx-usu-nombre {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.ifx-usuarios .ifx-usu-p-c {
  display: block;
  font-size: 11.5px;
  color: var(--ifx-tinta-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ifx-usuarios .ifx-usu-persona .ifx-cat-pastilla { flex: 0 0 auto; }
.ifx-usuarios .ifx-usu-persona .ifx-usu-acciones { flex: 0 0 auto; margin-left: 4px; }

/* El distintivo de "responsable de equipo": el mismo recurso que la estrella
   de Team Lead en Ingenieros. No es un rol —es un encargo— y por eso no toma
   el color del lado sino el verde de lo que esta en orden. */
.ifx-usuarios .ifx-usu-resp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--ifx-ok);
  background: var(--ifx-ok-halo);
  border-radius: 999px;
  vertical-align: 1px;
}
.ifx-usuarios .ifx-usu-resp .fa { font-size: 9px; }


/* ========================== NADA QUE MOSTRAR ==============================
   El riesgo real de tener filtros: alguien filtra por "Gerente operativo",
   teclea un nombre y concluye que no esta dado de alta. Cuando la busqueda
   queda en cero se dice por que y se ofrece la salida. */
.ifx-usuarios .ifx-usu-nada {
  padding: 46px 20px;
  text-align: center;
  color: var(--ifx-tinta-suave);
  font-size: 13px;
}
.ifx-usuarios .ifx-usu-nada .fa {
  display: block;
  margin-bottom: 10px;
  font-size: 30px;
  opacity: .35;
}
.ifx-usuarios .ifx-usu-nada-b {
  margin-top: 12px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ifx-azul-hondo);
  background: rgba(255, 255, 255, .70);
  border: 1px solid var(--ifx-borde-suave);
  border-radius: 999px;
  cursor: pointer;
}
.ifx-usuarios .ifx-usu-nada-b:hover { background: #FFF; }
.ifx-usuarios .ifx-usu-nada-b:focus-visible { outline: 2px solid var(--ifx-azul); outline-offset: 1px; }


/* ============================ EL RELEVO ==================================
   Al cambiar de filtro las tarjetas que quedan entran escalonadas, igual que
   las filas de las otras cinco pantallas. Reusa @keyframes ifx-cat-entra, que
   ya declara catalogos_modern.css: los keyframes no se acotan por clase. */
.ifx-usuarios .ifx-usu-refresca .ifx-usu-tarjeta {
  animation: ifx-cat-entra .3s cubic-bezier(.2, .8, .2, 1) both;
}
.ifx-usuarios .ifx-usu-refresca > :nth-child(1)   { animation-delay: 0ms; }
.ifx-usuarios .ifx-usu-refresca > :nth-child(2)   { animation-delay: 22ms; }
.ifx-usuarios .ifx-usu-refresca > :nth-child(3)   { animation-delay: 44ms; }
.ifx-usuarios .ifx-usu-refresca > :nth-child(4)   { animation-delay: 66ms; }
.ifx-usuarios .ifx-usu-refresca > :nth-child(5)   { animation-delay: 88ms; }
.ifx-usuarios .ifx-usu-refresca > :nth-child(6)   { animation-delay: 110ms; }
.ifx-usuarios .ifx-usu-refresca > :nth-child(n+7) { animation-delay: 132ms; }


/* ======================== MODO COMPACTO ==================================
   Se van los datos de contacto y quedan el nombre, el rol y las acciones: es
   la vista de "quien hay", no la de "como se le localiza". */
.ifx-usuarios.ifx-cat-compacto .ifx-usu-datos   { display: none; }
.ifx-usuarios.ifx-cat-compacto .ifx-usu-p-c     { display: none; }
.ifx-usuarios.ifx-cat-compacto .ifx-usu-tarjeta { padding: 11px 12px; }
.ifx-usuarios.ifx-cat-compacto .ifx-usu-persona { padding-top: 6px; padding-bottom: 6px; }
.ifx-usuarios.ifx-cat-compacto .ifx-usu-abrir   { padding-top: 6px; padding-bottom: 6px; }
/* en compacto se aprieta la CAJA del boton, no el simbolo: el icono se queda
   del mismo tamaño y el renglon no crece por su culpa */
.ifx-usuarios.ifx-cat-compacto .ifx-usu-acc { width: 26px; height: 26px; }
.ifx-usuarios.ifx-cat-compacto .ifx-usu-grupo   { margin-bottom: 20px; }
/* en compacto sobra la explicacion del bloque: se pidio densidad, no lectura */
.ifx-usuarios.ifx-cat-compacto .ifx-usu-grupo-s { display: none; }
.ifx-usuarios.ifx-cat-compacto .ifx-usu-grupo-t { margin-bottom: 10px; }


/* ================================ MOVIL ================================== */
@media (max-width: 767px) {
  .ifx-usuarios .ifx-usu-rejilla  { grid-template-columns: 1fr; }
  .ifx-usuarios .ifx-usu-buscar   { flex: 1 1 100%; margin: 8px 0 0; }
  .ifx-usuarios .ifx-usu-grupo-s  { margin-left: 0; }
  /* la cuenta baja debajo del nombre: a lo ancho de un telefono, "12 usuarios"
     al lado de "Centro de Imagen y Especialidades Medicas Izucar" no cabe */
  .ifx-usuarios .ifx-usu-abrir    { flex-wrap: wrap; padding-right: 4px; }
  /* y el nombre parte en dos antes que cortarse, igual que el de las personas:
     "Laboratorio Clinico de Jesus Co…" no dice cual es */
  .ifx-usuarios .ifx-usu-empresa-n {
    flex: 1 0 60%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .ifx-usuarios .ifx-usu-cuenta   { padding-left: 0; margin-left: 64px; }
  .ifx-usuarios .ifx-usu-persona  { padding-left: 14px; }
  /* algo mas de aire entre los tres botones: el dedo no acierta como el raton */
  .ifx-usuarios .ifx-usu-tarjeta .ifx-usu-acciones { gap: 6px; }
  /* dentro del cajon, en cambio, los tres botones mas la pastilla no caben al
     lado del nombre: la pastilla baja y las acciones se quedan a la derecha */
  .ifx-usuarios .ifx-usu-persona { flex-wrap: wrap; row-gap: 4px; }
  .ifx-usuarios .ifx-usu-persona .ifx-usu-p-t { flex: 1 1 100%; order: 1; }
  .ifx-usuarios .ifx-usu-persona .ifx-cat-mono { order: 0; }
  .ifx-usuarios .ifx-usu-persona .ifx-cat-pastilla { order: 2; margin-left: 39px; }
  .ifx-usuarios .ifx-usu-persona .ifx-usu-acciones { order: 3; margin-left: auto; }
}


/* ===================== QUIEN PIDE MENOS MOVIMIENTO ======================== */
@media (prefers-reduced-motion: reduce) {
  .ifx-usuarios .ifx-usu-tarjeta,
  .ifx-usuarios .ifx-usu-acc,
  .ifx-usuarios .ifx-usu-flecha { transition-property: background-color, color, box-shadow; }
  .ifx-usuarios .ifx-usu-tarjeta:hover { transform: none; }
  .ifx-usuarios .ifx-usu-refresca .ifx-usu-tarjeta { animation: none; }
  /* el cajon deja de deslizarse pero sigue abriendo y cerrando: se le quita el
     movimiento, no la funcion */
  .ifx-usuarios .ifx-usu-cajon,
  .ifx-usuarios .ifx-usu-cajon > .ifx-usu-personas,
  .ifx-usuarios .ifx-usu-flecha { transition-duration: 0s; }
  .ifx-usuarios .ifx-usu-cajon > .ifx-usu-personas { transform: none; }
}

/* ================= QUIEN PIDE MENOS TRANSPARENCIA ======================== */
@media (prefers-reduced-transparency: reduce) {
  .ifx-usuarios .ifx-usu-tarjeta,
  .ifx-usuarios .ifx-usu-listado {
    background: #FFF;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: #DDE4EA;
  }
  .ifx-usuarios .ifx-usu-buscar input { background: #FFF; }
}