/* =========================
   RESET BÁSICO
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =========================
   COLORES (SIN VARIABLES, COMPATIBLE 100%)
========================= */
body {
  background-color: #f4f6f8;
  font-family: Arial, Helvetica, sans-serif;
  color: #2c2c2c;
  padding: 40px 20px;
}

/* =========================
   FORMULARIO
========================= */
form {
  background-color: #ffffff;
  max-width: 650px;
  margin: auto;
  padding: 35px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* =========================
   TÍTULOS
========================= */
h1 {
  text-align: center;
  font-size: 2.7rem;
  color: #1f3a5f;
  margin-bottom: 10px;
}

h2 {
  font-size: 1.55rem;
  color: #1f3a5f;
  border-left: 5px solid #2ecc71;
  padding-left: 12px;
  margin-top: 30px;
  margin-bottom: 10px;
}

/* =========================
   TEXTO
========================= */
p {
  margin-bottom: 15px;
  line-height: 1.7;
}

/* =========================
   SEPARADORES
========================= */
hr {
  border: none;
  height: 1px;
  background-color: #d1d9e0;
  margin: 30px 0;
}

/* =========================
   CAMPOS DE TEXTO
========================= */
input[type="text"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: 11px;
  margin-top: 8px;
  border: 1px solid #d1d9e0;
  border-radius: 6px;
  font-size: 1rem;
  background-color: #f9fafb;
  color: #2c2c2c;
}

/* =========================
   FOCUS (IMPORTANTE)
========================= */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #3a6ea5;
  box-shadow: 0 0 0 2px rgba(58, 110, 165, 0.25);
}

/* =========================
   CHECKBOX Y RADIO
========================= */
input[type="checkbox"],
input[type="radio"] {
  margin-right: 8px;
}

/* =========================
   TEXTAREA
========================= */
textarea {
  resize: vertical;
  min-height: 120px;
}

/* =========================
   ARCHIVO
========================= */
input[type="file"] {
  margin-top: 10px;
}

/* =========================
   BOTONES
========================= */
input[type="submit"],
input[type="reset"] {
  padding: 11px 22px;
  margin-top: 20px;
  margin-right: 10px;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
}

/* ENVIAR */
input[type="submit"] {
  background-color: #1f3a5f;
  color: #ffffff;
}

input[type="submit"]:hover {
  background-color: #3a6ea5;
}

/* BORRAR */
input[type="reset"] {
  background-color: #e0e0e0;
  color: #333333;
}

input[type="reset"]:hover {
  background-color: #cfcfcf;
}