/* =========================================================================
   TusRifas: components.css
   Piezas reutilizadas entre páginas.
   ========================================================================= */

/* ---------- Boleto (ticket con talón troquelado) ----------
   Estructura: .boleto > .boleto__cuerpo + .boleto__talon
   --boleto-fondo debe coincidir con el color de fondo detrás del boleto
   para que las muescas del troquel se vean "recortadas". */
.boleto {
  --boleto-fondo: var(--papel);
  --talon-ancho: 250px;
  position: relative;
  display: grid; grid-template-columns: 1fr var(--talon-ancho);
  background: var(--blanco); border-radius: var(--radio-l);
  box-shadow: var(--sombra);
}
.boleto__cuerpo { min-width: 0; }
.boleto__talon {
  position: relative; border-left: 2px dashed var(--linea-fuerte);
  padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem;
}
.boleto__talon::before, .boleto__talon::after {
  content: ''; position: absolute; left: -13px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--boleto-fondo);
}
.boleto__talon::before { top: -12px; box-shadow: inset 0 -2px 2px -1px rgba(15, 43, 70, .08); }
.boleto__talon::after { bottom: -12px; box-shadow: inset 0 2px 2px -1px rgba(15, 43, 70, .08); }
.talon__dato span { display: block; font-size: var(--t-xs); color: var(--tinta-60); font-weight: 600; }
.talon__dato strong { font-size: var(--t-m); }
.talon__precio strong { font-size: 2.75rem; line-height: 1; font-stretch: var(--ancho-condensado); font-variant-numeric: tabular-nums; }
.talon__precio small { font-size: var(--t-s); font-weight: 600; color: var(--tinta-60); }

@media (max-width: 760px) {
  .boleto { grid-template-columns: 1fr; }
  .boleto__talon { border-left: 0; border-top: 2px dashed var(--linea-fuerte); }
  .boleto__talon::before, .boleto__talon::after { top: -13px; bottom: auto; }
  .boleto__talon::before { left: -12px; }
  .boleto__talon::after { left: auto; right: -12px; }
}

/* ---------- Modal genérico ---------- */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 1rem;
  background: rgba(15, 43, 70, .55);
  opacity: 0; transition: opacity .18s ease-out;
}
.modal.is-abierto { opacity: 1; }
.modal__caja {
  position: relative; width: min(100%, 480px); max-height: calc(100dvh - 2rem); overflow-y: auto;
  background: var(--blanco); border-radius: var(--radio-l); box-shadow: var(--sombra-alta);
  transform: translateY(12px) scale(.98); transition: transform .2s ease-out;
}
.modal.is-abierto .modal__caja { transform: none; }
.modal__cerrar {
  position: absolute; top: .75rem; right: .75rem; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--papel); font-size: 1.125rem;
}
.modal__cerrar:hover { background: var(--linea); }
.modal__cuerpo { padding: 2rem; }
.modal__cuerpo h2 { font-size: var(--t-xl); padding-right: 2.5rem; }
body.modal-abierto { overflow: hidden; }

/* ---------- Modal de ingreso ---------- */
.auth { width: min(100%, 860px); display: grid; grid-template-columns: 330px 1fr; overflow: hidden; }
.auth__lateral {
  position: relative; background: var(--tinta); color: var(--blanco);
  padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  border-right: 2px dashed #3A5673;
}
.auth__lateral h2 { font-size: 1.75rem; color: var(--blanco); }
.auth__lateral p { color: #C6D3E0; margin-top: .75rem; font-size: var(--t-s); }
.auth__lateral .marca { color: var(--blanco); }
.auth__garantias { list-style: none; padding: 0; display: grid; gap: .75rem; font-size: var(--t-s); color: #DCE6F0; }
.auth__garantias li { display: flex; gap: .625rem; }
.auth__garantias i { color: var(--sol); margin-top: .2rem; width: 16px; }
.auth__form { padding: 2.25rem 2rem 2rem; }
.auth__tabs { display: flex; gap: .25rem; padding: .25rem; background: var(--papel); border-radius: 10px; margin-bottom: 1.5rem; margin-right: 2.75rem; }
.auth__tab { flex: 1; min-height: 40px; border: 0; border-radius: 8px; background: none; font-weight: 700; color: var(--tinta-60); }
.auth__tab[aria-selected="true"] { background: var(--blanco); color: var(--tinta); box-shadow: 0 1px 3px rgba(15, 43, 70, .15); }
.auth__motivo { margin-bottom: 1.25rem; }
.btn-google {
  width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: .75rem;
  border: 1.5px solid var(--linea-fuerte); border-radius: 8px; background: var(--blanco); font-weight: 700;
}
.btn-google:hover { border-color: var(--tinta); }
.btn-google i { font-size: 1.125rem; color: #4285F4; }
.separador-texto { display: flex; align-items: center; gap: 1rem; margin-block: 1.25rem; font-size: var(--t-xs); color: var(--tinta-60); }
.separador-texto::before, .separador-texto::after { content: ''; flex: 1; height: 1px; background: var(--linea); }
.campo-clave { position: relative; }
.campo-clave .input { padding-right: 3rem; }
.campo-clave__ver { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; color: var(--tinta-60); border-radius: 8px; }
.auth__fila { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-block: 1rem 1.25rem; font-size: var(--t-s); }
.auth__pie .editar, .auth__fila .editar { font-size: inherit; font-weight: 600; }
.auth__pie { margin-top: 1.25rem; font-size: var(--t-xs); color: var(--tinta-60); }
.auth__error { margin-bottom: 1rem; }
@media (max-width: 760px) {
  .auth { grid-template-columns: 1fr; }
  .auth__lateral { display: none; }
  .auth__form { padding: 1.75rem 1.25rem 1.5rem; }
}

/* ---------- Toasts ---------- */
.toasts { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 200; display: grid; gap: .5rem; width: min(calc(100% - 2rem), 420px); pointer-events: none; }
.toast {
  display: flex; gap: .75rem; align-items: flex-start; padding: .875rem 1rem; border-radius: var(--radio-m);
  background: var(--tinta); color: var(--blanco); box-shadow: var(--sombra-alta); font-size: var(--t-s); font-weight: 600;
  pointer-events: auto; animation: toast-in .22s ease-out;
}
.toast i { margin-top: .15rem; color: var(--sol); }
.toast--error i { color: #FF9B8F; }
.toast--ok i { color: #7FE0AE; }
.toast.is-saliendo { opacity: 0; transform: translateY(8px); transition: all .2s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Stepper (pasos de compra) ---------- */
.pasos { list-style: none; padding: 0; display: flex; gap: .5rem; counter-reset: paso; }
.pasos li { flex: 1; counter-increment: paso; }
.paso {
  display: flex; align-items: center; gap: .625rem; width: 100%; padding: .625rem .25rem;
  border: 0; border-top: 4px solid var(--linea); background: none; text-align: left;
  font-weight: 700; font-size: var(--t-s); color: var(--tinta-60); cursor: default;
}
.paso::before {
  content: counter(paso); display: grid; place-items: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid currentColor;
  font-stretch: var(--ancho-condensado); font-size: var(--t-s);
}
.paso.is-hecho { border-top-color: var(--tinta); color: var(--tinta); cursor: pointer; }
.paso.is-hecho::before { content: '\2713'; background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.paso.is-actual { border-top-color: var(--sol); color: var(--tinta); }
.paso.is-actual::before { background: var(--sol); border-color: var(--sol); }
@media (max-width: 640px) {
  .paso { flex-direction: column; align-items: flex-start; gap: .375rem; font-size: var(--t-xs); }
}

/* ---------- Acordeones (<details>) ---------- */
.acordeon { border-top: 1px solid var(--linea); }
.acordeon > summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.125rem 0; font-weight: 700; font-size: var(--t-l);
}
.acordeon > summary::-webkit-details-marker { display: none; }
.acordeon > summary::after {
  content: '+'; flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: var(--papel); font-size: 1.25rem; font-weight: 600; transition: transform .2s;
}
.acordeon[open] > summary::after { content: '\2212'; background: var(--sol); }
.acordeon__cuerpo { padding: 0 0 1.25rem; color: var(--tinta-80); }
.acordeon__cuerpo > * + * { margin-top: .75rem; }

/* ---------- Tabla de datos (ficha técnica, resumen) ---------- */
.tabla-datos { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.tabla-datos th, .tabla-datos td { padding: .625rem 0; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.tabla-datos th { font-weight: 500; color: var(--tinta-60); width: 45%; padding-right: 1rem; }
.tabla-datos td { font-weight: 600; }
.tabla-datos tr:last-child th, .tabla-datos tr:last-child td { border-bottom: 0; }

/* ---------- Botón de texto (editar, ver más) ---------- */
.editar { font-size: var(--t-s); font-weight: 700; background: none; border: 0; color: var(--celeste-texto); text-decoration: underline; padding: 0; }
.editar:hover { color: var(--tinta); }

/* ---------- Tarjeta simple ---------- */
.tarjeta { background: var(--blanco); border-radius: var(--radio-m); padding: 1.5rem; box-shadow: var(--sombra); }

/* ---------- Estado vacío / puerta de ingreso ---------- */
.vacio { text-align: center; padding: 3rem 1.5rem; }
.vacio__icono { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; background: var(--sol-50); font-size: 1.5rem; }
.vacio h2, .vacio h3 { font-size: var(--t-xl); }
.vacio p { margin: .5rem auto 1.25rem; color: var(--tinta-60); }

/* ---------- Copiar al portapapeles ---------- */
.dato-copiable { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .625rem 0; border-bottom: 1px solid var(--linea); }
.dato-copiable:last-child { border-bottom: 0; }
.dato-copiable span { display: block; font-size: var(--t-xs); color: var(--tinta-60); }
.dato-copiable strong { font-variant-numeric: tabular-nums; word-break: break-all; }
.btn-copiar { flex-shrink: 0; border: 1.5px solid var(--linea); background: var(--blanco); border-radius: 8px; min-height: 36px; padding: .25rem .625rem; font-size: var(--t-xs); font-weight: 700; }
.btn-copiar:hover { border-color: var(--tinta); }

/* ---------- Spinner ---------- */
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Boleto vertical y barra inferior móvil (rifa y participar) ---------- */
/* Variante vertical del boleto (talón abajo) */
.boleto--vertical { grid-template-columns: 1fr; }
.boleto--vertical .boleto__talon { border-left: 0; border-top: 2px dashed var(--linea-fuerte); }
.boleto--vertical .boleto__talon::before, .boleto--vertical .boleto__talon::after { top: -13px; bottom: auto; }
.boleto--vertical .boleto__talon::before { left: -12px; }
.boleto--vertical .boleto__talon::after { left: auto; right: -12px; }

/* Barra fija inferior en móvil */
.barra-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: none; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background: var(--blanco);
  border-top: 1px solid var(--linea); box-shadow: 0 -8px 24px -12px rgba(15, 43, 70, .3);
}
.barra-inferior__dato { font-size: var(--t-xs); color: var(--tinta-60); font-weight: 600; line-height: 1.3; }
.barra-inferior__dato strong { display: block; font-size: var(--t-l); color: var(--tinta); font-stretch: var(--ancho-condensado); }
@media (max-width: 980px) {
  .barra-inferior { display: flex; }
  body.tiene-barra-inferior .footer { padding-bottom: 5rem; }
}
.tabla-datos td, .tabla-datos th { overflow-wrap: anywhere; }
/* ---------- Botones azules (flujo de compra y Mis rifas) ---------- */
.btn--azul { --btn-bg: var(--azul); --btn-fg: var(--blanco); --btn-borde: var(--azul); box-shadow: 0 2px 4px rgba(13, 79, 160, .25); }
.btn--azul:hover { --btn-bg: var(--azul-hover); --btn-borde: var(--azul-hover); color: var(--blanco); }
.btn--blanco { --btn-bg: var(--blanco); --btn-fg: var(--tinta); --btn-borde: var(--linea); box-shadow: 0 2px 4px rgba(15, 43, 70, .12); }
.btn--indigo { --btn-bg: var(--indigo); --btn-fg: var(--blanco); --btn-borde: var(--indigo); }
.btn--indigo:hover { --btn-bg: #303F9F; --btn-borde: #303F9F; color: var(--blanco); }