/* MagicBox — la caja del formulario de contacto. Colores del tema del sitio, con
   reserva por si una hoja no define la variable.

   COMPACTA (Manuel, 2026-09-15: «el formato es muy grande y si fuera todo más
   pequeño encajaría mejor los márgenes»). La caja cabe entera en un portátil de
   768 px de alto y en un móvil sin desplazarse; los juegos se encogen con la ALTURA
   de la pantalla (vh), no solo con el ancho, y los botones se quedan pegados abajo
   por si aun así no cabe. Sin backdrop-filter: difuminar toda la página detrás de
   la capa obliga a repintarla entera y en equipos modestos se notaba lento. */
.mb-capa {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    padding: 12px; box-sizing: border-box;
    background: rgba(4, 6, 12, .86);
}
.mb-capa[hidden] { display: none; }
body.mb-abierta { overflow: hidden; }

.mb-caja {
    width: 100%; max-width: 440px;
    max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
    overflow-y: auto; overscroll-behavior: contain;
    box-sizing: border-box; padding: 14px 16px 0;
    background: var(--color-surface, #111627);
    border: 1px solid var(--color-border, #1f2637);
    border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(14, 165, 233, .15), 0 16px 40px rgba(0, 0, 0, .5);
    color: var(--color-text, #e2e8f0);
    font-size: .9rem;
}
.mb-cabecera { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.mb-marca { font-size: .8rem; font-weight: 700; letter-spacing: .08em; color: var(--color-primary, #0ea5e9); }
.mb-sub { font-size: .7rem; color: var(--color-text-dim, #94a3b8); font-family: var(--font-mono, monospace); }
.mb-titulo { margin: 0 0 4px; font-size: 1.1rem; line-height: 1.25; color: #fff; }
.mb-alto { color: #fda4af; }
.mb-instruccion { margin: 0 0 8px; color: var(--color-text-dim, #94a3b8); font-size: .82rem; line-height: 1.4; }

.mb-juego { margin: 4px 0; }
.mb-aviso { margin: 6px 0 0; font-size: .82rem; line-height: 1.35; }
.mb-aviso:empty { margin: 0; }
.mb-aviso-info { color: #fcd34d; }
.mb-aviso-error { color: #fda4af; }

/* Los botones, pegados al pie de la caja: siempre a la vista. */
.mb-botones {
    position: sticky; bottom: 0; z-index: 4;
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end;
    margin: 8px -16px 0; padding: 8px 16px 12px;
    background: var(--color-surface, #111627);
    border-top: 1px solid var(--color-border, #1f2637);
}
.mb-btn {
    font: inherit; font-size: .85rem; cursor: pointer; border-radius: 8px; padding: 6px 13px;
    border: 1px solid var(--color-border, #1f2637); background: transparent; color: var(--color-text, #e2e8f0);
}
.mb-btn:disabled { opacity: .45; cursor: default; }
.mb-btn-pri { background: var(--color-primary, #0ea5e9); border-color: var(--color-primary, #0ea5e9); color: #04121c; font-weight: 700; }
.mb-btn-sec:hover:not(:disabled) { border-color: var(--color-primary, #0ea5e9); }
.mb-btn:focus-visible, .mb-pieza:focus-visible, .mb-tab:focus-visible, .mb-planta:focus-visible {
    outline: 2px solid var(--color-primary, #0ea5e9); outline-offset: 2px;
}

.mb-que { margin: 6px 0 0; font-size: .75rem; color: var(--color-text-dim, #94a3b8); }
.mb-que summary { cursor: pointer; }
.mb-que p { margin: 4px 0 0; line-height: 1.4; }

/* Anillos */
.mb-anillos-caja { display: flex; justify-content: center; }
.mb-anillos { width: min(200px, 28vh, 100%); aspect-ratio: 1; touch-action: none; cursor: grab; user-select: none; }
.mb-anillo { transform-box: view-box; transform-origin: 150px 150px; transition: transform .25s ease; }
.mb-anillo.mb-sin-transicion { transition: none; }
.mb-anillo:not(.mb-activo) { opacity: .6; }
/* Anillo elegido y giro, en una sola fila. */
.mb-controles { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; margin-top: 6px; }
.mb-tabs, .mb-giro { display: flex; justify-content: center; gap: 4px; }
.mb-tab {
    font: inherit; font-size: .78rem; cursor: pointer; padding: 3px 9px; border-radius: 999px;
    border: 1px solid var(--color-border, #1f2637); background: transparent; color: var(--color-text-dim, #94a3b8);
}
.mb-tab[aria-pressed="true"] { border-color: var(--color-primary, #0ea5e9); color: #fff; }
.mb-giro .mb-btn { font-size: 1rem; line-height: 1; padding: 3px 12px; }
.mb-estados { list-style: none; margin: 6px 0 0; padding: 0; font-size: .74rem; line-height: 1.35; color: var(--color-text-dim, #94a3b8); }
.mb-estados li { padding: 1px 0; }
.mb-estados li.mb-bien { color: #86efac; }

/* Runas */
.mb-runas-sello { display: flex; justify-content: center; gap: 12px; list-style: none; margin: 0 0 8px; padding: 0; counter-reset: sello; }
.mb-runas-sello li { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: .72rem; color: var(--color-text-dim, #94a3b8); }
.mb-runas-sello .mb-runa { width: 22px; height: 32px; color: #fcd34d; }
.mb-rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 228px; margin: 0 auto; }
.mb-pieza {
    position: relative; font: inherit; cursor: pointer; padding: 5px 4px; border-radius: 8px;
    border: 1px solid var(--color-border, #1f2637); background: var(--color-bg, #0a0d16); color: var(--color-text, #e2e8f0);
}
.mb-pieza .mb-runa { width: 20px; height: 29px; }
.mb-pieza[aria-pressed="true"] { border-color: #eab308; color: #fcd34d; box-shadow: 0 0 10px rgba(234, 179, 8, .25); }
.mb-pieza[data-orden]:not([data-orden=""])::after {
    content: attr(data-orden); position: absolute; top: 2px; right: 5px;
    font-size: .68rem; font-family: var(--font-mono, monospace); color: #fcd34d;
}
.mb-elegidas { text-align: center; font-size: .75rem; color: var(--color-text-dim, #94a3b8); margin: 6px 0 0; }

/* Casa */
.mb-casa { max-width: 240px; margin: 0 auto 8px; }
.mb-tejado { height: 30px; background: #334155; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mb-planta {
    display: flex; justify-content: space-between; align-items: center; width: 100%; box-sizing: border-box;
    font: inherit; cursor: pointer; padding: 9px 12px; margin: 0;
    border: 1px solid var(--color-border, #1f2637); border-top: 0; background: var(--color-bg, #0a0d16); color: var(--color-text, #e2e8f0);
}
.mb-planta:first-of-type { border-top: 1px solid var(--color-border, #1f2637); }
.mb-planta-nombre { font-size: .72rem; color: var(--color-text-dim, #94a3b8); }
.mb-planta-hueco { font-size: .88rem; }
.mb-bandeja { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 240px; margin: 0 auto; }
.mb-bloque span { display: block; font-size: 1.2rem; line-height: 1.2; }
.mb-bloque small { display: block; font-size: .68rem; color: var(--color-text-dim, #94a3b8); }

/* Paso 2: vista previa y normas */
.mb-previa { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0; font-size: .82rem; }
.mb-previa dt { color: var(--color-text-dim, #94a3b8); }
.mb-previa dd { margin: 0; overflow-wrap: anywhere; }
.mb-previa-msg {
    white-space: pre-wrap; max-height: min(90px, 14vh); overflow-y: auto; padding: 5px 8px; border-radius: 6px;
    background: var(--color-bg, #0a0d16); border-left: 3px solid var(--color-primary, #0ea5e9);
}
.mb-normas {
    margin: 8px 0; padding: 8px 11px; border-radius: 8px; font-size: .78rem; line-height: 1.4;
    border: 1px solid rgba(244, 63, 94, .45); background: rgba(244, 63, 94, .06);
}
.mb-normas p { margin: 0 0 4px; }
.mb-normas ul { margin: 0 0 5px; padding-left: 16px; }
.mb-normas li { margin: 0 0 3px; }
.mb-ref { font-size: .7rem; color: var(--color-text-dim, #94a3b8); font-family: var(--font-mono, monospace); }
.mb-ref a { color: var(--color-primary, #0ea5e9); }
.mb-casilla { display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; line-height: 1.4; cursor: pointer; }
.mb-casilla input { margin-top: 2px; }
.mb-paso[data-paso="normas"] .mb-botones { margin-bottom: 0; }

/* El sello: indicador de estado (del prototipo «scan vertical»). Cada estado pone su color.
   En fino: una franja de 36 px en lugar de la tarjeta de 64. */
.mb-sello {
    --mb-c: #3b82f6; --mb-g: rgba(59, 130, 246, .35);
    width: 100%; box-sizing: border-box; margin: 8px 0 0; padding: 6px 8px;
    background: rgba(16, 18, 27, .94); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px;
    font-size: .74rem; text-align: left;
}
.mb-sello-pensando   { --mb-c: #f59e0b; --mb-g: rgba(245, 158, 11, .4); }
.mb-sello-denegado   { --mb-c: #ef4444; --mb-g: rgba(239, 68, 68, .4); }
.mb-sello-sinred     { --mb-c: #64748b; --mb-g: rgba(100, 116, 139, .3); }
.mb-sello-verificado { --mb-c: #22c55e; --mb-g: rgba(34, 197, 94, .4); }
.mb-sello-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.mb-sello-titulo { font-weight: 600; color: #fff; }
.mb-sello-insignia {
    font-family: var(--font-mono, monospace); font-size: .58rem; text-transform: uppercase; letter-spacing: .5px;
    padding: 1px 5px; border-radius: 4px; border: 1px solid var(--mb-c); color: var(--mb-c);
}
.mb-sello-zona {
    position: relative; height: 36px; overflow: hidden; display: flex; align-items: center; justify-content: flex-start;
    border: 1px solid rgba(255, 255, 255, .1); border-radius: 6px; background: rgba(255, 255, 255, .02);
    transition: border-color .3s ease, box-shadow .3s ease;
}
.mb-sello:not(.mb-sello-espera) .mb-sello-zona { border-color: var(--mb-c); box-shadow: 0 0 10px var(--mb-g); }
.mb-sello-lluvia { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .35; pointer-events: none; }
.mb-sello-haz {
    position: absolute; left: 0; top: -4px; width: 100%; height: 2px; opacity: 0; pointer-events: none; z-index: 3;
    background: linear-gradient(90deg, transparent 0%, var(--mb-c) 30%, #fff 50%, var(--mb-c) 70%, transparent 100%);
    box-shadow: 0 0 8px 2px var(--mb-g);
}
.mb-sello-pensando .mb-sello-haz { opacity: 1; animation: mbBarrido 1.6s cubic-bezier(.4, 0, .2, 1) infinite; }
.mb-sello-pasada .mb-sello-haz { opacity: 1; animation: mbPasada .7s ease-out 1 forwards; }
@keyframes mbBarrido { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes mbPasada { 0% { top: 0; opacity: 1; } 100% { top: 100%; opacity: 0; } }
.mb-sello-contenido { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 0 8px; min-width: 0; }
.mb-sello-simbolo { font-size: 1rem; line-height: 1; }
.mb-sello-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.mb-sello-texto { color: #fff; font-weight: 500; }
.mb-sello-sub { font-size: .64rem; color: var(--color-text-dim, #94a3b8); font-family: var(--font-mono, monospace); }
.mb-sello-pie { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .64rem; font-family: var(--font-mono, monospace); color: var(--color-text-dim, #94a3b8); }
.mb-sello-ms { margin-left: auto; }
.mb-sello-punto { width: 5px; height: 5px; border-radius: 50%; background: var(--mb-c); box-shadow: 0 0 5px var(--mb-g); }
.mb-sello-pensando .mb-sello-punto { animation: mbPunto .8s infinite alternate; }
@keyframes mbPunto { from { opacity: .3; transform: scale(.9); } to { opacity: 1; transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) {
    .mb-sello-haz, .mb-sello-punto { animation: none !important; }
    .mb-anillo { transition: none; }
}

/* Pantallas bajas (portátil con barra de marcadores, móvil en horizontal): el sello
   se queda en su franja, sin cabecera ni pie, y el juego se encoge un poco más. */
@media (max-height: 640px) {
    .mb-sello-cab, .mb-sello-pie { display: none; }
    .mb-instruccion { margin-bottom: 4px; }
    .mb-tejado { height: 20px; }
    .mb-planta { padding: 6px 12px; }
}
@media (max-width: 420px) {
    .mb-capa { padding: 8px; }
    .mb-caja { padding: 12px 12px 0; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
    .mb-botones { margin-left: -12px; margin-right: -12px; padding: 8px 12px 10px; }
}