/* Escenas de Asesoramiento (2026-09-24).
   Las piezas comunes (.esc, .ui, la posada, los iconos) están en
   paginas-servicio.css; este archivo lo encola mdd-ajustes.php solo en
   las páginas que lo usan (MDD_ESCENAS_PAGINA).
   Son preguntas antes que funciones: cada escena muestra la herramienta
   con la que se responde. */

/* Qué tipo de sitio: cuatro formas, una elegida */
.tp-grilla { position: absolute; inset: 12px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tp-op { position: relative; padding: 5px 6px; display: grid; grid-template-columns: 30px 1fr; gap: 6px; align-items: center; animation: tp-sel 8s infinite; animation-delay: var(--d); }
.tp-op > div { height: 26px; border-radius: 3px; background: #F2F5F7; display: grid; gap: 2px; padding: 3px; align-content: start; }
.tp-op > div i { display: block; height: 2.5px; border-radius: 1px; background: #CBD5E1; }
.tp-op > div i.es-img { height: 8px; background: color-mix(in srgb, var(--c) 45%, #fff); }
.tp-op > div.es-grid { grid-template-columns: repeat(3, 1fr); }
.tp-op > div.es-grid i { height: 7px; }
.tp-op b { display: block; font-size: 7.5px; font-weight: 800; white-space: nowrap; }
.tp-op small { font-size: 6px; font-weight: 700; color: #64748b; white-space: nowrap; }
@keyframes tp-sel { 0%, 22% { outline: 1.5px solid var(--c); background: color-mix(in srgb, var(--c) 8%, #fff); } 25%, 100% { outline: 1.5px solid transparent; background: #fff; } }

/* Si conviene vender online: la lista, tildada de a una */
.vo-lista { inset: 12px 14px; padding: 8px 10px; display: grid; gap: 5px; align-content: start; }
.vo-cab { font-size: 7.5px; font-weight: 800; white-space: nowrap; margin-bottom: 1px; }
.vo-f { display: grid; grid-template-columns: 11px 1fr; gap: 6px; align-items: center; font-size: 7px; font-weight: 700; white-space: nowrap; }
.vo-f .ok-v { animation: vo-tilde 6s infinite both; animation-delay: var(--d); }
.vo-f .vo-med { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--c); border-right-color: transparent; }
@keyframes vo-tilde { 0%, 8% { transform: scale(0); } 14%, 92% { transform: none; } 100% { transform: scale(0); } }
.vo-nota { display: flex; align-items: center; justify-content: space-between; margin-top: 3px; padding: 5px 7px; border-radius: 4px; background: color-mix(in srgb, var(--c) 8%, #fff); font-size: 7px; font-weight: 700; white-space: nowrap; }
.vo-nota b { color: var(--c); font-weight: 800; }

/* Cuánto invertir y en qué orden: el tablero por etapas */
.iv-tablero { position: absolute; inset: 12px 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.iv-col { padding: 5px; display: grid; gap: 4px; align-content: start; position: relative; }
.iv-col > small { font-size: 6px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #64748b; white-space: nowrap; }
.iv-col:first-child > small { color: var(--c); }
.iv-t { font-size: 6.8px; font-weight: 700; line-height: 1.25; padding: 4px 5px; border-radius: 3px; background: #F8FAFC; border-left: 2px solid var(--b, #CBD5E1); animation: iv-t 6s infinite both; animation-delay: var(--d); }
@keyframes iv-t { 0%, 6% { opacity: 0; transform: translateY(-3px); } 12%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Con qué plataforma: cada una para lo suyo, y se turnan */
.pl-fila { position: absolute; inset: 14px 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pl-op { position: relative; padding: 9px 5px 7px; display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; animation: pl-sel 9s infinite; animation-delay: var(--d); }
.pl-op svg { width: 26px; height: 26px; }
.pl-op b { font-size: 7.5px; font-weight: 800; white-space: nowrap; }
.pl-op small { font-size: 6.2px; font-weight: 700; color: #64748b; line-height: 1.3; }
.pl-op .ok-v { position: absolute; top: -5px; right: -5px; width: 13px; height: 13px; opacity: 0; animation: pl-ok 9s infinite; animation-delay: var(--d); }
@keyframes pl-sel { 0%, 30% { outline: 1.5px solid var(--c); transform: translateY(-3px); } 33%, 100% { outline: 1.5px solid transparent; transform: none; } }
@keyframes pl-ok { 0%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }

/* Qué plazos son realistas: el cronograma */
.gt-crono { inset: 12px 14px; padding: 7px 9px; display: grid; gap: 3px; align-content: start; }
.gt-sem { display: grid; grid-template-columns: 62px repeat(8, 1fr); font-size: 5.5px; font-weight: 800; color: #94a3b8; text-align: center; margin-bottom: 1px; }
.gt-f { display: grid; grid-template-columns: 62px 1fr; align-items: center; font-size: 6.8px; font-weight: 700; white-space: nowrap; height: 13px; }
.gt-f > div { position: relative; height: 100%; background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), #EEF2F6 calc(12.5% - 1px) 12.5%); }
.gt-f i { position: absolute; top: 3px; bottom: 3px; left: var(--x); width: var(--w); border-radius: 3px; background: var(--c); transform-origin: left; animation: gt-barra 6s ease-out infinite both; animation-delay: var(--d); }
.gt-f i.es-hito { width: 8px; height: 8px; top: 2.5px; border-radius: 1px; transform: rotate(45deg); background: #FF1632; animation-name: gt-hito; }
@keyframes gt-barra { 0%, 6% { transform: scaleX(0); } 16%, 92% { transform: none; } 100% { transform: scaleX(0); } }
@keyframes gt-hito { 0%, 6% { opacity: 0; } 16%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* Cómo medir si funciona: la lupa sobre la métrica que importa */
.me-tablero { position: absolute; inset: 12px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.me-t { padding: 6px 8px; display: grid; gap: 1px; align-content: start; opacity: .6; }
.me-t small { font-size: 6.5px; font-weight: 700; color: #64748b; white-space: nowrap; }
.me-t b { font-size: 13px; font-weight: 800; line-height: 1.1; }
.me-t svg { width: 100%; height: 12px; }
.me-t path { fill: none; stroke: #CBD5E1; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.me-t.is-clave { opacity: 1; outline: 1.5px solid var(--c); }
.me-t.is-clave b { color: var(--c); }
.me-t.is-clave path { stroke: var(--c); }
.me-t.is-clave em { font-style: normal; font-size: 6px; font-weight: 800; color: #fff; background: var(--c); border-radius: 99px; padding: 1px 5px; justify-self: start; }
.me-lupa { position: absolute; width: 34px; height: 34px; right: 10%; bottom: 8%; pointer-events: none; animation: me-lupa 5s ease-in-out infinite; }
@keyframes me-lupa { 0%, 100% { transform: translate(-6px, -4px); } 50% { transform: translate(2px, 2px); } }

/* Las fichas que van dentro de una grilla ocupan su celda, no flotan */
.tp-grilla .ui, .iv-tablero .ui, .pl-fila .ui, .me-tablero .ui { position: relative; }