/* ---------------------------------------------------------------------------------------------
   El configurador: paso 0 y entrevista (work item 677). Portado de estilos.css del prototipo
   (bloques de la entrevista) sobre los tokens --tt-* del tema. La pantalla del equipo ya no vive
   aquí: es css/prototipo.css, el prototipo del ecosistema portado bajo .tt-proto (work item 877).
   Aquí NO se escribe un color directo, o el tema claro se rompe (ver CLAUDE.md del Web).
   Hoja global y no CSS por componente porque estas clases las comparten varios componentes, y el
   CSS con alcance no cruza esa frontera.
   --------------------------------------------------------------------------------------------- */

.tt-paso { max-width: 760px; margin: 0 auto; padding: 8px 0 120px; }

.tt-kicker { color: var(--tt-verde-texto); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tt-q { font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 700; margin: 6px 0 8px; color: var(--tt-tx); }
.tt-qs { color: var(--tt-tx2); margin: 0 0 22px; line-height: 1.5; }
.tt-perf { color: var(--tt-tx3); font-size: .8rem; margin: 10px 0 14px; }

.tt-barra { height: 4px; background: var(--tt-sup2); border-radius: 4px; overflow: hidden; }
.tt-barra > i { display: block; height: 100%; background: var(--tt-verde); transition: width .3s ease; }

/* Opciones de una pregunta */
.tt-ops { display: grid; gap: 10px; }
.tt-op {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
    padding: 14px 16px; border-radius: var(--tt-radio); border: 1px solid var(--tt-linea);
    background: var(--tt-sup); color: var(--tt-tx); cursor: pointer;
}
/* El hover solo en las NO elegidas (wi 1648, probando el PR 1146): «hasta que no quitas el mouse se ve que se
   seleccionó». El hover pesaba más que .tt-sel (tres selectores contra dos), así que con el mouse encima la elegida
   se veía como no elegida, y al quitarla seguía verde hasta salir. Y el anillo del foco solo con teclado. */
.tt-op:hover:not(:disabled):not(.tt-sel) { border-color: var(--tt-linea-fuerte); background: var(--tt-sup2); }
.tt-op:focus { outline: none; }
.tt-op:focus-visible { outline: 2px solid var(--tt-azul); outline-offset: 2px; }
.tt-op b { font-weight: 600; }
.tt-op i { font-style: normal; color: var(--tt-tx2); font-size: .88rem; }
.tt-op.tt-sel { border-color: var(--tt-verde); background: var(--tt-verde-tenue); }
.tt-op.tt-sel:hover:not(:disabled) { border-color: var(--tt-verde); background: var(--tt-verde-tenue); filter: brightness(1.12); }
/* La elegida lo dice también con una palomita, no solo con el color. */
.tt-op.tt-sel b::before { content: "✓ "; color: var(--tt-verde-texto); }
.tt-libre {
    width: 100%; padding: 12px 14px; border-radius: var(--tt-radio); border: 1px solid var(--tt-linea);
    background: var(--tt-sup); color: var(--tt-tx); resize: vertical;
}

.tt-navq { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; }

/* Paso 0 */
.tt-form { display: grid; gap: 14px; }
.tt-fld { display: grid; gap: 4px; }
.tt-fld label { font-weight: 600; font-size: .9rem; color: var(--tt-tx); }
.tt-fld input {
    padding: 11px 13px; border-radius: var(--tt-radio); border: 1px solid var(--tt-linea);
    background: var(--tt-sup); color: var(--tt-tx);
}
.tt-fld input:focus, .tt-libre:focus { outline: 2px solid var(--tt-verde); outline-offset: 1px; }
.tt-msg { color: var(--tt-tx3); font-size: .8rem; }
.tt-fld.tt-bad input { border-color: var(--tt-error); }
.tt-fld.tt-bad .tt-msg { color: var(--tt-error); }
.tt-consent { display: flex; gap: 10px; align-items: flex-start; color: var(--tt-tx2); font-size: .88rem; }
.tt-consent input { margin-top: 3px; }

.tt-error, .tt-aviso {
    margin: 16px 0 0; padding: 12px 14px; border-radius: var(--tt-radio);
    border: 1px solid var(--tt-error); color: var(--tt-tx);
}
.tt-aviso { border-color: var(--tt-alerta); }
/* El aviso que se cierra (wi 1887): el texto y la «×» en un renglón. */
.tt-aviso-cerrable { display: flex; align-items: flex-start; gap: 12px; }
.tt-aviso-cerrable > span { flex: 1; }
.tt-aviso-x { background: none; border: 0; color: var(--tt-tx2); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
.tt-aviso-x:hover { color: var(--tt-tx); }

.tt-folio { display: flex; justify-content: flex-end; align-items: center; gap: 8px; color: var(--tt-tx2); font-size: .85rem; }

/* Armando */
.tt-giro {
    width: 34px; height: 34px; border-radius: 50%; margin-bottom: 14px;
    border: 3px solid var(--tt-sup2); border-top-color: var(--tt-verde); animation: tt-giro 1s linear infinite;
}
@keyframes tt-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tt-giro { animation: none; } }

/* Cargando (wi 1250): mientras se trae de la Api la cotización guardada. Un esqueleto con la forma de lo que viene
   —renglones con foto y dos líneas—, para que no se lea como un carrito vacío. Solo tokens. */
.tt-cargando { padding: 8px 0 24px; }
.tt-cargando-t { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--tt-tx2); font-size: .95rem; }
.tt-cargando-giro {
    flex: none; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--tt-sup2); border-top-color: var(--tt-verde); animation: tt-giro 1s linear infinite;
}
.tt-esqueleto { display: grid; gap: 10px; }
.tt-esqueleto-r {
    display: flex; align-items: center; gap: 14px; padding: 12px;
    border: 1px solid var(--tt-linea); border-radius: var(--tt-radio); background: var(--tt-sup);
}
.tt-esqueleto-r i { flex: none; width: 56px; height: 56px; border-radius: 9px; background: var(--tt-sup2); }
.tt-esqueleto-r span { flex: 1; display: grid; gap: 8px; }
.tt-esqueleto-r b { display: block; height: 10px; border-radius: 5px; background: var(--tt-sup2); }
.tt-esqueleto-r b:first-child { width: 55%; }
.tt-esqueleto-r b:last-child { width: 35%; }
.tt-esqueleto-r i, .tt-esqueleto-r b { animation: tt-latido 1.4s ease-in-out infinite; }
@keyframes tt-latido { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
    .tt-cargando-giro, .tt-esqueleto-r i, .tt-esqueleto-r b { animation: none; }
}

/* «Como lo ve el cliente» (wi 1657): la vista que embebe el Admin, sin encabezado; el aviso dice que es solo lectura. */
.tt-vista { padding: 16px; background: var(--tt-sup); min-height: 100vh; }
.tt-vista-aviso { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--tt-linea); border-radius: var(--tt-radio);
  background: var(--tt-sup2); color: var(--tt-tx2); font-size: 14px; }
.tt-vista-aviso b { color: var(--tt-tx); }