/* =========================================================
   LAYOUT GENERAL – DEFINITIVO (LIMPIO)
   ========================================================= */

html, body{
  max-width: 100%;
  overflow-x: hidden;
}

:root{
  --page-bg: #f3f6fd;
  --shell-max: 2500px;
  --container: var(--shell-max);
  --shell-xpad: 24px;

  --brand-cyan: #00a7cf;
  --brand-blue: #0b64d8;

  --header-bg: #ffffff;
  --header-shadow: 0 10px 24px rgba(15, 34, 80, .10);

  --font-title: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Base */
html, body{ height: 100%; }

body{
  margin: 0;
  background: var(--page-bg);
  font-family: var(--font-title);
  color: #1b2863;
}

/* =========================================================
   HEADER PRINCIPAL (index / ayuda)
   ========================================================= */

#header-slot{
  background: var(--header-bg);
  box-shadow: var(--header-shadow);
  position: relative;
  z-index: 50;
}

#header-slot > .site-header{
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-xpad);

  height: 96px;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.site-header .logo{
  display: flex;
  align-items: center;
  gap: 14px;
}

.site-header .logo img{
  height: 85px;
  width: auto;
  display: block;
}

/* Ayuda */
.site-header .help{
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

.site-header .help-label{
  font-size: 20px;
  font-weight: 800;
  color: var(--brand-blue);
  line-height: 1;
}

.site-header .help-btn{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  box-shadow: 0 6px 16px rgba(11,100,216,.18);
  animation: helpPulseBig 1.6s ease-in-out infinite;
}

.site-header .help-btn svg{
  width: 28px;
  height: 28px;
  color: var(--brand-cyan);
}

/* Animación producción */
@keyframes helpPulseBig{
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(11,100,216,.28); }
  60%  { transform: scale(1.18); box-shadow: 0 0 0 12px rgba(11,100,216,0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(11,100,216,0); }
}

/* =========================================================
   HEADER MENU (home / módulos)
   ========================================================= */

.urgc-header{
  background: #fff;
  box-shadow: var(--header-shadow);
}

.urgc-header-wrap{
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-xpad);

  height: 96px;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo mismo tamaño que header principal */
.urgc-brand-img{
  height: 85px;
  width: auto;
  display: block;
}

/* Botones derecha */
.header-menu{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: 20px;
  flex: 1 1 auto;
  width: auto;
}

/* Botones definitivos */
#header_menu .btn-nav{
  height: 42px;
  min-width: 156px;
  width: auto;
  padding: 0 14px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 800;

  white-space: nowrap;
  border: none;
  cursor: pointer;

  box-shadow: 0 8px 22px rgba(15,34,80,.18);
}

#header_menu .btn-nav:hover{
  box-shadow: 0 12px 28px rgba(15,34,80,.24);
}

/* Texto interno (ui.css pisa spans) */
#header_menu .btn-nav span{ font-weight: 800 !important; }

/* Colores */
#btn-home{
  background: #16b3d3;
  color: #fff;
}

#btn-switch-afiliado{
  background: #b7d34a;
  color: #fff;
  margin-right: 14px;
}

#btn-switch-afiliado span{
  color: #fff;
}

#btn-logout{
  background: #f24b4b;
  color: #fff;
}

/* Logout SIEMPRE rojo (no lo pisa ui.css) */
#header_menu #btn-logout{
  background: #f24b4b;
  color: #fff;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px){
  :root{ --shell-xpad: 18px; }

  .site-header .logo img,
  .urgc-brand-img{
    height: 62px;
  }

  .site-header .help-label{ font-size: 18px; }

  .site-header .help-btn{
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 520px){
  /* Header principal */
  .site-header .logo img{ height: 54px; }
  .site-header .help-label{ display: none; }

  /* Header menu: logo arriba, botones abajo */
  .urgc-header-wrap{
    height: auto;
    padding: 14px 16px 18px;
    flex-direction: column;
    gap: 10px;
  }

  /* ✅ Logo un poco más grande */
  .urgc-brand-img{
    height: 68px;
  }

  /* ✅ Botones más chicos y SIN estirarse */
  .header-menu{
    width: 100%;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
  }

  #header_menu .btn-nav{
    height: 38px;
    min-width: 132px;
    padding: 0 10px;
    font-size: 12px;
    justify-content: center;
    white-space: nowrap;
  }

  #btn-switch-afiliado{
    margin-right: 8px;
  }

  #header_menu .btn-nav svg{
    width: 14px;
    height: 14px;
  }
}

/* =========================================================
   CONTENEDOR GLOBAL
   ========================================================= */

.site-shell{
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-xpad);
  box-sizing: border-box;
}

/* =========================================================
   HEADER — ¿Necesitás Ayuda? alineación óptica
   (sin tocar layout ni flex)
   ========================================================= */

.site-header .help-label,
.site-header .help-btn{
  vertical-align: middle;
}

/* compensación fina del botón ? */
.site-header .help-btn{
  position: relative;
  top: -1px;          /* ajuste óptico mínimo */
}