:root {
  --acento: #2ec4b0;
  --cr-tinta: #151515; --cr-tenue: #66625c; --cr-linea: rgb(20 20 20 / .1);
  --cr-solido: #ffffff; --cr-hundido: #f0eee9;
  --cr-cristal: rgb(255 255 255 / .62); --cr-cristal-borde: rgb(255 255 255 / .55); --cr-cristal-brillo: rgb(255 255 255 / .8);
  --cr-velo: rgb(20 18 14 / .28);
  --cr-sombra: 0 8px 32px rgb(20 20 20 / .08); --cr-sombra-alta: 0 -12px 48px rgb(20 20 20 / .14);
  --cr-isla: #0b0b0c; --cr-isla-tinta: #f5f5f7; --cr-isla-tenue: rgb(245 245 247 / .62);
  --cr-ok: #34c759; --cr-pago: #0a84ff; --cr-error: #ff453a;
  --cr-font: -apple-system, "SF Pro Text", "SF Pro", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  
  --cr-resorte: linear(0, .0292, .1045, .2091, .3292, .4541, .5754, .6873, .7863, .8703, .9387, .9919, 1.0312, 1.058, 1.0744, 1.0822, 1.0833, 1.0794, 1.0722, 1.063, 1.0527, 1.0423, 1.0324, 1.0234, 1.0155, 1.0089, 1.0036, .9995, .9966, .9946, .9935, .9931, .9935, .9942, 1);
  --cr-resorte-suave: linear(0, .0398, .1336, .2525, .3777, .4974, .6051, .6979, .7749, .837, .8858, .923, .9507, .9708, .9848, .9942, 1.0002, 1.0037, 1.0056, 1.0062, 1.0057, 1.005, 1.0042, 1.0034, 1.0027, 1);
  --cr-t: 620ms; --cr-t-suave: 480ms;
}
@supports not (transition-timing-function: linear(0, 1)) {
  :root { --cr-resorte: cubic-bezier(.3, 1.35, .5, 1); --cr-resorte-suave: cubic-bezier(.2, .9, .3, 1); }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --cr-tinta: #f2f1ee; --cr-tenue: #a19d96; --cr-linea: rgb(255 255 255 / .1);
  --cr-solido: #1c1c1e; --cr-hundido: #2a2a2c;
  --cr-cristal: rgb(36 36 38 / .62); --cr-cristal-borde: rgb(255 255 255 / .1); --cr-cristal-brillo: rgb(255 255 255 / .12);
  --cr-velo: rgb(0 0 0 / .5); --cr-sombra: 0 8px 32px rgb(0 0 0 / .4); --cr-sombra-alta: 0 -12px 48px rgb(0 0 0 / .5);
  --cr-isla: #000000;
} }
:root[data-theme="dark"] {
  --cr-tinta: #f2f1ee; --cr-tenue: #a19d96; --cr-linea: rgb(255 255 255 / .1);
  --cr-solido: #1c1c1e; --cr-hundido: #2a2a2c;
  --cr-cristal: rgb(36 36 38 / .62); --cr-cristal-borde: rgb(255 255 255 / .1); --cr-cristal-brillo: rgb(255 255 255 / .12);
  --cr-velo: rgb(0 0 0 / .5); --cr-sombra: 0 8px 32px rgb(0 0 0 / .4); --cr-sombra-alta: 0 -12px 48px rgb(0 0 0 / .5);
  --cr-isla: #000000;
}


:where(.cristal) {
  background: var(--cr-cristal); border: 1px solid var(--cr-cristal-borde);
  box-shadow: inset 0 1px 0 var(--cr-cristal-brillo), var(--cr-sombra);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cristal, .hoja[data-hoja], .pestanas-indicador { background: var(--cr-solido); }
}


.hoja-fondo { position: fixed; inset: 0; z-index: 80; background: var(--cr-velo); opacity: 0; pointer-events: none; -webkit-tap-highlight-color: transparent; }
.hoja-fondo.abierta { pointer-events: auto; }
.hoja[data-hoja] {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 81; margin-inline: auto; width: min(640px, 100%);
  display: flex; flex-direction: column; border-radius: 28px 28px 0 0; color: var(--cr-tinta); font-family: var(--cr-font);
  background: var(--cr-cristal); border: 1px solid var(--cr-cristal-borde); border-bottom: 0;
  box-shadow: inset 0 1px 0 var(--cr-cristal-brillo), var(--cr-sombra-alta);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  transform: translateY(110%); visibility: hidden; will-change: transform; touch-action: none; overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.hoja[data-hoja].viva { visibility: visible; }
[data-hoja-marco] { position: relative; overflow: hidden; }
[data-hoja-marco] .hoja-fondo, [data-hoja-marco] .hoja[data-hoja] { position: absolute; }
.hoja-asa { flex: none; display: grid; place-items: center; height: 28px; cursor: grab; border: 0; background: none; width: 100%; padding: 0; }
.hoja-asa::before { content: ""; width: 40px; height: 5px; border-radius: 99px; background: var(--cr-tenue); opacity: .45; }
.hoja-asa:active { cursor: grabbing; }
.hoja[data-hoja] > [data-hoja-pie] { position: relative; z-index: 1; flex: none; background: color-mix(in srgb, var(--cr-solido) 86%, transparent); will-change: transform; }
.hoja-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 20px; -webkit-overflow-scrolling: touch; }


.isla {
  position: fixed; z-index: 90; left: 50%; top: calc(10px + env(safe-area-inset-top, 0px)); translate: -50% 0;
  width: 120px; height: 34px; border-radius: 22px; overflow: hidden; background: var(--cr-isla); color: var(--cr-isla-tinta);
  font-family: var(--cr-font); box-shadow: 0 10px 30px rgb(0 0 0 / .22); cursor: pointer; -webkit-tap-highlight-color: transparent;
  max-width: calc(100% - 24px);
}
[data-hoja-marco] .isla, [data-isla-marco] .isla { position: absolute; }
.isla[data-reposo="oculta"]:not(.activa) { opacity: 0; scale: .6; pointer-events: none; }
.isla { transition: opacity .25s, scale .35s var(--cr-resorte); }
.isla-contenido { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; white-space: nowrap; opacity: 0; }
.isla.activa .isla-contenido { opacity: 1; transition: opacity .25s .12s; }
.isla-icono { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--isla-color, var(--cr-ok)) 22%, transparent); color: var(--isla-color, var(--cr-ok)); }
.isla-icono svg { width: 20px; height: 20px; }
.isla-texto { display: grid; gap: 1px; min-width: 0; }
.isla-titulo { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.isla-detalle { font-size: 13px; color: var(--cr-isla-tenue); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.isla[data-tipo="ok"] { --isla-color: var(--cr-ok); }
.isla[data-tipo="pago"] { --isla-color: var(--cr-pago); }
.isla[data-tipo="error"] { --isla-color: var(--cr-error); }
.isla-anillo { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1.5px var(--isla-color, transparent); opacity: 0; }


[data-pestanas] { display: grid; gap: 16px; min-width: 0; max-width: 100%; }
.pestanas-barra {
  position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 999px; overflow-x: auto; scrollbar-width: none;
  background: var(--cr-hundido); max-width: 100%; scroll-padding-inline: 16px;
}
.pestanas-barra::-webkit-scrollbar { display: none; }
.pestanas-barra > button {
  position: relative; z-index: 1; flex: none; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: 600 15px/1 var(--cr-font); letter-spacing: -.01em; color: var(--cr-tenue); padding: 11px 16px; min-height: 40px; border-radius: 999px;
  transition: color .25s; -webkit-tap-highlight-color: transparent;
}
.pestanas-barra > button[aria-selected="true"] { color: var(--cr-tinta); }
.pestanas-barra > button:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.pestanas-indicador {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; pointer-events: none;
  background: var(--cr-solido); box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 4px 14px rgb(0 0 0 / .08), inset 0 1px 0 var(--cr-cristal-brillo);
}
.pestanas-paneles { position: relative; overflow: hidden; }
.pestanas-paneles > [data-panel][hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .isla, .isla.activa .isla-contenido { transition: none; }
}