/* ============================================================================
   suizo_modern.css — la capa comun del rediseño tipografico suizo
   ----------------------------------------------------------------------------
   Se carga DESPUES de formularios_modern.css y ANTES de las hojas de cada
   pantalla suiza (perfil_modern.css, configuracion_modern.css...). La lateral
   va la ultima de todas; ver css.php.

   TODO esta acotado a  .ifx-suizo  /  .ifx-suizo-pagina . Una pantalla se
   apunta al rediseño poniendose ESAS DOS clases ademas de las suyas:

       $ifx_clase_pagina = 'ifx-form-pagina ifx-suizo-pagina ifx-<x>-pagina';
       <div class="right_col ifx-form ifx-suizo ifx-<x>">

   y pidiendo los dos tipos con  include 'suizo_tipos.php';

   Hoy la llevan:
       clientes_usuarios_m.php      "Mi información"         (+ .ifx-perfil)
       configuracion_variables.php  "Monitoreo de variables" (+ .ifx-config)
       configuracion_alertas.php    "Mis alertas"            (+ .ifx-config)

   ---- POR QUE EXISTE ESTE ARCHIVO -------------------------------------------
   Porque el rediseño empezo en una sola pantalla y todo —los tokens, los dos
   tipos, los diecinueve iconos dibujados y la forma de las piezas de
   formulario— vivia dentro de perfil_modern.css, acotado a .ifx-perfil. Al
   vestir la segunda pantalla habia dos caminos: copiar ese bloque, o sacarlo.

   Copiarlo habria dejado el mismo juego de iconos escrito dos veces y con dos
   vidas distintas: el dia que se corrija un trazo hay que acordarse de las dos.
   Asi que se saco aqui, y las hojas de pantalla se quedaron solo con lo suyo.

   ---- QUE HAY AQUI Y QUE HAY EN LA HOJA DE CADA PANTALLA --------------------
   Aqui: los tokens, el papel, los dos tipos, la seccion numerada, el campo, el
   interruptor, las reglas de la clave, la barra de acciones, los botones, el
   aviso, la tarjeta de resultado y los iconos. O sea: todo lo que una pantalla
   suiza tiene POR SER un formulario.

   En su hoja: lo que solo tiene ella. El encabezado con monograma y anillo de
   "Mi información" esta en perfil_modern.css; la reja de variables de
   Configuración esta en configuracion_modern.css.

   ---- LAS CUATRO REGLAS QUE MANDAN ------------------------------------------
     1. PAPEL.     Fondo blanco. Ni vidrio, ni desenfoque, ni sombras, ni
                   esquinas redondeadas, ni degradados. Lo que separa una zona
                   de otra es un filete o un hueco, nunca una caja.
     2. REJA.      Todo cuelga de la misma columna izquierda. Nada centrado.
     3. UN ACENTO. Un solo azul de señal (--pf-azul) sobre tinta y papel. Los
                   colores de estado (verde, ambar, ladrillo) se quedan porque
                   DICEN algo; no hay ni uno decorativo.
     4. JERARQUIA POR TAMAÑO. Una sola cosa grande por pantalla.

   ---- LOS DOS TIPOS ---------------------------------------------------------
       Archivo         grotesca de la familia de la Akzidenz: la voz.
       IBM Plex Mono   SOLO donde el contenido es una LECTURA de instrumento:
                       cifras, telefonos, contraseñas. Nunca en etiquetas.
   Los pide suizo_tipos.php, que incluye cada pantalla. Si la red del hospital
   bloquea Google Fonts, las dos pilas caen en Helvetica y en Menlo.

   ---- LOS ICONOS ------------------------------------------------------------
   Dibujados al final de este archivo, en la reja de 24 con trazo de 1.75 y
   puntas rectas. Se cambian por MASCARA de CSS sobre los <i class="fa"> que ya
   existen, asi que no hay que tocar ni el marcado de las pantallas ni
   formulario_widget.php, que lo comparten otras cuatro de captura.
   ========================================================================== */

/* ============================ LOS TOKENS ==================================
   Dos bloques. El primero es la paleta de la hoja: seis valores y ni uno mas.
   El segundo APAGA los tokens de vidrio que esta pantalla hereda de
   inicio_modern.css: en vez de ir contrarrestando regla por regla el
   degradado, el desenfoque y la sombra de cada pieza de formularios_modern,
   se vacian las variables de las que salen y todo lo heredado se aplana solo.
   Es una linea por efecto en vez de cuarenta. */
.ifx-suizo-pagina,
.ifx-suizo {
  /* La sangria de la columna de contenido: el ancho del numero de apartado mas
     su hueco. La leen el encabezado de seccion (ancho + gap) y el cuerpo
     (padding-left), que es lo que los mantiene colgando de la MISMA vertical.
     Estaban escritos a mano por separado y se habian ido 3px. */
  --pf-num:   20px;
  --pf-hueco: 13px;

  /* ---- la paleta ---- */
  --pf-papel:  #FFFFFF;   /* la hoja */
  --pf-tinta:  #16203B;   /* tinta: nombre, valores, titulos. Es el --ifx-marino
                             del sistema bajado un paso para leer sobre papel */
  --pf-gris:   #5C6884;   /* etiquetas y texto de apoyo */
  --pf-linea:  #D6DCE8;   /* el filete */
  --pf-azul:   #2F5FC4;   /* EL acento. Es --ifx-azul-hondo, el azul de casa */
  --pf-campo:  #F3F6FB;   /* el fondo de lo que se rellena */

  /* ---- los dos tipos ---- */
  --pf-sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --pf-mono: 'IBM Plex Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* El triangulo de "algo esta mal". Vive aqui y no abajo con los demas
     iconos porque lo usa el ::before del mensaje de error, que no es un
     <i class="fa"> sino un pseudoelemento. Es el mismo dibujo. */
  --pf-ico-mal: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'><path d='M12 3.4 22 20.6H2Z'/><path d='M12 9.8v5M12 17.2v1.2'/></svg>");

  /* ---- LA PALETA DE LA CASA, DECLARADA AQUI ----
     Estos veinte valores viven en inicio_modern.css, que los declara para una
     LISTA de clases de pantalla. Una pantalla suiza los necesita: los colores
     de rol del monograma, los de estado (verde, ambar, ladrillo) y los que usa
     por dentro formularios_modern.css.

     Se repiten aqui, y no se confia en aquella lista, por lo que paso al
     subir: el servidor tenia una version de inicio_modern.css ANTERIOR a que
     .ifx-form-pagina entrara en esa lista. Resultado: todos los var(--ifx-*)
     quedaban sin resolver. El cuadro de iniciales salia transparente —un fondo
     invalido— con las letras blancas encima del papel, y el anillo lleno salia
     gris en vez de verde. Los --pf-* funcionaban porque son de este archivo.

     Con esta copia, una pantalla suiza se pinta bien aunque inicio_modern.css
     sea vieja. Si algun dia cambia un color de la casa hay que cambiarlo en
     los dos sitios; es el precio de no depender de una lista que vive en otro
     archivo y que puede no estar al dia en el servidor. */
  --ifx-tinta-fuerte:    #25304A;
  --ifx-tinta:           #3E4B66;
  --ifx-tinta-suave:     #5D6B85;
  --ifx-cian-hondo:      #137E8F;
  --ifx-azul:            #4C7BE0;
  --ifx-azul-claro:      #7FA3F2;
  --ifx-azul-hondo:      #2F5FC4;
  --ifx-azul-halo:       rgba(76, 123, 224, .18);
  --ifx-violeta:         #6B4FA8;
  --ifx-violeta-halo:    rgba(107, 79, 168, .20);
  --ifx-ok:              #1A8A63;
  --ifx-ok-halo:         rgba(26, 138, 99, .22);
  --ifx-aviso:           #9C6D12;
  --ifx-aviso-halo:      rgba(156, 109, 18, .24);
  --ifx-naranja:         #B2551A;
  --ifx-naranja-halo:    rgba(178, 85, 26, .20);
  --ifx-alerta:          #A93B30;
  --ifx-alerta-halo:     rgba(169, 59, 48, .22);
  --ifx-gris:            #64798E;
  --ifx-gris-halo:       rgba(100, 121, 142, .22);

  /* ---- los tokens heredados, apagados ----
     Los usan por dentro formularios_modern.css e inicio_modern.css. Vaciarlos
     aqui aplana TODO lo que esta pantalla hereda sin tocar aquellas hojas. */
  --ifx-radio:        0;
  --ifx-radio-chico:  0;
  --ifx-vidrio:       var(--pf-papel);
  --ifx-vidrio-alto:  var(--pf-papel);
  --ifx-sombra:       none;
  --ifx-desenfoque:   none;
  --ifx-bandeja:      var(--pf-campo);
  --ifx-bandeja-borde: inset 0 0 0 1px var(--pf-linea);
  --ifx-borde-suave:  var(--pf-linea);
  --ifx-renglon:      var(--pf-linea);
  --ifx-division:     var(--pf-linea);
  --ifx-anillo:       var(--pf-linea);
  --ifx-filo:         var(--pf-linea);
  --ifx-filo-alto:    transparent;
}


/* ============================== EL PAPEL ==================================
   El campo azul con sus dos radiales se apaga SOLO en esta pantalla. Los
   selectores llevan el tipo (body.) a proposito: inicio_modern.css repite esa
   regla dentro de tres consultas de medios distintas —menos transparencia,
   mas contraste, impresion— y con el tipo delante se gana a las tres sin
   tener que repetirlas aqui una por una. */
/* El papel tambien en el <body>. El tema deja siempre unos pixeles de mas por
   debajo de .main_container —la barra de acciones pegada, los <script> del
   final— y ahi asomaba el azul oscuro del body como una franja al llegar al
   fondo de la pagina. Pintar el body no descubre nada: la barra lateral es
   position:fixed a la altura de la ventana, asi que tapa su columna siempre. */
body.ifx-suizo-pagina { background-color: var(--pf-papel); }

body.ifx-suizo-pagina .main_container {
  /* El 100vh es red de seguridad y no adorno: el tema estira .right_col por
     JavaScript (setContentHeight en build/js/custom.js) y hasta que ese guion
     corre —o si la pantalla es corta y no llega al borde— el papel se acaba
     donde se acaba el contenido y por debajo asoma el azul oscuro del <body>.

     Lo ponia inicio_modern.css para .ifx-form-pagina, pero el servidor tiene
     una version anterior a que esa clase entrara en la regla. Se repite aqui
     por lo mismo que la paleta: una pantalla suiza no puede depender de que
     otra hoja este al dia. */
  min-height: 100vh;
  background-color: var(--pf-papel);
  background-image: none;
}

/* El pie del tema. Misma historia: inicio_modern.css lo viste para una lista
   de clases donde .ifx-form-pagina no esta en el servidor, y sin esto se queda
   con el gris del tema, que sobre papel blanco se lee como una franja pegada. */
.ifx-suizo-pagina footer {
  background: transparent;
  border-top: 1px solid var(--pf-linea);
  color: var(--pf-gris);
  font-size: 12px;
}
.ifx-suizo-pagina footer a { color: var(--pf-azul); text-decoration: none; }
.ifx-suizo-pagina footer a:hover { text-decoration: underline; text-underline-offset: 2px; }
body.ifx-suizo-pagina .container.body .right_col.ifx-suizo {
  background: var(--pf-papel);
  padding-top: 0;
}

/* Mismo hueco del final que ya arreglaba la hoja anterior: setContentHeight()
   del tema congela el min-height de .right_col con la medida de su ready. */
body .container.body .right_col.ifx-suizo { min-height: 0 !important; }


/* ============================ LA TIPOGRAFIA ===============================
   Solo dentro de .ifx-suizo, que es el contenido. La lateral, la barra de
   arriba y el pie quedan fuera a proposito: son las mismas en todo el sistema
   y cambiarlas aqui haria que la pantalla se sintiera de otra aplicacion. */
.ifx-suizo {
  font-family: var(--pf-sans);
  color: var(--pf-tinta);
  -webkit-font-smoothing: antialiased;
}
/* Los controles no heredan el tipo del contenedor: hay que nombrarlos. */
.ifx-suizo input,
.ifx-suizo select,
.ifx-suizo textarea,
.ifx-suizo button,
.ifx-suizo .form-control { font-family: var(--pf-sans); }

/* La lectura de instrumento. Un solo sitio donde se decide QUE va en mono: lo
   que se lee como un dato MEDIDO, nunca una etiqueta ni una frase. Aqui van
   las de cualquier pantalla suiza; cada pantalla añade las suyas a su hoja. */
.ifx-suizo .ifx-fm-seccion-num,
.ifx-suizo .ifx-fm-clave .form-control {
  font-family: var(--pf-mono);
  font-variant-numeric: tabular-nums;
}

/* ============================== LA HOJA ===================================
   La medida. Una hoja no crece sin fin con el monitor: pasados los ~1180px la
   linea de texto se vuelve ilegible y la reja deja de leerse como reja.
   La clase va en el <div> que envuelve el contenido de cada pantalla. */
.ifx-suizo .ifx-hoja {
  max-width: 1180px;
  padding: 16px 0 0;
}

/* ============================== LAS SECCIONES =============================
   Eran tarjetas de vidrio con el numero en un circulo azul con degradado.
   Ahora son BLOQUES DE LA HOJA: sin caja, sin fondo, sin sombra. Lo que separa
   una seccion de la siguiente es un hueco y un filete, y lo que la numera es
   una cifra en el margen izquierdo, fuera de la columna de texto — que es
   exactamente donde un formato oficial pone el numero de apartado.

   Aqui el numero SI esta justificado: son los tres apartados de una ficha que
   se rellena en orden, y el PHP ya los numeraba. No se inventan. */

.ifx-suizo .ifx-fm-seccion {
  position: relative;
  margin: 0 0 4px;
  padding: 18px 0 6px;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  overflow: visible;
}

.ifx-suizo .ifx-fm-seccion-cab {
  display: flex;
  align-items: flex-start;
  gap: var(--pf-hueco);
  padding: 0 0 13px;
  border-bottom: 0;
}
/* El numero de apartado: cifra en mono, chica, en el acento. Sin circulo, sin
   degradado y sin sombra — es una referencia, no un boton. */
.ifx-suizo .ifx-fm-seccion-num {
  flex: 0 0 auto;
  width: var(--pf-num);
  height: auto;
  margin-top: 3px;
  border-radius: 0;
  display: block;
  background: none;
  box-shadow: none;
  color: var(--pf-azul);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
}
.ifx-suizo .ifx-fm-seccion-t {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.25;
  color: var(--pf-tinta);
}
.ifx-suizo .ifx-fm-seccion-d {
  margin: 3px 0 0;
  max-width: 46em;
  font-size: 12px;
  line-height: 1.5;
  color: var(--pf-gris);
}
/* El cuerpo se alinea con el titulo, no con el numero: el numero vive en el
   margen y la columna de contenido empieza donde empieza el texto.

   Y tiene MEDIDA. Sin el tope, en un monitor ancho —y sobre todo cuando la
   hoja cae a una sola columna— el campo del nombre se estiraba a mil pixeles:
   una caja de texto mas larga que el texto mas largo que puede llevar. Una
   hoja no se estira con el papel; la columna mide lo que tiene que medir y lo
   que sobra es margen. */
.ifx-suizo .ifx-fm-seccion-cuerpo {
  padding: 0 0 0 calc(var(--pf-num) + var(--pf-hueco));
  max-width: calc(560px + var(--pf-num) + var(--pf-hueco));
}
/* El hueco entre campos lo pone formularios_modern.css (16/18). Aqui se
   aprieta: sin cajas alrededor, el aire de mas entre un campo y el siguiente
   se lee como que no son del mismo bloque. */
.ifx-suizo .ifx-fm-reja2 { gap: 13px 16px; }


/* ================================ LOS CAMPOS ==============================
   Etiqueta encima, campo debajo, todo a ras del margen izquierdo del bloque.

   La caja del campo pierde el borde en los cuatro lados y conserva UNO: el de
   abajo, que es la linea sobre la que se escribe en un formato de papel. El
   fondo gris clarito dice donde se puede escribir sin necesidad de dibujar una
   caja. Al enfocar, esa linea se pone de acento y engorda: el foco se ve de
   lejos sin que nada se mueva de sitio. */

.ifx-suizo .ifx-fm-et {
  display: block;
  margin: 0 0 5px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--pf-gris);
}
.ifx-suizo .ifx-fm-req {
  margin-left: 4px;
  color: var(--ifx-alerta);
  font-weight: 500;
}
/* "opcional" / "recomendado" dejan las versalitas espaciadas: en caja baja
   pesan lo que tienen que pesar, que es poco. */
.ifx-suizo .ifx-fm-opc {
  margin-left: 7px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pf-gris);
  opacity: 1;
}
.ifx-suizo .ifx-fm-pista {
  margin: 5px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--pf-gris);
}

.ifx-suizo .form-control {
  height: auto;
  padding: 8px 11px;
  border: 0;
  border-bottom: 1px solid var(--pf-linea);
  border-radius: 0;
  background: var(--pf-campo);
  box-shadow: none;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--pf-tinta);
  transition: border-color .14s ease, background-color .14s ease;
}
.ifx-suizo .form-control::-webkit-input-placeholder { color: var(--pf-gris); opacity: 1; }
.ifx-suizo .form-control::-moz-placeholder          { color: var(--pf-gris); opacity: 1; }
.ifx-suizo .form-control:-ms-input-placeholder      { color: var(--pf-gris); opacity: 1; }
.ifx-suizo .form-control::placeholder               { color: var(--pf-gris); opacity: 1; }

.ifx-suizo .form-control:hover { border-bottom-color: var(--pf-gris); }
.ifx-suizo .form-control:focus {
  border-bottom-color: var(--pf-azul);
  box-shadow: inset 0 -1px 0 var(--pf-azul);   /* el filete a 2px sin mover nada */
  background: var(--pf-papel);
  outline: 0;
}
/* Con raton basta el filete azul de arriba. Con TECLADO no: el filete de abajo
   es lo unico que cambia y quien tabula por el formulario no ve donde esta.
   :focus-visible solo se enciende cuando el navegador decide que el foco viene
   del teclado, asi que el recuadro no aparece al hacer clic. */
.ifx-suizo .form-control:focus-visible {
  outline: 2px solid var(--pf-azul);
  outline-offset: 1px;
}
.ifx-suizo .form-control[readonly] {
  background: var(--pf-papel);
  border-bottom-style: dashed;
  color: var(--pf-gris);
  box-shadow: none;
}
/* La flecha del desplegable, redibujada con la punta recta del resto de los
   iconos: la de formularios_modern.css va con puntas redondeadas. */
.ifx-suizo select.form-control {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1.6 7 7.4 13 1.6' fill='none' stroke='%235C6884' stroke-width='1.6'/></svg>");
  background-position: right 12px center;
}
/* Campo en error: el filete se pone de ladrillo y se engorda. */
.ifx-suizo .ifx-fm-campo-mal .form-control {
  border-bottom-color: var(--ifx-alerta);
  box-shadow: inset 0 -1px 0 var(--ifx-alerta);
  background: var(--pf-campo);
}
.ifx-suizo .validacion-error {
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding-left: 0;
  margin-top: 6px;
  color: var(--ifx-alerta);
  font-size: 12px;
  font-weight: 500;
}
/* La marca del mensaje de error. formularios_modern.css la pone con el glifo
   fa-exclamation-circle: era el ultimo circulo que quedaba en una pantalla
   donde no hay ni una esquina redonda. Se cambia por el mismo triangulo que
   ya lleva el aviso de arriba, dibujado con la pluma de esta hoja, para que
   "algo esta mal" se dibuje igual en los dos sitios.
   Va fuera del @supports de los iconos a proposito: aqui no hay nada que
   perder si el navegador no tiene mask —el glifo se apaga igual— y el texto
   rojo ya dice lo que pasa. */
.ifx-suizo .validacion-error::before {
  content: "";
  font-family: var(--pf-sans);
  width: 13px;
  height: 13px;
  margin-top: 1px;
  background-color: currentColor;
  -webkit-mask: var(--pf-ico-mal) no-repeat center / contain;
          mask: var(--pf-ico-mal) no-repeat center / contain;
}


/* ================================== LA NOTA ===============================
   .mensaje_info es la caja de nota del tema. En una hoja no hay parches
   pegados encima: es un bloque sangrado con un filete de acento a la
   izquierda, que es como se marca un apunte al margen en un formato. */
.ifx-suizo .mensaje_info {
  margin: 11px 0 0;
  padding: 1px 0 1px 12px;
  border: 0;
  border-left: 2px solid var(--pf-azul);
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 12px;
  line-height: 1.55;
  color: var(--pf-gris);
}
.ifx-suizo .mensaje_info strong { color: var(--pf-tinta); font-weight: 600; }
.ifx-suizo .mensaje_info .fa { color: var(--pf-azul); margin-right: 3px; }


/* ============================= EL INTERRUPTOR =============================
   Era un switch de riel y bolita con degradado. En una hoja de formato eso no
   existe: existe la CASILLA. Se conserva el marcado entero —el id
   cambiar_password es contrato con js/ifix_functions.js— y solo cambia el
   dibujo: el riel se vuelve un cuadro de 18 y la bolita, la marca de dentro. */
.ifx-suizo .ifx-fm-switch {
  align-items: flex-start;
  gap: 11px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.ifx-suizo .ifx-fm-switch:hover { border: 0; }
.ifx-suizo .ifx-fm-switch:hover .ifx-fm-switch-pista { box-shadow: inset 0 0 0 1.5px var(--pf-azul); }

.ifx-suizo .ifx-fm-switch-pista {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 0;
  background: var(--pf-papel);
  box-shadow: inset 0 0 0 1.5px var(--pf-gris);
  transition: box-shadow .14s ease;
}
.ifx-suizo .ifx-fm-switch-pista::after {
  top: 4px;
  left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 0;
  background: var(--pf-azul);
  box-shadow: none;
  transform: scale(0);
  transition: transform .14s cubic-bezier(.2,.8,.2,1);
}
.ifx-suizo .ifx-fm-switch input:checked ~ .ifx-fm-switch-pista {
  background: var(--pf-papel);
  box-shadow: inset 0 0 0 1.5px var(--pf-azul);
}
.ifx-suizo .ifx-fm-switch input:checked ~ .ifx-fm-switch-pista::after { transform: scale(1); }
.ifx-suizo .ifx-fm-switch input:focus-visible ~ .ifx-fm-switch-pista {
  box-shadow: inset 0 0 0 1.5px var(--pf-azul), 0 0 0 3px rgba(47, 95, 196, .22);
}
.ifx-suizo .ifx-fm-switch-t { font-size: 13px; font-weight: 600; color: var(--pf-tinta); }
.ifx-suizo .ifx-fm-switch-d { margin-top: 3px; font-size: 11.5px; color: var(--pf-gris); }


/* ============================== LA CONTRASEÑA =============================
   La caja de la clave y las cuatro reglas que la validan. Las usa cualquier
   pantalla que capture una contraseña. */
.ifx-suizo .ifx-fm-clave .form-control { letter-spacing: .06em; padding-right: 76px; }
.ifx-suizo .ifx-fm-clave-btn {
  border-radius: 0;
  background: none;
  color: var(--pf-gris);
  transition: color .14s ease;
}
.ifx-suizo .ifx-fm-clave-btn:hover { background: none; color: var(--pf-azul); }
.ifx-suizo .ifx-fm-clave-btn:focus-visible { outline: 2px solid var(--pf-azul); outline-offset: 0; }

/* Las cuatro reglas. La marca de Font Awesome (circulo vacio / circulo con
   palomita) se cambia por la casilla de la hoja: cuadro vacio, cuadro lleno.
   Es la misma forma que el interruptor de arriba, que es de lo que se trata:
   en esta pantalla "cumplido" se dibuja siempre igual. */
.ifx-suizo .ifx-fm-regla { gap: 8px; font-size: 11.5px; color: var(--pf-gris); }
.ifx-suizo .ifx-fm-regla::before {
  content: "";
  font-family: var(--pf-sans);
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--pf-linea);
  opacity: 1;
}
.ifx-suizo .ifx-fm-regla-ok { color: var(--ifx-ok); font-weight: 500; }
.ifx-suizo .ifx-fm-regla-ok::before {
  content: "";
  background: var(--ifx-ok);
  box-shadow: inset 0 0 0 1.5px var(--ifx-ok);
}

/* ============================ LA BARRA DE ACCIONES ========================
   Pegada abajo, como siempre. Deja de ser una tarjeta flotante redondeada con
   desenfoque y pasa a ser el PIE DE LA HOJA: papel opaco y un filete grueso
   arriba, que rima con el del encabezado y cierra la pagina por abajo. */
.ifx-suizo .ifx-fm-barra {
  margin-top: 18px;
  padding: 12px 0;
  border-radius: 0;
  border-top: 3px solid var(--pf-tinta);
  background: var(--pf-papel);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  transition: border-color .3s ease;
}
.ifx-suizo .ifx-fm-barra-nota { font-size: 11.5px; color: var(--pf-gris); }

/* Cuando hay algo sin guardar, el filete de arriba se pone ambar. Es el mismo
   aviso de antes —que tiñe la barra entera— dicho con la unica herramienta que
   tiene una hoja: la linea. Sin fondo de color y sin movimiento. */
.ifx-suizo .ifx-fm-barra-sucia {
  background: var(--pf-papel);
  border-top-color: var(--ifx-aviso);
  box-shadow: none;
}

/* -------------------------------- botones --------------------------------
   Rectangulos. Guardar es un bloque de acento macizo; Cancelar es un filete.
   Sin pildoras, sin sombra y sin el salto de un pixel al pasar por encima:
   en esta hoja nada se levanta del papel. */
.ifx-suizo .ifx-fm-btn {
  padding: 9px 18px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  transition: background-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.ifx-suizo .ifx-fm-btn:hover,
.ifx-suizo .ifx-fm-btn:active { transform: none; }
.ifx-suizo .ifx-fm-btn:focus-visible { outline: 2px solid var(--pf-azul); outline-offset: 2px; }

.ifx-suizo .ifx-fm-btn-si,
.ifx-suizo .ifx-fm-btn-si.btn-success {
  background: var(--pf-azul);
  box-shadow: none;
  color: #FFF;
}
.ifx-suizo .ifx-fm-btn-si:hover,
.ifx-suizo .ifx-fm-btn-si:focus { background: var(--pf-tinta); box-shadow: none; color: #FFF; }
.ifx-suizo .ifx-fm-btn-si:focus-visible { outline-color: var(--pf-tinta); }

.ifx-suizo .ifx-fm-btn-no,
.ifx-suizo .ifx-fm-btn-no.btn-secondary {
  background: none;
  box-shadow: inset 0 0 0 1px var(--pf-linea);
  color: var(--pf-gris);
}
.ifx-suizo .ifx-fm-btn-no:hover,
.ifx-suizo .ifx-fm-btn-no:focus {
  background: none;
  box-shadow: inset 0 0 0 1px var(--pf-tinta);
  color: var(--pf-tinta);
}

/* ========================== EL AVISO Y EL RESULTADO =======================
   Las dos tarjetas que escribe formulario_widget.php y que esta pantalla no
   puede cambiar en el marcado —las comparte con otras cuatro—, vestidas de
   hoja: sin caja redondeada, sin degradado y con el icono en un cuadro de
   filete en vez de en un circulo relleno. */

.ifx-suizo .ifx-fm-aviso {
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 0;
  padding: 13px 0;
  border-radius: 0;
  border-top: 1px solid var(--ifx-alerta);
  border-bottom: 1px solid var(--pf-linea);
  background: none;
  box-shadow: none;
}
.ifx-suizo .ifx-fm-aviso-ico {
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: none;
  box-shadow: inset 0 0 0 1px var(--ifx-alerta);
  color: var(--ifx-alerta);
  font-size: 16px;
}
.ifx-suizo .ifx-fm-aviso-t { font-size: 14px; font-weight: 600; color: var(--ifx-alerta); }
.ifx-suizo .ifx-fm-aviso-l {
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--pf-tinta);
}
/* La vineta redonda del navegador era el unico circulo que quedaba en la
   pantalla. Se cambia por la misma marca cuadrada de las reglas de la
   contraseña: "un renglon de la lista" se dibuja igual en los dos sitios. */
.ifx-suizo .ifx-fm-aviso-l li { display: flex; align-items: baseline; gap: 9px; }
.ifx-suizo .ifx-fm-aviso-l li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  background: var(--ifx-alerta);
}
.ifx-suizo .ifx-fm-aviso-l a { color: var(--ifx-alerta); font-weight: 500; }

/* El resultado de guardar. Deja de estar centrado en mitad de la pantalla:
   se alinea a la izquierda, como todo lo demas.

   Y se le quita el rotulo "Operación exitosa" de encima del titulo. Lo escribe
   el widget y lo comparten otras cuatro pantallas, asi que se esconde solo
   aqui: en esta tarjeta ya lo dicen el cuadro verde con la palomita y el
   titulo que va justo debajo, y decir lo mismo tres veces seguidas es lo que
   sobra. El role="status" sigue en el contenedor, asi que quien navega con
   lector de pantalla oye el titulo igual. */
.ifx-suizo .ifx-fm-hecho {
  max-width: 560px;
  margin: 0;
  padding: 22px 0 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  text-align: left;
}
.ifx-suizo .ifx-fm-hecho-ico {
  width: 40px;
  height: 40px;
  margin: 0 0 16px;
  border-radius: 0;
  font-size: 22px;
}
.ifx-suizo .ifx-fm-hecho-si .ifx-fm-hecho-ico { background: var(--ifx-ok); box-shadow: none; }
.ifx-suizo .ifx-fm-hecho-no .ifx-fm-hecho-ico { background: var(--ifx-alerta); box-shadow: none; }
.ifx-suizo .ifx-fm-hecho-e { display: none; }
.ifx-suizo .ifx-fm-hecho-t {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.1;
  color: var(--pf-tinta);
}
.ifx-suizo .ifx-fm-hecho-d { font-size: 13.5px; color: var(--pf-gris); }
.ifx-suizo .ifx-fm-hecho-detalle {
  border-radius: 0;
  background: var(--pf-campo);
  box-shadow: inset 0 0 0 1px var(--pf-linea);
  font-family: var(--pf-mono);
  text-align: left;
}
.ifx-suizo .ifx-fm-hecho-botones { justify-content: flex-start; }


/* ============================================================================
   LOS ICONOS
   ----------------------------------------------------------------------------
   Todos dibujados aqui, en la reja de 24 y con la misma pluma: trazo de 1.75,
   puntas RECTAS (butt) y uniones en angulo vivo (miter). Ni una esquina
   redondeada, que es lo que separa este juego de los tres o cuatro que se ven
   en todas partes.

   Donde se pudo, el simbolo tampoco es el de todas partes:
       rol propietario    un escudo de lados rectos, no una insignia
       gerente operativo  una caratula con sus marcas, no un engrane
       ingeniero          una cabeza de tornillo hexagonal, no una llave
       team lead          dos galones de grado, no una estrella
       sin rol            un cuadro tachado, la casilla que nadie lleno
       alertas            un globo de mensaje de rabo recto, no el logo verde
   Correo, candado, ojo, palomita y aspa se quedan siendo lo que son: cambiar
   un simbolo que todo el mundo lee de un vistazo no es diseñar, es estorbar.

   ---- COMO SE CAMBIAN -------------------------------------------------------
   Por MASCARA sobre los <i class="fa ..."> que ya existen. No se toco ni el
   marcado de esta pantalla ni formulario_widget.php, que escribe varios de
   estos iconos y lo comparten otras cuatro pantallas de captura. Como el
   relleno es currentColor, cada icono sigue tomando el color que ya le daba su
   regla, y como mide 1em sigue tomando su tamaño.

   Todo va dentro de un @supports: donde no haya mask —navegadores viejos— no
   se aplica nada de esto y sale el Font Awesome de siempre, que es lo que
   habia. Un icono que no se ve es peor que uno corriente.
   ========================================================================== */
@supports ((-webkit-mask-image: url(#a)) or (mask-image: url(#a))) {

  .ifx-suizo i.fa-user,
  .ifx-suizo i.fa-shield,
  .ifx-suizo i.fa-briefcase,
  .ifx-suizo i.fa-cogs,
  .ifx-suizo i.fa-question,
  .ifx-suizo i.fa-wrench,
  .ifx-suizo i.fa-hospital-o,
  .ifx-suizo i.fa-star,
  .ifx-suizo i.fa-envelope-o,
  .ifx-suizo i.fa-whatsapp,
  .ifx-suizo i.fa-mobile,
  .ifx-suizo i.fa-lock,
  .ifx-suizo i.fa-info-circle,
  .ifx-suizo i.fa-refresh,
  .ifx-suizo i.fa-eye,
  .ifx-suizo i.fa-eye-slash,
  .ifx-suizo i.fa-check,
  .ifx-suizo i.fa-times,
  .ifx-suizo i.fa-exclamation-triangle,
  .ifx-suizo i.fa-pencil {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -.14em;
    background-color: currentColor;
    -webkit-mask: var(--pf-ico) no-repeat center / contain;
            mask: var(--pf-ico) no-repeat center / contain;
  }
  /* se apaga el glifo del tipo de Font Awesome; gana por especificidad al
     .fa-x:before de la libreria sin necesidad de !important */
  .ifx-suizo i.fa-user::before,
  .ifx-suizo i.fa-shield::before,
  .ifx-suizo i.fa-briefcase::before,
  .ifx-suizo i.fa-cogs::before,
  .ifx-suizo i.fa-question::before,
  .ifx-suizo i.fa-wrench::before,
  .ifx-suizo i.fa-hospital-o::before,
  .ifx-suizo i.fa-star::before,
  .ifx-suizo i.fa-envelope-o::before,
  .ifx-suizo i.fa-whatsapp::before,
  .ifx-suizo i.fa-mobile::before,
  .ifx-suizo i.fa-lock::before,
  .ifx-suizo i.fa-info-circle::before,
  .ifx-suizo i.fa-refresh::before,
  .ifx-suizo i.fa-eye::before,
  .ifx-suizo i.fa-eye-slash::before,
  .ifx-suizo i.fa-check::before,
  .ifx-suizo i.fa-times::before,
  .ifx-suizo i.fa-exclamation-triangle::before,
  .ifx-suizo i.fa-pencil::before { content: ""; display: none; }

  /* --- los roles, tal como los nombra usuario_widget_rol.php --- */
  /* cliente administrativo: cabeza y hombros de lados rectos */
  .ifx-suizo i.fa-user { --pf-ico: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'><circle cx='12' cy='8' r='3.6'/><path d='M4.6 20.2 6.6 14.6H17.4l2 5.6'/></svg>"); }
  /* propietario: escudo de lados rectos y punta baja */
  .ifx-suizo i.fa-shield { --pf-ico: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'><path d='M12 2.9 20 6.4v5.3L12 21.1 4 11.7V6.4Z'/></svg>"); }
  /* gerente administrativo: portafolio */
  .ifx-suizo i.fa-briefcase { --pf-ico: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'><path d='M3.2 7.8h17.6v11.6H3.2Z'/><path d='M9 7.8V5h6v2.8'/><path d='M3.2 13.2h17.6'/></svg>"); }
  /* gerente operativo: el tablero de trabajo, con una casilla tomada. No una
     caratula —a 13px se leia como un reloj— ni el engrane de siempre */
  .ifx-suizo i.fa-cogs { --pf-ico: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'><path d='M3.6 3.6h6.8v6.8H3.6Z' fill='%23000'/><path d='M13.6 3.6h6.8v6.8h-6.8Z'/><path d='M3.6 13.6h6.8v6.8H3.6Z'/><path d='M13.6 13.6h6.8v6.8h-6.8Z'/></svg>"); }
  /* sin rol: la casilla que nadie lleno */
  .ifx-suizo i.fa-question { --pf-ico: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'><path d='M4.2 4.2h15.6v15.6H4.2Z'/><path d='M4.2 19.8 19.8 4.2'/></svg>"); }
  /* ingeniero de servicio: cabeza de tornillo hexagonal */
  .ifx-suizo i.fa-wrench { --pf-ico: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'><path d='M12 3 19.8 7.5v9L12 21l-7.8-4.5v-9Z'/><circle cx='12' cy='12' r='3.4'/></svg>"); }

  /* --- la empresa y el grado --- */
  /* hospital: edificio con la cruz dentro */
  .ifx-suizo i.fa-hospital-o { --pf-ico: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'><path d='M4.4 20.4V7.6L12 3.6l7.6 4v12.8'/><path d='M2.4 20.4h19.2'/><path d='M12 9.6v5.6M9.2 12.4h5.6'/></svg>"); }
  /* team lead: dos galones de grado */
  .ifx-suizo i.fa-star { --pf-ico: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'><path d='M4.6 12.8 12 6l7.4 6.8'/><path d='M4.6 18.8 12 12l7.4 6.8'/></svg>"); }

  /* --- el contacto --- */
  .ifx-suizo i.fa-envelope-o { --pf-ico: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'><path d='M3 6.6h18v11.2H3Z'/><path d='m3.7 7.3 8.3 6.1 8.3-6.1'/></svg>"); }
  /* alertas: globo de mensaje de rabo recto. El texto de al lado ya dice que
     es WhatsApp; no hace falta el logo verde para entenderlo */
  .ifx-suizo i.fa-whatsapp { --pf-ico: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'><path d='M3.6 5h16.8v11h-7.8L7.6 20v-4H3.6Z'/><path d='M7.6 8.8h8.8M7.6 12h5.6'/></svg>"); }

  /* la app de iFix: el aparato, no un altavoz ni una campana */
  .ifx-suizo i.fa-mobile { --pf-ico: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'><path d='M6.8 2.8h10.4v18.4H6.8Z'/><path d='M10.4 5.6h3.2'/><path d='M10.2 18.4h3.6'/></svg>"); }

  /* --- la mecanica del formulario --- */
  .ifx-suizo i.fa-lock { --pf-ico: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'><path d='M8 10.2V7.6a4 4 0 0 1 8 0v2.6'/><path d='M4.6 10.2h14.8v10H4.6Z'/><path d='M12 13.6v3.2'/></svg>"); }
  .ifx-suizo i.fa-info-circle { --pf-ico: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'><circle cx='12' cy='12' r='8.6'/><path d='M12 11v5.6M12 7.4v1.4'/></svg>"); }
  /* generar: el arco con la escuadra al final, no las dos flechas de siempre */
  .ifx-suizo i.fa-refresh { --pf-ico: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'><path d='M20.2 12A8.2 8.2 0 1 1 16.9 5.5'/><path d='M11.6 5.1 16.9 5.5 16.5 10.8'/></svg>"); }
  .ifx-suizo i.fa-eye { --pf-ico: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'><path d='M2.4 12C6 7 18 7 21.6 12 18 17 6 17 2.4 12Z'/><circle cx='12' cy='12' r='2.9'/></svg>"); }
  .ifx-suizo i.fa-eye-slash { --pf-ico: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'><path d='M2.4 12C6 7 18 7 21.6 12 18 17 6 17 2.4 12Z'/><circle cx='12' cy='12' r='2.9'/><path d='M4.2 19.8 19.8 4.2'/></svg>"); }
  .ifx-suizo i.fa-check { --pf-ico: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'><path d='m4 12.4 5.4 5.4L20 6.6'/></svg>"); }
  .ifx-suizo i.fa-times { --pf-ico: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'><path d='m5.6 5.6 12.8 12.8M18.4 5.6 5.6 18.4'/></svg>"); }
  .ifx-suizo i.fa-exclamation-triangle { --pf-ico: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'><path d='M12 3.4 22 20.6H2Z'/><path d='M12 9.8v5M12 17.2v1.2'/></svg>"); }
  .ifx-suizo i.fa-pencil { --pf-ico: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'><path d='M4 20.2 5.3 15.4 16.8 3.9l3.5 3.5L8.8 18.9Z'/><path d='m14.4 6.3 3.5 3.5'/></svg>"); }
}


/* ================================ ADAPTABLE ===============================
   Lo que vale para cualquier pantalla suiza. Los cortes propios de cada una
   —donde se parte su reja, donde baja su encabezado— van en su hoja. */
@media (max-width: 992px) {
  .ifx-suizo .ifx-fm-hecho-t { font-size: 22px; }
}
@media (max-width: 768px) {
  .ifx-suizo .ifx-fm-seccion-cuerpo { padding-left: 0; }
}

/* ============================= MENOS MOVIMIENTO ===========================
   Lo comun. Cada pantalla apaga ademas lo suyo en su propia hoja. */
@media (prefers-reduced-motion: reduce) {
  .ifx-suizo .ifx-fm-switch-pista::after,
  .ifx-suizo .ifx-fm-barra { transition: none; }
}