/* Centralit.IA · tokens (PLAN-061 D.c, skill design-system).
   Tres capas: primitivos de marca → semánticos (sobre iberikia.css) → componente.
   Los colores de marca son provisionales a ojo de los logos de Iberik.IA; se
   sustituyen por los muestreados de los originales sin cambiar ningún nombre. */

:root {
  /* ---------- Primitivos de marca Iberik.IA ---------- */
  --ibk-teal-700: #16607a;
  --ibk-teal-600: #1f7c98;
  --ibk-teal-500: #2794b3;
  --ibk-teal-400: #19c8dc;
  --ibk-teal-100: #e3f2f6;
  --ibk-naranja-700: #b85a15;
  --ibk-naranja-600: #d9701f;
  --ibk-naranja-500: #f28c1e;
  --ibk-naranja-100: #fcefe2;
  --ibk-carbon-900: #14171b;
  --ibk-carbon-800: #1e2228;
  --ibk-carbon-700: #2a3038;
  --ibk-hueso-50: #f7f9fa;
  --ibk-hueso-100: #eef2f4;
  --ibk-hueso-200: #dfe6ea;
  --ibk-tinta-900: #142027;
  --ibk-tinta-600: #46565f;
  --ibk-tinta-400: #7f8d95;

  /* ---------- Escalas ---------- */
  --c-esp-1: 4px;  --c-esp-2: 8px;  --c-esp-3: 12px; --c-esp-4: 16px;
  --c-esp-6: 24px; --c-esp-8: 32px; --c-esp-12: 48px;
  --c-radio-campo: 6px; --c-radio-ficha: 12px; --c-radio-pastilla: 999px;
  /* Para una superficie que envuelve controles pegados a su borde: el radio de fuera
     es el de dentro MAS el hueco (6 + 16 = 22, redondeado a la escala). Con radios
     iguales, la esquina de dentro parece pellizcada. */
  --c-radio-ficha-alta: 20px;
  --c-tipo-meta: .8125rem; --c-tipo-tabla: .875rem; --c-tipo-cuerpo: 1rem;
  --c-tipo-seccion: 1.125rem; --c-tipo-ficha: 1.375rem; --c-tipo-pagina: 1.75rem;
  --c-peso-normal: 400; --c-peso-medio: 500; --c-peso-fuerte: 650;
  --c-fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --c-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  /* Las curvas de serie del navegador son flojas: les falta el golpe que hace que
     una animación parezca intencionada. `--c-ease` es un ease-out fuerte, para lo
     que entra o sale (empieza rápido, se siente inmediato). `--c-ease-morfar` es
     un ease-in-out fuerte, para lo que se MUEVE o cambia de tamaño en pantalla.
     Lo que no se usa nunca aquí es `ease-in`: empieza lento justo en el momento
     que el usuario está mirando, y hace que la misma duración parezca el doble. */
  --c-ease: cubic-bezier(.23, 1, .32, 1);
  --c-ease-morfar: cubic-bezier(.77, 0, .175, 1);
  --c-rapido: 150ms; --c-normal: 200ms;
  /* Abrir una tarjeta y cerrarla no duran lo mismo a propósito: abrir es el sistema
     enseñando algo y puede tomarse su tiempo; cerrar es el usuario diciendo «ya no»
     y tiene que quitarse de en medio. Ninguna pasa de 300 ms. */
  --c-abrir: 260ms; --c-cerrar: 190ms;
  --c-foco: 0 0 0 3px var(--c-acento-suave), 0 0 0 5px var(--c-acento);

  /* ---------- Semánticos (tema claro) ---------- */
  --c-fondo: var(--ibk-hueso-50);
  --c-superficie: #ffffff;
  --c-superficie-2: var(--ibk-hueso-100);
  --c-lateral: var(--ibk-hueso-100);
  --c-borde: var(--ibk-hueso-200);
  --c-borde-fuerte: #c6d0d6;
  --c-texto: var(--ibk-tinta-900);
  --c-texto-2: var(--ibk-tinta-600);
  --c-texto-3: var(--ibk-tinta-400);
  --c-acento: var(--ibk-teal-600);
  --c-acento-hover: var(--ibk-teal-700);
  --c-acento-suave: var(--ibk-teal-100);
  --c-acento-texto: #ffffff;
  --c-atencion: var(--ibk-naranja-600);
  --c-atencion-suave: var(--ibk-naranja-100);
  --c-ok: var(--green, #059669);
  --c-ok-suave: var(--green-soft, rgba(5,150,105,.10));
  --c-aviso: var(--amber, #d97706);
  --c-aviso-suave: var(--amber-soft, rgba(217,119,6,.12));
  --c-error: var(--red, #dc2626);
  --c-error-suave: var(--red-soft, rgba(220,38,38,.10));
  --c-cabecera: var(--ibk-carbon-800);
  --c-cabecera-texto: #f3f6f8;
  --c-cabecera-texto-2: #aeb9c1;
  --c-sombra: 0 1px 2px rgba(20,32,39,.05), 0 1px 3px rgba(20,32,39,.06);
  --c-sombra-alta: 0 8px 28px rgba(20,32,39,.08);
}

:root[data-bs-theme="dark"] {
  --c-fondo: #0e1216;
  --c-superficie: var(--ibk-carbon-800);
  --c-superficie-2: var(--ibk-carbon-700);
  --c-lateral: #181c21;
  --c-borde: #2e353d;
  --c-borde-fuerte: #3d454e;
  --c-texto: #e6ebee;
  --c-texto-2: #b3bdc5;
  --c-texto-3: #7f8d95;
  --c-acento: var(--ibk-teal-400);
  --c-acento-hover: #4fd6e6;
  --c-acento-suave: rgba(25,200,220,.14);
  --c-acento-texto: #0e1216;
  --c-atencion: var(--ibk-naranja-500);
  --c-atencion-suave: rgba(242,140,30,.16);
  --c-cabecera: var(--ibk-carbon-900);
  --c-sombra: none;
  --c-sombra-alta: none;
  --tarjeta-grupo-fondo: rgba(242,140,30,.10);
  --tarjeta-grupo-borde: rgba(242,140,30,.34);
  --tarjeta-grupo-tinte: rgba(242,140,30,.18);
  --tarjeta-grupo-tinta: var(--ibk-naranja-500);
}

/* ---------- Componente ---------- */
:root {
  --boton-fondo: var(--c-acento);
  --boton-fondo-hover: var(--c-acento-hover);
  --boton-texto: var(--c-acento-texto);
  --boton-alto: 44px;
  /* Un control compacto (acciones de una fila) nunca baja de 40 px en escritorio;
     con dedo, 44. Un objetivo de 34 px se falla, y estas filas se usan en el movil. */
  --boton-alto-compacto: 40px;
  --campo-fondo: var(--c-superficie);
  --campo-borde: var(--c-borde-fuerte);
  --campo-borde-foco: var(--c-acento);
  --campo-alto: 44px;
  --ficha-fondo: var(--c-superficie);
  --ficha-borde: var(--c-borde);
  --ficha-radio: var(--c-radio-ficha);
  /* Tarjetas de Personas y grupos (PLAN-062). Una persona y un grupo no son la
     misma cosa y no deben mirarse dos veces para distinguirlos: quien atiende va
     en el azul de la marca, lo que hace sonar a varios a la vez va en el naranja.
     El color es redundante a propósito —la forma del avatar y el texto dicen lo
     mismo—, porque el 8 % de los hombres no distingue estos dos tonos. */
  --tarjeta-persona-tinte: var(--c-acento-suave);
  --tarjeta-persona-tinta: var(--c-acento-hover);
  --tarjeta-grupo-fondo: #fffaf4;
  --tarjeta-grupo-borde: #f2dcc2;
  --tarjeta-grupo-tinte: var(--ibk-naranja-100);
  --tarjeta-grupo-tinta: var(--ibk-naranja-700);
  --lista-fila-alto: 56px;
  --lista-fila-hover: var(--c-superficie-2);
  --nav-ancho: 232px;
  --nav-activo-fondo: var(--c-acento-suave);
  --nav-activo-texto: var(--c-acento-hover);
  --semaforo-ok: var(--c-ok);
  --semaforo-aviso: var(--c-aviso);
  --semaforo-error: var(--c-error);
  --semaforo-neutro: var(--c-texto-3);
  --estado-guardado: var(--c-texto-2);
  --estado-aplicando: var(--c-aviso);
  --estado-en-uso: var(--c-ok);
}