/* ===========================================================================
   El tema: los tokens del panel de backendevo, tal cual, y su modo noche.
   ---------------------------------------------------------------------------
   POR QUE ESTE FICHERO Y NO `ausarta.css`. El dueño pidió literalmente que esta
   pantalla copiase «el diseño de los clientes para backendevo.ausarta.net,
   incluyendo su modo noche». Ese panel es el Ausarta que sus clientes ya ven
   todos los días, y NO usa el `ausarta.css` genérico: tiene su propio verde
   (#30A860, no #34B56A) y su propia tipografía (Plus Jakarta Sans, no Aptos).
   Se copia el de backendevo porque es el que manda la marca en producción y
   porque tener dos Ausarta distintos en dos pantallas del mismo cliente es
   peor que cualquier discusión de tokens.

   Los dos bloques de abajo están copiados BYTE A BYTE de
   AgenteEVO/frontend/src/styles.css:6-29. Si allí cambian, aquí también.

   LA TIPOGRAFIA VA AUTOALOJADA (assets/fonts/*.woff2), como en backendevo, y por
   la misma razón que allí: cargarla de Google mandaba la IP de cada usuario a un
   tercero en cada visita, sin base legal ni información. No enlazar nunca
   fonts.googleapis.com desde aquí.
   =========================================================================== */

@import url("./fuentes.css");

:root {
  --ground: #F3F7F4;
  --surface: #FFFFFF;
  --surface-2: #F8FBF9;
  --border: #E1EAE4;
  --border-strong: #CCD9D1;
  --ink: #11201A;
  --text: #2A3A31;
  --muted: #5F726A;
  --faint: #90A199;
  --brand: #30A860;
  --accent: #178A4C;
  --accent-2: #0F7340;
  --accent-tint: #E6F4EC;
  --accent-ink: #136337;
  --ok: #178A4C;
  --ok-tint: #E6F4EC;
  --warn: #97570F;
  --warn-tint: #F9ECD8;
  --bad: #B0281F;
  --bad-tint: #FBEAE8;
  --info: #1F5FA8;
  --info-tint: #E6EFF8;
  --shadow: 0 1px 2px rgba(17, 32, 26, .05), 0 8px 24px -16px rgba(17, 32, 26, .18);
  --shadow-lg: 0 12px 40px -18px rgba(17, 32, 26, .30);
  --radius: 14px;
  --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --ground: #0C130F;
  --surface: #121C16;
  --surface-2: #17221B;
  --border: #22302A;
  --border-strong: #31423A;
  --ink: #E9F3EE;
  --text: #C5D5CD;
  --muted: #86998F;
  --faint: #5E7068;
  --brand: #3DBE76;
  --accent: #2BB266;
  --accent-2: #46C97D;
  --accent-tint: #12301F;
  --accent-ink: #7DE0A6;
  --ok: #4BC47E;
  --ok-tint: #12301F;
  --warn: #E0A24A;
  --warn-tint: #2E2414;
  --bad: #F08379;
  --bad-tint: #321E1C;
  --info: #6FB0F0;
  --info-tint: #142536;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -18px rgba(0, 0, 0, .6);
  --shadow-lg: 0 16px 50px -20px rgba(0, 0, 0, .7);
}

/* ───────────────────────── El puente con los nombres viejos ─────────────────
   `estilo.css` son 1.759 líneas escritas contra los nombres de `ausarta.css`.
   Reescribirlas una a una para cambiar de paleta sería mucho riesgo para cero
   ganancia: lo que se hace es traducir los nombres aquí, una vez. Efecto
   secundario bueno y buscado: TODA la pantalla que ya existe —incluidos los
   festivos, el diálogo y la trastienda— hereda el modo noche sin tocarla.

   Los que NO se traducen porque no son de marca (rejilla de 4 px, radios,
   duraciones) siguen viniendo de `ausarta.css`.
   ------------------------------------------------------------------------- */
:root {
  --surface-page: var(--ground);
  --surface-card: var(--surface);
  --surface-sunken: var(--surface-2);
  /* LA CINTA ES SIEMPRE OSCURA, Y ESO INCLUYE EL FONDO.
     Aquí ponía `--surface-inverse: var(--ink)` con una nota que decía, con razón, que el
     TEXTO no podía seguir al tema «o desaparecería en modo noche» — y dejaba el FONDO
     siguiéndolo. En noche `--ink` pasa a #E9F3EE, así que la cinta quedaba con texto
     #E9F3EE sobre fondo #E9F3EE: contraste 1,00:1, invisible. Media verdad arreglada y la
     otra media rota en la misma línea.
     Los tres van fijos, que es lo que la nota quería decir: grafito con letra clara,
     en los dos temas. Afecta a la cinta de ámbito, la de sistema y el nombre de empresa
     del diálogo (estilo.css:110-135, admin.css:294-318). */
  --surface-inverse: #11201A;
  --text-on-dark: #E9F3EE;
  --text-on-dark-mut: #90A199;

  --text-strong: var(--ink);
  --text-body: var(--text);
  --text-muted: var(--muted);

  --border-subtle: var(--border);
  --border-default: var(--border);
  /* `--border-strong` ya se llama igual en los dos sistemas. */

  --brand-on: #FFFFFF;
  --brand-subtle: var(--accent-tint);
  --green-700: var(--accent);
  --green-800: var(--accent-2);
  --green-900: var(--accent-ink);

  /* En `ausarta.css` `--accent` es el azul técnico; en backendevo `--accent` es
     el verde. Aquí manda backendevo, así que el azul pasa a llamarse por su
     token de estado. */
  --accent-hover: var(--info);
  --accent-subtle: var(--info-tint);
  --blue-300: var(--info);

  --success-bg: var(--ok-tint);
  --warning-500: var(--warn);
  --warning-bg: var(--warn-tint);
  --danger-500: var(--bad);
  --danger-bg: var(--bad-tint);
  --info-500: var(--info);
  --info-bg: var(--info-tint);

  --neutral-0: var(--surface);
  --neutral-300: var(--border-strong);
  --neutral-900: var(--ink);
  --neutral-950: var(--ink);

  --font-sans: var(--sans);
  --font-mono: var(--mono);

  /* Los `font:` de golpe, rehechos sobre la familia de backendevo. */
  --font-display: 700 2.25rem/1.15 var(--sans);
  --font-h1: 700 1.75rem/1.2 var(--sans);
  --font-h2: 680 1.375rem/1.25 var(--sans);
  --font-h3: 660 1.0625rem/1.3 var(--sans);
  --font-h4: 640 0.9375rem/1.35 var(--sans);
  --font-body: 400 0.9375rem/1.5 var(--sans);
  --font-body-sm: 400 0.8125rem/1.45 var(--sans);
  --font-eyebrow: 640 0.6875rem/1.2 var(--sans);

  /* El navegador tiene que saber que esta página va en los dos temas: sin esto
     los controles nativos (`input[type=date]`, las barras de desplazamiento)
     salen en claro sobre fondo oscuro. */
  color-scheme: light dark;
}

[data-theme="dark"] {
  color-scheme: dark;
}

/* El logotipo es negro sobre transparente: en modo noche se invierte, igual que
   en backendevo (`styles.css:44`). */
[data-theme="dark"] .logo,
[data-theme="dark"] .logo-img {
  filter: brightness(0) invert(1);
}

/* ───────────────────────────── El interruptor ───────────────────────────── */
.tema {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: border-color var(--dur-fast, 120ms), color var(--dur-fast, 120ms);
}

.tema:hover {
  border-color: var(--border-strong);
  color: var(--ink);
}

.tema svg { width: 1.0625rem; height: 1.0625rem; }

/* Se enseña el icono del tema al que se VA a ir, no el del que se está: es el
   convenio de backendevo y el que la gente espera de un interruptor. */
.tema .a-oscuro { display: block; }
.tema .a-claro { display: none; }
[data-theme="dark"] .tema .a-oscuro { display: none; }
[data-theme="dark"] .tema .a-claro { display: block; }