/* ============================================================================
   panel/assets/modulos/alianzas.css — lo que solo usa el módulo Alianzas
   ============================================================================
   Copia de las piezas de Ofertas (la caja de reportes, el motivo con segundo
   clic, la sección con su título): mismos tokens de marca.css y panel.css y
   los componentes comunes (.caja, .btn, .pill, .metrica, .campo, .chip). Sin
   caja dentro de caja: dentro de un servidor, el espacio y una línea fina
   separan.
   ========================================================================== */
.al-ico{display:inline-flex;flex:none;color:inherit;margin-right:var(--esp-2)}
.al-ico svg{width:1.1rem;height:1.1rem}

.al-metricas{margin-bottom:var(--esp-rejilla)}
.al-barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-3);margin-bottom:var(--esp-rejilla)}
.al-nota{margin:0;font-size:var(--tipo-descripcion);color:var(--texto-2);line-height:1.5;max-width:62ch}

/* Los servidores, en una columna (dos desde 1100 px, como la ficha de Ofertas). */
.al-rejilla{display:grid;gap:var(--esp-rejilla);align-items:start;grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){ .al-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))} }
.al-servidor{display:flex;flex-direction:column;gap:var(--esp-3);padding:var(--esp-tarjeta, 1.5rem);margin:0;min-width:0}
.al-servidor.al-cola{--filo-color:var(--borde-vivo, var(--yellow))}
.al-servidor-titulo{display:flex;align-items:baseline;gap:var(--esp-2);margin:0;min-width:0;
  font-family:var(--fuente-dato);font-weight:700;font-size:var(--tipo-dato);letter-spacing:calc(.01em + var(--tracking-dato));
  text-transform:uppercase;color:var(--texto-1);line-height:1.1}
.al-cola .al-servidor-titulo{color:var(--yellow)}
.al-servidor-nombre{min-width:0;overflow-wrap:anywhere}
.al-n{font-family:var(--fuente-titular);font-weight:600;font-size:var(--tipo-descripcion);letter-spacing:0;color:var(--texto-3)}
.al-servidor-sub{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2)}
.al-id{font-size:var(--tipo-leyenda);color:var(--texto-3);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* Cada denuncia, como un reporte de Ofertas. */
.al-denuncias{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.al-denuncia{display:flex;flex-direction:column;gap:var(--esp-1);padding:var(--esp-3) 0;min-width:0}
.al-denuncia + .al-denuncia{border-top:1px solid var(--linea-suave)}
.al-denuncia:first-child{padding-top:0}
.al-denuncia-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-2)}
.al-quien{min-width:0;font-size:var(--tipo-descripcion);color:var(--texto-2);overflow-wrap:anywhere}
.al-quien b{font-weight:500;color:var(--texto-1)}
.al-denuncia-texto{margin:0;font-size:var(--tipo-descripcion);color:var(--texto-1);line-height:1.5;overflow-wrap:anywhere;white-space:pre-line}
.al-denuncia-meta{margin:0;font-size:var(--tipo-leyenda);color:var(--texto-3);overflow-wrap:anywhere}
.al-enlace{color:var(--texto-2);text-decoration:underline;text-underline-offset:3px}
.al-enlace:hover,.al-enlace:focus-visible{color:var(--yellow)}
.al-enlace:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

.al-acciones{display:flex;flex-wrap:wrap;gap:var(--esp-3);align-items:center;margin-top:var(--esp-1)}
.al-servidor .btn.confirmar{background:var(--yellow);color:var(--sobre-amarillo);--filo-color:transparent}
.al-peligro{--filo-color:var(--borde-vivo, var(--yellow));color:var(--yellow)}

/* El veto: el botón abre debajo el plazo, el motivo y «Sí, vetar». */
.al-motivo{display:flex;flex-direction:column;gap:var(--esp-3);min-width:0}
.al-motivo > .btn{align-self:flex-start}
.al-motivo-zona{display:flex;flex-direction:column;gap:var(--esp-3);padding:var(--esp-4);background:var(--velo-1);max-width:62ch}
.al-motivo-zona[hidden]{display:none}
.al-servidor-veto{border-top:1px solid var(--linea-suave);padding-top:var(--esp-3)}
.al-fila{display:flex;flex-wrap:wrap;gap:var(--esp-3)}
.al-corto{flex:0 1 var(--campo-s, 12rem);min-width:0}
.al-largo textarea{max-inline-size:var(--campo-xl)}
.al-check{align-self:flex-start}
.al-id-campo{max-inline-size:var(--campo-m)}