/* pv-header-fijo.css — override único, sin tocar textos ni rutas */

/* --------- Base (todas las vistas) --------- */
.container { overflow: visible !important; height: auto !important; }
#header   { position: relative; height: auto !important; min-height: 148px; }
#navi     { position: relative; z-index: 1000; }
#navi ul.submenu { z-index: 1200; overflow: visible; }

/* --------- Desktop (>=981px) — deja todo como está --------- */
@media (min-width:981px){
  /* Menú como venía */
  /* Íconos alineados a la derecha en línea con el menú */
  #header td[width="70"]{ text-align:right !important; white-space:nowrap; }
  #header td[width="70"] > div,
  #header td[width="70"] div[style*="position"]{
    position: static !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
  }
}

/* --------- Mobile / Tablet (<=980px) --------- */
@media (max-width:980px){

  /* 1) Mantener la fila del header estable */
  #header table{ width:100% !important; table-layout:fixed; border-collapse:collapse; }
  #header tr   { display: table-row !important; }
  #header td   { display: table-cell !important; width:auto !important; vertical-align:middle !important; }

  /* 2) Logo acotado para que no empuje al menú */
  #header td img{ max-height:84px; height:auto; width:auto; }

  /* 3) Menú centrado y con wrap limpio (sin floats) */
  #navi{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
  #navi li{ float:none !important; margin-right:0 !important; }

  /* 4) Íconos SIEMPRE visibles: los pasamos a su PROPIA FILA centrada */
  #header td[width="70"]{
    display:block !important;       /* rompe la fila sólo para este td */
    width:100% !important;
    text-align:center !important;
    padding-top:8px;
    white-space:normal;             /* permite salto si hiciera falta */
  }
  #header td[width="70"] > div,
  #header td[width="70"] div[style*="position"]{
    position: static !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:0 !important;
  }
  #header td[width="70"] img{
    display:inline-block;
    height:auto; width:auto;
    max-height:22px;                /* tamaño agradable en móvil */
  }

  /* 5) Nada debe recortar el header */
  #header, .container, #contenedor, #contenido{ overflow:visible !important; }
}

/* --------- Teléfonos angostos (<=480px) --------- */
@media (max-width:480px){
  #navi{ gap:8px; }
  #header td img{ max-height:76px; }       /* si el logo todavía empuja, bajalo a 72/70 */
  #header td[width="70"] img{ max-height:20px; }
}