/* =============================================================================
   styles.css — Sportpool · Formulario de Solicitud de Factura
   Mobile-first · Design tokens · Form + Success states
   ============================================================================= */

/* ── Tokens ─────────────────────────────────────────────────────────────────── */

:root {
  /* Paleta: morado Sportpool sobre blanco limpio */
  --c-primary:       #6D28D9;   /* morado Sportpool — cabeceras, botones */
  --c-primary-dk:    #5B21B6;   /* hover del botón primario */
  --c-primary-lt:    #F3E8FF;   /* fondo morado claro */
  --c-accent:        #8B5CF6;   /* íconos, checkmarks activos */
  --c-bg:            #F7F8F9;   /* fondo de página */
  --c-surface:       #FFFFFF;   /* fondo de secciones */
  --c-border:        #D0D5DD;   /* bordes de inputs */
  --c-border-focus:  #7C3AED;   /* borde al enfocar */
  --c-text:          #1A1A1A;
  --c-text-muted:    #5A6272;
  --c-error:         #C62828;
  --c-error-bg:      #FFF5F5;
  --c-success-bg:    #F0FDF9;

  /* Tipografía */
  --font-body:  system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs:      0.75rem;    /* 12px */
  --fs-sm:      0.875rem;   /* 14px */
  --fs-base:    1rem;       /* 16px */
  --fs-lg:      1.125rem;   /* 18px */
  --fs-xl:      1.375rem;   /* 22px */
  --fs-2xl:     1.75rem;    /* 28px */
  --lh-tight:   1.25;
  --lh-base:    1.55;

  /* Espacios */
  --sp-1:   0.25rem;   /* 4px  */
  --sp-2:   0.5rem;    /* 8px  */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */
  --sp-10:  2.5rem;    /* 40px */

  /* Radios y sombras */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,.10);
}

/* ── Reset mínimo ────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family:      var(--font-body);
  font-size:        var(--fs-base);
  line-height:      var(--lh-base);
  color:            var(--c-text);
  background-color: var(--c-bg);
  min-height:       100dvh;
}

img { max-width: 100%; display: block; }

[hidden] { display: none !important; }

a { color: var(--c-primary); }
a:hover { text-decoration: none; }

/* ── Contenedor principal ────────────────────────────────────────────────────── */

.app {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) var(--sp-10);
}

/* ── Cabecera de página ──────────────────────────────────────────────────────── */

.page-header {
  padding: var(--sp-8) 0 var(--sp-6);
  border-bottom: 2px solid var(--c-primary);
  margin-bottom: var(--sp-6);
}

.brand {
  font-size:     var(--fs-sm);
  font-weight:   600;
  color:         var(--c-primary);
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-2);
}

.page-header h1 {
  font-size:   var(--fs-2xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  color:       var(--c-text);
  margin-bottom: var(--sp-2);
}

.header-note {
  font-size:  var(--fs-sm);
  color:      var(--c-text-muted);
  max-width:  38ch;
}

/* ── Secciones del formulario ────────────────────────────────────────────────── */

.form-section {
  background:    var(--c-surface);
  border-radius: var(--radius-md);
  padding:       var(--sp-5);
  margin-bottom: var(--sp-4);
  box-shadow:    var(--shadow-sm);
}

.section-heading {
  font-size:      var(--fs-lg);
  font-weight:    600;
  color:          var(--c-primary);
  padding-left:   var(--sp-3);
  border-left:    3px solid var(--c-accent);
  margin-bottom:  var(--sp-4);
  line-height:    var(--lh-tight);
}

.section-hint {
  font-size:     var(--fs-sm);
  color:         var(--c-text-muted);
  margin-bottom: var(--sp-4);
}

/* ── Campos ──────────────────────────────────────────────────────────────────── */

.field {
  margin-bottom: var(--sp-4);
}
.field:last-child { margin-bottom: 0; }

.field label {
  display:       block;
  font-size:     var(--fs-sm);
  font-weight:   500;
  margin-bottom: var(--sp-1);
  color:         var(--c-text);
}

.label-optional {
  font-weight: 400;
  color:       var(--c-text-muted);
}

.field input,
.field select {
  width:         100%;
  padding:       var(--sp-3) var(--sp-3);
  font-size:     var(--fs-base);
  font-family:   var(--font-body);
  border:        1.5px solid var(--c-border);
  border-radius: var(--radius-sm);
  background:    var(--c-surface);
  color:         var(--c-text);
  appearance:    none;
  -webkit-appearance: none;
  transition:    border-color 0.15s;
  min-height:    44px; /* touch target */
}

.field input:focus,
.field select:focus {
  outline:       none;
  border-color:  var(--c-border-focus);
  box-shadow:    0 0 0 3px rgba(10,92,69,0.12);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--c-error);
  background:   var(--c-error-bg);
}

/* Select: ícono de flecha */
.field select {
  padding-right:     var(--sp-8);
  background-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235A6272' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
}

/* Pares de campos en fila (fecha + monto, RFC + CP) */
.field-pair {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--sp-3);
  margin-bottom:         var(--sp-4);
}

/* ── Zona de carga de archivo ────────────────────────────────────────────────── */

.upload-area {
  position:      relative;
  border:        2px dashed var(--c-border);
  border-radius: var(--radius-md);
  cursor:        pointer;
  transition:    border-color 0.15s, background 0.15s;
  min-height:    120px;
  display:       flex;
  align-items:   center;
  justify-content: center;
}

.upload-area:hover,
.upload-area:focus {
  border-color: var(--c-primary);
  background:   var(--c-primary-lt);
  outline:      none;
}

.upload-area.drag-over {
  border-color: var(--c-accent);
  background:   var(--c-primary-lt);
}

.upload-area.has-file {
  border-style:  solid;
  border-color:  var(--c-accent);
}

.upload-input {
  position: absolute;
  inset:    0;
  opacity:  0;
  width:    0;
  height:   0;
  pointer-events: none;
}

.upload-prompt {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--sp-2);
  padding:        var(--sp-6);
  text-align:     center;
}

.upload-icon {
  width:  40px;
  height: 40px;
  stroke: var(--c-text-muted);
}

.upload-label {
  font-size:   var(--fs-base);
  font-weight: 500;
  color:       var(--c-primary);
}

.upload-hint {
  font-size: var(--fs-xs);
  color:     var(--c-text-muted);
}

.upload-preview {
  width:    100%;
  padding:  var(--sp-3);
  display:  flex;
  flex-direction: column;
  align-items:    center;
  gap:      var(--sp-3);
}

.upload-preview img {
  max-height:    240px;
  max-width:     100%;
  border-radius: var(--radius-sm);
  object-fit:    contain;
}

/* ── Errores de campo ────────────────────────────────────────────────────────── */

.field-error {
  font-size:  var(--fs-xs);
  color:      var(--c-error);
  margin-top: var(--sp-1);
  min-height: 1rem;
}
.field-error:empty { display: none; }

/* ── Radios ──────────────────────────────────────────────────────────────────── */

.fieldset-metodo {
  border: none;
  margin-bottom: var(--sp-4);
}

.fieldset-metodo legend {
  font-size:     var(--fs-sm);
  font-weight:   500;
  margin-bottom: var(--sp-2);
  color:         var(--c-text);
}

.radio-group {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-2);
}

.radio-option {
  display:     flex;
  align-items: flex-start;
  gap:         var(--sp-2);
  cursor:      pointer;
  font-size:   var(--fs-sm);
  line-height: var(--lh-base);
}

.radio-option input[type="radio"] {
  margin-top:  3px;
  flex-shrink: 0;
  accent-color: var(--c-primary);
  width:  18px;
  height: 18px;
}

/* ── Checkboxes ──────────────────────────────────────────────────────────────── */

.check-field {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--sp-3);
  cursor:        pointer;
  font-size:     var(--fs-sm);
  line-height:   var(--lh-base);
  margin-bottom: var(--sp-3);
}

.check-field input[type="checkbox"] {
  flex-shrink:  0;
  margin-top:   3px;
  accent-color: var(--c-primary);
  width:  20px;
  height: 20px;
}

/* ── Aviso de privacidad ─────────────────────────────────────────────────────── */

.privacy-section { background: var(--c-surface); }

.privacy-box {
  background:    var(--c-primary-lt);
  border-left:   3px solid var(--c-accent);
  border-radius: var(--radius-sm);
  padding:       var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}

.privacy-box p {
  font-size:   var(--fs-sm);
  color:       var(--c-text);
  line-height: var(--lh-base);
}

/* ── Botones ─────────────────────────────────────────────────────────────────── */

.btn-primary {
  width:           100%;
  padding:         var(--sp-4);
  font-size:       var(--fs-base);
  font-weight:     600;
  font-family:     var(--font-body);
  color:           #FFFFFF;
  background:      var(--c-primary);
  border:          none;
  border-radius:   var(--radius-md);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-2);
  min-height:      52px;
  transition:      background 0.15s, opacity 0.15s;
}

.btn-primary:hover:not(:disabled) {
  background: var(--c-primary-dk);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor:  not-allowed;
}

.btn-primary.is-loading {
  opacity: 1;
  cursor:  wait;
}

.btn-secondary {
  width:         100%;
  padding:       var(--sp-3) var(--sp-4);
  font-size:     var(--fs-sm);
  font-family:   var(--font-body);
  font-weight:   500;
  color:         var(--c-primary);
  background:    transparent;
  border:        1.5px solid var(--c-primary);
  border-radius: var(--radius-md);
  cursor:        pointer;
  min-height:    44px;
  transition:    background 0.15s;
}

.btn-secondary:hover {
  background: var(--c-primary-lt);
}

.btn-text {
  background:  none;
  border:      none;
  color:       var(--c-primary);
  font-size:   var(--fs-sm);
  font-family: var(--font-body);
  cursor:      pointer;
  padding:     var(--sp-1) var(--sp-2);
  text-decoration: underline;
}

.btn-copy {
  background:    var(--c-primary-lt);
  border:        1px solid var(--c-accent);
  border-radius: var(--radius-sm);
  color:         var(--c-primary);
  font-size:     var(--fs-xs);
  font-family:   var(--font-body);
  font-weight:   500;
  padding:       var(--sp-1) var(--sp-3);
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background 0.15s;
}
.btn-copy:hover { background: #E9D5FF; }

/* ── Progreso de envío ──────────────────────────────────────────────────────── */

.submit-progress {
  width: 100%;
  color: #FFFFFF;
}

.submit-progress-copy {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--sp-3);
  margin-bottom:   var(--sp-2);
  font-size:       var(--fs-sm);
}

.submit-progress-track {
  display:       block;
  width:         100%;
  height:        7px;
  overflow:      hidden;
  background:    rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}

.submit-progress-bar {
  display:       block;
  width:         0;
  height:        100%;
  background:    #FFFFFF;
  border-radius: inherit;
  transition:    width 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .submit-progress-bar { transition: none; }
}

/* ── Acciones y errores globales ─────────────────────────────────────────────── */

.form-actions {
  margin-top: var(--sp-2);
}

.global-error {
  font-size:     var(--fs-sm);
  color:         var(--c-error);
  background:    var(--c-error-bg);
  border-radius: var(--radius-sm);
  padding:       var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  line-height:   var(--lh-base);
}
.global-error:empty { display: none; }

/* ── Leyenda de contacto ─────────────────────────────────────────────────────── */

.contact-aside {
  margin-top:  var(--sp-8);
  padding-top: var(--sp-5);
  border-top:  1px solid var(--c-border);
}

.contact-title {
  font-size:     var(--fs-sm);
  font-weight:   600;
  color:         var(--c-text);
  margin-bottom: var(--sp-2);
}

.contact-aside p {
  font-size:     var(--fs-sm);
  color:         var(--c-text-muted);
  line-height:   var(--lh-base);
  margin-bottom: var(--sp-2);
  max-width:     52ch;
}
.contact-aside p:last-child { margin-bottom: 0; }

/* ── Vista de éxito ──────────────────────────────────────────────────────────── */

.success-card {
  background:    var(--c-surface);
  border-radius: var(--radius-lg);
  padding:       var(--sp-8) var(--sp-5);
  margin-top:    var(--sp-8);
  text-align:    center;
  box-shadow:    var(--shadow-md);
}

.success-icon {
  margin:      0 auto var(--sp-5);
  width:       64px;
  height:      64px;
  background:  var(--c-success-bg);
  border-radius: 50%;
  display:     flex;
  align-items: center;
  justify-content: center;
}

.success-icon svg {
  width:  32px;
  height: 32px;
  stroke: var(--c-accent);
}

.success-card h1 {
  font-size:     var(--fs-xl);
  font-weight:   700;
  margin-bottom: var(--sp-3);
}

.success-note {
  font-size:     var(--fs-sm);
  color:         var(--c-text-muted);
  margin-bottom: var(--sp-6);
  max-width:     36ch;
  margin-inline: auto;
}

.folio-box {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-3);
  background:      var(--c-bg);
  border-radius:   var(--radius-md);
  padding:         var(--sp-4);
  margin-bottom:   var(--sp-2);
  flex-wrap:       wrap;
}

.folio-label {
  font-size:  var(--fs-xs);
  color:      var(--c-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.folio-value {
  font-size:   var(--fs-xl);
  font-weight: 700;
  color:       var(--c-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.copy-feedback {
  font-size:     var(--fs-xs);
  color:         var(--c-accent);
  min-height:    1.2em;
  margin-bottom: var(--sp-6);
}

/* ── Focus visible (accesibilidad teclado) ───────────────────────────────────── */

:focus-visible {
  outline:        2px solid var(--c-primary);
  outline-offset: 2px;
}

/* ── Responsive: pantallas más anchas ───────────────────────────────────────── */

@media (min-width: 560px) {
  .app { padding: var(--sp-8) var(--sp-6) var(--sp-10); }
  .page-header h1 { font-size: 2rem; }
}