/* ==========================================================================
   Pantallas de Tesla+ para el acordeón de /tesla-plus/ (oct-2026).

   Recreadas en HTML y CSS a partir del portal real (src/teslaPlus/portal/hoy:
   el fondo noche del Hoy, tarjetas translúcidas, Inter con números tabulares
   y Pirulen solo en la marca). Todo se mide en em y el tamaño de letra sale
   del ancho de la tarjeta, así la misma pantalla sirve en el marco ancho y
   dentro del panel en el celular. Cada pantalla lleva la marca «Ejemplo».

   Cada animación explica lo que muestra la pantalla y corre solo cuando el
   paso se abre (.sa__card.is-active): las barras de eje crecen, tu marca
   avanza hasta tu puntaje, las guías entran, el botón se aprieta y la línea
   del camino se dibuja de hito en hito. Sin movimiento, todo queda quieto en
   su estado final.
   ========================================================================== */

.pant {
  --pant-curva: cubic-bezier(0.16, 1, 0.3, 1);
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85em;
  padding: 1.3em 1.4em;
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(10px, 2.42cqw, 14.5px);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background:
    radial-gradient(70% 55% at 100% 0%, rgba(157, 0, 103, 0.35), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(0, 127, 215, 0.22), transparent 70%),
    linear-gradient(160deg, #141a46, #070a24);
}

.sa__lugar .pant { font-size: clamp(10.5px, 3.6cqw, 14px); padding: 1.1em 1.15em; gap: 0.75em; }
.sa__lugar .pant__ejes li { grid-template-columns: 9.5em 1fr 3em; }

.pant svg { width: 1.5em; height: 1.5em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.pant__cab { display: flex; align-items: center; justify-content: space-between; }
.pant__marca { font-family: 'Pirulen Tesla', sans-serif; font-weight: 400; font-size: 1em; letter-spacing: 0.04em; }
.pant__ej { font-size: 0.8em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.3em 0.7em; border-radius: 2px; color: #fff; background: var(--navy); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }

.pant__t { display: flex; align-items: center; gap: 0.7em; font-size: 1.12em; font-weight: 700; }
.pant__t svg { width: 2.1em; height: 2.1em; padding: 0.4em; border-radius: 0.5em; background: rgba(255, 255, 255, 0.1); }
.pant__t small { display: block; font-size: 0.78em; font-weight: 500; color: rgba(255, 255, 255, 0.66); }

.pant__cifra { display: flex; align-items: baseline; gap: 0.5em; }
.pant__cifra b { font-size: 3.3em; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.pant__cifra span { color: rgba(255, 255, 255, 0.78); }
.pant__sube { margin-left: auto; font-style: normal; font-weight: 800; padding: 0.25em 0.6em; border-radius: 3px; background: var(--verde); }

.pant__nota { margin: auto 0 0; padding: 0.8em 0.95em; border-radius: 0.6em; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.86); }
.pant__chica { font-size: 0.85em; color: rgba(255, 255, 255, 0.66); margin-top: -0.4em; }

/* 1. Ejes del ensayo */
.pant__ejes { display: grid; gap: 0.55em; margin: 0; padding: 0; list-style: none; }
.pant__ejes li { display: grid; grid-template-columns: 11.5em 1fr 3.2em; align-items: center; gap: 0.7em; }
.pant__ejes span { color: rgba(255, 255, 255, 0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pant__ejes i { height: 0.6em; border-radius: 99px; background: rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; }
.pant__ejes i::after { content: ''; position: absolute; inset: 0; width: calc(var(--v) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--azul), #5aa9ff); transform-origin: left; }
.pant__ejes .es-bajo i::after { background: linear-gradient(90deg, var(--rojo), var(--oro)); }
.pant__ejes b { text-align: right; font-weight: 800; }
.is-active .pant__ejes i::after { animation: pant-crece 1s var(--pant-curva) both 0.35s; }
.is-active .pant__ejes li:nth-child(2) i::after { animation-delay: 0.45s; }
.is-active .pant__ejes li:nth-child(3) i::after { animation-delay: 0.55s; }
.is-active .pant__ejes li:nth-child(4) i::after { animation-delay: 0.65s; }
@keyframes pant-crece { from { transform: scaleX(0); } }

/* 2 y 5. Riel con tu marca */
.pant__dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7em; }
.pant__dos > div { padding: 0.7em 0.9em; border-radius: 0.6em; background: rgba(255, 255, 255, 0.07); }
.pant__dos small { display: block; color: rgba(255, 255, 255, 0.66); }
.pant__dos b { font-size: 2.2em; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.pant__riel { position: relative; height: 0.75em; margin-top: 1.1em; border-radius: 99px; background: rgba(255, 255, 255, 0.12); }
.pant__corte { position: absolute; top: -0.55em; bottom: -0.55em; left: calc(var(--corte) * 100%); width: 2px; background: var(--oro); }
.pant__corte::before { content: 'Corte'; position: absolute; bottom: 100%; left: 50%; translate: -50% -0.2em; font-size: 0.85em; font-weight: 700; color: var(--oro); }
.pant__yo { position: absolute; top: 50%; left: calc(var(--yo) * 100%); width: 1.25em; height: 1.25em; margin: -0.625em 0 0 -0.625em; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.3em rgba(255, 79, 184, 0.55); }
.pant__riel::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--yo) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--magenta), #ff4fb8); transform-origin: left; }
.is-active .pant__riel::before { animation: pant-crece 1.1s var(--pant-curva) both 0.35s; }
.is-active .pant__yo { animation: pant-avanza 1.1s var(--pant-curva) both 0.35s; }
@keyframes pant-avanza { from { left: 0; } }
.pant__escala { display: flex; justify-content: space-between; font-size: 0.82em; color: rgba(255, 255, 255, 0.6); margin-top: -0.3em; }

/* Escala de talleres: 100 a 1000, con las dos zonas en su lugar. */
.pant__zona { position: absolute; top: 0; bottom: 0; }
.pant__zona--c { left: 0; width: 55.6%; border-radius: 99px 0 0 99px; background: rgba(103, 171, 0, 0.45); }
.pant__zona--m { left: 83.3%; right: 0; border-radius: 0 99px 99px 0; background: rgba(244, 179, 0, 0.55); }
.pant__riel--talleres::before { display: none; }
.pant__escala--talleres { position: relative; height: 1.2em; }
.pant__escala--talleres span { position: absolute; translate: -50% 0; }
.pant__escala--talleres span:nth-child(1) { left: 0; translate: 0 0; }
.pant__escala--talleres span:nth-child(2) { left: 55.6%; }
.pant__escala--talleres span:nth-child(3) { left: 83.3%; }
.pant__escala--talleres span:nth-child(4) { left: auto; right: 0; translate: 0 0; }
.pant__talleres { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7em; }
.pant__talleres > div { padding: 0.7em 0.9em; border-radius: 0.6em; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.pant__talleres b { display: block; }
.pant__talleres small { color: rgba(255, 255, 255, 0.66); }
.pant__talleres .es-cerca { border-color: var(--oro); background: rgba(244, 179, 0, 0.12); }

/* 3. Biblioteca */
.pant__guias { display: grid; gap: 0.55em; margin: 0; padding: 0; list-style: none; }
.pant__guias li { display: flex; align-items: center; gap: 0.8em; padding: 0.7em 0.9em; border-radius: 0.6em; background: rgba(255, 255, 255, 0.07); }
.pant__guias i { flex: none; width: 0.5em; align-self: stretch; border-radius: 99px; background: var(--c); }
.pant__guias span { font-weight: 700; }
.pant__guias small { display: block; font-weight: 500; color: rgba(255, 255, 255, 0.66); }
.is-active .pant__guias li { animation: pant-entra 0.6s var(--pant-curva) both; animation-delay: calc(0.3s + var(--i) * 0.12s); }
@keyframes pant-entra { from { opacity: 0; transform: translateY(0.8em); } }

/* 4. Clase de regalo */
.pant__form { display: grid; gap: 0.45em; margin: 0; }
.pant__form > div { display: flex; justify-content: space-between; gap: 1em; padding: 0.6em 0.9em; border-radius: 0.6em; background: rgba(255, 255, 255, 0.07); }
.pant__form dt { color: rgba(255, 255, 255, 0.66); }
.pant__form dd { margin: 0; font-weight: 700; text-align: right; }
.pant__pedir { position: relative; margin-top: auto; display: grid; }
.pant__btn, .pant__ok { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 2.9em; font-weight: 700; }
.pant__btn { background: #d3481d; border-radius: 0; }
.pant__ok { border-radius: 0; background: var(--verde); }
.is-active .pant__btn { animation: pant-aprieta 0.5s ease both 1.1s; }
.is-active .pant__ok { animation: pant-aparece 0.45s var(--pant-curva) both 1.45s; }
@keyframes pant-aprieta { 50% { transform: scale(0.95); } 100% { opacity: 0; } }
@keyframes pant-aparece { from { opacity: 0; transform: scale(0.9); } }

/* 6. Su camino a la PAES */
.pant__avance { height: 0.55em; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.pant__avance span { display: block; height: 100%; width: calc(var(--pct) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--morado), #ff4fb8); transform-origin: left; }
.is-active .pant__avance span { animation: pant-crece 1.1s var(--pant-curva) both 0.25s; }
.pant__hitos { display: grid; margin: 0; padding: 0; list-style: none; }
.pant__hitos li { position: relative; display: flex; align-items: center; gap: 0.8em; padding-bottom: 0.65em; font-weight: 700; }
.pant__hitos li:last-child { padding-bottom: 0; }
.pant__hitos li:not(:last-child)::before { content: ''; position: absolute; left: 0.8em; top: 1.6em; bottom: 0; border-left: 2px dashed rgba(255, 255, 255, 0.3); transform-origin: top; }
.pant__hitos li.es-hecho::before { border-left-style: solid; border-color: rgba(103, 171, 0, 0.75); }
.pant__hitos i { flex: none; display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); background: #0b1030; }
.pant__hitos i svg { width: 1em; height: 1em; }
.pant__hitos .es-hecho i { border-color: transparent; background: rgba(103, 171, 0, 0.5); }
.pant__hitos .es-proximo i { border-color: transparent; background: var(--morado); }
.pant__hitos li:not(.es-hecho):not(.es-proximo) { color: rgba(255, 255, 255, 0.75); }
.is-active .pant__hitos li { animation: pant-entra 0.5s var(--pant-curva) both; animation-delay: calc(0.3s + var(--i) * 0.14s); }
.is-active .pant__hitos li::before { animation: pant-tramo 0.5s var(--pant-curva) both; animation-delay: calc(0.42s + var(--i) * 0.14s); }
@keyframes pant-tramo { from { transform: scaleY(0); } }
.pant__fila { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4em 1em; padding-top: 0.7em; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.92em; color: rgba(255, 255, 255, 0.75); }
.pant__fila b { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .pant *, .pant *::before, .pant *::after { animation: none !important; }
  .pant__btn { opacity: 0; }
}