/* ==========================
   MAIN STYLESHEET
   Proyecto: Taekwondo Villaviciosa y Boadilla
   Versión: 1.0.2
   ========================== */

/* Paleta (extraída del logo) */
:root{
  --bg: #1A1A1A;        /* fondo base */
  --bg-2: #121212;      /* degradado */
  --text: #FAFAFF;      /* texto principal */
  --blue: #0052B4;      /* azul enlaces/destacado */
  --blue-hover: #1E6BFF;/* azul hover accesible */
  --red: #D90000;       /* rojo apoyo (CTAs/estados) */
  --yellow: #E6E600;    /* acentos puntuales */
  --field: #333333;     /* campos formulario */
  --field-border: #555; /* borde campos */
}

/* --- Estilos generales --- */
body{
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  color: var(--text);
}

/* Titulares */
h1, h2, h3, h4, h5{
  color: var(--text);
  font-weight: 600;
}

/* Enlaces */
a{
  color: var(--blue);
  text-decoration: none;
  transition: color .2s ease;
}
a:hover,
a:focus{
  color: var(--blue-hover);
  text-decoration: underline;
}
a:active{
  color: var(--red);
}

/* Botones */
button,
input[type="submit"]{
  background-color: var(--blue);
  color: var(--text);
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .2s ease, transform .05s ease;
}
button:hover,
input[type="submit"]:hover{
  background-color: var(--blue-hover);
}
button:active,
input[type="submit"]:active{
  transform: scale(0.98);
}
button.secondary{
  background-color: var(--red);
}
button.secondary:hover{
  filter: brightness(1.05);
}

/* Formularios */
input, textarea, select{
  background-color: var(--field);
  color: var(--text);
  border: 1px solid var(--field-border);
  border-radius: 4px;
  padding: 8px;
}
input::placeholder,
textarea::placeholder{ color: #BFBFC7; }

input:focus, textarea:focus, select:focus{
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}

/* Pequeños detalles de accesibilidad/UX */
::selection{ background: var(--blue); color: var(--text); }
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}