/* ============================================================================
   PRICEFARMA — PANEL DE INICIO                          UH16.6 · Fase 3
   ============================================================================

   Consume los tokens de `pricefarma-tokens.css`. NO toca `style.css`: esta
   pantalla es nueva, así que es la primera que nace ya en el sistema nuevo.

   La regla de la RESERVA del teal aplica aquí con matiz. Dice el design
   system: en pantallas de DECISIÓN el teal se guarda para la acción primaria
   y el mejor precio; en el armazón y el panel de inicio la marca se expresa
   con soltura, porque aquí no compite ninguna decisión. Este panel es del
   segundo grupo.
   ========================================================================= */

#inicioView {
  display: flex;
  flex-direction: column;
  gap: var(--pf-s-6);
}

/* ══ 1. BANNER ═════════════════════════════════════════════════════════════
   ESPACIO RESERVADO. Sin contenido real todavía: se ve como un lugar que
   espera algo, no como una tarjeta rota. El borde discontinuo es lo que
   comunica "esto no está terminado" sin necesidad de escribirlo.          */

.pf-banner {
  border: 1px dashed var(--pf-sup-400);
  border-radius: var(--pf-r-md);
  background: var(--pf-sup-50);
  padding: var(--pf-s-6);
  text-align: center;
}
.pf-banner__marca {
  font-family: var(--pf-font-display);
  font-size: var(--pf-fs-micro);
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--pf-muted-foreground);
  margin-bottom: var(--pf-s-2);
}
.pf-banner__txt {
  margin: 0 auto;
  max-width: 62ch;
  font-family: var(--pf-font-ui);
  font-size: var(--pf-fs-sm);
  color: var(--pf-muted-foreground);
  line-height: 1.5;
}

/* ══ 2. LOS INDICADORES ════════════════════════════════════════════════════

   UH16.9 — LA JERARQUÍA QUE SE HABÍA PERDIDO. La Fase 3 construyó cuatro
   cajas blancas idénticas: etiqueta, cifra, pie. Cuatro números igual de
   urgentes son cuatro números que nadie mira. El mockup aprobado NUNCA fue
   así —tenía bloques con nombre, iconos con tinte, uno promovido y un
   medidor— y eso no se descartó: se cayó por el camino.

   LA REJILLA VA POR FRANJAS ESCRITAS A MANO. Antes era
   `repeat(auto-fit, minmax(196px, 1fr))`, que decide sola cuántas columnas
   caben. En la franja de 780-899px —la que manda sobre este rediseño— decidía
   TRES, y dejaba la cuarta tarjeta huérfana en una segunda fila. Es la
   debilidad D6 de la auditoría. Con franjas explícitas no hay huérfanas
   nunca, porque los indicadores van de dos en dos:

     ≥1100px    los dos bloques lado a lado, 2+2   → cuatro tarjetas en fila
     560-1099   bloques apilados, 2 columnas       → dos filas de dos
     <560px     una columna

   Entre 900 y 1099 los bloques NO se ponen lado a lado aunque quepan: con la
   barra colapsada dejarían ~198px por tarjeta, y "Proveedores actualizados"
   no entra ahí sin partirse en tres líneas.                                */

.pf-bloques {
  display: grid;
  gap: var(--pf-s-6);
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 1099px) {
  .pf-bloques { grid-template-columns: 1fr; }
}

/* LAS CUATRO TARJETAS MIDEN LO MISMO, y hacen falta las dos reglas de abajo
   porque el desnivel se cuela por dos caminos distintos.

   La causa: la tarjeta que lleva medidor es 16px más alta (4px de la barra,
   8 de su margen y 4 del gap que introduce al ser un hijo más). Como la
   rejilla estira a su compañera de bloque, el bloque entero crecía y quedaba
   desnivelado junto al otro.

   1) LADO A LADO (≥1100px): `.pf-bloques` es una rejilla, así que los dos
      bloques ya miden igual; lo que faltaba era pasar ese alto hacia dentro,
      hasta las tarjetas. De ahí el flex y el `flex: 1`.
   2) APILADOS (<1100px): ahí el estirado ya no relaciona un bloque con otro,
      porque están en filas distintas. Se resuelve al revés: las tarjetas que
      NO llevan medidor reservan su hueco. Se mira si el medidor está además
      VISIBLE, porque cuando no hay dato se oculta y entonces esa tarjeta
      también necesita la reserva. */
.pf-bloque {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.pf-bloque > .pf-kpis { flex: 1; }

.pf-kpi:not(:has(.pf-medidor:not(.ci-hidden))) .pf-kpi__pie::before {
  content: '';
  display: block;
  /* SON 16px, NO 12, y esos 4 de más son los que dejaban el desnivel:
     el medidor ocupa su alto (4px) más su margen (8px), PERO además es un
     hijo más de la tarjeta, que es flex con `gap: --pf-s-1`. Aparecer añade
     un gap que no estaba. La reserva va dentro del pie, así que no crea gap
     y tiene que traérselo sumado. */
  height: 4px;
  margin-top: calc(var(--pf-s-2) + var(--pf-s-1));
}

/* El encabezado del bloque va sobre el FONDO DE LA PÁGINA, no sobre una
   tarjeta: se mide contra #f0f2fc y no contra blanco. --pf-muted-foreground
   da 4.83 ahí, y cumple AA. */
.pf-bloque__titulo {
  margin: 0 0 var(--pf-s-3);
  font-family: var(--pf-font-display);
  font-size: var(--pf-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--pf-muted-foreground);
}

.pf-kpis {
  display: grid;
  gap: var(--pf-s-4);
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 559px) {
  .pf-kpis { grid-template-columns: 1fr; }
}

.pf-kpi {
  background: var(--pf-card);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  box-shadow: var(--pf-sh-sm);
  padding: var(--pf-s-5);
  display: flex;
  flex-direction: column;
  gap: var(--pf-s-1);
  min-width: 0;
}

/* La etiqueta y el icono comparten renglón. El icono se ancla ARRIBA y no al
   centro: si la etiqueta ocupa dos líneas en una tarjeta y una en la de al
   lado, centrarlo dejaría los dos iconos a distinta altura. */
.pf-kpi__top {
  display: flex;
  align-items: flex-start;
  gap: var(--pf-s-3);
  margin-bottom: var(--pf-s-1);
}
.pf-kpi__label {
  flex: 1;
  min-width: 0;
  font-family: var(--pf-font-ui);
  font-size: var(--pf-fs-xs);
  font-weight: 600;
  color: var(--pf-muted-foreground);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* El cuadro del icono. El tinte por omisión es el teal de marca: el icono en
   --pf-accent-foreground sobre --pf-accent da 6.60, muy por encima del 3:1
   que WCAG pide a un elemento gráfico. */
.pf-kpi__icono {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--pf-r-sm);
  display: grid;
  place-items: center;
  background: var(--pf-accent);
  color: var(--pf-accent-foreground);
}
.pf-kpi__icono .pf-ico {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Ámbar cuando el indicador está avisando de algo. Lo pone app.js, y SOLO
   cuando el pie ya lo dice con palabras: el color nunca es el único portador
   del significado. Sobre el tinte ámbar da 6.35. */
.pf-kpi__icono--aviso {
  background: var(--pf-warning-subtle);
  color: var(--pf-warning-on-subtle);
}

/* ── EL INDICADOR PROMOVIDO ─────────────────────────────────────────────────

   Fondo teal-700, NO el teal-600 del mockup. MEDIDO, y el mockup no aguanta:
   su pie va en blanco al 92%, que compuesto sobre teal-600 queda en #EBF5F3 y
   da 4.22 contra ese mismo fondo — no cumple AA. Sobre teal-700 el mismo pie
   da 6.56, y el texto blanco sube de 4.69 a 7.44.

   Es la lección del 27-ago repetida: un color con transparencia hay que
   COMPONERLO sobre la superficie que tiene detrás antes de medirlo. Medido a
   ojo, "blanco al 92% sobre teal" parece que no puede fallar.

   Se usa el escalón `--pf-teal-700` y no un token semántico porque no existe
   ninguno para "fondo teal fuerte": --pf-accent-foreground es teal-700 pero
   significa "texto sobre el tinte", y usarlo aquí sería mentir con el nombre.
   Queda anotado como deuda del design system.                              */
.pf-kpi--primary {
  background: var(--pf-teal-700);
  border-color: var(--pf-teal-700);
}
.pf-kpi--primary .pf-kpi__label { color: #FFFFFF; }                  /* 7.44 */
.pf-kpi--primary .pf-kpi__num   { color: #FFFFFF; }                  /* 7.44 */
.pf-kpi--primary .pf-kpi__pie   { color: rgba(255,255,255,.92); }    /* 6.56 */
.pf-kpi--primary .pf-kpi__icono {
  background: rgba(255,255,255,.18);   /* queda en #2E7D6F sobre el teal-700 */
  color: #FFFFFF;                      /* 4.91 sobre ESE cuadro, no sobre el teal */
}

/* ── EL MEDIDOR ─────────────────────────────────────────────────────────────

   VA EN EL TEAL DE MARCA (decisión de Gerardo, 27-ago), y aquí sí se puede.

   El 3:1 de WCAG 1.4.11 se le exige a lo que hace falta para ENTENDER el
   dato. Este medidor no hace falta: el pie ya dice la fracción con palabras y
   la barra va `aria-hidden`. Es decoración que refuerza, no el portador. Por
   eso el teal de marca es admisible aquí aunque dé 2.62 sobre la pista clara.

   ⚠ SI ALGÚN DÍA EL MEDIDOR SE QUEDA SOLO —sin el texto del pie— deja de ser
   decorativo y hay que subirlo a --pf-primary (teal-600), que da 3.91.

   DENTRO DE LA TARJETA PROMOVIDA LA COSA CAMBIA, y no por la norma sino
   porque no se ve: sobre la pista de blanco al 18% el teal de marca da 1.56 y
   la barra desaparece. La salida NO fue aclarar el relleno —eso habría
   perdido el color de marca que se pidió— sino OSCURECER LA PISTA a teal-800:
   ahí el mismo teal-500 da 3.69 y cumple hasta el 3:1 estricto.             */
.pf-medidor {
  height: 4px;
  max-width: 150px;
  margin-top: var(--pf-s-2);
  border-radius: var(--pf-r-pill);
  background: var(--pf-sup-200);
  overflow: hidden;
}
.pf-medidor__relleno {
  display: block;
  height: 100%;
  border-radius: var(--pf-r-pill);
  background: var(--pf-brand);         /* teal-500, el de marca */
  transition: width var(--pf-t-fast);
}
/* Sobre el fondo teal oscuro de la promovida: misma marca, pista oscura. */
.pf-kpi--primary .pf-medidor { background: var(--pf-teal-800); }
.pf-kpi--primary .pf-medidor__relleno { background: var(--pf-brand); }   /* 3.69 */
@media (prefers-reduced-motion: reduce) {
  .pf-medidor__relleno { transition: none; }
}
/* Montserrat en las cifras, y tabulares para que no bailen al actualizarse. */
.pf-kpi__num {
  font-family: var(--pf-font-display);
  font-size: var(--pf-fs-2xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--pf-foreground);
  font-variant-numeric: tabular-nums;
}
.pf-kpi__pie {
  font-family: var(--pf-font-ui);
  font-size: var(--pf-fs-xs);
  color: var(--pf-muted-foreground);
}
/* Cuando el pie dice algo que merece mirarse (por ejemplo, que falta algún
   proveedor por actualizarse), se tiñe. NUNCA solo con color: el texto ya
   dice qué pasa, esto solo lo subraya. */
.pf-kpi__pie--ok   { color: var(--pf-accent-foreground); font-weight: 600; }
.pf-kpi__pie--ojo  { color: var(--pf-warning-on-subtle); font-weight: 600; }

/* ══ 3. LAS DOS COLUMNAS DE ABAJO ══════════════════════════════════════════
   La franja 780-899px manda: por debajo de 1000px se apilan, porque dos
   columnas ahí dejarían las tablas sin aire.                               */

.pf-inicio-cols {
  display: grid;
  gap: var(--pf-s-4);
  grid-template-columns: 1.4fr 1fr;
  align-items: start;
}
@media (max-width: 999px) {
  .pf-inicio-cols { grid-template-columns: 1fr; }
}

/* D5 de la auditoría: las dos tarjetas de abajo llevaban `class="ci-card
   pf-panel"`, así que el borde, el radio y la sombra los pintaba `style.css`
   —el sistema VIEJO— mientras las cuatro tarjetas de arriba ya usaban los
   tokens nuevos. Dos sistemas de tarjeta en la misma pantalla, con radios y
   filos distintos. Ahora `.pf-panel` se pinta sola, con los mismos valores
   que `.pf-kpi`, y `ci-card` sale del marcado. */
.pf-panel {
  background: var(--pf-card);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  box-shadow: var(--pf-sh-sm);
  padding: var(--pf-s-5);
}
.pf-panel__titulo {
  margin: 0 0 var(--pf-s-4);
  font-family: var(--pf-font-display);
  font-size: var(--pf-fs-md);
  font-weight: 700;
  color: var(--pf-foreground);
}

.pf-vacio {
  margin: 0;
  font-family: var(--pf-font-ui);
  font-size: var(--pf-fs-sm);
  color: var(--pf-muted-foreground);
}

/* ══ 4. LISTA DE ÓRDENES / CONSULTAS RECIENTES ═════════════════════════════ */

.pf-lista { display: flex; flex-direction: column; }

.pf-fila {
  display: flex;
  align-items: center;
  gap: var(--pf-s-3);
  padding: var(--pf-s-3) var(--pf-s-2);
  border: 0;
  /* --pf-border, no --pf-hairline: ese token NUNCA EXISTIO. Lo escribi de
     memoria copiando el nombre del mockup, y una var() sin definir invalida
     la propiedad entera: el filete no se dibujaba y las listas del panel
     salian sin separacion. */
  border-top: 1px solid var(--pf-border);
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: var(--pf-font-ui);
  font-size: var(--pf-fs-sm);
  color: var(--pf-foreground);
  transition: background var(--pf-t-fast);
}
.pf-fila:first-child { border-top: 0; }
.pf-fila:hover { background: var(--pf-sup-50); }
.pf-fila:focus-visible { outline: 2px solid var(--pf-ring); outline-offset: -2px; }

.pf-fila__id { font-weight: 600; flex: none; font-variant-numeric: tabular-nums; }
.pf-fila__txt {
  flex: 1; min-width: 0;
  color: var(--pf-muted-foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* EL IMPORTE TAMBIÉN VA EN COLUMNA FIJA, y no es un extra: es la mitad que
   faltaba de la sugerencia 8. Fijar solo el ancho del chip no alcanzó —
   medido con las cinco órdenes reales, el chip seguía saliendo en dos
   verticales distintas (723 y 735). La causa estaba una columna más allá: el
   importe se ajusta a su texto, "$7,673.41" mide 64px y "$502.18" mide 52, y
   como va DESPUÉS del chip en la fila, los 12px de diferencia lo empujaban.
   Con los dos anchos fijos, las dos columnas quedan a plomo.
   88px es lo que ocupa "$123,456.78" a 13px tabulares, con holgura. */
.pf-fila__num {
  flex: 0 0 88px;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Estado de la orden. Cada uno con su par fondo/tinta ya medido en el design
   system; ninguno se distingue solo por color, todos llevan su palabra.

   COLUMNA DE ANCHO FIJO (sugerencia 8 de la auditoría). Antes el chip se
   ajustaba a su texto y `.pf-fila__txt { flex: 1 }` lo empujaba contra el
   importe, así que cada chip empezaba en una vertical distinta —GENERADA a
   ~750, CONFIRMADA a ~730, ENVIADA a ~772— y el estado es justo lo que se
   escanea al recorrer la lista con la vista. Con 104px (lo que mide
   "CONFIRMADA", el más largo, más su interior) los filos quedan a plomo y el
   texto se centra dentro. */
.pf-estado {
  flex: 0 0 104px;
  text-align: center;
  padding: 2px var(--pf-s-2);
  border-radius: var(--pf-r-pill);
  font-size: var(--pf-fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pf-estado--generada   { background: var(--pf-sup-200); color: var(--pf-foreground); }
.pf-estado--enviada    { background: var(--pf-teal-50); color: var(--pf-accent-foreground); }
.pf-estado--confirmada { background: var(--pf-warning-subtle); color: var(--pf-warning-on-subtle); }
.pf-estado--recibida   { background: var(--pf-teal-50); color: var(--pf-accent-foreground); }
.pf-estado--cancelada  { background: var(--pf-destructive-subtle); color: var(--pf-destructive-on-subtle); }

/* ══ 5. ACCIONES RÁPIDAS ═══════════════════════════════════════════════════ */

.pf-acciones { display: flex; flex-direction: column; gap: var(--pf-s-2); }

.pf-accion {
  display: flex;
  align-items: center;
  gap: var(--pf-s-3);
  width: 100%;
  padding: var(--pf-s-3) var(--pf-s-4);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-card);
  color: var(--pf-foreground);
  font-family: var(--pf-font-ui);
  font-size: var(--pf-fs-base);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background var(--pf-t-fast), border-color var(--pf-t-fast);
}
.pf-accion:hover:not(:disabled) { background: var(--pf-sup-50); border-color: var(--pf-sup-400); }
.pf-accion:focus-visible { outline: 2px solid var(--pf-ring); outline-offset: 2px; }

/* Desactivada: "Consultar precio de referencia" todavía no existe. Se ve
   apagada Y lo dice con palabras ("Próximamente"), porque el color por sí
   solo no puede ser el único portador del significado. */
.pf-accion:disabled { opacity: .55; cursor: not-allowed; }

.pf-accion .pf-ico {
  flex: none; width: 20px; height: 20px;
  stroke: var(--pf-brand); fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.pf-accion:disabled .pf-ico { stroke: var(--pf-muted-foreground); }

.pf-accion__txt { flex: 1; min-width: 0; }
.pf-accion__txt small {
  display: block;
  font-size: var(--pf-fs-xs);
  font-weight: 400;
  color: var(--pf-muted-foreground);
  margin-top: 1px;
}
.pf-accion__ir { flex: none; width: 18px; height: 18px; stroke: var(--pf-sup-400); }
.pf-accion:hover:not(:disabled) .pf-accion__ir { stroke: var(--pf-brand); }


/* ══ 6. TELÉFONO ═══════════════════════════════════════════════════════════

   HASTA UH16.9 ESTE ARCHIVO TENÍA UNA SOLA MEDIA QUERY EN TODO SU LARGO: la
   de los 999px que apila las dos columnas de abajo. El panel no estaba
   adaptado a pantalla chica, estaba a la deriva de lo que decidiera el
   `auto-fit` de la rejilla. Las franjas de tablet las resuelve la rejilla por
   bloques de la sección 2; aquí va lo que además hay que apretar en teléfono.

   El corte va en 560px y no en 768: entre 560 y 768 hay sitio de sobra para
   dos columnas de indicador, y bajarlas antes desperdiciaría el ancho.     */

@media (max-width: 559px) {

  #inicioView { gap: var(--pf-s-4); }

  .pf-banner  { padding: var(--pf-s-4); }
  .pf-kpi     { padding: var(--pf-s-4); }
  .pf-panel   { padding: var(--pf-s-4); }

  /* LA FILA DE ÓRDENES PASA A DOS RENGLONES. En una sola, sus cuatro columnas
     —número, proveedor, estado e importe— dejan al proveedor en unos 60px
     útiles: se corta en los puntos suspensivos casi siempre y no se puede
     leer de qué orden se trata. Arriba va lo que se escanea (número, estado e
     importe) y el nombre baja entero al segundo renglón. */
  .pf-fila { flex-wrap: wrap; row-gap: 2px; }
  .pf-fila__id  { order: 1; }
  .pf-estado    { order: 2; margin-left: auto; }
  .pf-fila__num { order: 3; }
  .pf-fila__txt {
    order: 4;
    flex: 1 0 100%;
    white-space: normal;
    font-size: var(--pf-fs-xs);
  }

  /* El texto de ayuda de las acciones rápidas es de dos líneas largas en
     teléfono; se conserva porque dice qué hace cada una, pero sin el aire de
     escritorio. */
  .pf-accion { padding: var(--pf-s-3); }
}

/* Táctil: las dos cosas pulsables del panel también entran en la regla de los
   44×44 (D4). Van aquí y no en el armazón porque son de esta pantalla. */
@media (pointer: coarse) {
  .pf-fila   { min-height: 44px; }
  .pf-accion { min-height: 44px; }
}


/* ============================================================================
   PANTALLA DE ENTRADA                                   UH16.7
   ============================================================================

   Era la única pantalla que quedaba sin migrar, y la PRIMERA que ve cualquiera.
   Hasta ahora no llevaba marca: el logotipo de Jana salió en la Fase 2 y el de
   Pricefarma nunca entró.

   SE CORRIGE ADEMÁS UN DEFECTO INTRODUCIDO EN LA FASE 2: la barra superior se
   quedaba visible antes de iniciar sesión, mostrando "Buscar Precios /
   Consulta" —el valor por omisión del HTML— cuando el usuario no está en
   ninguna sección. Sin sesión no hay nada útil ahí arriba, así que la banda
   entera se oculta.                                                       */

body:not(.pf-app) .ci-topbar { display: none; }

/* El fondo de la pantalla de entrada también pasa a Pricefarma. Va acotado a
   "sin sesión" A PROPÓSITO: el `body` lo pinta `style.css` con el gris viejo
   (#F8FAFC), y cambiarlo de raíz teñiría de golpe las 12 vistas que todavía
   no se han migrado. Aquí solo afecta al login, que ya es 100% Pricefarma. */
body:not(.pf-app) { background-color: var(--pf-background); }

/* CENTRADA EN EL ALTO REAL, sin `min-height: 72vh` (sugerencia 7 de la
   auditoría). Aquel 72vh centraba la caja dentro de una franja del 72% de la
   ventana, no del espacio disponible: a 1440×900 dejaba ~350px muertos abajo
   y la caja quedaba visiblemente alta. Y `72vh` era además un valor fuera de
   la escala, que la gobernanza del design system (§8) prohíbe.

   No hace falta ningún valor: `body` ya es flex column con `min-height:100vh`
   y `.ci-main` es `flex: 1`. Con `flex: 1` aquí, esta pantalla hereda el alto
   que de verdad queda —que sin sesión es casi toda la ventana, porque la
   barra superior está oculta— y el centrado es exacto en cualquier pantalla,
   sin inventar una fracción. */
.pf-login {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pf-s-6);
}

.pf-login__caja {
  width: 100%;
  max-width: 380px;
  background: var(--pf-card);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  box-shadow: var(--pf-sh-md);
  padding: var(--pf-s-8);
}

/* El logotipo va en color sobre la tarjeta blanca: palabra en el gris de
   marca y la "e" en teal. Empotrado, no como imagen, para que tome los
   tokens. */
.pf-login__logo {
  display: block;
  width: 190px; height: auto;
  margin: 0 auto var(--pf-s-6);
  --pf-logo-word: var(--pf-foreground);
  --pf-logo-mark: var(--pf-brand);
}

.pf-login__titulo {
  margin: 0 0 var(--pf-s-6);
  text-align: center;
  font-family: var(--pf-font-display);
  font-size: var(--pf-fs-lg);
  font-weight: 700;
  color: var(--pf-foreground);
}

.pf-campo { margin-bottom: var(--pf-s-4); }
.pf-campo__etiqueta {
  display: block;
  margin-bottom: var(--pf-s-2);
  font-family: var(--pf-font-ui);
  font-size: var(--pf-fs-sm);
  font-weight: 600;
  color: var(--pf-foreground);
}
/* El borde usa --pf-input y no --pf-border: un campo de captura es un
   componente de interfaz y necesita 3:1. --pf-border da 1.30 y solo sirve
   como separador decorativo. Está en el design system, §4.1. */
.pf-campo__input {
  width: 100%;
  padding: var(--pf-s-3);
  border: 1px solid var(--pf-input);
  border-radius: var(--pf-r-sm);
  background: var(--pf-card);
  color: var(--pf-foreground);
  font-family: var(--pf-font-ui);
  font-size: var(--pf-fs-base);
}
.pf-campo__input::placeholder { color: var(--pf-muted-foreground); }
.pf-campo__input:focus {
  outline: 2px solid var(--pf-ring);
  outline-offset: 1px;
  border-color: var(--pf-ring);
}

/* El botón va en --pf-primary (teal-600), NO en el teal de marca: con texto
   blanco encima, --pf-brand da 3.14 y no cumple AA. Éste da 4.69. */
.pf-boton {
  width: 100%;
  padding: var(--pf-s-3);
  border: 0;
  border-radius: var(--pf-r-sm);
  background: var(--pf-primary);
  color: #FFFFFF;
  font-family: var(--pf-font-ui);
  font-size: var(--pf-fs-base);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--pf-t-fast);
}
.pf-boton:hover:not(:disabled) { background: var(--pf-teal-700); }
.pf-boton:focus-visible { outline: 2px solid var(--pf-ring); outline-offset: 2px; }
.pf-boton:disabled { opacity: .6; cursor: not-allowed; }

.pf-login__error {
  margin-bottom: var(--pf-s-4);
  padding: var(--pf-s-3);
  border-radius: var(--pf-r-sm);
  background: var(--pf-destructive-subtle);
  color: var(--pf-destructive-on-subtle);
  font-family: var(--pf-font-ui);
  font-size: var(--pf-fs-sm);
}

.pf-login__pie {
  margin: var(--pf-s-6) 0 0;
  text-align: center;
  font-family: var(--pf-font-ui);
  font-size: var(--pf-fs-xs);
  color: var(--pf-muted-foreground);
}