:root {
  --nav-h: 120px;
  --nav-hm: 60px;
  --bg: #ff6699 ; /*0b1220;*/
  --bg-2: #f88eb1ff ; /*111828;*/
  --fg: #fff; /*e6eaf2;*/
  --muted: #a8b3cf;
  --accent: #3b82f6;
  --ring: rgba(59,130,246,.4);
  --cta-bg: var(--bg-2);/*#1d66d1;*/
  --cta-bg-hover: var(--bg);/*#1554b7;*/
  --cta-text: #fff;
} 

/***************** hacer que la barra de menu ocupe todo el espaio ******** */
/* 1) Quita el margen por defecto del navegador */
html, body { margin: 0; padding: 0; }

/* 2) Fija la barra al viewport y que toque los lados */
.navbar{
  position: fixed;   /* en lugar de sticky */
  /*position: sticky; */
  top: 0;
  left: 0;
  right: 0;          /* llena todo el ancho */
  width: 100%;
  z-index: 9999;     /* por encima del contenido */
  height: var(--nav-h);
  /*background: linear-gradient(0deg, var(--bg-2), var(--bg));*/
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 2px 10px rgba(255, 255, 255, 1);
}

/* 3) Reserva espacio para que el contenido no quede oculto bajo la barra */
@media (min-width: 769px){
  body{ padding-top: var(--nav-h); }      /* 120px en desktop */
}
@media (max-width: 768px){
  body{ padding-top: var(--nav-hm); }     /* 60px en móvil */
}
/* Base */
.navbar * { box-sizing: border-box; }
.navbar a { text-decoration: none; color: inherit; }
.navbar button { background: none; border: 0; color: inherit; cursor: pointer; }


.nav-inner {
  /*max-width: 1400px; */
  margin: 0 auto; 
  height: 100%;
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  padding: 0 16px; 
  gap: 12px;
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo {
  height: 120px; border-radius: 10px; display: inline-grid; place-items: center;
  background: radial-gradient(60% 60% at 50% 40%, #60a5fa 0%, #2563eb 70%, #1f2937 100%);
  box-shadow: inset 0 0 10px rgba(255,255,255,.15), 0 4px 12px rgba(0,0,0,.3);
  font-weight: 900; letter-spacing: .5px;
}
.brand-name { font-weight: 700; letter-spacing: .3px; }


.nav-item {
  position: relative;
  display: flex; align-items: flex-end; /* << ancla cada item al fondo */
  height: var(--nav-h);
}
.nav-link {
  display: flex; 
  align-items: flex-end; /* << ancla el texto al fondo */
  padding: 8px 12px; 
  border-radius: 10px; 
  font-weight: 500; 
  color: var(--fg);
}
.nav-link:hover { 
  color: var(--fg); 
  background: var(--bg-2); width: 100%;}
.nav-link.active {
  color: var(--fg); 
  background: rgba(59,130,246,.15); 
  outline: 2px solid transparent;
  box-shadow: 255 255 255 2px red;
}

/* Acciones derechas (perfil) */
.nav-actions { display: flex; align-items: center; gap: 10px; }
.user { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 10px; }
.user:hover { background: rgba(255,255,255,1); }
.user img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.user .name { font-size: 14px; color: var(--fg); }
.user .role { font-size: 12px; color: var(--muted); }

/* Botón hamburguesa */
.nav-toggle { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  width: 40px; 
  height: 40px; 
  border-radius: 10px; }
.nav-toggle:hover { background: rgba(255,255,255,.10); }

/* Submenu */
.has-submenu > .nav-link .chev { 
  display: inline-block; 
  margin-left: 6px; 
  transition: transform .2s ease; }
.submenu {
  list-style: none; 
  margin: 0; 
  padding: 6px 0;
  position: absolute; 
  top: calc(100% - 8px); 
  left: 0; /* sin hueco */
  background: var(--bg); 
  border: 1px solid #fff; 
  border-radius: 10px;
  display: none; 
  min-width: 180px; 
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.35); 
  z-index: 10000;
}
.submenu::before { 
  content: ""; 
  position: absolute; 
  left: 0; 
  right: 0; 
  top: -8px; 
  height: 8px; }
.submenu-link { 
  display: block; 
  padding: 8px 12px; 
  color: var(--muted); }
.submenu-link:hover { 
  background: var(--bg-2); 
  color: var(--fg); }

  /* Base: submenú oculto */
nav li.has-submenu > .submenu { display: none; }

/* Abrir cuando el <li> tiene .open (clic o teclado) */
nav li.has-submenu.open > .submenu { display: block; }

/* Mostrar en escritorio por hover/focus */


/* Estado abierto en móvil 
.has-submenu.is-open > .submenu { display: block; }
.has-submenu.is-open > .nav-link .chev,
.has-submenu:hover > .nav-link .chev,
.has-submenu:focus-within > .nav-link .chev { transform: rotate(180deg); }
*/
/* Accesibilidad */
.navbar :focus-visible { 
  outline: 2px solid var(--bg); 
  outline-offset: 2px; 
  border-radius: 8px; }
.nombre-completo{
        color: rgb(255, 255, 255);
        font-weight: 600;
    }
.apellidos-completo {
        color: rgb(255, 214, 230);
        font-weight: 100;
    }

/* Móvil */

  /* nueva versión movil */

 /* ===== FIX HAMBURGUESA (MÓVIL) — al final del CSS ===== */
@media (max-width: 767px) {
  .navbar {
      height: var(--nav-hm);

  }
  .navbar .nav-inner .brand h5 { display:none; } 
    
  .nav-inner { height: var(--nav-hm); }       /* usa la altura móvil si quieres */
  .nav-toggle { position: relative; z-index: 10001; }


  /* Submenu debajo en móvil (acordeón) */
  .has-submenu { display: block; }
  .has-submenu > .nav-link {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%;
  }
  .submenu {
    position: static; 
    width: 100%;
    margin-top: 4px;
    border: 1px solid #fff; 
    border-radius: 10px;
    box-shadow: none;
    display: block; 
    overflow: hidden; 
    max-height: 0; 
    transition: max-height .25s ease;
    padding: 0;
    
        /* acordeón */
    display: block;           /* no uses display:none para animar */
    overflow: hidden;
    max-height: 0;            /* cerrado por defecto */
    transition: max-height .25s ease;
    padding: 0;               /* más compacto */
  }
/* Flecha que rota por estado real (no por :hover) */
  .has-submenu .chev { transition: transform .2s ease; }
  .has-submenu > .nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }
  /* Compacto */
  .nav-item { height: auto; align-items: stretch; }
  .nav-link { padding-bottom: 0; }
  /************* nuevo *********** */
/* Indenta el bloque del submenú */
  .submenu {
    padding-left: 16px;              /* <- ajusta a tu gusto (12–24px) */
    border-left: 2px solid rgba(0,0,0,0.08); /* guía visual suave (opcional) */
    margin-top: 6px;
  }

  /* Indenta cada subitem y mejora el área clicable */
  .submenu > li > a {
    display: block;
    position: relative;
    padding: 10px 12px 10px 20px;    /* left extra para la “bala” */
  }


  

} 

/*************** fin 767 movil ******** */



/********************* Escritorio *****************/
@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .submenu {
    position: absolute;
    top: calc(100% - 8px);
    left: 0;
    display: none;           /* se muestra por hover/focus arriba */
    max-height: none;
    overflow: visible;
    padding: 6px 0;
  }



 
}

/****************  fin min-width 768px ******************* */

/****************  max-width 768px ******************* */

@media (max-width: 768px){
  nav .brand img { 
    display: none; 
  }
    nav .brand h1 { 
    font-size: 1rem;
  }
}

/****************  fin max-width 768px ******************* */
  

   /****************** cta */

/* Apariencia base tipo botón */
nav a.cta{
  display:inline-block;
  background:var(--bg-2);
  color:var(--fg);
  font-weight:700;
  padding:10px 14px;
  border-radius:9999px;
  line-height:16px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 0 1px white;
  text-decoration:none;
  transition:transform .08s ease, box-shadow .12s ease, background-color .12s ease;
}
nav a.cta:hover,
nav a.cta:focus-visible{
  background:var(--cta-bg);
  text-decoration:none;
  outline:2px solid transparent;
  box-shadow:0 0 0 3px white;
}
nav a.cta:active{ transform:translateY(1px); }

/* Desktop: empuja la CTA a la derecha si el <ul> es flex */
@media (min-width:769px){
  nav ul{ 
    display:flex; 
    align-items:center; 
    gap:.5rem; }
  nav li.nav-cta{ margin-left:auto; }  /* la CTA queda al extremo derecho */
    nav li.has-submenu { position: relative; }
  nav li.has-submenu > .submenu{
    position: absolute; 
    left: 0; 
    top: 100%;
    min-width: 220px;
    background: #121a2b; 
    border: 1px solid #24314b; 
    border-radius: 10px;
    padding: 8px; 
    margin-top: 6px;
  }
  /* Abre SOLO cuando el <li> tiene .open (clic) */

  nav li.has-submenu.open > .submenu { display: block; }
/* Anula cualquier apertura por hover/focus */
/* Desktop: menú visible y hamburguesa oculta */

  nav .hamburger{ display:none; }
  nav .menu{ 
    display:flex !important; 
    flex-direction:row; 
    align-items:center; 
    gap:.75rem; }


}

/* Móvil: que parezca botón grande, a ancho completo y al final del menú */
@media (max-width:768px){
  nav li.nav-cta{ 
    order:100;    

}            /* baja al final si tu menú es flex/columna */
  nav a.cta{
    text-align: center;

    width:100%;
    /*padding:12px 16px;*/
    margin-top:8px;
    line-height: 16px;
  }
    /* En móvil sigue en flujo y controlado por .open */

    nav li.has-submenu.open > .submenu { display: block; }

    /* Móvil: hamburguesa visible, menú oculto */

    nav .hamburger{ display:block; cursor:pointer; }
    nav .menu{ display:none; flex-direction:column; gap:.5rem; }
    nav .menu.is-open{ display:flex; }

    /* Evita scroll de fondo cuando el menú está abierto */
    body.scroll-lock{ overflow:hidden; }

    /* Overlay para cerrar al pulsar fuera del nav */
    .menu-overlay{ display:none; }
    .menu-overlay.show{
        display:block; position:fixed; inset:0; background:rgba(0,0,0,.35);
        z-index:1000;

}

/* Accesibilidad: sin animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  nav a.cta{ transition:none; }
}
/* Base: submenú cerrado */
nav li.has-submenu > .submenu { display: none; }

/* nueva versión */

  /* Asegura que el nav quede por encima del overlay */
  nav{ position:relative; z-index:1001; }
}


/* ultima versión */
/* ===== NAV MÓVIL (hamburguesa + overlay) ===== */
@media (max-width: 768px){
  /* barra compacta */
  .navbar{ height: var(--nav-hm); }
  .nav-inner{ height: var(--nav-hm); align-items:center; }
  .brand img{ display:none; } /* ocultar logo imagen en móvil */

  /* botón */
  nav .hamburger{ display:block; cursor:pointer; z-index:1001; }

  /* contenedor del menú (overlay) */
  nav .menu{
    display:none;
  }
  nav .menu.is-open{
    display:grid;
    position:fixed;
    left:10px; right:10px; top: calc(var(--nav-hm) + 6px);
    background: var(--bg);
    border: 1px solid #fff;
    border-radius: 12px;
    padding: 18px;
    gap: 6px;
    max-height: calc(100vh - var(--nav-hm) - 20px);
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    z-index:1001;
    box-shadow: 0 8px 20px rgba(255,255,255,1);
  }

  /* overlay para cerrar tocando fuera */
  .menu-overlay{ display:none; }
  .menu-overlay.show{
    display:block; 
    position:fixed; 
    inset:0;
    background: rgba(0,0,0,.35); 
    z-index:1000;
  }
  body.scroll-lock{ overflow:hidden; }

  /* submenú tipo acordeón */
  .has-submenu > .nav-link{
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    width:100%;
  }
  .submenu{
    position:static;
    display:block;           /* necesario para animar altura */
    overflow:hidden;
    padding:0; 
    margin-top:6px;
    border:1px solid #fff; 
    border-radius:10px;
    max-height:0;            /* cerrado */
    transition: max-height .25s ease;
  }
  /* usamos .open (no .is-open) que pone tu JS */
  .has-submenu.open > .submenu{ max-height: 480px; }

  /* indent visual */
  .submenu{ padding-left:16px; border-left:2px solid rgba(0,0,0,.08); }
  .submenu > li > a{ display:block; position:relative; padding:10px 12px 10px 20px; }

  /* chevron por estado real */
  .has-submenu .chev{ transition:transform .2s ease; }
  .has-submenu > .nav-link[aria-expanded="true"] .chev{ transform: rotate(180deg); }

  /* CTA ancho completo al final */
  nav li.nav-cta{ order:100; }
  nav a.cta{ display:block; width:100%; text-align:center; margin-top:8px; line-height:16px; }
}

/* ===== NAV ESCRITORIO (dropdown por clic con .open) ===== */
@media (min-width: 769px){
  nav .hamburger{ display:none; }
  nav .menu{ display:flex !important; flex-direction:row; align-items:center; gap:.75rem; }

  /* sólo mostrar submenú cuando el <li> tiene .open */
  nav li.has-submenu > .submenu{
    position:absolute; left:0; top:100%;
    min-width:220px;
    background: var(--bg);/*#121a2b; */
    border:1px solid var(--bg-2);/*#24314b; */
    border-radius:10px;
    padding:8px; margin-top:6px;
    display:none;
    z-index:10000;
  }
  nav li.has-submenu.open > .submenu{ display:block; }

  /* anular hover/focus para que no reabra solo */
  nav li.has-submenu:not(.open):hover > .submenu,
  nav li.has-submenu:not(.open):focus-within > .submenu{ display:none !important; }

  /* chevron sólo por estado (no por hover) */
  .has-submenu > .nav-link[aria-expanded="true"] .chev{ transform: rotate(180deg); }
    /* usa el que tengas: .menu o .nav-list */
  .menu,
  .nav-list{
    padding-bottom: 14px;   /* empuja todo el bloque 20px hacia arriba */
  }

  /* opcional: evita “pegar” el texto al fondo dentro de cada item */
  .nav-item,
  .nav-link{
    align-items: flex-end;    /* si los tenías en flex-end, céntralos */
  }
  /* ===== Subrayado en activo + hover (solo desktop, nivel superior) ===== */

  /* Asegura posicionamiento para el pseudo-elemento */
  .menu > .nav-item > .nav-link{ position: relative; }

  /* Base: sin línea visible */
  .menu > .nav-item > .nav-link::after{
    content:"";
    position:absolute;
    left:10px;               /* ancho de la línea: ajusta con left/right */
    right:10px;
    bottom:6px;              /* distancia al borde inferior del link */
    height:0;
    background:transparent;
    border-radius:2px;
    transition:height .12s ease, background-color .12s ease;
  }

  /* Activo persistente */
  .menu > .nav-item > .nav-link.active::after,
  .menu > .nav-item > .nav-link[aria-current="page"]::after{
    height:3px;
    background:#fff;
  }

  /* Abierto por clic (padre con submenú) */
  .menu > .nav-item.has-submenu.open > .nav-link::after{
    height:1.5px;
    background:#fff;
  }

  /* >>> Hover / foco accesible (añadido) */
  .menu > .nav-item > .nav-link:hover::after,
  .menu > .nav-item > .nav-link:focus-visible::after{
    height:1.5px;
    background:#fff;
  }

  /* Opcional: si NO quieres subrayar la CTA tipo botón */
  .nav-cta > .nav-link.cta::after{ display:none; }
}



/* Móvil: sin subrayado */
@media (max-width: 768px){
  .menu > .nav-item > .nav-link::after{ display:none !important; }
}