/* ============================================================
   [PE-1/PE-2] Portal de clientes · pastilla elástica y movimiento
   (va con pastilla-elastica.css/js y portal-movimiento.js)
   Colores: azul ARATECH del portal (--azul), claro y oscuro.
   ============================================================ */

/* ---------- Pestañas ---------- */
.pestanas {
  --pe-color: var(--azul);
  --pe-texto: #fff;
  --pe-suave: color-mix(in srgb, var(--azul) 11%, transparent);
  --pe-onda: color-mix(in srgb, var(--azul) 40%, transparent);
  --pe-radio: 14px;
}
.pestanas a { position: relative; z-index: 1; }
/* El activo lo pinta la pastilla: se quita el fondo/borde anterior */
.pestanas.pe-lista a,
.pestanas.pe-lista a[aria-current="page"],
.pestanas.pe-lista a:hover {
  background: transparent; box-shadow: none;
  border-top-color: transparent; border-bottom-color: transparent;
  transition: color .2s ease;
}
.pestanas.pe-lista a:hover { color: var(--tinta); }
/* Antes de montar la pastilla (o sin JS) el activo se sigue viendo */
.pestanas:not(.pe-lista) a[aria-current="page"] { background: var(--azul); color: #fff; }
/* Dentro de la pastilla: texto e iconos blancos */
.pestanas .pe-capa a { color: var(--pe-texto) !important; background: transparent !important; box-shadow: none !important; border-color: transparent !important; }
.pestanas .pe-capa a .ic { color: var(--pe-texto); }

@media (min-width: 760px) {
  /* En computadora la barra es una cápsula, como en el video */
  .pestanas { --pe-radio: 999px; border-radius: 999px; padding: 4px; gap: 2px; border: 1px solid var(--linea); }
  .pestanas a { border-radius: 999px; padding: 0 14px; }
}

/* ---------- Onda al tocar botones y tarjetas ---------- */
.pm-con-onda { overflow: hidden; isolation: isolate; }
.pm-con-onda.pm-relativo { position: relative; }
.pm-onda {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background: currentColor;
}
.boton .pm-onda { background: #fff; }
.boton.boton-secundario .pm-onda, .renglon .pm-onda, .boton-texto .pm-onda, .tema-boton .pm-onda { background: var(--azul); }

/* ============================================================
   [PE-2] Dinamismo: desplazamiento, abrir secciones y toques
   Curvas: entrar = ease-out fuerte · moverse = ease-in-out · rebote leve
   ============================================================ */
:root {
  --pm-salida: cubic-bezier(.16, 1, .3, 1);
  --pm-mover: cubic-bezier(.65, 0, .35, 1);
  --pm-resorte: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Tipografía que se acomoda mejor ---------- */
h1, h2, .titulo-seccion, .ficha-estado { text-wrap: balance; }
.bajada, .bloque-texto, .renglon-detalle { text-wrap: pretty; }

/* ---------- Barra superior: se compacta al desplazarse ---------- */
.barra { transition: box-shadow .25s ease, background-color .25s ease; }
.barra .logo { transform-origin: left center; transition: transform .25s var(--pm-salida); }
body.pm-desplazado .barra {
  background: color-mix(in srgb, var(--papel) 97%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--linea) 80%, transparent), 0 10px 30px -18px rgba(15, 23, 42, .35);
}
body.pm-desplazado .barra .logo { transform: scale(.9); }

/* ---------- Barra inferior (celular): se esconde al bajar y vuelve al subir ---------- */
@media (max-width: 759px) {
  .pestanas { transition: transform .34s var(--pm-salida), opacity .2s ease; }
  body.pm-barra-oculta .pestanas {
    transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom)));
    opacity: 0; pointer-events: none;
    transition: transform .24s var(--pm-mover), opacity .2s ease;
  }
}

/* ---------- Tarjetas: elevación al pasar (solo con mouse) ---------- */
@media (hover: hover) and (pointer: fine) {
  .lista > li { transition: transform .22s var(--pm-salida), box-shadow .22s ease, border-color .15s ease; }
  .lista > li:hover { transform: translateY(-3px); }
  .renglon .ic:last-child { transition: transform .22s var(--pm-salida); }
  .lista > li:hover .renglon > .ic:last-child { transform: translateX(3px); }
}

/* ---------- Tarjeta → ficha (View Transitions, "container transform") ----------
   La tarjeta tocada crece hasta ser la ficha (y al volver se encoge a su
   tarjeta). La barra superior y las pestañas no se mueven; el resto de la
   página sale rápido y lo nuevo entra cuando la tarjeta ya va creciendo. */
html.pm-vt .barra { view-transition-name: pm-barra; }
html.pm-vt .pestanas { view-transition-name: pm-pestanas; }
html.pm-vt::view-transition-group(pm-barra),
html.pm-vt::view-transition-group(pm-pestanas) { animation: none; }
html.pm-vt::view-transition-old(pm-barra), html.pm-vt::view-transition-old(pm-pestanas) { display: none; }
html.pm-vt::view-transition-new(pm-barra), html.pm-vt::view-transition-new(pm-pestanas) { animation: none; }
html.pm-vt::view-transition-group(pm-heroe) {
  animation-duration: .4s;
  animation-timing-function: cubic-bezier(.2, 0, 0, 1);
  border-radius: 18px; overflow: hidden;
}
html.pm-vt::view-transition-image-pair(pm-heroe) { isolation: isolate; }
html.pm-vt::view-transition-old(pm-heroe),
html.pm-vt::view-transition-new(pm-heroe) {
  height: auto; width: 100%; object-fit: none; object-position: top left;
}
html.pm-vt::view-transition-old(pm-heroe) { animation: pmVtSale .14s ease-out both; }
html.pm-vt::view-transition-new(pm-heroe) { animation: pmVtAparece .26s var(--pm-salida) .08s both; }
html.pm-vt::view-transition-old(root) { animation: pmVtSale .12s ease-out both; }
html.pm-vt::view-transition-new(root) { animation: pmVtEntra .3s var(--pm-salida) .12s both; }
@keyframes pmVtSale { to { opacity: 0; } }
@keyframes pmVtAparece { from { opacity: 0; } }
@keyframes pmVtEntra { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Al abrir: la pista y las barras se llenan por tramos ---------- */
.pm-abriendo .pista li::before,
.pm-abriendo .mini-pista i { transform-origin: left center; animation: pmLlenar .5s var(--pm-salida) both; }
.pm-abriendo .pista li:nth-child(2)::before, .pm-abriendo .mini-pista i:nth-child(2) { animation-delay: .07s; }
.pm-abriendo .pista li:nth-child(3)::before, .pm-abriendo .mini-pista i:nth-child(3) { animation-delay: .14s; }
.pm-abriendo .pista li:nth-child(4)::before, .pm-abriendo .mini-pista i:nth-child(4) { animation-delay: .21s; }
.pm-abriendo .pista li:nth-child(5)::before, .pm-abriendo .mini-pista i:nth-child(5) { animation-delay: .28s; }
@keyframes pmLlenar { from { transform: scaleX(0); opacity: .4; } }

/* El paso en curso tiene un brillo que lo recorre: indica "en proceso" */
.pista:not(.terminado):not(.detenido) li.actual::before {
  background-image: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%), var(--grad);
  background-size: 220% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: pmProceso 2.4s ease-in-out .8s infinite;
}
.pm-abriendo .pista:not(.terminado):not(.detenido) li.actual::before {
  animation: pmLlenar .5s var(--pm-salida) both, pmProceso 2.4s ease-in-out .8s infinite;
}
.pm-abriendo .pista li.actual:nth-child(2)::before { animation-delay: .07s, .8s; }
.pm-abriendo .pista li.actual:nth-child(3)::before { animation-delay: .14s, .8s; }
.pm-abriendo .pista li.actual:nth-child(4)::before { animation-delay: .21s, .8s; }
.pm-abriendo .pista li.actual:nth-child(5)::before { animation-delay: .28s, .8s; }
@keyframes pmProceso { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }

/* ---------- Compras: detalle desplegable ---------- */
details.renglon > summary { -webkit-tap-highlight-color: transparent; }
details.renglon > summary::-webkit-details-marker { display: none; }
details.renglon { transition: background-color .2s ease, transform .16s var(--pm-salida); }
details.renglon.pm-abierto, details.renglon[open] { background: color-mix(in srgb, var(--azul) 4%, transparent); border-radius: inherit; }

/* ---------- Botones: presión, foco y "enviando…" ---------- */
.boton, .boton-texto, .tema-boton, .icono-boton, .visor-boton, .renglon, summary {
  transition: transform .16s var(--pm-salida), filter .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .2s ease;
}
.boton:active:not([disabled]), .boton-texto:active, .tema-boton:active, .icono-boton:active { transform: scale(.97); }
.visor-boton:active { transform: scale(.92); }
.renglon:active, summary:active { transform: scale(.985); }
.boton:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 35%, transparent); }
/* Mientras se envía: un brillo recorre el botón (indicador de proceso) */
.boton:not(.boton-secundario)[disabled] {
  background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%), var(--grad, none);
  background-size: 220% 100%, 100% 100%;
  animation: pmProceso 1.3s linear infinite;
}
.boton-enviar .ic { transition: transform .25s var(--pm-salida); }
.boton-enviar:active .ic { transform: translate(3px, -3px); }

/* ---------- Aviso flotante con resorte ---------- */
.aviso {
  transform: translate(-50%, 24px) scale(.96);
  transition: opacity .2s ease, transform .2s var(--pm-mover);
}
.aviso.visible {
  transform: translate(-50%, 0) scale(1);
  transition: opacity .2s ease, transform .45s var(--pm-resorte);
}

/* ---------- Visor de fotos ---------- */
.visor[open]::backdrop { animation: pmFondo .28s ease-out; }
@keyframes pmFondo { from { background: rgba(4, 8, 16, 0); } }
.visor-escena img { will-change: transform; }

/* ---------- Campos: la etiqueta acompaña al foco ---------- */
.campo label { transition: color .15s ease; }
.campo:focus-within label { color: var(--azul-fuerte); }

/* ---------- Reducir movimiento: todo quieto ---------- */
@media (prefers-reduced-motion: reduce) {
  .barra, .barra .logo, .pestanas, .lista > li, .renglon .ic:last-child,
  .boton, .boton-texto, .tema-boton, .icono-boton, .visor-boton, .renglon, summary, .aviso, .aviso.visible, .campo label { transition: none; }
  body.pm-desplazado .barra .logo, .lista > li:hover, .lista > li:hover .renglon > .ic:last-child,
  .boton:active, .boton-texto:active, .tema-boton:active, .icono-boton:active, .visor-boton:active,
  .renglon:active, summary:active, .boton-enviar:active .ic { transform: none; }
  .pm-abriendo .pista li::before, .pm-abriendo .mini-pista i,
  .pista li.actual::before, .boton[disabled], .visor[open]::backdrop { animation: none; }
  body.pm-barra-oculta .pestanas { transform: none; opacity: 1; pointer-events: auto; }
}