/* Formularios, planes y pago. Extiende el sistema neón: usa sus fichas de
   color y sus botones, y no redefine ninguno.

   La regla del sistema sigue valiendo: el glow solo va en lo que emite luz.
   Un campo de texto no emite luz, así que un input no lleva resplandor; el
   borde se enciende al enfocarse, que es otra cosa. */

.caja {
  padding: clamp(1.3rem, 3.5vw, 2.2rem);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  background: var(--humo);
}
.caja + .caja { margin-top: 1.2rem; }

.encabezado-paso { margin-bottom: 1.6rem; }
.encabezado-paso h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); margin-bottom: .4rem; }
.encabezado-paso p { color: var(--flash-2); max-width: 52ch; }

/* El foco se mueve al título de cada paso para que el teclado no se quede en
   la pantalla anterior. Pero un anillo de foco alrededor de un encabezado es
   ruido: el título no es algo que se accione. */
[tabindex="-1"]:focus { outline: none; }

/* Un botón deshabilitado tiene que verse deshabilitado. El sistema neón no
   traía el estado porque hasta ahora no había formularios. */
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn:disabled:hover { transform: none; }

/* ---------- Campos ---------- */

.campo { margin-bottom: 1.1rem; }
.campo label, .campo legend {
  display: block; margin-bottom: .38rem;
  font-size: .88rem; font-weight: 600; color: var(--flash);
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: .8rem .95rem;
  font: inherit;
  font-size: 1rem;                 /* menos de 16 px hace que iOS acerque la pantalla */
  color: var(--flash);
  background: var(--noche);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  transition: border-color .18s;
}
.campo textarea { min-height: 6rem; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: rgba(255, 244, 230, .34); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--fucsia);
}
.campo select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--flash-3) 50%),
                    linear-gradient(135deg, var(--flash-3) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }

.fila { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .fila { grid-template-columns: 1fr; } }

.ayuda { margin: .4rem 0 0; font-size: .85rem; color: var(--flash-3); }
.error-campo { margin: .4rem 0 0; font-size: .88rem; color: #ff8fb4; min-height: 1.2em; }
.error-campo.ok { color: var(--lima); }

/* ---------- Los planes ---------- */

.planes-elegir { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.plan-op {
  position: relative; display: block; text-align: left; cursor: pointer;
  padding: 1.3rem; border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: var(--noche); color: var(--flash); font: inherit;
  transition: border-color .18s, background-color .18s;
}
.plan-op:hover { border-color: var(--borde-vivo); }
/* El elegido sí emite: es el que está encendido. */
.plan-op[aria-pressed="true"] {
  border-color: transparent;
  background: linear-gradient(160deg, rgba(255, 45, 135, .16), rgba(138, 92, 255, .12)), var(--humo-alto);
  box-shadow: 0 0 0 1px var(--fucsia), 0 0 30px -12px rgba(255, 45, 135, .85);
}
.plan-op h3 { font-size: 1.25rem; margin-bottom: .2rem; }
.plan-op .precio { font-family: var(--display); font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.plan-op .precio small { font-size: .82rem; font-weight: 500; color: var(--flash-3); }
.plan-op .para { font-size: .86rem; color: var(--flash-3); margin: .3rem 0 .8rem; }
.plan-op ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.plan-op li { font-size: .88rem; color: var(--flash-2); padding-left: 1.1rem; position: relative; }
.plan-op li::before { content: '✓'; position: absolute; left: 0; color: var(--lima); }
.plan-op .recomendado {
  position: absolute; top: -.7rem; right: 1rem; padding: .2rem .7rem; border-radius: 999px;
  background: linear-gradient(103deg, var(--fucsia), var(--violeta)); color: #fff;
  font-size: .78rem; font-weight: 700;
}

/* ---------- Total y pago ---------- */

.total-caja {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-top: 1.4rem; padding: 1rem 1.2rem;
  border: 1px solid var(--borde-vivo); border-radius: var(--r); background: var(--noche);
}
.total-caja .n { font-family: var(--display); font-size: 1.7rem; font-weight: 700; }
.tachado { text-decoration: line-through; color: var(--flash-3); font-size: 1rem; margin-right: .4rem; }

.pago-caja { display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: flex-start; }
.qr-pago { flex: 0 0 auto; padding: .7rem; border-radius: var(--r); background: var(--flash); }
.qr-pago img { display: block; width: 160px; height: 160px; }
.alias-caja {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .75rem 1rem; border: 1px dashed var(--borde-vivo); border-radius: var(--r);
  background: var(--noche); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.02rem; word-break: break-all;
}

/* ---------- Subir el comprobante ---------- */

.zona-carga {
  display: grid; place-items: center; text-align: center; gap: .2rem;
  padding: 2rem 1rem; border: 1.5px dashed var(--borde-vivo); border-radius: var(--r-lg);
  background: var(--noche); cursor: pointer; transition: border-color .18s, background-color .18s;
}
.zona-carga:hover, .zona-carga.encima { border-color: var(--fucsia); background: rgba(255, 45, 135, .06); }
.zona-carga:focus-visible { outline: 2px solid var(--fucsia); outline-offset: 3px; }
.miniaturas { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.miniatura { width: 96px; height: 96px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--borde); }
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Estados ---------- */

.etiqueta {
  display: inline-block; padding: .26rem .7rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; border: 1px solid var(--borde-vivo); color: var(--flash-2);
}
.et-activo    { border-color: rgba(196, 255, 66, .5); color: var(--lima); }
.et-pendiente { border-color: rgba(255, 45, 135, .5); color: #ff8fb4; }
.et-rechazado { border-color: rgba(255, 90, 90, .5); color: #ff9a9a; }
.et-borrador, .et-cerrado { color: var(--flash-3); }

.dato-lista { display: grid; gap: .1rem; margin: 1.2rem 0 0; }
.dato { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0;
  border-bottom: 1px solid var(--borde); font-size: .94rem; }
.dato dt { color: var(--flash-3); margin: 0; }
.dato dd { margin: 0; text-align: right; overflow-wrap: anywhere; }

.codigo-grande {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.6rem, 5vw, 2.3rem); letter-spacing: .12em; color: var(--lima);
}

.vacio { padding: 2rem 1rem; text-align: center; color: var(--flash-3);
  border: 1px dashed var(--borde); border-radius: var(--r-lg); }

/* ---------- Panel ---------- */

.metricas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-bottom: 2rem; }
.metrica { padding: 1.1rem 1.2rem; border: 1px solid var(--borde); border-radius: var(--r); background: var(--humo); }
.metrica .n { display: block; font-family: var(--display); font-size: 2rem; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.metrica .t { display: block; margin-top: .2rem; font-size: .76rem; color: var(--flash-3);
  text-transform: uppercase; letter-spacing: .06em; }

.solapas { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.solapa { padding: .55rem 1.1rem; border: 1px solid var(--borde); border-radius: 999px;
  background: transparent; color: var(--flash-2); font: inherit; font-size: .9rem; cursor: pointer; }
.solapa[aria-selected="true"] { border-color: transparent; color: #fff;
  background: linear-gradient(103deg, var(--fucsia), var(--violeta)); }

.rev { display: grid; gap: 1.2rem; grid-template-columns: 210px 1fr; align-items: start;
  padding: 1.2rem; border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: var(--humo); margin-bottom: 1rem; }
.rev img.comp { width: 100%; border-radius: var(--r); border: 1px solid var(--borde); display: block; }
@media (max-width: 760px) { .rev { grid-template-columns: 1fr; } }
/* La ficha a la que se llegó desde el enlace del grupo. El resalte se va solo
   a los pocos segundos: sirve para encontrarla, no para quedarse. */
.rev.resaltada { border-color: var(--fucsia); box-shadow: 0 0 30px -10px rgba(255, 45, 135, .8); }

.tabla-scroll { overflow-x: auto; }
table.datos { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.datos th, table.datos td { text-align: left; padding: .5rem .6rem .5rem 0;
  border-bottom: 1px solid var(--borde); vertical-align: top; }
table.datos th { color: var(--flash-3); font-weight: 500; white-space: nowrap; }

@media (pointer: coarse) {
  .btn-sm { min-height: 44px; }
  .solapa { min-height: 44px; }
}