/* ============================================================================
   formularios_modern.css — los formularios de Solicitudes e Ingenieros
   ----------------------------------------------------------------------------
   Se carga DESPUES de custom.css y de las seis hojas de pantalla, y ANTES de
   sidebar_modern.css (que va la ultima a proposito; ver css.php).

   TODO esta acotado a  .ifx-form , clase que llevan en su
   <div class="right_col"> las cuatro pantallas de captura:

       solicitudes_a.php   alta de solicitud
       solicitudes_m.php   edicion de solicitud
       ingenieros_a.php    alta de ingeniero
       ingenieros_m.php    edicion de ingeniero

   Fuera de ahi este archivo no aplica a nada. Los listados de esas mismas dos
   secciones (solicitudes_c.php, ingenieros_c.php) NO llevan .ifx-form y se
   siguen vistiendo con su propia hoja.

   La paleta (--ifx-*) NO se declara aqui: vive en inicio_modern.css, que la
   declara para todas las pantallas rediseñadas —incluidas .ifx-form-pagina y
   .ifx-form, que se le añadieron a esas listas.

   ---- POR QUE UNA SOLA HOJA PARA LAS DOS SECCIONES --------------------------
   Porque un formulario no se parece a su listado: se parece a OTRO formulario.
   Las cuatro pantallas comparten la misma anatomia —encabezado con miga de
   pan, secciones numeradas, campos con etiqueta arriba, resumen al costado y
   barra de acciones pegada abajo— y lo unico que cambia entre ellas es que
   campos van dentro. Repartir eso en solicitudes_modern.css e
   ingenieros_modern.css habria dejado el mismo bloque escrito dos veces y con
   dos vidas distintas. Es el mismo criterio de catalogos_modern.css, que viste
   tres pantallas con una hoja.

   ---- LO QUE NO SE TOCO -----------------------------------------------------
   Ni un nombre de campo, ni un id que lea el JavaScript, ni el ida y vuelta
   con el servidor. Los formularios de solicitudes recargan la pagina cada vez
   que se elige cliente, sucursal o equipo (auto_submit='S' en
   js/ifix_functions.js); eso sigue igual. Aqui solo cambia como se ve.
   ========================================================================== */


/* ===================== EL HUECO DEL FINAL DE LA PAGINA ====================
   Mismo bug del tema que en los listados y por la misma razon: la
   setContentHeight() de build/js/custom.min.js congela el min-height de
   .right_col con la medida del documento en el instante de su ready. En los
   formularios de solicitudes el culpable es la tabla de clientes que vive
   dentro del modal: son cientos de filas medidas antes de que DataTables las
   pagine. Mientras el fondo era gris no se notaba; sobre el campo azul, si.

   El min-height del tema es un estilo EN LINEA, asi que hace falta
   !important. No se sustituye por otro valor porque .main_container ya lleva
   min-height:100vh (inicio_modern.css). */
body .container.body .right_col.ifx-form { min-height: 0 !important; }


/* ============================== ENCABEZADO ================================
   El titulo grande y la miga de pan. La forma (flex, tamaños, color) sale de
   inicio_modern.css, que ya viste .page-title.ifx-page-title en todas las
   pantallas; aqui solo se añade lo que un formulario tiene y un listado no:
   la miga de pan encima del titulo y la linea de explicacion debajo. */

.ifx-form .ifx-page-title h3 > .fa { display: none; }

.ifx-form .ifx-fm-miga {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--ifx-tinta-suave);
}
.ifx-form .ifx-fm-miga a {
  color: var(--ifx-azul-hondo);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ifx-form .ifx-fm-miga a:hover,
.ifx-form .ifx-fm-miga a:focus {
  color: var(--ifx-azul-hondo);
  border-bottom-color: var(--ifx-azul-hondo);
}
.ifx-form .ifx-fm-miga a:focus-visible {
  outline: 2px solid var(--ifx-azul);
  outline-offset: 3px;
  border-radius: 3px;
}
.ifx-form .ifx-fm-miga .fa { font-size: 10px; opacity: .55; }

.ifx-form .ifx-fm-sub {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ifx-tinta-suave);
  max-width: 62ch;
}

/* La pastilla con la clave de la solicitud, al lado del titulo cuando se
   edita: dice sobre QUE registro se esta trabajando sin gastar un renglon. */
.ifx-form .ifx-fm-clave-reg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px var(--ifx-borde-suave);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--ifx-azul-hondo);
  vertical-align: middle;
}
.ifx-form .ifx-fm-clave-reg .fa { font-size: 10.5px; opacity: .75; }


/* ================================ LA REJA =================================
   Dos columnas: el formulario a la izquierda y el resumen al costado.

   El resumen NO es decorativo y por eso ocupa una columna entera: en
   solicitudes es lo unico que enseña de un vistazo las cuatro decisiones
   encadenadas (cliente -> sucursal -> equipo -> poliza), que en el formulario
   viejo quedaban repartidas en cuatro renglones lejanos; y en ingenieros es
   donde se ve el avatar antes de guardarlo, que era imposible de imaginar
   leyendo un campo de tres letras y veinte botones de color.

   1fr para el formulario y 320px para el costado: el formulario manda, y el
   resumen es una columna fija porque su contenido no crece. */
.ifx-form .ifx-fm-reja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
}
.ifx-form .ifx-fm-col { min-width: 0; }

/* El costado se queda a la vista mientras se baja por el formulario. El 78px
   es la barra superior del tema mas un respiro. */
.ifx-form .ifx-fm-lado {
  position: -webkit-sticky;
  position: sticky;
  top: 78px;
  min-width: 0;
}


/* ============================= LA SECCION =================================
   Cada bloque del formulario es una tarjeta de vidrio con un numero. Los
   numeros no son adorno: dicen cuantos pasos faltan, que es justo lo que un
   formulario largo no deja ver. */

.ifx-form .ifx-fm-seccion {
  position: relative;
  margin-bottom: 20px;
  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);
  overflow: hidden;
}

.ifx-form .ifx-fm-seccion-cab {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 22px 14px;
  border-bottom: 1px solid var(--ifx-renglon);
}

.ifx-form .ifx-fm-seccion-num {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  margin-top: 1px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--ifx-azul-claro) 0%, var(--ifx-azul) 45%, var(--ifx-azul-hondo) 100%);
  box-shadow:
      inset 0 1px 0 rgba(255,255,255,.40),
      0 6px 12px -8px rgba(47, 95, 196, .95);
  color: #FFF;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
}

.ifx-form .ifx-fm-seccion-t {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.1px;
  color: var(--ifx-tinta-fuerte);
}
.ifx-form .ifx-fm-seccion-d {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ifx-tinta-suave);
}

.ifx-form .ifx-fm-seccion-cuerpo { padding: 18px 22px 20px; }


/* ================================ CAMPOS ==================================
   Etiqueta ARRIBA del control, no a la izquierda.

   El formulario viejo era .form-horizontal con la etiqueta en col-md-3 y el
   campo en col-md-6: en una pantalla ancha eso deja el formulario metido en
   una franja de la mitad izquierda, con la etiqueta y su campo separados por
   un hueco que crece con el monitor. Con la etiqueta encima, el ojo baja en
   linea recta y caben dos campos por renglon sin que nada se aleje. */

.ifx-form .ifx-fm-reja2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}
.ifx-form .ifx-fm-campo { min-width: 0; }
.ifx-form .ifx-fm-campo-ancho { grid-column: 1 / -1; }

.ifx-form .ifx-fm-et {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--ifx-tinta);
}
.ifx-form .ifx-fm-req {
  margin-left: 3px;
  color: var(--ifx-alerta);
  font-weight: 700;
}
.ifx-form .ifx-fm-opc {
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--ifx-tinta-suave);
  opacity: .85;
}

.ifx-form .ifx-fm-pista {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ifx-tinta-suave);
}

/* El mensaje de error. La clase .validacion-error es la del tema y se
   conserva en el marcado —es la que el PHP ya escribia— para no cambiar mas
   de lo necesario; aqui se le da forma. Va vacio casi siempre, asi que se
   pinta solo cuando tiene texto (:not(:empty)). */
.ifx-form .validacion-error:empty { display: none; }
.ifx-form .validacion-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 7px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ifx-alerta);
}
.ifx-form .validacion-error::before {
  content: "\f06a";           /* fa-exclamation-circle */
  font-family: FontAwesome;
  font-weight: normal;
  font-size: 11.5px;
  line-height: 1.45;
  flex: 0 0 auto;
}


/* --------------------------- controles de texto -------------------------- */

.ifx-form .form-control {
  height: auto;
  padding: 10px 13px;
  border: 1px solid var(--ifx-borde-suave);
  border-radius: var(--ifx-radio-chico);
  background: rgba(255,255,255,.86);
  box-shadow: inset 0 1px 2px rgba(20, 42, 70, .05);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ifx-tinta-fuerte);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.ifx-form .form-control::-webkit-input-placeholder { color: var(--ifx-tinta-suave); opacity: .72; }
.ifx-form .form-control::-moz-placeholder          { color: var(--ifx-tinta-suave); opacity: .72; }
.ifx-form .form-control:-ms-input-placeholder      { color: var(--ifx-tinta-suave); opacity: .72; }
.ifx-form .form-control::placeholder               { color: var(--ifx-tinta-suave); opacity: .72; }

.ifx-form .form-control:hover { border-color: rgba(76, 123, 224, .48); }
.ifx-form .form-control:focus {
  border-color: var(--ifx-azul);
  background: #FFF;
  box-shadow: 0 0 0 3px var(--ifx-azul-halo);
  outline: 0;
}
.ifx-form .form-control[readonly] {
  background: rgba(233, 238, 247, .72);
  color: var(--ifx-tinta-suave);
  cursor: default;
  box-shadow: var(--ifx-bandeja-borde);
}
.ifx-form textarea.form-control { min-height: 96px; resize: vertical; }

/* El desplegable. La flecha va como imagen de fondo porque appearance:none
   se lleva por delante la que pinta el sistema. */
.ifx-form select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5 7 7.5 13 1.5' fill='none' stroke='%235D6B85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
.ifx-form select.form-control::-ms-expand { display: none; }

/* Campo en error: el borde tambien lo dice, no solo el texto de abajo. */
.ifx-form .ifx-fm-campo-mal .form-control,
.ifx-form .ifx-fm-campo-mal .ifx-fm-selector-caja {
  border-color: var(--ifx-alerta);
  box-shadow: 0 0 0 3px var(--ifx-alerta-halo);
}


/* =============================== EL PICKER ================================
   Cliente, sucursal y equipo no se escriben: se eligen en una ventana. Antes
   eso era un <input readonly> dentro de una <table> de maquetacion con una
   lupa diminuta al lado —ocho pixeles de blanco para dar en el clavo—. Aqui
   la caja ENTERA es el boton.

   El valor sigue viajando en los mismos campos ocultos con los mismos id
   (caja_cliente, id_cliente, ...), que es lo que leen y escriben las
   funciones establecer_*_solicitudes() de js/ifix_functions.js. Lo unico que
   cambio es que ese input pasa de type=text readonly a type=hidden y el
   nombre se pinta desde PHP: .val() sigue funcionando igual y la pagina se
   recarga acto seguido, asi que lo que se ve siempre viene del servidor. */

.ifx-form .ifx-fm-selector-caja {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--ifx-borde-suave);
  border-radius: var(--ifx-radio-chico);
  background: rgba(255,255,255,.86);
  box-shadow: inset 0 1px 2px rgba(20, 42, 70, .05);
  color: var(--ifx-tinta-fuerte);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease, transform .16s ease;
}
.ifx-form .ifx-fm-selector-caja:hover,
.ifx-form .ifx-fm-selector-caja:focus {
  border-color: var(--ifx-azul);
  background: #FFF;
  color: var(--ifx-tinta-fuerte);
  text-decoration: none;
  box-shadow: 0 0 0 3px var(--ifx-azul-halo);
}
.ifx-form .ifx-fm-selector-caja:focus-visible { outline: 0; }
.ifx-form .ifx-fm-selector-caja:active { transform: translateY(1px); }

.ifx-form .ifx-fm-selector-ico {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ifx-azul-halo);
  color: var(--ifx-azul-hondo);
  font-size: 13px;
}
.ifx-form .ifx-fm-selector-v {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ifx-form .ifx-fm-selector-a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--ifx-azul-hondo);
  white-space: nowrap;
}
.ifx-form .ifx-fm-selector-a .fa { font-size: 11px; }

/* Sin elegir: borde discontinuo y texto apagado. Se distingue de un campo
   lleno sin tener que leerlo. */
.ifx-form .ifx-fm-selector-vacio .ifx-fm-selector-caja {
  border-style: dashed;
  background: rgba(255,255,255,.52);
}
.ifx-form .ifx-fm-selector-vacio .ifx-fm-selector-ico {
  background: rgba(96, 116, 168, .16);
  color: var(--ifx-tinta-suave);
}
.ifx-form .ifx-fm-selector-vacio .ifx-fm-selector-v {
  font-weight: 500;
  color: var(--ifx-tinta-suave);
}

/* Bloqueado porque falta el paso anterior (sucursal y equipo sin cliente).
   No se deshabilita: se deja pulsable a proposito, porque al pulsarlo sale la
   ventana que explica que falta elegir cliente. Un boton muerto no explica
   nada. */
.ifx-form .ifx-fm-selector-espera .ifx-fm-selector-caja { opacity: .72; }
.ifx-form .ifx-fm-selector-espera .ifx-fm-selector-a { color: var(--ifx-tinta-suave); }


/* ---------------------------- lectura (bandeja) --------------------------
   Un dato que el formulario muestra pero nadie captura: la poliza, que la
   arrastra el equipo. Va hundido para que se lea como "esto no se toca". */
.ifx-form .ifx-fm-lectura {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: var(--ifx-radio-chico);
  background: var(--ifx-bandeja);
  box-shadow: var(--ifx-bandeja-borde);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ifx-tinta-fuerte);
}
.ifx-form .ifx-fm-lectura .fa { color: var(--ifx-tinta-suave); font-size: 13px; }
.ifx-form .ifx-fm-lectura-vacia { font-weight: 500; color: var(--ifx-tinta-suave); }


/* ============================ TARJETAS DE OPCION ==========================
   El estado operativo del equipo y el nivel del ingeniero. Antes eran radios
   de trece pixeles dentro de una <table>, con la etiqueta como texto suelto
   que no llevaba a ningun lado al pulsarla. Aqui cada opcion es una tarjeta
   entera y el <label> envuelve al radio, asi que todo el rectangulo elige.

   El radio no se esconde con display:none: se deja en el sitio, transparente
   y de un pixel. Con display:none el teclado ya no lo alcanza y el grupo deja
   de recorrerse con las flechas. */

.ifx-form .ifx-fm-ops {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.ifx-form .ifx-fm-op {
  --op-color: var(--ifx-azul-hondo);
  --op-halo:  var(--ifx-azul-halo);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 13px;
  border: 1px solid var(--ifx-borde-suave);
  border-radius: var(--ifx-radio-chico);
  background: rgba(255,255,255,.72);
  font-weight: 400;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease, transform .16s ease;
}
.ifx-form .ifx-fm-op:hover { border-color: var(--op-color); transform: translateY(-1px); }

.ifx-form .ifx-fm-op input[type="radio"],
.ifx-form .ifx-fm-op input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.ifx-form .ifx-fm-op-ico {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--op-halo);
  color: var(--op-color);
  font-size: 13px;
  transition: background-color .16s ease, color .16s ease;
}
.ifx-form .ifx-fm-op-txt { min-width: 0; }
.ifx-form .ifx-fm-op-t {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ifx-tinta-fuerte);
}
.ifx-form .ifx-fm-op-d {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ifx-tinta-suave);
}

/* Elegida. El borde de dos tonos y el halo hacen que se vea desde lejos cual
   es, sin depender del color solo (que es lo que pide la accesibilidad): la
   tarjeta ademas se levanta y le sale la paloma. */
.ifx-form .ifx-fm-op input:checked ~ .ifx-fm-op-ico {
  background: var(--op-color);
  color: #FFF;
}
.ifx-form .ifx-fm-op input:checked ~ .ifx-fm-op-txt .ifx-fm-op-t { color: var(--op-color); }
.ifx-form .ifx-fm-op-elegida {
  border-color: var(--op-color);
  background: #FFF;
  box-shadow: 0 0 0 3px var(--op-halo);
}
.ifx-form .ifx-fm-op-elegida::after {
  content: "\f00c";           /* fa-check */
  position: absolute;
  top: 9px;
  right: 11px;
  font-family: FontAwesome;
  font-size: 11px;
  color: var(--op-color);
}
/* Con teclado: el foco viaja al radio, que es invisible, asi que el anillo se
   pinta en la tarjeta. */
.ifx-form .ifx-fm-op input:focus-visible ~ .ifx-fm-op-ico {
  box-shadow: 0 0 0 3px var(--ifx-azul-halo), 0 0 0 4px var(--ifx-azul);
}

/* los sabores */
.ifx-form .ifx-fm-op-ok   { --op-color: var(--ifx-ok);      --op-halo: var(--ifx-ok-halo); }
.ifx-form .ifx-fm-op-avi  { --op-color: var(--ifx-aviso);   --op-halo: var(--ifx-aviso-halo); }
.ifx-form .ifx-fm-op-mal  { --op-color: var(--ifx-alerta);  --op-halo: var(--ifx-alerta-halo); }
.ifx-form .ifx-fm-op-azul { --op-color: var(--ifx-azul-hondo); --op-halo: var(--ifx-azul-halo); }
.ifx-form .ifx-fm-op-cian { --op-color: var(--ifx-cian-hondo); --op-halo: rgba(19, 126, 143, .18); }

/* Aviso de que elegir esta opcion recarga la pagina. Se dice porque pasa: el
   estado operativo cambia la lista de tipos de servicio y eso lo resuelve el
   servidor con un envio del formulario. Callarlo hacia que el parpadeo
   pareciera un fallo. */
.ifx-form .ifx-fm-ops-nota {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 9px 0 0;
  font-size: 11.5px;
  color: var(--ifx-tinta-suave);
}
.ifx-form .ifx-fm-ops-nota .fa { font-size: 11px; opacity: .8; }


/* ============================== EL INTERRUPTOR ============================
   Team Lead. Era un checkbox de trece pixeles con la palabra "Es" delante y
   una etiqueta azul detras; se leia como un adorno y no como una decision.
   Aqui es un interruptor con su explicacion, y sigue siendo el mismo
   <input type="checkbox" name="es_team_lead" value="S"> de siempre. */

.ifx-form .ifx-fm-switch {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0;
  padding: 12px 15px;
  border: 1px solid var(--ifx-borde-suave);
  border-radius: var(--ifx-radio-chico);
  background: rgba(255,255,255,.72);
  font-weight: 400;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.ifx-form .ifx-fm-switch:hover { border-color: var(--ifx-azul); }

.ifx-form .ifx-fm-switch input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.ifx-form .ifx-fm-switch-pista {
  flex: 0 0 auto;
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: rgba(96, 116, 168, .30);
  box-shadow: inset 0 1px 3px rgba(20, 42, 70, .22);
  transition: background-color .18s cubic-bezier(.2,.8,.2,1);
}
.ifx-form .ifx-fm-switch-pista::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFF;
  box-shadow: 0 2px 5px rgba(20, 42, 70, .32);
  transition: transform .18s cubic-bezier(.2,.8,.2,1);
}
.ifx-form .ifx-fm-switch input:checked ~ .ifx-fm-switch-pista {
  background: linear-gradient(160deg, var(--ifx-azul-claro) 0%, var(--ifx-azul) 50%, var(--ifx-azul-hondo) 100%);
}
.ifx-form .ifx-fm-switch input:checked ~ .ifx-fm-switch-pista::after { transform: translateX(18px); }
.ifx-form .ifx-fm-switch input:focus-visible ~ .ifx-fm-switch-pista {
  box-shadow: inset 0 1px 3px rgba(20, 42, 70, .22), 0 0 0 3px var(--ifx-azul-halo);
}

.ifx-form .ifx-fm-switch-t {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ifx-tinta-fuerte);
}
.ifx-form .ifx-fm-switch-d {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ifx-tinta-suave);
}


/* =============================== CONTRASEÑA ===============================
   Tres cosas que antes no estaban:

   a) El ojo va DENTRO de la caja. Estaba puesto con estilos en linea
      (position:absolute; right:18px; top:10px) colgando del contenedor de
      Bootstrap, asi que en el alta caia sobre el texto y en la edicion, que
      tiene el checkbox encima, caia veinte pixeles mas arriba de donde
      deberia. Ahora la caja es el ancla y el boton se coloca respecto a ella.

   b) Las reglas se marcan solas mientras se escribe. Eran una lista fija de
      cuatro renglones que decia lo mismo antes y despues de cumplirlas.

   c) Hay un boton para generar una contraseña que cumple. En el alta el PHP
      ya generaba una al abrir; si el usuario la borraba, no habia vuelta.

   El id password1 y los id slash / eye se conservan intactos: son el contrato
   con hideshow() y con el $("#cambiar_password").click de
   js/ifix_functions.js. */

.ifx-form .ifx-fm-clave { position: relative; }
.ifx-form .ifx-fm-clave .form-control { padding-right: 78px; font-family: Menlo, Consolas, "Liberation Mono", monospace; letter-spacing: .4px; }

.ifx-form .ifx-fm-clave-btns {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
}
.ifx-form .ifx-fm-clave-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ifx-tinta-suave);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.ifx-form .ifx-fm-clave-btn:hover { background: var(--ifx-azul-halo); color: var(--ifx-azul-hondo); }
.ifx-form .ifx-fm-clave-btn:focus-visible { outline: 2px solid var(--ifx-azul); outline-offset: 1px; }
/* El ojo son dos iconos superpuestos que hideshow() enseña y esconde; el
   contenedor es un boton y ellos van dentro sin estorbar al clic. */
.ifx-form .ifx-fm-clave-btn .fa { pointer-events: none; }

/* Los dos iconos del ojo llevan id, y custom.css los viste por ese id:
       #slash { display:none; font-size:18px; color:#000 }
       #eye   {                font-size:18px; color:#000 }
   Un id le gana a cualquier cantidad de clases, asi que para que hereden el
   tamaño y el color del boton hace falta nombrarlos tambien por id. El
   display NO se toca: ese "none" del #slash es el estado inicial que espera
   hideshow() —contraseña oculta, ojo abierto a la vista— y moverlo dejaria
   los dos iconos encimados al cargar. */
.ifx-form #slash,
.ifx-form #eye {
  font-size: 14px;
  color: inherit;
  cursor: pointer;
}

.ifx-form .ifx-fm-reglas {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}
.ifx-form .ifx-fm-regla {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ifx-tinta-suave);
  transition: color .16s ease;
}
.ifx-form .ifx-fm-regla::before {
  content: "\f10c";           /* fa-circle-o */
  font-family: FontAwesome;
  font-size: 10px;
  opacity: .7;
}
.ifx-form .ifx-fm-regla-ok { color: var(--ifx-ok); font-weight: 600; }
.ifx-form .ifx-fm-regla-ok::before {
  content: "\f058";           /* fa-check-circle */
  opacity: 1;
}

/* Cuando la contraseña esta bloqueada (edicion sin marcar "cambiar"), todo el
   bloque se apaga: la caja, el ojo y las reglas. */
.ifx-form .ifx-fm-clave-bloque-off .ifx-fm-reglas { opacity: .45; }
.ifx-form .ifx-fm-clave-bloque-off .ifx-fm-clave-btn { color: rgba(93, 107, 133, .5); cursor: not-allowed; }


/* ============================== LOS COLORES ===============================
   Veinte tonos para el avatar. Antes eran veinte <input type="radio"> sueltos
   dentro de cinco <table> de maquetacion, cada uno con su cuadro de color AL
   LADO y sin relacion con el: el cuadro no era pulsable y habia que atinarle
   al circulito de trece pixeles.

   Ahora el color ES el boton: el radio va dentro del <label>, invisible pero
   presente para el teclado, y el circulo entero elige.

   Ademas se corrigio un valor equivocado. El quinto tono se pinta con
   .color-avatar-5, que en custom.css es #05ADD1 (el cian del tema), pero su
   radio mandaba #26B99A —el verde del primero— repetido. Elegir el cian
   guardaba verde, y como los dos radios compartian valor, marcar uno marcaba
   visualmente el otro. */

.ifx-form .ifx-fm-colores {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 0;
}

.ifx-form .ifx-fm-color {
  position: relative;
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow:
      inset 0 0 0 1px rgba(20, 42, 70, .14),
      0 2px 5px -2px rgba(20, 42, 70, .40);
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease;
}
.ifx-form .ifx-fm-color:hover { transform: scale(1.12); }

.ifx-form .ifx-fm-color input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* La paloma. Va en blanco con una sombra propia para que se vea igual sobre
   los tonos claros (#D2E0A3, #CED6DF) que sobre los oscuros (#02333E). */
.ifx-form .ifx-fm-color::after {
  content: "\f00c";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: FontAwesome;
  font-size: 13px;
  color: #FFF;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .16s ease, transform .16s cubic-bezier(.2,.8,.2,1);
}
.ifx-form .ifx-fm-color-elegido::after { opacity: 1; transform: scale(1); }
.ifx-form .ifx-fm-color-elegido {
  box-shadow:
      inset 0 0 0 2px #FFF,
      0 0 0 3px var(--ifx-azul),
      0 4px 10px -4px rgba(20, 42, 70, .55);
}
/* El foco del teclado: el radio es invisible, asi que el anillo lo pinta el
   circulo que lo contiene. */
.ifx-form .ifx-fm-color:focus-within {
  box-shadow:
      inset 0 0 0 2px #FFF,
      0 0 0 3px var(--ifx-azul),
      0 4px 10px -4px rgba(20, 42, 70, .55);
}


/* ================================ EL LADO =================================
   El resumen. Es una tarjeta de vidrio mas apretada que las secciones. */

.ifx-form .ifx-fm-resumen {
  border-radius: var(--ifx-radio);
  background: var(--ifx-vidrio-alto);
  -webkit-backdrop-filter: var(--ifx-desenfoque);
  backdrop-filter: var(--ifx-desenfoque);
  box-shadow: var(--ifx-sombra);
  overflow: hidden;
}
.ifx-form .ifx-fm-resumen-cab {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--ifx-renglon);
}
.ifx-form .ifx-fm-resumen-t {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ifx-tinta-suave);
}
.ifx-form .ifx-fm-resumen-cuerpo { padding: 6px 18px 16px; }

.ifx-form .ifx-fm-resumen-fila {
  padding: 11px 0;
  border-bottom: 1px solid var(--ifx-renglon);
}
.ifx-form .ifx-fm-resumen-fila:last-child { border-bottom: 0; }
.ifx-form .ifx-fm-resumen-e {
  display: block;
  margin-bottom: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--ifx-tinta-suave);
}
.ifx-form .ifx-fm-resumen-v {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ifx-tinta-fuerte);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.ifx-form .ifx-fm-resumen-v-falta {
  font-weight: 500;
  color: var(--ifx-tinta-suave);
  font-style: italic;
}

/* El avatar en vivo: el monograma con el color elegido, tal como saldra en
   los listados. El color se escribe en el atributo style desde PHP al cargar
   y desde el guion al cambiarlo. */
.ifx-form .ifx-fm-avatar-caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 18px 16px;
}
.ifx-form .ifx-fm-avatar {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ifx-gris);
  color: #FFF;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: .5px;
  box-shadow:
      inset 0 2px 0 rgba(255,255,255,.28),
      0 10px 22px -12px rgba(20, 42, 70, .75);
}
.ifx-form .ifx-fm-avatar-n {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--ifx-tinta-fuerte);
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}
.ifx-form .ifx-fm-avatar-n-falta { font-weight: 500; color: var(--ifx-tinta-suave); font-style: italic; }
.ifx-form .ifx-fm-avatar-pastillas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

/* La pastilla de nivel del costado. Es la misma forma que la de los listados
   (.ifx-ing-nivel en ingenieros_modern.css), repetida aqui porque aquella
   hoja esta acotada a .ifx-ingenieros y esta pantalla no la lleva. */
.ifx-form .ifx-fm-pastilla {
  --p-color: var(--ifx-gris);
  --p-halo:  var(--ifx-gris-halo);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: var(--p-halo);
  box-shadow: inset 0 0 0 1px var(--p-color);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1px;
  color: var(--p-color);
  white-space: nowrap;
}
.ifx-form .ifx-fm-pastilla .fa { font-size: 10.5px; }
.ifx-form .ifx-fm-pastilla-0 { --p-color: var(--ifx-azul-hondo); --p-halo: var(--ifx-azul-halo); }
.ifx-form .ifx-fm-pastilla-1 { --p-color: var(--ifx-cian-hondo); --p-halo: rgba(19, 126, 143, .18); }
.ifx-form .ifx-fm-pastilla-2 { --p-color: var(--ifx-ok);         --p-halo: var(--ifx-ok-halo); }
.ifx-form .ifx-fm-pastilla-x { --p-color: var(--ifx-aviso);      --p-halo: var(--ifx-aviso-halo); }
.ifx-form .ifx-fm-pastilla-tl { --p-color: var(--ifx-violeta);   --p-halo: var(--ifx-violeta-halo); }


/* ============================== EL AVISO ==================================
   El resumen de errores, arriba del formulario y solo cuando el envio volvio
   con algo mal. Antes el unico rastro de un error era una linea roja pegada
   al campo: en un formulario de dos pantallas de alto podia quedar fuera de
   la vista y parecia que el boton de guardar no hacia nada. */

.ifx-form .ifx-fm-aviso {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 20px;
  padding: 15px 18px;
  border-radius: var(--ifx-radio);
  background: linear-gradient(160deg, rgba(255,255,255,.94) 0%, rgba(253,240,238,.92) 100%);
  box-shadow:
      inset 0 1px 0 var(--ifx-filo-alto),
      inset 0 0 0 1px var(--ifx-alerta-halo),
      0 16px 30px -20px rgba(30, 42, 80, .45);
}
.ifx-form .ifx-fm-aviso-ico {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ifx-alerta-halo);
  color: var(--ifx-alerta);
  font-size: 15px;
}
.ifx-form .ifx-fm-aviso-t {
  margin: 2px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ifx-alerta);
}
.ifx-form .ifx-fm-aviso-l {
  margin: 7px 0 0;
  padding: 0 0 0 17px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ifx-tinta);
}
.ifx-form .ifx-fm-aviso-l a { color: var(--ifx-alerta); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }


/* ========================== LA BARRA DE ACCIONES ==========================
   Pegada abajo mientras se recorre el formulario. En el formulario viejo
   Cancelar y Guardar vivian al final de todo: en el de ingenieros, despues de
   los veinte colores; habia que bajar hasta el fondo para guardar aunque solo
   se hubiera corregido el telefono, que es el primer campo. */

.ifx-form .ifx-fm-barra {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding: 14px 20px;
  border-radius: var(--ifx-radio);
  background: linear-gradient(160deg, rgba(255,255,255,.94) 0%, rgba(238,242,252,.90) 100%);
  -webkit-backdrop-filter: var(--ifx-desenfoque);
  backdrop-filter: var(--ifx-desenfoque);
  box-shadow:
      inset 0 1px 0 var(--ifx-filo-alto),
      0 -10px 26px -18px rgba(30, 42, 80, .55),
      0 0 0 1px var(--ifx-anillo);
}
.ifx-form .ifx-fm-barra-nota {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ifx-tinta-suave);
}
.ifx-form .ifx-fm-barra-nota b { color: var(--ifx-tinta); font-weight: 600; }

/* --------------------------------- botones ------------------------------- */

.ifx-form .ifx-fm-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s cubic-bezier(.2,.8,.2,1), background-color .18s ease;
}
.ifx-form .ifx-fm-btn:focus-visible { outline: 2px solid var(--ifx-azul-hondo); outline-offset: 2px; }

/* el principal: el mismo azul del boton de alta de los listados */
.ifx-form .ifx-fm-btn-si,
.ifx-form .ifx-fm-btn-si.btn-success {
  background: linear-gradient(160deg, var(--ifx-azul-claro) 0%, var(--ifx-azul) 42%, var(--ifx-azul-hondo) 100%);
  color: #FFF;
  box-shadow:
      inset 0 1px 0 rgba(255,255,255,.34),
      0 12px 22px -14px rgba(47, 95, 196, .90);
}
.ifx-form .ifx-fm-btn-si:hover,
.ifx-form .ifx-fm-btn-si: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-form .ifx-fm-btn-si:active { transform: translateY(0); }
.ifx-form .ifx-fm-btn-si:focus-visible { outline-color: #FFF; }

/* el secundario: contorno, no relleno. Cancelar no compite con Guardar. */
.ifx-form .ifx-fm-btn-no,
.ifx-form .ifx-fm-btn-no.btn-secondary {
  background: rgba(255,255,255,.70);
  color: var(--ifx-tinta);
  box-shadow: inset 0 0 0 1px var(--ifx-borde-suave);
}
.ifx-form .ifx-fm-btn-no:hover,
.ifx-form .ifx-fm-btn-no:focus {
  background: #FFF;
  color: var(--ifx-tinta-fuerte);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--ifx-tinta-suave);
}

/* mientras se guarda: el boton se apaga y lo dice, para que nadie lo pulse
   dos veces y se guarde por duplicado */
.ifx-form .ifx-fm-btn[disabled],
.ifx-form .ifx-fm-btn-guardando {
  opacity: .72;
  pointer-events: none;
  transform: none !important;
}


/* ============================== LAS VENTANAS ==============================
   Los modales de cliente, sucursal y equipo. Son los del tema (Bootstrap 3) y
   siguen abriendose con data-toggle/data-target; aqui solo cambian de piel
   para que no se vean como una pieza de otro sistema encima del rediseño. */

.ifx-form .modal-content {
  border: 0;
  border-radius: var(--ifx-radio);
  background: linear-gradient(160deg, rgba(255,255,255,.98) 0%, rgba(244,247,253,.98) 100%);
  box-shadow:
      inset 0 1px 0 var(--ifx-filo-alto),
      0 36px 70px -28px rgba(20, 30, 60, .60),
      0 0 0 1px var(--ifx-anillo);
}
.ifx-form .modal-header {
  padding: 17px 22px 14px;
  border-bottom: 1px solid var(--ifx-renglon);
}
.ifx-form .modal-header .modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ifx-tinta-fuerte);
}
.ifx-form .modal-header .close {
  margin-top: -2px;
  color: var(--ifx-tinta-suave);
  opacity: .7;
  font-size: 22px;
  text-shadow: none;
}
.ifx-form .modal-header .close:hover { color: var(--ifx-alerta); opacity: 1; }
.ifx-form .modal-body { padding: 16px 22px; }
.ifx-form .modal-footer {
  padding: 13px 22px 17px;
  border-top: 1px solid var(--ifx-renglon);
}

/* La tabla de dentro. La de clientes la pagina DataTables (la inicializa el
   tema, build/js/custom.js, sobre #datatable); las de sucursales y equipos no
   la tenian y se les añadio en formulario_script.php. */
.ifx-form .modal .table { margin-bottom: 0; font-size: 13px; }
.ifx-form .modal .table > thead > tr > th {
  padding: 9px 12px;
  border-bottom: 1px solid var(--ifx-division);
  background: transparent;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ifx-tinta-suave);
  white-space: nowrap;
}
.ifx-form .modal .table > tbody > tr > td {
  padding: 10px 12px;
  border-top: 1px solid var(--ifx-renglon);
  vertical-align: middle;
  color: var(--ifx-tinta);
}
.ifx-form .modal .table.table-bordered,
.ifx-form .modal .table.table-bordered > thead > tr > th,
.ifx-form .modal .table.table-bordered > tbody > tr > td { border-left: 0; border-right: 0; }
.ifx-form .modal .table.table-striped > tbody > tr:nth-of-type(odd) { background: rgba(190, 213, 236, .16); }
.ifx-form .modal .table > tbody > tr:hover { background: var(--ifx-azul-halo); }

.ifx-form .modal .table a.liga_tablas {
  color: var(--ifx-azul-hondo);
  font-weight: 600;
  text-decoration: none;
}
.ifx-form .modal .table a.liga_tablas:hover { text-decoration: underline; text-underline-offset: 2px; }

.ifx-form .modal .dataTables_filter { text-align: right; }
.ifx-form .modal .dataTables_filter label,
.ifx-form .modal .dataTables_length label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ifx-tinta-suave);
}
.ifx-form .modal .dataTables_filter input,
.ifx-form .modal .dataTables_length select {
  height: auto;
  padding: 7px 11px;
  border: 1px solid var(--ifx-borde-suave);
  border-radius: 9px;
  background: #FFF;
  font-size: 13px;
  color: var(--ifx-tinta-fuerte);
}
.ifx-form .modal .dataTables_filter input:focus,
.ifx-form .modal .dataTables_length select:focus {
  border-color: var(--ifx-azul);
  box-shadow: 0 0 0 3px var(--ifx-azul-halo);
  outline: 0;
}
.ifx-form .modal .dataTables_info { font-size: 11.5px; color: var(--ifx-tinta-suave); }
.ifx-form .modal .dataTables_paginate .paginate_button {
  padding: 5px 11px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--ifx-tinta) !important;
  font-size: 12.5px;
}
.ifx-form .modal .dataTables_paginate .paginate_button:hover {
  background: var(--ifx-azul-halo) !important;
  color: var(--ifx-azul-hondo) !important;
}
.ifx-form .modal .dataTables_paginate .paginate_button.current,
.ifx-form .modal .dataTables_paginate .paginate_button.current:hover {
  background: var(--ifx-azul) !important;
  color: #FFF !important;
}
.ifx-form .modal .dataTables_paginate .paginate_button.disabled,
.ifx-form .modal .dataTables_paginate .paginate_button.disabled:hover {
  background: transparent !important;
  color: rgba(93, 107, 133, .45) !important;
}

/* La ventana chica de "primero elige un cliente". */
.ifx-form .ifx-fm-modal-nota {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
}
.ifx-form .ifx-fm-modal-nota-ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ifx-aviso-halo);
  color: var(--ifx-aviso);
  font-size: 15px;
}
.ifx-form .ifx-fm-modal-nota-t {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ifx-tinta-fuerte);
}
.ifx-form .ifx-fm-modal-nota-d {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ifx-tinta-suave);
}


/* ============================== EL RESULTADO ==============================
   Lo que sale despues de guardar. Antes era un .alert de Bootstrap con una
   <table> de cuatro renglones dentro y un glyphicon de 48px: glyphicons es la
   fuente de iconos de Bootstrap 3 y en el resto del sistema se usa Font
   Awesome, asi que ese era el unico icono de su especie en toda la
   aplicacion. Aqui es una tarjeta centrada, con el icono en un circulo del
   color que corresponde y el boton debajo. */

.ifx-form .ifx-fm-hecho {
  max-width: 520px;
  margin: 30px auto;
  padding: 34px 30px 30px;
  border-radius: var(--ifx-radio);
  background: var(--ifx-vidrio-alto);
  -webkit-backdrop-filter: var(--ifx-desenfoque);
  backdrop-filter: var(--ifx-desenfoque);
  box-shadow: var(--ifx-sombra);
  text-align: center;
}
.ifx-form .ifx-fm-hecho-ico {
  width: 66px;
  height: 66px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #FFF;
}
.ifx-form .ifx-fm-hecho-si .ifx-fm-hecho-ico {
  background: linear-gradient(160deg, #35B583 0%, var(--ifx-ok) 100%);
  box-shadow: 0 14px 26px -14px rgba(26, 138, 99, .95);
}
.ifx-form .ifx-fm-hecho-no .ifx-fm-hecho-ico {
  background: linear-gradient(160deg, #C9584C 0%, var(--ifx-alerta) 100%);
  box-shadow: 0 14px 26px -14px rgba(169, 59, 48, .95);
}
.ifx-form .ifx-fm-hecho-e {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ifx-tinta-suave);
}
.ifx-form .ifx-fm-hecho-t {
  margin: 7px 0 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--ifx-tinta-fuerte);
}
.ifx-form .ifx-fm-hecho-d {
  margin: 9px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ifx-tinta-suave);
}
.ifx-form .ifx-fm-hecho-detalle {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: var(--ifx-radio-chico);
  background: var(--ifx-bandeja);
  box-shadow: var(--ifx-bandeja-borde);
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
  color: var(--ifx-tinta);
}
.ifx-form .ifx-fm-hecho-botones {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}


/* ============================== EL CANDADO ================================
   La pantalla que sale al intentar editar una solicitud que ya paso de "Por
   asignar" (la guarda de estado de solicitudes_m.php). Es informacion, no un
   error del usuario: por eso va en ambar y no en rojo. */

.ifx-form .ifx-fm-candado {
  max-width: 640px;
  margin: 30px auto;
  padding: 30px 30px 26px;
  border-radius: var(--ifx-radio);
  background: var(--ifx-vidrio-alto);
  -webkit-backdrop-filter: var(--ifx-desenfoque);
  backdrop-filter: var(--ifx-desenfoque);
  box-shadow: var(--ifx-sombra);
  text-align: center;
}
.ifx-form .ifx-fm-candado-ico {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ifx-aviso-halo);
  color: var(--ifx-aviso);
  font-size: 24px;
}
.ifx-form .ifx-fm-candado-t {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ifx-tinta-fuerte);
}
.ifx-form .ifx-fm-candado-d {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ifx-tinta-suave);
  text-align: left;
}
.ifx-form .ifx-fm-candado-d b { color: var(--ifx-tinta-fuerte); font-weight: 700; }
.ifx-form .ifx-fm-candado-botones {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}


/* ============================== ADAPTABLE =================================
   Tres cortes:
     1280  el resumen deja de caber al costado y baja debajo del formulario;
      992  los campos pasan a una sola columna;
      768  se apaga el pegado de la barra y el resumen se vuelve una tira.  */

@media (max-width: 1280px) {
  .ifx-form .ifx-fm-reja { grid-template-columns: minmax(0, 1fr); }
  .ifx-form .ifx-fm-lado { position: static; }
  /* Abajo el resumen ya no es una columna estrecha: se reparte en renglones
     que aprovechan el ancho. */
  .ifx-form .ifx-fm-resumen-cuerpo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0 22px;
  }
  .ifx-form .ifx-fm-avatar-caja { flex-direction: row; justify-content: flex-start; }
  .ifx-form .ifx-fm-avatar-n { text-align: left; }
  .ifx-form .ifx-fm-avatar-pastillas { justify-content: flex-start; }
}

@media (max-width: 992px) {
  .ifx-form .ifx-fm-reja2 { grid-template-columns: minmax(0, 1fr); }
  .ifx-form .ifx-fm-seccion-cab { padding: 14px 16px 12px; }
  .ifx-form .ifx-fm-seccion-cuerpo { padding: 16px; }
}

@media (max-width: 768px) {
  .ifx-form .ifx-fm-barra {
    position: static;
    flex-wrap: wrap;
    padding: 14px 16px;
  }
  .ifx-form .ifx-fm-barra-nota { order: 3; flex: 1 0 100%; }
  .ifx-form .ifx-fm-btn { flex: 1 1 auto; justify-content: center; }
  .ifx-form .ifx-fm-ops { grid-template-columns: minmax(0, 1fr); }
  .ifx-form .ifx-fm-resumen-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .ifx-form .ifx-fm-hecho { padding: 26px 20px 24px; }
  .ifx-form .ifx-fm-selector-a span { display: none; }
}

/* ========================== MENOS MOVIMIENTO ==============================
   Quien pide en el sistema que se reduzca el movimiento no ve ni los levantes
   ni los deslizamientos. Los cambios de color se quedan: son los que dicen
   que esta elegido. */
@media (prefers-reduced-motion: reduce) {
  .ifx-form .ifx-fm-btn,
  .ifx-form .ifx-fm-op,
  .ifx-form .ifx-fm-color,
  .ifx-form .ifx-fm-selector-caja,
  .ifx-form .ifx-fm-switch-pista,
  .ifx-form .ifx-fm-switch-pista::after,
  .ifx-form .ifx-fm-color::after { transition: none; }
  .ifx-form .ifx-fm-btn:hover,
  .ifx-form .ifx-fm-op:hover,
  .ifx-form .ifx-fm-color:hover { transform: none; }
}