/* ==========================================================================
   KREPKO · puente entre los tokens 2026 y el CSS que ya existe
   ENCARGO F1-UI · Tanda 2 — 30/08/2026

   Va SIEMPRE detrás de `app.css` y de `tokens.css`. No reescribe app.css:
   redefine las variables que app.css ya consume, así que las ~1.900 líneas
   de estilos siguen igual y lo que cambia es a qué apuntan sus colores.

   ROLLBACK = quitar este <link>. Nada más.

   ── LA REGLA QUE GOBIERNA ESTE FICHERO (Vincent, 30/08/2026) ─────────────
   El azul de la casa hacía DOS trabajos a la vez: era el color de acción
   (botón primario) y el de acento (links, chips, foco, estado activo). Los
   tokens 2026 los separan:

       dentro de un <button>  →  NARANJA   (es una acción)
       todo lo demás          →  TEAL      (es un acento)

   Por eso `--primary` NO se re-mapea a ciegas: sus 13 usos en app.css caen a
   un lado o al otro, y mapearlo entero a naranja pintaría de naranja los
   links, el foco de los inputs y el spinner. `--primary` se queda como el
   ACENTO (teal) y los sitios de ACCIÓN se cambian uno a uno, abajo.

   ── LO QUE NO SE TOCA, Y POR QUÉ ─────────────────────────────────────────
   · Los colores de ESTADO (ámbar «pendiente», verde «completado», morado
     «facturado», rojo «vencida»): no son marca, son significado. Cambiarlos
     rompería la lectura de las tablas y los chips de media aplicación.
   · El verde de WhatsApp (#25D366): es marca ajena.
   · Los colores por técnico del planificador: los elige el admin en su
     ficha, no los elige el diseño (`smoke-planificador-ot` lo vigila).
   ========================================================================== */

:root {
  /* ── Neutros: lienzo, superficie y hairline ──────────────────────────── */
  --bg:         var(--k-lienzo);
  --white:      var(--k-superficie);
  --border:     var(--k-hairline);
  --border-lt:  #F1F3F7;                    /* un punto más claro que el hairline */

  /* ── Tinta ───────────────────────────────────────────────────────────── */
  --text:       var(--k-ink);
  --text2:      var(--k-ink-2);
  --text3:      var(--k-ink-3);

  /* ── ACENTO (NO acción): links, foco, activo, chips informativos ─────── */
  /* `--primary` es el acento. Lo consumen `.nav-item.active`, `.b-blue`,
     `.stat-pill.active`, el foco de los inputs, el spinner y `.text-primary`
     — ninguno es un botón. */
  --primary:    var(--k-teal-ink);          /* teal legible sobre blanco */
  --primary-dk: #0B7C71;
  --primary-lt: var(--k-teal);
  --primary-bg: #E6F7F5;                    /* fondo suave del acento */

  /* ── ACCIÓN: el naranja, y solo el naranja ───────────────────────────── */
  --orange:     var(--k-naranja);
  --orange-bg:  #FFF3EA;

  /* ── Peligro ─────────────────────────────────────────────────────────── */
  --red:        var(--k-rojo);
  --red-bg:     #FBEDED;

  /* Estados: NO se tocan (ver cabecera). --green, --yellow, --purple y sus
     fondos siguen siendo los de app.css. */

  /* ── Forma ───────────────────────────────────────────────────────────── */
  --r:          var(--k-r-sm);
  --r-lg:       var(--k-r);

  /* ── Sombras ─────────────────────────────────────────────────────────── */
  --sh:         var(--k-sh);
  --sh-md:      var(--k-sh-md);
  --sh-lg:      var(--k-sh-lg);
}

/* ==========================================================================
   BOTONES — un solo color de acción
   ========================================================================== */

/* El primario es NARANJA. `.btn-primary` y `.btn-orange` acaban siendo el
   mismo botón: son 160 y 3 usos respectivamente, y renombrarlos sería tocar
   163 sitios para no cambiar nada. Se dejan como sinónimos y el CSS manda. */
.btn-primary,
.btn-orange {
  background: var(--k-naranja);
  color: #fff;
  border-color: var(--k-naranja);
  box-shadow: 0 2px 8px rgba(255, 140, 66, .28);
}
.btn-primary:hover,
.btn-orange:hover { background: var(--k-naranja-hover); border-color: var(--k-naranja-hover); }

/* Secundario: borde hairline sobre blanco. */
.btn-out {
  background: var(--k-superficie);
  color: var(--k-ink-2);
  border: 1px solid var(--k-hairline);
}
.btn-out:hover { background: var(--k-lienzo); border-color: #D6DBE5; }

/* Destructivo. */
.btn-danger { background: #FBEDED; color: var(--k-rojo-ink); border: 1px solid #F0C4C4; }
.btn-danger:hover { background: var(--k-rojo); color: #fff; border-color: var(--k-rojo); }

/* SELECCIONADO ≠ acción (F1-UI Tanda 4). Un grupo de botones mutuamente excluyente dice
   «estás aquí», no «esto va a pasar»: va con el ACENTO, igual que el ítem activo del menú o
   la pestaña activa. Antes usaba `btn-primary` — el color de acción— y así un botón elegido
   pesaba lo mismo que el botón que ejecuta. */
.btn-sel {
  background: var(--k-primary-bg, #E6F7F5);
  color: var(--k-teal-ink);
  border: 1px solid var(--k-teal);
  font-weight: 600;
}
.btn-sel:hover { background: #D8F2EF; }

/* Foco visible en cualquier botón — antes dependía del navegador. */
.btn:focus-visible { outline: 3px solid rgba(18, 184, 171, .45); outline-offset: 2px; }

/* El botón flotante de acción (FAB) es una ACCIÓN: naranja, no acento. */
.fab { background: var(--k-naranja); box-shadow: 0 4px 16px rgba(255, 140, 66, .38); }

/* ==========================================================================
   SHELL — sidebar y barra superior
   ========================================================================== */

.sidebar { background: var(--k-superficie); border-right: 1px solid var(--k-hairline); }
.topbar  { background: var(--k-superficie); border-bottom: 1px solid var(--k-hairline); }

/* Ítem activo: fondo suave + barra de 3px (encargo F1-UI §Tanda 2).
   La barra va con `box-shadow: inset` y no con `border-left`, para que el
   texto no se desplace 3px al activarse. */
.nav-item.active {
  background: var(--k-primary-bg, #E6F7F5);
  color: var(--k-teal-ink);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--k-teal);
}
.nav-item:hover:not(.active) { background: var(--k-lienzo); }

/* El avatar es IDENTIDAD, no acción: navy, no naranja. */
.user-av { background: linear-gradient(135deg, var(--k-navy), #14395F); }

/* ==========================================================================
   TARJETAS Y TABLAS
   ========================================================================== */

.card { background: var(--k-superficie); border-color: var(--k-hairline); }

/* Chips de estado — F1-UI Tanda 4.
   Los de SIGNIFICADO (verde «completado», ámbar «pendiente», morado «facturado», rojo
   «vencida») NO se tocan: ya lo dijo la Tanda 2 y sigue valiendo. Aquí sólo se armoniza el
   NEUTRO, que no dice nada y estaba con hex sueltos en vez de con los tokens.
   Comprobado antes de tocar: `b-orange` no lo usa ningún estado (sus 4 apariciones son
   comentarios de «antes era b-orange»), así que el naranja de acción no choca con ningún chip. */
.b-gray { background: var(--k-lienzo); color: var(--k-ink-2); }
thead th { background: var(--k-lienzo); color: var(--k-ink-2); }
tbody tr:hover { background: var(--k-lienzo); }

/* Foco de campos: teal, como en el login. */
.fc:focus, .filter-input:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--k-teal);
  box-shadow: 0 0 0 3px rgba(18, 184, 171, .16);
}