/* screens.css — Estilos específicos por pantalla */

/* ---------- 1. Landing ---------- */
.landing {
  text-align: center;
  padding-top: var(--sp-4);
}

.landing__hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #4A4B50 0%, var(--color-dark) 60%, #232420 100%);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-5);
  box-shadow: var(--shadow-md);
}

.landing__hero h1 {
  color: var(--color-white);
  font-size: var(--fs-3xl);
  margin: var(--sp-3) 0 var(--sp-2);
}

.landing__hero p {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-lg);
}

.landing__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing__kicker svg { width: 14px; height: 14px; }

.landing__slogan {
  margin-top: var(--sp-5);
  font-style: italic;
  font-size: var(--fs-sm) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin: var(--sp-5) 0;
}

.trust__item {
  background: var(--color-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-gray-700);
}

.trust__item svg {
  width: 26px;
  height: 26px;
  color: var(--color-red);
}

.landing .btn { margin-top: var(--sp-2); }

.landing__legal {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .landing__hero { padding: var(--sp-10) var(--sp-8); }  .trust__item { font-size: var(--fs-sm); padding: var(--sp-4); }
}

/* ---------- 2. Instrucciones ---------- */
.instrucciones .icon-list li {
  padding: var(--sp-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

/* ---------- 3-4. Identidad ---------- */
.identity-card .field__input {
  font-size: var(--fs-xl);
}

.identity-help {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3);
  background: var(--color-info-light);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  color: var(--color-info);
  margin-top: var(--sp-4);
}

.identity-help svg { flex: none; width: 20px; height: 20px; }

.persona-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--color-gray-100);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}

.persona-chip svg { width: 18px; height: 18px; color: var(--color-success); }

/* ---------- 5. Términos ---------- */
.terms-box {
  max-height: 180px;
  overflow: auto;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  font-size: var(--fs-xs);
  color: var(--color-gray-700);
  margin-bottom: var(--sp-4);
}

/* ---------- 6. Formulario ---------- */
@media (min-width: 640px) {
  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-4);
  }
  .form-grid .field--full { grid-column: 1 / -1; }
}

/* ---------- 8. Biometría ---------- */
.bio-warning {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--color-warning-light);
  border: 1px solid #F5DCA8;
  color: #6B4000;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}

.bio-warning svg { flex: none; width: 26px; height: 26px; color: var(--color-warning); }

.bio-accessories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin: var(--sp-4) 0;
}

.bio-accessories span {
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--color-gray-100);
  font-size: var(--fs-xs);
  text-decoration: line-through;
  color: var(--color-gray-700);
}

.camera {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  background: var(--color-ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.camera__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* espejo, como un selfie */
}

/* Guía ovalada: la sombra enorme oscurece todo fuera del óvalo */
.camera__guide {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 64%;
  aspect-ratio: 3 / 4;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
  transition: border-color var(--transition);
  pointer-events: none;
}

.camera__guide::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 4px dashed transparent;
}

.camera.is-ok .camera__guide { border-color: #2ECC71; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45), 0 0 24px rgba(46, 204, 113, 0.7); }
.camera.is-error .camera__guide { border-color: var(--color-red); }
.camera.is-done .camera__guide { border-color: #2ECC71; }

.camera__status {
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.65);
  color: var(--color-white);
  text-align: center;
  font-weight: 600;
  font-size: var(--fs-sm);
  backdrop-filter: blur(3px);
}

.camera.is-ok .camera__status { background: rgba(27, 138, 76, 0.85); }
.camera.is-error .camera__status { background: rgba(157, 27, 35, 0.85); }

.camera__hold {
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: calc(var(--sp-3) + 46px);
  height: 5px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.camera__hold-fill {
  height: 100%;
  width: 0;
  background: #2ECC71;
  transition: width 120ms linear;
}

.camera__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  background: rgba(17, 17, 17, 0.88);
  color: var(--color-white);
  text-align: center;
  padding: var(--sp-5);
  font-weight: 600;
}

.camera__overlay .loader__spinner {
  border-color: rgba(255, 255, 255, 0.25);
  border-top-color: var(--color-white);
}

.camera__overlay--success {
  background: rgba(27, 138, 76, 0.92);
}

.camera__overlay--success svg {
  width: 64px;
  height: 64px;
  animation: pop 400ms ease;
}

.camera__badge {
  position: absolute;
  top: var(--sp-3);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.55);
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  white-space: nowrap;
}

.camera__badge svg { width: 12px; height: 12px; }

.bio-tips {
  margin: var(--sp-4) auto 0;
  max-width: 420px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
}

@keyframes pop {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- 9-10. Documentos ---------- */
.consent-summary { margin-bottom: var(--sp-4); }

.doc-list { margin-bottom: var(--sp-5); }

.legal-checks { margin-top: var(--sp-4); }

/* ---------- 11. Final ---------- */
.final {
  text-align: center;
}

.final__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  background: var(--color-success-light);
  color: var(--color-success);
  font-weight: 700;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}

.final__badge svg { width: 18px; height: 18px; }

.final__code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
  padding: var(--sp-2) var(--sp-3);
  background: var(--color-gray-100);
  border-radius: var(--radius-sm);
  display: inline-block;
  margin-top: var(--sp-2);
  word-break: break-all;
}

.final__docs {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-5) 0;
  text-align: left;
}

.final__doc {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.final__doc-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-red-light);
  color: var(--color-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.final__doc-icon svg { width: 22px; height: 22px; }

.final__doc-name {
  flex: 1;
  font-weight: 600;
  font-size: var(--fs-sm);
}

.final__doc-actions {
  display: flex;
  gap: var(--sp-1);
}

.final__mail {
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--color-info-light);
  color: var(--color-info);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}

.final__mail strong { word-break: break-all; }

.selfie-thumb {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-success);
  margin: 0 auto var(--sp-3);
}