@charset "utf-8";
/* ============================================================
   modulos/perfil.css

   Se carga después de base.css, panel.css y app.css. Solo lo que es de
   esta área: todo lo común (tarjetas, botones, campos, cifras, tablas,
   avisos, cabecera de pantalla) ya viene de ahí.

   EL PERFIL ES UN PANEL, NO UNA PORTADA. Se abre para mirar un dato —la
   racha, un logro— o para tocar un ajuste, y se sale. Por eso lleva las
   piezas densas de panel.css (`.metricas`, `.bloque`, `.ajuste`, `.palanca`,
   `.peligro`) y no tarjetas de 22 px con aire de página de venta. Lo único
   que se escribe aquí es lo que no existe allí: la ficha con el avatar, la
   lista de logros ganados, el selector de tema de tres posiciones y las
   filas de enlace de los grupos.

   Prefijo `pf-`: diez áreas escriben hojas a la vez y un nombre corto sin
   prefijo acaba pisando el de otra.
   ============================================================ */

/* ---------- la ficha: avatar, nombre, correo y rol ---------- */
.pf-ficha {
  display: flex; align-items: center; gap: var(--e-4);
  margin-bottom: var(--p-e-45);
  min-width: 0;
}
/* 64 px y la inicial en la letra de los titulares: es la misma inicial que
   la de la columna (32 px), en grande. Sin degradado: el azul de marca plano
   es lo que la plantilla usa para una persona. */
.pf-avatar {
  width: 4rem; height: 4rem;
  font-family: var(--display); font-size: var(--t-xl); font-weight: 600;
}
.pf-quien { min-width: 0; }
/* El nombre y el correo los escribe una persona, y un correo largo no tiene
   dónde partirse: sin `anywhere` empujaba la página de lado a 320 px. */
.pf-quien h2 { font-size: var(--t-xl); overflow-wrap: anywhere; }
.pf-correo { color: var(--tinta-2); font-size: var(--t-sm); margin-top: .125rem; overflow-wrap: anywhere; }
/* base.css pone 16 px entre dos párrafos seguidos; aquí correo y etiquetas
   son la misma línea de identidad y se separan lo justo. */
.pf-quien > p + p { margin-top: var(--e-2); }
.pf-etiquetas { display: flex; flex-wrap: wrap; gap: var(--e-1); }

/* Las cuatro cifras llevan cada una el color de su familia con `.tono-*` de
   app.css, como en el expediente de la plantilla: con cuatro números en negro
   hay que leer el rótulo para saber cuál es la racha. */

/* ---------- actividad y logros, lado a lado ---------- */
/* `start` y no el estirado de la rejilla: los logros miden el triple que la
   actividad, y estirada la caja de la actividad quedaba medio vacía. */
.pf-rejilla { align-items: start; margin-bottom: var(--p-e-45); }
.pf-rejilla > .bloque { margin-bottom: 0; }

.pf-actividad .columnas { height: 6rem; }
.pf-actividad-pie {
  display: flex; justify-content: space-between; gap: var(--e-3);
  margin-top: var(--e-2);
  font-size: var(--p-xs); color: var(--tinta-3);
}

.pf-logros-lista { list-style: none; display: grid; gap: var(--e-3); }
.pf-logros-lista li {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  gap: var(--e-3); align-items: center;
}
/* La medalla en el lavado de XP: es el color de lo ganado en toda la
   plataforma. El icono va en su tinta, que es la que llega a 3:1 sobre el
   lavado en los dos temas. */
.pf-logro-ico {
  width: 2.25rem; height: 2.25rem; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--xp-lavado); color: var(--xp-tinta);
}
.pf-logro-txt { min-width: 0; }
.pf-logro-txt b { display: block; font-weight: 600; line-height: 1.3; }
.pf-logro-txt small { display: block; font-size: var(--p-xs); color: var(--tinta-3); margin-top: .125rem; }
.pf-logro-hecho { color: var(--acierto-tinta); display: grid; }

/* El rótulo que separa lo ganado de lo pendiente: la misma voz que el
   encabezado de una columna de tabla, no un titular. */
.pf-sub {
  font-family: var(--texto); font-size: var(--p-xs); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-3);
  margin: var(--e-5) 0 var(--e-3);
}
/* El nombre del logro pendiente no se parte en dos líneas: la fila es de
   21 px y «3 conversaciones» partido la duplicaba. */
.pf-logros .barra-fila > .nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-logros .barra-pista > i { --tono: var(--xp-tinta); }

/* ---------- los ajustes de todos los días ---------- */
/* El tema en tres posiciones. Es un grupo de botones y no un desplegable
   porque son tres y se ven de golpe: con un <select> había que abrirlo para
   saber que existía «Automático». El elegido lleva filo y tinta de la
   sección, dos señales, porque un gris y un violeta flojos se confunden al
   sol. Es el control segmentado común (`.segmentado`, app.css §12), el mismo
   de Mirar, Vídeos, Pronunciar y Mis clases. */
/* Apilada la fila (panel.css apila todo `.ajuste` sin palanca por debajo de
   34rem), el grupo ocupa el ancho entero y los tres botones se reparten; la
   pieza común solo lo hace por debajo de 30rem. A partes iguales no cabe
   «Automático» en un tercio de 320 px: cada opción mide al menos su palabra
   y el sobrante se reparte. */
@media (max-width: 34rem) {
  .pf-ajustes .segmentado { display: grid; grid-auto-columns: minmax(max-content, 1fr); }
  .pf-ajustes .segmentado > button { padding-inline: var(--e-2); }
  .pf-ajustes .ajuste select { width: 100%; }
}

/* ---------- los grupos de enlaces ---------- */
.pf-grupos {
  display: grid; gap: var(--p-e-45); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin-bottom: var(--p-e-45);
}
.pf-grupos > .bloque { margin-bottom: 0; }
/* Recorta el lavado de la fila al pasar por encima contra las esquinas del
   bloque. El foco no se pierde: va hacia dentro, ver `.pf-enlace`. */
.pf-grupo { overflow: hidden; }
.pf-enlaces { list-style: none; }
.pf-enlaces li + li { border-top: 1px solid var(--linea-suave); }
.pf-enlace {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center; gap: var(--e-3);
  width: 100%; min-height: 3.5rem; padding: var(--e-3) var(--e-4);
  font: inherit; text-align: left; text-decoration: none; color: var(--tinta);
  background: none; border: 0; border-radius: 0; cursor: pointer;
  transition: background-color .15s ease;
}
.pf-enlace:hover { background: var(--papel-2); }
.pf-enlace:focus-visible { outline-offset: -3px; }
/* El icono en el color de la sección a la que lleva la fila: la clase
   `t-<vista>` de la propia fila le da su `--seccion`. */
.pf-enlace-ico {
  width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--seccion-lavado); color: var(--seccion-tinta);
}
.pf-enlace-txt { min-width: 0; }
.pf-enlace-txt b { display: block; font-weight: 600; line-height: 1.3; }
.pf-enlace-txt small { display: block; font-size: var(--p-sm); color: var(--tinta-3); margin-top: .125rem; }
.pf-enlace-flecha { display: grid; color: var(--tinta-3); }
.pf-enlace:hover .pf-enlace-flecha { color: var(--tinta-2); }

/* ---------- la zona de peligro ---------- */
.pf-peligro { margin-top: var(--e-6); }
.pf-peligro-acciones { margin-top: var(--e-4); align-items: center; }
/* Separada del resto por altura, no por un filete: lo legal no es una
   sección más de la cuenta. */
.pf-legal { margin-top: var(--e-6); text-align: center; font-size: var(--p-sm); color: var(--tinta-3); }

/* ---------- la ventana de borrar la cuenta ----------
   Es la ventana común de preguntar (`TK.preguntar`, app.css) con esta clase
   encima: aquí solo va lo que la hace distinta, el titular en la tinta de
   racha y la lista de lo que se pierde. */
.pf-borrar h3 {
  display: flex; align-items: center; gap: var(--e-2);
  color: var(--racha-tinta);
}
.pf-borrar > p { margin-top: var(--e-3); color: var(--tinta-2); font-size: var(--t-sm); }
.pf-borrar-lista {
  display: grid; gap: .25rem;
  margin: var(--e-2) 0 0; padding-left: 1.25rem;
  color: var(--tinta-2); font-size: var(--t-sm);
}

/* ---------- cambiar la contraseña ---------- */
/* Dos campos estirados a 960 px obligan a recorrer la pantalla para ir de la
   etiqueta al campo: la medida es la de la tarjeta de acceso. */
.pf-formulario { max-width: 30rem; }
.pf-formulario .acciones { margin-top: var(--e-2); }