/* Estructura «Escenario de decisión» (punto 48). Solo rige con <html data-ui="escenario">.
   Mundo «Storyboard del estudio» conservado: petróleo, papel frío, teal de estudio para la acción, luz menta para el momento en curso.
   Una sola cosa a la vez: el tablero o el escenario de la decisión. */
html[data-ui=escenario]{--esc-bar:#12393e;--esc-bar-hi:#185258;--esc-on-bar:#e6f2f2;--esc-on-bar-soft:#a9c6c9;--esc-mint:#68e9df;--esc-mint-text:#8ef0e6;--esc-teal:#007d78;--esc-teal-deep:#075c5c;--esc-teal-sel:#00998f;--esc-ink:#162838;--esc-muted:#5b6b78;--esc-line:#e3e9ed;--esc-control:#c9d4db;--esc-paper:#f7f9fb;--esc-select:#e6f9f6;--esc-shadow:0 1px 2px #12393e0f,0 14px 34px -20px #12393e47;--esc-header:64px}
html[data-ui=escenario] body{background:var(--esc-paper);caret-color:var(--esc-teal)}
html[data-ui=escenario] ::selection{background:#68e9df73;color:var(--esc-ink)}

/* Barra superior: petróleo, con los momentos al centro. */
html[data-ui=escenario] .app-header{position:sticky;top:0;z-index:40;height:var(--esc-header);min-height:0;flex-wrap:nowrap;align-items:center;gap:18px;padding:0 20px;background:var(--esc-bar);border:0;border-top:0;color:var(--esc-on-bar);box-shadow:0 10px 28px -22px #0b2427}
html[data-ui=escenario] .app-header .brand{flex:none;gap:10px}
html[data-ui=escenario] .app-header .brand-logo{width:36px;height:36px;border-radius:9px}
html[data-ui=escenario] .app-header .brand-text,html[data-ui=escenario] .app-header .brand-text *{color:#fff}
html[data-ui=escenario] .app-header .project-title{flex:0 1 240px;min-width:150px;display:flex;flex-direction:column;justify-content:center}
html[data-ui=escenario] .app-header #projectName{color:#fff;background:transparent;border:1px solid transparent;border-radius:8px;font:700 15px/1.2 Manrope,system-ui,sans-serif;padding:5px 7px;width:100%;text-overflow:ellipsis}
html[data-ui=escenario] .app-header #projectName:hover{border-color:#ffffff33}
html[data-ui=escenario] .app-header #projectName:focus{border-color:var(--esc-mint);outline:0;background:#ffffff0d}
html[data-ui=escenario] .app-header .save-state{color:var(--esc-on-bar-soft);font-size:12px;padding-left:8px}
html[data-ui=escenario] .esc-moments{flex:1 1 auto;min-width:0;display:flex;justify-content:center}
html[data-ui=escenario] #phaseNav{display:flex;gap:2px;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
html[data-ui=escenario] #phaseNav::-webkit-scrollbar{display:none}
html[data-ui=escenario] .esc-moments .phase-button{flex:none;display:inline-flex;align-items:center;gap:8px;height:40px;margin:0;padding:0 12px 0 6px;border:0;border-radius:10px;background:transparent;color:var(--esc-on-bar);font:600 14px/1 'DM Sans',system-ui,sans-serif;white-space:nowrap;width:auto;text-align:left;cursor:pointer;transition:background .15s,color .15s}
html[data-ui=escenario] .esc-moments .phase-button:hover{background:#ffffff14}
html[data-ui=escenario] .esc-moments .phase-number{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid #ffffff59;font:800 13px/1 Manrope,system-ui,sans-serif;color:inherit;background:transparent;margin:0}
html[data-ui=escenario] .esc-moments .phase-count{font-size:12px;font-weight:500;color:var(--esc-on-bar-soft);margin:0;background:none;padding:0}
html[data-ui=escenario] .esc-moments .phase-button.selected{background:var(--esc-bar-hi);color:var(--esc-mint-text)}
html[data-ui=escenario] .esc-moments .phase-button.selected .phase-number{background:var(--esc-mint);border-color:var(--esc-mint);color:var(--esc-bar)}
html[data-ui=escenario] .esc-moments .phase-button.selected .phase-count{color:var(--esc-mint-text)}
html[data-ui=escenario] .app-header :focus-visible{outline:2px solid var(--esc-mint);outline-offset:2px}
/* Botones de la barra: fantasma sobre petróleo; el color de acción queda para el contenido. */
html[data-ui=escenario] .app-header .button:not(.hdr-panel *){background:transparent;color:var(--esc-on-bar);border:1px solid #ffffff38;box-shadow:none;min-height:40px;border-radius:10px;padding:0 14px;font-weight:600}
html[data-ui=escenario] .app-header .button:not(.hdr-panel *):hover{background:#ffffff14;border-color:#ffffff66}
html[data-ui=escenario] .app-header .hdr-credits .account-button{background:#ffffff12;border-color:transparent;color:var(--esc-mint-text)}
html[data-ui=escenario] .app-header .hdr-tools{flex:none;margin-left:0;gap:8px}
html[data-ui=escenario] .app-header .hdr-panel{color:var(--esc-ink)}

/* Sin barra lateral: el tablero ocupa el papel completo, centrado. */
html[data-ui=escenario] .app-layout{display:block;height:auto;min-height:calc(100dvh - var(--esc-header));overflow:visible;grid-template-columns:none}
html[data-ui=escenario] .sidebar{display:none}
html[data-ui=escenario] .workspace{display:flex;max-width:1200px;height:auto;margin:0 auto;padding:28px 32px 104px;overflow:visible;background:transparent}
html[data-ui=escenario] .board-viewport{height:min(64vh,660px);border-radius:16px}
html[data-ui=escenario] .workspace-heading h1{font:800 clamp(26px,2.6vw,34px)/1.12 Manrope,system-ui,sans-serif;letter-spacing:-1px;color:var(--esc-ink)}
html[data-ui=escenario] .flow-mode-label{text-transform:none;letter-spacing:0;font:600 13px/1.3 'DM Sans',system-ui,sans-serif;color:var(--esc-muted)}
/* «Te toca»: una frase con su botón, sin rótulo encima. */
html[data-ui=escenario] .next-action-bar{display:flex;align-items:center;gap:16px;padding:14px 14px 14px 20px;border:1px solid var(--esc-line);border-radius:14px;background:#fff;box-shadow:var(--esc-shadow)}
html[data-ui=escenario] .next-action-bar .next-action-label{display:none}
html[data-ui=escenario] .next-action-bar .next-action-text{flex:1;font:600 16px/1.4 'DM Sans',system-ui,sans-serif;color:var(--esc-ink)}
html[data-ui=escenario] .next-action-bar .button{background:var(--esc-teal);border-color:var(--esc-teal);color:#fff;min-height:44px;padding:0 20px;border-radius:10px;font-size:15px;font-weight:700}
html[data-ui=escenario] .next-action-bar .button:hover{background:var(--esc-teal-deep)}

/* Escenario de la decisión: reemplaza al tablero, columna central. */
html[data-ui=escenario] body.mobile-detail-open .workspace{display:none}
html[data-ui=escenario] .detail-panel{view-transition-name:none}
html[data-ui=escenario] body.mobile-detail-open .detail-panel{display:block;position:relative;inset:auto;top:auto;right:auto;bottom:auto;z-index:1;width:min(760px,calc(100% - 40px));max-width:none;height:auto;max-height:none;margin:0 auto;padding:22px 0 0;overflow:visible;border:0;background:transparent;box-shadow:none;view-transition-name:esc-stage}
html[data-ui=escenario] .detail-panel .detail-kicker{position:static;display:flex;align-items:center;gap:14px;margin:0 0 26px;padding:0;background:none;border:0;box-shadow:none}
html[data-ui=escenario] .detail-panel .detail-kicker>div:not(.esc-x),html[data-ui=escenario] .detail-panel .close-mobile,html[data-ui=escenario] .detail-panel .detail-icon{display:none}
html[data-ui=escenario] .detail-panel .kicker-chat{display:inline-grid!important;place-items:center;margin-left:auto;width:44px;height:44px;border-radius:12px}
html[data-ui=escenario] body.mobile-detail-open .feedback-toggle{display:none!important}
html[data-ui=escenario] .esc-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 10px;border:1px solid var(--esc-control);border-radius:10px;background:#fff;color:var(--esc-ink);font:600 15px/1 'DM Sans',system-ui,sans-serif;box-shadow:none}
html[data-ui=escenario] .esc-back:hover{border-color:var(--esc-teal-sel);color:var(--esc-teal-deep)}
html[data-ui=escenario] .esc-where{font-size:14px;color:var(--esc-muted)}
html[data-ui=escenario] .detail-panel h2{font:800 clamp(28px,3.2vw,38px)/1.12 Manrope,system-ui,sans-serif;letter-spacing:-1.1px;color:var(--esc-ink);margin:0 0 8px;text-wrap:balance}
html[data-ui=escenario] .detail-panel .detail-intro{font-size:17px;line-height:1.55;color:var(--esc-muted);margin:0 0 22px;max-width:60ch}
html[data-ui=escenario] .detail-panel .workflow-navigation{margin:0 0 18px}
html[data-ui=escenario] .detail-panel .workflow-navigation>div{display:flex;gap:8px;justify-content:flex-start}
html[data-ui=escenario] .detail-panel .workflow-navigation .button{flex:0 0 auto;min-height:40px;padding:0 14px;border-radius:10px;background:transparent;border:1px solid var(--esc-control);color:var(--esc-ink);font-size:14px;box-shadow:none}
html[data-ui=escenario] .detail-panel .workflow-navigation .button:hover{border-color:var(--esc-teal-sel)}
html[data-ui=escenario] .detail-panel .step-tabs{display:flex;gap:4px;margin:0 0 18px;padding:0;background:none;border-bottom:1px solid var(--esc-line);border-radius:0}
html[data-ui=escenario] .detail-panel .step-tabs button{flex:0 0 auto;min-height:44px;padding:0 14px;border:0;border-radius:0;background:none;color:var(--esc-muted);font:600 15px/1 'DM Sans',system-ui,sans-serif;box-shadow:none}
html[data-ui=escenario] .detail-panel .step-tabs button.active{color:var(--esc-ink);box-shadow:inset 0 -2px 0 var(--esc-teal)}
/* El escenario es la superficie: el cuerpo no se enmarca (las preguntas y opciones llevan su propio marco; nunca tarjeta dentro de tarjeta). */
html[data-ui=escenario] .detail-panel .form-body{background:none;border:0;border-radius:0;padding:4px 0 0;box-shadow:none}
html[data-ui=escenario] .detail-panel .form-body h3{font:700 20px/1.3 Manrope,system-ui,sans-serif;letter-spacing:-.3px;color:var(--esc-ink);margin:4px 0 14px}
html[data-ui=escenario] .detail-panel .choice-card{border:1px solid var(--esc-control);border-radius:12px;padding:16px 18px;background:#fff;box-shadow:none;transition:border-color .15s,background .15s,box-shadow .15s}
html[data-ui=escenario] .detail-panel .choice-card:hover{border-color:var(--esc-teal-sel)}
html[data-ui=escenario] .detail-panel .choice-card.selected,html[data-ui=escenario] .detail-panel .choice-card[aria-pressed=true]{background:var(--esc-select);border-color:var(--esc-teal-sel);box-shadow:0 0 0 1px var(--esc-teal-sel)}
html[data-ui=escenario] .detail-panel .choice-card strong{font:700 16px/1.3 'DM Sans',system-ui,sans-serif;color:var(--esc-ink)}
html[data-ui=escenario] .detail-panel .form-field input,html[data-ui=escenario] .detail-panel .form-field textarea,html[data-ui=escenario] .detail-panel .form-field select{border:1px solid var(--esc-control);border-radius:10px;min-height:48px;padding:12px 14px;font-size:16px;background:#fff}
html[data-ui=escenario] .detail-panel .form-field textarea{min-height:140px}
html[data-ui=escenario] .detail-panel .form-field :is(input,textarea,select):focus{border-color:var(--esc-teal);box-shadow:0 0 0 3px #007d7826;outline:0}
html[data-ui=escenario] .detail-panel .detail-section{margin:28px 4px 0}
html[data-ui=escenario] .detail-panel .detail-section h3{font:700 17px/1.3 Manrope,system-ui,sans-serif;color:var(--esc-ink)}
/* Acción principal fija abajo mientras decides (solo cuando hay un botón principal visible). */
html[data-ui=escenario] .detail-panel .detail-actions{margin:24px 0 0}
html[data-ui=escenario] .detail-panel .detail-actions:has(> .button.primary:not(.q-wait):not([hidden])){position:sticky;bottom:0;z-index:6;margin:24px -20px 0;padding:14px 20px 18px;background:var(--esc-paper);border-top:1px solid var(--esc-line);box-shadow:0 -14px 28px -22px #12393e59}
html[data-ui=escenario] .detail-panel .detail-actions .button.primary{min-height:52px;border-radius:12px;font:700 16px/1 'DM Sans',system-ui,sans-serif;background:var(--esc-teal);border-color:var(--esc-teal)}
html[data-ui=escenario] .detail-panel .detail-actions .button.primary:hover{background:var(--esc-teal-deep)}
html[data-ui=escenario] .detail-panel .detail-actions .hint,html[data-ui=escenario] .detail-panel .detail-actions .gate-message{font-size:13px}

/* Transición del escenario (respeta «reducir movimiento»: escenario.js no la inicia). */
/* El origen (viñeta o botón) se desvanece rápido; el destino se recorta desde arriba mientras el marco crece, sin deformarse. */
::view-transition-group(esc-stage){animation-duration:.42s;animation-timing-function:cubic-bezier(.16,1,.3,1);overflow:clip;border-radius:16px}
::view-transition-image-pair(esc-stage){isolation:auto}
::view-transition-old(esc-stage){animation:esc-out .14s ease-out both;object-fit:none;object-position:50% 0;height:auto}
::view-transition-new(esc-stage){animation:esc-in .3s .06s cubic-bezier(.16,1,.3,1) both;object-fit:none;object-position:50% 0;height:auto}
@keyframes esc-out{to{opacity:0}}
@keyframes esc-in{from{opacity:0}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.24s}

/* Bajo 1500 px: el momento actual con su nombre; los demás, solo con su número (el nombre sigue disponible para lectores de pantalla). */
@media (max-width:1499px){
 html[data-ui=escenario] .esc-moments .phase-button:not(.selected){font-size:0;gap:0;padding:0 7px}
 html[data-ui=escenario] .esc-moments .phase-button:not(.selected) .phase-number{font-size:13px}
 html[data-ui=escenario] .esc-moments .phase-button:not(.selected) .phase-count{display:none}
 html[data-ui=escenario] .app-header .save-state{display:none}
}
@media (max-width:1100px){
 html[data-ui=escenario] .app-header .brand-text{display:none}
}
/* Celular: barra con logo, proyecto y Menú; los momentos en una segunda fila deslizable; el escenario a pantalla completa. */
@media (max-width:760px){
 html[data-ui=escenario]{--esc-header:108px}
 html[data-ui=escenario] .app-header{flex-wrap:wrap;height:auto;row-gap:4px;padding:8px 12px 6px;gap:8px}
 html[data-ui=escenario] .app-header .brand-text{display:none}
 html[data-ui=escenario] .app-header .project-title{flex:1 1 0}
 html[data-ui=escenario] .app-header .save-state{display:none}
 html[data-ui=escenario] .esc-moments{order:10;flex:1 1 100%;justify-content:flex-start;margin:0;padding:0}
 html[data-ui=escenario] .workspace-heading{flex-direction:column;align-items:stretch;gap:14px}
 html[data-ui=escenario] .workspace-heading h1{font-size:28px}
 html[data-ui=escenario] .flow-mode-switch{align-items:flex-start;text-align:left}
 html[data-ui=escenario] .flow-mode-switch .flow-mode-fixed,html[data-ui=escenario] .flow-mode-switch [role=radiogroup]{display:flex;flex-wrap:wrap;gap:6px;border-radius:14px}
 html[data-ui=escenario] .esc-moments .phase-button{font-size:0;height:44px;min-width:44px;justify-content:center;padding:0 9px}
 html[data-ui=escenario] .esc-moments .phase-button.selected{font-size:14px;padding:0 14px 0 8px}
 html[data-ui=escenario] .esc-moments .phase-button.selected .phase-count{display:none}
 html[data-ui=escenario] .workspace{padding:18px 16px 96px}
 html[data-ui=escenario] .board-viewport{height:58vh}
 html[data-ui=escenario] .next-action-bar{flex-wrap:wrap;padding:14px 16px}
 html[data-ui=escenario] .next-action-bar .button{flex:1 1 100%}
 html[data-ui=escenario] body.mobile-detail-open .detail-panel{width:calc(100% - 32px);padding-top:14px}
 html[data-ui=escenario] .detail-panel .detail-kicker{margin-bottom:18px}
 html[data-ui=escenario] .esc-where{display:none}
 html[data-ui=escenario] .detail-panel .detail-actions{margin:20px -16px 0;padding:12px 16px 16px}
 /* La barra fija (con :has, más específica) usaba los márgenes de escritorio (-20 px) y se salía 4 px por lado (prueba completa). */
 html[data-ui=escenario] .detail-panel .detail-actions:has(> .button.primary:not(.q-wait):not([hidden])){margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
}
/* Hasta 980 px: los momentos pasan a una segunda fila deslizable bajo la barra (en escritorio angosto y en celular). */
@media (max-width:980px){
 html[data-ui=escenario]{--esc-header:112px}
 html[data-ui=escenario] .app-header{flex-wrap:wrap;height:auto;row-gap:6px;padding:8px 16px 6px}
 html[data-ui=escenario] .esc-moments{order:10;flex:1 1 100%;justify-content:flex-start;margin:0;padding:0}
 html[data-ui=escenario] .app-header .project-title{flex:1 1 0}
 html[data-ui=escenario] .esc-moments .phase-button:not(.selected){font-size:0;gap:0;padding:0 9px;min-width:44px;height:44px;justify-content:center}
 html[data-ui=escenario] .esc-moments .phase-button.selected{height:44px}
}

/* Diálogos (Mis proyectos, Cuenta, Resumen, Nuevo proyecto) con el mismo lenguaje: marco amplio, título Manrope, fondo petróleo atenuado. */
html[data-ui=escenario] dialog{border:0;border-radius:20px;padding:28px;box-shadow:0 32px 80px -32px #12393e8c;color:var(--esc-ink)}
html[data-ui=escenario] dialog::backdrop{background:#0b2427a6}
html[data-ui=escenario] dialog h2{font:800 24px/1.2 Manrope,system-ui,sans-serif;letter-spacing:-.6px;color:var(--esc-ink)}
html[data-ui=escenario] dialog .dialog-heading{align-items:center;margin-bottom:14px}
html[data-ui=escenario] dialog .dialog-heading .eyebrow{display:none}
html[data-ui=escenario] dialog .icon-button{width:44px;height:44px;border-radius:12px;border:1px solid var(--esc-control);background:#fff;font-size:20px;color:var(--esc-ink)}
html[data-ui=escenario] dialog .icon-button:hover{border-color:var(--esc-teal-sel)}
html[data-ui=escenario] dialog .button{min-height:44px;border-radius:10px;padding:0 16px}
html[data-ui=escenario] dialog .button.primary{background:var(--esc-teal);border-color:var(--esc-teal)}
html[data-ui=escenario] dialog .button.primary:hover{background:var(--esc-teal-deep)}
html[data-ui=escenario] dialog details{border:1px solid var(--esc-line);border-radius:12px;padding:0 16px}
html[data-ui=escenario] dialog details>summary{min-height:48px;display:flex;align-items:center;font-weight:600;cursor:pointer}
html[data-ui=escenario] dialog .credit-box{border-radius:14px}
html[data-ui=escenario] #projectLibrary .library-card{background:#fff;border:1px solid var(--esc-line);border-radius:16px;box-shadow:var(--esc-shadow)}
html[data-ui=escenario] #projectLibrary .library-card h3{font:800 19px/1.25 Manrope,system-ui,sans-serif;letter-spacing:-.3px}
html[data-ui=escenario] #projectLibrary .library-card.is-new{border-color:var(--esc-teal-sel);box-shadow:0 0 0 3px #00998f33}
@media (max-width:760px){html[data-ui=escenario] dialog{padding:20px 16px;border-radius:18px}}
html[data-ui=escenario] dialog details>summary{list-style:none;justify-content:space-between;gap:12px}
html[data-ui=escenario] dialog details>summary::-webkit-details-marker{display:none}
html[data-ui=escenario] dialog details>summary::after{content:"";flex:none;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%23075c5c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;transition:transform .18s}
html[data-ui=escenario] dialog details[open]>summary::after{transform:rotate(180deg)}
html[data-ui=escenario] dialog details>summary:focus-visible{outline:2px solid var(--esc-teal);outline-offset:-2px;border-radius:10px}
/* Celular: encabezado del tablero compacto para que el storyboard aparezca en la primera pantalla. */
@media (max-width:760px){
 html[data-ui=escenario] .workspace-heading{gap:8px;margin-bottom:12px}
 html[data-ui=escenario] .workspace-heading h1{font-size:24px}
 html[data-ui=escenario] .workspace-heading h1+p,html[data-ui=escenario] .flow-mode-hint{display:none}
 html[data-ui=escenario] .flow-mode-switch{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px}
 html[data-ui=escenario] .next-action-bar{gap:10px}
}
/* Momento del paso abierto (cuando no es el del avance): contorno menta. */
html[data-ui=escenario] .esc-moments .phase-button.esc-viewing:not(.selected){box-shadow:inset 0 0 0 1.5px var(--esc-mint);color:#fff}
html[data-ui=escenario] .esc-moments .phase-button.esc-viewing:not(.selected) .phase-number{border-color:var(--esc-mint)}

/* Respuesta al tacto (pedido del usuario, 03-10-2026): las viñetas, los pasos del diagrama y las opciones se elevan un poco
   al pasar el mouse y se hunden levemente al presionar. Solo transform y sombra (lo resuelve la tarjeta gráfica); sin «reducir movimiento». */
@media (prefers-reduced-motion:no-preference){
 html[data-ui=escenario] .moment-card,html[data-ui=escenario] .node,html[data-ui=escenario] .detail-panel .choice-card,html[data-ui=escenario] #projectLibrary .library-card{transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s cubic-bezier(.16,1,.3,1),border-color .15s}
 html[data-ui=escenario] .moment-card .sb-art{transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .2s,filter .2s}
 @media (hover:hover){
  html[data-ui=escenario] .moment-card:hover,html[data-ui=escenario] .node:hover{transform:translateY(-3px);box-shadow:0 14px 30px -16px #12393e59}
  html[data-ui=escenario] .moment-card:hover .sb-art{transform:scale(1.04);opacity:1;filter:none}
  html[data-ui=escenario] .detail-panel .choice-card:hover{transform:translateY(-1px);box-shadow:0 8px 20px -14px #12393e4d}
  html[data-ui=escenario] #projectLibrary .library-card:hover{transform:translateY(-2px)}
 }
 html[data-ui=escenario] .moment-card:active,html[data-ui=escenario] .node:active{transform:translateY(0) scale(.985);box-shadow:0 4px 12px -8px #12393e4d;transition-duration:.08s}
 html[data-ui=escenario] .detail-panel .choice-card:active{transform:scale(.99);transition-duration:.08s}
 html[data-ui=escenario] .button:active:not(:disabled){transform:scale(.98)}
}
/* Celular: el selector de modo en una sola fila. */
@media (max-width:760px){
 html[data-ui=escenario] .flow-mode-options{display:flex;flex-wrap:nowrap;width:100%;border-radius:999px}
 html[data-ui=escenario] .flow-mode-options button{flex:1 1 auto;white-space:nowrap;padding:8px 10px;font-size:14px;min-height:44px}
}

/* Revisión final de Impeccable (03-10-2026), correcciones. */
/* 1. Una sola cosa a la vez también en pantallas anchas: el escenario cerrado no se muestra bajo el tablero. */
html[data-ui=escenario] body:not(.mobile-detail-open) .detail-panel{display:none}
/* 3. Botón principal bloqueado: se ve como no disponible (sigue explicando por qué al tocarlo). */
html[data-ui=escenario] .detail-panel .detail-actions .button.primary:disabled,html[data-ui=escenario] .detail-panel .detail-actions:has(.gate-message:not(:empty)) .button.primary{background:#e8eff2;border-color:#d4dfe4;color:var(--esc-muted);box-shadow:none}
/* 4. «Recomendado» como etiqueta junto al título de la opción, no encima. */
html[data-ui=escenario] .detail-panel .choice-card:has(> .choice-tag){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center}
html[data-ui=escenario] .detail-panel .choice-card > .choice-tag{grid-column:2;grid-row:1;margin:0;padding:3px 9px;border-radius:999px;background:var(--esc-select);color:var(--esc-teal-deep);font:600 12px/1.3 'DM Sans',system-ui,sans-serif;letter-spacing:0;text-transform:none}
html[data-ui=escenario] .detail-panel .choice-card:has(> .choice-tag) > strong{grid-column:1;grid-row:1}
html[data-ui=escenario] .detail-panel .choice-card:has(> .choice-tag) > :not(.choice-tag):not(strong){grid-column:1/-1}
/* 4. «1 de 9 · Sugerido» a la derecha del título de la pregunta, no encima. 5. La pregunta sin marco propio. */
html[data-ui=escenario] .detail-panel .question-block{border:0;background:none;box-shadow:none;padding:0}
html[data-ui=escenario] .detail-panel .question-block.is-current{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px}
html[data-ui=escenario] .detail-panel .question-block.is-current > section{display:contents}
html[data-ui=escenario] .detail-panel .question-block.is-current > section > *,html[data-ui=escenario] .detail-panel .question-block.is-current > :not(.q-meta):not(section){grid-column:1/-1}
html[data-ui=escenario] .detail-panel .question-block.is-current > section > h3:first-child{grid-column:1;grid-row:1;margin-top:0}
html[data-ui=escenario] .detail-panel .question-block.is-current > .q-meta{grid-column:2;grid-row:1;align-self:center;display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin:0;font-size:13px;text-align:right;letter-spacing:0;text-transform:none}
/* 5. Consejos y «Qué recibirás» como texto bajo su título, sin caja (solo «Grabar contenido» queda como panel). */
html[data-ui=escenario] .detail-panel .form-body > div.notice{background:none;border:0;padding:0;margin:22px 0}
html[data-ui=escenario] .detail-panel .detail-section .output-card{background:none;border:0;padding:0;box-shadow:none;color:var(--esc-ink)}
/* 8. Nivel junto al título del tablero; viñetas compactas con el mismo borde inferior. */
html[data-ui=escenario] .workspace-heading .project-chip{margin:10px 0 0;align-self:flex-start;width:max-content}
html[data-ui=escenario] .moments-list.storyboard .moment-card:not(.sb-current) h3{min-height:2.6em}
html[data-ui=escenario] .moment-card:not(.sb-current):not(.is-done):not(.is-internal) .sb-art{opacity:.8;filter:saturate(.7)}
/* 2. Íconos SVG en lugar de flechas de texto. */
html[data-ui=escenario] .esc-icon{display:inline-block;width:18px;height:18px;vertical-align:-3px;flex:none}
html[data-ui=escenario] .button .esc-icon:first-child{margin-right:6px}
html[data-ui=escenario] .button .esc-icon:last-child{margin-left:6px}
html[data-ui=escenario] .upload-icon .esc-icon{width:26px;height:26px}
/* Ícono y texto como una sola unidad: un único espacio de 6 px. */
html[data-ui=escenario] .button:has(> .esc-icon){display:inline-flex;align-items:center;justify-content:center;gap:6px}
html[data-ui=escenario] .button .esc-icon:first-child,html[data-ui=escenario] .button .esc-icon:last-child{margin:0}

/* Detalles finales (punto 55). (a) Rótulos en mayúsculas: los que repiten al título siguiente se ocultan; el resto pasa a frase normal. */
html[data-ui=escenario] .proposal-intro>.eyebrow,html[data-ui=escenario] .density-panel>.eyebrow{display:none}
html[data-ui=escenario] .detail-panel .eyebrow{display:block;text-transform:lowercase;letter-spacing:0;font:600 14px/1.35 'DM Sans',system-ui,sans-serif;color:var(--esc-muted)}
html[data-ui=escenario] .detail-panel .eyebrow::first-letter{text-transform:uppercase}
html[data-ui=escenario] .qd-summary>.eyebrow{font:700 16px/1.3 'DM Sans',system-ui,sans-serif;color:var(--esc-ink);margin-bottom:4px}
/* (c) Celular: se vuelven a aplicar el alto y el relleno de la barra (el bloque de 980 px los pisaba). */
@media (max-width:760px){
 html[data-ui=escenario]{--esc-header:108px}
 html[data-ui=escenario] .app-header{padding:8px 12px 6px;gap:8px}
}
html[data-ui=escenario] .detail-panel .proposal-intro>.eyebrow,html[data-ui=escenario] .detail-panel .density-panel>.eyebrow{display:none}

/* Celebración al avanzar (03-10-2026). Momento nuevo: pantalla breve con la ilustración armándose y animándose; solo entre los cinco momentos principales. */
html[data-ui=escenario] .esc-cheer-overlay{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;background:#0b2427b3;cursor:pointer}
html[data-ui=escenario] .esc-cheer-card{width:min(440px,100%);background:#fff;border-radius:24px;padding:28px 28px 24px;text-align:center;box-shadow:0 40px 90px -30px #0b2427cc;cursor:default}
html[data-ui=escenario] .esc-cheer-art{position:relative;width:min(240px,64vw);aspect-ratio:1;margin:0 auto 14px;border-radius:20px;background:var(--esc-select)}
html[data-ui=escenario] .esc-cheer-art .sb-art{position:absolute;inset:6%;width:88%;height:88%}
html[data-ui=escenario] .esc-cheer-title{font:800 clamp(24px,4vw,30px)/1.15 Manrope,system-ui,sans-serif;letter-spacing:-.8px;color:var(--esc-ink);margin:0 0 8px;text-wrap:balance}
html[data-ui=escenario] .esc-cheer-moment{margin:0 0 4px;font-size:16px;color:var(--esc-muted)}
html[data-ui=escenario] .esc-cheer-moment strong{color:var(--esc-teal-deep)}
html[data-ui=escenario] .esc-cheer-short{margin:0 auto 18px;max-width:34ch;font-size:15px;color:var(--esc-muted)}
html[data-ui=escenario] .esc-cheer-go{min-height:48px;padding:0 28px;border-radius:12px;font-size:16px;font-weight:700;margin-top:6px}
html[data-ui=escenario] .esc-spark{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:var(--esc-mint);opacity:0}
@media (prefers-reduced-motion:no-preference){
 html[data-ui=escenario] .esc-cheer-overlay{animation:escFade .25s ease-out both}
 html[data-ui=escenario] .esc-cheer-overlay.is-leaving{animation:escFadeOut .2s ease-in both}
 html[data-ui=escenario] .esc-cheer-card{animation:escRise .5s cubic-bezier(.16,1,.3,1) both}
 html[data-ui=escenario] .esc-cheer-title,html[data-ui=escenario] .esc-cheer-moment,html[data-ui=escenario] .esc-cheer-short,html[data-ui=escenario] .esc-cheer-go{animation:escRise .5s cubic-bezier(.16,1,.3,1) both}
 html[data-ui=escenario] .esc-cheer-title{animation-delay:.12s}
 html[data-ui=escenario] .esc-cheer-moment{animation-delay:.2s}
 html[data-ui=escenario] .esc-cheer-short{animation-delay:.26s}
 html[data-ui=escenario] .esc-cheer-go{animation-delay:.34s}
 /* La ilustración se arma pieza por pieza… */
 html[data-ui=escenario] .esc-cheer-art .sb-art>:not(defs){transform-box:fill-box;transform-origin:center;animation:escBuild .55s cubic-bezier(.22,1,.36,1) calc(.15s + var(--i,0)*55ms) both}
 /* …y luego hace su acción una vez (mismas animaciones que en las viñetas). */
 html[data-ui=escenario] .esc-cheer-art.is-playing .sb-art{--cy:2.6s}
 html[data-ui=escenario] .esc-cheer-art.is-playing .a-line{animation:aLine var(--cy) cubic-bezier(.16,1,.3,1) var(--d,0s) 1 both}
 html[data-ui=escenario] .esc-cheer-art.is-playing .a-dot{animation:aDot var(--cy) ease-in-out var(--d,0s) 1}
 html[data-ui=escenario] .esc-cheer-art.is-playing .a-ring{animation:aRing var(--cy) ease-out .3s 1}
 html[data-ui=escenario] .esc-cheer-art.is-playing .a-pop{animation:aPop var(--cy) cubic-bezier(.22,1,.36,1) var(--d,0s) 1 both}
 html[data-ui=escenario] .esc-cheer-art.is-playing .a-aa{animation:aBeat var(--cy) ease-out .1s 1}
 html[data-ui=escenario] .esc-cheer-art.is-playing .a-word{animation:aWord var(--cy) ease-in-out .3s 1}
 html[data-ui=escenario] .esc-cheer-art.is-playing .a-press{animation:aPress var(--cy) ease-out var(--d,0s) 1}
 html[data-ui=escenario] .esc-cheer-art.is-playing .a-head{animation:aHead var(--cy) cubic-bezier(.45,0,.55,1) 1 both}
 html[data-ui=escenario] .esc-cheer-art.is-playing .a-fill{animation:aFill var(--cy) cubic-bezier(.45,0,.55,1) 1 both}
 html[data-ui=escenario] .esc-cheer-art.is-playing .a-wave{animation:aWave var(--cy) ease-in-out var(--d,0s) 1}
 html[data-ui=escenario] .esc-cheer-art.is-playing .a-knob{animation:aKnob var(--cy) cubic-bezier(.65,0,.35,1) var(--d,0s) 1}
 html[data-ui=escenario] .esc-cheer-art.is-playing .a-bar{animation:aBar var(--cy) cubic-bezier(.65,0,.35,1) var(--d,0s) 1}
 html[data-ui=escenario] .esc-cheer-art.is-playing .a-sun{animation:aSun var(--cy) ease-in-out 1}
 html[data-ui=escenario] .esc-cheer-art.is-playing .a-drop{animation:aDrop var(--cy) ease-in-out 1}
 /* Destellos menta alrededor al terminar de armarse. */
 html[data-ui=escenario] .esc-spark{animation:escSpark .9s cubic-bezier(.16,1,.3,1) .75s both}
 html[data-ui=escenario] .esc-spark.s1{--x:-118px;--y:-70px}html[data-ui=escenario] .esc-spark.s2{--x:116px;--y:-84px}html[data-ui=escenario] .esc-spark.s3{--x:-128px;--y:46px}
 html[data-ui=escenario] .esc-spark.s4{--x:124px;--y:58px}html[data-ui=escenario] .esc-spark.s5{--x:-30px;--y:-128px}html[data-ui=escenario] .esc-spark.s6{--x:36px;--y:126px;background:var(--esc-teal)}
}
@keyframes escFade{from{opacity:0}}
@keyframes escFadeOut{to{opacity:0}}
@keyframes escRise{from{opacity:0;transform:translateY(12px)}}
@keyframes escBuild{from{opacity:0;transform:scale(.6) translateY(8px)}}
@keyframes escSpark{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1)}}

/* Pendientes 178: con avisos, la barra de aprobación llegó a ocupar el 61 % de una ventana de 706 px y tapaba la muestra que había
   que revisar. En pantallas de hasta 900 px de alto deja de quedar fija y va al final del panel, debajo del resultado. */
@media (max-height:900px){html[data-ui=escenario] .detail-panel .detail-actions:has(> .button.primary:not(.q-wait):not([hidden])){position:static;margin-top:24px}}

/* Hallazgo 38 (cierre del 05-10-2026): el logo es un enlace; su área táctil llega a 44 × 44 px también en celular, donde se oculta el nombre. */
html[data-ui=escenario] .app-header .brand{min-height:44px;min-width:44px;justify-content:center}