/* ---------- marca idef eLearning solutions ----------
   Lo compartido entre todas las páginas del portal. Vive en un solo fichero
   para que la paleta no pueda ir por un lado en la portada y por otro en la
   pantalla de entrada.

   Los colores salen MEDIDOS de los píxeles de assets/img/idef-logo.png, no
   estimados a ojo. Un solo acento en toda la interfaz: el turquesa de la "e"
   de "eLearning".
     #575656  gris de "idef" y "solutions"   7,32:1 sobre blanco
     #007c9f  turquesa de la "e"             4,79:1 sobre blanco  <- acento
     #57a9c0  solape de cuadrados            2,68:1  solo decoración
     #7cbcce  cuadrado medio                 2,11:1  solo decoración
     #b2d8e2  cuadrado claro                 1,52:1  solo fondos
   Una sola escala de radios: botones pastilla (999px), tarjetas .75rem,
   campos .5rem.
*/
:root {
  --tinta:       #2f2e2e;   /* gris de marca, oscurecido para cuerpo de texto */
  --tinta-2:     #575656;   /* el gris exacto del logotipo */
  --gris:        #7a7979;
  --acento:      #007c9f;
  --acento-vivo: #00637f;   /* hover y foco, más contraste */
  --turquesa:    #57a9c0;   /* decoración, nunca texto */
  --turquesa-cl: #b2d8e2;   /* subrayado y rellenos */
  --hueco:       #e9f4f8;
  --linea:       #dfe4e6;
  --papel:       #f7f8f9;
  --tarjeta:     #ffffff;
  --sobre-acento:#ffffff;   /* texto sobre el acento: 4,79:1, cumple AA */
  --aviso:       #8a4b00;   /* 4,9:1 sobre el hueco claro */
  --pie-fondo:   #2f2e2e;
  --pie-texto:   #d5d9da;
  --sombra:     0 1px 2px rgba(47,46,46,.06), 0 14px 40px rgba(47,46,46,.07);
  --sombra-alta:0 2px 4px rgba(47,46,46,.08), 0 26px 60px rgba(47,46,46,.12);

  /* Sin fuentes remotas ni CDN (lo prohíbe PRODUCT.md). El logotipo es una
     sans humanista, así que la jerarquía se hace con peso y color. */
  --display: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --texto: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --ancho: 68rem;
  --radio: .75rem;
}

/* En oscuro el acento es #4fbcdb, exactamente el mismo turquesa al que se
   aclara la "e" en idef-logo-dark.png: el logo y la interfaz no se pelean.
   8,17:1 sobre el fondo, y el texto sobre el botón va en oscuro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tinta:       #e7edf0;
    --tinta-2:     #b9c5ca;
    --gris:        #8d9aa0;
    --acento:      #4fbcdb;
    --acento-vivo: #7fd2e9;
    --turquesa:    #57a9c0;
    --turquesa-cl: #2b4c58;
    --hueco:       #17262c;
    --linea:       #2c383d;
    --papel:       #12191c;
    --tarjeta:     #182126;
    --sobre-acento:#08141a;
    --aviso:       #ffc98a;
    --pie-fondo:   #0b1215;
    --pie-texto:   #b9c5ca;
    --sombra:     0 1px 2px rgba(0,0,0,.5), 0 14px 40px rgba(0,0,0,.45);
    --sombra-alta:0 2px 4px rgba(0,0,0,.55), 0 26px 60px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  --tinta:       #e7edf0;
  --tinta-2:     #b9c5ca;
  --gris:        #8d9aa0;
  --acento:      #4fbcdb;
  --acento-vivo: #7fd2e9;
  --turquesa:    #57a9c0;
  --turquesa-cl: #2b4c58;
  --hueco:       #17262c;
  --linea:       #2c383d;
  --papel:       #12191c;
  --tarjeta:     #182126;
  --sobre-acento:#08141a;
  --aviso:       #ffc98a;
  --pie-fondo:   #0b1215;
  --pie-texto:   #b9c5ca;
  --sombra:     0 1px 2px rgba(0,0,0,.5), 0 14px 40px rgba(0,0,0,.45);
  --sombra-alta:0 2px 4px rgba(0,0,0,.55), 0 26px 60px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; text-wrap: balance; letter-spacing: -.015em; margin: 0; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); line-height: 1.06; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.15rem); line-height: 1.15; }
h3 { font-size: 1.1rem; line-height: 1.3; }
p { margin: 0; }
a { color: var(--acento); text-underline-offset: .18em; }
a:hover { color: var(--acento-vivo); }
:focus-visible { outline: 3px solid var(--acento-vivo); outline-offset: 3px; border-radius: 4px; }

.env { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.bloque { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.rotulo {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gris); margin: 0 0 .9rem;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .78rem 1.4rem; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: .98rem; text-decoration: none; cursor: pointer;
  background: var(--acento); color: var(--sobre-acento);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sombra); }
.btn:active { transform: translateY(0) scale(.985); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover, .btn:active { transform: none; } }
.btn--linea { background: transparent; color: var(--tinta); border-color: var(--linea); }
.btn--linea:hover { border-color: var(--acento); color: var(--acento); }

/* ---------- campos de formulario ---------- */
label { display: grid; gap: .35rem; font-size: .88rem; font-weight: 600; color: var(--tinta-2); }
input, select {
  font: inherit; font-size: 1rem; padding: .68rem .8rem; border-radius: .5rem;
  border: 1px solid var(--linea); background: var(--papel); color: var(--tinta);
}
input:focus, select:focus { border-color: var(--acento); }
input::placeholder { color: var(--gris); }   /* 4,6:1 sobre --papel */
.pista { font-weight: 400; font-size: .8rem; color: var(--gris); }

/* El error va DEBAJO del campo y no depende solo del color: lleva su propio
   texto, porque un borde rojo no le dice nada a quien no distingue el rojo. */
.malo input, .malo select { border-color: var(--aviso); border-width: 2px; }
.error-campo { font-weight: 400; font-size: .82rem; color: var(--aviso); }

/* ---------- el logotipo ---------- */
.marca { display: flex; align-items: center; gap: .85rem; text-decoration: none; color: var(--tinta); }
.marca img { display: block; height: 2.35rem; width: auto; }