/* web26_header.css — encabezado público con el estilo web26 (vista previa: se activa con ?h26=1, se apaga con ?h26=0; cookie "h26").
   Es una "piel" sobre el CSS del encabezado de siempre (encabezado.php): no cambia el HTML ni el JS, solo la apariencia.
   Todo va bajo html.h26 para no tocar nada cuando está apagada. */
html.h26 { --h26-verde: #0a5a2b; --h26-oscuro: #04210f; }
html.h26 body { font-family: 'Plus Jakarta Sans', 'Roboto', system-ui, sans-serif; }

/* ---------- Barra superior ---------- */
html.h26 .hdr {
  background:
    radial-gradient(700px 220px at 88% -40%, rgba(74,222,128,.28), transparent 60%),
    radial-gradient(500px 200px at 8% 140%, rgba(217,249,157,.14), transparent 60%),
    linear-gradient(135deg, #04210f 0%, #07381b 45%, #0e7a3a 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 34px -16px rgba(4,33,15,.7);
}
html.h26 .hdr-top { padding: 10px 28px 4px; gap: 24px; }
html.h26 .hdr-logo img { height: 60px; }
html.h26 .hdr-actions { gap: 10px; }

/* Píldoras de vidrio (contacto, preferencias, usuario) */
html.h26 .hdr-contact, html.h26 .u-pref-btn, html.h26 .hdr-actions .u-auth {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: .8rem; font-weight: 700; color: #fff;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); transition: background .2s, transform .2s;
}
html.h26 .hdr-contact:hover, html.h26 .u-pref-btn:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); }
/* Botón principal: Iniciar sesión */
html.h26 .u-login-pri {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: 999px; font-size: .82rem; font-weight: 800; color: #07381b !important;
  background: linear-gradient(135deg, #ffffff, #dcfce7); border: 0; box-shadow: 0 10px 22px -8px rgba(0,0,0,.45); cursor: pointer; transition: transform .2s, box-shadow .2s;
}
html.h26 .u-login-pri:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -8px rgba(0,0,0,.5); }
html.h26 .u-pref-panel { border-radius: 18px; }

/* ---------- Navegación ---------- */
html.h26 .hdr-navrow { background: transparent; border-top: 0; padding: 4px 18px 14px; }
html.h26 .nav-list {
  display: inline-flex; gap: 2px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
html.h26 .nv { border-radius: 999px; padding: 11px 15px; font-size: 12px; font-weight: 700; letter-spacing: .05em; color: rgba(255,255,255,.92); transition: background .2s, color .2s, box-shadow .2s; }
html.h26 .nv:hover, html.h26 .nv:focus { background: rgba(255,255,255,.16); color: #fff; }
html.h26 .nv.act { background: #fff; color: #07381b !important; box-shadow: 0 8px 18px -8px rgba(0,0,0,.5); font-weight: 800; }
html.h26 .nv.act i { color: #0e7a3a; }
html.h26 .nv .arr { font-size: 8px; opacity: .8; }

/* Submenús: tarjetas blancas redondeadas */
html.h26 .sub {
  top: calc(100% + 12px); left: 50%; min-width: 270px; padding: 8px; border-radius: 20px; background: #fff;
  box-shadow: 0 24px 50px -14px rgba(4,33,15,.55), 0 0 0 1px rgba(4,33,15,.06); transform: translateX(-50%) translateY(8px); transition: opacity .2s ease, visibility .2s ease, transform .22s ease;
}
html.h26 .sub::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* puente para no perder el hover */
html.h26 .sub::after { content: ''; position: absolute; left: 50%; top: -6px; width: 14px; height: 14px; margin-left: -7px; transform: rotate(45deg); background: #fff; border-radius: 3px 0 0 0; }
html.h26 .has-sub:hover > .sub, html.h26 .has-sub:focus-within > .sub { transform: translateX(-50%) translateY(0); }
html.h26 .sub li:first-child a { border-radius: 14px; }
html.h26 .sub a { position: relative; z-index: 1; padding: 10px 14px; border-bottom: 0; border-radius: 12px; color: #0f2a1a; font-size: 13px; font-weight: 600; transition: background .15s, color .15s, padding-left .15s; }
html.h26 .sub a:hover { background: #dcfce7; color: #0a5a2b; padding-left: 18px; }
html.h26 .has-sub:nth-last-child(-n+3) > .sub { left: auto; right: 0; transform: translateY(8px); }
html.h26 .has-sub:nth-last-child(-n+3):hover > .sub { transform: translateY(0); }
html.h26 .has-sub:nth-last-child(-n+3) > .sub::after { left: auto; right: 28px; margin-left: 0; }

/* Barra de progreso de scroll */
html.h26 .sp-bar { height: 3px; background: linear-gradient(90deg, #86efac, #22c55e, #d9f99d); }

/* ---------- Modo oscuro ---------- */
html[data-theme="dark"].h26 .sub, html[data-theme="dark"].h26 .sub::after { background: #0e2216; }
html[data-theme="dark"].h26 .sub { box-shadow: 0 24px 50px -14px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); }
html[data-theme="dark"].h26 .sub a { color: #e6f4ea; }
html[data-theme="dark"].h26 .sub a:hover { background: #14301f; color: #86efac; }

/* ---------- Escritorio angosto / tablet ---------- */
@media (min-width: 769px) and (max-width: 1100px) {
  html.h26 .nv { padding: 10px 9px; font-size: 10.5px; letter-spacing: .02em; }
  html.h26 .hdr-top { padding: 8px 16px 2px; }
}

/* ---------- Móvil ---------- */
@media (max-width: 768px) {
  html.h26 .hdr-top { padding: 8px 14px 4px; }
  html.h26 .hdr-logo img { height: 48px; }
  html.h26 .hdr-navrow { padding: 0; }
  html.h26 .nav-list {
    display: flex; border-radius: 0 0 24px 24px; border: 0; padding: 0 10px; background: #fff; box-shadow: 0 26px 40px -14px rgba(4,33,15,.55); backdrop-filter: none;
  }
  html.h26 .nav-list.open { padding: 10px; }
  html.h26 .nv { color: #0f2a1a; padding: 14px 16px; font-size: 14px; justify-content: flex-start; border-radius: 14px; }
  html.h26 .nv:hover, html.h26 .nv:focus { background: #f0fdf4; color: #0a5a2b; }
  html.h26 .nv.act { background: linear-gradient(135deg, #0a5a2b, #0e7a3a); color: #fff !important; box-shadow: none; }
  html.h26 .nv.act i { color: #fff; }
  html.h26 .sub { transform: none !important; background: #f6fbf7 !important; border-radius: 14px !important; padding: 4px !important; margin: 2px 6px 6px !important; }
  html.h26 .sub::before, html.h26 .sub::after { display: none; }
  html.h26 .sub a { background: transparent !important; color: #0f2a1a !important; text-align: left !important; padding: 11px 16px !important; border-radius: 10px !important; }
  html.h26 .sub a:hover { background: #dcfce7 !important; }
  html[data-theme="dark"].h26 .nav-list { background: #0e2216; }
  html[data-theme="dark"].h26 .nv { color: #e6f4ea; }
  html[data-theme="dark"].h26 .nv:hover, html[data-theme="dark"].h26 .nv:focus { background: #14301f; color: #86efac; }
  html[data-theme="dark"].h26 .sub { background: #0a1a10 !important; }
  html[data-theme="dark"].h26 .sub a { color: #e6f4ea !important; }
  html.h26 .mob-line { background: #fff; }
}