/* Marco: celular/tablet → barra inferior; ≥1024 px → barra lateral */
.frame { min-height: 100dvh; display: flex; flex-direction: column; }
.frame-head { position: relative; z-index: var(--z-nav); display: flex; align-items: center; gap: 12px; padding: 8px var(--gap); background: linear-gradient(90deg, var(--chrome), var(--chrome-2)); color: var(--chrome-text); border-bottom: 1px solid var(--chrome-line); }
/* Logo fijo de Bama tech (manual de marca): dos imágenes, se muestra la que va con el tema */
.brand-mark { display: inline-flex; align-items: center; }
.brand-mark img { height: 30px; width: auto; }
.brand-dark { display: none; }
:root[data-theme="dark"] .brand-light { display: none; }
:root[data-theme="dark"] .brand-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-light { display: none; }
  :root:not([data-theme="light"]) .brand-dark { display: block; }
}
.frame-head .co { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--chrome-text); }
.co-logo { height: 28px; width: auto; border-radius: 6px; }
.user-menu { position: relative; }
.user-menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--chrome-line); border-radius: var(--radius-btn); background: var(--chrome-hover); color: var(--chrome-text); cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.user-menu-name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .user-menu-name { display: none; } }
.user-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-panel); width: min(280px, calc(100vw - 32px)); display: grid; gap: 4px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); }
.user-menu-sec { display: grid; gap: 6px; padding: 4px; }
.user-menu-label { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.user-menu-link, .user-menu-exit { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--radius-field); background: none; text-align: left; text-decoration: none; cursor: pointer; }
.user-menu-link { color: var(--text); }
.user-menu-exit { color: var(--muted); }
.user-menu-sep { margin: 4px 0; }
@media (hover: hover) and (pointer: fine) { .user-menu-btn:hover { background: var(--chrome-hover-strong); } .user-menu-link:hover, .user-menu-exit:hover { background: var(--surface-2); } }
.frame-main { flex: 1; padding: var(--gap); padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px); max-width: 1200px; width: 100%; margin: 0 auto; }
.nav { position: fixed; z-index: var(--z-nav); inset: auto 0 0 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: flex; color: var(--nav-text); scrollbar-color: rgb(255 255 255 / .18) transparent; background: var(--chrome); border-top: 1px solid var(--chrome-line); box-shadow: 0 -4px 16px rgb(10 20 36 / .08); }
/* Ítems: letra blanca entera, icono naranja; al pasar el mouse entra un recuadro naranja desde la izquierda y la letra crece un poco */
.nav-link { position: relative; isolation: isolate; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: .72rem; font-weight: 500; letter-spacing: .01em; color: var(--nav-text); background: none; border: 0; text-decoration: none; cursor: pointer; }
.nav > .nav-link svg { color: var(--hot); flex: none; transition: transform var(--dur-3) var(--ease-spring); }
.nav > .nav-link > span { transition: transform var(--dur-3) var(--ease-spring); transform-origin: left center; }
.nav-link[aria-current="page"] { font-weight: 650; }
.nav > .nav-link { transition: color var(--dur-2) var(--ease-out); }
.nav > .nav-link[aria-current="page"] { color: var(--chrome-active-text); }
@media (max-width: 639px), (max-width: 1023px) and (pointer: coarse) {
  .nav > .nav-link { min-width: 0; }
  .nav > .nav-link > span { transform-origin: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav > .nav-link svg { box-sizing: content-box; padding: 3px 16px; border-radius: var(--radius-pill); transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-spring); }
  .nav > .nav-link[aria-current="page"] svg { background: var(--nav-active-bg); }
  .nav > .nav-link:active svg { transform: scale(.9); }
}
.nav-group { margin: 0; padding: 14px 14px 4px; font-size: .66rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.nav > .nav-group { color: var(--chrome-muted); }
.more-panel { color: var(--text); position: fixed; z-index: var(--z-panel); right: 8px; bottom: calc(var(--nav-h) + 8px + env(safe-area-inset-bottom)); max-height: 70dvh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 6px; display: grid; min-width: 220px; }
.more-panel .nav-link { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 44px; padding: 0 12px; font-size: .95rem; font-weight: 500; border-radius: var(--radius-field); color: var(--text); }
.more-panel .nav-link svg { color: var(--hot-text); }
.more-panel .nav-link[aria-current="page"] { background: var(--hot-tint); }
@media (min-width: 1024px), (min-width: 640px) and (pointer: fine) {
  .frame { flex-direction: row; flex-wrap: wrap; }
  .frame-head { width: 100%; position: sticky; top: 0; }
  .nav { position: sticky; top: 61px; bottom: auto; left: auto; right: auto; align-self: flex-start; flex-direction: column; gap: 2px; width: var(--side-w); height: auto; min-height: calc(100dvh - 61px); max-height: calc(100dvh - 61px); overflow-y: auto; padding: 12px 10px; border-top: 0; border-right: 1px solid var(--chrome-line); box-shadow: none; background: linear-gradient(180deg, var(--chrome), var(--chrome-2)); }
  .nav-link { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 42px; padding: 0 14px; font-size: .9rem; font-weight: 500; border-radius: 12px; }
  /* Recuadro: capa detrás del ítem que se abre desde la izquierda */
  .nav > .nav-link::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--hot-soft); box-shadow: inset 3px 0 0 var(--hot); transform: scaleX(0); transform-origin: left center; opacity: 0; transition: transform 280ms var(--ease-spring), opacity var(--dur-2) var(--ease-out); }
  .nav > .nav-link[aria-current="page"]::before { transform: none; opacity: 1; background: var(--nav-active-bg); }
  .nav > .nav-link:hover { color: var(--chrome-active-text); text-shadow: var(--nav-glow); }
  .nav > .nav-link:hover::before { transform: none; opacity: 1; }
  .nav > .nav-link:hover > span { transform: translateX(2px); }
  .nav > .nav-link:hover svg { transform: scale(1.1); }
  .nav > .nav-link:active > span { transform: scale(.98); }
  .frame-main { flex: 1; min-width: 0; padding-bottom: var(--gap); }
}
@media (prefers-reduced-motion: reduce) { .nav > .nav-link::before, .nav > .nav-link > span, .nav > .nav-link svg { transition: none !important; } }
/* Entrada: marca y mapache a la izquierda, tarjeta a la derecha (composición del concepto de login, en paleta cálida) */
.entry { position: relative; isolation: isolate; min-height: 100dvh; display: grid; align-items: center; justify-items: center; gap: var(--sp-5); padding: var(--gap); }
.entry::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(700px 420px at 12% 8%, rgb(245 158 11 / .14), transparent 65%), radial-gradient(640px 420px at 100% 100%, rgb(234 88 12 / .10), transparent 62%), linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 44px 44px; opacity: .8; }
:root[data-theme="dark"] .entry::before { background: radial-gradient(700px 420px at 12% 8%, rgb(249 115 22 / .14), transparent 65%), radial-gradient(640px 420px at 100% 100%, rgb(251 191 36 / .07), transparent 62%), linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px) 0 0 / 44px 44px; opacity: 1; }
.entry-art { display: grid; justify-items: center; text-align: center; gap: 4px; width: min(380px, 86vw); }
.entry-brand { margin: 0; display: grid; justify-items: center; }
.entry-brand img { width: clamp(210px, 62vw, 300px); height: auto; }
.entry-tagline { margin: 6px 0 0; max-width: 28ch; color: var(--muted); font-size: 1.05rem; }
.entry-scene { position: relative; width: min(280px, 64vw); margin-top: var(--sp-4); }
.entry-stage { width: 100%; }
.entry-prop { will-change: transform; position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--surface); color: var(--hot); border: 1px solid var(--edge); box-shadow: var(--shadow-2); }
.entry-prop.p-box { left: -34px; top: 18%; --r: -8deg; }
.entry-prop.p-clip { right: -30px; top: 6%; --r: 7deg; animation-delay: -1.2s; }
.entry-prop.p-code { right: -24px; bottom: 14%; --r: -5deg; animation-delay: -2.4s; }
@media (prefers-reduced-motion: no-preference) { .entry-prop { animation: prop-float 5.5s ease-in-out infinite; } }
@keyframes prop-float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-8px) rotate(var(--r, 0deg)); } }
.entry-card { width: min(430px, 100%); background: var(--surface); border: 1px solid var(--edge); border-top-color: var(--edge-top); border-radius: 22px; padding: clamp(22px, 5vw, 34px); box-shadow: var(--shadow-3); }
.entry-card h1 { font-size: 1.9rem; margin-bottom: 4px; }
.entry-card h1 + .form { margin-top: var(--sp-4); }
.entry-sub { margin: 0 0 var(--sp-4); color: var(--muted); }
.entry-card .btn-primary { width: 100%; min-height: 50px; border-radius: var(--radius-pill); font-size: 1.05rem; }
.field-lead { position: relative; }
.field-lead .lead-ico { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--muted); display: grid; pointer-events: none; }
.field .field-lead input, .field .field-lead input[type="text"] { width: 100%; padding-left: 40px; }
.field-lead:focus-within .lead-ico { color: var(--hot); }
.who { display: flex; align-items: center; gap: 8px; }
.who.is-picked::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; flex: none; }
@media (min-width: 900px) { .entry { grid-template-columns: 1fr 1fr; max-width: 1040px; margin: 0 auto; gap: var(--sp-7); } .entry-art { justify-self: end; } .entry-card { justify-self: start; } }
/* Menú: «Más herramientas» */
.nav-toggle { font: inherit; cursor: pointer; }
.nav-toggle > svg:last-child { margin-left: auto; transition: transform var(--dur-3) var(--ease-out); }
.nav-toggle[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.nav-toggle > span { flex: 1; text-align: left; white-space: nowrap; }

/* Entrada en celular: teclado propio, puntos de la clave y botón de huella (ADR 0043) */
.pin-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pin-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.field-pad { display: grid; gap: var(--sp-4); justify-items: center; }
.pin-dots { display: flex; gap: 14px; height: 22px; align-items: center; }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong, var(--edge)); background: transparent; transition: background-color 140ms var(--ease-out), border-color 140ms var(--ease-out), transform 260ms var(--ease-spring); }
.pin-dot.is-on { background: var(--hot); border-color: var(--hot); transform: scale(1.18); }
.pin-dots.is-shake { animation: pin-shake 360ms var(--ease-out); }
@keyframes pin-shake { 0%, 100% { translate: 0; } 18% { translate: -9px; } 38% { translate: 8px; } 58% { translate: -5px; } 78% { translate: 3px; } }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(300px, 100%); }
.pad-key { position: relative; display: grid; place-items: center; height: 58px; border: 1px solid var(--edge); border-top-color: var(--edge-top); border-radius: 18px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 1.55rem; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color 120ms var(--ease-out), transform 120ms var(--ease-out); }
.pad-key:active { background: var(--hot-soft); transform: scale(.94); }
.pad-key.is-pop { animation: pad-pop 320ms var(--ease-spring); }
@keyframes pad-pop { 0% { transform: scale(.88); } 55% { transform: scale(1.04); } 100% { transform: scale(1); } }
.pad-key.is-aux { background: transparent; border-color: transparent; color: var(--muted); }
.pad-key.is-bio { color: var(--hot); }
.pad-key.is-empty { pointer-events: none; border-color: transparent; background: transparent; }
.pad-key:focus-visible { outline: 3px solid var(--hot); outline-offset: 2px; }
.btn-bio { display: flex; align-items: center; gap: 14px; width: 100%; margin-bottom: var(--sp-3); padding: 12px 16px; text-align: left; border: 1px solid color-mix(in srgb, var(--hot) 30%, var(--edge)); border-radius: 16px; background: var(--hot-soft); color: inherit; font: inherit; cursor: pointer; transition: transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-3) var(--ease-out); }
.btn-bio .bio-ico { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: linear-gradient(135deg, var(--hot), var(--hot-strong)); color: #fff; }
.btn-bio .bio-text { display: grid; gap: 2px; }
.btn-bio .muted { font-size: .85rem; }
.btn-bio:active { transform: scale(.98); }
.btn-bio.is-busy { opacity: .7; pointer-events: none; }
.btn-bio.is-busy .bio-ico { animation: pulse 1s ease-in-out infinite; }
@media (hover: hover) and (pointer: fine) { .btn-bio:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } }
@media (prefers-reduced-motion: reduce) { .pin-dots.is-shake, .pad-key.is-pop { animation: none; } .pin-dot, .pad-key { transition: none; } }
@media (max-width: 600px) {
  .entry { align-content: start; gap: var(--sp-3); padding: calc(var(--sp-3) + env(safe-area-inset-top, 0px)) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); }
  .entry-art { gap: 0; }
  .entry-brand img { width: 200px; }
  .entry-tagline, .entry-prop { display: none; }
  .entry-scene { width: 120px; margin-top: var(--sp-2); }
  .entry-stage svg { width: 100%; height: auto; }
  .entry-card { padding: 20px 18px 18px; border-radius: 26px; animation: sheet-in 420ms var(--ease-spring) both; }
  .entry-card h1 { font-size: 1.5rem; }
  .entry-sub { margin-bottom: var(--sp-3); }
  .entry-card .btn-primary { min-height: 54px; }
}
@keyframes sheet-in { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .entry-card { animation: none !important; } }
.recap { justify-content: space-between; }
.recap[hidden], .field[hidden] { display: none; }

/* Menú compacto: solo iconos (con globo por title). Se activa con el botón «Contraer menú»; en media pantalla es el predeterminado. */
@media (min-width: 1024px), (min-width: 640px) and (pointer: fine) {
  .nav-collapse { margin-bottom: 4px; }
  .frame { --side-w: 232px; }
  .frame.nav-compact { --side-w: 68px; }
  .frame.nav-compact .nav { padding: 12px 8px; align-items: stretch; }
  .frame.nav-compact .nav-link { justify-content: center; padding: 0; gap: 0; }
  .frame.nav-compact .nav-link > span, .frame.nav-compact .nav-group { display: none; }
  .frame.nav-compact .nav > .nav-link:hover > span { transform: none; }
  .frame-main { padding-left: max(12px, var(--gap)); padding-right: max(12px, var(--gap)); }
}
@media (min-width: 640px) and (max-width: 1023px) and (pointer: fine) {
  .frame-main { padding: 12px; }
  .frame-head .co { display: none; }
}

/* Sol/luna de la cabecera: el sol se tapa con un disco y queda la luna; al cambiar, destello y crece */
.theme-toggle { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 1px solid var(--chrome-line); border-radius: 50%; background: var(--chrome-hover); color: #f59e0b; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 300ms var(--ease-out), color 400ms var(--ease-out), transform 260ms var(--ease-spring), box-shadow 400ms var(--ease-out); }
.theme-toggle.is-dark { color: #c7d2fe; }
.theme-toggle svg { overflow: visible; transition: transform 600ms cubic-bezier(.34, 1.56, .64, 1); }
.theme-toggle .tt-core { transition: r 500ms var(--ease-spring); }
.theme-toggle .tt-cut { transition: cx 500ms var(--ease-spring), cy 500ms var(--ease-spring); }
.theme-toggle .tt-rays { transform-origin: 12px 12px; transition: transform 500ms var(--ease-spring), opacity 300ms var(--ease-out); }
.theme-toggle.is-dark svg { transform: rotate(-40deg); }
.theme-toggle.is-dark .tt-core { r: 8px; }
.theme-toggle.is-dark .tt-cut { cx: 17px; cy: 7px; }
.theme-toggle.is-dark .tt-rays { transform: scale(.4) rotate(-90deg); opacity: 0; }
@media all {
  .theme-toggle:hover { transform: scale(1.08); background: var(--chrome-hover-strong); box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent); }
  .theme-toggle:not(.is-dark):hover .tt-rays { transform: rotate(45deg); }
}
.theme-toggle:active { transform: scale(.92); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.theme-toggle.is-pop { animation: tt-pop 700ms var(--ease-spring); }
.theme-toggle.is-pop::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, currentColor 55%, transparent), transparent 70%); animation: tt-glow 700ms var(--ease-out) forwards; }
@keyframes tt-pop { 0% { transform: scale(1); } 35% { transform: scale(1.32); box-shadow: 0 0 26px 6px color-mix(in srgb, currentColor 45%, transparent); } 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } }
@keyframes tt-glow { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.9); } }
@media (prefers-reduced-motion: reduce) { .theme-toggle, .theme-toggle svg, .theme-toggle .tt-core, .theme-toggle .tt-cut, .theme-toggle .tt-rays { transition: none; } .theme-toggle.is-pop, .theme-toggle.is-pop::after { animation: none; } }