/* Check-in diario (perfil propio) */
.pv-checkin {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: 1.35rem 1.5rem 1.5rem;
  border-radius: 20px;
  border: 1px solid var(--pl-border, rgba(255, 255, 255, 0.12));
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(169, 106, 231, 0.14), transparent 60%),
    var(--pl-panel-alt, rgba(255, 255, 255, 0.04));
}

/* ── Cabecera: rótulo + racha ── */
.ci-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.ci-title {
  font-family: var(--font-heading, "Orbitron", monospace);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pl-muted, #bba9df);
}

/* Racha en píldora */
.ci-streak {
  display: inline-flex;
  align-items: baseline;
  gap: 0.32rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--pl-muted, #bba9df);
}

.ci-streak.is-viva {
  border-color: rgba(255, 180, 71, 0.42);
  background: rgba(255, 168, 61, 0.12);
  color: #ffcc66;
}

.ci-streak-ico { font-size: 0.9rem; }
.ci-streak-num {
  font-family: var(--font-heading, "Orbitron", monospace);
  font-size: 1.05rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.ci-streak-txt { font-size: 0.72rem; font-weight: 700; opacity: 0.8; }

/* Pista de 7 días */
.ci-pista {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ci-dia {
  /* Tono de la casilla en canales rgba */
  --ci-a: 190, 175, 235;
  --ci-b: 169, 106, 231;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.34rem;
}

/* Domingo: premio triple */
.ci-dia.is-domingo { --ci-a: 255, 205, 90; --ci-b: 255, 150, 60; flex-grow: 1.35; }

.ci-dia-caja {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 4.2rem;
  aspect-ratio: 1 / 1;
  border-radius: 15px;
  border: 1px solid rgba(var(--ci-a), 0.22);
  background: rgba(var(--ci-a), 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ci-dia-ico {
  font-size: 1.02rem;
  line-height: 1;
  opacity: 0.6;
}

.ci-dia-premio {
  font-size: 0.68rem;
  font-weight: 800;
  color: rgba(var(--ci-a), 0.9);
  font-variant-numeric: tabular-nums;
}

.ci-dia-num {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pl-muted, #bba9df);
  opacity: 0.6;
}

/* Reclamado */
.ci-dia.is-hecho .ci-dia-caja {
  border-color: transparent;
  background: linear-gradient(150deg, rgba(var(--ci-a), 0.95), rgba(var(--ci-b), 0.95));
  opacity: 0.82;
}

.ci-dia.is-hecho .ci-dia-ico {
  color: #1a0a24;
  font-weight: 900;
  opacity: 1;
}

.ci-dia.is-hecho .ci-dia-premio { opacity: 0.45; }

/* Hoy sin reclamar */
.ci-dia.is-hoy .ci-dia-caja {
  border: 2px solid rgb(var(--ci-a));
  background: rgba(var(--ci-a), 0.16);
  transform: scale(1.07);
  box-shadow:
    0 0 0 4px rgba(var(--ci-a), 0.1),
    0 10px 24px -12px rgba(var(--ci-a), 0.95);
  /* steps() en vez de ease-in-out: menos repintados de box-shadow */
  animation: ciHoyPulso 2.4s steps(24) infinite;
}

.ci-dia.is-hoy .ci-dia-ico    { opacity: 1; }
.ci-dia.is-hoy .ci-dia-premio { color: rgb(var(--ci-a)); }
.ci-dia.is-hoy .ci-dia-num    { opacity: 1; color: rgb(var(--ci-a)); }

/* Futuro */
.ci-dia.is-futuro .ci-dia-caja { border-style: dashed; }

/* Días pasados sin marcar */
.ci-dia.is-pasado           { opacity: 0.42; }
.ci-dia.is-pasado .ci-dia-caja { border-style: dotted; background: transparent; }
.ci-dia.is-pasado .ci-dia-ico  { opacity: 0.35; }

@keyframes ciHoyPulso {
  0%, 100% { box-shadow: 0 0 0 4px rgba(var(--ci-a), 0.10), 0 10px 24px -12px rgba(var(--ci-a), 0.95); }
  50%      { box-shadow: 0 0 0 7px rgba(var(--ci-a), 0.00), 0 10px 24px -12px rgba(var(--ci-a), 0.95); }
}

/* Casilla recién marcada: entrada con rebote */
.ci-dia-caja.is-nuevo {
  animation: ciCajaNueva 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ciCajaNueva {
  0%   { transform: scale(0.45) rotate(-8deg); }
  60%  { transform: scale(1.18) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Progreso hacia el marco de los 30 días */
.ci-marco {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.9rem 0.8rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
}

.ci-marco-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.ci-marco-label {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--pl-soft, #d8c9ff);
}

.ci-marco-cuenta {
  font-family: var(--font-heading, "Orbitron", monospace);
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--pl-muted, #bba9df);
  font-variant-numeric: tabular-nums;
}

.ci-marco-barra {
  position: relative;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.ci-marco-relleno {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8eefff, #a96ae7 60%, #e55ab1);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.ci-marco-pie {
  margin: 0;
  font-size: 0.73rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Botón + nota */
.ci-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}

/* Botón principal */
.ci-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.78rem 1.35rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #8eefff, #a96ae7 55%, #e55ab1);
  color: #16031f;
  font: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 10px 26px -8px rgba(169, 106, 231, 0.7);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Destello del botón */
.ci-btn-brillo {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-160%) skewX(-18deg);
  animation: ciDestello 4.2s ease-in-out infinite;
}

@keyframes ciDestello {
  0%, 62%  { transform: translateX(-160%) skewX(-18deg); }
  92%, 100% { transform: translateX(330%) skewX(-18deg); }
}

.ci-btn-txt { position: relative; }

.ci-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -8px rgba(169, 106, 231, 0.85);
}

.ci-btn:active:not(:disabled) { transform: translateY(0) scale(0.98); }

.ci-btn:focus-visible {
  outline: 2px solid var(--pl-cyan, #8deeff);
  outline-offset: 3px;
}

.ci-btn.is-cargando .ci-btn-txt::after { content: "…"; }

.ci-btn:disabled,
.ci-btn.is-hecho {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
  cursor: default;
}

.ci-btn:disabled .ci-btn-brillo { display: none; }

.ci-note {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.8rem;
  line-height: 1.45;
}

/* Acuse de recibo */
.ci-flash {
  margin: 0;
  color: #c8fff8;
  font-size: 0.82rem;
  font-weight: 700;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.ci-flash.is-in {
  opacity: 1;
  transform: none;
}

.ci-cumple { color: #ffd0e8; }

/* Móvil */
@media (max-width: 560px) {
  .pv-checkin { padding: 1.1rem 1rem 1.2rem; gap: 1rem; }
  .ci-pista   { gap: 0.28rem; }
  .ci-dia-caja { max-width: 2.6rem; border-radius: 13px; }
  .ci-dia-ico    { font-size: 0.9rem; }
  .ci-dia-premio { font-size: 0.62rem; }
  .ci-dia-num    { font-size: 0.55rem; }
  .ci-btn { width: 100%; justify-content: center; }
}

/* Sin animaciones automáticas en móvil */
@media (max-width: 720px) {
  .ci-dia.is-hoy .ci-dia-caja,
  .ci-btn-brillo { animation: none; }
  .ci-btn-brillo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ci-dia.is-hoy .ci-dia-caja,
  .ci-dia-caja.is-nuevo,
  .ci-btn-brillo,
  .ci-btn,
  .ci-marco-relleno,
  .ci-flash { animation: none; transition: none; }
  .ci-btn-brillo { display: none; }
  .ci-btn:hover:not(:disabled) { transform: none; }
}