/**
 * ============================================================
 * CUSTOMIZACOES - Camara Municipal de Presidente Medici - RO
 * Portal Modelo Interlegis v3.0 | Tema: Gelo
 * Arquivo: custom-interacoes.css
 * SEGURO: Nao altera nenhum arquivo original do tema Gelo.
 * ============================================================
 */

/* 1. VARIAVEIS DE COR */
:root {
  --cm-primary:     #1a4a7a;
  --cm-secondary:   #2e7d32;
  --cm-accent:      #f57c00;
  --cm-light:       #e8f0fe;
  --cm-text:        #1a1a2e;
  --cm-white:       #ffffff;
  --cm-shadow:      0 4px 18px rgba(26, 74, 122, 0.15);
  --cm-transition:  all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 2. TICKER DE NOTICIAS */
#cm-ticker {
  background: var(--cm-primary);
  color: var(--cm-white);
  padding: 7px 0;
  overflow: hidden;
  position: relative;
  z-index: 999;
  font-size: 0.82rem;
}
#cm-ticker::before {
  content: "NOTICIAS";
  background: var(--cm-accent);
  color: white;
  padding: 0 14px;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  position: absolute;
  left: 0; top: 0; bottom: 0;
  display: flex;
  align-items: center;
  z-index: 2;
}
#cm-ticker-inner {
  display: inline-block;
  white-space: nowrap;
  padding-left: 120px;
  animation: cm-ticker-scroll 40s linear infinite;
}
#cm-ticker-inner:hover { animation-play-state: paused; }
#cm-ticker a { color: #b3d4ff; text-decoration: none; margin-right: 60px; transition: var(--cm-transition); }
#cm-ticker a:hover { color: white; text-decoration: underline; }
@keyframes cm-ticker-scroll {
  0%   { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* 3. BARRA ALERTA - SESSAO AO VIVO */
#cm-alerta-sessao {
  background: linear-gradient(90deg, #b71c1c, #c62828);
  color: white;
  text-align: center;
  padding: 10px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  align-items: center;
  justify-content: center;
  gap: 10px;
  display: none;
}
#cm-alerta-sessao .cm-live-dot {
  width: 10px; height: 10px;
  background: #ff5252;
  border-radius: 50%;
  animation: cm-blink 1s ease-in-out infinite;
  box-shadow: 0 0 8px #ff5252;
}
#cm-alerta-sessao a { color: #ffcdd2; text-decoration: underline; font-weight: 700; }
@keyframes cm-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.8); }
}

/* 4. CARDS PARLAMENTARES - hover moderno */
.principal .parlamentares-lista a,
#portal-column-content .parlamentares a {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: var(--cm-transition);
}
.principal .parlamentares-lista a img,
#portal-column-content .parlamentares a img {
  display: block;
  border-radius: 12px;
  transition: var(--cm-transition);
  filter: brightness(0.97) saturate(1.05);
}
.principal .parlamentares-lista a:hover,
#portal-column-content .parlamentares a:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: var(--cm-shadow);
}
.principal .parlamentares-lista a:hover img,
#portal-column-content .parlamentares a:hover img {
  filter: brightness(1.05) saturate(1.15);
}

/* 5. CARDS NOTICIAS - lift effect */
.tileItem, .newsItem, .listingBar article, .portletItem {
  transition: var(--cm-transition);
  border-radius: 8px;
}
.tileItem:hover, .newsItem:hover, .listingBar article:hover {
  transform: translateY(-4px);
  box-shadow: var(--cm-shadow);
}
.tileItem a, .newsItem a { transition: color 0.25s ease; }
.tileItem a:hover, .newsItem a:hover { color: var(--cm-primary); }

/* 6. CABECALHO - animacao de entrada */
#portal-header { animation: cm-fadeInDown 0.6s ease both; }
@keyframes cm-fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
#portal-logo img { transition: transform 0.3s ease, opacity 0.3s ease; }
#portal-logo img:hover { transform: scale(1.03); opacity: 0.9; }

/* 7. MENU - underline animado */
#portal-globalnav li a { position: relative; transition: color 0.25s ease; }
#portal-globalnav li a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 2px;
  background: var(--cm-accent);
  transition: width 0.3s ease;
}
#portal-globalnav li a:hover::after,
#portal-globalnav li.selected > a::after { width: 100%; }

/* 8. BOTOES modernos */
.btn, .context, input[type="submit"], button[type="submit"], .searchButton {
  position: relative;
  overflow: hidden;
  border-radius: 6px !important;
  transition: var(--cm-transition) !important;
  cursor: pointer;
}
.btn:hover, .context:hover, input[type="submit"]:hover, button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 74, 122, 0.3) !important;
}

/* 9. BANNERS - hover zoom */
.portletWrapper img, .portlet-static img, #portal-column-two img {
  transition: var(--cm-transition);
  border-radius: 6px;
}
.portletWrapper a:hover img, .portlet-static a:hover img, #portal-column-two a:hover img {
  transform: scale(1.04);
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  opacity: 0.92;
}

/* 10. SCROLL REVEAL */
.cm-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.cm-reveal.cm-visible { opacity: 1; transform: translateY(0); }
.cm-reveal:nth-child(1) { transition-delay: 0.05s; }
.cm-reveal:nth-child(2) { transition-delay: 0.12s; }
.cm-reveal:nth-child(3) { transition-delay: 0.19s; }
.cm-reveal:nth-child(4) { transition-delay: 0.26s; }
.cm-reveal:nth-child(5) { transition-delay: 0.33s; }

/* 11. RODAPE */
#portal-footer-wrapper { border-top: 3px solid var(--cm-primary); position: relative; }
#portal-footer-wrapper::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--cm-primary), var(--cm-secondary), var(--cm-accent));
  position: absolute;
  top: -3px; left: 0; right: 0;
}

/* 12. BUSCA - animacao foco */
#searchGadget, .searchField input {
  transition: var(--cm-transition);
  border-radius: 20px !important;
}
#searchGadget:focus, .searchField input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 74, 122, 0.25);
  border-color: var(--cm-primary) !important;
}

/* 13. MOBILE */
@media (max-width: 768px) {
  #cm-ticker { font-size: 0.75rem; }
  #cm-ticker::before { font-size: 0.65rem; padding: 0 10px; }
  .principal .parlamentares-lista a:hover,
  #portal-column-content .parlamentares a:hover {
    transform: translateY(-3px) scale(1.02);
  }
}