/* ============================================================================
   perfil_modern.css — lo propio de la pantalla "Mi información"
   ----------------------------------------------------------------------------
   Se carga DESPUES de suizo_modern.css, que es donde vive el rediseño
   tipografico suizo entero: los tokens, el papel, los dos tipos, la seccion
   numerada, el campo, el interruptor, la barra de acciones, los botones, el
   aviso, la tarjeta de resultado y los diecinueve iconos dibujados.

   Aqui solo queda lo que NO tiene ninguna otra pantalla:

       el encabezado   el monograma cuadrado, el nombre grande y las etiquetas
       el anillo       cuanto le falta a la ficha para estar completa
       la reja 7/5     las dos columnas asimetricas del formulario
       el telefono     la lada y el numero pegados
       el despliegue   el bloque de contraseña que se abre y se cierra
       la fuerza       la barra que acompaña a las cuatro reglas
       el rol          la bandeja de lectura con su candado
       el estado       "sin cambios" / "n cambios sin guardar" en la barra

   TODO va acotado a  .ifx-perfil , que lleva en su <div class="right_col">
   una sola pantalla: clientes_usuarios_m.php. Esa pantalla lleva ademas
   .ifx-form y .ifx-suizo, en ese orden, y de ahi le llega lo demas.

   ---- POR QUE ESTE ARCHIVO ES MUCHO MAS CORTO QUE ANTES ---------------------
   Porque el rediseño nacio aqui y durante un rato TODO vivio aqui dentro. Al
   vestir Configuración con el mismo estilo, la capa comun se saco a
   suizo_modern.css en vez de copiarla: el juego de iconos escrito dos veces
   son dos juegos de iconos, y a la tercera correccion ya no coinciden.
   No cambio ni una regla al mudarse; solo cambio el selector de .ifx-perfil a
   .ifx-suizo en lo que se fue.

   ---- EL MOVIMIENTO ---------------------------------------------------------
   Dos animaciones, y las dos informan: el anillo se llena hasta donde esta la
   ficha, y el monograma parpadea cuando las letras cambian al escribir. Las
   dos se apagan bajo prefers-reduced-motion, al final.

   ---- LO QUE NO SE TOCO -----------------------------------------------------
   Ni un id, ni una clase que lea el JavaScript, ni el ida y vuelta con el
   servidor. El anillo conserva su geometria (r=34, circunferencia 213.63): ese
   numero vive a la vez en el PHP, en perfil_script.php y aqui.
   ========================================================================== */


/* ========================= LO QUE VA EN MONO AQUI =========================
   La lista comun esta en suizo_modern.css. Estas son las lecturas propias de
   esta pantalla: las iniciales, el porcentaje del anillo, el correo y el
   telefono del encabezado, y los dos campos del telefono. */
.ifx-perfil .ifx-pf-mono,
.ifx-perfil .ifx-pf-anillo-num b,
.ifx-perfil .ifx-pf-contacto li > span,
.ifx-perfil .ifx-pf-tel .form-control,
.ifx-perfil .ifx-pf-tel select.form-control {
  font-family: var(--pf-mono);
  font-variant-numeric: tabular-nums;
}

/* ============================== EL ENCABEZADO =============================
   Era una tarjeta marina flotante con degradados, reflejo y anillos de
   adorno. Ahora es la CABECERA DE LA HOJA: un filete grueso arriba —la firma
   de la pantalla—, y debajo, en una sola fila, las tres cosas que identifican
   la ficha: el monograma, quien eres y cuanto le falta.

   La audacia de la pantalla se gasta entera aqui, en el nombre. Todo lo demas
   —secciones, campos, barra— se mantiene en voz baja para que eso se vea. */

.ifx-perfil .ifx-pf-credencial {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin: 0 0 2px;
  padding: 12px 0 16px;
  border: 0;
  border-top: 3px solid var(--pf-tinta);
  border-bottom: 1px solid var(--pf-linea);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--pf-tinta);
  overflow: visible;
}
/* el filo de luz y los anillos de adorno de la version anterior */
.ifx-perfil .ifx-pf-credencial::before,
.ifx-perfil .ifx-pf-credencial::after { display: none; }


/* ---------------------------- el monograma -------------------------------
   Cuadrado y no circulo: en una reja de angulos rectos el circulo es la unica
   pieza que no se alinea con nada. El color sigue saliendo de la base o de la
   ranura de rol —es el MISMO circulo que se ve en el directorio de Usuarios y
   en el calendario, y ahi dice de que lado estas— pero plano, sin relieve. */
.ifx-perfil .ifx-pf-mono {
  --m-color: var(--pf-tinta);
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--m-color);
  box-shadow: none;
  color: #FFF;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  transition: background-color .3s ease;
}
.ifx-perfil .ifx-pf-mono-ifx0 { --m-color: var(--ifx-azul); }
.ifx-perfil .ifx-pf-mono-ifx1 { --m-color: var(--ifx-azul-hondo); }
.ifx-perfil .ifx-pf-mono-ifx2 { --m-color: var(--ifx-cian-hondo); }
.ifx-perfil .ifx-pf-mono-cli0 { --m-color: var(--ifx-violeta); }
.ifx-perfil .ifx-pf-mono-cli1 { --m-color: #6A55A8; }
.ifx-perfil .ifx-pf-mono-ing  { --m-color: var(--ifx-cian-hondo); }
.ifx-perfil .ifx-pf-mono-xx   { --m-color: var(--ifx-aviso); }

/* El unico movimiento del monograma: avisa de que las letras que se ven
   arriba acaban de cambiar por lo que se esta escribiendo abajo. Ya no escala
   —el rebote no cabe en esta reja—: parpadea. */
@keyframes ifx-pf-late {
  0%   { opacity: 1; }
  30%  { opacity: .25; }
  100% { opacity: 1; }
}
.ifx-perfil .ifx-pf-mono-late { animation: ifx-pf-late .3s ease; }


/* ------------------------------ quien eres ------------------------------- */

.ifx-perfil .ifx-pf-quien { flex: 1 1 auto; min-width: 0; padding-top: 2px; }

/* El titulo de la pantalla. Chico, en caja baja y gris: esta ahi porque hace
   falta saber en que pantalla estas, no para anunciar el nombre que va
   debajo. Sin versalitas ni letra espaciada. */
.ifx-perfil .ifx-pf-saludo {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pf-gris);
}

/* Lo unico grande de la pantalla. */
.ifx-perfil .ifx-pf-nombre {
  margin: 0;
  font-size: 33px;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.024em;
  color: var(--pf-tinta);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.ifx-perfil .ifx-pf-nombre-falta {
  color: var(--pf-gris);
  font-style: normal;
  font-weight: 400;
}

/* Las pastillas dejan de ser pastillas: son ETIQUETAS de ficha, rectangulos
   de filete sin relleno. Lo que las distingue entre si es el icono, no un
   fondo de color. */
.ifx-perfil .ifx-pf-pastillas {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 10px;
}
.ifx-perfil .ifx-pf-pastilla {
  --p-color: var(--pf-azul);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  margin: 0 -1px -1px 0;      /* filetes compartidos: no se doblan */
  padding: 5px 10px;
  border: 1px solid var(--pf-linea);
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--pf-tinta);
  /* Sin nowrap y con el tope de arriba: el nombre de un hospital largo se
     parte dentro de su etiqueta en vez de empujar la fila fuera de la hoja. */
  white-space: normal;
}
.ifx-perfil .ifx-pf-pastilla .fa { font-size: 13px; color: var(--p-color); flex: 0 0 auto; }
.ifx-perfil .ifx-pf-pastilla-ifx0,
.ifx-perfil .ifx-pf-pastilla-ifx1 { --p-color: var(--ifx-azul-hondo); }
.ifx-perfil .ifx-pf-pastilla-ifx2,
.ifx-perfil .ifx-pf-pastilla-ing  { --p-color: var(--ifx-cian-hondo); }
.ifx-perfil .ifx-pf-pastilla-cli0,
.ifx-perfil .ifx-pf-pastilla-cli1 { --p-color: var(--ifx-violeta); }
.ifx-perfil .ifx-pf-pastilla-xx   { --p-color: var(--ifx-aviso); }
/* el escalon de mando mas alto de su lado: el filete se pone de tinta, que en
   una hoja es lo que hace que una celda pese mas que sus vecinas */
.ifx-perfil .ifx-pf-pastilla-mando {
  border-color: var(--pf-tinta);
  background: none;
  box-shadow: none;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

/* Las dos vias por las que el sistema te busca. Son LECTURA —lo que se captura
   esta abajo— y ahora se leen como los renglones de un formato relleno: icono,
   y el dato en mono, que es como se lee un correo y un telefono. */
.ifx-perfil .ifx-pf-contacto {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 24px;
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
}
.ifx-perfil .ifx-pf-contacto li {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: 13px;
  color: var(--pf-tinta);
}
.ifx-perfil .ifx-pf-contacto .fa {
  font-size: 15px;
  color: var(--pf-gris);
  width: 1em;
  flex: 0 0 auto;
}
.ifx-perfil .ifx-pf-contacto span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -.01em;
}
.ifx-perfil .ifx-pf-contacto .ifx-pf-falta {
  font-family: var(--pf-sans);
  color: var(--ifx-aviso);
  font-style: normal;
}


/* ================================ EL ANILLO ===============================
   Cuanto le falta a la ficha. Sigue siendo el mismo circulo —la geometria no
   se puede tocar: r=34 y circunferencia 213.63 son un numero compartido entre
   el PHP, el guion y esta hoja— pero deja de ser un donut de 7px con las
   puntas redondeadas y pasa a ser una AGUJA: trazo fino, puntas rectas, pista
   de filete. Una lectura de instrumento, no una infografia.

   Sigue llenandose sin JavaScript: lo llena una animacion de CSS con el valor
   que escribio el PHP en --pf-fin. */

.ifx-perfil .ifx-pf-anillo {
  flex: 0 0 auto;
  position: relative;
  width: 114px;
  padding-left: 18px;
  border-left: 1px solid var(--pf-linea);
  text-align: left;
}
.ifx-perfil .ifx-pf-anillo svg {
  display: block;
  width: 70px;
  height: 70px;
  margin: 0;
  transform: rotate(-90deg);   /* que empiece a las 12 y no a las 3 */
}
.ifx-perfil .ifx-pf-anillo-p {
  fill: none;
  stroke: var(--pf-linea);
  stroke-width: 3;
}
.ifx-perfil .ifx-pf-anillo-v {
  fill: none;
  stroke: var(--pf-azul);
  stroke-width: 3;
  stroke-linecap: butt;        /* punta recta: la redonda miente en los extremos */
  stroke-dasharray: 213.63;
  stroke-dashoffset: var(--pf-fin, 213.63);
  animation: ifx-pf-anillo .9s cubic-bezier(.22, .90, .24, 1) .15s 1 both;
  transition: stroke-dashoffset .5s cubic-bezier(.22, .90, .24, 1), stroke .3s ease;
}
@keyframes ifx-pf-anillo {
  from { stroke-dashoffset: 213.63; }
  to   { stroke-dashoffset: var(--pf-fin, 213.63); }
}
.ifx-perfil .ifx-pf-anillo-lleno .ifx-pf-anillo-v { stroke: var(--ifx-ok); }

.ifx-perfil .ifx-pf-anillo-num {
  position: absolute;
  top: 0;
  left: 18px;
  right: auto;
  width: 70px;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}
.ifx-perfil .ifx-pf-anillo-num b {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--pf-tinta);
}
.ifx-perfil .ifx-pf-anillo-num small {
  margin-top: 3px;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pf-gris);
}
.ifx-perfil .ifx-pf-anillo-pie {
  margin: 9px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--pf-gris);
}
.ifx-perfil .ifx-pf-anillo-lleno .ifx-pf-anillo-pie { color: var(--ifx-ok); font-weight: 500; }


/* ================================ LA REJA =================================
   Dos columnas, como antes, pero ASIMETRICAS: 7 y 5 de doce.

   No es capricho. La columna izquierda lleva "Quién eres" —tres campos, uno
   de ellos el correo, que es el dato mas largo de la pantalla— y la derecha
   lleva el telefono y la contraseña, que son cortos. Con las dos columnas
   iguales, la izquierda iba apretada y la derecha sobraba. La reja suiza no
   reparte a partes iguales: reparte por lo que tiene que caber.

   Y son dos columnas de verdad, cada una con sus secciones apiladas dentro, y
   no seis celdas de una reja: puestas en celdas, la de la derecha quedaba a la
   altura de la de la izquierda y debajo se abria un hueco. */
.ifx-perfil .ifx-pf-reja {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0;
  align-items: start;
}
.ifx-perfil .ifx-pf-col { min-width: 0; }
/* El filete que parte la hoja en dos. Es la reja hecha visible: la unica
   separacion entre las dos columnas, sin marco alrededor de nada. */
.ifx-perfil .ifx-pf-reja > .ifx-pf-col:first-child { padding-right: 34px; }
.ifx-perfil .ifx-pf-reja > .ifx-pf-col:last-child {
  padding-left: 34px;
  border-left: 1px solid var(--pf-linea);
}
/* Dentro de media hoja los campos van de uno en uno. */
.ifx-perfil .ifx-pf-reja .ifx-fm-reja2 { grid-template-columns: minmax(0, 1fr); }
/* Entre secciones de la misma columna, un filete. La primera de cada columna
   no lo lleva: ya la corta el filete grueso del encabezado. */
.ifx-perfil .ifx-pf-col .ifx-fm-seccion + .ifx-fm-seccion { border-top: 1px solid var(--pf-linea); }

/* ================================ EL TELEFONO =============================
   La lada y el numero, pegados, como se leen. Los dos en mono: son una cifra,
   no una palabra. */
.ifx-perfil .ifx-pf-tel {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 10px;
}
.ifx-perfil .ifx-pf-tel select.form-control { text-overflow: ellipsis; font-size: 13px; }


/* ======================== EL DESPLIEGUE DE LA CLAVE =======================
   El despliegue conserva su mecanica entera (grid-template-rows de 0fr a 1fr:
   el destino es el alto exacto del contenido, sea el que sea) y sin JavaScript
   se queda ABIERTO, que es lo que lo deja alcanzable. */
.ifx-perfil .ifx-pf-despliegue {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .32s cubic-bezier(.22,.90,.24,1), opacity .24s ease;
}
.ifx-perfil .ifx-pf-despliegue > div { min-height: 0; overflow: hidden; }
.ifx-perfil .ifx-pf-despliegue-off { grid-template-rows: 0fr; opacity: 0; }
.ifx-perfil .ifx-pf-despliegue > div > :first-child { margin-top: 14px; }

/* La barra de fuerza: cuatro tramos rectos, uno por regla cumplida. Sin
   redondeo — en esta hoja no hay ni una esquina redonda. */
.ifx-perfil .ifx-pf-fuerza { display: flex; gap: 3px; margin: 11px 0 0; }
.ifx-perfil .ifx-pf-fuerza span {
  flex: 1 1 0;
  height: 3px;
  border-radius: 0;
  background: var(--pf-linea);
  transition: background-color .24s ease;
}
.ifx-perfil .ifx-pf-fuerza-1 span.ifx-pf-fuerza-on { background: var(--ifx-alerta); }
.ifx-perfil .ifx-pf-fuerza-2 span.ifx-pf-fuerza-on { background: var(--ifx-aviso); }
.ifx-perfil .ifx-pf-fuerza-3 span.ifx-pf-fuerza-on { background: var(--ifx-naranja); }
.ifx-perfil .ifx-pf-fuerza-4 span.ifx-pf-fuerza-on { background: var(--ifx-ok); }
.ifx-perfil .ifx-pf-fuerza-t {
  margin: 6px 0 0;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--pf-gris);
}
.ifx-perfil .ifx-pf-fuerza-4 + .ifx-pf-fuerza-t,
.ifx-perfil .ifx-pf-fuerza-t.ifx-pf-fuerza-t-ok { color: var(--ifx-ok); font-weight: 500; }

/* ================================== EL ROL ================================
   No se captura: se enseña. Bandeja de lectura con filete y el candado al
   final, que es lo que dice POR QUE no se puede tocar. */
.ifx-perfil .ifx-pf-fijo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border-radius: 0;
  background: none;
  box-shadow: inset 0 0 0 1px var(--pf-linea);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--pf-tinta);
}
.ifx-perfil .ifx-pf-fijo .fa { font-size: 15px; color: var(--pf-gris); flex: 0 0 auto; }
.ifx-perfil .ifx-pf-fijo span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifx-perfil .ifx-pf-fijo-candado {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 400;
  color: var(--pf-gris);
}
.ifx-perfil .ifx-pf-fijo-candado .fa { font-size: 12px; margin-right: 4px; }


/* ========================== CAMBIOS SIN GUARDAR ===========================
   La barra de acciones dice si hay algo que guardar. La pastilla es la señal,
   no el boton: el boton NUNCA se apaga. Si el guion no llega —o si se
   equivoca contando— Guardar tiene que seguir guardando. */
.ifx-perfil .ifx-pf-estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--pf-gris);
  white-space: nowrap;
  transition: color .24s ease;
}
.ifx-perfil .ifx-pf-estado .fa { font-size: 13px; }
.ifx-perfil .ifx-pf-estado-hay { background: none; box-shadow: none; color: var(--ifx-aviso); font-weight: 500; }

/* ================================ ADAPTABLE ===============================
   Lo que se mueve en ESTA pantalla. Los cortes comunes a todas las suizas
   estan en suizo_modern.css. Tres:
     1180  la hoja deja de partirse en dos columnas
      992  el encabezado se parte en renglones y el anillo baja
      768  el anillo se pone de lado y la lada ocupa su propio renglon */

@media (max-width: 1180px) {
  .ifx-perfil .ifx-pf-reja { grid-template-columns: minmax(0, 1fr); }
  .ifx-perfil .ifx-pf-reja > .ifx-pf-col:first-child { padding-right: 0; }
  .ifx-perfil .ifx-pf-reja > .ifx-pf-col:last-child { padding-left: 0; border-left: 0; }
  /* en una sola columna las secciones vuelven a ir en fila, y entonces si
     caben dos campos por renglon dentro de cada una */
  .ifx-perfil .ifx-pf-reja .ifx-fm-reja2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* el filete entre secciones ya no es por columna sino de arriba abajo */
  .ifx-perfil .ifx-pf-col + .ifx-pf-col .ifx-fm-seccion:first-child { border-top: 1px solid var(--pf-linea); }
}

@media (max-width: 992px) {
  .ifx-perfil .ifx-pf-credencial { flex-wrap: wrap; gap: 20px; padding-bottom: 20px; }
  .ifx-perfil .ifx-pf-quien { flex: 1 1 240px; }
  .ifx-perfil .ifx-pf-mono { width: 54px; height: 54px; font-size: 19px; }
  .ifx-perfil .ifx-pf-nombre { font-size: 26px; }
  .ifx-perfil .ifx-pf-reja .ifx-fm-reja2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  /* el anillo deja de ser una columna: en vertical, 84px de circulo con su
     filete al lado se comen media pantalla */
  .ifx-perfil .ifx-pf-anillo {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid var(--pf-linea);
  }
  .ifx-perfil .ifx-pf-anillo svg { width: 60px; height: 60px; }
  .ifx-perfil .ifx-pf-anillo-num { top: 14px; left: 0; width: 60px; height: 60px; }
  .ifx-perfil .ifx-pf-anillo-num b { font-size: 15px; }
  /* "completa" no cabe bajo un circulo de 66px; el renglon de al lado ya dice
     de que va ("Falta tu teléfono" / "Tu ficha está completa") */
  .ifx-perfil .ifx-pf-anillo-num small { display: none; }
  .ifx-perfil .ifx-pf-anillo-pie { margin: 0; }
  .ifx-perfil .ifx-pf-tel { grid-template-columns: minmax(0, 1fr); }
  .ifx-perfil .ifx-pf-estado { order: 3; }
  .ifx-perfil .ifx-pf-nombre { font-size: 23px; }
}


/* ============================= MENOS MOVIMIENTO ===========================
   Quedan dos animaciones en la pantalla y las dos se apagan aqui. Lo que se
   queda son los COLORES y las POSICIONES FINALES, que son los que llevan la
   informacion: el anillo sale lleno hasta donde toca —el stroke-dashoffset de
   --pf-fin ya esta en la regla base, la animacion solo lo recorria— y el
   bloque de la contraseña se abre y se cierra de golpe. */
@media (prefers-reduced-motion: reduce) {
  .ifx-perfil .ifx-pf-mono-late,
  .ifx-perfil .ifx-pf-anillo-v { animation: none; }

  .ifx-perfil .ifx-pf-despliegue,
  .ifx-perfil .ifx-pf-anillo-v,
  .ifx-perfil .ifx-pf-fuerza span,
  .ifx-perfil .ifx-pf-fuerza-t,
  .ifx-perfil .ifx-pf-estado,
  .ifx-perfil .ifx-pf-mono,
  .ifx-perfil .ifx-fm-barra { transition: none; }
}