/* Hoja de estilos única.
 *
 * Copia la identidad visual de consultoriosalvatierra.com: banda azul completa
 * en el encabezado con título blanco centrado, banda gris en el pie, Arial,
 * fondo #f8f9fa, texto #333, bordes #ddd y radio de 5px.
 *
 * El parecido no estaba en los valores de color sino en las BANDAS: tomar sus
 * variables sin su estructura daba una página que no se reconocía como suya.
 *
 * Qué se copia exacto, y por qué se puede:
 *   #007bff con texto blanco da 3,98. El título del encabezado es 1,8rem en
 *   negrita —texto grande, que exige 3,0— así que la banda azul va tal cual.
 *   #6c757d con blanco da 4,69, por encima de 4,5: la banda gris también.
 *
 * Qué NO se copia:
 *   Los botones. Su texto es de 1rem y exige 4,5, donde #007bff da 3,98. Se usa
 *   #0062cc, casi indistinguible a la vista, que da 5,80. Su sitio tiene ese
 *   defecto; aquí no se replica, porque este formulario lo puede estar llenando
 *   alguien con prisa, de noche o con mala vista.
 *
 * Sobria y sin iconografía que se confunda con el servicio nacional 9-1-1.
 */
:root {
  /* Siempre claro, como consultoriosalvatierra.com. El sitio del consultorio no
     tiene modo oscuro, así que tenerlo aquí hacía que en cualquier teléfono con
     el modo oscuro del sistema activo —hoy la mayoría— la página saliera negra y
     no se reconociera como del consultorio. `only light` evita además que el
     navegador invierta colores por su cuenta.

     Se pierde que un formulario claro de noche deslumbra más. Se acepta: el
     requisito es el parecido con el sitio, y en un servicio de emergencias la
     persona tiene que reconocer al instante que está en el lugar correcto. La
     legibilidad no depende del tema: todas las combinaciones del tema claro
     están verificadas por encima de 4,5:1. */
  color-scheme: only light;

  /* Exactos del consultorio */
  --marca-azul: #007bff;
  --marca-gris: #6c757d;
  --marca-verde: #28a745;
  --tinta: #333333;
  --fondo: #f8f9fa;
  --tarjeta: #ffffff;
  --borde: #dddddd;
  --radio: 5px;

  /* Variantes accesibles para texto pequeño, mismo tono */
  --tenue: #5a6268;
  --acento: #0062cc;
  --acento-fuerte: #0056b3;
  --ok: #1e7e34;
  --ok-fondo: #eaf4ec;
  --error: #c82333;
  --error-fondo: #fdeaea;
  --aviso-fondo: #fff8e1;
  --aviso-borde: #c9a227;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 1rem/1.6 Arial, Helvetica, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
}
.salto { position: absolute; left: -9999px; background: var(--tarjeta); padding: .5rem 1rem; }
.salto:focus { left: .5rem; top: .5rem; z-index: 10; }

/* Banda azul del encabezado, como en el sitio del consultorio. */
.encabezado {
  background: var(--marca-azul);
  color: #fff;
  padding: 1rem;
}
.encabezado-contenido { text-align: center; max-width: 1200px; margin: 0 auto; }
/* 1,8rem en negrita: es texto grande, y por eso el blanco sobre #007bff (3,98)
   cumple el mínimo de 3,0. Si se añadiera aquí texto pequeño en blanco dejaría
   de cumplir, así que la banda lleva solo el título, como el sitio. */
.marca { margin: 0; font-size: 1.8rem; font-weight: 700; color: #fff; }

.contenedor { max-width: 36rem; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
/* El título de cada pantalla, por debajo del de la marca en jerarquía visual. */
h1 { font-size: 1.4rem; margin: 0 0 .5rem; color: var(--acento-fuerte); }
h2 { font-size: 1.1rem; margin: 1.75rem 0 .5rem; }
.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1.25rem; margin: 1rem 0;
}
label { display: block; font-weight: 700; margin: 1rem 0 .3rem; }
.ayuda { font-weight: 400; color: var(--tenue); font-size: .875rem; display: block; }
input[type=text], input[type=tel], input[type=email], input[type=password] {
  width: 100%; padding: .7rem .75rem; font-size: 1rem;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--tarjeta); color: var(--tinta);
}
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--marca-azul); outline-offset: 2px;
}
input[aria-invalid=true] { border-color: var(--error); }
.campo-error { color: var(--error); font-size: .875rem; margin: .3rem 0 0; }
.consentimiento { display: flex; gap: .6rem; align-items: flex-start; margin: 1.25rem 0; }
.consentimiento input { margin-top: .35rem; flex: none; }
.consentimiento label { margin: 0; font-weight: 400; }
button {
  width: 100%; margin-top: 1.25rem; padding: .85rem 1rem;
  font-size: 1rem; font-weight: 700; cursor: pointer;
  background: var(--acento); color: #fff;
  border: 1px solid var(--acento); border-radius: var(--radio);
}
button:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }
button.secundario { background: var(--tarjeta); color: var(--acento); }
button.secundario:hover { background: var(--fondo); color: var(--acento-fuerte); }
.alerta { padding: .85rem 1rem; border-radius: var(--radio); margin: 1rem 0; border: 1px solid; }
.alerta-error { background: var(--error-fondo); border-color: var(--error); color: var(--error); }
.alerta-ok { background: var(--ok-fondo); border-color: var(--ok); color: var(--ok); }
.estados { list-style: none; padding: 0; margin: 1rem 0; }
.estados li { padding: .6rem 0; border-bottom: 1px solid var(--borde); display: flex; justify-content: space-between; gap: 1rem; }
.estados li:last-child { border-bottom: 0; }
.estados .valor { color: var(--tenue); text-align: right; }
.codigo {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.1rem; letter-spacing: .06em; word-break: break-all;
  background: var(--fondo); padding: .75rem; border-radius: var(--radio); border: 1px solid var(--borde);
}
.tenue { color: var(--tenue); }
a { color: var(--acento); }
a:hover { color: var(--acento-fuerte); }
.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { color: var(--tenue); font-weight: 700; }

/* Banda gris del pie, como en el sitio del consultorio. */
.pie {
  background: var(--marca-gris);
  color: #fff;
  text-align: center;
  padding: 1.25rem 1rem;
  margin-top: 2rem;
  font-size: .9rem;
}
.pie-contenido { max-width: 36rem; margin: 0 auto; }
.pie p { margin: .4rem 0; }
.pie a { color: #fff; text-decoration: underline; }
/* El aviso del 9-1-1 destaca dentro de la banda sin romperla. */
.aviso-pie {
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--radio);
  padding: .65rem .8rem;
  margin: 0 0 .75rem;
}