/* ==================================================================
   Barra superior de la app de Erudid (template-parts/header-app.php)
   Catálogo, página del curso, búsqueda, soporte, páginas y 404.
   La carga header.php. Clases "ea-" para no chocar con el resto del tema.
   ================================================================== */

.ea-header {
  --ea-yellow: #FFC83D;
  --ea-yellow-soft: #FFF4D1;
  --ea-ink: #14284B;
  --ea-text: #2A2838;
  --ea-muted: #77758A;
  --ea-line: #ECEAF3;
  --ea-white: #FFFFFF;
  background: var(--ea-ink); position: sticky; top: 0; z-index: 50; width: 100%;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
:where(.ea-header), :where(.ea-header) * { box-sizing: border-box; }
:where(.ea-header) a { text-decoration: none; }
.ea-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; height: 72px; display: flex; align-items: center; gap: 26px; }

.ea-logo { display: flex; align-items: center; flex-shrink: 0; }
.ea-logo img { display: block; height: 32px; width: auto; }
.ea-logo-fb { display: none; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ea-white); }
.ea-logo-fb i { font-style: normal; color: var(--ea-yellow); }

/* Explora: al pasar el mouse se levanta con sombra, como los botones del panel */
/* Igual en todas las páginas: fondo suave y línea amarilla */
.ea-explora {
  font-size: 14px; font-weight: 600; color: var(--ea-white); padding: 8px 12px; border-radius: 10px; flex-shrink: 0;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 -2px 0 var(--ea-yellow);
  transition: transform .12s, box-shadow .12s, background .15s, color .15s;
}
.ea-explora:hover { background: rgba(255, 255, 255, .12); }
.ea-explora:hover { transform: translate(-2px, -2px); box-shadow: inset 0 -2px 0 var(--ea-yellow), 4px 4px 0 rgba(0, 0, 0, .3); }
.ea-explora:active { transform: translate(1px, 1px); box-shadow: inset 0 -2px 0 var(--ea-yellow); }
.ea-explora:focus-visible { outline: 2px solid var(--ea-yellow); outline-offset: 2px; }

.ea-search { flex: 1; max-width: 440px; margin: 0 auto; position: relative; }
.ea-search input {
  width: 100%; height: 44px; border: 1px solid #2C4069; background: #1C3360; color: var(--ea-white); border-radius: 14px;
  padding: 0 44px 0 18px; font: inherit; font-size: 14px; outline: none; transition: border-color .15s;
}
.ea-search input::placeholder { color: #8E9CB8; }
.ea-search input:focus { border-color: var(--ea-yellow); }
.ea-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }
.ea-search button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: none; background: none; color: #8E9CB8; display: grid; place-items: center; cursor: pointer; border-radius: 8px; }
.ea-search button:hover { color: var(--ea-white); }

.ea-help { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: #B3C0D8; flex-shrink: 0; transition: color .15s; }
.ea-help:hover, .ea-help.is-on { color: var(--ea-white); }

/* Perfil */
.ea-profile { position: relative; flex-shrink: 0; }
.ea-user {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 14px; border: none;
  background: rgba(255, 255, 255, .08); color: #B3C0D8; cursor: pointer; font: inherit; transition: background .15s, color .15s;
}
.ea-user:hover, .ea-user[aria-expanded="true"] { background: rgba(255, 255, 255, .14); color: var(--ea-white); }
.ea-user svg { transition: transform .2s; }
.ea-user[aria-expanded="true"] svg { transform: rotate(180deg); }
.ea-avatar { width: 34px; height: 34px; border-radius: 10px; background: var(--ea-yellow); color: var(--ea-ink); display: grid; place-items: center; font-weight: 800; font-size: 14px; flex-shrink: 0; text-transform: uppercase; }
.ea-avatar--ink { background: var(--ea-ink); color: var(--ea-yellow); width: 38px; height: 38px; border-radius: 11px; }

.ea-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); width: 270px; background: var(--ea-white); border: 2px solid var(--ea-line);
  border-radius: 18px; box-shadow: 0 18px 40px rgba(20, 40, 75, .12); padding: 8px; z-index: 60;
}
.ea-dropdown.hidden { display: none; }
.ea-dropdown__head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 14px; border-bottom: 1px solid var(--ea-line); margin-bottom: 6px; }
.ea-dropdown__head > div { min-width: 0; }
.ea-dropdown__head b, .ea-dropdown__head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ea-dropdown__head b { font-size: 14px; color: var(--ea-ink); }
.ea-dropdown__head small { font-size: 12px; color: var(--ea-muted); }
.ea-dropdown a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ea-text); transition: background .15s; }
.ea-dropdown a svg { color: var(--ea-muted); flex-shrink: 0; }
.ea-dropdown a:hover { background: var(--ea-yellow-soft); color: var(--ea-ink); }
.ea-dropdown a:hover svg { color: var(--ea-ink); }
.ea-dropdown a.is-danger:hover { background: #FFEAE3; color: #C2410C; }
.ea-dropdown a.is-danger:hover svg { color: #C2410C; }
.ea-dropdown hr { border: none; border-top: 1px solid var(--ea-line); margin: 6px 0; }

/* Acceder (sin sesión) */
.ea-btn {
  height: 44px; padding: 0 20px; border-radius: 14px; background: var(--ea-yellow); color: var(--ea-ink);
  font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .18); transition: transform .12s, box-shadow .12s;
}
.ea-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(0, 0, 0, .18); }

@media (max-width: 960px) {
  .ea-help span { display: none; }
}
@media (max-width: 640px) {
  .ea-wrap { padding: 0 16px; gap: 12px; }
  .ea-search { display: none; }
  .ea-help { margin-left: auto; }
  .ea-logo img { height: 28px; }
}