/* ==========================================================================
   Bastium sobre Twenty CRM
   Paleta sacada del logo: azul pizarra sobre fondo claro.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('/marca/fuentes/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bas-tinta: #2f3e4f;       /* el azul del logo */
  --bas-tinta-hi: #4a6076;
  --bas-profundo: #1e2a38;    /* fondo oscuro */
  --bas-profundo-2: #263548;
  --bas-hueso: #f2f3f5;       /* el gris claro del fondo del logo */
  --bas-hueso-2: #e3e6ea;
  --bas-linea: rgba(47, 62, 79, 0.14);
  --bas-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ------------------------------------------------------------- tipografia */
html, body, #root, input, textarea, select, button {
  font-family: var(--bas-font);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* -------------------------------------------------------------- seleccion */
::selection { background: var(--bas-tinta); color: #fff; }
::-moz-selection { background: var(--bas-tinta); color: #fff; }

/* --------------------------------------------------------------- scroll */
* { scrollbar-width: thin; scrollbar-color: var(--bas-tinta) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(47, 62, 79, 0.4);
  border-radius: 100px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--bas-tinta); background-clip: content-box; }

/* ---------------------------------------------------------------- foco
   El anillo de foco es de los pocos acentos que se pueden pisar de verdad
   con CSS: va por outline, no por el CSS-in-JS de la aplicacion. */
:focus-visible {
  outline: 2px solid var(--bas-tinta) !important;
  outline-offset: 2px !important;
}

input, textarea, [contenteditable='true'] { caret-color: var(--bas-tinta); }

/* ------------------------------------------------------------ modo oscuro */
html.dark body, html.dark #root { background: var(--bas-profundo); }

/* Barra de progreso superior */
[class*='ProgressBar'] > div,
[class*='LoadingBar'] > div {
  background: linear-gradient(90deg, var(--bas-tinta-hi), var(--bas-tinta)) !important;
}

/* Enlaces sueltos del contenido */
a[href^='http']:not([class]),
[class*='RawLink'],
[class*='SocialLink'] {
  color: var(--bas-tinta);
  text-decoration-color: rgba(47, 62, 79, 0.4);
}