/* ═══════════════════════════════════════════════════════════
   27 · Histórico Cuenca — estilos compartidos
   Paleta: azul marino #1B263B · vino #781D2A
           blanco hueso #F4EDE4 · azul acero #3D5A80
   ═══════════════════════════════════════════════════════════ */

/* ---- Lienzo: azul marino con luz central y grano de papel ---- */
body {
  background-color: #1B263B;
  background-image:
    radial-gradient(ellipse 80% 65% at 50% 38%, rgba(61,90,128,.30), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(11,16,28,.55), transparent 75%);
  background-attachment: fixed;
}
.grain::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Relieve tipo letterpress: luz arriba, sombra abajo ---- */
.emboss {
  text-shadow:
    0 -1px 0 rgba(255,252,247,.38),
    0  1px 0 rgba(10,15,26,.55),
    0  6px 18px rgba(8,12,22,.45);
}
.emboss-sm {
  text-shadow:
    0 -1px 0 rgba(255,252,247,.22),
    0  1px 2px rgba(10,15,26,.60);
}

/* ---- Filete que se desvanece en los extremos ---- */
.rule {
  height: 1px; flex: 1;
  background: linear-gradient(to var(--dir, right), transparent, rgba(61,90,128,.85));
}
.hairline { height: 1px; background: rgba(61,90,128,.35); }

/* ---- Botones ---- */
.btn {
  font-family: "Jost", ui-sans-serif, sans-serif; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase; font-size: .78rem;
  min-height: 52px; display: flex; align-items: center; justify-content: center;
  border-radius: 2px; transition: all .4s cubic-bezier(.22,.61,.36,1);
  text-decoration: none; padding-left: .18em;
}
.btn:focus-visible { outline: 2px solid #7B9BC4; outline-offset: 4px; }

.btn-wax {
  background: linear-gradient(170deg, #8A2231, #781D2A 55%, #5E1421);
  color: #F4EDE4;
  border: 1px solid rgba(61,90,128,.55);
  box-shadow: 0 2px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10);
}
.btn-wax:hover {
  border-color: rgba(122,155,196,.85);
  box-shadow: 0 4px 22px rgba(120,29,42,.45), inset 0 1px 0 rgba(255,255,255,.16);
  transform: translateY(-1px);
}

.btn-ghost {
  color: rgba(244,237,228,.78);
  border: 1px solid rgba(61,90,128,.55);
  background: rgba(61,90,128,.06);
}
.btn-ghost:hover {
  color: #F4EDE4;
  border-color: rgba(122,155,196,.80);
  background: rgba(61,90,128,.16);
  transform: translateY(-1px);
}

/* ---- Páginas de contenido ---- */
.eyebrow {
  font-family: "Jost", sans-serif; font-weight: 300;
  text-transform: uppercase; font-size: .62rem;
  letter-spacing: .38em; padding-left: .38em;
  color: rgba(244,237,228,.42);
}
.value {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 300;
  font-size: 1.5rem; line-height: 1.35; color: #F4EDE4;
}
.note { color: rgba(244,237,228,.55); font-size: .88rem; line-height: 1.7; font-weight: 300; }

/* Volver: flecha que retrocede al pasar el cursor */
.back { color: rgba(244,237,228,.45); transition: color .3s ease; }
.back:hover { color: rgba(244,237,228,.85); }
.back span { display: inline-block; transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.back:hover span { transform: translateX(-4px); }

/* ---- Entrada en escena ---- */
.rise { opacity: 0; transform: translateY(14px); animation: rise 1.4s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---- La cera atrapa la luz ---- */
.breathe { animation: breathe 7s ease-in-out infinite; transform-origin: center; }
@keyframes breathe { 0%,100% { opacity: .55; } 50% { opacity: .95; } }

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; animation: none; }
  .breathe { animation: none; opacity: .7; }
  .btn, .back span { transition: none; }
  .btn:hover { transform: none; }
  .back:hover span { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Formularios y paneles
   ═══════════════════════════════════════════════════════════════ */

.campo {
  width: 100%;
  background: rgba(11,17,28,.45);
  border: 1px solid rgba(61,90,128,.45);
  border-radius: 2px;
  color: #F4EDE4;
  font-family: "Jost", sans-serif;
  font-weight: 300;
  font-size: 1rem;
  padding: .85rem 1rem;
  min-height: 52px;
  transition: border-color .3s ease, background .3s ease;
}
.campo::placeholder { color: rgba(244,237,228,.28); }
.campo:focus {
  outline: none;
  border-color: rgba(122,155,196,.85);
  background: rgba(11,17,28,.65);
}
.campo:disabled { opacity: .5; }

.etiqueta {
  display: block;
  font-family: "Jost", sans-serif; font-weight: 300;
  text-transform: uppercase; font-size: .6rem;
  letter-spacing: .34em; padding-left: .34em;
  color: rgba(244,237,228,.45);
  margin-bottom: .6rem;
}

/* El aviso de error: vino, pero legible sobre el azul marino */
.aviso {
  border-left: 2px solid #9B2A3C;
  background: rgba(120,29,42,.18);
  color: rgba(244,237,228,.9);
  font-size: .85rem; font-weight: 300; line-height: 1.6;
  padding: .8rem 1rem;
  border-radius: 2px;
}
.aviso-ok { border-left-color: #3D5A80; background: rgba(61,90,128,.18); }

/* Cifra grande del dashboard */
.cifra {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300; font-size: 2.6rem; line-height: 1;
  color: #F4EDE4;
}
.cifra-pie {
  font-family: "Jost", sans-serif; font-weight: 300;
  text-transform: uppercase; font-size: .58rem;
  letter-spacing: .28em; padding-left: .28em;
  color: rgba(244,237,228,.42);
  margin-top: .5rem;
}
.tarjeta {
  border: 1px solid rgba(61,90,128,.3);
  border-radius: 2px;
  background: rgba(61,90,128,.07);
  padding: 1.1rem 1rem;
}

.cargando { animation: pulso 1.4s ease-in-out infinite; }
@keyframes pulso { 0%,100% { opacity: .35 } 50% { opacity: .75 } }

@media (prefers-reduced-motion: reduce) {
  .cargando { animation: none; opacity: .5; }
  .campo { transition: none; }
}

/* ── Revelar la contraseña ── */
.ojo {
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  width: 2.4rem; height: 2.4rem;
  display: flex; align-items: center; justify-content: center;
  color: rgba(244,237,228,.42);
  background: none; border: 0; border-radius: 2px; cursor: pointer;
  transition: color .25s ease;
}
.ojo:hover { color: rgba(244,237,228,.85); }
.ojo:focus-visible { outline: 2px solid #7B9BC4; outline-offset: 2px; }

/* ── Casilla "mantener la sesión" ── */
.recordar {
  display: flex; align-items: center; gap: .7rem;
  font-family: "Jost", sans-serif; font-weight: 300; font-size: .82rem;
  color: rgba(244,237,228,.6);
  cursor: pointer; user-select: none;
  min-height: 44px;        /* alcanzable con el pulgar */
}
.recordar input { position: absolute; opacity: 0; width: 0; height: 0; }
.casilla {
  width: 1.05rem; height: 1.05rem; flex-shrink: 0;
  border: 1px solid rgba(61,90,128,.65); border-radius: 2px;
  background: rgba(11,17,28,.45);
  position: relative; transition: all .25s ease;
}
.recordar input:checked + .casilla {
  background: #781D2A;
  border-color: rgba(122,155,196,.7);
}
.recordar input:checked + .casilla::after {
  content: ""; position: absolute; left: .3rem; top: .08rem;
  width: .3rem; height: .58rem;
  border: solid #F4EDE4; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.recordar input:focus-visible + .casilla { outline: 2px solid #7B9BC4; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ojo, .casilla { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Formulario de compra
   ═══════════════════════════════════════════════════════════════ */

.paso-barra {
  flex: 1; height: 2px; border-radius: 1px;
  background: rgba(61,90,128,.28);
  transition: background .5s ease;
}
.paso-barra.activa { background: #781D2A; }

/* Códigos: monoespaciado y separado, para leerlos de un vistazo */
.codigo-campo {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.32rem; letter-spacing: .28em;
  text-align: center; padding-left: .28em;
}
.codigo-campo::placeholder { letter-spacing: .28em; font-size: 1.15rem; }

select.campo {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23F4EDE4' stroke-opacity='.5' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}

/* Zona para elegir el comprobante */
.subir {
  display: flex; align-items: center; justify-content: center;
  min-height: 92px; padding: 1rem;
  border: 1px dashed rgba(61,90,128,.6); border-radius: 2px;
  background: rgba(61,90,128,.06);
  color: rgba(244,237,228,.6);
  font-size: .85rem; font-weight: 300; text-align: center;
  cursor: pointer; transition: all .3s ease;
}
.subir:hover { border-color: rgba(122,155,196,.85); background: rgba(61,90,128,.14); }
.subir.con-archivo {
  border-style: solid; border-color: rgba(122,155,196,.7);
  background: rgba(61,90,128,.16); color: #F4EDE4;
}
.subir:focus-within { outline: 2px solid #7B9BC4; outline-offset: 3px; }

/* Botón de copiar, junto al número de cuenta */
.copiar {
  font-family: "Jost", sans-serif; font-weight: 300;
  font-size: .6rem; text-transform: uppercase; letter-spacing: .16em;
  color: rgba(159,186,219,.85);
  background: none; border: 0; border-bottom: 1px solid rgba(159,186,219,.35);
  margin-left: .5rem; padding: 0 0 1px 0; cursor: pointer;
}
.copiar:hover { color: #F4EDE4; border-bottom-color: #F4EDE4; }

@media (prefers-reduced-motion: reduce) {
  .paso-barra, .subir { transition: none; }
}