/* Tokens y superficies del navegador compartidos por el hub (index.html) y las
   páginas embebidas (objetivos.html). El tema de la agencia pisa --acento,
   --fondo1 y --fondo2 (config.json → /api/branding); todo lo demás se deriva
   de esos tres para que ninguna superficie quede con el color de otra agencia. */
/* Schibsted Grotesk (variable 400–800), alojada acá: sin dependencia de Google
   Fonts ni de internet. Licencia SIL OFL 1.1 en fonts/OFL.txt. */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;

  /* tema de la agencia */
  --acento: #7c9cff;
  --fondo1: #070b18;
  --fondo2: #0d1430;
  --texto: #e8ecf8;
  --texto-suave: #94a0c2;

  /* superficies derivadas */
  --superficie: color-mix(in srgb, var(--fondo2) 72%, var(--fondo1));
  --superficie-alta: color-mix(in srgb, var(--fondo2) 90%, var(--texto));
  --relleno: color-mix(in srgb, var(--texto) 5%, transparent);
  --relleno-hover: color-mix(in srgb, var(--texto) 10%, transparent);
  --borde: color-mix(in srgb, var(--texto) 13%, transparent);
  --borde-suave: color-mix(in srgb, var(--texto) 7%, transparent);
  --acento-borde: color-mix(in srgb, var(--acento) 60%, transparent);
  --acento-texto: color-mix(in srgb, var(--acento) 80%, var(--texto));

  /* estados */
  --error: #ff8896;
  --error-borde: color-mix(in srgb, var(--error) 45%, transparent);
  --error-fondo: color-mix(in srgb, var(--error) 13%, transparent);
  --ok: #34d399;
  --aviso: #fbbf24;
  --aviso-2: #f59e0b;
  --sobre-aviso: #1a1006;

  /* profundidad */
  /* sombras cortas y definidas: elevan sin volverse un halo difuso */
  --sombra-1: 0 4px 14px rgba(0, 0, 0, 0.4);
  --sombra-2: 0 14px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);

  /* tipografía: una sola familia, escala por rol (piso 11px) */
  --fuente: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 0.6875rem;   /* 11px — etiquetas en mayúscula, chips */
  --fs-sm: 0.75rem;     /* 12px — metadatos, ayudas */
  --fs-base: 0.875rem;  /* 14px — cuerpo de la interfaz */
  --fs-md: 1rem;        /* 16px — títulos de panel */
  --fs-lg: 1.375rem;    /* 22px — títulos de pantalla */

  /* movimiento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-family: var(--fuente);
  background: var(--fondo1);
  color: var(--texto);
  scrollbar-color: color-mix(in srgb, var(--texto-suave) 45%, transparent) transparent;
  scrollbar-width: thin;
  accent-color: var(--acento);
  caret-color: var(--acento);
}

::selection {
  background: color-mix(in srgb, var(--acento) 45%, transparent);
  color: var(--texto);
}

/* foco de teclado: un solo anillo, en todos los controles */
:focus-visible {
  outline: 2px solid var(--acento-texto);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

.hidden { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- controles de formulario ---------- */
input, select, textarea {
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--texto);
  background: var(--relleno);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 0 13px;
  height: 40px; /* input y select miden lo mismo: las etiquetas de una fila quedan alineadas */
  transition: border-color 0.2s, background 0.2s;
}
textarea { height: auto; padding: 10px 13px; }
input:hover, select:hover { border-color: color-mix(in srgb, var(--texto) 24%, transparent); }
input:focus-visible, select:focus-visible {
  border-color: var(--acento-texto);
  outline-offset: 1px;
}
input::placeholder { color: color-mix(in srgb, var(--texto-suave) 82%, transparent); }
input:disabled, select:disabled { opacity: 0.6; cursor: not-allowed; }
select option { background: var(--superficie-alta); color: var(--texto); }

input[type="checkbox"] {
  width: 16px; height: 16px;
  padding: 0;
  cursor: pointer;
}
input[type="checkbox"]:disabled { cursor: not-allowed; }

/* campo = etiqueta visible + control */
.campo {
  display: flex; flex-direction: column; gap: 5px;
  flex: 1 1 150px;
  min-width: 0;
}
.campo > span {
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--texto-suave);
}
.campo > span small { font-size: inherit; font-weight: 400; opacity: 0.85; }
.campo.corto { flex: 0 0 116px; }

/* ---------- botones ---------- */
.btn-primario, .btn-secundario, .btn-peligro {
  font-family: inherit;
  font-size: var(--fs-base); font-weight: 600;
  padding: 10px 16px;
  min-height: 40px;
  border-radius: 10px;
  cursor: pointer;
  transition: filter 0.2s, background 0.2s, border-color 0.2s;
}
.btn-primario {
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--acento) 60%, var(--fondo1));
  color: white;
}
.btn-primario:hover { filter: brightness(1.12); }
.btn-secundario {
  border: 1px solid var(--borde);
  background: var(--relleno);
  color: var(--texto);
}
.btn-secundario:hover { background: var(--relleno-hover); }
.btn-peligro {
  border: 1px solid var(--error-borde);
  background: var(--error-fondo);
  color: var(--error);
}
.btn-peligro:hover { background: color-mix(in srgb, var(--error) 22%, transparent); }
button:disabled { opacity: 0.55; cursor: not-allowed; }

@media (pointer: coarse) {
  input, select { height: 44px; }
  .btn-primario, .btn-secundario, .btn-peligro { min-height: 44px; }
  input[type="checkbox"] { width: 22px; height: 22px; }
}