/* DAR 8.0.0 hardening: plugin-owned shells */
body.dar-ms-managed-page-body,
body.dar-ms-portal-router-body,
body.dar-ms-portal-page-body{
  margin:0;
  background:var(--dar-portal-bg, #FAF8F5);
}

.dar-ms-managed-page-shell,
.dar-ms-portal-router-shell,
.dar-ms-portal-page-shell{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}

body.dar-ms-managed-page-body .dar-ms-app-shell,
body.dar-ms-portal-router-body .dar-ms-app-shell,
body.dar-ms-portal-page-body .dar-ms-app-shell{
  max-width:none;
}

/* DAR Matching System – App Shell
 * v7.4.9
 * ---------------------------------------------------------
 * OBJETIVO DE ESTA CAPA
 * - Recuperar la estabilidad estructural de 7.1.7
 * - Mantener compatibilidad con la navegación y drawer de 7.4.8
 * - Evitar que RTL mueva el esqueleto del header o del shell
 * - Separar mejor móvil / desktop sin romper clases públicas
 *
 * OBSERVACIÓN:
 * Esta hoja gobierna SOLO shell + nav + mobile app nav.
 * El portal visual se normaliza en assets/portal.css.
 */

/* =========================================================
   1. CORE SHELL CONTRACT
   ---------------------------------------------------------
   Regla maestra: el shell define el ancho maestro.
   Ni la nav ni el portal pueden imponer otro ancho estructural.
========================================================= */

.dar-ms-app-shell,
.dar-ms-app-shell *{
  box-sizing:border-box;
}

.dar-ms-app-shell{
  width:100%;
  display:block;
  margin:0;
  color:var(--dar-ms-nav-text, var(--dar-ms-color-text, #1A1A1A));
  background:var(--dar-ms-shell-background, var(--dar-ms-color-bg, #FAF8F5));
  --dar-ms-shell-width:1320px;
  --dar-ms-shell-padding:16px;
  --dar-ms-shell-mobile-padding:10px;
  --dar-ms-shell-mobile-breakpoint:900px;
  --dar-ms-shell-inner-width:calc(var(--dar-ms-shell-width, 1320px) + (var(--dar-ms-shell-padding, 16px) * 2));
  --dar-ms-shell-sticky-offset:0px;
  --dar-ms-nav-height-desktop:74px;
  --dar-ms-nav-height-mobile:62px;
  overflow-x:clip;
}

.dar-ms-app-shell__container,
.dar-ms-app-shell__container--wide,
.dar-ms-app-shell__container--narrow{
  width:min(100%, var(--dar-ms-shell-inner-width));
  max-width:100%;
  margin:0 auto;
  padding:24px var(--dar-ms-shell-padding) 40px;
}

.dar-ms-app-shell__container--wide{
  width:min(100%, calc(var(--dar-ms-shell-width, 1320px) + 64px));
}

.dar-ms-app-shell__container--narrow{
  width:min(100%, 1012px);
}

.dar-ms-app-shell__inner,
.dar-ms-app-shell__content{
  width:100%;
  min-width:0;
  margin:0 auto;
}

.entry-content > .dar-ms-app-shell,
.wp-block-post-content > .dar-ms-app-shell,
.is-layout-constrained > .dar-ms-app-shell,
.wp-site-blocks .dar-ms-app-shell{
  max-width:none !important;
}

.entry-content > .dar-ms-app-shell:first-child,
.wp-block-post-content > .dar-ms-app-shell:first-child{
  margin-top:0;
}

.dar-ms-app-shell .dar-ms-wrap,
.dar-ms-app-shell .dar-ms-box,
.dar-ms-app-shell .dar-ms-prop-panel,
.dar-ms-app-shell .dar-ms-account,
.dar-ms-app-shell .dar-ms-account-shell,
.dar-ms-app-shell .dar-ms-portal-shortcode,
.dar-ms-app-shell .dar-ms-portal{
  max-width:100%;
}

.dar-ms-app-shell .dar-ms-wrap{
  max-width:100%;
  padding:0;
}

.dar-ms-app-shell--account .dar-ms-account-shell{
  width:100%;
}

.dar-ms-app-shell--desktop-sidebar-fixed .dar-ms-account-nav{
  position:sticky;
  top:20px;
  align-self:start;
}

.dar-ms-app-shell--desktop-sidebar-static .dar-ms-account-nav{
  position:static;
}

.dar-ms-app-shell--panel .dar-ms-prop-panel,
.dar-ms-app-shell--portal .dar-ms-portal-shortcode,
.dar-ms-app-shell--candidature .dar-ms-wrap{
  width:100%;
}

.dar-ms-mobile-app-nav{
  display:none;
}

.dar-ms-portal-router-shell,
.dar-ms-portal-router-body,
body.dar-ms-portal-page,
body.dar-ms-portal-shortcode-page{
  overflow-x:hidden;
}

/* =========================================================
   2. RESPONSIVE SHELL WIDTH
   ---------------------------------------------------------
   Ajuste manual previsto:
   - Desktop: caja centrada y controlada
   - Mobile: full width real, sin empujes laterales
========================================================= */

@media (max-width: 1024px){
  .dar-ms-app-shell__container,
  .dar-ms-app-shell__container--wide,
  .dar-ms-app-shell__container--narrow{
    width:100%;
    max-width:none;
    padding-inline:max(14px, var(--dar-ms-shell-padding, 16px));
  }
}

@media (max-width: 900px){
  .dar-ms-app-shell{
    --dar-ms-shell-sticky-offset:0px;
  }

  .dar-ms-app-shell__container,
  .dar-ms-app-shell__container--wide,
  .dar-ms-app-shell__container--narrow{
    width:100%;
    max-width:none;
    padding:16px var(--dar-ms-shell-mobile-padding, 10px) 92px;
  }
}

@media (max-width: 640px){
  .dar-ms-app-shell__container,
  .dar-ms-app-shell__container--wide,
  .dar-ms-app-shell__container--narrow{
    padding:16px var(--dar-ms-shell-mobile-padding, 10px) 92px;
  }
}

/* =========================================================
   3. PORTAL WIDTH CONTRACT
   ---------------------------------------------------------
   La nav no cambia el ancho del portal.
   El shell entrega el contenedor y el portal hereda.
========================================================= */

.dar-ms-app-shell--portal .dar-ms-app-shell__container,
.dar-ms-app-shell--portal .dar-ms-app-shell__container--wide{
  width:min(100%, calc(var(--dar-ms-shell-width, 1320px) + 64px));
}

.dar-ms-app-shell--portal .dar-ms-portal__shell,
.dar-ms-app-shell--portal .dar-ms-portal__shell--single,
.dar-ms-app-shell--portal .dar-ms-portal-single,
.dar-ms-app-shell__content--portal .dar-ms-portal__shell,
.dar-ms-app-shell__content--portal .dar-ms-portal__shell--single,
.dar-ms-app-shell__content--portal .dar-ms-portal-single{
  width:100%;
  min-width:0;
}

@media (max-width: 900px){
  .dar-ms-app-shell--portal .dar-ms-app-shell__container,
  .dar-ms-app-shell--portal .dar-ms-app-shell__container--wide,
  .dar-ms-app-shell--portal .dar-ms-app-shell__container--narrow{
    width:100%;
    max-width:none;
    padding:0 0 92px;
  }

  .dar-ms-app-shell--portal .dar-ms-app-shell__inner,
  .dar-ms-app-shell--portal .dar-ms-app-shell__content,
  .dar-ms-app-shell--portal .dar-ms-portal-shortcode,
  .dar-ms-app-shell--portal .dar-ms-portal{
    width:100%;
    max-width:none;
  }
}

/* =========================================================
   4. PLUGIN NAV – STRUCTURAL LAYER
   ---------------------------------------------------------
   Objetivo UX:
   - header estable
   - logo + selector de idioma + menú
   - sin ensanchar el diseño
   - sin row-reverse estructural en RTL
========================================================= */

.dar-ms-plugin-nav{
  position:sticky;
  top:0;
  left:0;
  right:0;
  z-index:9990;
  width:100%;
  background:var(--dar-ms-nav-bg, var(--dar-ms-color-bg, #ffffff));
  border-bottom:1px solid color-mix(in srgb, var(--dar-ms-nav-active, var(--dar-ms-color-primary, #B3262E)) 12%, var(--dar-ms-surface-border, #D8D3CC));
  box-shadow:0 8px 22px rgba(0,0,0,.04);
  isolation:isolate;
}

.dar-ms-plugin-nav__container{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}

.dar-ms-plugin-nav__inner{
  width:min(100%, calc(var(--dar-ms-shell-width, 1320px) + 64px));
  min-width:0;
  min-height:var(--dar-ms-nav-height-desktop, 74px);
  margin:0 auto;
  padding:12px 16px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:14px;
}

.dar-ms-plugin-nav__brand{
  grid-column:1;
  min-width:0;
  max-width:min(34vw, 260px);
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--dar-ms-nav-text, var(--dar-ms-color-text, #1A1A1A));
  text-decoration:none;
  font-weight:700;
}

.dar-ms-plugin-nav__brand-media,
.dar-ms-plugin-nav__brand-mark{
  width:58px;
  height:58px;
  border-radius:18px;
  flex:0 0 auto;
  overflow:hidden;
}

.dar-ms-plugin-nav__brand-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  background:var(--dar-ms-nav-active, var(--dar-ms-color-primary, #B3262E));
  color:#fff;
  font-weight:800;
  letter-spacing:.06em;
}

.dar-ms-plugin-nav__brand-media{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.dar-ms-plugin-nav__brand-media--logo{
  width:auto;
  height:auto;
  border-radius:0;
  overflow:visible;
}

.dar-ms-plugin-nav__brand-logo{
  display:block;
  width:auto;
  height:auto;
  max-width:min(220px, 100%);
  max-height:54px;
  object-fit:contain;
}

/* =========================================================
   5. LANGUAGE SWITCHER
   ---------------------------------------------------------
   Observación:
   Este selector se coloca entre logo y navegación.
   En móvil actúa como panel compacto fijo del header.
========================================================= */

.dar-ms-plugin-nav__lang-switcher{
  grid-column:3;
  min-width:0;
  display:flex;
  align-items:center;
  align-self:center;
  justify-content:center;
  justify-self:end;
  gap:6px;
  flex-wrap:nowrap;
}

.dar-ms-plugin-nav__lang{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:38px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--dar-ms-surface-border, #D8D3CC);
  background:#fff;
  color:var(--dar-ms-nav-text, var(--dar-ms-color-text, #1A1A1A));
  font-size:12px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
}

.dar-ms-plugin-nav__lang:hover,
.dar-ms-plugin-nav__lang:focus{
  color:var(--dar-ms-nav-active, var(--dar-ms-color-primary, #B3262E));
  border-color:color-mix(in srgb, var(--dar-ms-nav-active, var(--dar-ms-color-primary, #B3262E)) 28%, var(--dar-ms-surface-border, #D8D3CC));
}

.dar-ms-plugin-nav__lang.is-active{
  background:var(--dar-ms-nav-active, var(--dar-ms-color-primary, #B3262E));
  border-color:var(--dar-ms-nav-active, var(--dar-ms-color-primary, #B3262E));
  color:#fff;
}

.dar-ms-plugin-nav__actions{
  min-width:0;
}

/* =========================================================
   6. DESKTOP MENU
========================================================= */

.dar-ms-plugin-nav__menu{
  grid-column:2;
  min-width:0;
  width:100%;
  margin-left:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  justify-self:end;
  gap:10px;
  flex-wrap:nowrap;
}

.dar-ms-plugin-nav__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 14px;
  border-radius:999px;
  text-decoration:none;
  color:var(--dar-ms-nav-text, var(--dar-ms-color-text, #1A1A1A));
  background:transparent;
  border:1px solid transparent;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.dar-ms-plugin-nav__link:hover,
.dar-ms-plugin-nav__link:focus{
  border-color:color-mix(in srgb, var(--dar-ms-nav-active, var(--dar-ms-color-primary, #B3262E)) 20%, var(--dar-ms-surface-border, #D8D3CC));
  background:color-mix(in srgb, var(--dar-ms-nav-active, var(--dar-ms-color-primary, #B3262E)) 6%, var(--dar-ms-surface-background, #ffffff));
  color:var(--dar-ms-nav-active, var(--dar-ms-color-primary, #B3262E));
}

.dar-ms-plugin-nav__link.is-active{
  color:var(--dar-ms-nav-active, var(--dar-ms-color-primary, #B3262E));
  border-color:color-mix(in srgb, var(--dar-ms-nav-active, var(--dar-ms-color-primary, #B3262E)) 28%, var(--dar-ms-surface-border, #D8D3CC));
  background:color-mix(in srgb, var(--dar-ms-nav-active, var(--dar-ms-color-primary, #B3262E)) 10%, var(--dar-ms-surface-background, #ffffff));
  font-weight:700;
}

.dar-ms-plugin-nav__link--cta{
  background:var(--dar-ms-nav-cta-bg, var(--dar-ms-nav-active, var(--dar-ms-color-primary, #B3262E)));
  color:var(--dar-ms-nav-cta-text, #ffffff);
  border-color:transparent;
  box-shadow:0 10px 24px color-mix(in srgb, var(--dar-ms-nav-cta-bg, var(--dar-ms-nav-active, #B3262E)) 24%, transparent);
}

.dar-ms-plugin-nav__link--cta:hover,
.dar-ms-plugin-nav__link--cta:focus,
.dar-ms-plugin-nav__link--cta.is-active{
  color:var(--dar-ms-nav-cta-text, #ffffff);
  border-color:transparent;
  background:var(--dar-ms-nav-cta-bg, var(--dar-ms-nav-active, var(--dar-ms-color-primary, #B3262E)));
  filter:brightness(.98);
}

.dar-ms-plugin-nav__link--subtle{
  color:color-mix(in srgb, var(--dar-ms-color-text, #1A1A1A) 76%, #777);
}

.dar-ms-plugin-nav__link-icon{
  font-size:15px;
  line-height:1;
}

.dar-ms-plugin-nav__link--route-search{
  gap:0;
  padding-inline:8px 10px;
  border-color:transparent;
  background:transparent;
  box-shadow:none;
}

.dar-ms-plugin-nav__link--route-search .dar-ms-plugin-nav__link-icon,
.dar-ms-plugin-nav__link--route-search .dar-ms-plugin-nav__link-icon img{
  display:none !important;
}

.dar-ms-plugin-nav__link--route-search .dar-ms-plugin-nav__link-label{
  font-weight:500;
  letter-spacing:.01em;
}

.dar-ms-plugin-nav__link--route-search:hover,
.dar-ms-plugin-nav__link--route-search:focus,
.dar-ms-plugin-nav__link--route-search.is-active{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}

.dar-ms-plugin-nav__link--route-logout .dar-ms-plugin-nav__link-icon,
.dar-ms-plugin-nav__drawer-link--route-logout .dar-ms-plugin-nav__drawer-link-icon{
  position:relative;
  inline-size:1em;
  block-size:1em;
  color:transparent;
  overflow:hidden;
}

.dar-ms-plugin-nav__link--route-logout .dar-ms-plugin-nav__link-icon img,
.dar-ms-plugin-nav__drawer-link--route-logout .dar-ms-plugin-nav__drawer-link-icon img{
  display:none !important;
}

.dar-ms-plugin-nav__link--route-logout .dar-ms-plugin-nav__link-icon::before,
.dar-ms-plugin-nav__drawer-link--route-logout .dar-ms-plugin-nav__drawer-link-icon::before{
  content:"↗";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:var(--dar-ms-nav-active, var(--dar-ms-color-primary, #B3262E));
  font-size:1em;
  line-height:1;
}


.dar-ms-plugin-nav__toggle{
  grid-column:4;
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0 14px;
  border:1px solid var(--dar-ms-surface-border, #D8D3CC);
  background:var(--dar-ms-surface-background, #ffffff);
  color:var(--dar-ms-nav-text, var(--dar-ms-color-text, #1A1A1A));
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
}

.dar-ms-plugin-nav__toggle-icon{
  font-size:18px;
  line-height:1;
}

/* =========================================================
   7. MOBILE DRAWER
========================================================= */

.dar-ms-plugin-nav__drawer[hidden]{
  display:none !important;
}

.dar-ms-plugin-nav__drawer{
  position:fixed;
  inset:0;
  z-index:10020;
}

.dar-ms-plugin-nav__drawer-backdrop{
  position:absolute;
  inset:0;
  background:rgba(17,17,17,.42);
}

.dar-ms-plugin-nav__drawer-panel{
  position:absolute;
  inset-block:0;
  inset-inline-start:0;
  width:min(88vw, 360px);
  background:var(--dar-ms-surface-background, #ffffff);
  border-inline-end:1px solid var(--dar-ms-surface-border, #D8D3CC);
  box-shadow:0 16px 40px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  padding:18px;
  gap:18px;
}

.dar-ms-plugin-nav__drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.dar-ms-plugin-nav__drawer-brand{
  display:inline-flex;
  align-items:center;
  min-width:0;
  text-decoration:none;
}

.dar-ms-plugin-nav__drawer-close{
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid var(--dar-ms-surface-border, #D8D3CC);
  background:var(--dar-ms-surface-background, #ffffff);
  color:var(--dar-ms-nav-text, var(--dar-ms-color-text, #1A1A1A));
  font-size:28px;
  line-height:1;
  cursor:pointer;
}

.dar-ms-plugin-nav__drawer-menu{
  display:grid;
  gap:10px;
}

.dar-ms-plugin-nav__drawer-link{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:0 14px;
  border-radius:14px;
  text-decoration:none;
  border:1px solid var(--dar-ms-surface-border, #D8D3CC);
  background:color-mix(in srgb, var(--dar-ms-surface-background, #ffffff) 88%, transparent);
  color:var(--dar-ms-nav-text, var(--dar-ms-color-text, #1A1A1A));
  font-weight:700;
}

.dar-ms-plugin-nav__drawer-link.is-active{
  color:var(--dar-ms-nav-active, var(--dar-ms-color-primary, #B3262E));
  border-color:color-mix(in srgb, var(--dar-ms-nav-active, var(--dar-ms-color-primary, #B3262E)) 35%, var(--dar-ms-surface-border, #D8D3CC));
  background:color-mix(in srgb, var(--dar-ms-nav-active, var(--dar-ms-color-primary, #B3262E)) 8%, var(--dar-ms-surface-background, #ffffff));
}

.dar-ms-plugin-nav__drawer-link--cta{
  background:var(--dar-ms-nav-cta-bg, var(--dar-ms-nav-active, var(--dar-ms-color-primary, #B3262E)));
  color:var(--dar-ms-nav-cta-text, #ffffff);
  border-color:transparent;
}

.dar-ms-plugin-nav__drawer-link--subtle{
  color:color-mix(in srgb, var(--dar-ms-color-text, #1A1A1A) 76%, #777);
}

html.dar-ms-mobile-nav-open,
body.dar-ms-mobile-nav-open{
  overflow:hidden;
}

/* =========================================================
   8. RESPONSIVE NAV
   ---------------------------------------------------------
   Observación:
   En móvil el header queda compacto y sin saltos.
   El selector de idioma sigue visible; el menú desktop se oculta.
========================================================= */

@media (max-width: 1024px){
  .dar-ms-plugin-nav__inner{
    width:100%;
  }
}

@media (max-width: 920px){
  .dar-ms-plugin-nav__inner{
    gap:10px;
  }

  .dar-ms-plugin-nav__menu{
    gap:8px;
  }

  .dar-ms-plugin-nav__lang{
    min-width:36px;
    padding-inline:8px;
  }
}

@media (max-width: 900px){
  .dar-ms-plugin-nav__inner{
    width:100%;
    min-height:var(--dar-ms-nav-height-mobile, 62px);
    padding:10px var(--dar-ms-shell-mobile-padding, 10px);
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:8px;
  }

  .dar-ms-plugin-nav__brand,
  .dar-ms-plugin-nav__menu,
  .dar-ms-plugin-nav__lang-switcher,
  .dar-ms-plugin-nav__toggle{
    grid-column:auto;
    justify-self:auto;
  }

  .dar-ms-plugin-nav__brand{
    max-width:min(42vw, 180px);
  }

  .dar-ms-plugin-nav__brand-media,
  .dar-ms-plugin-nav__brand-mark{
    width:46px;
    height:46px;
    border-radius:14px;
  }

  .dar-ms-plugin-nav__brand-logo{
    max-width:min(140px, 100%);
    max-height:40px;
  }

  .dar-ms-plugin-nav__lang-switcher{
    justify-content:center;
    gap:4px;
  }

  .dar-ms-plugin-nav__lang{
    min-width:34px;
    height:34px;
    padding:0 8px;
    font-size:11px;
  }

  .dar-ms-plugin-nav__menu{
    display:none;
  }

  .dar-ms-plugin-nav__toggle{
    display:inline-flex;
    margin-inline-start:0;
  }
}

@media (max-width: 640px){
  .dar-ms-plugin-nav__inner{
    grid-template-columns:minmax(0,1fr) auto auto;
  }

  .dar-ms-plugin-nav__brand{
    max-width:min(46vw, 160px);
  }

  .dar-ms-plugin-nav__brand-logo{
    max-width:min(128px, 100%);
  }
}

/* =========================================================
   9. DIRECTIONAL CONTRACT
   ---------------------------------------------------------
   Regla crítica:
   RTL no toca el esqueleto.
   Solo afecta superficies textuales y el lado del drawer.
========================================================= */

.dar-ms-app-shell[dir="rtl"] .dar-ms-plugin-nav__inner,
.dar-ms-plugin-nav[dir="rtl"] .dar-ms-plugin-nav__inner,
.dar-ms-plugin-nav[data-dar-ms-nav-dir="rtl"] .dar-ms-plugin-nav__inner{
  direction:ltr;
}

.dar-ms-app-shell[dir="rtl"] .dar-ms-plugin-nav__menu,
.dar-ms-plugin-nav[dir="rtl"] .dar-ms-plugin-nav__menu,
.dar-ms-plugin-nav[data-dar-ms-nav-dir="rtl"] .dar-ms-plugin-nav__menu{
  margin-left:auto;
  margin-right:0;
  justify-content:flex-end;
}

.dar-ms-plugin-nav[dir="rtl"] .dar-ms-plugin-nav__lang-switcher,
.dar-ms-plugin-nav[data-dar-ms-nav-dir="rtl"] .dar-ms-plugin-nav__lang-switcher,
.dar-ms-plugin-nav[dir="rtl"] .dar-ms-plugin-nav__drawer-link,
.dar-ms-plugin-nav[data-dar-ms-nav-dir="rtl"] .dar-ms-plugin-nav__drawer-link,
.dar-ms-mobile-app-nav[dir="rtl"] .dar-ms-mobile-app-nav__item,
.dar-ms-mobile-app-nav[data-dar-ms-nav-dir="rtl"] .dar-ms-mobile-app-nav__item{
  direction:rtl;
  text-align:right;
}

.dar-ms-plugin-nav__drawer[dir="rtl"] .dar-ms-plugin-nav__drawer-panel,
.dar-ms-plugin-nav__drawer[data-dar-ms-nav-dir="rtl"] .dar-ms-plugin-nav__drawer-panel{
  inset-inline-start:auto;
  inset-inline-end:0;
  border-inline-end:none;
  border-inline-start:1px solid var(--dar-ms-surface-border, #D8D3CC);
}

.dar-ms-plugin-nav__drawer[dir="rtl"] .dar-ms-plugin-nav__drawer-head,
.dar-ms-plugin-nav__drawer[data-dar-ms-nav-dir="rtl"] .dar-ms-plugin-nav__drawer-head{
  flex-direction:row-reverse;
}

/* =========================================================
   10. MOBILE BOTTOM APP NAV
========================================================= */

@media (max-width: 900px){
  .dar-ms-app-shell--mobile-nav-bottom-bar .dar-ms-mobile-app-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:9999;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    border-top:1px solid color-mix(in srgb, var(--dar-ms-color-primary, #B3262E) 14%, #D8D3CC);
    background:#fff;
    box-shadow:0 -8px 22px rgba(0,0,0,.08);
  }

  .dar-ms-mobile-app-nav__item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:62px;
    padding:6px 8px 8px;
    color:#111;
    text-decoration:none;
    gap:4px;
  }

  .dar-ms-mobile-app-nav__item.is-active{
    font-weight:700;
    color:var(--dar-ms-nav-active, var(--dar-ms-color-primary, #B3262E));
    background:color-mix(in srgb, var(--dar-ms-color-primary, #B3262E) 8%, #ffffff);
  }

  .dar-ms-mobile-app-nav__icon{
    font-size:19px;
    line-height:1;
    color:currentColor;
  }

  .dar-ms-mobile-app-nav__label{
    font-size:12px;
    line-height:1.2;
  }
}


/* =========================================================
   7.4.9.1 – LANGUAGE SELECT CLEANUP
   ---------------------------------------------------------
   Observación:
   El selector de idioma superior deja de usar pastillas
   duplicadas y pasa a un único <select> compacto.
   Esto reduce ruido visual, evita duplicación estructural
   y mantiene el header estable en móvil y desktop.
========================================================= */

.dar-ms-plugin-nav__lang-switcher{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.dar-ms-plugin-nav__lang-select-wrap{
  position:relative;
  min-width:74px;
}

.dar-ms-plugin-nav__lang-select-wrap::after{
  content:"▾";
  position:absolute;
  inset-inline-end:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:11px;
  font-weight:800;
  color:var(--dar-ms-nav-text, var(--dar-ms-color-text, #1A1A1A));
  pointer-events:none;
}

.dar-ms-plugin-nav__lang-select{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-width:74px;
  height:44px;
  padding:0 36px 0 14px;
  border-radius:999px;
  border:1px solid var(--dar-ms-surface-border, #D8D3CC);
  background:#fff;
  color:var(--dar-ms-nav-text, var(--dar-ms-color-text, #1A1A1A));
  font-size:12px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  box-shadow:none;
}

.dar-ms-plugin-nav__lang-select:hover,
.dar-ms-plugin-nav__lang-select:focus{
  border-color:color-mix(in srgb, var(--dar-ms-nav-active, var(--dar-ms-color-primary, #B3262E)) 28%, var(--dar-ms-surface-border, #D8D3CC));
  outline:none;
}

@media (max-width: 900px){
  .dar-ms-plugin-nav__lang-select-wrap{
    min-width:68px;
  }

  .dar-ms-plugin-nav__lang-select{
    min-width:68px;
    height:36px;
    padding:0 30px 0 12px;
    font-size:11px;
  }

  .dar-ms-plugin-nav__lang-select-wrap::after{
    inset-inline-end:10px;
    font-size:10px;
  }
}


/* =========================================================
   8.6.9.4 – NAV COLOR STATE CONTRACT
   ---------------------------------------------------------
   - explicit text color for top menu
   - explicit CTA contrast
   - same contract for drawer/mobile
========================================================= */

.dar-ms-plugin-nav__link,
.dar-ms-plugin-nav__link:visited,
.dar-ms-plugin-nav__toggle,
.dar-ms-plugin-nav__toggle:visited,
.dar-ms-plugin-nav__drawer-link,
.dar-ms-plugin-nav__drawer-link:visited,
.dar-ms-plugin-nav__lang-select,
.dar-ms-plugin-nav__lang-select:visited{
  color:var(--dar-ms-nav-text, var(--dar-ms-color-text, #1A1A1A));
}

.dar-ms-plugin-nav__link-icon,
.dar-ms-plugin-nav__drawer-link .dar-ms-plugin-nav__link-icon{
  color:currentColor;
}

.dar-ms-plugin-nav__link.is-active,
.dar-ms-plugin-nav__drawer-link.is-active{
  color:var(--dar-ms-nav-active, var(--dar-ms-color-primary, #B3262E));
}

.dar-ms-plugin-nav__link--cta,
.dar-ms-plugin-nav__link--cta:visited,
.dar-ms-plugin-nav__link--cta:hover,
.dar-ms-plugin-nav__link--cta:focus,
.dar-ms-plugin-nav__link--cta.is-active,
.dar-ms-plugin-nav__drawer-link--cta,
.dar-ms-plugin-nav__drawer-link--cta:visited,
.dar-ms-plugin-nav__drawer-link--cta:hover,
.dar-ms-plugin-nav__drawer-link--cta:focus,
.dar-ms-plugin-nav__drawer-link--cta.is-active{
  color:var(--dar-ms-nav-cta-text, #ffffff);
}

.dar-ms-plugin-nav__link--subtle,
.dar-ms-plugin-nav__drawer-link--subtle{
  color:color-mix(in srgb, var(--dar-ms-nav-text, var(--dar-ms-color-text, #1A1A1A)) 76%, #777);
}

@media (max-width: 900px){
  .dar-ms-plugin-nav__toggle{
    color:var(--dar-ms-nav-text, var(--dar-ms-color-text, #1A1A1A));
  }
}


/* =========================================================
   8.6.9.6 – CTA LABEL COLOR ENFORCEMENT
   ---------------------------------------------------------
   - force visible label/icon contrast for publish CTA
   - same contract for drawer
========================================================= */

.dar-ms-plugin-nav__link--cta,
.dar-ms-plugin-nav__link--cta:visited,
.dar-ms-plugin-nav__link--cta:hover,
.dar-ms-plugin-nav__link--cta:focus,
.dar-ms-plugin-nav__link--cta.is-active,
.dar-ms-plugin-nav__link--cta .dar-ms-plugin-nav__link-label,
.dar-ms-plugin-nav__link--cta .dar-ms-plugin-nav__link-icon,
.dar-ms-plugin-nav__drawer-link--cta,
.dar-ms-plugin-nav__drawer-link--cta:visited,
.dar-ms-plugin-nav__drawer-link--cta:hover,
.dar-ms-plugin-nav__drawer-link--cta:focus,
.dar-ms-plugin-nav__drawer-link--cta.is-active,
.dar-ms-plugin-nav__drawer-link--cta .dar-ms-plugin-nav__drawer-link-label,
.dar-ms-plugin-nav__drawer-link--cta .dar-ms-plugin-nav__drawer-link-icon{
  color:var(--dar-ms-nav-cta-text, #ffffff) !important;
}


/* v9.8.8 — portal overlay interlock hardening */
html.dar-ms-portal-filter-panel-open .dar-ms-mobile-app-nav,
body.dar-ms-portal-filter-panel-open .dar-ms-mobile-app-nav,
html.dar-ms-portal-area-modal-open .dar-ms-mobile-app-nav,
body.dar-ms-portal-area-modal-open .dar-ms-mobile-app-nav{
  pointer-events:none;
  user-select:none;
  touch-action:none;
}

html.dar-ms-portal-filter-panel-open .dar-ms-plugin-nav__drawer,
body.dar-ms-portal-filter-panel-open .dar-ms-plugin-nav__drawer,
html.dar-ms-portal-area-modal-open .dar-ms-plugin-nav__drawer,
body.dar-ms-portal-area-modal-open .dar-ms-plugin-nav__drawer{
  pointer-events:none;
  user-select:none;
}


/* v9.8.8.7 — shell/portal mobile close interlock */
.dar-ms-plugin-nav__drawer[hidden]{
  display:none !important;
}

html.dar-ms-portal-filter-panel-open .dar-ms-plugin-nav__drawer,
body.dar-ms-portal-filter-panel-open .dar-ms-plugin-nav__drawer,
html.dar-ms-portal-area-modal-open .dar-ms-plugin-nav__drawer,
body.dar-ms-portal-area-modal-open .dar-ms-plugin-nav__drawer{
  display:none !important;
  visibility:hidden !important;
}

html.dar-ms-portal-filter-panel-open .dar-ms-mobile-app-nav,
body.dar-ms-portal-filter-panel-open .dar-ms-mobile-app-nav,
html.dar-ms-portal-area-modal-open .dar-ms-mobile-app-nav,
body.dar-ms-portal-area-modal-open .dar-ms-mobile-app-nav{
  visibility:hidden;
}


/* =========================================================
   v9.9.15.15 – HEADER ROW NORMALIZATION
   - search sale del primary header
   - menú + idioma quedan en el mismo carril
   - no quedan restos ni bandas vacías
========================================================= */
@media (min-width: 901px){
  .dar-ms-plugin-nav__inner{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:18px;
  }

  .dar-ms-plugin-nav__actions{
    grid-column:2;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
  }

  .dar-ms-plugin-nav__menu{
    grid-column:auto;
    min-width:0;
    width:auto;
    flex:1 1 auto;
    justify-self:auto;
    justify-content:flex-end;
    gap:12px;
    flex-wrap:nowrap;
  }

  .dar-ms-plugin-nav__lang-switcher{
    grid-column:auto;
    justify-self:auto;
    align-self:center;
    justify-content:flex-end;
    flex:0 0 auto;
    margin:0;
    gap:0;
  }

  .dar-ms-plugin-nav__lang-select-wrap{
    min-width:72px;
  }

  .dar-ms-plugin-nav__lang-select{
    min-width:72px;
    height:44px;
    padding:0 32px 0 14px;
    border-radius:999px;
  }
}

@media (max-width: 900px){
  .dar-ms-plugin-nav__actions{
    display:contents;
  }

  .dar-ms-plugin-nav__lang-switcher{
    justify-self:end;
  }
}