/* ============================================================================
   panel/assets/modulos/plataforma-api.css — lo que solo usa Plataforma API
   ============================================================================
   Copia de las piezas de Alianzas y de Servidores (el motivo con segundo clic,
   la nota, las filas separadas por una línea fina): mismos tokens de marca.css
   y panel.css y los componentes comunes (.caja, .btn, .pill, .metrica,
   .campo). Una caja por bloque; dentro, el espacio y una línea fina separan.
   Títulos en Poppins 600 (menos de 32 px: corte tipográfico del CEO, 21 oct 2026).
   ========================================================================== */
.pa-ico{display:inline-flex;flex:none;color:inherit;margin-right:var(--esp-2)}
.pa-ico svg{width:1.1rem;height:1.1rem}

.pa-metricas{margin-bottom:var(--esp-rejilla)}
.pa-nota{margin:0;font-size:var(--tipo-descripcion);color:var(--texto-2);line-height:1.5;max-width:62ch}
.pa-zona{margin-bottom:var(--esp-rejilla)}
.pa-meta{margin:0;font-size:var(--tipo-leyenda);color:var(--texto-3);overflow-wrap:anywhere}

/* Lo congelado ahora. */
.pa-seccion{display:flex;flex-direction:column;gap:var(--esp-3);padding:var(--esp-tarjeta, 1.5rem);margin:0;min-width:0}
.pa-seccion-titulo{display:flex;align-items:baseline;gap:var(--esp-2);margin:0;font-family:var(--fuente-titular);
  font-weight:var(--peso-titular);font-size:var(--tipo-entradilla);line-height:var(--interlinea-titular);letter-spacing:0;
  text-transform:none;color:var(--texto-1)}
.pa-n{font-size:var(--tipo-descripcion);color:var(--texto-3)}
.pa-bloqueos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pa-bloqueo{display:flex;flex-direction:column;gap:var(--esp-1);padding:var(--esp-3) 0;min-width:0}
.pa-bloqueo + .pa-bloqueo{border-top:1px solid var(--linea-suave)}
.pa-bloqueo:first-child{padding-top:0}
.pa-bloqueo-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-2)}
.pa-bloqueo-quien{min-width:0;font-size:var(--tipo-descripcion);color:var(--texto-2);overflow-wrap:anywhere}
.pa-bloqueo-quien b{font-weight:500;color:var(--texto-1)}
.pa-bloqueo-texto{margin:0;font-size:var(--tipo-descripcion);color:var(--texto-1);line-height:1.5;overflow-wrap:anywhere;white-space:pre-line}

/* La barra y la lista de servidores. */
.pa-barra{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--esp-3);margin-bottom:var(--esp-3)}
.pa-buscar{flex:1 1 16rem;max-inline-size:var(--campo-xl, 32rem);min-width:0}
.pa-buscar input{width:100%}
.pa-lista{list-style:none;margin:0;padding:0 var(--esp-tarjeta, 1.5rem);display:flex;flex-direction:column}
.pa-servidor{display:flex;flex-direction:column;gap:var(--esp-3);padding:var(--esp-4) 0;min-width:0}
.pa-servidor + .pa-servidor{border-top:1px solid var(--linea-suave)}
.pa-servidor-cab{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--esp-3)}
.pa-servidor-quien{min-width:0;display:flex;flex-direction:column;gap:2px}
.pa-nombre{margin:0;min-width:0;font-family:var(--fuente-titular);font-weight:var(--peso-titular);font-size:var(--tipo-entradilla);
  line-height:var(--interlinea-titular);letter-spacing:0;text-transform:none;color:var(--texto-1);overflow-wrap:anywhere}
.pa-id{margin:0;font-size:var(--tipo-leyenda);color:var(--texto-3);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pa-datos{display:grid;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));gap:var(--esp-3) var(--esp-4);margin:0}
.pa-dato{min-width:0}
.pa-dato-nombre{margin:0;font-size:var(--tipo-leyenda);color:var(--texto-3)}
.pa-dato-valor{margin:0;font-size:var(--tipo-descripcion);color:var(--texto-1);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pa-mal .pa-dato-valor{color:var(--yellow);font-weight:600}

/* Las llaves de un servidor, una línea fina entre cada una. */
.pa-llaves{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pa-llave{display:flex;flex-direction:column;gap:var(--esp-2);padding:var(--esp-3) 0;min-width:0}
.pa-llave + .pa-llave{border-top:1px solid var(--linea-suave)}
.pa-llave-info{display:flex;flex-direction:column;gap:var(--esp-1);min-width:0}
.pa-apagada .pa-llave-info{opacity:var(--opacidad-apagado, .45)}
.pa-llave-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-2)}
.pa-llave-nombre{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:var(--esp-2);min-width:0;font-size:var(--tipo-descripcion);color:var(--texto-1);overflow-wrap:anywhere}
.pa-llave-nombre b{font-weight:500}
.pa-prefijo{font-size:var(--tipo-leyenda);color:var(--texto-3)}
.pa-pills{display:inline-flex;flex-wrap:wrap;gap:var(--esp-2)}
.pa-alcances{margin:0;font-size:var(--tipo-leyenda);color:var(--texto-3);overflow-wrap:anywhere;line-height:1.5}

/* Congelar: el botón abre debajo el plazo, el motivo y el segundo clic. */
.pa-acciones{display:flex;flex-wrap:wrap;gap:var(--esp-3);align-items:center;margin-top:var(--esp-1)}
/* «Congelar…» es un secundario neutro (un solo amarillo por bloque: el segundo clic,
   `.confirmar`). En ≤520 px, a ancho completo como el «Levantar» de las `.acciones`. */
.pa-servidor .btn.confirmar,.pa-bloqueo .btn.confirmar{background:var(--yellow);color:var(--sobre-amarillo);--filo-color:transparent}
.pa-pie{border-top:1px solid var(--linea-suave);padding-top:var(--esp-3)}
.pa-motivo-envol{display:flex;flex-direction:column;gap:var(--esp-3);min-width:0}
.pa-motivo-envol > .btn{align-self:flex-start}
@media (max-width:520px){.pa-motivo-envol > .btn{align-self:stretch}}
.pa-motivo{display:flex;flex-direction:column;gap:var(--esp-3);padding:var(--esp-4);background:var(--velo-1);max-width:62ch}
.pa-motivo[hidden]{display:none}
.pa-corto{flex:0 1 var(--campo-s, 12rem);min-width:0}
.pa-largo textarea{width:100%;max-inline-size:var(--campo-xl)}
.pa-cuenta{margin:calc(var(--esp-2) * -1) 0 0;font-size:var(--tipo-leyenda);color:var(--texto-3);font-variant-numeric:tabular-nums}

/* Sin llaves o sin coincidencias. */
.pa-vacio{display:flex;flex-direction:column;align-items:flex-start;gap:var(--esp-3);padding:var(--esp-tarjeta, 1.5rem)}
.pa-vacio-ico{display:inline-flex;color:var(--texto-3)}
.pa-vacio-ico svg{width:2rem;height:2rem}
.pa-vacio-titulo{margin:0;font-family:var(--fuente-titular);font-weight:var(--peso-titular);font-size:var(--tipo-entradilla);
  line-height:var(--interlinea-titular);letter-spacing:0;text-transform:none;color:var(--texto-1)}