/* Contacto en todas las páginas de advsysa.com (revisión de advsysa.com, paso 4: #59 #65 #66 #102 #5).
   contacto-advsysa.js dibuja la franja de arriba (computador y tableta) y la barra fija de abajo
   (teléfono); acá va su aspecto y el espacio que reservan desde el primer pintado, para que la
   página no salte cuando aparecen. Además: el encabezado del teléfono en una fila y el menú plegado
   en «Menú» por debajo de 1300 px. Lo cargan TODAS las páginas públicas: un cambio acá se ve en
   todo el sitio. */

/* Alto de la franja (desde 768 px) y de la barra (menos de 768 px). /dmp/, /unifi/ y el cotizador
   los leen para correr lo que tienen fijo arriba o abajo. */
:root{--adv-arriba:36px;--adv-abajo:0px}
@media (max-width:767.98px){:root{--adv-arriba:0px;--adv-abajo:56px}}

body{padding-top:var(--adv-arriba);padding-bottom:var(--adv-abajo)}
/* Si el script no llega, el espacio reservado queda como una banda oscura y no como un hueco. */
body::before{content:"";position:absolute;top:0;left:0;right:0;height:var(--adv-arriba);background:#09192f}

/* ── Franja de arriba: ventas, WhatsApp y soporte 24/7 ─────────────────────────────── */
.adv-franja{position:absolute;top:0;left:0;right:0;z-index:1001;height:var(--adv-arriba);box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;gap:20px;padding:0 16px;
  background:#09192f;color:#c6d3e3;font-size:14px;line-height:1;white-space:nowrap}
.adv-franja a{display:inline-flex;align-items:center;gap:7px;min-height:28px;color:#fff;font-weight:600;text-decoration:none}
.adv-franja a:hover{text-decoration:underline}
.adv-franja .adv-et{color:#c6d3e3;font-weight:400}
.adv-franja .adv-wa{padding:0 13px;border-radius:999px;background:#25d366;color:#0b3d1f}
.adv-franja .adv-wa:hover{background:#3ee07a;text-decoration:none}
.adv-franja .adv-sep{width:1px;height:16px;background:rgba(255,255,255,.25)}
.adv-franja svg{width:15px;height:15px;flex:none}
/* Monitoreo 24/7 y Cotizador: solo en las páginas sin menú del sitio, y solo donde caben. */
@media (max-width:1023.98px){.adv-franja .adv-ir{display:none}}

/* ── Barra fija del teléfono: Llamar · WhatsApp · Cotizar (#65) ─────────────────────── */
.adv-barra{display:none}
@media (max-width:767.98px){
  .adv-franja{display:none}
  .adv-barra{position:fixed;left:0;right:0;bottom:0;z-index:999;display:grid;grid-template-columns:repeat(3,1fr);
    gap:1px;height:var(--adv-abajo);background:#fff;box-shadow:0 -4px 16px rgba(9,25,47,.18)}
  .adv-barra a{display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;
    font-size:15px;font-weight:700;line-height:1;text-decoration:none}
  .adv-barra svg{width:20px;height:20px;flex:none}
  .adv-barra .adv-llamar{background:var(--navy,#0d2137)}
  .adv-barra .adv-whatsapp{background:#25d366;color:#0b3d1f}
  .adv-barra .adv-cotizar{background:var(--atg-action,#00566b)}
  /* Mientras se escribe en un formulario la barra se aparta, para no quedar encima del campo. */
  .adv-escribiendo .adv-barra{display:none}
  /* El «¿Te ayudo?» del asistente (lo dibuja atg-web.js) sube por encima de la barra. */
  body>div[style*="2147483000"]{bottom:calc(var(--adv-abajo) + 12px)!important}
  /* Lo que se recorre con el teclado no queda escondido detrás de la barra. */
  html{scroll-padding-bottom:calc(var(--adv-abajo) + 8px)}

  /* Encabezado del teléfono en UNA fila de 64 px como máximo: logo, «EN» y «Menú» (#66).
     Los botones que sobraban se mudan: «Ver Soluciones» y «← Regresar» ya están en el menú y
     «Cotizar Proyecto» es el «Cotizar» de la barra. */
  [data-atg-navigation]{min-height:64px;padding-top:8px!important;padding-bottom:8px!important}
  /* !important: en el inicio, styles.css le da 60 px de alto mínimo con una regla de más peso. */
  [data-atg-navigation] .nav-inner{height:auto;min-height:0!important}
  [data-atg-navigation] .nav-btns>a,[data-atg-navigation] .nav-right>a{display:none!important}
}

/* ── Menú plegado en el botón «Menú» ── */
/* Con «Monitoreo 24/7» y «Cotizador» el menú ya no cabe en una fila por debajo de 1300 px (tabletas y
   computadores chicos): ahí también se pliega en «Menú», con el mismo desplegable que cada página trae
   para 900 px o menos (bloque «atg-usabilidad»). «html» delante: le gana a las reglas del menú de cada
   página sin importar cuál se carga primero. */
@media (min-width:900.02px) and (max-width:1299.98px){
  html .atg-menu-toggle{display:inline-flex!important;order:3;margin-left:auto}
  /* Acá la pantalla es ancha: el desplegable es un panel de 360 px bajo el botón, no toda la fila. */
  html [data-atg-navigation] [data-atg-mobile-menu]{position:absolute!important;top:100%;left:auto;right:0;width:360px;
    overflow-y:auto;display:none!important;flex-direction:column;align-items:stretch;gap:0!important;
    padding:8px 16px 16px!important;margin:0!important;background:#fff;box-shadow:0 10px 20px #10264722;box-sizing:border-box}
  html [data-atg-navigation] [data-atg-mobile-menu].atg-menu-open{display:flex!important}
  html [data-atg-mobile-menu] li{list-style:none;margin:0!important;width:100%}
  html [data-atg-navigation] [data-atg-mobile-menu] a{display:flex!important;align-items:center;min-height:44px;width:100%;
    padding:10px 12px!important;box-sizing:border-box;color:#18283a;text-decoration:none}
}
/* «Soporte 24/7» al final del menú plegado (en pantallas anchas está en la franja). */
.adv-solo-movil{display:none}
.adv-solo-movil svg{width:18px;height:18px;margin-right:8px;flex:none}
@media (max-width:1299.98px){
  [data-atg-mobile-menu] .adv-solo-movil{display:list-item}
  /* El desplegable descuenta la franja de arriba y la barra de abajo: su final no queda fuera de la
     pantalla (tableta o teléfono acostado) ni detrás de la barra. */
  html [data-atg-navigation] [data-atg-mobile-menu]{max-height:calc(100dvh - 84px - var(--adv-arriba) - var(--adv-abajo))}
  /* Al pasar el ratón, petróleo: el blanco que algunas páginas usan sobre su encabezado oscuro
     desaparecía en el desplegable blanco. Los botones siguen blanco sobre petróleo. */
  html [data-atg-navigation] [data-atg-mobile-menu] a:hover{color:var(--atg-action,#00566b)}
  html [data-atg-navigation] [data-atg-mobile-menu] a.nav-cta{color:#fff}
  /* En el inicio «Soporte técnico →» es letra clara sin fondo, pensada para el encabezado oscuro: en el
     desplegable blanco no se leía. Ahí vuelve al botón del resto del sitio (blanco sobre petróleo). */
  .advsysa-visual-home [data-atg-navigation] [data-atg-mobile-menu].nav-links a.nav-cta{background:var(--atg-action,#00566b)!important;color:#fff!important;border-color:transparent}
}

/* Foco visible del teclado sobre el fondo oscuro y sobre el verde. */
.adv-franja a:focus-visible,.adv-barra a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.adv-barra a:focus-visible{outline-offset:-5px}
.adv-barra .adv-whatsapp:focus-visible{outline-color:#0b3d1f}

@media print{.adv-franja,.adv-barra,body::before{display:none}body{padding:0}}