/* estilos.css — App MI ODEMÁS (login por código, mi perfil). Requiere marca.css antes. */

.hero-app { padding-top: env(safe-area-inset-top); }

/* ——— Tarjeta principal: blanca, radio 5, línea roja inferior que se dibuja (officedepot.com.mx) ——— */
.tarjeta {
  position: relative;
  z-index: 1;
  width: min(440px, calc(100% - 32px));
  margin: 16px auto 0;
  padding: 24px 22px 26px;
  background: var(--papel);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  animation: sube .7s var(--suave-curva) .7s both;
}
.tarjeta::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--rojo);
  border-radius: 0 0 var(--radio) var(--radio);
  transform: scaleX(0);
  transform-origin: left;
  animation: dibuja .7s var(--suave-curva) 1.05s both;
}
.tarjeta h2 {
  margin: 0;
  color: var(--titulo);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.lead { margin: 8px 0 0; font-size: 14.5px; color: var(--texto); }

/* ——— Vistas: entran deslizando desde la derecha con hijos escalonados; salen hacia la izquierda ——— */
.vista > * { animation: sube .5s var(--suave-curva) both; }
.vista > :nth-child(1) { animation-delay: .04s; }
.vista > :nth-child(2) { animation-delay: .1s; }
.vista > :nth-child(3) { animation-delay: .16s; }
.vista > :nth-child(4) { animation-delay: .22s; }
.vista > :nth-child(5) { animation-delay: .28s; }
.vista > :nth-child(6) { animation-delay: .34s; }
.vista > :nth-child(7) { animation-delay: .4s; }
.vista > :nth-child(8) { animation-delay: .46s; }
.vista.saliendo { animation: sale .22s ease-in both; }
.vista.saliendo > * { animation: none; }
@keyframes sale { to { opacity: 0; transform: translateX(-18px); } }
.tarjeta.sacudida { animation: sacude .5s cubic-bezier(.36, .07, .19, .97) both; }

.tarjeta .btn { margin-top: 22px; }
.acciones { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.nota { margin: 18px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--suave); }
.nota b { color: var(--titulo); font-weight: 700; }

/* ——— Esqueleto mientras se comprueba la sesión (evita el destello de login) ——— */
.esqueleto { display: grid; gap: 14px; padding: 6px 0 2px; }
.esqueleto i {
  display: block;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--chip) 0%, var(--linea) 50%, var(--chip) 100%);
  background-size: 200% 100%;
  animation: brillo-esqueleto 1.4s ease-in-out infinite;
}
.esqueleto i:nth-child(1) { width: 32%; }
.esqueleto i:nth-child(2) { width: 70%; height: 22px; }
.esqueleto i:nth-child(3) { width: 90%; }
.esqueleto i:nth-child(4) { width: 100%; height: 40px; margin-top: 10px; }
.esqueleto i:nth-child(5) { width: 100%; height: 46px; margin-top: 8px; border-radius: var(--radio); }
@keyframes brillo-esqueleto { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ——— Código de 6 dígitos: celdas que "reciben" cada dígito; el input real queda encima, invisible ——— */
.codigo-zona { position: relative; margin: 22px 0 0; }
.celdas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.celdas i {
  display: grid;
  place-items: center;
  height: 56px;
  border-radius: var(--radio);
  border: 1.5px solid var(--borde-control);
  background: var(--campo);
  color: var(--titulo);
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s var(--rebote);
}
.celdas i.llena { border-color: var(--navy); animation: pop .28s var(--rebote); }
.celdas i.activa { border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(228, 33, 16, .15); }
.celdas i.activa::after { content: ""; width: 2px; height: 26px; background: var(--rojo); animation: parpadeo 1s steps(2) infinite; }
.celdas i.llena.activa::after { display: none; }
.celdas.invalidas i { border-color: var(--rojo); }
@keyframes pop { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes parpadeo { to { opacity: 0; } }
.codigo-zona input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font: inherit;
  font-size: 24px;
  letter-spacing: 2em;
  outline: none;
}
.codigo-zona input::selection { background: transparent; }
@media (prefers-color-scheme: dark) { .celdas i.llena { border-color: var(--enlace); } }

/* ——— Éxito: check que se dibuja antes de pasar al perfil ——— */
.exito { display: grid; place-items: center; padding: 28px 0 18px; text-align: center; }
.exito svg { width: 88px; height: 88px; }
.exito .circulo { fill: none; stroke: var(--rojo); stroke-width: 3; stroke-dasharray: 260; stroke-dashoffset: 260; animation: trazo .7s var(--suave-curva) forwards; }
.exito .palomita { fill: none; stroke: var(--rojo); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: trazo .45s var(--suave-curva) .55s forwards; }
.exito p { margin: 12px 0 0; font-weight: 700; color: var(--titulo); animation: sube .5s var(--suave-curva) .7s both; }
@keyframes trazo { to { stroke-dashoffset: 0; } }

/* ——— Mi perfil ——— */
.p-cabecera { display: flex; align-items: center; gap: 14px; }
.p-avatar {
  position: relative;
  flex: 0 0 62px;
  width: 62px; height: 62px;
  display: grid;
  place-items: center;
  color: var(--titulo);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .02em;
}
.p-avatar svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.p-avatar circle { fill: none; stroke-width: 4; stroke-dasharray: 43 1000; stroke-dashoffset: 43; animation: trazo .6s var(--suave-curva) forwards; }
.p-avatar circle:nth-child(1) { stroke: var(--rojo);    stroke-dashoffset: 43;  animation-delay: .1s; }
.p-avatar circle:nth-child(2) { stroke: var(--azul);    stroke-dasharray: 43 1000; stroke-dashoffset: 43; transform: rotate(90deg); transform-origin: center; animation-delay: .25s; }
.p-avatar circle:nth-child(3) { stroke: var(--naranja); transform: rotate(180deg); transform-origin: center; animation-delay: .4s; }
.p-avatar circle:nth-child(4) { stroke: var(--navy);    transform: rotate(270deg); transform-origin: center; animation-delay: .55s; }
.p-avatar span { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; animation: pop .5s var(--rebote) .2s both; }
.p-cabecera .eyebrow { margin: 0 0 4px; }
.p-sub { margin: 4px 0 0; font-size: 13.5px; color: var(--suave); overflow-wrap: anywhere; }

dl {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  column-gap: 14px;
  margin: 22px 0 0;
  border-top: 1px solid var(--linea);
}
dt, dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--linea); animation: sube .45s var(--suave-curva) both; }
dt { align-self: center; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
dd { font-size: 15px; font-weight: 600; color: var(--titulo); text-align: right; overflow-wrap: anywhere; }
dl > :nth-child(-n+2)  { animation-delay: .25s; }
dl > :nth-child(n+3)   { animation-delay: .32s; }
dl > :nth-child(n+5)   { animation-delay: .39s; }
dl > :nth-child(n+7)   { animation-delay: .46s; }
dl > :nth-child(n+9)   { animation-delay: .53s; }
dl > :nth-child(n+11)  { animation-delay: .6s; }
dl > :nth-child(n+13)  { animation-delay: .67s; }

/* ——— Pie ——— */
.pie {
  text-align: center;
  padding: 26px 20px calc(30px + env(safe-area-inset-bottom));
  animation: sube .7s var(--suave-curva) 1.3s both;
}
.pie-od { display: block; margin: 0 auto 10px; height: 22px; width: auto; }
.pie p { margin: 0; font-size: 12px; color: var(--suave); letter-spacing: .02em; }