/* ================================================================
   comunicado.css — GAMS Comunicados Plugin v3
   ================================================================ */

:root {
  --com-color:      #1565c0;
  --com-bg-icon:    #e3f2fd;
  --com-color-icon: #1565c0;
  --com-bg-tag:     #e3f2fd;
  --com-tag-txt:    #1565c0;
}

/* ── Overlay ────────────────────────────────────────────────── */
#gams-com-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.55);
  z-index:         9998;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         16px;
  opacity:         0;
  animation:       comFadeIn .3s ease .8s forwards;
}
@keyframes comFadeIn { to { opacity: 1; } }
#gams-com-overlay.com-oculto { display: none !important; }

/* ── Modal ──────────────────────────────────────────────────── */
#gams-com-modal {
  background:     #fff;
  border-radius:  14px;
  width:          100%;
  max-width:      620px;
  max-height:     92vh;
  overflow:       visible;          /* visible para que las flechas salgan */
  box-shadow:     0 24px 64px rgba(0,0,0,.3);
  position:       relative;
  display:        flex;
  flex-direction: column;
  animation:      comSlideUp .35s ease .8s both;
  border-top:     4px solid var(--com-color);
}
@keyframes comSlideUp {
  from { opacity:0; transform:translateY(20px) scale(.97); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}

/* ── Cabecera compacta — fila única ────────────────────────── */
#gams-com-header {
  padding:       8px 12px 8px 14px;
  display:       flex;
  align-items:   center;
  gap:           8px;
  flex-shrink:   0;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 10px 10px 0 0;    /* acompaña el border-radius del modal */
  background:    #fff;
  overflow:      hidden;            /* cabecera con clip correcto */
}

.com-icono-wrap {
  width:           30px;
  height:          30px;
  border-radius:   50%;
  background:      var(--com-bg-icon);
  color:           var(--com-color-icon);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.9rem;
  flex-shrink:     0;
}

.com-header-texto {
  flex:        1;
  min-width:   0;
  display:     flex;
  align-items: center;
  gap:         7px;
}

.com-tag {
  display:        inline-block;
  background:     var(--com-bg-tag);
  color:          var(--com-tag-txt);
  font-size:      0.58rem;
  font-weight:    700;
  padding:        2px 7px;
  border-radius:  99px;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space:    nowrap;
  flex-shrink:    0;
}

#gams-com-titulo {
  font-size:     0.82rem;
  font-weight:   600;
  color:         #1a1a1a;
  line-height:   1.2;
  margin:        0;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

#gams-com-cerrar {
  width:           26px;
  height:          26px;
  border-radius:   50%;
  border:          none;
  background:      #f0f0f0;
  color:           #666;
  cursor:          pointer;
  font-size:       12px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  margin-left:     auto;
  transition:      background .15s, color .15s;
}
#gams-com-cerrar:hover { background: #e0e0e0; color: #222; }

/* ── Slides ─────────────────────────────────────────────────── */
#gams-com-slides {
  flex:          1;
  overflow-y:    auto;
  overflow-x:    hidden;
  min-height:    0;
  border-radius: 0;                 /* el clip lo hace el padre */
}

.com-slide { display: none; }
.com-slide-activo {
  display:   block;
  animation: comSlideIn .25s ease;
}
@keyframes comSlideIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Imágenes ───────────────────────────────────────────────── */
.com-img-link    { display: block; line-height: 0; }

.com-img-sola {
  width:      100%;
  height:     auto;
  max-height: 70vh;
  object-fit: contain;
  display:    block;
  background: #000;
}

.com-img-con-texto {
  width:      100%;
  height:     auto;
  max-height: 60vh;
  object-fit: contain;
  display:    block;
  background: #000;
}

.com-img-clickeable {
  cursor:     pointer;
  transition: opacity .2s;
}
.com-img-clickeable:hover { opacity: .9; }

/* ── Cuerpo texto ───────────────────────────────────────────── */
.com-body {
  padding:     14px 18px 12px;
  font-size:   0.9rem;
  line-height: 1.7;
  color:       #333;
}
.com-body p            { margin: 0 0 .75rem; }
.com-body p:last-child { margin-bottom: 0; }
.com-body strong       { color: var(--com-color); }
.com-body a            { color: var(--com-color); }
.com-body img {
  width:      100% !important;
  height:     auto !important;
  display:    block;
  margin:     0 0 .75rem;
}

/* ── Barra inferior — paginador y "No mostrar" centrados ───── */
#gams-com-nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;   /* ← centrado horizontal */
  gap:             24px;     /* espacio entre paginador y botón */
  padding:         8px 16px 10px;
  border-top:      1px solid #f0f0f0;
  background:      #fafafa;
  flex-shrink:     0;
  border-radius:   0 0 14px 14px;
  min-height:      44px;
}
/* ── Flechas — absolutas, centradas verticalmente en el modal ──
   Se posicionan respecto a #gams-com-modal (position:relative)
   a mitad de altura del modal completo                         */
#gams-com-prev,
#gams-com-next {
  position:  fixed;
  top:       50%;                   /* centro vertical del modal */
  transform: translateY(-50%);
  z-index:   20;
  width:     46px;
  height:    46px;
  border:    none;
  background: rgba(0,0,0,.28);
  cursor:    pointer;
  font-size: 1.55rem;
  color:     #fff;
  display:   flex;
  align-items:     center;
  justify-content: center;
  transition: background .15s, transform .15s;
  padding:   0;
  border-radius: 50%;
}
/* Posición horizontal: pegadas a los bordes del modal.
   El modal tiene max-width:620px centrado en pantalla */
#gams-com-prev { left:  calc(50% - 310px - 23px); }
#gams-com-next { right: calc(50% - 310px - 23px); }

#gams-com-prev:hover,
#gams-com-next:hover  { background: rgba(0,0,0,.5); }
#gams-com-prev:disabled,
#gams-com-next:disabled { opacity: .2; cursor: default; }

/* Paginador "1 / 3" */
#gams-com-paginador {
  font-size:  0.8rem;
  color:      #888;
  min-width:  36px;
  text-align: center;
}
#gams-com-actual {
  font-weight: 700;
  color:       var(--com-color, #1565c0);
}

/* Botón "No mostrar" */
.com-btn-silenciar {
  background:          none;
  border:              none;
  color:               #aaa;
  font-size:           0.75rem;
  cursor:              pointer;
  padding:             4px 0;
  transition:          color .15s;
  text-decoration:     underline;
  text-underline-offset: 2px;
  white-space:         nowrap;
}
.com-btn-silenciar:hover { color: #555; }

/* ── Colores por tipo ───────────────────────────────────────── */
.com-tipo-info    { --com-color:#1565c0; --com-bg-icon:#e3f2fd; --com-color-icon:#1565c0; --com-bg-tag:#e3f2fd; --com-tag-txt:#1565c0; }
.com-tipo-warn    { --com-color:#e65100; --com-bg-icon:#fff8e1; --com-color-icon:#f9a825; --com-bg-tag:#fff8e1; --com-tag-txt:#e65100; }
.com-tipo-urgente { --com-color:#c62828; --com-bg-icon:#ffebee; --com-color-icon:#c62828; --com-bg-tag:#ffebee; --com-tag-txt:#c62828; }
.com-tipo-evento  { --com-color:#2e7d32; --com-bg-icon:#e8f5e9; --com-color-icon:#2e7d32; --com-bg-tag:#e8f5e9; --com-tag-txt:#2e7d32; }
.com-tipo-fiscal  { --com-color:#1B5E20; --com-bg-icon:#e8f5e9; --com-color-icon:#1B5E20; --com-bg-tag:#e8f5e9; --com-tag-txt:#1B5E20; }

/* ── Responsive móvil ───────────────────────────────────────── */
@media (max-width: 560px) {
  #gams-com-overlay {
    align-items: flex-end;
    padding:     0;
  }
  #gams-com-modal {
    max-width:    100%;
    border-radius: 14px 14px 0 0;
    max-height:   85vh;
  }
  /* En móvil las flechas van dentro (no salen) */
  #gams-com-prev { left:  4px; }
  #gams-com-next { right: 4px; }
  .com-img-sola      { max-height: 55vh; }
  .com-img-con-texto { max-height: 50vh; }
}