/* =====================================================================
   BravoZulu · la barra de abajo de la app instalada (v1.3.93)
   Solo con `html.opr-es-app` (la pone el guion de la cabeza) y por debajo
   de 1040 px, donde no está la franja lateral. En el navegador no se ve nada
   de esto: la web queda como estaba.
   Dos tonos, según lo que tenga debajo (lo decide barra.js):
   - es-sobre-claro: barra oscura (950), iconos claros, la elegida en blanco.
   - es-sobre-oscuro: barra blanca, iconos 600, la elegida en oscuro.
   ===================================================================== */

.opr.opr-ab{display:none !important}

@media (max-width:1039px){
  html.opr-es-app .opr.opr-ab{display:block !important}
  html.opr-es-app body{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px)) !important}

  /* la cabecera de la app: arriba a la derecha, solo el buzón y el avatar */
  html.opr-es-app .opr-cabecera .opr-cb-progreso,
  html.opr-es-app .opr-cabecera .opr-cb-simulacro,
  html.opr-es-app .opr-cabecera .opr-cb-batallas,
  html.opr-es-app .opr-cabecera .opr-cb-hamb,
  html.opr-es-app .opr-cabecera .opr-cb-carrito{display:none !important}
  html.opr-es-app .opr-cabecera .opr-cb-dentro .opr-cb-perfil{order:3 !important}
  html.opr-es-app .opr-cabecera .opr-cb-dentro .opr-cb-contacto{order:2 !important}

  /* lo que flota abajo sube por encima de la barra */
  html.opr-es-app .opr.opr-pp-bar{bottom:calc(100px + env(safe-area-inset-bottom,0px)) !important}
  html.opr-es-app .opr.opr-pc-mini{bottom:calc(100px + env(safe-area-inset-bottom,0px)) !important}
  html.opr-es-app .opr.opr-app-barra{display:none !important}

  /* --- el velo, cuando se abre el + --- */
  html.opr-es-app .opr-ab .opr-ab-velo{position:fixed !important; inset:0 !important; z-index:99980 !important; background:rgba(5,31,32,.28) !important;
    -webkit-backdrop-filter:blur(6px) !important; backdrop-filter:blur(6px) !important; opacity:0 !important; pointer-events:none !important; transition:opacity .28s ease !important}
  html.opr-es-app .opr-ab.es-abierto .opr-ab-velo{opacity:1 !important; pointer-events:auto !important}

  /* --- la caja: la barra arriba y el panel debajo; al abrirse, sube --- */
  html.opr-es-app .opr-ab .opr-ab-caja{
    position:fixed !important; z-index:99985 !important; left:50% !important; transform:translateX(-50%) !important;
    bottom:calc(16px + env(safe-area-inset-bottom,0px)) !important; width:calc(100% - 40px) !important; max-width:380px !important;
    border-radius:24px !important; overflow:hidden !important;
    background:rgba(5,31,32,.92) !important; color:rgba(235,239,244,.66) !important;
    -webkit-backdrop-filter:blur(22px) saturate(1.6) !important; backdrop-filter:blur(22px) saturate(1.6) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 18px 40px -14px rgba(11,15,19,.6), 0 2px 6px rgba(11,15,19,.25) !important;
    transition:background-color .3s ease, color .3s ease, box-shadow .3s ease !important;
  }
  html.opr-es-app .opr-ab.es-sobre-oscuro .opr-ab-caja{
    background:rgba(255,255,255,.93) !important; color:#4C7866 !important;
    box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgba(5,31,32,.06), 0 18px 40px -16px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.2) !important;
  }

  html.opr-es-app .opr-ab .opr-ab-barra{height:64px !important; display:flex !important; align-items:center !important; justify-content:space-around !important; padding:0 6px !important}
  html.opr-es-app .opr-ab .opr-ab-it{position:relative !important; width:50px !important; height:50px !important; border-radius:16px !important; display:grid !important; place-items:center !important;
    color:inherit !important; text-decoration:none !important; -webkit-tap-highlight-color:transparent !important; transition:background-color .2s ease, color .2s ease, transform .12s ease !important}
  html.opr-es-app .opr-ab .opr-ab-it:active{transform:scale(.94) !important}
  html.opr-es-app .opr-ab .opr-ab-ico{position:relative !important; display:grid !important; place-items:center !important}
  html.opr-es-app .opr-ab .opr-ab-ico svg{width:23px !important; height:23px !important; display:block !important}
  html.opr-es-app .opr-ab .opr-ab-it em{position:absolute !important; bottom:5px !important; left:50% !important; width:5px !important; height:5px !important; margin-left:-2.5px !important; border-radius:50% !important; background:transparent !important}

  /* la elegida: sobre fondo claro, cuadro blanco; sobre oscuro, cuadro oscuro */
  html.opr-es-app .opr-ab .opr-ab-it.es-aqui{color:#051F20 !important; background:linear-gradient(180deg,#fff,#E3E8EE) !important; box-shadow:inset 0 1px 0 #fff, 0 4px 12px rgba(0,0,0,.35) !important}
  html.opr-es-app .opr-ab .opr-ab-it.es-aqui em{background:#051F20 !important}
  html.opr-es-app .opr-ab.es-sobre-oscuro .opr-ab-it.es-aqui{color:#fff !important; background:linear-gradient(180deg,#2a333d,#051F20) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 14px -4px rgba(5,31,32,.55) !important}
  html.opr-es-app .opr-ab.es-sobre-oscuro .opr-ab-it.es-aqui em{background:#fff !important; box-shadow:0 0 8px rgba(255,255,255,.9) !important}

  /* el + del centro: un aro que lo distingue; al abrirse gira y es una × */
  html.opr-es-app .opr-ab .opr-ab-mas{border:0 !important; background:transparent !important; cursor:pointer !important; box-shadow:inset 0 0 0 1.5px currentColor !important; border-radius:999px !important; width:46px !important; height:46px !important}
  html.opr-es-app .opr-ab .opr-ab-mas svg{transition:transform .3s cubic-bezier(.2,.8,.2,1) !important}
  html.opr-es-app .opr-ab.es-abierto .opr-ab-mas svg{transform:rotate(45deg) !important}

  /* el punto ámbar (lo enciende cabecera.js) */
  html.opr-es-app .opr-ab .es-aviso .opr-ab-ico::after{content:"" !important; position:absolute !important; top:-3px !important; right:-5px !important; width:9px !important; height:9px !important; border-radius:50% !important;
    background:var(--av500,#F09D0F) !important; box-shadow:0 0 0 2px #1b2128 !important}
  html.opr-es-app .opr-ab.es-sobre-oscuro .es-aviso .opr-ab-ico::after{box-shadow:0 0 0 2px #fff !important}

  /* --- el panel con lo demás: se abre hacia abajo y la barra sube --- */
  html.opr-es-app .opr-ab .opr-ab-panel{display:grid !important; grid-template-rows:0fr !important; transition:grid-template-rows .34s cubic-bezier(.2,.8,.2,1) !important}
  html.opr-es-app .opr-ab.es-abierto .opr-ab-panel{grid-template-rows:1fr !important}
  html.opr-es-app .opr-ab .opr-ab-rejilla{min-height:0 !important; overflow:hidden !important; display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:4px !important; padding:0 10px !important}
  html.opr-es-app .opr-ab.es-abierto .opr-ab-rejilla{padding:10px 10px 12px !important; border-top:1px solid rgba(255,255,255,.1) !important}
  html.opr-es-app .opr-ab.es-sobre-oscuro.es-abierto .opr-ab-rejilla{border-top-color:rgba(5,31,32,.08) !important}
  html.opr-es-app .opr-ab .opr-ab-op{display:flex !important; flex-direction:column !important; align-items:center !important; gap:6px !important; padding:12px 4px !important; border-radius:16px !important;
    color:inherit !important; text-decoration:none !important; -webkit-tap-highlight-color:transparent !important; transition:background-color .15s ease !important}
  html.opr-es-app .opr-ab .opr-ab-op:active{background:rgba(255,255,255,.08) !important}
  html.opr-es-app .opr-ab.es-sobre-oscuro .opr-ab-op:active{background:rgba(5,31,32,.06) !important}
  html.opr-es-app .opr-ab .opr-ab-op b{font-size:12px !important; font-weight:600 !important; line-height:1.2 !important; text-align:center !important; color:#DAF1DE !important}
  html.opr-es-app .opr-ab.es-sobre-oscuro .opr-ab-op b{color:#051F20 !important}
  html.opr-es-app .opr-ab .opr-ab-op.es-suave b{color:inherit !important}
  html.opr-es-app .opr-ab .opr-ab-op .opr-ab-ico svg{width:22px !important; height:22px !important}
  html.opr-es-app .opr-ab :focus-visible{outline:2px solid currentColor !important; outline-offset:2px !important}
}

@media (prefers-reduced-motion:reduce){
  html.opr-es-app .opr-ab .opr-ab-caja, html.opr-es-app .opr-ab .opr-ab-panel, html.opr-es-app .opr-ab .opr-ab-velo, html.opr-es-app .opr-ab .opr-ab-mas svg{transition:none !important}
}

/* v1.3.94 (Sergio: «el + tiene que sobresaltar en cuanto al resto, que no
   sea un menú tan plano»). El + sale por encima de la barra, más grande, en
   el color contrario y con relieve; la barra gana brillo y profundidad. */
@media (max-width:1039px){
  html.opr-es-app .opr-ab .opr-ab-caja{overflow:visible !important;
    background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 46%), rgba(5,31,32,.94) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.45), 0 22px 44px -14px rgba(11,15,19,.65), 0 3px 8px rgba(11,15,19,.3) !important}
  html.opr-es-app .opr-ab.es-sobre-oscuro .opr-ab-caja{
    background:linear-gradient(180deg, #fff, rgba(240,243,247,.96)) !important;
    box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(5,31,32,.08), inset 0 0 0 1px rgba(5,31,32,.05), 0 22px 44px -16px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.22) !important}
  html.opr-es-app .opr-ab .opr-ab-ico svg{width:24px !important; height:24px !important}

  /* el + : 60 px, sale 16 px por arriba, del color contrario a la barra */
  html.opr-es-app .opr-ab .opr-ab-mas{width:60px !important; height:60px !important; margin-top:-30px !important; border-radius:999px !important; flex:none !important;
    color:#051F20 !important; background:linear-gradient(180deg,#FFFFFF 0%,#DCE2E9 100%) !important;
    box-shadow:0 0 0 5px rgba(5,31,32,.94), inset 0 1px 0 #fff, inset 0 -2px 4px rgba(5,31,32,.12), 0 10px 22px -6px rgba(0,0,0,.6) !important;
    transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .3s ease !important}
  html.opr-es-app .opr-ab .opr-ab-mas svg{width:26px !important; height:26px !important; stroke-width:2.4 !important}
  html.opr-es-app .opr-ab .opr-ab-mas:active{transform:scale(.93) !important}
  html.opr-es-app .opr-ab.es-sobre-oscuro .opr-ab-mas{color:#fff !important; background:linear-gradient(180deg,#36404B 0%,#051F20 100%) !important;
    box-shadow:0 0 0 5px #F4F6F9, inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 4px rgba(0,0,0,.35), 0 10px 22px -6px rgba(5,31,32,.6) !important}
  html.opr-es-app .opr-ab.es-abierto .opr-ab-mas{transform:translateY(-2px) !important}
  /* el panel no recorta el +: el redondeo va en la rejilla */
  html.opr-es-app .opr-ab .opr-ab-panel{border-radius:0 0 24px 24px !important}
}

/* v1.3.95 (Sergio: «que la cabecera tenga también ese relieve que tiene el
   menú, o sombreado, así como los dos botones y el logo»). Solo en la app,
   en el móvil. La cabecera lleva fondo siempre, con brillo arriba y sombra
   debajo en vez de la raya; el buzón y el avatar, relieve de botón; el
   escudo, una sombra corta. */
@media (max-width:1039px){
  html.opr-es-app .opr-cabecera{
    background:linear-gradient(180deg,#FFFFFF,rgba(244,246,249,.96)) !important; border-bottom-color:transparent !important;
    box-shadow:inset 0 -1px 0 rgba(5,31,32,.06), 0 10px 24px -14px rgba(5,31,32,.45), 0 1px 3px rgba(5,31,32,.08) !important;
    -webkit-backdrop-filter:saturate(1.6) blur(14px) !important; backdrop-filter:saturate(1.6) blur(14px) !important}
  html.opr-es-app .opr-cabecera.es-oscura{
    background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 60%), rgba(5,31,32,.94) !important;
    box-shadow:inset 0 -1px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08), 0 12px 26px -14px rgba(0,0,0,.7) !important}

  /* el escudo, con una sombra corta que lo despega */
  html.opr-es-app .opr-cabecera .opr-cb-marca svg{filter:drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 2px 3px rgba(5,31,32,.28)) !important}
  html.opr-es-app .opr-cabecera.es-oscura .opr-cb-marca svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)) !important}

  /* el buzón: botón con relieve, como el + */
  html.opr-es-app .opr-cabecera .opr-cb-dentro .opr-cb-contacto{width:40px !important; height:40px !important;
    background:linear-gradient(180deg,#FFFFFF,#E6EBF0) !important; color:#051F20 !important;
    box-shadow:inset 0 1px 0 #fff, inset 0 -1px 2px rgba(5,31,32,.1), 0 0 0 1px rgba(5,31,32,.08), 0 6px 14px -6px rgba(5,31,32,.45) !important}
  html.opr-es-app .opr-cabecera.es-oscura .opr-cb-dentro .opr-cb-contacto{background:linear-gradient(180deg,#36404B,#1B2128) !important; color:#fff !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06), 0 6px 14px -6px rgba(0,0,0,.7) !important}
  html.opr-es-app .opr-cabecera .opr-cb-dentro .opr-cb-contacto:active{transform:scale(.94) !important}

  /* el avatar: un poco más grande y con la misma sombra */
  html.opr-es-app .opr-cabecera .opr-cb-perfil{width:40px !important; height:40px !important}
  html.opr-es-app .opr-cabecera .opr-cb-perfil.es-con-av{box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 1px rgba(5,31,32,.08), 0 6px 14px -6px rgba(5,31,32,.5) !important}
  html.opr-es-app .opr-cabecera.es-oscura .opr-cb-perfil.es-con-av{box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 6px 14px -6px rgba(0,0,0,.75) !important}
  html.opr-es-app .opr-cabecera .opr-cb-perfil:not(.es-con-av){background:linear-gradient(180deg,#FFFFFF,#E6EBF0) !important;
    box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(5,31,32,.08), 0 6px 14px -6px rgba(5,31,32,.45) !important}
  html.opr-es-app .opr-cabecera .opr-cb-dentro{gap:10px !important}
}

/* v1.3.97 (Sergio: «en la versión app tampoco debe salir el footer»). En la
   app no hay pie: lo de abajo es la barra. Los enlaces legales van al final
   del panel del + (`.opr-ab-legal`). En el navegador, el pie sigue igual. */
@media (max-width:1039px){
  html.opr-es-app #bravozulu-pie,
  html.opr-es-app .opr-pie,
  html.opr-es-app .site-footer{display:none !important}
  html.opr-es-app .opr-ab .opr-ab-legal{grid-column:1 / -1 !important; display:flex !important; flex-wrap:wrap !important; justify-content:center !important; gap:4px 14px !important;
    margin:6px 0 0 !important; padding:10px 4px 2px !important; border-top:1px solid rgba(255,255,255,.1) !important}
  html.opr-es-app .opr-ab.es-sobre-oscuro .opr-ab-legal{border-top-color:rgba(5,31,32,.08) !important}
  html.opr-es-app .opr-ab .opr-ab-legal a{font-size:11.5px !important; font-weight:500 !important; color:rgba(235,239,244,.62) !important; text-decoration:none !important}
  html.opr-es-app .opr-ab.es-sobre-oscuro .opr-ab-legal a{color:rgba(5,31,32,.55) !important}
}

/* v1.3.99 (Sergio: «pero sigue saliendo el footer… en la versión app del PC»).
   La app instalada en el ordenador tampoco lleva pie.
   - Con sesión: fuera entero; los legales están al final de Ajustes.
   - Sin sesión no hay Ajustes, ni lateral ni barra de abajo: queda solo la
     franja fina del final (© y los cuatro legales), sin las columnas. */
@media (min-width:1040px){
  html.opr-es-app body.logged-in #bravozulu-pie,
  html.opr-es-app body.logged-in .site-footer{display:none !important}
  html.opr-es-app body:not(.logged-in) #bravozulu-pie{padding-top:0 !important}
  html.opr-es-app body:not(.logged-in) #bravozulu-pie .opr-pie-rejilla{display:none !important}
}