/* base.css
   Reset ligero, variables de diseño (paleta Jamar) y tipografía base.
   Estas variables se reutilizan en layout.css, curva.css y print.css. */

/* ---- Variables de diseño ---- */
:root {
  /* Paleta de marca Jamar: rojo + blanco */
  --color-jamar-rojo:  #E2231A;  /* rojo Jamar - topbar / acentos / botones */
  --color-jamar-rojo-oscuro: #B81C15; /* hover del rojo */
  --color-tinta:       #1a1a18;  /* casi negro - texto fuerte */
  --color-blanco:      #ffffff;  /* blanco - superficies y fondo principal */
  --color-arena:       #f4f3f1;  /* gris muy claro - fondo main (limpio) */

  /* Colores funcionales para los 3 rangos de la curva (Sprint 3) */
  --color-vino:        #791F1F;  /* rango Bajo */
  --color-morado:      #3C3489;  /* rango Medio */
  --color-verde:       #0F6E56;  /* rango Alto */

  /* Neutros derivados para superficies y bordes */
  --color-panel:       #ffffff;  /* superficie de tarjetas (blanco) */
  --color-borde:       #e0ddd8;
  --color-texto:       #2b2b28;
  --color-texto-suave: #6b675e;

  /* Tipografía y métricas */
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radio:  10px;
  --sombra: 0 1px 3px rgba(26, 26, 24, 0.12);
  --topbar-altura: 60px;
}

/* ---- Reset ligero ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-texto);
  background: var(--color-arena);
  -webkit-font-smoothing: antialiased;
}

/* ---- Tipografía base ---- */
h1, h2, h3 {
  line-height: 1.2;
  font-weight: 600;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

/* Controles de formulario coherentes (selectores en cascada del Sprint 1) */
label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

select,
input {
  font-family: inherit;
  font-size: 14px;
  color: var(--color-texto);
  background: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  padding: 8px 10px;
}

select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

select:focus,
input:focus,
button:focus-visible {
  outline: 2px solid var(--color-jamar-rojo);
  outline-offset: 1px;
}