/* Colores y layout del usuario (conservado) */
body {
  font-family: Arial, sans-serif;
  background: linear-gradient(45deg, #FF0000, #ff8000 50%);
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 600px;
  height: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 1.5;
}

h1 { text-align: center; margin-bottom: 10px; }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input, select, textarea {
  width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;
}
button {
  width: 100%; padding: 10px; background-color: #28a745; color: #fff;
  border: none; border-radius: 4px; cursor: pointer;
}
button:hover { background-color: #218838; }

.radioButton { display: inline-flex; margin-bottom: 20px; }
#yes { margin-bottom: 6px; }
#no  { margin-bottom: 6px; margin-left: 20px; }
#opcion, #opcion2 { margin-bottom: 20px; }

/* Toast & help */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 20px; background: rgba(0,0,0,.85); color: #fff;
  padding: 10px 16px; border-radius: 8px; opacity: 0; pointer-events: none;
  transition: opacity .2s ease; z-index: 9999; max-width: 90%;
}
.toast.show { opacity: 1; }

/* Spinner */
.spinner-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.25);
  z-index:9998; align-items:center; justify-content:center;
}
.spinner{
  width:48px; height:48px; border:5px solid #eee; border-top-color:#1976d2;
  border-radius:50%; animation:spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Responsivo */
@media (max-width: 640px){
  .container { margin: 8px; padding: 16px; }
}