/* ══════════════════════════════════════════════════════════
   SOPNET · Menú y pie del diseño 2026 para los paneles de Salud365
   (health, messagecenter, portales). Generado desde sitio.css: si
   cambias el menú o el pie allá, copia el cambio aquí.
   Los tokens se declaran en header.nav, .sheet y .site-foot (no en
   :root) para no pisar --ink, --line, --muted… de cada panel.
   ══════════════════════════════════════════════════════════ */
:root{--nav:72px}

header.nav,.sheet,.site-foot{
  --g-main:#F7F7F5; --g-alt:#FFFFFF; --g-dark:#131C26;
  --ink:#111820; --ink-2:#2A3540; --muted:#5A6570; --line:rgba(17,24,32,.13);
  --on-dark:#EEF1F4; --on-dark-muted:#A7B1BC; --line-dark:rgba(238,241,244,.14);
  --action:#2C68AE; --action-hover:#22578F; --action-ink:#FFFFFF;
  --s-ok:#1E8A55; --s-warn:#B26F12; --s-crit:#C03A3A; --s-info:#2C68AE;
  --rat:#18865A;

  --f-head:"Manrope",system-ui,sans-serif;
  --f-body:"Inter",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;

  --t-h1:clamp(40px,3.6vw + 8px,64px);
  --t-h2:clamp(30px,1.9vw + 12px,44px);
  --t-h3:20px; --t-lead:19px; --t-body:16px; --t-small:14px; --t-label:13px;

  --padt:120px; --padb:72px; --gut:80px; --bar:0px;
  --r-lg:14px; --r-md:10px; --r-sm:6px; --btn-h:46px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:1023px){ header.nav,.sheet,.site-foot{ --gut:48px } }
@media (max-width:639px){ header.nav,.sheet,.site-foot{ --gut:20px } :root{ --nav:60px } }

/* ── Botones y enlaces ─────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--btn-h);padding:0 22px;border-radius:var(--r-sm);font:500 16px/1 var(--f-body);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .18s var(--ease),background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.btn--primary{background:var(--action);color:var(--action-ink)}
.btn--primary:hover{background:var(--action-hover);transform:translateY(-1px)}
.btn--secondary{background:transparent;color:var(--ink);border-color:rgba(17,24,32,.28)}
.btn--secondary:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{width:16px;height:16px;transition:transform .18s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.on-dark .btn--secondary{color:var(--on-dark);border-color:rgba(238,241,244,.34)}
.on-dark .btn--secondary:hover{border-color:var(--on-dark)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:639px){.btn-row .btn{width:100%}}

.link{color:var(--action);text-decoration:none;font-weight:500;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .25s var(--ease);padding-bottom:2px}
.link:hover{background-size:100% 1px}
.on-dark .link{color:#8DB8EA}

:focus-visible{outline:2px solid var(--action);outline-offset:3px;border-radius:4px}
.on-dark :focus-visible{outline-color:#8DB8EA}
.skip-link{position:absolute;left:var(--gut);top:-80px;z-index:30;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-sm);text-decoration:none;font-weight:500}
.skip-link:focus{top:12px}

/* ── Nav ───────────────────────────────────────────── */
header.nav{position:fixed;inset:0 0 auto 0;height:var(--nav);background:var(--g-main);border-bottom:1px solid var(--line);z-index:20}
header.nav>.wrap{height:100%;display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand img{width:auto;height:44px}
@media (max-width:639px){.brand img{height:38px}}
.nav__links{display:flex;gap:4px;margin:0 auto 0 24px;padding:0;list-style:none;height:100%}
.nav__links>li{display:flex;align-items:center}
.nav__links a{display:flex;align-items:center;height:44px;padding:0 12px;font:500 15px/1 var(--f-body);text-decoration:none;color:var(--ink-2);white-space:nowrap;border-radius:var(--r-sm);transition:color .15s}
.nav__links a:hover{color:var(--ink)}
/* Acceso CloudRAT destacado con su marca original */
.nav__links li.nav__rat-li{margin-left:8px}
.nav__links a.nav__rat{gap:8px;height:40px;padding:0 14px 0 4px;background:#374656;color:#fff;border-radius:8px;font:800 13px/1 "Montserrat",var(--f-head);letter-spacing:.03em;transition:background-color .18s var(--ease),transform .18s var(--ease)}
.nav__links a.nav__rat:hover{background:#2C3846;color:#fff;transform:translateY(-1px)}
.nav__rat svg{width:32px;height:32px;flex:none}
.nav__end .btn{white-space:nowrap}
@media (max-width:1199px){ .nav__links{margin-left:8px} .nav__links a{padding:0 9px} .nav__links li.nav__rat-li{margin-left:4px} }
.sheet a.sheet__rat{gap:12px;font:800 20px/1 "Montserrat",var(--f-head);color:#374656}
.sheet__rat svg{width:36px;height:36px;flex:none}
.nav__end{display:flex;align-items:center;gap:12px;margin-left:auto}
.nav__menu{display:none;width:44px;height:44px;border:1px solid rgba(17,24,32,.28);border-radius:var(--r-sm);background:transparent;cursor:pointer;align-items:center;justify-content:center}
.nav__menu span,.nav__menu span::before,.nav__menu span::after{display:block;width:18px;height:1.5px;background:var(--ink);position:relative;transition:transform .2s var(--ease)}
.nav__menu span::before,.nav__menu span::after{content:"";position:absolute;left:0}
.nav__menu span::before{top:-6px}.nav__menu span::after{top:6px}
.nav__menu[aria-expanded="true"] span{background:transparent}
.nav__menu[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav__menu[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* Panel de servicios (mega) */
.mega{position:fixed;left:0;right:0;top:var(--nav);background:var(--g-alt);border-bottom:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s var(--ease) 0s,transform .18s var(--ease) 0s,visibility 0s .18s}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none;transition-delay:.15s,.15s,0s}
.mega .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-top:32px;padding-bottom:40px}
.mega__col{grid-column:span 3}
.mega__col--rat{grid-column:span 6;display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-left:24px;border-left:1px solid var(--line)}
.mega__col h3{font:500 var(--t-label)/1 var(--f-mono);color:var(--muted);margin-bottom:12px;letter-spacing:0}
.mega__col ul{list-style:none;margin:0;padding:0}
.mega__col li a{height:auto;padding:8px 0;display:block;font-size:15px;color:var(--ink)}
.mega__col li a:hover{color:var(--action)}
.mega__col--rat p{font-size:15px;color:var(--ink-2);margin:8px 0 12px}
.mega__col--rat strong{font-family:var(--f-head);font-size:18px;font-weight:600}

@media (max-width:1023px){
  .nav__links{display:none}
  .nav__menu{display:inline-flex}
  .mega{display:none}
}
@media (max-width:639px){ .nav__end .btn{display:none} }

/* Hoja de menú móvil */
.sheet{position:fixed;inset:var(--nav) 0 0 0;background:var(--g-main);z-index:19;padding:16px var(--gut) 32px;display:flex;flex-direction:column;overflow:auto}
.sheet[hidden]{display:none}
.sheet a:not(.btn){display:flex;align-items:center;min-height:56px;border-bottom:1px solid var(--line);font:500 20px/1.2 var(--f-head);text-decoration:none}
.sheet .btn{margin-top:24px;width:100%}


.dir{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-top:32px;border-top:1px solid var(--line)}
.dir__brand{grid-column:1 / span 4;display:flex;flex-direction:column;gap:12px}
.dir__brand img{height:56px;width:56px;align-self:flex-start}
.dir__brand p{font-size:14px;color:var(--muted);max-width:36ch}
.dir__col{grid-column:span 2}
.dir__col h3{font:500 var(--t-label)/1 var(--f-mono);color:var(--muted);margin-bottom:10px;letter-spacing:0}
.dir__col ul{list-style:none;margin:0;padding:0}
.dir__col a{display:inline-block;padding:5px 0;font-size:14px;text-decoration:none;color:var(--ink-2)}
.dir__col a:hover{color:var(--action)}
.dir__legal{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;padding-top:20px;margin-top:8px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.dir__legal a{text-decoration:none;color:var(--muted)}
.dir__legal a:hover{color:var(--ink)}
.dir__legal details{margin-left:auto}
.dir__legal summary{cursor:pointer}
.dir__legal details p{margin-top:8px;max-width:72ch}
@media (max-width:1023px){
  .dir__brand{grid-column:1 / -1}
  .dir__col{grid-column:span 3}
  .dir__legal details{margin-left:0}
}
@media (max-width:639px){
  .dir__col{grid-column:span 6}
}

.site-foot{background:var(--g-main);padding:48px 0 32px;border-top:1px solid var(--line)}
.site-foot .dir{padding-top:0;border-top:0}

/* Base que los paneles traían de styles.css */
*{box-sizing:border-box}
img{max-width:100%}
header.nav .wrap,.site-foot .wrap{width:100%;max-width:calc(1280px + 2*var(--gut));margin:0 auto;padding:0 var(--gut);position:relative;z-index:1}

/* El menú es fijo: el contenido parte debajo y el topbar del panel se pega bajo él */
body.con-sitio-nav{padding-top:var(--nav)}
body.con-sitio-nav header.topbar{top:var(--nav)}
/* En teléfono la barra del panel baja a dos líneas en vez de salirse de la pantalla */
@media (max-width:639px){ body.con-sitio-nav .topbar-inner{flex-wrap:wrap;row-gap:8px} }
/* Sobre el topbar sticky del panel (z-index 40), para que el mega no quede debajo */
body.con-sitio-nav header.nav{z-index:50}
body.con-sitio-nav .sheet{z-index:49}
header.nav,.sheet,.site-foot{font:400 var(--t-body)/1.6 var(--f-body);color:var(--ink);-webkit-font-smoothing:antialiased}
header.nav h3,.site-foot h3{margin:0}
header.nav a,.sheet a,.site-foot a{color:inherit}
header.nav .btn--primary,.sheet .btn--primary{color:var(--action-ink)}
header.nav .nav__links a{color:var(--ink-2)}
header.nav .nav__links a:hover,header.nav .mega__col li a{color:var(--ink)}
header.nav .mega__col li a:hover,.site-foot .dir__col a:hover,.site-foot .link{color:var(--action)}
header.nav .nav__links a.nav__rat{color:#fff}
.sheet a.sheet__rat{color:#374656}
.site-foot .dir__col a{color:var(--ink-2)}
.site-foot .dir__legal a{color:var(--muted)}
/* Los paneles definen footer{max-width;padding;font-size:12px} para su pie viejo */
footer.site-foot{max-width:none;margin:0;font-size:var(--t-body)}
@media print{ header.nav,.sheet,.site-foot{display:none!important} body.con-sitio-nav{padding-top:0} }