/* ==========================================================================
   EXERGÍA V3 — encabezado único para TODAS las páginas (sitio y herramientas)
   · Logo arriba a la izquierda, 25 % más chico que antes, mismo tamaño y lugar en cada página.
   · El ancho de la barra lateral = ancho del logo; al contraerse queda solo el hexágono (mismo tamaño).
   · Menú centrado arriba, con botones de efecto líquido (naranja difuminado).
   · A la derecha: interruptor de luz, idioma y WhatsApp; con barras laterales a la derecha
     (ficha y edición) se recorren hacia el centro para quedar entre el menú y la barra.
   Se carga DESPUÉS de v2.css (sitio) y de exg-ui.css (herramientas).
   ========================================================================== */
:root{
  --v3-logo-h:clamp(40px,3.75vw,54px);                 /* antes clamp(51px,5.1vw,72px): 25 % menos */
  --v3-logo-w:calc(var(--v3-logo-h) * 3.426);          /* el SVG mide 3481 × 1016 */
  --v3-hex-w:calc(var(--v3-logo-w) * .275);            /* el hexágono ocupa el 25.7 % izquierdo del logo; el texto empieza en el 29.8 % */
  --v3-pad:12px;
  --v3-hdr-h:calc(var(--v3-logo-h) + 24px);
  --v3-side-w:calc(var(--v3-logo-w) + var(--v3-pad) * 2);
  --v3-side-mini:calc(var(--v3-hex-w) + var(--v3-pad) * 2);
  --v3-right:0px;                                       /* ancho de las barras laterales derechas abiertas */
  --hdr-h:var(--v3-hdr-h);
}

/* ---------- encabezado ---------- */
.v2-header{
  position:fixed!important; top:0!important; left:0!important; right:0!important; z-index:90!important;
  display:block!important; height:var(--v3-hdr-h)!important; padding:0 var(--v3-pad)!important;
  background:transparent; font-family:var(--f-body,Inter,system-ui,sans-serif); color:var(--ink,#0E1116);
  transition:background .35s var(--ease,ease), box-shadow .35s var(--ease,ease), color .35s var(--ease,ease);
}
.v2-header.scrolled,.v2-header.mega-open,body.xshell .v2-header{ background:var(--header-bg,color-mix(in srgb,var(--paper,var(--bg,#F4F2EE)) 88%,transparent)); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--linea,var(--line,rgba(14,17,22,.14))); }
.v2-header.mega-open{ background:var(--paper,#F4F2EE); box-shadow:0 3px 0 var(--naranja,#FF751F); }

.v2-header .v2-logo{
  position:absolute!important; left:var(--v3-pad); top:calc((var(--v3-hdr-h) - var(--v3-logo-h)) / 2);
  display:block; line-height:0; width:var(--v3-logo-w); height:var(--v3-logo-h); overflow:hidden;
  opacity:1!important; transform:none!important; pointer-events:auto!important;
  transition:width .32s cubic-bezier(.22,1,.36,1);
}
.v2-header .v2-logo img{ height:var(--v3-logo-h)!important; width:var(--v3-logo-w)!important; max-width:none!important; aspect-ratio:auto!important; object-fit:contain; object-position:left center; display:block; }
.v2-header .v2-logo .logo-d{ display:none!important; }
html[data-theme="dark"] .v2-header .v2-logo .logo-l{ display:none!important; }
html[data-theme="dark"] .v2-header .v2-logo .logo-d{ display:block!important; }
/* con la barra lateral contraída: solo el hexágono, con el mismo tamaño y en el mismo lugar */
body.v3-mini .v2-header .v2-logo{ width:var(--v3-hex-w); }
body.v3-side-hidden .v2-header .v2-logo{ width:var(--v3-logo-w); }

/* ---------- menú central ---------- */
.v2-header .v2-menu{
  position:absolute!important; left:50%; top:50%; transform:translate(-50%,-50%); margin:0!important;
  display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; gap:1px 2px;
  padding:4px 8px; border-radius:18px;
  background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.85); box-shadow:0 8px 26px rgba(18,28,45,.07);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
html[data-theme="dark"] .v2-header .v2-menu{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.13); box-shadow:none; }
.v2-header .mm-item{ position:relative; }
.v2-header .mm-top{
  position:relative; display:block; padding:6px clamp(6px,.65vw,11px); text-align:center; text-decoration:none; color:inherit;
  font-size:clamp(.66rem,.7vw,.8rem); font-weight:600; letter-spacing:-.005em; line-height:1.25; white-space:nowrap;
  border-radius:12px; overflow:hidden; isolation:isolate;
  transition:color .25s var(--ease,ease), transform .2s var(--ease,ease);
}
/* efecto líquido (Liquid Button de animate-ui): una franja de 3 px en la base que sube y llena el botón; naranja difuminado */
.v2-header .mm-top::after{ display:none!important; }
.v2-header .mm-top::before{
  content:""; position:absolute; z-index:-1; left:-14%; right:-14%; bottom:-6px; height:9px; border-radius:46% 46% 0 0 / 70% 70% 0 0;
  background:linear-gradient(180deg,rgba(255,150,70,.35),rgba(255,117,31,.85)); filter:blur(3px);
  transition:height .5s cubic-bezier(.22,1,.36,1) .05s, border-radius .5s;
}
.v2-header .mm-top:hover::before,.v2-header .mm-top:focus-visible::before,.v2-header .mm-item.on .mm-top::before{
  height:150%; border-radius:30% 30% 0 0 / 14% 14% 0 0;
}
.v2-header .mm-top:hover,.v2-header .mm-top:focus-visible,.v2-header .mm-item.on .mm-top{ color:var(--ink,#0E1116); }
html[data-theme="dark"] .v2-header .mm-top:hover,html[data-theme="dark"] .v2-header .mm-top:focus-visible{ color:#fff; }
.v2-header .mm-top:active{ transform:scale(.97); }
.v2-header .mm-top.is-active{ color:var(--naranja,#FF751F); }
.v2-header .mm-top.is-active::before{ height:3px; border-radius:0; }
.v2-header .mm-top.is-active:hover::before{ height:150%; border-radius:30% 30% 0 0 / 14% 14% 0 0; }
.v2-header .mm-top.is-active:hover{ color:var(--ink,#0E1116); }

/* ---------- herramientas de la derecha ---------- */
.v2-header .v2-tools{
  position:absolute!important; right:calc(var(--v3-pad) + var(--v3-right)); top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:8px; transition:right .32s cubic-bezier(.22,1,.36,1);
}
.v2-header .v2-btn{
  height:42px; min-width:42px; padding:0 12px; border-radius:100px; border:1px solid var(--linea,var(--line,rgba(14,17,22,.14))); background:transparent; color:inherit; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; font:700 .72rem var(--f-body,Inter,sans-serif); letter-spacing:.14em; text-decoration:none;
  transition:background .3s, color .3s, border-color .3s;
}
.v2-header .v2-btn:hover{ background:var(--ink,#0E1116); color:var(--paper,#F4F2EE); border-color:var(--ink,#0E1116); }
.v2-header .v2-btn svg{ width:18px; height:18px; }
.v2-header .v2-lang span{ opacity:.4; transition:opacity .3s; }
.v2-header .v2-lang .sep{ opacity:.3; }
html[lang="es"] .v2-header .v2-lang [data-l="es"],html[lang="en"] .v2-header .v2-lang [data-l="en"]{ opacity:1; color:var(--naranja,#FF751F); }
.v2-header .v2-wa{
  height:42px; padding:0 16px 0 12px; border-radius:100px; display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:#25D366; color:#fff; font:700 .86rem var(--f-body,Inter,sans-serif); white-space:nowrap; box-shadow:0 6px 18px rgba(37,211,102,.28);
  transition:transform .3s, box-shadow .3s, background .3s;
}
.v2-header .v2-wa svg{ width:20px; height:20px; flex:0 0 auto; }
.v2-header .v2-wa:hover{ transform:translateY(-2px); background:#1EBE5A; }
/* interruptor de luz (caja de pastilla termomagnética) */
.v2-header .v2-theme{ width:34px; min-width:34px; height:46px; padding:0; border-radius:7px; position:relative; overflow:visible; background:linear-gradient(180deg,#FBFBFA,#E4E6E9); border:1px solid #B9C0C8; box-shadow:inset 0 1px 0 #fff,0 3px 8px rgba(13,36,56,.14); }
.v2-header .v2-theme svg{ display:none!important; }
.v2-header .v2-theme::before{ content:''; position:absolute; left:50%; top:8px; width:14px; height:28px; transform:translateX(-50%); border-radius:4px; background:#2B3640; box-shadow:inset 0 2px 4px rgba(0,0,0,.55); }
.v2-header .v2-theme::after{ content:''; position:absolute; left:50%; top:9px; width:12px; height:14px; transform:translateX(-50%); border-radius:3px; background:linear-gradient(180deg,#FF9A55,#FF751F 60%,#D95C10); box-shadow:0 2px 3px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.55); transition:top .32s cubic-bezier(.5,1.8,.5,.8),background .3s; }
.v2-header .v2-theme .brk-led{ position:absolute; left:50%; bottom:3px; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:#3FD07A; box-shadow:0 0 6px #3FD07A; }
.v2-header .v2-theme:hover{ background:linear-gradient(180deg,#FFFFFF,#E9EBEE); border-color:var(--naranja,#FF751F); color:inherit; }
html[data-theme="dark"] .v2-header .v2-theme{ background:linear-gradient(180deg,#3A4653,#222C36); border-color:#4D5A68; box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 8px rgba(0,0,0,.4); }
html[data-theme="dark"] .v2-header .v2-theme::after{ top:21px; background:linear-gradient(180deg,#9AA6B2,#6B7886); }
html[data-theme="dark"] .v2-header .v2-theme .brk-led{ background:#5A2A20; box-shadow:none; }

/* botones de «Edición» y «Ficha» (herramientas): mismo diseño que los del menú central */
.v2-header .v3-pills{ display:flex; align-items:center; gap:2px; padding:4px 6px; border-radius:18px; background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.85); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
html[data-theme="dark"] .v2-header .v3-pills{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.13); }
.v2-header .v3-pills .mm-top{ border:0; background:transparent; cursor:pointer; font-family:inherit; }
.v2-header .v3-pills .mm-top[aria-pressed="true"]{ color:var(--naranja,#FF751F); }
.v2-header .v3-pills .mm-top[aria-pressed="true"]::before{ height:3px; border-radius:0; }
.v2-header .v3-pills .mm-top.v3-hide{ display:none; }

/* ---------- barras laterales: el ancho sale del logo ---------- */
body.xshell{ --v3-side-cur:var(--v3-side-w); }
body.xshell.xs-mini{ --v3-side-cur:var(--v3-side-mini); }
@media (max-width:1240px){ .v2-header .v2-menu{ display:none!important; } }
@media (max-width:1400px){ .v2-header .v2-wa span{ display:none; } .v2-header .v2-wa{ width:42px; padding:0; justify-content:center; } }
@media (max-width:620px){ .v2-header .v2-btn{ height:38px; min-width:38px; padding:0 10px; } .v2-header .v2-tools{ gap:5px; } }
@media (prefers-reduced-motion:reduce){ .v2-header .v2-logo,.v2-header .v2-tools,.v2-header .mm-top::before{ transition:none!important; } }
@media print{ .v2-header{ display:none!important; } }

/* con barras laterales a la derecha: el menú se centra en el espacio libre y el interruptor, el idioma y WhatsApp
   quedan entre el menú y la barra; WhatsApp pasa a icono para que todo quepa */
.v2-header .v2-menu{ left:calc(50% - var(--v3-right) / 2); transition:left .32s cubic-bezier(.22,1,.36,1); }
body.xshell:not(.xs-sinficha) .v2-header .v2-wa span,body.xs-doc.xs-edit-on .v2-header .v2-wa span{ display:none; }
body.xshell:not(.xs-sinficha) .v2-header .v2-wa,body.xs-doc.xs-edit-on .v2-header .v2-wa{ width:42px; padding:0; justify-content:center; }
@media (max-width:1340px){ body.xshell:not(.xs-sinficha) .v2-header .v2-menu{ display:none; } }
@media (max-width:1300px){ body.xs-doc.xs-edit-on .v2-header .v2-menu{ display:none; } }
/* celular: el logo se reduce para convivir con el interruptor, el idioma, WhatsApp y el menú */
@media (max-width:620px){ :root{ --v3-logo-h:32px; --v3-pad:10px; } .v2-header .v2-lang{ padding:0 8px; } }

/* ---------- 20-oct: el menú central queda guardado en un botón «Menú»; se despliega al pasar el cursor ---------- */
@media (hover:hover){
  .v2-header .v2-menu::before{
    content:"Menú"; display:block; padding:6px 18px 6px 40px; border-radius:12px; white-space:nowrap; cursor:default;
    font-size:clamp(.72rem,.78vw,.88rem); font-weight:600; line-height:2.5; letter-spacing:-.005em; color:inherit;
    background:
      linear-gradient(currentColor,currentColor) 16px calc(50% - 5px) / 14px 2px no-repeat,
      linear-gradient(currentColor,currentColor) 16px 50% / 14px 2px no-repeat,
      linear-gradient(currentColor,currentColor) 16px calc(50% + 5px) / 14px 2px no-repeat,
      linear-gradient(180deg,rgba(255,150,70,.35),rgba(255,117,31,.85)) 50% 100% / 70% 3px no-repeat;
  }
  html[lang="en"] .v2-header .v2-menu::before{ content:"Menu"; }
  .v2-header .v2-menu > *{ display:none; }
  .v2-header .v2-menu:hover::before,.v2-header .v2-menu:has(:focus-visible)::before,.v2-header.mega-open .v2-menu::before{ display:none; }
  .v2-header .v2-menu:hover > *,.v2-header .v2-menu:has(:focus-visible) > *,.v2-header.mega-open .v2-menu > *{ display:block; animation:v3MenuIn .28s cubic-bezier(.22,1,.36,1) both; }
}
@keyframes v3MenuIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .v2-header .v2-menu > *{ animation:none!important; } }

/* ---------- submenús desplegables: cada opción es un botón como los del menú (21-oct) ----------
   sin líneas punteadas; al pasar el cursor el botón se llena con el mismo líquido naranja difuminado */
.mm-panel .mm-list{ row-gap:4px; }
.mm-panel .mm-list li{ border-bottom:0; }
.mm-panel .mm-list a{
  position:relative; isolation:isolate; overflow:hidden; border-radius:12px;
  padding-left:14px; padding-right:12px; color:var(--ink,#0E1116);
  background:color-mix(in srgb,var(--ink,#0E1116) 3.5%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink,#0E1116) 7%,transparent);
  transition:color .25s var(--ease,ease), transform .2s var(--ease,ease), box-shadow .25s;
}
.mm-panel .mm-list a::before{
  content:""; position:absolute; z-index:-1; left:-8%; right:-8%; bottom:-6px; height:6px; border-radius:46% 46% 0 0 / 70% 70% 0 0;
  background:linear-gradient(180deg,rgba(255,150,70,.35),rgba(255,117,31,.85)); filter:blur(3px); opacity:0;
  transition:height .5s cubic-bezier(.22,1,.36,1) .03s, border-radius .5s, opacity .2s;
}
.mm-panel .mm-list a:hover,.mm-panel .mm-list a:focus-visible{ padding-left:14px; color:var(--ink,#0E1116); box-shadow:inset 0 0 0 1px transparent; outline:none; }
.mm-panel .mm-list a:hover::before,.mm-panel .mm-list a:focus-visible::before{ opacity:1; height:170%; border-radius:30% 30% 0 0 / 14% 14% 0 0; }
.mm-panel .mm-list a:active{ transform:scale(.985); }
.mm-panel .mm-list a:hover .mm-n,.mm-panel .mm-list a:hover .mm-arrow{ color:var(--ink,#0E1116); }
html[data-theme="dark"] .mm-panel .mm-list a{ color:#E8EEF5; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
html[data-theme="dark"] .mm-panel .mm-list a:hover,html[data-theme="dark"] .mm-panel .mm-list a:focus-visible{ color:#fff; }
html[data-theme="dark"] .mm-panel .mm-list a:hover .mm-n,html[data-theme="dark"] .mm-panel .mm-list a:hover .mm-arrow{ color:#fff; }
.mm-panel .mm-list:not(.cols-2){ align-content:start; row-gap:8px; }
@media (prefers-reduced-motion:reduce){ .mm-panel .mm-list a,.mm-panel .mm-list a::before{ transition:none!important; } }

/* ---------- submenús: todos los botones del mismo tamaño en todos los paneles (21-oct) ----------
   9 renglones por columna (el panel con más opciones, Herramientas) llenan el alto del panel;
   los demás paneles usan el mismo alto de renglón y la misma letra, empezando arriba */
.mm-panels .mm-panel .mm-card .mm-list{
  --mm-gap:8px; row-gap:var(--mm-gap); align-content:start;
  padding-top:clamp(28px,3.4vw,60px); padding-bottom:clamp(20px,2.6vw,44px);
  grid-auto-rows:calc((100% - 8 * var(--mm-gap)) / 9);
  grid-template-rows:repeat(var(--rows,9),calc((100% - 8 * var(--mm-gap)) / 9));
}
.mm-panels .mm-panel .mm-card .mm-list li{ min-height:0; display:flex; }
.mm-panels .mm-panel .mm-card .mm-list a{
  flex:1; height:100%; min-height:0; padding:0 14px; gap:12px;
  font-size:clamp(1.02rem,1.12vw,1.24rem); line-height:1.2;
}
.mm-panels .mm-panel .mm-card .mm-list a:hover,.mm-panels .mm-panel .mm-card .mm-list a:focus-visible{ padding-left:14px; }
.mm-panels .mm-panel .mm-card .mm-list .mm-n{ min-width:1.8em; font-size:.82em; }
.mm-panels .mm-panel .mm-card .mm-list .mm-arrow{ margin-left:auto; }

/* ---------- 21-oct: el recuadro del menú ya mide lo mismo que el menú desplegado; «Menú» queda al centro
   y al pasar el cursor por cualquier parte del recuadro aparecen las opciones ---------- */
@media (hover:hover){
  .v2-header .v2-menu::before{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1; pointer-events:none; transition:opacity .2s; }
  .v2-header .v2-menu > *{ display:block; visibility:hidden; opacity:0; transition:opacity .25s, visibility .25s; animation:none; }
  .v2-header .v2-menu:hover::before,.v2-header .v2-menu:has(:focus-visible)::before,.v2-header.mega-open .v2-menu::before{ display:block; opacity:0; }
  .v2-header .v2-menu:hover > *,.v2-header .v2-menu:has(:focus-visible) > *,.v2-header.mega-open .v2-menu > *{ visibility:visible; opacity:1; animation:v3MenuIn .28s cubic-bezier(.22,1,.36,1) both; }
}

/* 21-oct: WhatsApp solo con su icono en todas las páginas (también en la portada) */
.v2-header .v2-wa > span{ display:none!important; }
.v2-header a.v2-wa{ width:42px!important; padding:0!important; justify-content:center; }