/* ============================================================================
   UN COMUNICADO EN LA WEB · estilos de assets/comunicado.js (.cmn-*)
   ============================================================================
   Lo usan la bandeja (/bandeja/) y la vista previa del módulo Comunicados del
   panel, que lo recibe copiado (scripts/comun-panel.mjs). Solo tokens de
   marca.css. Sin cajas: el texto es texto, un contenedor es una raya de color
   a la izquierda (como en Discord) y los botones son los .btn de siempre.
   ========================================================================== */
.cmn{ display:flex; flex-direction:column; gap:.7rem; color:var(--texto-2);
  font-size:var(--tipo-cuerpo); line-height:1.6; overflow-wrap:anywhere; min-width:0 }
.cmn > *{ margin:0 }

.cmn-texto{ display:flex; flex-direction:column; gap:.45rem; min-width:0 }
.cmn-texto p{ margin:0 }
/* Corte tipográfico (19 oct 2026): el encabezado grande va con el token del
   dato (E a 24 px en la web, M a 32 en el panel); los otros dos (22 y 18 px)
   quedan por debajo de 24: Poppins 600. */
.cmn-h{ margin:.2rem 0 0; color:var(--texto-1); font-family:var(--fuente-titular);
  font-weight:var(--peso-titular); line-height:var(--interlinea-titular) }
.cmn-h1{ font-size:var(--tipo-dato); font-family:var(--fuente-dato); font-weight:800;
  letter-spacing:calc(.01em + var(--tracking-dato)); line-height:1.1 }
.cmn-h2{ font-size:1.375rem }
.cmn-h3{ font-size:1.125rem }
.cmn-sub{ color:var(--texto-3); font-size:var(--tipo-leyenda) }
.cmn-cita{ margin:0; padding-left:.8rem; border-left:2px solid var(--line); color:var(--texto-2) }
.cmn-lista{ margin:0; padding-left:1.1rem }
.cmn-lista li{ margin:.1rem 0 }
.cmn-lista li::marker{ color:var(--yellow) }

.cmn strong{ color:var(--texto-1); font-weight:600 }
.cmn-codigo{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.9em;
  padding:.05rem .3rem; background:color-mix(in srgb, var(--line) 55%, transparent); color:var(--texto-1) }
.cmn-enlace{ color:var(--yellow); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px }
.cmn-enlace:hover{ color:var(--yellow-alto) }
.cmn-enlace:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px }
.cmn-tiempo{ color:var(--texto-1); white-space:nowrap }
.cmn-spoiler{ background:var(--line); color:transparent; cursor:pointer; transition:color .15s, background .15s }
.cmn-spoiler.es-visto{ background:color-mix(in srgb, var(--line) 45%, transparent); color:inherit; cursor:auto }
.cmn-spoiler:focus-visible{ outline:2px solid var(--yellow); outline-offset:1px }

/* Texto con miniatura o botón a la derecha. */
.cmn-seccion{ display:flex; gap:1rem; align-items:flex-start; justify-content:space-between }
.cmn-seccion > .cmn-texto{ flex:1 1 auto }
.cmn-seccion > .cmn-boton{ flex:0 0 auto; align-self:center }
.cmn-miniatura{ flex:0 0 auto; width:4.5rem; margin:0 }
.cmn-miniatura img{ width:4.5rem; height:4.5rem; object-fit:cover }

.cmn-sep{ border:0; height:1px; background:var(--line); margin:.15rem 0 }
.cmn-sep.es-grande{ margin:.7rem 0 }
.cmn-sep.sin-linea{ background:none }

.cmn-imagen{ position:relative; margin:0; max-width:100% }
.cmn-imagen img{ display:block; max-width:100%; height:auto; max-height:24rem; object-fit:contain }
.cmn-imagen.es-rota{ display:none }

/* Spoiler de imagen o contenedor: tapado con la línea y un botón encima. */
.es-spoiler{ position:relative }
.es-spoiler > :not(.cmn-destapar){ filter:blur(18px); opacity:.5; pointer-events:none; user-select:none }
.cmn-destapar{ position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%);
  padding:.3rem .8rem; background:var(--ink); color:var(--texto-1); border:1px solid var(--line);
  font:inherit; font-size:var(--tipo-control); text-transform:uppercase; letter-spacing:.06em; cursor:pointer }
.cmn-destapar:hover{ border-color:var(--yellow) }
.cmn-destapar:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px }

.cmn-archivo{ display:inline-flex; align-items:center; gap:.5rem; max-width:100%;
  color:var(--texto-1); text-decoration:none; padding:.2rem 0; border-bottom:1px solid var(--line); align-self:flex-start }
.cmn-archivo:hover{ border-color:var(--yellow) }
.cmn-archivo:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px }
.cmn-archivo-nombre{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0 }

/* El contenedor: la raya de su color a la izquierda, sin caja. */
.cmn-contenedor{ --cmn-color:var(--yellow); display:flex; flex-direction:column; gap:.7rem;
  padding:.15rem 0 .15rem .9rem; border-left:3px solid var(--cmn-color) }

.cmn-botones{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem }
.cmn-boton{ text-decoration:none; gap:.4rem; max-width:100% }
.cmn-boton > span:not(.cmn-ico){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cmn-ico{ display:inline-flex; width:1em; height:1em; flex:0 0 auto }
.cmn-ico svg{ width:100%; height:100% }
.cmn-fuera{ width:.85em; height:.85em; opacity:.75 }
.cmn-emoji{ font-size:1.05em; line-height:1 }

@media (max-width:520px){
  .cmn-seccion{ flex-direction:column }
  .cmn-seccion > .cmn-boton{ align-self:flex-start }
}
@media (prefers-reduced-motion:reduce){ .cmn-spoiler{ transition:none } }