/* header_mobile_v6 - ajuste exacto para templates/header.html
   Root real: <nav class="bg-white shadow-sm border-b border-gray-200">
   Objetivo: separar PDFPrivado de Inicio, acercar Inicio/Ayuda,
   centrar verticalmente idioma y no afectar escritorio. */

@media (max-width: 640px) {
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  nav.bg-white.shadow-sm.border-b.border-gray-200 {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  nav.bg-white.shadow-sm.border-b.border-gray-200 > div.max-w-7xl {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  nav.bg-white.shadow-sm.border-b.border-gray-200 > div.max-w-7xl > div.flex.justify-between.items-center.h-16 {
    height: 64px !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Marca PDFPrivado */
  nav.bg-white.shadow-sm.border-b.border-gray-200 .flex-shrink-0.flex.items-center {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin-right: 0 !important;
  }

  nav.bg-white.shadow-sm.border-b.border-gray-200 .flex-shrink-0.flex.items-center a.flex.items-center.gap-2 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
  }

  nav.bg-white.shadow-sm.border-b.border-gray-200 .flex-shrink-0.flex.items-center span.text-2xl {
    font-size: 1.35rem !important;
    line-height: 1 !important;
  }

  nav.bg-white.shadow-sm.border-b.border-gray-200 .flex-shrink-0.flex.items-center span.font-bold.text-xl {
    font-size: 1.38rem !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
  }

  /* Grupo Inicio / Ayuda / idioma */
  nav.bg-white.shadow-sm.border-b.border-gray-200 div.flex.items-center.space-x-8.h-16 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Anula el space-x-8 de Tailwind solo en móvil */
  nav.bg-white.shadow-sm.border-b.border-gray-200 div.flex.items-center.space-x-8.h-16 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0 !important;
  }

  nav.bg-white.shadow-sm.border-b.border-gray-200 div.flex.items-center.space-x-8.h-16 > a {
    font-size: 1rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Ocultar CTA App de Escritorio en móvil: es el enlace href="#" del header */
  nav.bg-white.shadow-sm.border-b.border-gray-200 div.flex.items-center.space-x-8.h-16 > a[href="#"] {
    display: none !important;
  }

  /* Selector de idioma: centrado vertical, alineado a la derecha sin subirse */
  nav.bg-white.shadow-sm.border-b.border-gray-200 div.relative.group.h-full.flex.items-center {
    align-self: stretch !important;
    height: 64px !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    background: #f3f4f6 !important;
  }

  nav.bg-white.shadow-sm.border-b.border-gray-200 div.relative.group.h-full.flex.items-center > button {
    height: 64px !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  nav.bg-white.shadow-sm.border-b.border-gray-200 div.relative.group.h-full.flex.items-center .absolute {
    top: 100% !important;
    right: 0 !important;
  }
}

@media (max-width: 380px) {
  nav.bg-white.shadow-sm.border-b.border-gray-200 > div.max-w-7xl {
    padding-left: 8px !important;
  }

  nav.bg-white.shadow-sm.border-b.border-gray-200 > div.max-w-7xl > div.flex.justify-between.items-center.h-16 {
    gap: 13px !important;
  }

  nav.bg-white.shadow-sm.border-b.border-gray-200 .flex-shrink-0.flex.items-center span.text-2xl {
    font-size: 1.18rem !important;
  }

  nav.bg-white.shadow-sm.border-b.border-gray-200 .flex-shrink-0.flex.items-center span.font-bold.text-xl {
    font-size: 1.18rem !important;
  }

  nav.bg-white.shadow-sm.border-b.border-gray-200 div.flex.items-center.space-x-8.h-16 {
    gap: 13px !important;
  }

  nav.bg-white.shadow-sm.border-b.border-gray-200 div.flex.items-center.space-x-8.h-16 > a,
  nav.bg-white.shadow-sm.border-b.border-gray-200 div.relative.group.h-full.flex.items-center > button {
    font-size: 0.93rem !important;
  }

  nav.bg-white.shadow-sm.border-b.border-gray-200 div.relative.group.h-full.flex.items-center {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}