/* ─────────────────────────────────────────────────────────────────────────
   COPIA LITERAL de obras-gestion/plugin/app-src/src/styles/tokens.css (20/09/2026).
   Es el sistema de diseño de la app de obras. NO se edita aquí: si hay que
   cambiar algo, se cambia allí y se vuelve a copiar, o las dos apps se separan.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --qw-bg: #ffffff;
  --qw-surface: #ffffff;
  --qw-surface-elev: #ffffff;

  /* 30% verde Quewood — brand-locked (extraído de qwood.es CTA).
     Preferencia del owner: el verde brillante de marca #1bcf17 se usa TAL CUAL
     también en botones/CTA con texto blanco, priorizando la identidad de marca
     sobre el contraste AA. green-deep == green a propósito. */
  --qw-green: #1bcf17;
  --qw-green-deep: #1bcf17;
  --qw-green-soft: rgba(27, 207, 23, 0.08);
  --qw-green-rgb: 27, 207, 23;
  --qw-green-on: #fff;
  /* Alias backward-compat */
  --qw-green-dark: var(--qw-green-deep);

  /* 10% celeste DE MARCA — #0ea5e9, el MISMO de qwood.es/quewood.es/ecoobra.es
     (F3 producto-general, Camilo 05/09: «el mismo celeste»). El #4da8d4 que
     hubo aquí era una variante lavada que separaba la app de la familia; el
     color es lo primero que emparenta las webs de la casa y no se «mejora».
     El «celeste fuerte» (deep) es sky-700 #0369a1: texto/relleno con AA sobre
     blanco (5,9:1) y blanco encima legible (7,7:1). */
  --qw-celeste: #0ea5e9;
  --qw-celeste-deep: #0369a1;
  --qw-celeste-soft: rgba(14, 165, 233, 0.12);
  --qw-celeste-rgb: 14, 165, 233;
  /* Relleno celeste de BOTÓN (F4, Camilo: «este botón es celeste»): los
     botones celestes van en el CELESTE DE MARCA con texto blanco — la misma
     decisión de identidad que el CTA verde (marca por encima de AA,
     brand-locked). El «fuerte» (--qw-celeste-deep) queda para TEXTO sobre
     blanco o tinte, no para rellenos de botón. En alto contraste el relleno
     SÍ se oscurece (ahí manda la legibilidad, no la marca). */
  --qw-celeste-fill: var(--qw-celeste);
  --qw-celeste-fill-on: #fff;
  /* Texto SOBRE celeste-deep relleno, igual que --qw-green-on con el verde. Faltaba, y
     por eso las acciones en celeste solo podían pintarse como tinte pálido: un relleno
     con blanco fijo se volvía ilegible en cuanto el tema aclaraba el fondo. Se redefine
     en los dos bloques donde celeste-deep pasa a ser claro. */
  --qw-celeste-on: #fff;

  /* tipografía */
  --qw-text: #1a1f1a;
  --qw-text-muted: #6b7280;
  /* Faint oscurecido para que el texto auxiliar informativo (hints, "sin consumo")
     cumpla AA: #9ca3af daba 2.54:1; #6b7280 ≈ 4.83:1 sobre blanco. */
  --qw-text-faint: #6b7280;

  /* estructura — F3 producto-general (05/09): FUERA LA REGLA DE GRISES.
     La estética de la casa es blanco + celeste/verde de marca + SOMBRA NEGRA
     DIFUMINADA para el contraste de bloques; los separadores dejan de ser
     grises y pasan a línea TINTADA del celeste de marca (mismo peso visual
     que los grises que sustituyen — solo cambia el tinte). Estos 3 tokens
     mueven ~260 declaraciones de borde de golpe; los ~28 fallbacks literales
     y las 106 box-shadow sueltas quedan para la F3b manual. */
  --qw-border: rgba(14, 165, 233, 0.18);
  --qw-border-strong: rgba(14, 165, 233, 0.42);
  /* Alias borde para inputs (usado en estilos inline de Facturacion). */
  --qw-line: var(--qw-border);
  /* Superficie tenue para cabeceras/etiquetas neutras (GanttObra .labelGeneral). */
  --qw-bg-muted: rgba(14, 165, 233, 0.07);
  /* Sombras: negras y DIFUMINADAS, con presencia (doctrina quewood — ni velo
     gris tímido ni bloque duro). --qw-card-shadow es la palanca: 260 usos. */
  --qw-shadow-sm: 0 2px 8px rgba(0,0,0,0.10);
  --qw-shadow-md: 0 6px 18px rgba(0,0,0,0.14);
  --qw-shadow-lg: 0 14px 36px rgba(0,0,0,0.20);
  --qw-card-shadow: 0 4px 16px rgba(0,0,0,0.14);
  /* Scrim para overlays sin ::backdrop nativo (Modal .fallbackOpen: navegadores
     sin <dialog>.showModal(), p. ej. Safari iOS <15.4). Mismo tono que
     .dialog::backdrop en Modal.module.css para que el fallback no se note
     distinto del camino nativo. Task 6 v0.73 (2026-08-31). */
  --qw-scrim: rgba(12, 22, 18, 0.6);
  --qw-radius-sm: 6px;
  --qw-radius-md: 10px;
  --qw-radius-lg: 16px;
  --qw-radius-pill: 999px;

  /* estados */
  /* Rojo de texto oscurecido (red-700) para AA sobre danger-soft (chip "Bloqueada",
     desviación): #dc2626 daba 4.28:1; #b91c1c ≈ 5.9:1. El fondo soft se mantiene. */
  --qw-danger: #b91c1c;
  --qw-danger-soft: rgba(220, 38, 38, 0.08);
  /* Ámbar de TEXTO oscurecido (amber-700) para cumplir WCAG AA sobre warning-soft
     (#d97706 daba 2.86:1; #b45309 ≈ 4.9:1). El fondo soft conserva el tono claro. */
  --qw-warning: #b45309;
  --qw-warning-soft: rgba(217, 119, 6, 0.1);
  /* Panel ámbar de «informativo» (retenciones, reclamaciones, badges de parcial).
     Estos cinco valores estaban COPIADOS LITERALES en 23 sitios de 4 ficheros, así que
     el panel se quedaba clarito en modo oscuro: un rectángulo blanco-amarillo en medio
     de una pantalla oscura. Aquí abajo tienen su versión de tema oscuro. */
  --qw-warning-bg: #fef3c7;          /* fondo del panel */
  --qw-warning-ink: #78350f;         /* texto principal sobre el panel */
  --qw-warning-ink-soft: #92400e;    /* texto secundario sobre el panel */
  --qw-warning-line: rgba(180, 83, 9, 0.15);  /* separadores dentro del panel */
  /* success: usa el verde profundo (AA con texto blanco). Para acento sin texto
     encima usar --qw-green directamente. */
  --qw-success: var(--qw-green-deep);

  /* tipografía sizing */
  --qw-font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --qw-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --qw-fs-xs: 12px;
  --qw-fs-sm: 14px;
  --qw-fs-base: 16px;
  --qw-fs-lg: 18px;
  --qw-fs-xl: 22px;
  --qw-fs-2xl: 28px;
  --qw-fs-3xl: 36px;
  --qw-lh-tight: 1.2;
  --qw-lh-base: 1.5;
  --qw-lh-relaxed: 1.65;

  /* spacing */
  --qw-sp-1: 4px;
  --qw-sp-2: 8px;
  --qw-sp-3: 12px;
  --qw-sp-4: 16px;
  --qw-sp-5: 20px;
  --qw-sp-6: 24px;
  --qw-sp-8: 32px;
  --qw-sp-10: 40px;
  --qw-sp-12: 48px;
  --qw-sp-16: 64px;

  /* touch targets */
  --qw-touch: 44px;

  /* Altura a despejar por encima de la BottomNav para que una barra fija no la tape.
     NO es la altura del nav (70px): la pestaña «Jornada» se pinta como un círculo
     elevado que SOBRESALE 22px por encima del borde superior del nav, y taparlo
     inutiliza ese botón. 70 + 22 = 92. Medido en navegador el 26/08/2026 en los tres
     modos de tamaño de fuente; el círculo sobresale 22px en los tres.
     Lo consumen StickyBar y cualquier barra fija que conviva con la nav. */
  --qw-bottomnav-clear: 92px;

  /* Altura de la StickyBar en pantallas SIN BottomNav (`flush`, ej. /app/parte/*):
     el botón "Guardar/Actualizar jornada" a ancho completo + el padding vertical
     de la barra (.bar en StickyBar.module.css). NO confundir con
     --qw-bottomnav-clear (ese despeja el círculo elevado del BottomNav, un
     concepto distinto). Medido en navegador el 03/09/2026: 84px reales en los
     tres modos de tamaño de fuente (el botón de guardar tiene un min-height
     propio de 60px que no escala con --qw-touch — StickyBar.module.css/
     ParteForm.module.css .saveJornadaBtn). 96 = 84 + 12 de margen; mismo
     criterio de buffer que --qw-bottomnav-clear. Lo consume `.qw-main--flush`
     (padding-bottom, protege el final real del documento) y `.workerRow`
     (scroll-margin-bottom, protege posiciones intermedias: la investigación de
     «+ Añadir tramo» de v0.87 encontró que abrir el selector de trabajadores
     puede reposicionar el scroll de forma imprevisible — dvh/showModal en
     móvil — dejando la fila recién añadida bajo la barra sin que el usuario
     haya hecho scroll). */
  --qw-stickybar-h: 96px;

  /* Altura de la AppHeader sticky, SIN la safe-area (su padding-top ya la suma aparte,
     así que quien se pegue debajo debe hacer calc(… + env(safe-area-inset-top))).
     No cambia con el modo de tamaño de fuente: su contenido es logo e iconos de tamaño
     fijo, no texto. Medido en navegador el 26/08/2026: 68px en los tres modos. */
  --qw-appheader-h: 68px;

  /* z-index scale */
  --qw-z-base: 1;
  --qw-z-sticky: 100;
  --qw-z-overlay: 1000;
  --qw-z-toast: 2000;

  /* Capas fuera de la escala de 4 niveles de arriba. Task 6 v0.73 (2026-08-31):
     estos 5 números estaban SUELTOS como magic numbers en sus module.css
     (BottomNav/OfflineBanner/OnboardingTour) — aquí solo se han NOMBRADO y
     centralizado, con el MISMO valor numérico que tenían: no cambia ningún
     orden de pintado existente entre banner/tour/quickOverlay entre sí. */
  --qw-z-hint: 60;             /* BottomNav .fabHint (coach-mark del FAB): por debajo de --qw-z-sticky, no se solapan en pantalla */
  --qw-z-banner: 8000;         /* OfflineBanner .pill: deliberadamente por ENCIMA de --qw-z-overlay — el aviso de conexión debe verse aunque haya un modal abierto */
  --qw-z-tour-spotlight: 8999; /* OnboardingTour .spotlight (ring de foco), justo debajo del overlay del propio tour */
  --qw-z-tour: 9000;           /* OnboardingTour .overlay (scrim + sheet) */
  --qw-z-nav-overlay: 9100;    /* BottomNav .quickOverlay (acciones rápidas del long-press) — por encima del tour */

  /* motion */
  --qw-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --qw-duration: 200ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --qw-duration: 0ms;
  }
}

/* DARK MODE — sólo overrides de color, brand verde + celeste mantienen identidad */
[data-theme="dark"] {
  --qw-bg: #0f1411;
  --qw-surface: #161d18;
  --qw-surface-elev: #1b231e;

  --qw-green-soft: rgba(27, 207, 23, 0.16);

  /* Celeste se ajusta para que destaque sobre dark — a partir del celeste de
     MARCA #0ea5e9 (F3): aclarado a sky-400 para fondo oscuro; deep = marca. */
  --qw-celeste: #38bdf8;
  --qw-celeste-deep: #0ea5e9;
  --qw-celeste-soft: rgba(56, 189, 248, 0.18);
  --qw-celeste-rgb: 56, 189, 248;
  /* Aquí celeste-deep se aclara (#0ea5e9): blanco encima da ~2,8:1 (ilegible) y
     negro ~7:1. Sin este override, un relleno celeste heredaría el #fff del :root. */
  --qw-celeste-on: #000;
  /* El relleno de botón hereda el celeste dark (#38bdf8) → texto negro. */
  --qw-celeste-fill-on: #000;

  --qw-text: #e7ece8;
  --qw-text-muted: #9ba6a0;
  --qw-text-faint: #6b766f;

  /* F3: también en oscuro los separadores dejan el gris y van tintados. */
  --qw-border: rgba(56, 189, 248, 0.20);
  --qw-border-strong: rgba(56, 189, 248, 0.38);
  /* --qw-line referencia a --qw-border, hereda automáticamente. */
  --qw-bg-muted: rgba(56, 189, 248, 0.08);
  --qw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --qw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --qw-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);

  --qw-danger: #ef4f4f;
  --qw-danger-soft: rgba(239, 79, 79, 0.16);
  --qw-warning: #f3a35c;
  --qw-warning-soft: rgba(243, 163, 92, 0.16);
  /* El panel ámbar en oscuro: tinte sobre la superficie, no un bloque claro. */
  --qw-warning-bg: rgba(243, 163, 92, 0.14);
  --qw-warning-ink: #f7d9b8;
  --qw-warning-ink-soft: #e0b78e;
  --qw-warning-line: rgba(243, 163, 92, 0.22);
}

/* Background root también cambia para tab bar / SSR fallback */
[data-theme="dark"] body {
  background: var(--qw-bg);
  color: var(--qw-text);
}

/* ============================================
   ACCESIBILIDAD — texto grande + alto contraste
   ============================================ */

/* TAMAÑO TEXTO — escala global para usuarios senior */
[data-font-size="large"] {
  --qw-fs-xs: 14px;
  --qw-fs-sm: 16px;
  --qw-fs-base: 19px;
  --qw-fs-lg: 22px;
  --qw-fs-xl: 26px;
  --qw-fs-2xl: 32px;
  --qw-fs-3xl: 40px;
  --qw-touch: 52px;
  --qw-bottomnav-clear: 95px;   /* nav 73px + 22px que sobresale el círculo */
}

[data-font-size="xl"] {
  --qw-fs-xs: 16px;
  --qw-fs-sm: 18px;
  --qw-fs-base: 22px;
  --qw-fs-lg: 26px;
  --qw-fs-xl: 32px;
  --qw-fs-2xl: 40px;
  --qw-fs-3xl: 48px;
  --qw-touch: 60px;
  --qw-bottomnav-clear: 98px;   /* nav 76px + 22px que sobresale el círculo */
  /* La StickyBar en sí mide igual (84px, el botón de guardar no escala con
     --qw-touch — ver comentario en :root), pero se mantiene el mismo buffer
     extra que ya tenía `.qw-main--flush` en modo xl antes de tokenizar esto
     (112px), por si el texto a 22px/32px llega a envolver a dos líneas en
     pantallas muy estrechas. */
  --qw-stickybar-h: 112px;
}

/* Aplicar la escala al root para que rem/em también escalen */
[data-font-size="large"] html,
[data-font-size="large"] body {
  font-size: 19px;
}
[data-font-size="xl"] html,
[data-font-size="xl"] body {
  font-size: 22px;
}

/* ALTO CONTRASTE — para usuarios con visión reducida o pantallas con reflejo */
[data-contrast="high"] {
  --qw-text: #000000;
  --qw-text-muted: #1a1a1a;
  --qw-text-faint: #333333;
  --qw-border: #000000;
  --qw-border-strong: #000000;
  --qw-green: #006b00;
  --qw-green-deep: #004d00;
  --qw-celeste-deep: #003d6b;
  /* En alto contraste el relleno celeste de botón se oscurece (blanco 10,4:1). */
  --qw-celeste-fill: #003d6b;
  --qw-bg: #ffffff;
  --qw-surface: #ffffff;
  --qw-surface-elev: #ffffff;
}

[data-contrast="high"][data-theme="dark"] {
  --qw-text: #ffffff;
  --qw-text-muted: #f0f0f0;
  --qw-text-faint: #cccccc;
  --qw-border: #ffffff;
  --qw-border-strong: #ffffff;
  --qw-green: #4ade80;
  --qw-green-deep: #86efac;
  /* --qw-green-on hereda #fff del :root en TODOS los demás bloques (incluida
     la HC-light de arriba, donde green-deep #004d00 sí quiere texto blanco).
     Este es el único bloque donde el fondo se vuelve claro (#86efac): texto
     blanco ahí da ~1.3:1 (ilegible). Negro sobre #86efac da ~15:1. */
  --qw-green-on: #000;
  --qw-celeste: #93c5fd;
  --qw-celeste-deep: #bfdbfe;
  /* Mismo caso que el verde: aquí celeste-deep es casi blanco (#bfdbfe). */
  --qw-celeste-on: #000;
  /* HC-dark: relleno hereda #93c5fd (claro) → texto negro. */
  --qw-celeste-fill: var(--qw-celeste);
  --qw-celeste-fill-on: #000;
  --qw-bg: #000000;
  --qw-surface: #0a0a0a;
  --qw-surface-elev: #141414;
}

/* Alto contraste = bordes más gruesos y outlines focus más visibles */
[data-contrast="high"] button,
[data-contrast="high"] input,
[data-contrast="high"] select,
[data-contrast="high"] textarea,
[data-contrast="high"] a {
  border-width: 2px;
}

[data-contrast="high"] *:focus-visible {
  outline: 3px solid currentColor !important;
  outline-offset: 2px !important;
}

/* Theme color meta (browser chrome) — overridden via JS at runtime if needed */