/* ==========================================================================
   Controles de cabecera — medida unica para todo el sitio
   --------------------------------------------------------------------------
   La cabecera es la misma pieza en la portada, las paginas de proyecto, el
   acceso y el panel; solo cambia QUE va a izquierda y derecha. Los tamanos, en
   cambio, venian de tres hojas distintas y no coincidian:

       portada   idioma  32 px de alto · radio 50px  · borde .67px
       portada   sesion  42 px de alto · radio 30px  · borde 1.33px
       panel     idioma  40 px de alto · radio 999px

   Ni siquiera coincidian entre si dentro de la misma cabecera. Este archivo es
   la unica fuente de la medida y lo cargan las cuatro vistas, de modo que
   cualquier ajuste futuro se hace en un solo sitio.
   ========================================================================== */

:is(.editorial-header, .admin-header) :is(.lang-toggle, .nav-login, .nav-cta, .admin-public-link) {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; min-height: 40px; padding: 0 1.05rem;
  border-radius: 999px; border-width: 1px; border-style: solid;
  font-size: .8rem; font-weight: 600; letter-spacing: .01em;
  gap: .45rem; white-space: nowrap; text-decoration: none;
  box-sizing: border-box;
}

/* La campana y el boton de menu son cuadrados: misma altura, ancho igual. */
:is(.editorial-header, .admin-header) :is(.task-notification-btn, .mobile-menu-btn) {
  width: 40px; height: 40px; min-height: 40px; padding: 0;
  box-sizing: border-box;
}

/* La ficha de perfil lleva avatar, asi que solo se le fija la altura. */
:is(.editorial-header, .admin-header) .profile-chip {
  height: 40px; min-height: 40px; padding: 0 .85rem 0 .35rem;
  border-radius: 999px; border-width: 1px; border-style: solid;
  font-size: .8rem; box-sizing: border-box;
}
:is(.editorial-header, .admin-header) .profile-chip .avatar {
  width: 30px; height: 30px; font-size: .72rem;
}

/* Iconos al mismo tamano en todos los controles. */
:is(.editorial-header, .admin-header) :is(.lang-toggle, .nav-login, .nav-cta, .admin-public-link) i {
  font-size: .82rem;
}
:is(.editorial-header, .admin-header) .lang-toggle span { font-size: .8rem; line-height: 1; }

/* Separacion uniforme entre controles. */
:is(.editorial-header, .admin-header) :is(.nav-actions, .nav-fixed) { gap: .6rem; }

/* En movil los objetivos tactiles suben a 44px, que es el minimo comodo. */
@media (max-width: 600px) {
  :is(.editorial-header, .admin-header)
    :is(.lang-toggle, .nav-login, .nav-cta, .admin-public-link,
        .task-notification-btn, .mobile-menu-btn, .profile-chip) {
    height: 44px; min-height: 44px;
  }
  :is(.editorial-header, .admin-header) :is(.task-notification-btn, .mobile-menu-btn) { width: 44px; }
  :is(.editorial-header, .admin-header) :is(.lang-toggle, .nav-login, .nav-cta) { padding: 0 .8rem; }
}

/* --------------------------------------------------------------------------
   Celular y tablet vertical: cabecera limpia en todo el sistema
   Hasta 768px la cabecera solo lleva menú, logo y accesos de un toque
   (carrito, campana, perfil). Idioma, "Página web", "Iniciar sesión" y
   "Cotizar" pasan al final del menú hamburguesa, sin duplicarse.
   public-polish.css forzaba el idioma visible en la cabecera y lo ocultaba del
   menú desde 601px; estas reglas pesan más a propósito (body + tres clases).
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body :is(.editorial-header, .admin-header) :is(.nav-actions, .nav-fixed) > :is(.lang-toggle, .admin-public-link, .nav-login, .nav-cta),
  body .editorial-header .nav-actions > .nav-profile {
    display: none !important;
  }
  body .mobile-nav .mobile-nav-footer :is(.lang-toggle-mobile, .nav-login-mobile) { display: inline-flex !important; }
  body .mobile-nav .mobile-nav-footer .mobile-public-links { display: grid !important; }
}

/* Pie del menú hamburguesa: idioma y acceso ("Iniciar sesión" / "Página web")
   en filas completas, del mismo tamaño que "Tienda online" y "Cotizar
   Proyecto". Solo en celular; en pantallas anchas ya están en la cabecera. */
.mobile-nav-utility { display: grid; grid-template-columns: 1fr; gap: .65rem; margin-top: .65rem; }
.mobile-nav-utility > :is(.lang-toggle-mobile, .nav-login-mobile) {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; min-height: 52px; margin: 0 !important; padding: .9rem;
  border: 1.5px solid rgba(31, 111, 99, .35); border-radius: 12px;
  color: #1f6f63; background: #fff; font: 700 .9rem/1.2 'Inter', sans-serif;
  text-decoration: none; white-space: nowrap; cursor: pointer; box-sizing: border-box;
}
.mobile-nav-utility > :is(.lang-toggle-mobile, .nav-login-mobile):hover { background: #eef7f4; }
.mobile-nav-utility .lang-toggle-mobile [data-lang] { opacity: .45; }
.mobile-nav-utility .lang-toggle-mobile [data-lang].active { opacity: 1; font-weight: 800; }
@media (min-width: 769px) { .mobile-nav-utility { display: none !important; } }
.mobile-nav-utility + form { margin-top: .65rem; }

/* Tablet horizontal / laptop pequeña (769–1100px): en la cabecera del panel
   no caben idioma, "Página web", campana y perfil con nombre; se quedan los
   íconos y el avatar para que nada se corte a la derecha. */
@media (min-width: 769px) and (max-width: 1100px) {
  .admin-header .admin-public-link span,
  .admin-header .profile-chip .pname { display: none; }
  .admin-header .admin-public-link { padding: 0 .75rem; }
  .admin-header .profile-chip { padding: 0 .35rem; }
}