/*
  /2026/assets/css/skins/municipal.css
  Skin municipal · colores de la bandera de Pergamino

  Se activa desde header.php:
  - automáticamente el 23/10
  - manualmente con ?skin=municipal
*/

body.skin-municipal{
  --mun-cielo:#12a9d6;
  --mun-verde:#b6d82f;
  --mun-dorado:#d4a62a;
  --mun-rojo:#ed1b2f;
  --mun-amarillo:#ffc20a;
  --mun-blanco:#ffffff;
  --mun-tinta:#0f172a;
}

/* Fondo general inspirado en la bandera: cielo + campo */
body.skin-municipal{
  background:
    radial-gradient(circle at 50% -8%, rgba(255,194,10,.22), transparent 22%),
    linear-gradient(180deg,
      rgba(18,169,214,.16) 0%,
      rgba(18,169,214,.08) 34%,
      rgba(255,255,255,.98) 46%,
      rgba(182,216,47,.10) 100%);
}

/* Header municipal */
body.skin-municipal .topbar{
  background:
    linear-gradient(90deg,
      rgba(18,169,214,.28) 0%,
      rgba(255,255,255,.96) 34%,
      rgba(255,255,255,.96) 66%,
      rgba(182,216,47,.24) 100%);
  border-bottom:1px solid rgba(212,166,42,.24);
}

/* Franja inferior: cielo / dorado / verde */
body.skin-municipal .topbar::after{
  content:"";
  display:block;
  height:5px;
  background:
    linear-gradient(90deg,
      var(--mun-cielo) 0%,
      var(--mun-cielo) 44%,
      var(--mun-dorado) 44%,
      var(--mun-dorado) 56%,
      var(--mun-verde) 56%,
      var(--mun-verde) 100%);
  box-shadow:0 1px 0 rgba(15,23,42,.08);
}

/* Marca */
body.skin-municipal .brand-icon{
  filter:drop-shadow(0 4px 10px rgba(212,166,42,.24));
}

body.skin-municipal .brand-clima-word{
  color:#0f172a;
}

body.skin-municipal .brand-perga-word{
  color:var(--mun-cielo);
}

/* Botones superiores */
body.skin-municipal .station-switch-btn,
body.skin-municipal .hamburger-btn,
body.skin-municipal .header-user-badge{
  border-color:rgba(212,166,42,.26);
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 22px rgba(18,169,214,.10);
}

body.skin-municipal .station-switch-btn:hover,
body.skin-municipal .hamburger-btn:hover,
body.skin-municipal .header-user-badge:hover{
  background:linear-gradient(90deg, rgba(18,169,214,.10), rgba(182,216,47,.12));
}

/* Usuario activo */
body.skin-municipal .header-user-badge{
  color:#0b7fa7;
  background:linear-gradient(90deg, rgba(18,169,214,.13), rgba(182,216,47,.12));
}

body.skin-municipal .header-user-avatar{
  background:linear-gradient(135deg, var(--mun-cielo), var(--mun-verde));
  color:#0f172a;
  box-shadow:0 5px 14px rgba(18,169,214,.24);
}

/* Paneles */
body.skin-municipal .station-panel,
body.skin-municipal .header-user-panel,
body.skin-municipal .services-panel{
  border-color:rgba(212,166,42,.24);
  box-shadow:0 24px 64px rgba(18,169,214,.20);
}

body.skin-municipal .station-panel-title,
body.skin-municipal .header-user-panel-title,
body.skin-municipal .services-subtitle{
  color:rgba(11,127,167,.72);
}

/* Hover de links: bandera municipal */
body.skin-municipal .station-panel-item:hover,
body.skin-municipal .station-panel-item.is-active,
body.skin-municipal .header-user-panel-link:hover,
body.skin-municipal .services-link:hover{
  background:
    linear-gradient(90deg,
      rgba(18,169,214,.14),
      rgba(182,216,47,.13) 64%,
      rgba(255,194,10,.10));
  border-color:rgba(212,166,42,.34);
}

body.skin-municipal .services-link.login{
  background:rgba(18,169,214,.10);
  border-color:rgba(18,169,214,.22);
  color:#0b7fa7;
}

/* Link de salida mantiene rojo, alineado con el escudo */
body.skin-municipal .services-link.logout,
body.skin-municipal .header-user-panel-link.logout{
  color:var(--mun-rojo);
}

body.skin-municipal .services-link.logout:hover,
body.skin-municipal .header-user-panel-link.logout:hover{
  background:rgba(237,27,47,.08);
  border-color:rgba(237,27,47,.20);
}

/* Cards genéricas */
body.skin-municipal .card,
body.skin-municipal .panel,
body.skin-municipal .mapa-card,
body.skin-municipal .pll-card{
  border-color:rgba(212,166,42,.18);
}

/* Detalle suave en títulos principales */
body.skin-municipal h1,
body.skin-municipal .section-title,
body.skin-municipal .services-title{
  text-wrap:balance;
}

/* Mobile */
@media (max-width:640px){
  body.skin-municipal .topbar::after{
    height:4px;
  }
}