/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   NUNIO · SISTEMA DE DISEÑO (Pablo, 05/10)
   ──────────────────────────────────────────────────────────────────────────────────────────────────
   🔴 LA DENSIDAD NO SE TOCA. Ni un `padding`, ni un `line-height`, ni un alto de fila. Pablo probó
      una versión más aireada y se le salía de la pantalla: lo que se unifica acá es la TIPOGRAFÍA,
      el COLOR por rol, el borde, el radio, la sombra y el alto de los controles. Nada más.

   🔴 LOS COLORES NO SE INVENTAN. La paleta de Nunio ya existe en `nunio.css`, ya está pensada por
      rol y ya trae medidos sus contrastes. Acá no nace un color: lo que se hace es que cada
      elemento use el de SU rol en vez de un hex suelto. Medido: 170 colores escritos a mano en
      483 lugares, y 104 de ellos se usan UNA sola vez.

   🔴 CADA VARIABLE LLEVA SU RESPALDO: `var(--t-base, 13.5px)`. Así una pantalla que todavía no
      cargue este archivo sigue viéndose exactamente como hoy, en vez de perder el valor y romperse.
      Es lo que permite ir pantalla por pantalla sin que las demás se caigan en el camino.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── 1 · CINCO TAMAÑOS, uno por ROL ───────────────────────────────────────────────────────────
     Hoy hay 37 distintos en 1.042 lugares, y 10 se usan una sola vez. Estos cinco cubren el 95 %
     de los usos, y cada uno dice de qué se hace cargo.                             usos que absorbe */
  /* 🔴 LOS CINCO TAMAÑOS SE MUDARON A `nunio-letra.css` (Pablo, 05/10). Allá viven junto a la
     letra y, sobre todo, allá los carga TAMBIÉN el Dashboard — acá no llegaban. Se mudaron, no
     se copiaron: dos definiciones de los mismos tamaños es como terminan dos pantallas con
     escalas distintas. */

  /* ── 2 · TRES GROSORES ────────────────────────────────────────────────────────────────────────
     Hoy hay ocho. 650 y 550 no son decisiones: son el mismo «medio» escrito distinto. */
  --p-normal: 400;
  --p-medio:  600;   /* absorbe 500 y 550 */
  --p-fuerte: 700;   /* absorbe 650 y 800 */

  /* ── 3 · UN BORDE, UN RADIO, UNA SOMBRA ───────────────────────────────────────────────────────
     Hoy hay 35 radios distintos. El de 8 px ya es el más usado (78 veces), así que el sistema
     confirma lo que el CRM ya hacía casi siempre, en vez de imponer algo nuevo. */
  --borde: 1px solid var(--ui-linea, #e5e7eb);
  --radio: 8px;
  --radio-chico: 4px;        /* lo que va pegado a algo más grande: una pastilla en una tarjeta */
  --radio-pastilla: 999px;   /* ⚠️ no es «otro radio»: es una FORMA, la píldora */
  --sombra: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);
  --sombra-alta: 0 4px 12px rgba(0, 0, 0, .10);   /* solo lo que FLOTA: menús y diálogos */

  /* ── 4 · UN ALTO PARA BOTONES Y CAMPOS ────────────────────────────────────────────────────────
     Hoy conviven 32, 34, 36, 38, 40, 44 y 46 px para la misma clase de cosa.
     ⚠️ ESTO NO ES DENSIDAD: es el alto de un control, no el de una fila de lista. Las filas no se
        tocan, y después del cambio se MIDE que no se hayan movido. */
  --alto-control: 36px;
  --alto-control-chico: 28px;   /* el caso aparte: un botón dentro de una tabla */

  /* ── 5 · EL COLOR, POR ROL ────────────────────────────────────────────────────────────────────
     🔴 NINGUNO ES NUEVO: todos salen de `nunio.css`. Estos nombres existen para que una regla diga
        PARA QUÉ usa el color, no cuál es — que es lo que permite que el día que la línea de color
        cambie, cambie en un solo lugar. */
  --c-texto:        var(--ui-texto, #111827);
  --c-texto-suave:  var(--ui-texto2, #6b7280);
  --c-texto-tenue:  var(--ui-tenue, #9ca3af);
  --c-titulo:       var(--ui-titulo, #111827);
  --c-linea:        var(--ui-linea, #e5e7eb);
  --c-panel:        var(--ui-panel2, #f9fafb);

  --c-accion:        var(--marca, #391af6);          /* el relleno del botón principal */
  --c-accion-encima: var(--marca-encima, #fff);      /* lo que va ENCIMA de ese relleno */
  --c-accion-hover:  var(--marca-fuerte, #2a12c4);
  --c-enlace:        var(--marca-texto, #391af6);
  --c-foco:          var(--marca-anillo, rgba(57, 26, 246, .28));

  --c-bien:        var(--estado-ok, #15803d);
  --c-bien-punto:  var(--estado-ok-punto, #25D366);
  --c-bien-fondo:  var(--estado-ok-tenue, rgba(37, 211, 102, .12));
  --c-ojo:         var(--estado-alerta, #b45309);
  --c-ojo-punto:   var(--estado-alerta-punto, #f59e0b);
  --c-ojo-fondo:   var(--estado-alerta-tenue, rgba(245, 158, 11, .12));
  --c-mal:         var(--estado-error, #dc2626);
  --c-mal-punto:   var(--estado-error-punto, #ef4444);
  --c-mal-fondo:   var(--estado-error-tenue, rgba(239, 68, 68, .12));
  --c-neutro:      var(--estado-neutro, #6b7280);
  --c-neutro-punto: var(--estado-neutro-punto, #9ca3af);

  /* la barra de desplazamiento, por rol */
  --c-barra:        rgba(127, 127, 127, .22);
  --c-barra-encima: rgba(127, 127, 127, .45);
}