/* =====================================================================
   BravoZulu · instalar la web como app (v1.3.78)
   La barra de abajo y la hoja. Van fuera de las secciones, colgadas del
   body, con la clase .opr para heredar tokens, tipografía y botones; por
   eso lo que el núcleo resetea con !important aquí también lo lleva.
   ===================================================================== */

/* --- lo que el núcleo pone a todo .opr y aquí no vale --- */
.opr.opr-app-barra, .opr.opr-app-capa{background:transparent !important}
.opr.opr-app-capa[hidden]{display:none !important}
[data-opr-instalar][hidden]{display:none !important}
html.opr-app-abierta, html.opr-app-abierta body{overflow:hidden !important}

/* ----------------------------------------------------------- barra */
.opr.opr-app-barra{
  position:fixed !important; z-index:99990 !important;
  left:50% !important; bottom:calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  width:min(560px, calc(100% - 24px)) !important;
  display:grid !important; grid-template-columns:auto minmax(0,1fr) auto auto !important; align-items:center !important; gap:12px !important;
  padding:12px 10px 12px 12px !important; border-radius:18px !important;
  background:var(--p950) !important; color:#fff !important;
  box-shadow:0 1px 2px rgba(5,31,32,.2), 0 24px 50px -18px rgba(5,31,32,.55) !important;
  transform:translate(-50%, calc(100% + 30px)) !important; opacity:0 !important;
  transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .2s ease !important;
}
.opr.opr-app-barra.es-visible{transform:translate(-50%, 0) !important; opacity:1 !important}
.opr-app-barra .opr-app-barra-icono{width:40px !important; height:40px !important; border-radius:10px !important; display:block !important}
.opr-app-barra .opr-app-barra-texto{display:flex !important; flex-direction:column !important; line-height:1.3 !important; min-width:0 !important}
.opr-app-barra .opr-app-barra-texto b{font-size:.9375rem !important; font-weight:700 !important; letter-spacing:-.012em !important; color:#fff !important}
.opr-app-barra .opr-app-barra-texto span{font-size:.8125rem !important; color:var(--p400) !important}
.opr-app-barra .opr-app-barra-si{padding:11px 18px !important; font-size:.9375rem !important; background:#fff !important; color:var(--p950) !important}
.opr-app-barra .opr-app-barra-si:hover{background:var(--p100) !important}
.opr-app-barra .opr-app-barra-no{
  width:36px !important; height:36px !important; border-radius:999px !important; display:grid !important; place-items:center !important;
  color:var(--p400) !important; cursor:pointer !important; background:transparent !important;
}
.opr-app-barra .opr-app-barra-no:hover{color:#fff !important; background:var(--p800) !important}
.opr-app-barra .opr-app-barra-no svg{width:18px !important; height:18px !important}
@media (max-width:420px){
  .opr-app-barra .opr-app-barra-texto span{display:none !important}
}

/* ------------------------------------------------------------ hoja */
.opr.opr-app-capa{
  position:fixed !important; inset:0 !important; z-index:99995 !important;
  display:flex !important; align-items:flex-end !important; justify-content:center !important;
  background:rgba(5,31,32,0) !important; transition:background .2s ease !important;
}
.opr.opr-app-capa.es-visible{background:rgba(5,31,32,.5) !important}
.opr-app-capa .opr-app-hoja{
  position:relative !important; width:100% !important; max-width:480px !important;
  background:var(--superficie) !important; color:var(--tinta) !important;
  border-radius:22px 22px 0 0 !important;
  padding:24px 22px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
  box-shadow:0 -20px 50px -20px rgba(5,31,32,.4) !important;
  transform:translateY(100%) !important; transition:transform .3s cubic-bezier(.2,.8,.2,1) !important;
  max-height:92svh !important; overflow-y:auto !important;
}
.opr-app-capa.es-visible .opr-app-hoja{transform:none !important}
@media (min-width:640px){
  .opr.opr-app-capa{align-items:center !important}
  .opr-app-capa .opr-app-hoja{border-radius:22px !important; padding:28px 28px 26px !important; transform:translateY(16px) !important; opacity:0 !important; transition:transform .25s ease, opacity .2s ease !important}
  .opr-app-capa.es-visible .opr-app-hoja{transform:none !important; opacity:1 !important}
}
.opr-app-hoja .opr-app-x{
  position:absolute !important; top:12px !important; right:12px !important;
  width:38px !important; height:38px !important; border-radius:999px !important; display:grid !important; place-items:center !important;
  color:var(--tenue) !important; cursor:pointer !important;
}
.opr-app-hoja .opr-app-x:hover{background:var(--p100) !important; color:var(--tinta) !important}
.opr-app-hoja .opr-app-x svg{width:19px !important; height:19px !important}

.opr-app-hoja .opr-app-cabeza{display:flex !important; gap:14px !important; align-items:center !important; padding-right:36px !important}
.opr-app-hoja .opr-app-icono{width:56px !important; height:56px !important; border-radius:14px !important; flex:none !important; display:block !important;
  box-shadow:0 1px 2px rgba(5,31,32,.12), 0 8px 18px -10px rgba(5,31,32,.45) !important}
.opr-app-hoja .opr-app-titulo{font-size:1.25rem !important; font-weight:800 !important; letter-spacing:-.02em !important; line-height:1.2 !important; color:var(--tinta) !important}
.opr-app-hoja .opr-app-sub{margin-top:3px !important; font-size:.9375rem !important; line-height:1.45 !important; color:var(--suave) !important}

.opr-app-hoja .opr-app-cuerpo{margin-top:20px !important}
.opr-app-hoja .opr-app-texto{font-size:.9375rem !important; line-height:1.55 !important; color:var(--suave) !important}
.opr-app-hoja .opr-app-texto b{color:var(--tinta) !important; font-weight:700 !important}
.opr-app-hoja svg{display:inline-block !important; vertical-align:-4px !important; width:20px !important; height:20px !important; color:var(--tinta) !important}

.opr-app-hoja .opr-app-pasos{display:flex !important; flex-direction:column !important; gap:10px !important}
.opr-app-hoja .opr-app-pasos li{
  display:grid !important; grid-template-columns:30px minmax(0,1fr) !important; gap:12px !important; align-items:start !important;
  padding:13px 14px !important; border-radius:var(--radio-s) !important; background:var(--p50) !important; box-shadow:inset 0 0 0 1px var(--borde) !important;
}
.opr-app-hoja .opr-app-num{
  width:30px !important; height:30px !important; border-radius:999px !important; display:grid !important; place-items:center !important;
  background:var(--p950) !important; color:#fff !important; font-size:.875rem !important; font-weight:700 !important;
}
.opr-app-hoja .opr-app-paso{font-size:1rem !important; font-weight:600 !important; line-height:1.35 !important; color:var(--tinta) !important; padding-top:4px !important}
.opr-app-hoja .opr-app-paso b{font-weight:800 !important}
.opr-app-hoja .opr-app-nota{margin-top:3px !important; font-size:.875rem !important; line-height:1.45 !important; color:var(--tenue) !important}

.opr-app-hoja .opr-app-botones{display:flex !important; gap:9px !important; margin-top:20px !important}
.opr-app-hoja .opr-app-botones .opr-btn{flex:1 !important; padding:15px 16px !important}

/* ---------------------------------------- entradas: menú y pie */
.opr-cabecera .opr-cb-panel-app{
  display:flex !important; align-items:center !important; gap:10px !important;
  padding:15px 2px !important; font-size:1.0625rem !important; font-weight:600 !important; letter-spacing:-.014em !important;
  color:var(--tinta) !important; border-bottom:1px solid var(--borde) !important;
}
.opr-cabecera .opr-cb-panel-app svg{width:20px !important; height:20px !important; flex:none !important}
.opr-cabecera.es-oscura .opr-cb-panel-app{color:#fff !important; border-bottom-color:rgba(255,255,255,.12) !important}

@media (prefers-reduced-motion:reduce){
  .opr.opr-app-barra, .opr-app-capa .opr-app-hoja, .opr.opr-app-capa{transition:none !important}
}