/* ==========================================================================
   BookQly — tokens de diseño. FUENTE UNICA.

   Este archivo es lo UNICO que declara las propiedades personalizadas de la
   marca. Antes vivian en DOS copias -- assets/styles.css y el <style> de
   index.html -- y se habian separado en tres valores (--text, --muted y
   --grad). Es el patron de FEE_RATES y de los seis price_id aplicado al
   color: una sola verdad con varias copias que divergen en silencio.

   REGLAS AL TOCARLO
   - Solo :root. Ni un selector mas: este archivo lo cargan TODAS las paginas
     (41, la portada incluida) ANTES de su hoja propia, y una regla de clase
     aqui pisaria sin avisar.
   - UNA excepcion, a proposito y la unica: [hidden]{display:none !important}.
     Vive aqui justamente PORQUE este es el unico archivo que carga toda
     pagina. El atributo hidden solo aplica el display:none de la hoja del
     navegador, y cualquier clase que fije display le gana: el 2026-09-25
     "Anular asiento" (.btn, display:inline-flex) se veia y se podia pulsar
     con hidden puesto. El !important hace que hidden signifique oculto,
     siempre. tools/auditar_hidden.py vigila que esta regla siga aqui y que
     toda pagina cargue este archivo.
   - El color de marca del NEGOCIO (--marca de /reservar/ y /cita/) NO vive
     aqui: lo elige cada comerciante y lo fija el navegador en tiempo real.

   ⚠️ SOLO AZULES, Y ESO ESTA MEDIDO, NO ELEGIDO A OJO.
   El logo real (assets/email/logo-email-v2.png) NO TIENE MORADO: de sus
   4,135 pixeles opacos, CERO caen en matiz 250-300. Sus dos unicos colores
   son la tinta del "Book" (#02133D) y el "Qly" (#0298FD, matiz 200.2-218.3).
   Asi que un violeta en la interfaz no acompanaba al logo: lo contradecia.
   ========================================================================== */
:root{
  /* --- marca -------------------------------------------------------------
     --navy se CONSERVA en #0D1B3E y no se empuja a #0B1B34: medido, esta mas
     cerca de la tinta real del logo (ΔE2000 3.10 contra 5.94).
     --blue-deep NO se llama --violet porque ya no guarda un morado; un token
     cuyo nombre miente es lo que este repositorio lleva semanas retirando.
     Su matiz (211.4) cae DENTRO de la banda medida del "Qly" real.          */
  --navy:#0D1B3E; --navy2:#162447; --navy3:#1e3163;
  --blue:#0EA5E9; --blue-deep:#0B4A8F; --g2:#63CFFF;
  /* --marca-*: SOLO el logo oficial (opcion C, 2026-10-04; assets/marca/).
     "Book" en marino; "Qly" con degradado VERTICAL azul -> azul, sin morado.
     Los botones y graficas siguen con --blue (decision del founder). */
  --marca-marino:#0E1834; --marca-azul-claro:#1A8BD0; --marca-azul-profundo:#1355A0;
  --marca-azul-claro-oscuro:#5BBDF2; --marca-azul-profundo-oscuro:#3486DD; --marca-sobre-oscuro:#FFFFFF;
  --grad: linear-gradient(120deg, var(--blue), var(--blue-deep));
  /* --blue-tinta (2026-10-04, decision A del founder): el AZUL TINTA. SOLO para
     dos usos: fondos con TEXTO BLANCO y texto o enlaces azules SOBRE BLANCO
     (y el anillo de foco). --blue (#0EA5E9) con blanco da 2.77:1 y falla; este
     da 5.93:1. Todo lo demas (graficas, bordes, tintes de fondo, el logo)
     sigue con --blue: el aspecto general no cambia.
     --grad-tinta: el mismo degradado de los botones, desde el azul tinta, para
     los fondos en degradado con texto blanco (su parada mas clara pasa 5.93:1).
     tools/auditar_contraste.py mide toda la app contra estos minimos. */
  --blue-tinta:#0369A1;
  --grad-tinta: linear-gradient(120deg, var(--blue-tinta), var(--blue-deep));
  /* --grad-dark: el MISMO logo sobre fondo OSCURO (el sidebar y su cajon movil,
     el pie de la portada). --grad termina en --blue-deep, que sobre --navy da
     1.92:1 y sobre el pie #080F22 da 2.17:1 -- la cola del "Qly" se funde con
     el fondo (minimo AA para texto: 4.5:1). Este va del celeste --g2 al --blue,
     mismo angulo y misma direccion (claro -> mas profundo), y su extremo mas
     oscuro pasa 6.09:1 sobre --navy y 6.88:1 sobre el pie. Cero hex nuevos:
     se compone de tokens que ya existian. La bateria mide el contraste REAL. */
  --grad-dark: linear-gradient(120deg, var(--g2), var(--blue));

  /* --- superficies -------------------------------------------------------
     --line se DECLARA aqui por primera vez. Se usaba en 10 bordes de cuatro
     archivos sin estar declarada en ninguna parte: un var() sin respaldo que
     no resuelve invalida la declaracion entera, asi que esos diez recuadros
     no pintaban NINGUN borde -- sin error y sin que se notara.              */
  --white:#FFFFFF; --surface:#FFFFFF;
  --bg:#F7F9FC; --bg2:#EFF3FA;
  --border:#E2E8F4; --line:#E2E8F4;

  /* --- texto ------------------------------------------------------------- */
  --text:#101828; --muted:#6B7280; --mutedL:#9EB0C5;
  /* --muted-deep (2026-10-04): el gris de texto sobre un fondo TINTADO (--bg2,
     el celeste de una opcion elegida). --muted da 4.34:1 sobre --bg2. */
  --muted-deep:#4B5563;

  /* --- estado ------------------------------------------------------------
     --danger-light (2026-09-21): el "Cerrar sesión" del pie del sidebar en
     23 páginas, y el borde del tono `err` de bqAviso() en assets/app.js --
     ahí el valor SIGUE siendo un literal, porque JS no puede leer var() de
     un array; se ata a este token por comentario y una batería que compara
     los dos bytes a byte (tools/prueba_fase5_colores.py), mismo patrón que
     los seis price_id.

     --danger-deep / --danger-tint-bg / --danger-tint-border (2026-09-21):
     el estado "bad" de banking/ (.rec-note.bad) y reports/balance/
     (.bs-check.bad) -- DOS reimplementaciones, no tres: la que parecía un
     trío (banking/matching/) no reimplementaba nada, ya llamaba a
     bqAviso(). Fondo (0.08) y texto (#B91C1C) ya coincidían byte a byte
     entre los dos archivos; SOLO el borde divergía (.42 en banking/, .45 en
     reports/balance/). Se unifica a .45. NO se toca .rec-note.ok ni
     .bs-check.ok, que divergen igual (.34/.35) y no estaban en el encargo. */
  /* --success-deep (2026-10-04): el verde para TEXTO (y para el blanco sobre
     verde, como los numeros de paso). --success da 3.30:1 sobre blanco; este
     5.02:1. --success sigue en graficas, bordes y tintes. */
  --success-deep:#15803D;
  /* --success-tinta: el verde de TEXTO sobre un fondo verde tintado (las
     pastillas y chips "pagada", "incluido"): #15803D sobre ese tinte da 4.39-
     4.49:1; este, 6.2-6.4:1. */
  --success-tinta:#166534;
  --success:#16A34A; --danger:#DC2626; --danger-light:#FCA5A5; --danger-deep:#B91C1C;
  --danger-tint-bg:rgba(220,38,38,0.08); --danger-tint-border:rgba(220,38,38,0.45);
  /* --warning-deep / --warning-tint-bg (2026-09-21): #b45309, en 20 sitios de
     14 archivos -- 2 cajas reales (clients/, dashboard/: borde + fondo
     rgba(180,83,9,0.06)) y 18 apariciones de texto de error suelto, sin
     caja. NO se llama --warning-soft: #b45309 es MAS OSCURO que --warning
     (#D97706), no mas suave -- mismo criterio que --danger-deep, un nombre
     que sugiriera lo contrario mentiría. El Rol 3 (index.html .bank-acc-bal,
     un dato de maqueta sin relación con avisos) se queda con su hex, a
     propósito: no es el mismo componente. */
  --warning:#D97706; --warning-deep:#B45309; --warning-tint-bg:rgba(180,83,9,0.06); --info:#2563EB;
  /* --warning-suave (2026-10-17, founder: el calendario de /reservar/): un ambar de FONDO que se distingue a simple
     vista ("quedan pocos"); --warning-tint-bg (6 %) no se distingue de un dia normal. Texto encima: --navy o la tinta
     del negocio (15:1). Fuera de este archivo se usa con el viejo de respaldo: var(--warning-suave, var(--warning-tint-bg)). */
  --warning-suave:#FEF3C7;

  /* --- profundidad sutil -------------------------------------------------
     Los cinco valores son LITERALES del founder. Lo unico que cambio con la
     correccion es el tinte: donde iba rgba(124,58,237,...) -- el morado --
     va ahora rgba(11,74,143,...), que es --blue-deep.                       */
  --shadow-card:0 1px 2px rgba(15,23,42,.04), 0 20px 40px -12px rgba(11,27,52,.10), 0 8px 24px -8px rgba(14,165,233,.08);
  --shadow-hover:0 12px 24px -10px rgba(11,27,52,.18);
  --shadow-sel:0 16px 32px -12px rgba(11,74,143,.28), 0 6px 12px -4px rgba(14,165,233,.20);
  --shadow-btn:0 10px 24px -8px rgba(11,74,143,.45);
  --shadow-btn-hover:0 14px 28px -8px rgba(11,74,143,.55);
  --shadow-float:0 20px 40px -20px rgba(13,27,62,0.18);

  /* --- personas de la agenda (2026-09-27) --------------------------------
     8 colores, uno por persona en /calendar/ (se asignan en orden y dan la
     vuelta). Sin morado (matiz 250-300 excluido) y cada uno >= 3:1 sobre
     --surface; el mas bajo es --success, 3.30:1. --blue NO entra: 2.77:1.
     El color nunca va solo: el bloque lleva las iniciales de la persona.
     Cuatro son alias de tokens que ya existian; los otros cuatro son nuevos,
     aprobados por el founder: teal 5.47:1, rosa (matiz 335) 6.04:1,
     pizarra 7.58:1 y oliva 4.99:1. */
  --persona-1: var(--blue-deep); --persona-2:#0F766E; --persona-3: var(--success);
  --persona-4: var(--warning-deep); --persona-5:#BE185D; --persona-6: var(--info);
  --persona-7:#475569; --persona-8:#4D7C0F;

  /* --- graficos (rediseño fase 1, 2026-10-02) ---------------------------
     Los UNICOS colores nuevos del rediseño, validados con validate_palette
     (la guia, tools/vistas-previas/rediseno-guia.html). Barras: ingresos en
     --success (cobrado) y gastos en azul acero; neto en --navy. Dona: orden
     FIJO, nunca rotado, y "Otros" en gris neutro a proposito. CVD dE >= 10,
     normal >= 18.7. --gr-c3 queda en 2.89:1 sobre blanco: lleva etiqueta
     directa y "Ver como tabla". Un color de estado no se reusa como serie. */
  --gr-ing: var(--success); --gr-gas:#3B6EA8; --gr-neto: var(--navy);
  --gr-c1:#2E6FD3; --gr-c2:#B0306B; --gr-c3:#24A890; --gr-c4:#8C6D1F; --gr-otros:#94A3B8;

  /* --- geometria --------------------------------------------------------- */
  --radius-card:16px; --radius-lg:24px; --radius-pill:100px;
  --sidebar-w:248px;
  /* El fondo marino del menú lateral (founder 2026-10-24; docs/MENU-FONDO-PROPUESTA.md, sección 5). Medidos en la
     imagen de referencia (docs/resumen-rediseno/referencias/sidebar-fondo.png) con PIL: casi parejo de arriba abajo,
     algo más claro a la izquierda, y dos cintas en diagonal entre el 57 % y el 85 % del alto. Las letras del menú se
     miden sobre lo más claro de las cintas (tools/prueba_menu_fondo.py). */
  --menu-fondo-arriba:#011D47; --menu-fondo-medio:#001C45; --menu-fondo-abajo:#001A40;
  --menu-fondo-izq:#00275A; --menu-fondo-der:#001234; --menu-banda:#003A80;
  /* (founder 2026-10-24) enlaces e iconos en blanco puro, como en la imagen; títulos de grupo más claros que antes
     (#A3B1CC): #BCC8DE da 7.71:1 sobre lo más claro de las cintas y se queda en el 57 % del brillo del blanco */
  --menu-texto:#FFFFFF; --menu-icono:#FFFFFF; --menu-grupo:#BCC8DE;
  --menu-borde:rgba(255,255,255,.12); --menu-hover:rgba(255,255,255,.07);
  --aviso-opaco:#FEF3C7; --peligro-opaco:#FEE2E2;
  /* (founder 2026-10-24, Resumen fase 2; docs/RESUMEN-REDISENO-DIAGNOSTICO.md 6.8 y 8.1) los tintes de la imagen que
     manda: el fondo claro de cada accion rapida, de la caja del icono de cada cifra y de cada estado. La tinta de cada
     uno es un token que ya existe (o el morado nuevo); cada pareja se mide con tools/auditar_contraste.py. */
  --res-azul-suave:#E5F3FF; --res-verde-suave:#E0F8EF; --res-rojo-suave:#FFE8EE; --res-naranja-suave:#FFF1DD;
  --res-morado:#5B3FC4; --res-morado-suave:#F0EAFE;
}

/* La unica regla que no es :root (ver arriba). hidden = oculto, sin excepcion. */
[hidden]{display:none !important}