/* ============================================================================
   panel/assets/modulos/comunicados.css — lo que solo usa el módulo Comunicados
   ============================================================================
   Tokens de marca.css y panel.css y los componentes comunes (.caja, .btn,
   .pill, .chip, .metrica, .campo, .ayuda-*). La vista previa usa además
   comunicado.css (copia de assets/, la misma hoja que la bandeja de la web).
   Sin caja dentro de caja: dentro de cada sección, el espacio y una línea
   fina separan. Lo único biselado son las .caja y los .chip comunes.
   ========================================================================== */
.cmp-ico{display:inline-flex;flex:none;color:var(--texto-3)}
.cmp-ico svg{width:1.1rem;height:1.1rem}
.cmp-ico.es-fijo{color:var(--yellow)}

/* ── La lista ────────────────────────────────────────────────────────────── */
.cmp-barra{display:flex;justify-content:flex-end;margin:calc(-1 * var(--esp-4)) 0 var(--esp-4)}
.cmp-barra .btn .cmp-ico{color:inherit;margin-right:var(--esp-2)}
.cmp-grupo{margin-bottom:var(--esp-bloque)}
.cmp-grupo-titulo{display:flex;align-items:center;gap:var(--esp-2);margin:0 0 var(--esp-3);
  font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);font-family:inherit}
.cmp-grupo-n{color:var(--texto-2)}
.cmp-lista{display:flex;flex-direction:column;padding:var(--esp-1) 0}
.cmp-fila{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:var(--esp-3);
  width:100%;padding:var(--esp-3) var(--esp-4);background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit;
  transition:background var(--t-rapido) var(--curva)}
.cmp-fila + .cmp-fila{box-shadow:inset 0 1px 0 var(--linea-suave)}
.cmp-fila:hover{background:var(--velo-1)}
.cmp-fila:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.cmp-fila-textos{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.cmp-fila-titulo{color:var(--texto-1);font-weight:500;font-size:var(--tipo-cuerpo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-fila-meta{display:flex;flex-wrap:wrap;gap:0 var(--esp-3);font-size:var(--tipo-leyenda);color:var(--texto-3)}
.cmp-fila-cifras{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;text-align:right}
.cmp-fila-cifras strong{font-family:var(--fuente-dato);font-weight:800;font-size:var(--tipo-dato);color:var(--texto-1);font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-dato)}
.cmp-fila-cifras span{font-size:var(--tipo-leyenda);color:var(--texto-3)}
.cmp-caducado{color:var(--gris-3, var(--texto-3));font-style:italic}

/* ── El editor ───────────────────────────────────────────────────────────── */
.cmp-volver{margin:var(--esp-2) 0 var(--esp-3)}
.cmp-volver .cmp-ico{color:inherit;margin-right:var(--esp-2)}
.cmp-estado{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2) var(--esp-3);margin-top:var(--esp-3);
  font-size:var(--tipo-descripcion);color:var(--texto-2)}
.cmp-metricas{margin-bottom:var(--esp-bloque)}

.cmp-editor{display:grid;gap:var(--esp-rejilla);align-items:start;grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){
  .cmp-editor{grid-template-columns:minmax(0,1fr) minmax(18rem,26rem)}
  .cmp-der{position:sticky;top:calc(var(--alto-barra, 4rem) + var(--esp-4))}
}
.cmp-izq{display:flex;flex-direction:column;gap:var(--esp-rejilla);min-width:0}
.cmp-seccion{display:flex;flex-direction:column;gap:var(--esp-4);padding:var(--esp-tarjeta, 1.5rem);margin:0;min-width:0;border:0}
.cmp-seccion[disabled]{opacity:.85}
.cmp-leyenda{display:flex;align-items:center;gap:var(--esp-2);padding:0;margin-bottom:var(--esp-2);
  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);float:left;width:100%}
.cmp-leyenda + *{clear:both}
.cmp-num{color:var(--yellow)}
.cmp-campo{gap:var(--esp-2)}
.cmp-rotulo{position:relative;display:flex;align-items:center;gap:var(--esp-2)}
.cmp-bloques{min-width:0}

.cmp-fila-interruptor{display:flex;align-items:center;gap:var(--esp-2)}
.cmp-fila-interruptor[hidden]{display:none}
.cmp-interruptor{display:inline-flex;align-items:center;gap:var(--esp-3);cursor:pointer;font-size:var(--tipo-descripcion);color:var(--texto-2)}
.cmp-interruptor:has(input:checked){color:var(--texto-1)}

.cmp-ingles{border-top:1px solid var(--linea-suave);padding-top:var(--esp-3)}
.cmp-ingles > summary{cursor:pointer;color:var(--texto-2);font-size:var(--tipo-descripcion);display:flex;align-items:center;gap:var(--esp-2)}
.cmp-ingles > summary:hover{color:var(--texto-1)}
.cmp-ingles > summary:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.cmp-ingles[open] > summary{margin-bottom:var(--esp-4)}
.cmp-ingles > .campo + .campo{margin-top:var(--esp-4)}
.cmp-opcional{font-size:var(--tipo-leyenda);color:var(--texto-3)}

/* Para quién */
.cmp-modo{display:flex;flex-wrap:wrap;gap:var(--esp-2)}
.cmp-modo .chip:has(input:checked){color:var(--yellow)}
.cmp-filtros{display:flex;flex-direction:column;gap:var(--esp-4)}
.cmp-filtros[hidden]{display:none}
.cmp-chips{display:flex;flex-wrap:wrap;gap:var(--esp-2)}
.cmp-chips > [hidden]{display:none}
.cmp-punto{width:.6rem;height:.6rem;border-radius:50%;flex:none}
.cmp-chip-nota{font-size:var(--tipo-leyenda);color:var(--texto-3)}
.cmp-buscar{max-inline-size:var(--campo-m)}
.cmp-persona{cursor:default;padding-right:var(--esp-1)}
.cmp-quitar{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;
  background:none;border:0;color:var(--texto-3);cursor:pointer}
.cmp-quitar svg{width:.9rem;height:.9rem}
.cmp-quitar:hover,.cmp-quitar:focus-visible{color:var(--texto-1);outline:none}
.cmp-avatar{width:1.5rem;height:1.5rem;border-radius:50%;object-fit:cover;flex:none;background:var(--sup-2, var(--surface))}
.cmp-sin-avatar{display:inline-flex;align-items:center;justify-content:center;font-size:var(--tipo-leyenda);color:var(--texto-2)}
.cmp-resultados{display:flex;flex-direction:column;max-inline-size:var(--campo-l);border-top:1px solid var(--linea-suave)}
.cmp-resultados[hidden]{display:none}
.cmp-resultado{display:flex;align-items:center;gap:var(--esp-2);padding:var(--esp-2) var(--esp-1);background:none;border:0;
  border-bottom:1px solid var(--linea-suave);text-align:left;font:inherit;font-size:var(--tipo-descripcion);color:var(--texto-1);cursor:pointer}
.cmp-resultado:hover,.cmp-resultado:focus-visible{background:var(--velo-1);outline:none}
.cmp-cuenta{min-height:2rem}
.cmp-cuenta-total{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2);margin:0;font-size:var(--tipo-descripcion);color:var(--texto-2)}
.cmp-cuenta-total strong{font-family:var(--fuente-dato);font-weight:800;font-size:var(--tipo-dato);color:var(--yellow);line-height:1;letter-spacing:var(--tracking-dato)}
.cmp-caras{display:inline-flex}
.cmp-caras .cmp-avatar{box-shadow:0 0 0 2px var(--sup-1, var(--ink))}
.cmp-caras .cmp-avatar + .cmp-avatar{margin-left:-.4rem}
.cmp-cuenta-vacia{margin:0;font-size:var(--tipo-descripcion);color:var(--texto-3)}

.cmp-acciones{display:flex;flex-wrap:wrap;gap:var(--esp-3);align-items:center}
.cmp-acciones .btn.confirmar{background:var(--yellow);color:var(--sobre-amarillo)}

/* La vista previa: la fila de la bandeja, abierta. */
.cmp-previa-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-3);margin-bottom:var(--esp-3)}
.cmp-previa-cab .eyebrow{margin:0}
.cmp-idiomas{display:inline-flex;gap:2px}
.cmp-idioma{padding:.2rem .5rem;font:inherit;font-size:var(--tipo-leyenda);font-weight:600;letter-spacing:.08em;
  background:transparent;color:var(--texto-3);border:1px solid var(--linea-suave);cursor:pointer}
.cmp-idioma[aria-pressed="true"]{color:var(--sobre-amarillo);background:var(--yellow);border-color:var(--yellow)}
.cmp-idioma:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.cmp-previa{padding:var(--esp-4);--caja-fondo:var(--ink)}
.cmp-previa-fila{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;align-items:center;gap:var(--esp-3);
  padding-bottom:var(--esp-3);margin-bottom:var(--esp-3);border-bottom:1px solid var(--linea-suave)}
.cmp-previa-tipo{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;color:var(--yellow);
  background:rgba(242,232,220,.05);clip-path:var(--bevel-compacto)}
.cmp-previa-tipo svg{width:1rem;height:1rem}
.cmp-previa-titulo{display:flex;align-items:center;gap:.35rem;font-weight:600;color:var(--texto-1);font-size:var(--tipo-cuerpo);min-width:0;overflow-wrap:anywhere}
.cmp-previa-titulo .cmp-ico svg{width:.85rem;height:.85rem}
.cmp-previa-fecha{font-size:var(--tipo-leyenda);color:var(--texto-3)}
.cmp-aviso{display:flex;gap:var(--esp-2);align-items:flex-start;margin:var(--esp-3) 0 0;font-size:var(--tipo-descripcion);color:var(--texto-2);line-height:1.45}
.cmp-aviso .cmp-ico{color:var(--yellow);margin-top:.1rem}

@media (max-width:640px){
  .cmp-fila{grid-template-columns:auto minmax(0,1fr) auto;padding:var(--esp-3)}
  .cmp-fila-cifras{display:none}
  .cmp-seccion{padding:var(--esp-4)}
}

/* El aviso del editor sobre @everyone habla de Discord (avisar a todo el
   servidor). En la web no avisa a nadie y se quita al pintar: lo dice la
   vista previa (.cmp-aviso). Pendiente: una opción en bloques.js para
   apagarlo, en vez de esconderlo desde aquí. */
.cmp-bloques .blq-aviso[id$="-masiva"]{display:none}

/* ── A servidores (CEO, 22 oct 2026) ─────────────────────────────────────────
   Un bloque por modo de «A quién»: el [hidden] gana al display:flex. La lista
   de servidores es de filas con una línea fina, sin caja dentro de la caja de
   la sección; con muchos, se desliza dentro. */
.cmp-bloque{display:flex;flex-direction:column;gap:var(--esp-4)}
.cmp-bloque[hidden]{display:none}
.cmp-srv-barra{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-3) var(--esp-4)}
.cmp-srv-n{margin-left:auto}
.cmp-srv-lista{display:flex;flex-direction:column;max-block-size:22rem;overflow-y:auto;border-top:1px solid var(--linea-suave)}
.cmp-srv{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:var(--esp-3);
  padding:var(--esp-2) var(--esp-2);border-bottom:1px solid var(--linea-suave);cursor:pointer;
  transition:background var(--t-rapido) var(--curva)}
.cmp-srv[hidden]{display:none}
.cmp-srv:hover{background:var(--velo-1)}
.cmp-srv:has(input:checked){background:var(--velo-vivo)}
.cmp-srv:has(input:disabled){cursor:default}
.cmp-srv .cmp-avatar{width:2rem;height:2rem}
.cmp-srv-textos{display:flex;flex-direction:column;min-width:0}
.cmp-srv-nombre{color:var(--texto-1);font-size:var(--tipo-descripcion);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-srv-aviso{display:inline-flex;align-items:center;gap:var(--esp-1);font-size:var(--tipo-leyenda);color:var(--texto-2);white-space:nowrap}
.cmp-srv-aviso .cmp-ico{color:var(--yellow)}
.cmp-srv-aviso .cmp-ico svg{width:.9rem;height:.9rem}
.cmp-cuenta-aviso{display:flex;gap:var(--esp-2);align-items:flex-start;margin:var(--esp-2) 0 0;
  font-size:var(--tipo-descripcion);color:var(--texto-2);line-height:1.45}
.cmp-cuenta-aviso .cmp-ico{color:var(--yellow);margin-top:.1rem}

/* La vista previa de servidores: el resumen y el mensaje del bot en el canal del staff. */
.cmp-previa-destino{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2) var(--esp-3);margin:0 0 var(--esp-3);
  font-size:var(--tipo-descripcion);color:var(--texto-2)}
.cmp-previa-destino strong{color:var(--texto-1);font-weight:600}
.cmp-previa-sub{margin:var(--esp-bloque) 0 var(--esp-3)}
.cmp-canal{padding:var(--esp-4);--caja-fondo:var(--ink)}
.cmp-canal-cab{display:flex;align-items:center;gap:var(--esp-2);margin-bottom:var(--esp-3);
  font-size:var(--tipo-descripcion);color:var(--texto-1)}
.cmp-canal-cab strong{font-weight:600}
.cmp-canal-cab .cmp-previa-fecha{margin-left:var(--esp-1)}
.cmp-canal-avatar{width:2rem;height:2rem;border-radius:50%;object-fit:contain;flex:none;background:var(--velo-2)}
.cmp-canal-app{font-size:var(--tipo-rotulo);padding-block:0;min-height:0}
.cmp-canal-tarjeta{display:flex;flex-direction:column;gap:var(--esp-3);padding-left:var(--esp-3);border-left:3px solid var(--yellow);min-width:0}
.cmp-canal-titulo{margin:0;font-family:var(--fuente-titular);font-weight:var(--peso-titular);letter-spacing:var(--tracking-titular);
  line-height:var(--interlinea-titular);font-size:var(--tipo-cuerpo);color:var(--texto-1);overflow-wrap:anywhere}
.cmp-canal-boton{align-self:flex-start;pointer-events:none}
.cmp-canal-boton .cmp-ico{color:inherit;margin-right:var(--esp-2)}

@media (max-width:640px){
  .cmp-srv{grid-template-columns:auto auto minmax(0,1fr)}
  .cmp-srv-aviso{grid-column:3}
  .cmp-srv-n{margin-left:0}
}