/* ============================================================================
   panel/assets/modulos/servidores.css — lo que solo usa el módulo Servidores
   ============================================================================
   Copia de las piezas de Alianzas (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 sola
   caja para toda la lista: dentro, el espacio y una línea fina separan, nunca
   caja dentro de caja. Los títulos de cada servidor son Poppins 600 (menos de
   32 px: el corte tipográfico del CEO, 21 oct 2026).
   ========================================================================== */
.sv-ico{display:inline-flex;flex:none;color:inherit;margin-right:var(--esp-2)}
.sv-ico svg{width:1.1rem;height:1.1rem}
.pill .sv-ico{margin-right:var(--esp-1)}
.pill .sv-ico svg{width:1em;height:1em}

.sv-metricas{margin-bottom:var(--esp-rejilla)}
.sv-nota{margin:0;font-size:var(--tipo-descripcion);color:var(--texto-2);line-height:1.5;max-width:62ch}
.sv-resumen{margin-bottom:var(--esp-3);min-height:1.5em}

/* La barra: el buscador ocupa lo que sobra y «Actualizar» se queda a su lado. */
.sv-barra{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--esp-3);margin-bottom:var(--esp-3)}
.sv-buscar{flex:1 1 16rem;max-inline-size:var(--campo-xl, 32rem);min-width:0}
.sv-buscar input{width:100%}

/* La lista, en una sola caja. */
.sv-lista{list-style:none;margin:0;padding:0 var(--esp-tarjeta, 1.5rem);display:flex;flex-direction:column}
.sv-fila{display:flex;flex-direction:column;gap:var(--esp-3);padding:var(--esp-4) 0;min-width:0}
.sv-fila + .sv-fila{border-top:1px solid var(--linea-suave)}

/* Lo apagado se ve igual, con baja opacidad y no en gris (CEO, 21 oct 2026);
   los botones se quedan enteros para poder volver a encenderlo. */
.sv-apagado .sv-ficha{opacity:var(--opacidad-apagado, .45)}

.sv-ficha{display:flex;flex-direction:column;gap:var(--esp-3);min-width:0}
.sv-cab{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--esp-3);min-width:0}
.sv-quien{flex:1 1 12rem;min-width:0;display:flex;flex-direction:column;gap:2px}
.sv-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)}
.sv-nombre-texto{overflow-wrap:anywhere}
.sv-sub{margin:0;font-size:var(--tipo-descripcion);color:var(--texto-2);overflow-wrap:anywhere}
.sv-sub b{font-weight:500;color:var(--texto-1)}
/* El dueño: «Dueño», avatar de 22 px, nombre y @usuario en una línea que baja si no cabe. */
.sv-dueno{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-1) var(--esp-2)}
.sv-dueno-rol{color:var(--texto-3)}
.sv-avatar{position:relative;flex:none;display:inline-grid;place-items:center;width:1.375rem;height:1.375rem;border-radius:50%;
  overflow:hidden;background:var(--velo-2);color:var(--texto-2)}
.sv-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sv-avatar-ico{display:inline-flex}
.sv-avatar-ico svg{width:.9rem;height:.9rem}
.sv-avatar-letra{font-size:var(--tipo-leyenda);font-weight:600;line-height:1}
.sv-dueno-nombre{min-width:0;overflow-wrap:anywhere}
.sv-dueno-arroba{font-size:var(--tipo-leyenda);color:var(--texto-3);overflow-wrap:anywhere}
.sv-sub .sv-dueno-id{font-weight:400;font-variant-numeric:tabular-nums;color:var(--texto-2)}
.sv-id{margin:0;font-size:var(--tipo-leyenda);color:var(--texto-3);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sv-nombre-id{font-variant-numeric:tabular-nums}
/* La baja (migración 209): cuándo se borra todo, o que ya se borró. Va dentro de
   la ficha, así que se ve con la misma baja opacidad que lo apagado. */
.sv-baja{margin:0;font-size:var(--tipo-descripcion);color:var(--texto-2);line-height:1.5;overflow-wrap:anywhere}
.sv-pills{display:flex;flex-wrap:wrap;gap:var(--esp-2);align-items:center}

/* El icono de Discord: 44 px redondo, con la inicial detrás por si no llega. */
.sv-icono{position:relative;flex:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;
  overflow:hidden;background:var(--velo-2);color:var(--texto-2)}
.sv-icono img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sv-inicial{font-family:var(--fuente-titular);font-weight:var(--peso-titular);font-size:var(--tipo-entradilla);line-height:1}

/* Los datos: una rejilla que se adapta (2 columnas a 360, más de ancho). */
.sv-datos{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:var(--esp-3) var(--esp-4);margin:0}
.sv-dato{min-width:0}
.sv-dato-nombre{margin:0;font-size:var(--tipo-leyenda);color:var(--texto-3)}
.sv-dato-valor{margin:0;font-size:var(--tipo-descripcion);color:var(--texto-1);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sv-mal .sv-dato-valor{color:var(--yellow);font-weight:600}

/* Encender o apagar: el botón abre debajo el motivo; encender pide un segundo
   clic y apagar, el diálogo común (assets/confirmar.css). */
.sv-acciones{display:flex;flex-wrap:wrap;gap:var(--esp-3);align-items:center}
.sv-peligro{--filo-color:var(--borde-vivo, var(--yellow));color:var(--yellow)}
.sv-fila .btn.confirmar{background:var(--yellow);color:var(--sobre-amarillo);--filo-color:transparent}
.sv-motivo{display:flex;flex-direction:column;gap:var(--esp-3);padding:var(--esp-4);background:var(--velo-1);max-width:62ch}
.sv-motivo[hidden]{display:none}
.sv-largo textarea{width:100%;max-inline-size:var(--campo-xl)}
.sv-cuenta{margin:calc(var(--esp-2) * -1) 0 0;font-size:var(--tipo-leyenda);color:var(--texto-3);font-variant-numeric:tabular-nums}

/* Sin servidores o sin coincidencias. */
.sv-vacio{display:flex;flex-direction:column;align-items:flex-start;gap:var(--esp-3);padding:var(--esp-tarjeta, 1.5rem)}
.sv-vacio-ico{display:inline-flex;color:var(--texto-3)}
.sv-vacio-ico svg{width:2rem;height:2rem}
.sv-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)}

/* El botón que abre el motivo se queda a la vista (aria-expanded) y se nota abierto. */
.sv-acciones > .sv-abierto{background:rgba(242,232,220,.13)}

/* A partir de 900 px, la ficha y sus botones comparten línea. La columna de las
   acciones mide LO MISMO en todas las filas (12 rem): con `auto` cada fila
   medía lo de su botón y las píldoras no caían en
   la misma vertical. */
@media (min-width:900px){
  .sv-fila{display:grid;grid-template-columns:minmax(0,1fr) 12rem;align-items:start;column-gap:var(--esp-5, 2rem)}
  .sv-fila > .sv-ficha{grid-column:1}
  .sv-fila > .sv-acciones{grid-column:2;grid-row:1}
  .sv-fila > .sv-motivo{grid-column:1 / -1}
}