/* Hoja modal, barra de resumen y margen bajo la cabecera fija: componente compartido («Lo que se abre se
   ve»; JS en js/hoja.js). Archivo compartido: no se edita en la app.
   Solo var(--…) de tokens.css con respaldo; nada en línea (CSP). */

/* ---------- Lo que se abre no queda bajo la cabecera fija ----------
   Todo scrollIntoView y toda ancla (#id) se detiene bajo la cabecera. Su alto lo publica cabeceraFija()
   ([data-cabecera-fija] en la cabecera) en --cabecera-alto; en las apps por rol vale --ap-top-h de la cáscara. */
:where(body :not(dialog *)){scroll-margin-top:calc(var(--cabecera-alto,var(--ap-top-h,0px)) + var(--scroll-holgura,12px))}

/* ---------- Hoja ----------
   Cabecera de color propio (regla del dueño 9-oct-2026: nunca blanco sobre blanco). La app la fija en
   tokens.css con --hm-cab-bg / --hm-cab-tinta (y --hm-cuerpo); si no, sale de --marca: el mismo tono con la luz topada
   (OKLCH ≤ .40 en claro; .36–.46 en oscuro, más clara que el cuerpo oscuro), así el texto claro pasa AA con cualquier
   marca. Sin color relativo (navegadores viejos): la marca mezclada con negro al 40 %. */
.hm{--hm-cab-def:color-mix(in srgb,var(--marca,CanvasText) 40%,black);--hm-cab-tinta-def:white;
  --hm-cuerpo-def:color-mix(in srgb,var(--superficie,Canvas) 96%,var(--marca,CanvasText))}
@supports (color:oklch(from red l c h)){
  .hm{--hm-cab-def:oklch(from var(--marca) min(l,.4) min(c,.14) h);--hm-cab-tinta-def:oklch(from var(--marca) .985 .012 h)}
  @media (prefers-color-scheme:dark){:root:not([data-tema=claro]) .hm{--hm-cab-def:oklch(from var(--marca) clamp(.36,l,.46) min(c,.12) h)}}
  :root[data-tema=oscuro] .hm{--hm-cab-def:oklch(from var(--marca) clamp(.36,l,.46) min(c,.12) h)}
}
.hm{width:100%;max-width:min(560px,100%);max-height:none;margin:auto auto 0;padding:0;border:0;overflow:visible;background:transparent;color:var(--tinta,CanvasText);overscroll-behavior:contain}
.hm::backdrop{background:rgb(0 0 0/.55)} /* negro fijo: con --tinta, en oscuro el velo salía claro */
.hm-in{display:flex;flex-direction:column;max-height:min(88dvh,760px);border-radius:var(--radio-tarjeta,20px) var(--radio-tarjeta,20px) 0 0;background:var(--hm-cuerpo,var(--hm-cuerpo-def));box-shadow:var(--sombra-alta,0 20px 50px -20px rgba(0,0,0,.35))}
/* La cabecera NO se encoge y el cuerpo crece con min-height:0: un flex-basis 0 aplastó una hoja en iOS Safari. */
.hm-cab{flex:none;position:relative;z-index:1;display:flex;align-items:center;gap:12px;padding:20px 12px 14px 20px;border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0;
  background:var(--hm-cab-bg,var(--hm-cab-def));color:var(--hm-cab-tinta,var(--hm-cab-tinta-def));
  box-shadow:inset 0 -1px 0 color-mix(in srgb,currentColor 14%,transparent);transition:box-shadow var(--dur-normal,250ms) ease}
/* Con el cuerpo desplazado (hoja.js pone data-desplazada) la cabecera proyecta sombra sobre lo que pasa debajo. */
.hm-cab[data-desplazada]{box-shadow:inset 0 -1px 0 color-mix(in srgb,currentColor 14%,transparent),0 12px 22px -14px rgb(0 0 0/.5)}
.hm-asa{position:absolute;left:50%;top:7px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:color-mix(in srgb,currentColor 40%,transparent)}
.hm-tit{flex:1 1 auto;min-width:0;margin:0;font:700 1.25rem/1.25 var(--display,inherit);color:inherit;overflow-wrap:anywhere}
/* Título copiado del contenido (hoja.js › tituloACabecera): el original sigue ahí solo para lectores de pantalla. */
.hm-tit-en-cab{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hm-cerrar{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;margin-left:auto;padding:0;border:1px solid color-mix(in srgb,currentColor 28%,transparent);border-radius:50%;
  background:color-mix(in srgb,currentColor 10%,transparent);color:inherit;cursor:pointer;transition:background .18s,transform .18s cubic-bezier(.2,.8,.2,1)}
.hm-cerrar:hover{background:color-mix(in srgb,currentColor 18%,transparent)}
.hm-cerrar:active{transform:scale(.92)}
.hm-cerrar:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.hm-cuerpo{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 20px calc(20px + env(safe-area-inset-bottom));font-size:max(1rem,14px)}
.hm-cuerpo:focus{outline:none}
@media (min-width:700px){
  .hm{margin:auto}
  .hm-in{border-radius:var(--radio-tarjeta,20px)}
  .hm-asa{display:none}
  .hm-cuerpo{padding-bottom:24px}
}
/* La página de atrás no se desplaza mientras hay una hoja abierta (clases de hoja.js: se bloquea el elemento que da
   su overflow al viewport —<html> o <body>— para no cambiar el scroller raíz, y la posición se guarda y se restaura). */
html.hm-abierta:not(.hm-en-body),html.hm-abierta.hm-en-body body{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .hm[open]{animation:hm-luz var(--dur-normal,250ms) var(--curva,ease-out)}
  .hm[open] .hm-in{animation:hm-sube var(--dur-normal,250ms) var(--curva,ease-out)}
  .hm[open]::backdrop{animation:hm-luz var(--dur-normal,250ms) ease-out}
}
@keyframes hm-luz{from{opacity:0}}
@keyframes hm-sube{from{translate:0 32px}}

/* ---------- Barra de resumen (flujos de reserva) ----------
   <button class="resumen-barra"> con [data-resumen-linea] (lo elegido, una línea) y [data-resumen-total] (importe).
   En el flujo la pone la app (p. ej. sobre sus botones Atrás/Continuar); con .fija flota abajo, sobre la barra de la
   app si la hay (--resumen-abajo = su alto). barraResumen() la oculta mientras el recibo ya se ve en pantalla. */
.resumen-barra{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 12px 8px 16px;border:1px solid var(--linea,GrayText);border-radius:var(--radio-tarjeta,16px);background:var(--superficie,Canvas);color:var(--tinta,CanvasText);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.resumen-barra[hidden],.resumen-barra[data-oculta]:not(.fija){display:none}
.resumen-barra:focus-visible{outline:2px solid var(--marca,Highlight);outline-offset:2px}
.resumen-barra-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.resumen-barra-txt small{font-size:.875rem;color:var(--tinta-2,GrayText);overflow:hidden;white-space:nowrap;text-overflow:ellipsis} /* la app puede poner ahí el producto: se corta con … */
.resumen-barra [data-resumen-linea]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:700}
.resumen-barra [data-resumen-total]{flex:none;font-weight:800;font-variant-numeric:tabular-nums;color:var(--marca-oscura,inherit)}
.resumen-barra-flecha{flex:none;width:20px;height:20px;color:var(--tinta-2,GrayText)}
.resumen-barra.fija{position:fixed;z-index:30;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(var(--resumen-abajo,0px) + 10px + env(safe-area-inset-bottom));width:auto;max-width:560px;margin:0 auto;box-shadow:var(--sombra-alta,0 12px 30px -12px rgba(0,0,0,.35))}
.resumen-barra.fija[data-oculta]{visibility:hidden;opacity:0;pointer-events:none;translate:0 12px}
@media (prefers-reduced-motion:no-preference){.resumen-barra.fija{transition:opacity var(--dur-normal,250ms) ease,translate var(--dur-normal,250ms) var(--curva,ease-out),visibility 0s linear var(--dur-normal,250ms)}.resumen-barra.fija:not([data-oculta]){transition-delay:0s}}