/* ╔══════════════════════════════════════════════════════════════════════╗ ║ TIAROT — VIEW MANIFEST (body[data-view]) ║ ║ Fuente única de verdad para visibilidad de vistas. ║ ║ ║ ║ REGLA ARQUITECTÓNICA: ║ ║ · JS solo escribe: document.body.dataset.view = 'X' ║ ║ · NUNCA manipular style.display en elementos listados aquí ║ ║ · Para añadir un nuevo elemento: actualiza este manifest primero ║ ║ ║ ║ Elemento motor-core ritual resultado ║ ║ ───────────────────────────────────────────────────── ║ ║ #wrap-try-app show(flex) show show ║ ║ section#try-app show HIDE HIDE ← fix caja blanca ║ ║ #motor-core-title show HIDE HIDE (padre oculto) ║ ║ .calculator-box show HIDE HIDE (padre oculto) ║ ║ #motor-core-inner show HIDE HIDE (padre oculto) ║ ║ .main-query-section show HIDE HIDE (padre oculto) ║ ║ .user-data-box show HIDE HIDE (padre oculto) ║ ║ #panelOpciones show HIDE HIDE (padre oculto) ║ ║ #grupoInicialAcciones show HIDE HIDE (padre oculto) ║ ║ #freeTrialHook show* HIDE HIDE *depende auth ║ ║ #requirements show* HIDE HIDE *depende auth ║ ║ #panelSendero JS* HIDE JS* *panel datos-estado║ ║ #ritualInstructions HIDE show HIDE ║ ║ #mazo HIDE show HIDE ║ ║ #ritualTimerContainer HIDE show HIDE ║ ║ #loader HIDE show HIDE ║ ║ #interpretacion HIDE HIDE show ║ ║ #resp-sticky-bar HIDE HIDE show ║ ║ ║ ║ Nota: JS* = controlado por JS (estado de datos, no de vista) ║ ║ Vistas: 'motor-core' | 'ritual' | 'resultado' ║ ╚══════════════════════════════════════════════════════════════════════╝ */ /* ═══════════════════════════════════════════════════════════════════════════ CONTENEDORES RAÍZ — wrap visible en todas las vistas ═══════════════════════════════════════════════════════════════════════════ */ body[data-view] #wrap-try-app { display: flex !important; } /* ═══════════════════════════════════════════════════════════════════════════ CENTRADO GLOBAL — motor-core-inner se centra sin importar el contexto ═══════════════════════════════════════════════════════════════════════════ */ #motor-core-inner { max-width: 740px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; width: 100% !important; display: block !important; } /* ═══════════════════════════════════════════════════════════════════════════ MOTOR CORE (motor-core) — visible solo en vista motor-core ─────────────────────────────────────────────────────────────────────────── CLAVE: ocultamos section#try-app (el padre) — esto oculta automáticamente .calculator-box, #motor-core-inner y TODOS los hijos. Elimina la "caja blanca" que aparecía durante procesando/ritual. ═══════════════════════════════════════════════════════════════════════════ */ body[data-view="ritual"] section#try-app, body[data-view="resultado"] section#try-app { display: none !important; } /* Redundancia defensiva: también ocultamos hijos explícitamente para casos en que algún JS externo cambie el display del padre en el futuro */ body[data-view="ritual"] #motor-core-inner, body[data-view="resultado"] #motor-core-inner { display: none !important; } body[data-view="ritual"] .main-query-section, body[data-view="resultado"] .main-query-section { display: none !important; } body[data-view="ritual"] .user-data-box, body[data-view="resultado"] .user-data-box { display: none !important; } body[data-view="ritual"] #panelOpciones, body[data-view="resultado"] #panelOpciones { display: none !important; } body[data-view="ritual"] #grupoInicialAcciones, body[data-view="resultado"] #grupoInicialAcciones { display: none !important; } body[data-view="ritual"] #compatibilityBox, body[data-view="resultado"] #compatibilityBox { display: none !important; } body[data-view="ritual"] #requirements, body[data-view="resultado"] #requirements { display: none !important; } /* #panelSendero: panel de datos de estado — controlado exclusivamente por JS. No pertenece al View Manifest porque es un modal de datos (como modal-auth), puede aparecer en 'motor-core' Y en 'resultado'. El padre section#try-app ya lo oculta en ritual (display:none cascade). */ body[data-view="ritual"] #freeTrialHook, body[data-view="resultado"] #freeTrialHook { display: none !important; } body[data-view="ritual"] #motor-core-title, body[data-view="resultado"] #motor-core-title { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ RITUAL — visible solo en vista ritual (partials/ritual.html) El .ritual-view-wrap envuelve todos los elementos del ritual. Ocultar el wrapper oculta todos sus hijos sin reglas individuales. ═══════════════════════════════════════════════════════════════════════════ */ /* Ocultar el wrapper completo en motor-core y resultado */ body[data-view="motor-core"] .ritual-view-wrap, body[data-view="resultado"] .ritual-view-wrap { display: none !important; } /* Mostrar el wrapper en ritual — sobreescribe cualquier inline display:none */ body[data-view="ritual"] .ritual-view-wrap { display: block !important; } /* Ocultar los elementos individuales del ritual si se usan fuera del wrapper (retrocompatibilidad con código JS que los referencia directamente) */ body[data-view="motor-core"] #ritualInstructions, body[data-view="resultado"] #ritualInstructions { display: none !important; } body[data-view="motor-core"] #mazo, body[data-view="resultado"] #mazo { display: none !important; } body[data-view="motor-core"] #ritualTimerContainer, body[data-view="resultado"] #ritualTimerContainer { display: none !important; } body[data-view="motor-core"] #loader, body[data-view="resultado"] #loader { display: none !important; } /* Mostrar #ritualInstructions explícitamente en ritual (sobreescribe inline display:none del HTML) */ body[data-view="ritual"] #ritualInstructions { display: block !important; } /* Ritual: centrado y ancho máximo igual al motor core card */ body[data-view="ritual"] .ritual-view-wrap { max-width: var(--container-section-max); margin-left: auto; margin-right: auto; padding: var(--space-4); box-sizing: border-box; } /* ═══════════════════════════════════════════════════════════════════════════ RESULTADO — visible solo en vista resultado ═══════════════════════════════════════════════════════════════════════════ */ body[data-view="motor-core"] #interpretacion, body[data-view="ritual"] #interpretacion { display: none !important; } body[data-view="resultado"] #interpretacion { display: block !important; /* ── Consume el sistema de card via tokens (_tokens.css) ────────────────── Mismo token que .landing-section. Para cambiar el aspecto visual de ambos, editar SOLO _tokens.css — no este archivo ni motorcore.css. */ width: 100% !important; max-width: var(--container-section-max) !important; /* = 1100px via token */ margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; background: var(--card-bg) !important; /* = #fff via token */ border: var(--card-border) !important; /* via token */ border-top: var(--card-border-top) !important; /* via token */ border-radius: var(--card-radius) !important; /* = 20px via token */ box-shadow: var(--card-shadow) !important; /* via token */ padding: var(--card-padding-app) !important; /* = 24px via token */ position: relative !important; overflow: hidden !important; } @media (max-width: 600px) { body[data-view="resultado"] #interpretacion { padding: var(--space-5) !important; /* = 20px en mobile */ } } /* Barra de acciones (sticky bar): solo en resultado */ body[data-view="motor-core"] #resp-sticky-bar, body[data-view="ritual"] #resp-sticky-bar { display: none !important; } body[data-view="resultado"] #resp-sticky-bar { display: flex !important; } /* ═══════════════════════════════════════════════════════════════════════════ LAYOUT — padding lateral cuando no hay motor core visible ═══════════════════════════════════════════════════════════════════════════ */ body[data-view="resultado"] #wrap-try-app, body[data-view="ritual"] #wrap-try-app { padding-left: 16px; padding-right: 16px; box-sizing: border-box; background: transparent; }