/* Rifa CSS (scoped) */
#rifa-app { /* container hook */ }

/* ==== GENERALES (scoped) ==== */
#rifa-app .rifa-container {
  max-width: 1100px;
  margin: auto;
  padding: 20px;
  color: #1A1A1A;
  background-color: #FFFFFF;
  font-family: 'Segoe UI', sans-serif;
}

/* ==== ENCABEZADO ==== */
#rifa-app .header { text-align: center; margin-bottom: 30px; }
#rifa-app .header h1 { color: #004AAD; font-size: 2.5rem; font-weight: 700; }
#rifa-app .header p { font-size: 1.1rem; color: #555; }

/* ==== ESTADÍSTICAS COMO BOTONES ==== */
#rifa-app .stats { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
#rifa-app .stat-card {
  background: linear-gradient(90deg, #004AAD, #0056b3);
  border-radius: 12px; padding: 20px; text-align: center; flex: 1; min-width: 180px;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.15); transition: transform 0.2s ease-in-out;
}
#rifa-app .stat-card:hover { transform: translateY(-3px); }
#rifa-app .stat-card h3 { color: #FFFFFF; font-size: 1.1rem; margin-bottom: 10px; }
#rifa-app .stat-card .number { font-size: 2rem; font-weight: bold; color: #FFD600; }

/* ==== BARRA DE PROGRESO ==== */
#rifa-app .progress-container { background-color: #e6e6e6; border-radius: 10px; height: 25px; width: 100%; overflow: hidden; box-shadow: inset 0px 1px 3px rgba(0,0,0,0.15); }
#rifa-app .progress-bar { height: 100%; background: linear-gradient(90deg, #4CAF50, #2E7D32); width: 0%; border-radius: 10px; transition: width 1s ease-in-out; text-align: center; color: #fff; font-weight: bold; font-size: .9rem; display: flex; align-items: center; justify-content: center; }

/* ==== FORMULARIO ==== */
#rifa-app .purchase-section { background-color: #fff; padding: 35px; border-radius: 14px; box-shadow: 0px 6px 20px rgba(0,0,0,0.08); margin: 0 auto 30px; max-width: 550px; border: 1px solid #eee; }
#rifa-app .purchase-section h2 { color: #004AAD; font-size: 1.6rem; font-weight: 700; margin-bottom: 25px; }
#rifa-app .purchase-form { display: flex; flex-direction: column; gap: 20px; }
#rifa-app .form-group { display: flex; flex-direction: column; width: 100%; }
#rifa-app .form-group label { font-weight: 600; margin-bottom: 6px; color: #004AAD; }
#rifa-app .form-group input, #rifa-app .form-group select {
  width: 100%; padding: 14px; border: 1.5px solid #ccc; border-radius: 8px; font-size: 1rem; background-color: #FAFAFA; transition: all .25s ease-in-out; box-sizing: border-box;
}
#rifa-app .form-group input:focus, #rifa-app .form-group select:focus { border-color: #004AAD; outline: none; background-color: #fff; box-shadow: 0 0 0 3px rgba(0, 74, 173, .15); }

/* ==== SECCIÓN DE PRECIOS ==== */
#rifa-app .price-section { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border: 2px solid #004AAD; border-radius: 12px; padding: 20px; text-align: center; margin: 15px 0; }
#rifa-app .price-display, #rifa-app .price-info { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#rifa-app .total-price { font-size: 1.8rem; font-weight: bold; color: #004AAD; text-shadow: 1px 1px 2px rgba(0,0,0,.1); }
#rifa-app .unit-price { font-size: .9rem; color: #666; font-style: italic; }

/* ==== BOTONES ==== */
#rifa-app .btn {
  background: linear-gradient(90deg, #004AAD 0%, #007BFF 100%);
  color: #fff; padding: 16px 20px; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: bold;
  cursor: pointer; width: 100%; transition: all .3s ease-in-out; text-align: center; box-shadow: 0px 2px 5px rgba(0, 74, 173, .2);
}
#rifa-app .btn:hover:not(:disabled) { background: linear-gradient(90deg, #003080 0%, #0056b3 100%); transform: translateY(-2px); box-shadow: 0px 4px 10px rgba(0, 74, 173, .25); }
#rifa-app .btn:disabled { opacity: .7; cursor: not-allowed; transform: none; }

/* Botón PSE */
#rifa-app .btn-pse {
  background: linear-gradient(90deg, #1d8348 0%, #27ae60 100%);
  color: #fff; padding: 16px 20px; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: bold;
  cursor: pointer; width: 100%; transition: all .3s ease-in-out; text-align: center; box-shadow: 0px 2px 5px rgba(39, 174, 96, .2);
}
#rifa-app .btn-pse:hover:not(:disabled) { background: linear-gradient(90deg, #145a32 0%, #1e8449 100%); transform: translateY(-2px); box-shadow: 0px 4px 10px rgba(39, 174, 96, .25); }
#rifa-app .btn-pse:disabled { opacity: .7; cursor: not-allowed; transform: none; }

/* ==== MENSAJES ==== */
#rifa-app .error { background-color: #ff4d4f; color: #fff; padding: 15px; border-radius: 8px; margin: 20px 0; font-weight: 500; border-left: 4px solid #ff1616; }
#rifa-app .success { background-color: #52c41a; color: #fff; padding: 15px; border-radius: 8px; margin: 20px 0; font-weight: 500; border-left: 4px solid #389e0d; }

/* ==== PASES VENDIDOS ==== */
#rifa-app .sold-tickets { background-color: #fff; padding: 20px; border-radius: 12px; box-shadow: 0px 3px 8px rgba(0,0,0,0.1); }
#rifa-app .sold-tickets h3 { color: #004AAD; margin-bottom: 15px; }
#rifa-app .tickets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; margin-top: 15px; }
#rifa-app .ticket-item, #rifa-app .ticket-chip { background-color: #FFD600; color: #1A1A1A; text-align: center; padding: 8px; border-radius: 6px; font-weight: bold; font-size: .9rem; }

/* ==== ANIMACIÓN ==== */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
#rifa-app .price-section { animation: fadeIn .3s ease-in-out; }
#rifa-app .success, #rifa-app .error { animation: fadeIn .4s ease-in-out; }

/* ==== RESPONSIVE ==== */
@media (max-width: 768px) {
  #rifa-app .stats { flex-direction: column; gap: 15px; }
  #rifa-app .stat-card { min-width: auto; }
  #rifa-app .purchase-section { margin: 0 10px 30px; padding: 25px; }
  #rifa-app .total-price { font-size: 1.5rem; }
  #rifa-app .rifa-container { padding: 15px; }
}