/* =============================================================================
   PIA · COMPONENTES BASE
   =============================================================================

   Los cuatro trozos de interfaz que se repiten en toda pantalla de PIA: tarjeta,
   botón, campo y aviso. Están escritos ENTERAMENTE sobre pia-tokens.css — no hay
   un solo literal de color aquí abajo, y eso es a propósito: si encuentras uno,
   es un fallo, no una excepción.

   Requiere pia-tokens.css cargado antes.

       <link rel="stylesheet" href="pia-tokens.css">
       <link rel="stylesheet" href="pia-componentes.css">

   Prefijo `pia-` en todas las clases para poder convivir con las `mx_` de
   Element y las `_button_hash_` de Compound sin pisarlas.

   ESTO NO ES UN FRAMEWORK. Es el suelo común. Si tu pantalla necesita algo que
   no está aquí, escríbelo con tokens y, si se repite en una segunda pantalla,
   súbelo a este archivo. Una clase que sólo usa una pantalla no vive aquí.
   ========================================================================== */

/* --- Lienzo ---------------------------------------------------------------- */

.pia-lienzo {
  margin: 0;
  font-family: var(--pia-fuente-cuerpo);
  background: var(--pia-fondo);
  color: var(--pia-texto);
  font-size: var(--pia-txt-cuerpo);
  line-height: var(--pia-alto-cuerpo);
  -webkit-font-smoothing: antialiased;
}

.pia-app {
  width: 100%;
  max-width: var(--pia-ancho-app);
  margin: 0 auto;
}

/* --- Marca ----------------------------------------------------------------- */

.pia-marca {
  display: flex;
  align-items: center;
  gap: var(--pia-esp-3);
}

/* EL SELLO ES EL LOGO D, NO UN CUADRADO CON UNA LETRA DENTRO ("la burbuja que
   escucha", nodo 926075d8, elegido por Zey el 18 ago 2026).

   Por eso esta regla ya no pinta NADA: es sólo la caja. El degradado, el radio y
   el `display:grid` que centraba el carácter vivían aquí porque el sello era un
   contenedor con una «P» dentro. Ahora el sello ES un <svg> que trae su propio
   fondo (rect #F6F6F6) y su propio radio (rx 17 sobre 64, que a 26px cae en los
   mismos ~7px que daba --pia-radio-marca), así que repetirlos aquí sólo servía
   para poner el degradado azul DETRÁS del logo.

   Se cambia AL FINAL y no al principio, a propósito: mientras alguna pantalla
   pintara todavía la letra, quitarle el fondo a esta clase la dejaba con una «P»
   flotando en el aire. Los cuatro consumidores —home, tablero, ajustes y la
   lámina banco-diseno— llevan ya el SVG inline, y con esto se les cae la regla
   local que cada uno tenía por delante para desactivar estas tres líneas. */
.pia-marca__sello {
  width: 26px;
  height: 26px;
  display: block;
  flex: none;
}

.pia-marca__nombre {
  font-family: var(--pia-fuente-titular);
  font-weight: var(--pia-peso-fuerte);
  font-size: var(--pia-txt-titulo);
  letter-spacing: var(--pia-track-titulo);
}

/* --- Tarjeta --------------------------------------------------------------- */

/* El aire sale de --pia-aire-tarjeta y NO de --pia-esp-7, aunque en escritorio
   los dos valgan 30px: el token del aire lleva su media query dentro, así que
   el componente encoge solo a ≤480px y --pia-esp-7 se queda clavado. Medido a
   390px: con --pia-esp-7 el tablero daba 294px de ancho útil, con el token da
   314px. Los mismos 20px que LEEME-DISENO §10 M2 promete y que home.html se
   estaba dando a mano en su propia hoja porque esta línea no se los daba. */
.pia-tarjeta {
  background: var(--pia-superficie);
  border-radius: var(--pia-radio-tarjeta);
  padding: var(--pia-aire-tarjeta);
}

/* La línea de arriba de una tarjeta: pequeña, apagada, dice DÓNDE estás. */
.pia-tarjeta__kicker {
  font-size: var(--pia-txt-nota);
  color: var(--pia-texto-tercero);
  letter-spacing: var(--pia-track-suelto);
  margin-bottom: var(--pia-esp-2);
}

.pia-tarjeta__titulo {
  font-family: var(--pia-fuente-titular);
  font-size: var(--pia-txt-display);
  font-weight: var(--pia-peso-medio);
  letter-spacing: var(--pia-track-display);
  line-height: var(--pia-alto-titular);
  margin: 0 0 var(--pia-esp-1);
}

.pia-tarjeta__entrada {
  color: var(--pia-texto-segundo);
  margin: 0 0 var(--pia-esp-6);
}

.pia-separador {
  height: 1px;
  background: var(--pia-borde);
  border: 0;
  margin: var(--pia-esp-5) 0;
}

/* --- Botones ---------------------------------------------------------------
   El primario es TINTA. Nunca azul. Radio 11px — ni 8 ni 12 ni la píldora de
   Element. */

.pia-boton {
  appearance: none;
  border: 0;
  border-radius: var(--pia-radio-boton);
  padding: var(--pia-esp-4) var(--pia-esp-5);
  font-family: inherit;
  font-size: var(--pia-txt-cuerpo);
  font-weight: var(--pia-peso-medio);
  letter-spacing: .1px;
  cursor: pointer;
  width: 100%;
  background: var(--pia-accion);
  color: var(--pia-accion-texto);       /* la pareja del relleno, siempre */
  transition: var(--pia-transicion);
}

.pia-boton:hover { background: var(--pia-accion-hover); }

/* Apagado por OPACIDAD, no cambiando a otro gris: así no hace falta inventar un
   color nuevo cada vez que un botón se deshabilita. */
.pia-boton:disabled {
  opacity: .32;
  cursor: default;
  background: var(--pia-accion-apagada);
}

.pia-boton:focus-visible {
  outline: 2px solid var(--pia-decor-hasta);   /* 3.26:1 · pasa 1.4.11 */
  outline-offset: 2px;
}

.pia-boton--segundo {
  background: var(--pia-superficie-alta);
  border: 1px solid var(--pia-borde-fuerte);
  color: var(--pia-texto);
}
.pia-boton--segundo:hover {
  border-color: var(--pia-texto);
  background: var(--pia-superficie-alta);
}

.pia-boton--fantasma {
  background: transparent;
  color: var(--pia-texto-segundo);
  border: 0;
  padding: var(--pia-esp-3);
}
.pia-boton--fantasma:hover { color: var(--pia-texto); }

/* --- Campos ---------------------------------------------------------------- */

.pia-campo {
  width: 100%;
  border: 1px solid var(--pia-borde-fuerte);
  border-radius: var(--pia-radio-campo);
  padding: var(--pia-esp-3) var(--pia-esp-4);
  font-family: inherit;
  /* 16px NO ES ESTÉTICA: por debajo, Safari iOS hace zoom al enfocar y
     descuadra la pantalla. No lo bajes para que "encaje mejor". */
  font-size: var(--pia-txt-campo);
  color: var(--pia-texto);
  background: var(--pia-superficie-alta);
  transition: var(--pia-transicion);
}

.pia-campo::placeholder { color: var(--pia-texto-tercero); }

.pia-campo:focus {
  outline: none;
  border-color: var(--pia-texto);
}

.pia-campo__etiqueta {
  display: block;
  font-size: var(--pia-txt-nota);
  font-weight: var(--pia-peso-fuerte);
  margin-bottom: var(--pia-esp-1);
}

/* La ayuda bajo un campo. Va en texto-tercero (4.88:1), NO en --pia-apagado:
   es texto y hay que poder leerlo. */
.pia-campo__ayuda {
  font-size: var(--pia-txt-menudo);
  color: var(--pia-texto-tercero);
  line-height: 1.45;
  margin-top: var(--pia-esp-1);
}

/* --- Filas ----------------------------------------------------------------- */

.pia-fila {
  display: flex;
  align-items: center;
  gap: var(--pia-esp-4);
  padding: var(--pia-esp-4);
  border: 1px solid var(--pia-borde);
  border-radius: var(--pia-radio-fila);
  background: var(--pia-superficie-alta);
  margin-bottom: var(--pia-esp-2);
}

/* Sin esto, un texto largo dentro de una fila flex NO encoge: reclama el ancho
   de su contenido entero y empuja a sus vecinos fuera de la caja, sin scroll y
   sin recorte visible. Es la mitad que siempre se olvida. */
.pia-fila__cuerpo { flex: 1; min-width: 0; }

.pia-fila__titulo {
  font-weight: var(--pia-peso-fuerte);
  font-size: var(--pia-txt-cuerpo);
}

.pia-fila__nota {
  color: var(--pia-texto-segundo);
  font-size: var(--pia-txt-nota);
  margin-top: 1px;
}

/* --- Avisos ----------------------------------------------------------------
   Tres tonos, y ninguno es el azul: el azul no significa nada, sólo decora. */

.pia-aviso {
  border-radius: var(--pia-radio-boton);
  padding: var(--pia-esp-3) var(--pia-esp-4);
  font-size: var(--pia-txt-nota);
  line-height: 1.5;
  background: var(--pia-aviso-fondo);
  border: 1px solid var(--pia-aviso-borde);
  color: var(--pia-aviso);
}

.pia-aviso--error {
  background: var(--pia-error-fondo);
  border-color: var(--pia-error-borde);
  color: var(--pia-error);
}

/* El neutro: informa, no alarma. Aquí sí entra el azul, y sólo como filete. */
.pia-aviso--nota {
  background: var(--pia-superficie-sutil);
  border: 1px solid var(--pia-borde);
  border-left: 3px solid var(--pia-decor-hasta);
  color: var(--pia-texto-segundo);
}

/* --- Píldora de estado ------------------------------------------------------
   Regla de pigmento: el color marca si hace falta ACTUAR, no en qué estado
   está. Lo normal va en gris; sólo destaca lo que reclama algo. */

.pia-pildora {
  display: inline-flex;
  align-items: center;
  gap: var(--pia-esp-1);
  font-size: var(--pia-txt-nota);
  font-weight: var(--pia-peso-fuerte);
  padding: 7px var(--pia-esp-3);
  border-radius: 8px;
  border: 1px solid var(--pia-borde-fuerte);
  color: var(--pia-texto-segundo);
}

.pia-pildora--activa {
  background: var(--pia-humo);
  color: var(--pia-texto);
  border-color: transparent;
}

.pia-pildora--activa::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--pia-radio-redondo);
  background: var(--pia-accion);
}

.pia-pildora--error {
  background: var(--pia-error-fondo);
  border-color: var(--pia-error-borde);
  color: var(--pia-error);
}

/* --- Iconos ----------------------------------------------------------------
   SVG inline, cero emojis. `currentColor` a propósito: así el icono hereda el
   color del texto que acompaña y no hay que pintarlo por separado — que es de
   donde salen los iconos con contraste distinto al de su etiqueta. */

.pia-icono {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pia-icono--segundo { color: var(--pia-icono-segundo); }