:root {
  color-scheme: light;
  --paper: oklch(97.5% 0.006 95);
  --paper-sunk: oklch(94.5% 0.008 95);
  --ink: oklch(17% 0.012 265);
  --ink-deep: oklch(13% 0.02 265);
  --ink-muted: oklch(50% 0.014 265);
  --ink-faint: oklch(64% 0.012 265);
  --rule: oklch(87% 0.008 265);
  --accent: oklch(84% 0.2 122);
  --accent-ink: oklch(17% 0.012 265);
  /* Variante de --accent para texto sobre fondo neutro (no sobre --accent
     mismo, ahí --accent-ink ya resuelve el contraste). --accent es un
     verde lima de 84% de luminosidad: como texto queda ilegible contra
     --paper-sunk claro (94.5%), la diferencia es de apenas 10 puntos.
     Oscurecido acá y restaurado al valor real en los bloques de tema
     oscuro, donde sí contrasta — mismo patrón que --strong/--good/etc. */
  --accent-text: oklch(42% 0.17 122);

  --strong: oklch(58% 0.15 155);
  --good: oklch(70% 0.14 118);
  --partial: oklch(76% 0.15 75);
  --weak: oklch(58% 0.19 25);

  --radius-sharp: 3px;
  --radius-soft: 10px;
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: Georgia, "Times New Roman", serif;
}
/* Tema oscuro: automático por SO (sin preferencia guardada) o forzado por
   [data-theme] (toggle manual, ver cv-scoring.js — persiste en localStorage). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: oklch(19% 0.012 265);
    --paper-sunk: oklch(15% 0.012 265);
    --ink: oklch(95% 0.006 95);
    --ink-deep: oklch(11% 0.014 265);
    --ink-muted: oklch(66% 0.012 265);
    --ink-faint: oklch(52% 0.012 265);
    --rule: oklch(30% 0.012 265);
    --strong: oklch(68% 0.15 155);
    --good: oklch(76% 0.14 118);
    --partial: oklch(80% 0.15 75);
    --weak: oklch(68% 0.19 25);
    /* En oscuro --accent ya contrasta bien como texto (84% contra el
       --paper-sunk de 15%): se restaura el valor real. */
    --accent-text: oklch(84% 0.2 122);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: oklch(19% 0.012 265);
  --paper-sunk: oklch(15% 0.012 265);
  --ink: oklch(95% 0.006 95);
  --ink-deep: oklch(11% 0.014 265);
  --ink-muted: oklch(66% 0.012 265);
  --ink-faint: oklch(52% 0.012 265);
  --rule: oklch(30% 0.012 265);
  --strong: oklch(68% 0.15 155);
  --good: oklch(76% 0.14 118);
  --partial: oklch(80% 0.15 75);
  --weak: oklch(68% 0.19 25);
  --accent-text: oklch(84% 0.2 122);
}
* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body { font-family: var(--font-sans); background: var(--paper); color: var(--ink); margin: 0; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body, .panel, .stat-card, .dash-panel, .key-card, .settings-section, .cand-detail, textarea, input[type="text"], input[type="url"] {
  transition: background-color .2s var(--ease-editorial), border-color .2s var(--ease-editorial), color .2s var(--ease-editorial);
}
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sharp);
}
.tabular { font-variant-numeric: tabular-nums; }
.font-display { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
.label-mono { font-family: var(--font-mono); font-size: 11px; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }

/* Layout primitives (usados por el playground y el demo embebido de la landing) */
.panel { border: 1px solid var(--rule); border-radius: var(--radius-soft); background: var(--paper); }
.grid-2 { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.col-left { display: flex; flex-direction: column; gap: 1rem; }
.col-right { display: flex; flex-direction: column; }
@media (min-width: 900px) { .col-right { border-left: 1px solid var(--rule); padding-left: 1.5rem; } }

.field-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .45rem; }
textarea, input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="search"] {
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sharp);
  padding: .55rem .7rem;
  font-family: var(--font-mono);
  font-size: .8rem;
  line-height: 1.5;
}
textarea { resize: vertical; }
textarea:focus, input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
/* El navegador pinta los campos autocompletados (usuario/contraseña
   guardados) con su propio amarillo pálido, ignorando el `background`
   declarado arriba — en el tema light eso se nota contra el resto del
   formulario. El `box-shadow` inset con el color de fondo del tema es el
   único hook que Chrome/Safari respetan para pisarlo; `-webkit-text-fill-color`
   hace lo mismo para el texto, que si no queda con el color oscuro fijo del
   autofill de Chrome incluso en modo oscuro. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--paper) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 9999s ease-in-out 0s;
}
.char-counter { font-family: var(--font-mono); font-size: .68rem; color: var(--ink-muted); white-space: nowrap; }
.char-counter.invalid { color: var(--weak); }

.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Prefs bar: theme toggle + selector de idioma (nav landing / topbar dashboard) */
.prefs-bar { display: flex; align-items: center; gap: .35rem; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius-sharp);
  background: transparent; color: var(--ink-muted); cursor: pointer;
}
.icon-btn:hover { color: var(--ink); background: var(--paper-sunk); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn .icon-moon { display: none; }
:root[data-theme="dark"] .icon-btn .icon-sun { display: none; }
:root[data-theme="dark"] .icon-btn .icon-moon { display: block; }
.lang-switch { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius-sharp); overflow: hidden; }
.lang-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .4rem .55rem; color: var(--ink-muted); text-decoration: none;
}
.lang-switch a:hover { color: var(--ink); background: var(--paper-sunk); }
/* Debajo de 1024px (breakpoint en que aparece el hamburger) el mouse deja de
   ser el input principal: ahí sí hace falta el mínimo de 44px de touch target. */
@media (max-width: 1023px) {
  .icon-btn { width: 2.75rem; height: 2.75rem; }
  .lang-switch a { min-width: 2.75rem; min-height: 2.75rem; }
}
.lang-switch a[aria-current="true"] { color: var(--paper); background: var(--ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-family: var(--font-sans);
  font-size: .82rem; font-weight: 600;
  border-radius: 7px;
  padding: .5rem .9rem;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--ink); color: var(--paper);
}
.btn:hover:not(:disabled) { opacity: .88; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-outline:hover:not(:disabled) { background: var(--paper-sunk); opacity: 1; }
.btn .spin { width: 13px; height: 13px; border: 2px solid color-mix(in oklch, currentColor 30%, transparent); border-top-color: currentColor; border-radius: 50%; animation: spin .6s linear infinite; display: none; }
.btn.loading .spin { display: inline-block; }
.btn.loading .btn-label { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.subtabs { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius-sharp); overflow: hidden; }
.subtabs button {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .35rem .7rem; border: none; background: transparent; color: var(--ink-muted); cursor: pointer;
}
.subtabs button.active { background: var(--ink); color: var(--paper); }

/* Dropzone */
.dropzone {
  border: 1.5px dashed var(--rule);
  border-radius: var(--radius-sharp);
  padding: 2rem 1.25rem;
  text-align: center;
  cursor: pointer;
  color: var(--ink-muted);
  position: relative;
}
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 6%, transparent); }
.dropzone svg { width: 20px; height: 20px; margin-bottom: .5rem; }
.dropzone .dz-title { font-size: .85rem; color: var(--ink); }
.dropzone .dz-hint { display: block; margin-top: .3rem; font-family: var(--font-mono); font-size: .68rem; }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.file-name { margin-top: .5rem; font-size: .8rem; color: var(--ink); }
.dz-error { margin-top: .6rem; border-left: 2px solid var(--weak); background: color-mix(in oklch, var(--weak) 8%, transparent); border-radius: var(--radius-sharp); padding: .5rem .7rem; font-size: .8rem; color: var(--weak); }

/* Result placeholders */
.hint-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  min-height: 220px; border: 1px dashed var(--rule); border-radius: var(--radius-sharp); padding: 1.5rem; text-align: center;
}
.hint-box p { max-width: 36ch; font-size: .85rem; color: var(--ink-muted); margin: 0; }
.hint-box .spin-lg { width: 18px; height: 18px; border: 2px solid var(--rule); border-top-color: var(--ink-muted); border-radius: 50%; animation: spin .6s linear infinite; }

.result-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }

.mono-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-mono); font-size: .68rem; line-height: 1;
  border-radius: var(--radius-sharp); border: 1px solid var(--rule);
  padding: .22rem .45rem; background: var(--paper-sunk); color: var(--ink);
}
.mono-badge.muted { background: transparent; color: var(--ink-muted); }
.mono-badge.accent { border-color: transparent; background: var(--accent); color: var(--accent-ink); }
.mono-badge.warn { border-color: color-mix(in oklch, var(--partial) 60%, transparent); background: color-mix(in oklch, var(--partial) 10%, transparent); color: var(--partial); }

.section-rule { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.section-rule span.line { flex: 1; height: 1px; background: var(--rule); }

.score-badge { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-mono); font-size: .78rem; }
.score-badge .dot, .verdict-chip .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.verdict-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid currentColor; border-radius: var(--radius-sharp); padding: .1rem .5rem; font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; opacity: .9; }

.chip { display: inline-block; border-radius: var(--radius-sharp); padding: .2rem .5rem; font-family: var(--font-mono); font-size: .72rem; }
.chip-accent { background: var(--accent); color: var(--accent-ink); }
.chip-ink { background: var(--ink); color: var(--paper); }
.chip-muted { background: var(--paper-sunk); color: var(--ink); }
.chip-gap { border: 1px dashed var(--rule); color: var(--ink-muted); }
.chip-wrap { display: flex; flex-wrap: wrap; gap: .35rem; }

/* Error state */
.error-state { border-left: 2px solid var(--weak); background: color-mix(in oklch, var(--weak) 8%, transparent); border-radius: var(--radius-sharp); padding: .9rem 1rem; }
.error-state .err-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.error-state .err-title { font-weight: 600; margin: 0; }
.error-state .err-hint { margin: .3rem 0 0; font-size: .82rem; color: var(--ink-muted); }
.error-state .err-code { flex-shrink: 0; font-family: var(--font-mono); font-size: .68rem; color: var(--weak); }

/* JSON view */
.json-view { position: relative; }
.json-view pre {
  max-height: 30rem; overflow: auto; margin: 0;
  background: var(--paper-sunk); border: 1px solid var(--rule); border-radius: var(--radius-sharp);
  padding: .9rem; font-family: var(--font-mono); font-size: .74rem; line-height: 1.55; color: var(--ink);
  white-space: pre-wrap; word-break: break-word;
}
.json-copy {
  position: absolute; top: .5rem; right: .5rem;
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-mono); font-size: .68rem; color: var(--ink-muted);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-sharp);
  padding: .25rem .5rem; cursor: pointer;
}
.json-copy:hover { color: var(--ink); }

/* Score readout */
.score-card { border: 1px solid var(--rule); border-radius: var(--radius-soft); padding: 1.5rem; }
.score-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.score-num { display: flex; align-items: flex-end; gap: .1rem; }
.score-num .whole { font-family: var(--font-serif); font-size: clamp(3rem, 7vw, 4.5rem); line-height: .85; }
.score-num .decimal { font-family: var(--font-serif); font-size: 1.6rem; color: var(--ink-muted); padding-bottom: .3rem; }
.score-num .of10 { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); padding-bottom: .5rem; padding-left: .2rem; }
.score-verdict { text-align: right; }
.score-verdict .v-label { font-family: var(--font-serif); font-size: 1.4rem; line-height: 1; }

.score-bar { position: relative; width: 100%; height: 2.6rem; margin-top: 1.5rem; }
.score-bar .bands { position: absolute; inset: 0; display: flex; overflow: hidden; border-radius: var(--radius-sharp); border: 1px solid var(--rule); }
.score-bar .bands > div { height: 100%; border-right: 1px solid var(--paper); }
.score-bar .bands > div:last-child { border-right: none; }
.score-bar .divider { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.score-bar .marker { position: absolute; top: -4px; bottom: -4px; width: 3px; background: var(--ink); transition: left .5s var(--ease-editorial); }
.score-ticks { display: flex; width: 100%; margin-top: .4rem; }
.score-ticks > div { display: flex; justify-content: center; }

.score-summary { margin: 1.5rem 0 0; padding-left: 1rem; border-left: 2px solid var(--accent); }
.score-summary p { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; line-height: 1.5; margin: 0; }

.breakdown-grid { display: grid; grid-template-columns: 7rem 1fr 2.8rem; align-items: center; gap: .6rem 1rem; }
.breakdown-grid .dim-label { display: flex; align-items: center; gap: .4rem; font-size: .85rem; }
.breakdown-grid .dim-limit { font-family: var(--font-mono); font-size: 9px; color: var(--weak); }
.breakdown-grid .bar-track { height: 8px; background: var(--paper-sunk); border-radius: var(--radius-sharp); overflow: hidden; }
.breakdown-grid .bar-fill { height: 100%; background: var(--ink); }
.breakdown-grid .dim-value { text-align: right; font-family: var(--font-mono); font-size: .82rem; }

.divider-block { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }

/* CV / Job result specifics */
.exp-item { display: grid; grid-template-columns: 1fr auto; gap: .75rem; padding: .6rem 0; }
.exp-item + .exp-item { border-top: 1px solid var(--rule); }
.exp-item .exp-role { font-size: .88rem; font-weight: 600; margin: 0; }
.exp-item .exp-company { font-size: .82rem; color: var(--ink-muted); margin: .1rem 0 0; }
.exp-item .exp-dates { font-family: var(--font-mono); font-size: .68rem; color: var(--ink-muted); white-space: nowrap; }
.skill-level-row { display: grid; grid-template-columns: 7rem 1fr 4.2rem; align-items: center; gap: .6rem; padding: .25rem 0; }
.skill-level-row .sk-name { font-family: var(--font-mono); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-level-row .sk-track { height: 6px; background: var(--paper-sunk); border-radius: var(--radius-sharp); overflow: hidden; }
.skill-level-row .sk-fill { height: 100%; background: var(--ink); }
.skill-level-row .sk-label { text-align: right; font-family: var(--font-mono); font-size: .68rem; color: var(--ink-muted); }
.red-flags { border-left: 2px solid var(--partial); background: color-mix(in oklch, var(--partial) 8%, transparent); border-radius: var(--radius-sharp); padding: .9rem 1rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- Auth ------------------------------------------------------------ */
/* .f-label y .f-error/.f-status/.f-saved viven acá (no en el <style> de
   app/layout.blade.php) porque las pantallas de auth usan otro layout y
   también los necesitan. La regla `.settings-field label.f-label` del
   layout del dashboard tiene más especificidad y sigue ganando ahí. */

.auth-shell { display: grid; place-items: center; min-height: 100dvh; padding: 2rem 1rem; }
.auth-card { width: 100%; max-width: 25rem; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: 1.5rem; text-decoration: none; color: var(--ink); }
.auth-brand .mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: .72rem; font-weight: 700; }
.auth-brand .name { font-family: var(--font-serif); font-size: 1.25rem; }
.auth-panel { padding: 1.75rem; }
.auth-panel h1 { font-family: var(--font-serif); font-size: 1.4rem; margin: 0 0 .35rem; }
.auth-panel .intro { margin: 0 0 1.25rem; font-size: .85rem; color: var(--ink-muted); }
.auth-field { margin-bottom: 1rem; }
.auth-field input { width: 100%; }
.auth-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.auth-actions .btn { margin-left: auto; }
.auth-link { font-size: .8rem; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 2px; }
.auth-link:hover { color: var(--ink); }
.auth-remember { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--ink-muted); cursor: pointer; }
/* Separado del form por una regla: es la salida hacia el alta, no un campo más. */
.auth-aside { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: .82rem; color: var(--ink-muted); }

.f-label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink); }
.f-error { margin: .4rem 0 0; padding: 0; list-style: none; font-size: .78rem; color: var(--weak); }
.f-status { font-size: .82rem; color: var(--strong); }
.f-saved { font-size: .8rem; color: var(--ink-muted); }