/* ═══════════════════════════════════════════════════════════════════
   CRM de Musho — tema.css: la capa de TOKENS del CRM (CRM 3, 30/09/2026).
   Se carga después de tokens.css (el DS) y antes de app.css y estilo.css.
   Aquí solo se DEFINEN variables: alias de la casa, tema claro y lo propio
   del oscuro. Las reglas de pantalla viven en estilo.css (solo recetas).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens semánticos (v3.1 marca de la web · 1.1 del DS, 26/09/2026) ──
   El color llega del design system de Musho: tokens.css (copia del que
   genera software/web/design-system/generar-tokens.mjs) trae los
   --ds-color-* del tema OSCURO, que es el oficial. Aquí:
     · :root   — los nombres de la casa (--fondo, --tinta, --borde…) son
                 ALIAS de un --ds-color-*. 952 usos no se tocan y los
                 componentes nuevos (CRM 2, fase 0b) hablan --ds-* directo.
     · claro   — SOBREESCRIBE los mismos --ds-color-* con los valores
                 claros del CRM. Es el ÚNICO sitio del fichero con hex de
                 la interfaz: el tema claro no existe en la web y se deriva
                 aquí de la misma marca (canon 09/08: claro+oscuro son una
                 entrega).
     · oscuro  — no redefine nada que el DS ya traiga; solo lo propio
                 del CRM que el DS no tiene (barra lateral y paletas de
                 contenido).
   Cada par texto/fondo está verificado contra WCAG AA (4,5:1 texto,
   3:1 UI) — la sonda pruebas/accesibilidad.js lo re-comprueba. */
:root {
  color-scheme: light;

  /* Superficies */
  --fondo: var(--ds-color-bg);
  --tarjeta: var(--ds-color-bg-elevated);
  --borde: var(--ds-color-border);
  /* --sidebar es propia del CRM (el DS no tiene barra lateral con color
     propio): su valor va en cada bloque de tema. */

  /* Tinta, en TRES niveles: los tres pesos de texto del DS 1.1. La meta
     de tercer nivel (--suave-2) es el nicho y el barrio de una tarjeta,
     la línea de meta de lead/tarea/proyecto/asset. No cambia el tamaño,
     cambia el papel. */
  --tinta: var(--ds-color-text);
  --suave: var(--ds-color-text-secondary);
  --suave-2: var(--ds-color-text-tertiary);

  /* Las tres fuerzas del acento SEGÚN EL USO (hasta DS 1.5 eran el rojo
     Musho; desde 1.5 son neutras, ver abajo. Historia: en claro el rojo de
     marca no da 4,5:1 sobre blanco, así que nunca se usa como texto
     pequeño):
     --acento        bordes, foco, rellenos (UI: ≥3:1)
     --acento-texto  enlaces y texto pequeño (≥4,5:1): PROPIO de cada tema.
                     El accent del DS da 4,6:1 sobre tarjeta pero 3,9:1
                     sobre el fondo del menú activo (--acento-suave), y
                     el DS 1.1 no trae un «accent-fg»: propuesto para 1.1.1.
     --acento-fuerte fondo de botón sólido, con --acento-tinta encima (≥4,5:1)
     El bloque claro sobreescribe -fuerte: el DS no tiene un sólido
     oscurecido para fondo claro. */
  /* DS 1.5 (27/09, reglas.md § 0.7, Asier con David; Yaz valida): en una
     app el coral es peligro o marca quieta y lo activo, seleccionado, hover
     y foco es NEUTRO. Los nombres --acento* se quedan (los usan cien
     reglas) pero ya apuntan al inverso del fondo, como el primario del DS.
     El único coral que queda es el logo (.logo-musho, con marca). */
  --acento: var(--ds-color-bg-inverse);
  --acento-fuerte: var(--ds-color-bg-inverse);
  --acento-tinta: var(--ds-color-text-inverse);
  --acento-suave: var(--ds-color-bg-quaternary);  /* fondo de estado activo / seleccionado */
  --halo: color-mix(in srgb, var(--ds-color-bg-inverse) 18%, transparent); /* anillo suave alrededor del foco */

  /* Estados (funcionales, no de marca): los cuatro del DS 1.1, cada uno
     con su sólido, su -fondo (tinte) y su -texto (AA sobre --fondo). */
  --ok: var(--ds-color-success);
  --ok-fondo: var(--ds-color-success-soft);
  --ok-texto: var(--ds-color-success-fg);
  --aviso: var(--ds-color-warning);
  --aviso-fondo: var(--ds-color-warning-soft);
  --aviso-texto: var(--ds-color-warning-fg);
  --error: var(--ds-color-error);
  --error-fondo: var(--ds-color-error-soft);
  --error-texto: var(--ds-color-error-fg);
  --info: var(--ds-color-info);
  --info-fondo: var(--ds-color-info-soft);
  --info-texto: var(--ds-color-info-fg);
  /* Los nombres de antes, que siguen en uso: */
  --verde: var(--ok-texto);
  --rojo: var(--error-texto);
  --mal-fondo: var(--error-fondo);

  /* Etiquetas de etapa (--pastel-*, el texto encima siempre es --tinta) y
     colores del editor de Documentos (--bn-*: el catálogo cerrado de
     BlockNote, texto y fondo) son paletas de CONTENIDO, propias del CRM:
     su valor va en cada bloque de tema. */

  /* Cromo */
  --hover: var(--ds-color-bg-tertiary);  /* fila/celda bajo el ratón */
  /* --hover-acento (item de agenda bajo el ratón): propio, en cada tema */
  --sombra-rgb: 30, 30, 30; /* base de todas las sombras y velos */
  --sombra: 0 1px 3px rgba(var(--sombra-rgb), .08);
  --velo: var(--ds-color-bg-overlay); /* backdrop de diálogos */
  /* Sombras con nombre (CRM 3, 30/09): las cuatro que estilo.css escribía
     con rgba() suelto. Mismo valor; siguen a --sombra-rgb de cada tema. */
  --sombra-pin: 0 2px 3px rgba(var(--sombra-rgb), .4);       /* chincheta del mapa */
  --sombra-flotante: 0 12px 40px rgba(var(--sombra-rgb), .18);
  --sombra-lista: 0 12px 32px rgba(var(--sombra-rgb), .18);  /* lista del campo con lista */
  --sombra-menu: 0 4px 16px rgba(var(--sombra-rgb), .18);    /* menú corto */

  /* Radios (norma de la web: todo a 4px; tags a 2px) */
  --radio: var(--ds-radius-card);
  --radio-chip: var(--ds-radius-tag);

  /* Anchos de contenido. Un solo max-width global es el error clásico:
     una lista y un formulario no quieren el mismo ancho. */
  /* La barra izquierda de PC. 232 → 256 el 21/09 (3C): «Ideas contenido» y
     «Biblioteca de SOPs» se cortaban en el primer nivel del árbol. El número
     vive AQUÍ porque se escribe en DOS sitios (la rejilla del body y el
     degradado que pinta su columna) y cambiarlo en uno solo deja una
     costura de color. */
  --ancho-barra: 256px;

  /* Altura mínima de cualquier cosa que se pulse con el dedo. 44px es
     la yema de un adulto; por debajo se falla y se re-pulsa. */
  --dedo: var(--ds-spacing-touch);

  /* ── ESCALA TIPOGRÁFICA (v24) ────────────────────────────────────
     SEIS peldaños y ni uno más. Antes había 32 tamaños escritos a mano,
     nueve de ellos en una franja de 0,13 rem: sin escala no hay
     jerarquía, y eso es el «se ve pobre» de Asier (inspección 15/09).
     Salen del design system de la web; el display (64) y el h2 (48) del
     DS NO entran: son de marketing, aquí no hay portadas.
       caption → meta y etiquetas      small → cromo de app (tablas,
       tarjetas, chips, navegación, board)   body → prosa (documentos,
       visor, formularios)   lead → entradilla   h2 → título de bloque
       h1 → título de página */
  --t-caption: var(--ds-typography-size-caption);  /* 12 */
  --t-small:   var(--ds-typography-size-small);    /* 14 */
  --t-body:    var(--ds-typography-size-body);     /* 17 */
  --t-lead:    var(--ds-typography-size-lead);     /* 20 */
  --t-h2:      var(--ds-typography-size-h4);       /* 24 */
  --t-h1:      var(--ds-typography-size-h3);       /* 32 */
  --lh-caption: var(--ds-typography-line-height-caption);
  --lh-small:   var(--ds-typography-line-height-small);
  --lh-body:    var(--ds-typography-line-height-body);
  --lh-lead:    var(--ds-typography-line-height-lead);
  --lh-h2:      var(--ds-typography-line-height-h4);
  --lh-h1:      var(--ds-typography-line-height-h3);
  --track-h1:    var(--ds-typography-letter-spacing-h3);
  --track-h2:    var(--ds-typography-letter-spacing-h4);
  --track-label: var(--ds-typography-letter-spacing-label);

  /* ── ESCALA DE ESPACIO (v24) ─────────────────────────────────────
     La misma del DS: 8/16/24/32/48/64/80. Todo margin, padding y gap
     usa uno de estos, 0, o un valor de borde óptico (≤4px). Antes eran
     ~700 medidas a pelo con 6/9/11/14/18 conviviendo con 4/8/12/16:
     el «apretado aquí, flotando allá». */
  --e-2xs: var(--ds-spacing-2xs);  /* 8  */
  --e-xs:  var(--ds-spacing-xs);   /* 16 */
  --e-sm:  var(--ds-spacing-sm);   /* 24 */
  --e-md:  var(--ds-spacing-md);   /* 32 */
  --e-lg:  var(--ds-spacing-lg);   /* 48 */
  --e-xl:  var(--ds-spacing-xl);   /* 64 */
  --e-2xl: var(--ds-spacing-2xl);  /* 80 */

  /* Margen lateral de página: 16 en móvil (el bloque de PC lo sube al
     --ds-grid-page-x de la web, 48). */
  --pagina-x: var(--e-xs);
}

/* ── Tema claro (derivado aquí; la web no lo tiene) ──────────────
   El PRIMERO de los dos bloques del fichero con hex (el segundo es lo
   propio del CRM en oscuro, más abajo). Sobreescribe los --ds-color-*
   del DS con los valores claros del CRM de siempre (v3.1); los que la
   1.1 trae nuevos se derivan de la misma familia y van marcados «1.1».
   De los tres rojos de marca, -deep y -mid no se sobreescriben; accent
   SÍ (#b8443a, el --acento-fuerte de siempre): con texto blanco encima
   el E65742 del DS da 3,3:1, y el botón primario del DS (fase 0b) tiene
   que ser AA también en claro (26/09).
   Se aplica en las MISMAS condiciones que siempre (lo contrario del
   oscuro): data-tema="claro" pintado por el servidor, o sin elección y
   con el sistema en claro. Los dos bloques llevan los MISMOS valores. */
[data-tema="claro"] {
  --ds-color-bg:                #f7f7f7;
  --ds-color-bg-elevated:       #ffffff;
  --ds-color-bg-tertiary:       #efefef;
  --ds-color-bg-quaternary:     #e5e5e5;                 /* 1.1: seleccionado o pulsado */
  --ds-color-bg-overlay:        rgba(30, 30, 30, .35);
  --ds-color-bg-inverse:        #1e1e1e;                 /* 1.1: tooltip oscuro sobre claro */
  --ds-color-text:              #1e1e1e;                 /* el negro de marca, como texto */
  --ds-color-text-secondary:    #666666;
  --ds-color-text-tertiary:     #717171;                 /* 4,56:1 sobre --fondo, 4,88:1 sobre --tarjeta */
  --ds-color-text-placeholder:  #8c8c8c;                 /* 1.1: 3,4:1, no es texto que haya que leer */
  --ds-color-text-disabled:     #a8a8a8;                 /* 1.1: 2,4:1, a propósito por debajo de AA */
  --ds-color-text-on-accent:    #ffffff;                 /* sobre --acento-fuerte: 5,35:1 */
  --ds-color-text-inverse:      #ffffff;                 /* 1.1 */
  --ds-color-border:            #e2e2e2;
  --ds-color-border-subtle:     #ececec;                 /* 1.1 */
  --ds-color-border-strong:     #c8c8c8;                 /* 1.1 */
  --ds-color-accent:            #b8443a;                 /* 26/09: el sólido AA en claro (blanco encima 5,35:1); el DS trae E65742 (3,3:1) */
  --ds-color-accent-hover:      #a33b32;                 /* 1.1: en claro el hover OSCURECE el sólido (blanco 6,5:1) */
  --ds-color-accent-soft:       #fcedeb;
  --ds-color-apoyo:             #6a5bc4;                 /* 1.19.9: icono pervinca de la caja de identidad, 4,3:1 sobre su caja al 16 % (el DS trae #a99ef0, el del oscuro) */
  --ds-color-success:           #067647;                 /* 1.1: blanco encima 5,7:1 */
  --ds-color-success-fg:        #256b42;                 /* 6,0:1 */
  --ds-color-success-soft:      #d9f2e2;
  --ds-color-warning:           #b54708;                 /* 1.1: blanco encima 5,4:1 */
  --ds-color-warning-fg:        #9a5500;                 /* 1.1: 5,3:1 (el naranja de --bn-orange) */
  --ds-color-warning-soft:      #fdeecd;
  --ds-color-error:             #9e1b34;                 /* 1.9 (P10): carmín en claro, otra familia que el coral (tono 346° frente a 8°); blanco encima 7,9:1 */
  --ds-color-error-fg:          #9e1b34;                 /* 7,4:1 sobre --fondo */
  --ds-color-error-soft:        rgba(158, 27, 52, .10);
  --ds-color-error-hover:       #85162c;                 /* 1.9: el hover del sólido destructivo oscurece */
  --ds-color-text-on-error:     #ffffff;                 /* 1.9: blanco sobre el carmín en los dos temas */
  --ds-color-info:              #175cd3;                 /* 1.1: blanco encima 6,0:1 */
  --ds-color-info-fg:           #20609c;                 /* 1.1: 6,1:1 (el azul de --bn-blue) */
  --ds-color-info-soft:         #d9ecf7;
  /* Lo propio del CRM en claro */
  --sidebar: #f0f0f0;
  --acento-texto: var(--ds-color-text);  --acento-fuerte: var(--ds-color-bg-inverse);
  --pastel-lila: #e7e3f7; --pastel-ambar: #fdeecd; --pastel-cielo: #d9ecf7;
  --bn-gray: #5f5f5f;   --bn-brown: #7a4f3b;  --bn-red: #b8443a;
  --bn-orange: #9a5500; --bn-yellow: #7d6300; --bn-green: #256b42;
  --bn-blue: #20609c;   --bn-purple: #6f42a8; --bn-pink: #a83a6e;
  --bn-f-gray: #ececec;   --bn-f-brown: #f1e5df; --bn-f-red: #fcedeb;
  --bn-f-orange: #fdeecd; --bn-f-yellow: #f9f2d0; --bn-f-green: #d9f2e2;
  --bn-f-blue: #d9ecf7;   --bn-f-purple: #e7e3f7; --bn-f-pink: #f7e0eb;
  --hover-acento: var(--ds-color-bg-quaternary);
  /* chips de base (DS 1.2) en claro: los mismos pares AA de BlockNote */
  --ds-color-chip-gris: var(--bn-gray); --ds-color-chip-gris-soft: var(--bn-f-gray);
  --ds-color-chip-marron: var(--bn-brown); --ds-color-chip-marron-soft: var(--bn-f-brown);
  --ds-color-chip-naranja: var(--bn-orange); --ds-color-chip-naranja-soft: var(--bn-f-orange);
  --ds-color-chip-amarillo: var(--bn-yellow); --ds-color-chip-amarillo-soft: var(--bn-f-yellow);
  --ds-color-chip-verde: var(--bn-green); --ds-color-chip-verde-soft: var(--bn-f-green);
  --ds-color-chip-azul: var(--bn-blue); --ds-color-chip-azul-soft: var(--bn-f-blue);
  --ds-color-chip-morado: var(--bn-purple); --ds-color-chip-morado-soft: var(--bn-f-purple);
  --ds-color-chip-rosa: var(--bn-pink); --ds-color-chip-rosa-soft: var(--bn-f-pink);
  --ds-color-chip-rojo: var(--bn-red); --ds-color-chip-rojo-soft: var(--bn-f-red);
}
@media not all and (prefers-color-scheme: dark) {
  :root:not([data-tema="oscuro"]) {
    --ds-color-bg:                #f7f7f7;
    --ds-color-bg-elevated:       #ffffff;
    --ds-color-bg-tertiary:       #efefef;
    --ds-color-bg-quaternary:     #e5e5e5;
    --ds-color-bg-overlay:        rgba(30, 30, 30, .35);
    --ds-color-bg-inverse:        #1e1e1e;
    --ds-color-text:              #1e1e1e;
    --ds-color-text-secondary:    #666666;
    --ds-color-text-tertiary:     #717171;
    --ds-color-text-placeholder:  #8c8c8c;
    --ds-color-text-disabled:     #a8a8a8;
    --ds-color-text-on-accent:    #ffffff;
    --ds-color-text-inverse:      #ffffff;
    --ds-color-border:            #e2e2e2;
    --ds-color-border-subtle:     #ececec;
    --ds-color-border-strong:     #c8c8c8;
    --ds-color-accent:            #b8443a;
    --ds-color-accent-hover:      #a33b32;
    --ds-color-accent-soft:       #fcedeb;
    --ds-color-apoyo:             #6a5bc4;
    --ds-color-success:           #067647;
    --ds-color-success-fg:        #256b42;
    --ds-color-success-soft:      #d9f2e2;
    --ds-color-warning:           #b54708;
    --ds-color-warning-fg:        #9a5500;
    --ds-color-warning-soft:      #fdeecd;
    --ds-color-error:             #9e1b34;
    --ds-color-error-fg:          #9e1b34;
    --ds-color-error-soft:        rgba(158, 27, 52, .10);
    --ds-color-error-hover:       #85162c;
    --ds-color-text-on-error:     #ffffff;
    --ds-color-info:              #175cd3;
    --ds-color-info-fg:           #20609c;
    --ds-color-info-soft:         #d9ecf7;
    /* Lo propio del CRM en claro */
    --sidebar: #f0f0f0;
    --acento-texto: var(--ds-color-text);  --acento-fuerte: var(--ds-color-bg-inverse);
    --pastel-lila: #e7e3f7; --pastel-ambar: #fdeecd; --pastel-cielo: #d9ecf7;
    --bn-gray: #5f5f5f;   --bn-brown: #7a4f3b;  --bn-red: #b8443a;
    --bn-orange: #9a5500; --bn-yellow: #7d6300; --bn-green: #256b42;
    --bn-blue: #20609c;   --bn-purple: #6f42a8; --bn-pink: #a83a6e;
    --bn-f-gray: #ececec;   --bn-f-brown: #f1e5df; --bn-f-red: #fcedeb;
    --bn-f-orange: #fdeecd; --bn-f-yellow: #f9f2d0; --bn-f-green: #d9f2e2;
    --bn-f-blue: #d9ecf7;   --bn-f-purple: #e7e3f7; --bn-f-pink: #f7e0eb;
    --hover-acento: var(--ds-color-bg-quaternary);
    /* chips de base (DS 1.2) en claro: los mismos pares AA de BlockNote */
    --ds-color-chip-gris: var(--bn-gray); --ds-color-chip-gris-soft: var(--bn-f-gray);
    --ds-color-chip-marron: var(--bn-brown); --ds-color-chip-marron-soft: var(--bn-f-brown);
    --ds-color-chip-naranja: var(--bn-orange); --ds-color-chip-naranja-soft: var(--bn-f-orange);
    --ds-color-chip-amarillo: var(--bn-yellow); --ds-color-chip-amarillo-soft: var(--bn-f-yellow);
    --ds-color-chip-verde: var(--bn-green); --ds-color-chip-verde-soft: var(--bn-f-green);
    --ds-color-chip-azul: var(--bn-blue); --ds-color-chip-azul-soft: var(--bn-f-blue);
    --ds-color-chip-morado: var(--bn-purple); --ds-color-chip-morado-soft: var(--bn-f-purple);
    --ds-color-chip-rosa: var(--bn-pink); --ds-color-chip-rosa-soft: var(--bn-f-pink);
    --ds-color-chip-rojo: var(--bn-red); --ds-color-chip-rojo-soft: var(--bn-f-red);
  }
}
/* ── fin del tema claro ── */

/* ── Tema oscuro (el OFICIAL de la marca) ────────────────────────
   Los --ds-color-* de tokens.css tal cual: aquí no se redefine ninguno.
   El botón sólido sigue la regla auditada de Yaz: NEGRO sobre el rojo
   claro E65742. Se activa por elección explícita (data-tema en <html>,
   pintado por el servidor desde la cookie crm_tema: cero flash) o por
   preferencia del sistema cuando no hay elección. Los dos bloques
   llevan los MISMOS valores: solo lo propio del CRM que el DS no tiene.
   Los hex de aquí son el SEGUNDO bloque de hex del fichero: PROPIOS DEL
   CRM SIN ROL EN EL DS (barra lateral, acento de texto, tres pastel, la
   paleta cerrada del editor y el hover de agenda). La sonda de hex de la
   fase 5 cuenta fuera de los dos bloques (claro y este). --acento-texto
   es un hueco real del DS (falta un accent-fg legible como texto en
   oscuro): propuesto a Yaz para la 1.1.1 (26/09). */
[data-tema="oscuro"] {
  color-scheme: dark;
  --sidebar: #181818;
  --acento-texto: var(--ds-color-text);
  --halo: color-mix(in srgb, var(--ds-color-bg-inverse) 30%, transparent);
  --pastel-lila: #3b3550; --pastel-ambar: #4a3c22; --pastel-cielo: #243b4a;
  --bn-gray: #b8b8b8;   --bn-brown: #d1a38e;  --bn-red: #f2a196;
  --bn-orange: #ffb870; --bn-yellow: #e0cb6a; --bn-green: #7fd6a4;
  --bn-blue: #8ec2f0;   --bn-purple: #c3a3ee; --bn-pink: #f0a3c8;
  --bn-f-gray: #3a3a3a;   --bn-f-brown: #46372f; --bn-f-red: #4b2b25;
  --bn-f-orange: #4a3c22; --bn-f-yellow: #47401f; --bn-f-green: #1f3a2b;
  --bn-f-blue: #243b4a;   --bn-f-purple: #3b3550; --bn-f-pink: #472a38;
  --hover-acento: var(--ds-color-bg-quaternary);
  --sombra-rgb: 0, 0, 0;
  --sombra: 0 1px 3px rgba(var(--sombra-rgb), .3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --sidebar: #181818;
    --acento-texto: var(--ds-color-text);
    --halo: color-mix(in srgb, var(--ds-color-bg-inverse) 30%, transparent);
    --pastel-lila: #3b3550; --pastel-ambar: #4a3c22; --pastel-cielo: #243b4a;
    --bn-gray: #b8b8b8;   --bn-brown: #d1a38e;  --bn-red: #f2a196;
    --bn-orange: #ffb870; --bn-yellow: #e0cb6a; --bn-green: #7fd6a4;
    --bn-blue: #8ec2f0;   --bn-purple: #c3a3ee; --bn-pink: #f0a3c8;
    --bn-f-gray: #3a3a3a;   --bn-f-brown: #46372f; --bn-f-red: #4b2b25;
    --bn-f-orange: #4a3c22; --bn-f-yellow: #47401f; --bn-f-green: #1f3a2b;
    --bn-f-blue: #243b4a;   --bn-f-purple: #3b3550; --bn-f-pink: #472a38;
    --hover-acento: var(--ds-color-bg-quaternary);
    --sombra-rgb: 0, 0, 0;
    --sombra: 0 1px 3px rgba(var(--sombra-rgb), .3);
  }
}
/* ── fin del tema oscuro ── */