/* ==========================================================================
1) Variables base
========================================================================== */
:root{
  --color-primary: #2196F3;
  --color-primary-hover: #1976d2;
  --color-acento: #FA1188;
  --color-text: #1f2937;
  --color-bg: #ffffff;
  --color-border: #e5e7eb;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 10px 28px rgba(0,0,0,.10);
  --radius: 12px;
  --radius-sm: 10px;
  --transition: 160ms ease;
}

/* Box sizing coherente */
.menu-item-perfil, .menu-item-perfil *{ box-sizing: border-box; }

/* ==========================================================================
2) Wrapper en el header
========================================================================== */
.menu-item-perfil{ position: relative; z-index: 1000; overflow: visible;  }
.perfil-menu-contenedor{
  display:flex; align-items:center; justify-content:flex-end;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}


.perfil-menu-usuario{ position:relative; display:inline-block; }

/* ==========================================================================
3) Trigger (avatar + email + flecha)
========================================================================== */
.perfil-menu-trigger{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background: var(--color-bg);
  border:1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor:pointer;
  transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.perfil-menu-trigger:hover{ background:#f7f9fc; box-shadow: var(--shadow-md); }
.perfil-menu-trigger:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}

/* Avatar / inicial */
.perfil-avatar-menu,
.avatar-inicial{
  width:36px; height:36px; border-radius:50%; object-fit:cover; flex:0 0 36px;
}
.avatar-inicial{
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#fff; background:var(--color-acento);
  font-size:15px;
}

/* Email + flecha */
.perfil-menu-email{
  font-size:14px; font-weight:600; color:var(--color-text);
  max-width: 200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dropdown-arrow{
  font-size:12px; color:#9aa3af; transition: transform var(--transition);
}

/* Rotación de flecha cuando está abierto
   (funciona si el contenedor recibe .menu-open en JS, y también con :has() en navegadores modernos) */
.perfil-menu-usuario.menu-open .dropdown-arrow{ transform: rotate(180deg); }
@supports(selector(:has(*))){
  .perfil-menu-usuario:has(.perfil-menu-desplegable.active) .dropdown-arrow{ transform: rotate(180deg); }
}

/* ==========================================================================
4) Dropdown integrado (mismo ancho que el trigger)
========================================================================== */

.perfil-menu-desplegable{
  position: absolute !important;
  top: 100% !important;        /* debajo del trigger */
  right: 0 !important;         /* alineado al borde derecho del trigger */
  /* NO left, NO width:max-content, NO min-width:100% */
  min-width: 100%; 

  margin-top: 8px;             /* separa de la línea del header */
  padding: 6px;                /* esqueleto */
  list-style: none;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
  z-index: 9999;
}

.perfil-menu-desplegable a{
  white-space: normal;        /* permite wrap del texto */
  word-break: break-word;     /* por si hay emails largos */
}

.perfil-menu-desplegable.active{
  opacity: 1;
  pointer-events: auto;
}


/* Si hay muchos ítems, que scrollee sin crecer infinito */
.perfil-menu-desplegable{
  max-height: 260px; overflow:auto;
  scrollbar-width: thin; /* Firefox */
}
.perfil-menu-desplegable::-webkit-scrollbar{ height:8px; width:8px; }
.perfil-menu-desplegable::-webkit-scrollbar-thumb{ background:#e1e5ea; border-radius:10px; }

/* Items */
.perfil-menu-desplegable li + li{ margin-top:4px; }
.perfil-menu-desplegable a{
  display:block; padding:10px 12px; border-radius: var(--radius-sm);
  color:#111827; text-decoration:none; line-height:1.25;
  transition: background var(--transition), color var(--transition);
}
.perfil-menu-desplegable a:hover{ background:#f6f8fa; }
.perfil-menu-desplegable a:active{ background:#eef1f5; }
.perfil-menu-desplegable a:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}

/* Borde “pegado” con el trigger cuando está abierto (look integrado) */
.perfil-menu-usuario.menu-open .perfil-menu-trigger{
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* ==========================================================================
5) Responsivo
========================================================================== */
@media (max-width: 800px){
  .perfil-menu-email{ max-width:160px; }
}
@media (max-width: 640px){
  .perfil-menu-desplegable{
    top: 100% !important;
    margin-top: 8px !important;
    width: 100%;
  }
}


/* ==========================================================================
6) Mejoras móviles específicas (Cambiar contraseña)
========================================================================== */
@media (max-width: 640px){
  #emp-pass-grid{ grid-template-columns:1fr !important; gap:14px !important; align-items:start !important; }
  #emp-cambiar-pass{ width:100%; margin-top:2px; }
  #emp-pass-grid .toggle-password-perfil{ white-space:nowrap; font-size:12px; height:auto; }
  #emp-pass-grid .password-wrapper input{ min-height:46px; padding-right:86px; }
}








/* ====== Ítems "MI CV" y "CERRAR SESIÓN" en MENÚ MÓVIL — compacto como los de arriba ====== */
@media (max-width: 991px) {

  /* quita cualquier borde/margen extra que estaba generando huecos */
  li.ee-mobile-only {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  li.ee-mobile-only:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important; /* sin separador adicional */
  }
  li.ee-mobile-only + li.ee-mobile-only {
    margin-top: 0 !important;   /* sin “gap” entre MI CV y CERRAR SESIÓN */
  }

  /* mismo look que los 3 items superiores */
  li.ee-mobile-only > a {
    display: block;
    padding: 10px 20px !important;   /* más ceñido (ajustado) */
    line-height: 1.2 !important;     /* reduce altura visual */
    font-weight: 400 !important;     /* sin negrita */
    text-transform: uppercase;
    letter-spacing: normal !important;
    color: inherit !important;
    text-decoration: none !important;
    margin: 0 !important;            /* elimina cualquier separación residual */
    border: 0 !important;
  }
}