/* style.css */
* { box-sizing: border-box; }

body { 
  font-family: 'Segoe UI', system-ui, sans-serif; 
  background: radial-gradient(circle at center, #0b4dd9, #051e5e); 
  margin: 0; padding: 20px; 
  min-height: 100vh; 
  display: flex; justify-content: center; align-items: flex-start; 
}

/* --- ESTO ES LO NUEVO PARA EVITAR EL PARPADEO --- */
/* Ocultamos la app al inicio */
.app-shell { 
  display: none; /* <--- IMPORTANTE */
  width: 100%; 
  max-width: 1000px; 
  flex-direction: column; 
  gap: 20px; 
}

/* Pantalla de Carga Exclusiva para Redirección */
#redirect-loading {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: #f0f2f5;
  display: flex; /* Flex para centrar */
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
}
/* ----------------------------------------------- */

/* TARJETAS */
.card { 
  background: white; border-radius: 20px; padding: 35px; 
  box-shadow: 0 15px 40px rgba(0,0,0,0.3); 
  text-align: center; width: 100%; 
}

/* TEXTOS Y FORMULARIO */
h1 { color: #123b88; margin: 0 0 10px 0; font-size: 28px; font-weight: 800; }
.subtitle { color: #666; margin: 0 0 30px 0; font-size: 16px; }

/* Wrapper para el input si lo usas */
.dni-wrapper { width: 100%; margin-bottom: 20px; }

input { 
  width: 100%; padding: 18px; border: 2px solid #ddd; 
  border-radius: 12px; font-size: 20px; text-align: center; 
  outline: none; background: #f8fafc;
}
input:focus { border-color: #2563eb; background: white; }

button.btn-primary { 
  width: 100%; padding: 18px; 
  background: linear-gradient(135deg, #123b88 0%, #2563eb 100%); 
  color: white; border: none; border-radius: 12px; 
  font-size: 18px; font-weight: bold; cursor: pointer; 
  text-transform: uppercase; letter-spacing: 1px;
  box-shadow: 0 10px 20px rgba(37,99,235,0.3);
}
button:hover { transform: translateY(-2px); }

/* RESULTADOS */
.profile-info { border-bottom: 2px dashed #eee; padding-bottom: 25px; margin-bottom: 25px; text-align: center; }
.profile-name { color: #123b88; font-size: 24px; font-weight: bold; }

.stats-grid { display: flex; gap: 15px; margin-bottom: 25px; }
.stat-box { flex: 1; background: #f8fafc; padding: 15px; border-radius: 12px; border: 1px solid #e2e8f0; text-align: center; }
.stat-val { font-size: 26px; font-weight: 900; color: #333; }
.stat-lbl { font-size: 11px; text-transform: uppercase; color: #666; font-weight: bold; }

/* TABLA */
table { width: 100%; font-size: 15px; border-collapse: collapse; }
td { padding: 15px; border-bottom: 1px solid #f1f5f9; }
.pill { padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: bold; }
.pill-ok { background: #dcfce7; color: #166534; }
.pill-bad { background: #fee2e2; color: #991b1b; }

/* QR Y CERTIFICADO */
#qrImage { width: 220px; height: 220px; border: 5px solid white; box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-radius: 15px; margin-top: 10px; }

.btn-download { 
  display: block; width: 100%; padding: 20px; margin-top: 15px;
  background: #16a34a; color: white; text-decoration: none; 
  border-radius: 15px; font-weight: 800; font-size: 18px; 
  box-shadow: 0 10px 20px rgba(22, 163, 74, 0.3);
}
.btn-download:hover { background: #15803d; transform: translateY(-2px); }

.loading, .error-msg { display: none; margin-top: 15px; font-weight: bold; text-align: center;}
.error-msg { color: #ef4444; background: white; padding: 15px; border-radius: 10px; }

/* MÓVIL */
@media (max-width: 600px) {
  .card { padding: 20px; }
  h1 { font-size: 22px; }
  .stat-val { font-size: 20px; }
}