/* data21-tokens.css · tema DATA21 2026 · NO editar core.css/components.css/pages.css */
/* ---------------------------------------------------------------------------
   QUE ES ESTE FICHERO
   Primera hoja del tema DATA21 2026. Es el DUENO EXCLUSIVO de :root: aqui, y
   solo aqui, se declaran los tokens --d21-*. Ningun otro fichero del tema
   (layout, forms, components, shell) puede declarar :root ni redefinir un
   token; si necesita un color que no esta, lo pide, no lo inventa.

   QUE CLASES CUBRE (nadie mas las toca)
     :root
     *, *::before, *::after      (solo box-sizing)
     html, body                  (fondo, color, fuente y escala base)
     a, a:hover, a:focus         (color de enlace y su transicion)
     :focus-visible              (anillo de foco accesible global)
     ::selection                 (seleccion de texto)
     h1..h6                      (SOLO font-family y color; nada de tamano,
                                  margen, padding ni borde: eso es de layout)
     hr, small
     ::-webkit-scrollbar y ::-webkit-scrollbar-thumb/track

   QUE NO TOCA
     .card-box, .btn, .form-control, .topbar, .side-menu, .flexigrid, .modal,
     .nav-tabs, .row, .col-*, utilidades m-* / p-*. Cada una tiene otro dueno.

   COMO GANA
     Esta hoja se carga la primera del tema, pero DESPUES de bootstrap.min.css,
     core.css, components.css, icons.css, pages.css y responsive.css. Todos los
     selectores de aqui son de especificidad 0,0,1 o de pseudo-elemento, la
     misma que las reglas base de core.css (body, html, h1..h6) y de bootstrap
     (a). Se gana por ORDEN DE CARGA. Hay UN solo !important en todo el
     fichero, en :focus-visible, y esta justificado ahi mismo: core.css:74-76
     declara * { outline:none !important } y sin otro !important es imposible
     devolverle el foco visible al panel. No debe haber ninguno mas.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   data21-tokens.css · TOKENS DEL TEMA DATA21
   Valores extraidos LITERALMENTE del bloque .nuevo{...} de
   .superpowers/brainstorm/50266-1788770755/maqueta.html (lineas 85-107).
   Los marcados con + son ANADIDOS para cubrir componentes que la maqueta
   no dibuja (modales, alertas, badges, dropdowns, select2, switchery, tablas).
   NINGUN otro fichero del tema puede declarar :root.
   =========================================================================== */
:root{
  /* -- MARCA (sale del logo · INTOCABLE) ------------------------------- */
  --d21-marca:#eb8500;              /* maqueta: --marca */
  --d21-marca-oscuro:#c96f00;       /* maqueta: --marca-oscuro */
  --d21-marca-suave:#fff4e6;        /* maqueta: --marca-suave */
  --d21-marca-borde:#f6dcb8;        /* + borde de bloques sobre marca-suave */
  --d21-marca-halo:rgba(235,133,0,.14); /* maqueta: anillo de foco del input */

  /* -- SUPERFICIES ----------------------------------------------------- */
  --d21-oscuro:#36404a;             /* maqueta: --oscuro (topbar, sin tocar) */
  --d21-oscuro-2:#2d3740;           /* + hover dentro de la topbar */
  --d21-fondo:#eef1f5;              /* maqueta: --fondo */
  --d21-superficie:#ffffff;         /* maqueta: --superficie */
  --d21-superficie-2:#f7f9fb;       /* maqueta: fondo de th */
  --d21-superficie-3:#f4f6f9;       /* maqueta: hover del menu lateral */
  --d21-superficie-4:#f6f8fa;       /* maqueta: hover de .acc y .btn-default */
  --d21-fila-hover:#fafbfd;         /* maqueta: tbody tr:hover */
  --d21-borde:#e2e7ee;              /* maqueta: --borde */
  --d21-borde-fuerte:#cfd6e0;       /* maqueta: --borde-fuerte */
  --d21-borde-suave:#f1f4f7;        /* maqueta: separador entre td */

  /* -- TEXTO ----------------------------------------------------------- */
  --d21-texto:#2b3441;              /* maqueta: --texto */
  /* ⚠ LA RAMPA GRIS SE OSCURECE UN PASO RESPECTO A LA MAQUETA — ACCESIBILIDAD.
     La maqueta declara --texto-suave:#6b7683 y --texto-tenue:#96a0ad, pero en
     la maqueta el gris tenue sólo pinta TRES líneas decorativas. En el panel
     real es el color de TODO el texto de apoyo: help-block, ::placeholder, el
     pie, los rótulos de sección del menú y los iconos del menú lateral.
     Medido sobre blanco: #96a0ad da 2,65:1 — muy por debajo del 4,5:1 que
     exige WCAG AA (y del 3:1 mínimo de un placeholder). Es además una
     REGRESIÓN: el panel anterior usaba el #737373 de bootstrap.min.css en
     .help-block, que sí cumplía (4,74:1). Y contradice el propio brief de
     identidad, que fija el texto secundario en #797979.
     Por eso la rampa se desplaza un escalón:
       --d21-texto-suave  #6b7683 → #5a6472   5,99:1 sobre blanco
                                              5,68:1 sobre el #f7f9fb del <th>
       --d21-texto-tenue  #96a0ad → #6b7683   4,62:1 sobre blanco
     Se conservan DOS tonos distintos (la jerarquía visual de la maqueta se
     mantiene) y ambos pasan AA. Ningún consumidor de estos dos tokens pinta
     sobre fondo oscuro: la topbar usa --d21-texto-topbar, que no cambia. */
  --d21-texto-suave:#5a6472;        /* maqueta: --texto-suave #6b7683, oscurecido por AA */
  --d21-texto-tenue:#6b7683;        /* maqueta: --texto-tenue #96a0ad, oscurecido por AA */
  --d21-texto-inv:#ffffff;          /* + texto sobre fondo de color */
  --d21-texto-topbar:#c3c9d0;       /* + iconos de la topbar oscura */

  /* -- SEMANTICOS ------------------------------------------------------ */
  --d21-exito:#5faa4a;              /* maqueta: --exito */
  --d21-exito-claro:#81c868;        /* maqueta: --exito-claro (verde original) */
  --d21-exito-fondo:#eef7ec;        /* maqueta: fondo de la pildora .estado */
  --d21-peligro:#e04343;            /* maqueta: --peligro */
  --d21-peligro-claro:#f05050;      /* maqueta: --peligro-claro (rojo original) */
  --d21-peligro-fondo:#fdeceb;      /* + pildora/alerta de peligro */
  --d21-info:#337ab7;               /* maqueta: --info (azul de enlaces) */
  --d21-info-claro:#5d9cec;         /* + azul de plantilla (btn-primary) */
  --d21-info-fondo:#eef4fb;         /* + pildora/alerta informativa */
  --d21-aviso:#b57a12;              /* + ambar #ffbd4a legible sobre blanco */
  --d21-aviso-claro:#ffbd4a;        /* + ambar original de la plantilla */
  --d21-aviso-fondo:#fff6e5;        /* + pildora/alerta de aviso */
  --d21-neutro-fondo:#eef1f5;       /* + pildora neutra */
  --d21-teal:#5fbeaa;               /* + acento VIEJO de la plantilla: se retira */

  /* -- RADIOS ---------------------------------------------------------- */
  --d21-r-s:6px;                    /* maqueta: --r-s */
  --d21-r-m:10px;                   /* maqueta: --r-m */
  --d21-r-l:14px;                   /* maqueta: --r-l */
  --d21-r-pill:999px;               /* + pildoras de estado y label-* */

  /* -- ESCALA DE ESPACIADO --------------------------------------------- */
  --d21-e1:4px;                     /* maqueta: --e1 */
  --d21-e2:8px;                     /* maqueta: --e2 */
  --d21-e3:12px;                    /* maqueta: --e3 */
  --d21-e4:16px;                    /* maqueta: --e4 */
  --d21-e5:24px;                    /* maqueta: --e5 */
  --d21-e6:32px;                    /* maqueta: --e6 */
  --d21-e7:48px;                    /* maqueta: --e7 */

  /* -- SOMBRAS --------------------------------------------------------- */
  --d21-sombra:0 1px 2px rgba(20,30,45,.05), 0 2px 8px rgba(20,30,45,.05);
  --d21-sombra-alta:0 4px 14px rgba(20,30,45,.09);
  --d21-sombra-btn:0 1px 2px rgba(20,30,45,.08);   /* maqueta: .btn */
  --d21-sombra-menu:0 8px 24px rgba(20,30,45,.12); /* + dropdown y modal */

  /* -- TIPOGRAFIA (la fuente NO cambia) -------------------------------- */
  --d21-fuente:'Noto Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --d21-txt-base:14px;              /* maqueta: .nuevo{font-size:14px} */
  --d21-txt-campo:13.5px;           /* maqueta: form-control, btn, menu */
  --d21-txt-sm:13px;                /* maqueta: acc, paginador, label */
  --d21-txt-mini:12.5px;            /* maqueta: help-block, pie, estado */
  --d21-txt-micro:11px;             /* maqueta: th en mayusculas */
  --d21-txt-titulo:24px;            /* maqueta: .page-title */
  --d21-txt-sub:13.5px;             /* maqueta: .page-sub */
  --d21-txt-seccion:10.5px;         /* maqueta: .sec-tit del menu */

  /* -- MEDIDAS DE LA CASCARA Y DE LOS CAMPOS --------------------------- */
  --d21-topbar-h:58px;              /* maqueta: .topbar{height:58px} */
  --d21-sidebar-w:246px;            /* maqueta: .side-menu{width:246px} */
  --d21-sidebar-min:50px;           /* + estado #wrapper.enlarged (core.css) */
  --d21-campo-max:520px;            /* maqueta: .campo{max-width:520px} */
  --d21-campo-caja:540px;           /* + 520 + 2x10px de padding de columna */
  --d21-campo-corto:260px;          /* maqueta: .campo.corto */
  --d21-label-w:180px;              /* maqueta: .control-label{width:180px} */
  --d21-control-h:38px;             /* maqueta: .form-control{height:38px} */
  --d21-control-h-sm:32px;          /* + buscador y paginador del grid */

  /* -- TRANSICIONES ---------------------------------------------------- */
  --d21-t:.13s ease;                /* maqueta: transition:.13s */
  --d21-t-btn:.14s ease;            /* maqueta: .btn{transition:.14s} */
}

/* ===========================================================================
   RESET SUAVE
   Bootstrap 3 ya trae el suyo (normalize + border-box global); esto solo
   asegura la caja y reescribe la base tipografica y de fondo de la app.
   =========================================================================== */
*,
*::before,
*::after{box-sizing:border-box}

/* core.css:34 pone html{background:#ebeff2}. Misma especificidad (0,0,1) y
   esta hoja carga despues: gana el orden. No se toca position ni min-height. */
html{background:var(--d21-fondo)}

/* core.css:25 pone body{background:#ebeff2;font-size:13px;color:#797979}.
   Misma especificidad y carga posterior -> gana sin !important.
   Es exactamente el salto que se ve al pulsar 'Despues' en la maqueta:
   fondo #eef1f5 y texto 14px / #2b3441.
   NO se tocan overflow-x ni margin: los deja core.css como estan. */
body{
  background:var(--d21-fondo);
  color:var(--d21-texto);
  font-family:var(--d21-fuente);
  font-size:var(--d21-txt-base);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ===========================================================================
   ENLACES
   Bootstrap ya declara a{color:#337ab7}, que es exactamente --d21-info: el
   color no cambia nada. Lo unico que se unifica es el hover (bootstrap lo
   lleva a #23527c) y se le anade la transicion del tema.
   =========================================================================== */
a{
  color:var(--d21-info);
  text-decoration:none;
  transition:color var(--d21-t);
}
a:hover,
a:focus{
  color:#2a6395;
  text-decoration:none;
}

/* ===========================================================================
   FOCO ACCESIBLE GLOBAL
   Es el "Pulsa Tab para ver el foco" de la maqueta, en el naranja de marca.
   Solo :focus-visible (navegacion por teclado). NO se toca :focus a secas.

   UNICO !important DE ESTE FICHERO, y es inevitable. Verificado en el DOM con
   Playwright: sin el, el outline sale "none 0px" en TODOS los elementos.
   Lo anulan tres reglas previas, todas con !important:
     core.css:74-76        * { outline:none !important }   <- mata el foco de
                           TODA la aplicacion, es la que obliga al !important:
                           un selector universal con !important solo se vence
                           con otro !important.
     components.css:30     .btn { outline:none !important }
     core.css:606          .form-control:focus { outline:0 !important }
   Con !important, esta regla (0,1,0) gana a * (0,0,0) y empata en
   especificidad con .btn (0,1,0), donde decide el orden de carga: esta hoja va
   despues, asi que gana. En cambio PIERDE a proposito contra
   .form-control:focus (0,2,0): el foco de los campos NO es de este fichero,
   lo pinta data21-forms.css con borde de marca + halo --d21-marca-halo.
   =========================================================================== */
:focus-visible{
  outline:2px solid var(--d21-marca) !important;
  outline-offset:2px !important;
}

/* ===========================================================================
   SELECCION DE TEXTO
   =========================================================================== */
::selection{
  background:var(--d21-marca-suave);
  color:var(--d21-marca-oscuro);
}
::-moz-selection{
  background:var(--d21-marca-suave);
  color:var(--d21-marca-oscuro);
}

/* ===========================================================================
   TITULOS: SOLO fuente y color
   core.css:126 los pone en "Source Sans Pro" y #505458. Se devuelven a la
   pila Noto Sans y al texto del tema. PROHIBIDO tocar aqui font-size, margin,
   padding o border: .page-title y .header-title son de data21-layout.css.
   =========================================================================== */
h1,h2,h3,h4,h5,h6{
  font-family:var(--d21-fuente);
  color:var(--d21-texto);
}

/* ===========================================================================
   SEPARADOR Y TEXTO PEQUENO
   =========================================================================== */
hr{
  border:0;
  border-top:1px solid var(--d21-borde);
  margin:var(--d21-e5) 0;
}
small{
  font-size:var(--d21-txt-mini);
  color:var(--d21-texto-suave);
}

/* ===========================================================================
   SCROLLBAR FINA (WebKit/Blink)
   Es el acabado "profesional" que pide el encargo. En Firefox no aplica y se
   queda la barra del sistema: degradacion aceptable, no se anade nada externo.
   =========================================================================== */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--d21-borde-fuerte);
  border-radius:var(--d21-r-pill);
  border:2px solid var(--d21-fondo);
}
::-webkit-scrollbar-thumb:hover{background:var(--d21-texto-tenue)}