/* JobDock — tokens "Hi-Vis on Graphite". Contrastes medidos en docs/superpowers/specs/2026-10-07-frontend-direccion-design.md */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/InterVariable.woff2') format('woff2');
}

:root {
  --ink: 21 23 26;          /* #15171A texto y estructura */
  --ink-2: 30 33 37;        /* #1E2125 superficies sobre ink */
  --ink-3: 44 48 54;        /* #2C3036 bordes sobre ink */
  --paper: 247 246 242;     /* #F7F6F2 fondo de la app */
  --card: 255 255 255;
  --muted: 91 97 104;       /* #5B6168 texto secundario */
  --note: 255 247 225;      /* ronda 18: fondo de "Office notes" (ámbar muy claro) */
  --line: 176 173 166;      /* #B0ADA6 bordes. Ronda 13: 2,07:1 contra el papel y 2,24:1 contra la tarjeta (medido; ronda 10
                               #C8C5BE daba 1,58:1, y #E4E2DC antes 1,19:1): al sol la tarjeta se separa del fondo.
                               Decisión (ronda 15): no se lleva a 3:1. WCAG 1.4.11 pide 3:1 a los límites que hacen falta
                               para IDENTIFICAR un componente; una tarjeta o un resumen se identifican por su texto y su
                               chevron, el borde sólo agrupa. 2,07:1 (claro, contra el papel) y 2,18:1 (oscuro, contra la
                               tarjeta) bastan para agrupar sin que la pantalla quede rayada. */
  --hivis: 255 107 26;      /* #FF6B1A SOLO fondo de acción principal / atención; texto encima = ink */
  --hivis-ink: 194 65 12;   /* #C2410C naranja como texto sobre claro */
  --hivis-hover: 255 131 64; /* #FF8340 hover: aclara (ink encima 7,33:1); brightness-95 oscurecía a 5,72:1 */
  --signal: 255 196 0;      /* #FFC400 avisos */
  --ok: 21 128 61;          /* #15803D */
  --bad: 185 28 28;         /* #B91C1C */
  --on-ink: 243 242 238;    /* #F3F2EE texto sobre ink */
  --on-ink-muted: 167 172 179; /* #A7ACB3 texto secundario sobre ink */
}

/* Foco visible y feedback de toque en la UI rediseñada (.jd). Sobre grafito el anillo es hi-vis; sobre claro, ink. */
.jd :is(a, button, summary):focus-visible { outline: 3px solid rgb(var(--ink)); outline-offset: 3px; }
/* Desplegables dibujados como los demás campos (sin el chevron nativo, que delataba un control del sistema). */
.jd select.appearance-none { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6168' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 1.25rem; padding-right: 2.75rem; }
/* Un desplegable sin elegir se ve como placeholder (gris), no como un valor ya cargado. */
.jd select:has(option[value=""]:checked) { color: rgb(var(--muted)); }
/* Campos, radios y casillas: el mismo anillo (antes sólo cambiaba el borde, o quedaba el del navegador). */
.jd :is(input, select, textarea):focus-visible { outline: 3px solid rgb(var(--ink)); outline-offset: 2px; }
.jd [role=tabpanel]:focus-visible { outline: 3px solid rgb(var(--ink)); outline-offset: 3px; }
.jd .bg-ink :is(a, button, summary):focus-visible, .jd header :is(a, button):focus-visible { outline-color: rgb(var(--hivis)); }
@media (prefers-reduced-motion: no-preference) { .jd button:active, .jd a.rounded-xl:active { transform: scale(.98); } }
.jd button { transition: transform 120ms ease, filter 160ms ease, background-color 160ms ease, color 160ms ease; }

@media (prefers-reduced-motion: reduce) {
  .jd-anim, .jd-anim * { animation: none !important; transition: none !important; }
}

/* Landing: las anclas del nav dejan el título visible bajo el header fijo (antes aterrizaba tapado).
   Scroll suave sólo acá: en la app, el scrollTo(0,0) entre pantallas tiene que ser instantáneo.
   Las secciones ya traen 80–112 px de aire arriba: el margen sólo compensa la altura del header (≤ 72 px). */
@media (prefers-reduced-motion: no-preference) { html:has(.jd-landing) { scroll-behavior: smooth; } }
/* Movimiento y navegación medidos en 8 sitios de referencia: docs/design/2026-10-07-movimiento-y-navegacion.md.
   El offset es la altura REAL del header (la mide el JS); sirve también para que el header no tape el foco con Tab. */
html:has(.jd-landing) { scroll-padding-top: var(--jd-header-h, 72px); }
/* Al saltar, la etiqueta de la sección queda ~36 px bajo el header: se descuenta el padding superior de la
   sección (py-20 / lg:py-28). Antes quedaban 95–128 px de franja vacía. */
.jd-landing section[id] { scroll-margin-top: calc(36px - 5rem); }
@media (min-width: 1024px) { .jd-landing section[id] { scroll-margin-top: calc(36px - 7rem); } }
/* Longhand a propósito: el shorthand `text-wrap: pretty` también resetea el modo a "wrap" y anulaba el
   `truncate` (nowrap) de la maqueta del hero, partiendo "31 / Hope St" a 1024. */
.jd-landing p, .jd-landing li { text-wrap-style: pretty; }
/* El menú lleva el foco a la sección elegida (tabindex=-1): sin anillo, porque no es un control. */
.jd-landing section[tabindex="-1"]:focus { outline: none; }
.jd .bg-hivis:hover { background-color: rgb(var(--hivis-hover)); }
.jd-landing > header { transition: border-color 160ms ease, background-color 160ms ease; }
.jd-landing > header[data-scrolled] { border-color: rgb(var(--on-ink) / .16); background-color: rgb(var(--ink)); }
/* Sección activa: texto pleno y barra de 2 px (los inactivos #A7ACB3 siguen sobre 7,8:1). */
.jd-landing nav a[data-spy] { position: relative; transition: color 160ms ease; }
.jd-landing nav a[data-spy][aria-current="location"] { color: rgb(var(--on-ink)); }
.jd-landing nav a[data-spy]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transition: transform 200ms cubic-bezier(.33,1,.68,1); }
.jd-landing nav a[data-spy][aria-current="location"]::after { transform: scaleX(1); }
/* Entrada al hacer scroll: sólo títulos y tarjetas de How/Features/Pricing, nunca el hero; una vez; sin blur.
   El estado oculto existe sólo si el JS puso html.jd-reveal (y el usuario no pidió menos movimiento). */
html.jd-reveal [data-reveal] { transition: opacity 400ms cubic-bezier(.33,1,.68,1), transform 400ms cubic-bezier(.33,1,.68,1); transition-delay: calc(var(--i, 0) * 60ms); }
html.jd-reveal [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(8px); }
/* Las tarjetas no son enlaces: sin hover (no prometer un clic que no existe). La flecha de los CTA se corre 4 px
   (Stripe 6, Raycast 2), sólo con mouse real y sin movimiento reducido. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .jd .jd-arrow { transition: transform 200ms cubic-bezier(.33,1,.68,1); }
  .jd :is(button, a):hover > .jd-arrow { transform: translateX(4px); }
}
/* Menú abierto: el fondo no se desplaza (iOS ignora el inert del modal para el scroll táctil). */
html:has(.jd-menu[open]) { overflow: hidden; }
/* Imprimir nunca deja contenido invisible a medio revelar. */
@media print { [data-reveal] { opacity: 1 !important; transform: none !important; } }
/* Menú del celular: <dialog> nativo (Esc y foco contenido gratis), entra con fade + 8 px. */
.jd-menu[open] { animation: jd-menu-in 220ms cubic-bezier(.33,1,.68,1); }
@keyframes jd-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .jd-menu[open] { animation: none; } .jd-landing nav a[data-spy]::after { transition: none; } }

/* Vistas públicas (landing, registro, login): fondo de marca y sin el hueco inferior de la barra de la app. */
body.public-view { background: rgb(var(--paper)); padding-bottom: 0; }
body.public-view #app { background: transparent; }

/* App (no la landing): el header fijo de Home (~68 px) y la barra inferior no tapan lo que recibe foco o se desplaza a la vista (WCAG 2.4.11). */
html:not(:has(.jd-landing)) { background: rgb(var(--paper)); scroll-padding-top: 76px; scroll-padding-bottom: 88px; }

/* Modo oscuro de las pantallas con tokens: superficies grafito, texto claro. bg-ink sigue siendo la superficie
   más oscura (header); un botón bg-ink (chip activo, CTA) pasa a claro con texto oscuro; sobre hi-vis el texto
   siempre es oscuro. Sólo en la app: la landing no cambia con el modo. */
/* Ronda 13: --line oscuro 80 86 94 = 2,18:1 contra la tarjeta y 2,49:1 contra el papel (medido), a la par del claro
   (2,24:1 contra la tarjeta). Ronda 11: 66 71 79 = 1,73:1; antes 52 57 64 = 1,39:1. */
html.dark body:not(.public-view) { --note: 46 40 26; --paper: 18 20 23; --card: 30 33 37; --line: 80 86 94; --muted: 167 172 179; --ink: 243 242 238; }
html.dark body:not(.public-view) :is(header, [data-ink-band]).bg-ink { background-color: rgb(11 12 14); } /* + la franja de la factura */
html.dark body:not(.public-view) .jd :is(a, button, [data-line]).bg-ink { color: rgb(21 23 26); } /* + la marca (SYL/SB) de las filas de Jobs: daba 1:1 */
/* Rojo de error/vencido en oscuro: #B91C1C sobre la tarjeta grafito daba ~2,5:1; #F87171 da ~6:1 (WCAG 1.4.3). */
html.dark body:not(.public-view) { --bad: 248 113 113; --ok: 74 222 128; }
/* Píldoras de estado (STATUS.tone: fondo -50, texto -900, borde -300) en oscuro: tinte translúcido y texto claro, en
   vez de parches crema que encandilaban sobre grafito (juez visual, 2026-10-08). */
html.dark body:not(.public-view) .jd .bg-amber-50 { background-color: rgb(245 158 11 / .16); }
html.dark body:not(.public-view) .jd .text-amber-900 { color: rgb(252 211 77); }
html.dark body:not(.public-view) .jd .ring-amber-300 { --tw-ring-color: rgb(245 158 11 / .5); }
html.dark body:not(.public-view) .jd .bg-blue-50 { background-color: rgb(59 130 246 / .18); }
html.dark body:not(.public-view) .jd .text-blue-900 { color: rgb(147 197 253); }
html.dark body:not(.public-view) .jd .ring-blue-300 { --tw-ring-color: rgb(59 130 246 / .5); }
html.dark body:not(.public-view) .jd .bg-violet-50 { background-color: rgb(139 92 246 / .2); }
html.dark body:not(.public-view) .jd .text-violet-900 { color: rgb(196 181 253); }
html.dark body:not(.public-view) .jd .ring-violet-300 { --tw-ring-color: rgb(139 92 246 / .5); }
html.dark body:not(.public-view) .jd .bg-green-50 { background-color: rgb(34 197 94 / .16); }
html.dark body:not(.public-view) .jd .text-green-900 { color: rgb(134 239 172); }
html.dark body:not(.public-view) .jd .ring-green-300 { --tw-ring-color: rgb(34 197 94 / .5); }
html.dark body:not(.public-view) .jd .bg-red-50 { background-color: rgb(239 68 68 / .16); }
html.dark body:not(.public-view) .jd .text-red-900 { color: rgb(252 165 165); }
html.dark body:not(.public-view) .jd .ring-red-300 { --tw-ring-color: rgb(239 68 68 / .5); }
/* Ronda 5: el aviso de "reasignado al cerrar" (borde) y la línea de qué se tocó del rechazo sin señal. */
html.dark body:not(.public-view) .jd .border-red-300 { border-color: rgb(239 68 68 / .5); }
html.dark body:not(.public-view) .jd .text-red-800 { color: rgb(252 165 165); }
html.dark body:not(.public-view) .jd .bg-hivis { color: rgb(21 23 26); }
html.dark:not(:has(.jd-landing)) { background: rgb(18 20 23); }
/* Ronda 14: línea inferior con sombra interior (no borde): con borde, en oscuro la cabecera medía 77 px y en claro 76. */
html.dark body:not(.public-view) header.bg-ink { box-shadow: inset 0 -1px 0 rgb(52 57 64); }
/* Ficha con acción fija: lo enfocado no queda bajo el botón (≈148 px sobre el borde inferior). */
html:has([data-sticky-cta]) { scroll-padding-bottom: 156px; }
@media (min-width: 768px) { html:has([data-sticky-cta]) { scroll-padding-bottom: 88px; } }
/* Por suburbio: el título fijo del grupo (≈36 px) se suma al header. */
html:has(#jobList section h3.sticky) { scroll-padding-top: 112px; }
/* Hoja del equipo (#k=, vista pública): sigue el modo oscuro del teléfono, con los mismos tokens que la app. */
html.dark body:has(.jd-crew) { --paper: 18 20 23; --card: 30 33 37; --line: 52 57 64; --muted: 167 172 179; --ink: 243 242 238; --bad: 248 113 113; --ok: 74 222 128; }
html.dark body:has(.jd-crew) header.bg-ink { background-color: rgb(11 12 14); border-bottom: 1px solid rgb(52 57 64); }
html.dark body:has(.jd-crew) .jd :is(a, button).bg-ink { color: rgb(21 23 26); }
html.dark body:has(.jd-crew) .jd .bg-hivis { color: rgb(21 23 26); }
/* Naranja como texto en oscuro: #C2410C sobre grafito daba ~3:1; #FB923C da ~7:1. */
html.dark body:not(.public-view), html.dark body:has(.jd-crew) { --hivis-ink: 251 146 60; }