/* =============================================================================
   Aligna Design System — port a CSS plano (sin Tailwind).
   - HB Hue → titulares (h1-h6) y display.
   - Google Sans Flex → body, botones, nav, labels, todo lo "UI".
   ============================================================================= */

/* IMPORTS deben ir antes que cualquier otra regla CSS */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..96,100..1000&display=swap');

@font-face {
  font-family: 'HB Hue';
  src: url('/fonts/HBHueWebv1.38-Light.woff2') format('woff2'),
       url('/fonts/HB_Hue_v1.38-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HB Hue';
  src: url('/fonts/HBHueWebv1.38-LightItalic.woff2') format('woff2'),
       url('/fonts/HB_Hue_v1.38-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Foundations */
  --ink:        #0E0E10;
  --ink-hover:  #1C1A1F;
  --ink-2:      #2B2A2F;
  --ink-3:      #5C5A63;
  --ink-4:      #8E8C95;
  --bone:       #FBF7F2;
  --bone-2:     #F4EFE8;
  --paper:      #FFFFFF;
  --line:       rgba(14, 14, 16, 0.06);
  --line-strong:rgba(14, 14, 16, 0.12);

  /* Warm */
  --peach-50:#FFF1E6; --peach-100:#FFE0CC; --peach-300:#FFB58A; --peach-500:#F58E5C;
  --blush-50:#FBE9EA; --blush-200:#F7C5CC; --blush-400:#EE98A8; --rose-500:#E26683;
  --cream:#FFF8EE;

  /* Cool */
  --lavender-50:#EFEAF6; --lavender-200:#D8CDEE; --lavender-400:#A993D8;
  --periwinkle-300:#B5BEEB; --fog-100:#ECEEF3; --fog-300:#C9CFDA;

  /* Accent */
  --ember:       #D6633D;
  --ember-hover: #B9512F;
  --ember-soft:  #F1B79C;

  /* Semantic */
  --success: #6B8E5A; --warning: #C58A2E; --danger: #B23A3A;

  /* Aliases semánticos */
  --bg:            var(--bone);
  --bg-card:       var(--paper);
  --fg:            var(--ink);
  --fg-muted:      var(--ink-3);
  --fg-subtle:     var(--ink-4);
  --fg-on-dark:    #FFFFFF;
  --link:          var(--ember);
  --border:        var(--line);
  --border-strong: var(--line-strong);

  /* Gradientes atmosféricos */
  --grad-warm-aurora:
    radial-gradient(120% 60% at 50% 0%,    #F7C5CC 0%, transparent 55%),
    radial-gradient(100% 60% at 80% 30%,   #FFB58A 0%, transparent 60%),
    radial-gradient(120% 80% at 20% 70%,   #FFE0CC 0%, transparent 65%),
    linear-gradient(180deg, #FFF1E6 0%, #FBF7F2 100%);

  --grad-dawn:
    radial-gradient(120% 80% at 50% 0%,    #FFB58A 0%, transparent 60%),
    radial-gradient(120% 80% at 50% 100%,  #F7C5CC 0%, transparent 60%),
    linear-gradient(180deg, #FFF1E6 0%, #FFFFFF 50%, #FBE9EA 100%);

  /* Tipografía
     - display/italic → HB Hue (titulares y serif emphasis)
     - sans           → Google Sans Flex (body, UI, botones, nav, labels)
     - mono           → técnico */
  --font-display: 'HB Hue', 'DM Serif Display', 'Times New Roman', serif;
  --font-italic:  'HB Hue', 'Instrument Serif', serif;
  --font-sans:    'Google Sans Flex', 'Söhne', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  --fs-eyebrow:0.6875rem;  --fs-caption:0.75rem;  --fs-small:0.8125rem;
  --fs-body:0.9375rem;     --fs-body-lg:1.0625rem;
  --fs-h6:1.125rem;  --fs-h5:1.375rem;  --fs-h4:1.75rem;
  --fs-h3:2.25rem;   --fs-h2:3rem;       --fs-h1:4rem; --fs-display:5rem;

  --lh-tight:1.05; --lh-snug:1.15; --lh-normal:1.4; --lh-relaxed:1.55;
  --tracking-eyebrow:0.14em; --tracking-caps:0.08em;
  --tracking-tight:-0.02em;  --tracking-display:-0.015em;

  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;
  --space-9:48px; --space-10:64px; --space-11:80px; --space-12:96px;

  --radius-1:4px;  --radius-2:8px;  --radius-3:12px;
  --radius-4:16px; --radius-5:24px; --radius-6:32px; --radius-pill:999px;

  --shadow-2: 0 1px 2px rgba(20,20,30,.04), 0 4px 12px rgba(20,20,30,.05);
  --shadow-3: 0 1px 2px rgba(20,20,30,.04), 0 8px 24px rgba(20,20,30,.06);
  --shadow-pill: 0 1px 2px rgba(20,20,30,.06), 0 6px 18px rgba(20,20,30,.08);
  --shadow-inset-glass:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(255,200,170,.4);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--bg); color: var(--fg);
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 300;
  margin: 0;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-snug); }
h6 { font-size: var(--fs-h6); line-height: var(--lh-snug); }

p { margin: 0; text-wrap: pretty; }
small, .caption { font-size: var(--fs-caption); color: var(--fg-muted); }

a { text-decoration: none; color: inherit; }
.prose a, p > a, .link {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness var(--dur-fast) var(--ease-out);
}
.prose a:hover, p > a:hover, .link:hover { text-decoration-thickness: 2px; }

.italic-serif, em.serif {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-muted);
}
.eyebrow--ember { color: var(--ember); }
.eyebrow--ink   { color: var(--ink); }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}

/* ─── Layout helpers ─── */
.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.row    { display: flex; align-items: center; }
.stack  { display: flex; flex-direction: column; }
.gap-2 { gap: 8px;}.gap-3{gap:12px;}.gap-4{gap:16px;}.gap-5{gap:20px;}
.gap-6{gap:24px;}.gap-8{gap:40px;}

/* ─── Header ─── */
.aligna-header {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(251, 247, 242, 0.72);
  border-bottom: 1px solid var(--line);
}
.aligna-header__inner {
  height: 92px;
  display: flex; align-items: center; justify-content: space-between;
}
.aligna-header__brand {
  display: inline-flex; align-items: center;
  text-decoration: none;
  color: inherit;
}
.aligna-header__brand img { display: block; height: 48px; width: auto; }

/* Wordmark Aligna renderizado como texto HTML (sustituye al SVG, que
   dependía de una fuente externa no disponible en iOS y quedaba invisible). */
.aligna-wordmark {
  font-family: var(--font-display); /* HB Hue */
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
  display: inline-block;
}
.aligna-wordmark--sm {
  font-size: 22px;
  letter-spacing: -0.03em;
}

.aligna-header__nav { display: flex; align-items: center; gap: 28px; }
.aligna-header__navlink {
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out);
}
.aligna-header__navlink:hover { color: var(--ink); }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  border: 0; cursor: pointer;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 500;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  text-decoration: none;
}
.btn:active { transform: scale(0.96); }

.btn--primary {
  background: var(--ink); color: var(--fg-on-dark);
  min-height: 56px; padding: 0 28px;
  font-size: 15px;
  box-shadow: var(--shadow-pill);
}
.btn--primary:hover { background: var(--ink-hover); }

.btn--secondary {
  background: var(--paper); color: var(--ink);
  min-height: 48px; padding: 0 24px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  box-shadow: var(--shadow-pill), var(--shadow-inset-glass);
}
.btn--secondary .arrow { color: var(--ember); font-size: 16px; line-height: 1; }

.btn--ghost {
  background: transparent; color: var(--ink);
  padding: 10px 16px;
}
.btn--ghost:hover { background: var(--line); }

/* ─── Hero ─── */
.hero {
  position: relative; isolate: isolate;
  background: var(--grad-warm-aurora);
  padding: 96px 0 128px;
}
.hero__h1 {
  margin-top: 24px;
  max-width: 18ch;
  font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 300;
}
.hero__lead {
  margin-top: 32px;
  max-width: 52ch;
  font-size: 17px; line-height: 1.55;
  color: var(--ink-2);
}
.hero__ctas { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

@media (min-width: 768px) { .hero { padding: 128px 0 160px; } }

/* ─── Mood pills (cliente piloto Moodly) ─── */
.mood-pill {
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13px;
  padding: 0 20px; height: 44px;
  box-shadow: var(--shadow-pill);
}
.mood-pill__dot { width: 10px; height: 10px; border-radius: 999px; }
.mood-pill--sm  { font-size: 11px; height: 28px; padding: 0 12px; gap: 6px; letter-spacing: 0.14em; }
.mood-pill--sm  .mood-pill__dot { width: 6px; height: 6px; }

.mood-pill[data-mood="ready"]  { background: #ff6301; color: #ffffff; }
.mood-pill[data-mood="ready"]  .mood-pill__dot { background: #ffffff; }
.mood-pill[data-mood="calm"]   { background: #a3c2a7; color: #004c39; }
.mood-pill[data-mood="calm"]   .mood-pill__dot { background: #004c39; }
.mood-pill[data-mood="good"]   { background: #9dbecc; color: #0E0E10; }
.mood-pill[data-mood="good"]   .mood-pill__dot { background: #0E0E10; }
.mood-pill[data-mood="beauty"] { background: #ffbab5; color: #8e4e00; }
.mood-pill[data-mood="beauty"] .mood-pill__dot { background: #8e4e00; }

/* ─── Sections ─── */
.section { padding: 96px 0; }
.section--paper { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--bone  { background: var(--bone); }

.section__title { font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 300; line-height: 1.1; }

/* ─── Client summary (bloque reutilizable bajo el hero) ─── */
.client-summary { padding: 80px 0; }
.client-summary__inner {
  display: grid;
  gap: 48px;
}
@media (min-width: 900px) {
  .client-summary__inner { grid-template-columns: minmax(220px, 280px) 1fr; gap: 80px; align-items: start; }
}
.client-summary__head { }
.client-summary__name {
  margin-top: 12px;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
}
.client-summary__body { max-width: 60ch; }
.client-summary__desc {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}
.client-summary__stats {
  display: flex; flex-wrap: wrap; gap: 40px;
  margin: 32px 0 0;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.client-summary__stats > div { display: flex; flex-direction: column; gap: 6px; }
.client-summary__stats dt {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-3);
}
.client-summary__stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  color: var(--ink);
}
.client-summary__hint {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-3);
}

/* ─── Grids ─── */
.moodly-grid {
  display: grid; gap: 64px;
}
@media (min-width: 1024px) { .moodly-grid { grid-template-columns: 1fr 2fr; gap: 80px; } }

.mood-cards {
  display: grid; gap: 16px; grid-template-columns: 1fr;
}
@media (min-width: 600px) { .mood-cards { grid-template-columns: repeat(2, 1fr); } }

.mood-card {
  background: var(--paper);
  border-radius: var(--radius-5);
  padding: 24px;
  box-shadow: var(--shadow-3);
}
.mood-card h3 { margin-top: 20px; font-size: 22px; font-weight: 300; }
.mood-card p  { margin-top: 8px; font-size: 14px; color: var(--ink-3); line-height: 1.5; }

/* ─── Hitos list ─── */
.hitos { margin-top: 40px; padding: 0; list-style: none; }
.hitos li {
  display: flex; align-items: center; gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.hitos li:last-child { border-bottom: 0; }
.hitos__num {
  font-family: var(--font-mono);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-4); min-width: 28px;
}
.hitos__num--done { color: var(--ember); }
.hitos__check {
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.hitos__check--done { background: var(--ink); border-color: var(--ink); color: #fff; }
.hitos__check--done::after { content: "✓"; font-size: 11px; line-height: 1; }
.hitos__label { font-size: 16px; color: var(--ink-3); }
.hitos li.is-done .hitos__label { color: var(--ink); }

/* ─── Footer ─── */
.aligna-footer { border-top: 1px solid var(--line); background: var(--bone-2); padding: 40px 0; }
.aligna-footer__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.aligna-footer small { font-size: 12px; color: var(--ink-3); }
.aligna-footer .version {
  font-family: var(--font-mono);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-3);
}

/* =============================================================================
   Hito 3 — formulario, evaluación, resultado, histórico
   ============================================================================= */

/* ─── Form: resets ─── */
fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;        /* corrige overflow de fieldset en flex containers */
}
legend {
  padding: 0;
  display: block;
  width: 100%;
  margin-bottom: 12px;
}
button { font-family: inherit; }

.field {
  display: block;
  margin-bottom: 32px;
}
.field > label {
  display: block;
  margin-bottom: 10px;
}
.field > textarea,
.field > input[type="text"] {
  display: block;
  width: 100%;
}

/* ─── Radio pills (estética del DS) ─── */
.radio-row {
  display: flex; flex-wrap: wrap; gap: 8px;
}

.radio-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: var(--paper);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  user-select: none;
  line-height: 1;
}
.radio-pill:hover { border-color: var(--ink); }

/* Ocultamos el radio nativo pero lo dejamos accesible */
.radio-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  margin: 0;
}

/* Estado checked sin :has() (para máxima compatibilidad) */
.radio-pill input[type="radio"]:checked + span,
.radio-pill input[type="radio"]:checked ~ span {
  /* nada — manejamos el styling con .is-checked vía JS si hace falta */
}

/* Con :has() (browsers modernos: Chrome 105+, Safari 15.4+, Firefox 121+) */
.radio-pill:has(input[type="radio"]:checked) {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.radio-pill:has(input[type="radio"]:checked) .mood-dot {
  box-shadow: 0 0 0 2px var(--paper);
}

.mood-dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; flex: none; }
.mood-dot[data-mood="ready"]  { background: #ff6301; }
.mood-dot[data-mood="calm"]   { background: #a3c2a7; }
.mood-dot[data-mood="good"]   { background: #9dbecc; }
.mood-dot[data-mood="beauty"] { background: #ffbab5; }

/* ─── Textarea / input ─── */
textarea,
input[type="text"],
input[type="email"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-3);
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  background: var(--paper);
  color: var(--ink);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
textarea { min-height: 140px; }
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(14,14,16,0.06);
}
textarea::placeholder,
input::placeholder { color: var(--ink-4); font-family: var(--font-sans); }

.form-actions {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 16px;
}

/* Wrap del formulario: ancho cómodo, alineado a la izquierda dentro del .container del hero. */
.evaluar-section { padding: 64px 0 96px; }
.evaluar-form-wrap {
  max-width: 760px;
  margin: 0;          /* alineado a la izquierda, NO centrado */
}
.form-evaluar { font-family: var(--font-sans); }
.form-evaluar legend.eyebrow { font-family: var(--font-sans); }

/* ─── Dev alert (info técnica para desarrolladores) ─── */
.dev-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 40px;
  padding: 14px 16px 14px 14px;
  background: var(--bone-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-4);
  border-radius: var(--radius-2);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-3);
}
.dev-alert__tag {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; padding: 0 6px;
  border-radius: 3px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.dev-alert__body { flex: 1; }
.dev-alert__body strong { color: var(--ink-2); font-weight: 600; }
.dev-alert__body code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--ink-2);
}

/* ─── Alerts ─── */
.alert {
  border-radius: var(--radius-3);
  padding: 16px 20px;
  font-size: 14px; line-height: 1.5;
}
.alert--danger {
  background: #FBE9EA; color: var(--danger);
  border: 1px solid rgba(178,58,58,0.18);
}

/* ─── Result hero (banda cualitativa) ─── */
.result-hero {
  padding: 80px 0 56px;
  position: relative;
  border-bottom: 1px solid var(--line);
}
.result-hero--aligned                   { background: linear-gradient(180deg, #E8F0E1 0%, #FBF7F2 100%); }
.result-hero--aligned_with_adjustments  { background: linear-gradient(180deg, #FFF8EE 0%, #FBF7F2 100%); }
.result-hero--tensions_brand            { background: var(--grad-warm-aurora); }
.result-hero--incoherent                { background: linear-gradient(180deg, #F7C5CC 0%, #FBF7F2 100%); }

.result-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: start;
}
@media (max-width: 760px) {
  .result-header { grid-template-columns: 1fr; gap: 16px; }
  .result-header .score-meter { justify-self: start; }
}

/* ─── Semáforo (4 luces verticales) ─── */
.traffic-light {
  display: flex;
  flex-direction: column;
  align-items: center;        /* centrar los dots horizontalmente */
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
  width: 48px;                /* 18px dot + 15px a cada lado */
  background: rgba(255,255,255,0.55);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-2);
  overflow: visible;          /* deja respirar el shadow del dot activo */
}
.traffic-light__dot {
  width: 18px; height: 18px;
  flex: none;                 /* nunca encoger */
  border-radius: 999px;
  background: rgba(14,14,16,0.06);
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.traffic-light__dot.is-on { transform: scale(1.16); }
.traffic-light__dot--aligned.is-on                   { background: var(--success); box-shadow: 0 0 0 3px rgba(107,142,90,0.18); }
.traffic-light__dot--aligned_with_adjustments.is-on  { background: var(--warning); box-shadow: 0 0 0 3px rgba(197,138,46,0.18); }
.traffic-light__dot--tensions_brand.is-on            { background: var(--ember);   box-shadow: 0 0 0 3px rgba(214,99,61,0.18); }
.traffic-light__dot--incoherent.is-on                { background: var(--danger);  box-shadow: 0 0 0 3px rgba(178,58,58,0.20); }

/* ─── Cabecera del resultado ─── */
.result-headline { min-width: 0; }
.result-band {
  margin-top: 12px;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
  font-weight: 300;
}
.result-diagnosis {
  margin-top: 18px;
  max-width: 60ch;
  font-size: 17px; line-height: 1.55;
  color: var(--ink-2);
}

/* ─── Score circular (gauge) ─── */
.score-meter {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 132px;
}
.score-meter__ring {
  position: relative;
  width: 116px; height: 116px;
  border-radius: 999px;
  background:
    conic-gradient(var(--score-color, var(--ink)) 0 var(--score-pct), rgba(14,14,16,0.08) var(--score-pct) 100%);
  display: grid; place-items: center;
}
.score-meter__ring::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  background: var(--paper);
}
.score-meter__value,
.score-meter__of,
.score-meter__label { position: relative; z-index: 1; }
.score-meter__value {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.score-meter__of {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
}
.score-meter__label {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-3);
  text-align: center;
}
/* Color del anillo según banda final (coherente con el semáforo). */
.score--aligned     { --score-color: var(--success); }
.score--adjustments { --score-color: var(--warning); }
.score--tensions    { --score-color: var(--ember);   }
.score--incoherent  { --score-color: var(--danger);  }

/* Aliases legacy por si algo viejo aún los usa */
.score--high { --score-color: var(--success); }
.score--mid  { --score-color: var(--warning); }
.score--low  { --score-color: var(--danger);  }

/* Badge "cappado por X violaciones" cuando el promedio numérico no
   refleja la banda real (regla dura forzó bajada). */
.score-meter__cap {
  display: inline-flex; align-items: center;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--ember-soft);
  color: var(--ember-hover);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: help;
}
.score--incoherent .score-meter__cap {
  background: #FBE9EA;
  color: var(--danger);
}

/* ─── Meta secundaria del resultado ─── */
.result-meta-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(14,14,16,0.08);
}
.result-risk { font-size: 13px; color: var(--ink-3); }
.result-risk strong { color: var(--ink); }
.result-final-criterion { margin-top: 28px; }

.violation-badge {
  display: inline-flex; align-items: center;
  background: var(--ember);
  color: var(--paper);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
}

.confidence-badge {
  display: inline-flex; align-items: center;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.confidence-badge--high   { background: #E8F0E1; color: var(--success); }
.confidence-badge--medium { background: #FFF8EE; color: var(--warning); }
.confidence-badge--low    { background: #FBE9EA; color: var(--danger); }

/* ─── Block (secciones de la evaluación) ─── */
.block { padding: 32px 0; border-bottom: 1px solid var(--line); }
.block:last-child { border-bottom: 0; }

.grid-2 {
  display: grid; gap: 32px; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: 48px; } }

/* ─── Dimensiones ─── */
.dim-list { display: flex; flex-direction: column; gap: 14px; }
.dim {
  display: grid;
  grid-template-columns: 1fr 200px 60px;
  gap: 16px;
  align-items: center;
}
@media (max-width: 720px) {
  .dim { grid-template-columns: 1fr 100px 50px; gap: 12px; }
}
.dim__label { font-size: 14px; color: var(--ink-2); }
.dim__bar {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.dim__bar span {
  display: block;
  height: 100%;
  background: var(--ink);
  border-radius: inherit;
  transition: width 600ms var(--ease-out);
}
.dim__score {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  text-align: right;
}

/* ─── Listas con bullets de color ─── */
.bullets {
  margin: 16px 0 0;
  padding-left: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 10px;
}
.bullets li {
  position: relative;
  padding-left: 22px;
  font-size: 15px; line-height: 1.55;
  color: var(--ink);
}
.bullets li::before {
  content: '';
  position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px;
  border-radius: 999px;
}
.bullets--success li::before { background: var(--success); }
.bullets--warn    li::before { background: var(--warning); }
.bullets--ember   li::before { background: var(--ember); }
.bullets--ember { counter-reset: items; padding-left: 0; }
.bullets--ember li::before {
  width: 22px; height: 22px;
  background: transparent;
  color: var(--ember);
  font-family: var(--font-mono);
  font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  counter-increment: items;
  content: counter(items, decimal-leading-zero);
  top: 1px;
}
.bullets--ember li { padding-left: 32px; }

/* ─── Recommended version (card destacado) ─── */
.recommended {
  background: var(--bone-2);
  border-radius: var(--radius-5);
  padding: 28px 32px;
  margin-top: 12px;
  border: 0;
}
.recommended__text {
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  font-family: var(--font-italic);
  font-size: 22px; line-height: 1.5;
  color: var(--ink);
  font-weight: 300;
  font-style: italic;
}

/* ─── Original input quote ─── */
.original__text {
  margin: 12px 0 0;
  padding: 16px 20px;
  border-left: 3px solid var(--ink-4);
  background: var(--bone);
  border-radius: 0 var(--radius-3) var(--radius-3) 0;
  font-size: 15px; line-height: 1.55;
  color: var(--ink-2);
}

/* ─── Chunk chips (citas a documentos) ─── */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chunk-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  font-size: 13px;
  color: var(--ink);
  cursor: help;
}
.chunk-chip__type {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ember);
}

/* ─── Tech footer ─── */
.tech-footer .caption {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
  line-height: 1.7;
  display: block;
}

/* ─── History list ─── */
.history { margin: 0; padding: 0; list-style: none; }
.history__row {
  border-bottom: 1px solid var(--line);
}
.history__row:last-child { border-bottom: 0; }
.history__link {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
  border-radius: var(--radius-2);
}
.history__link:hover { background: var(--bone-2); padding-left: 12px; padding-right: 12px; }
.history__main {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  flex: 1; min-width: 0;
}
.history__band {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  white-space: nowrap;
}
.history__band--aligned                  { background: #E8F0E1; color: var(--success); }
.history__band--aligned_with_adjustments { background: #FFF8EE; color: var(--warning); }
.history__band--tensions_brand           { background: var(--ember-soft); color: var(--ember-hover); }
.history__band--incoherent               { background: #FBE9EA; color: var(--danger); }
.history__type {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-4);
}
.history__diagnosis {
  font-size: 15px; color: var(--ink-2);
  flex: 1; min-width: 0;
}
.history__meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.history__meta .caption {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
}

/* =============================================================================
   Hito 4 — Evaluación visual (dropzone, preview, thumbnail en resultado)
   ============================================================================= */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: 180px;
  padding: 24px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-4);
  background: var(--bone);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.dropzone:hover { border-color: var(--ink); background: var(--bone-2); }
.dropzone.is-dragover {
  border-color: var(--ember);
  background: var(--ember-soft);
}

.dropzone__placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center;
  color: var(--ink-3);
}
.dropzone__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 18px;
  box-shadow: var(--shadow-2);
  margin-bottom: 4px;
}
.dropzone__title {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink);
  font-weight: 500;
}
.dropzone__hint {
  font-size: 12px;
  color: var(--ink-4);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* Override del atributo HTML hidden, que un display: flex/grid pisa por especificidad. */
.dropzone__placeholder[hidden],
.dropzone__preview[hidden] { display: none !important; }

.dropzone__preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.dropzone__preview img {
  max-width: 100%;
  max-height: 320px;
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-3);
  background: var(--paper);
}
.dropzone__filemeta {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}
.dropzone__filename { line-height: 1.4; }
.dropzone__clear {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.dropzone__clear:hover { border-color: var(--ink); color: var(--ink); }

/* ─── Thumbnail en pantalla de resultado ─── */
.original__visual {
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;       /* evita stretch horizontal del flex item */
  gap: 10px;
}
.original__visual img {
  display: block;
  width: auto;                   /* respeta aspect ratio */
  height: auto;
  max-width: 100%;
  max-height: 480px;
  object-fit: contain;           /* defensa adicional contra estiramientos */
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-3);
  background: var(--paper);
}
.original__visual figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
}

/* Mismo fix preventivo para el preview en el dropzone */
.dropzone__preview img {
  width: auto;
  height: auto;
  object-fit: contain;
}

/* =============================================================================
   Hito 5 — Inspección cromática (swatches, violaciones)
   ============================================================================= */

.palette-check {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius-5);
  padding: 28px;
  margin-bottom: 32px;
}
.palette-check__head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.palette-check__badge {
  display: inline-flex; align-items: center;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.palette-check__badge--ok {
  background: #E8F0E1;
  color: var(--success);
}
.palette-check__badge--ko {
  background: var(--ember);
  color: var(--paper);
}

.palette-check__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 20px;
}
@media (min-width: 720px) {
  .palette-check__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
.palette-check__col p.caption { margin-bottom: 12px; }

.swatches {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0; padding: 0; list-style: none;
}
.swatch {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 4px 12px 4px 4px;
}
.swatch__chip {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(14,14,16,0.08);
  flex: none;
}
.swatch__chip--lg { width: 32px; height: 32px; }
.swatch__hex {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}

.palette-check__violations {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.palette-violations { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.palette-violation {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  background: var(--paper);
  border-radius: var(--radius-3);
  border-left: 3px solid var(--ember);
}
.palette-violation--high { border-left-color: var(--danger); }
.palette-violation--low  { border-left-color: var(--ink-4); }
.palette-violation__body { flex: 1; min-width: 0; }
.palette-violation__sev {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ember);
  border: 1px solid var(--ember);
  border-radius: 3px;
  padding: 1px 6px;
}
.palette-violation--high .palette-violation__sev { color: var(--danger); border-color: var(--danger); }
.palette-violation__why {
  margin-top: 6px;
  font-size: 14px; line-height: 1.5;
  color: var(--ink-2);
}

/* =============================================================================
   Meta pills (Análisis / Riesgo) — neutro vs semántico
   ============================================================================= */

.meta-pill {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  cursor: help;
}
.meta-pill__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-3);
}
.meta-pill strong {
  color: var(--ink);
  font-weight: 600;
}

/* Riesgo: dot coloreado según severidad real para la marca */
.meta-pill--risk { padding-left: 10px; }
.meta-pill--risk::before {
  content: '';
  display: inline-block;
  width: 10px; height: 10px; border-radius: 999px;
  margin-right: 4px;
  background: var(--ink-4);
  align-self: center;
  flex: none;
}
.meta-pill--risk-low::before    { background: var(--success); }
.meta-pill--risk-medium::before { background: var(--warning); }
.meta-pill--risk-high::before   { background: var(--danger); }
.meta-pill--risk-low    strong { color: var(--success); }
.meta-pill--risk-medium strong { color: var(--warning); }
.meta-pill--risk-high   strong { color: var(--danger); }

/* =============================================================================
   Botones grandes de acción del resultado (Descargar PDF / Compartir)
   ============================================================================= */

.result-actions {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px) {
  .result-actions { grid-template-columns: 1fr 1fr; }
}

.btn-action {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 24px;
  border-radius: var(--radius-5);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  color: var(--ink);
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  box-shadow: var(--shadow-2);
}
.btn-action:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-3);
  transform: translateY(-1px);
}
.btn-action:active { transform: translateY(0) scale(0.99); }

.btn-action__icon {
  width: 48px; height: 48px;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
}

.btn-action__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.btn-action__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.btn-action__sub {
  font-size: 13px;
  color: var(--ink-3);
}

/* =============================================================================
   Toast (feedback de "enlace copiado")
   ============================================================================= */

.aligna-toast {
  position: fixed;
  bottom: 28px; left: 50%;
  transform: translate(-50%, 12px);
  background: var(--ink);
  color: var(--paper);
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(20,20,30,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease-out),
              transform 240ms var(--ease-out);
  z-index: 100;
}
.aligna-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* =============================================================================
   PRINT — informe descargable como PDF (window.print → "Guardar como PDF")
   ============================================================================= */

@media print {
  /* Ahorrar tinta: fondos limpios pero conservando colores semánticos importantes */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  body, html { background: #fff !important; color: #0E0E10 !important; }

  /* Ocultar lo que no es informe */
  .aligna-header,
  .aligna-footer,
  .form-actions,
  .result-actions,
  .dev-alert,
  .aligna-toast { display: none !important; }

  /* Hero limpio sin gradiente fuerte */
  .result-hero { padding: 24pt 0 16pt !important; }
  .result-hero--aligned,
  .result-hero--aligned_with_adjustments,
  .result-hero--tensions_brand,
  .result-hero--incoherent { background: #fff !important; }

  /* Borde superior del informe (cabecera de página) */
  .result-hero::before {
    content: 'Aligna · informe de evaluación';
    display: block;
    font-family: var(--font-sans);
    font-size: 9pt;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #5C5A63;
    border-bottom: 1px solid #e5e1d8;
    padding-bottom: 12pt;
    margin-bottom: 16pt;
  }

  .container { max-width: none !important; padding: 0 !important; }

  /* Tipografía optimizada para papel */
  body { font-size: 10.5pt; line-height: 1.5; }
  h1   { font-size: 28pt; }
  h2   { font-size: 17pt; }
  h3   { font-size: 14pt; }
  .result-band { font-size: 32pt !important; }

  /* Page breaks razonables */
  .block { page-break-inside: avoid; padding: 18pt 0 !important; }
  .palette-violation,
  .mood-card,
  .recommended { page-break-inside: avoid; }
  .palette-check { page-break-inside: avoid; padding: 16pt !important; }

  /* Imagen contenida */
  .original__visual img { max-height: 12cm !important; box-shadow: none !important; }

  /* Sombras → fuera (ahorro de tinta) */
  .traffic-light, .score-meter__ring, .palette-check, .mood-card, .recommended,
  .meta-pill, .dim__bar, .swatch, .palette-violation, .original__visual img {
    box-shadow: none !important;
  }
  .traffic-light { background: transparent !important; }
}

/* =============================================================================
   Evaluador online — selector de medio + input con prefijo + tarjeta de resultado
   ============================================================================= */

.medium-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px) {
  .medium-cards { grid-template-columns: repeat(3, 1fr); }
}

.medium-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px; row-gap: 4px;
  align-items: start;
  padding: 18px 20px;
  border-radius: var(--radius-4);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  position: relative;
}
.medium-card:hover { border-color: var(--ink); box-shadow: var(--shadow-2); }
.medium-card.is-selected {
  border-color: var(--ink);
  background: var(--bone);
  box-shadow: var(--shadow-2);
}
.medium-card input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}
.medium-card__icon {
  grid-row: 1 / span 2;
  width: 48px; height: 48px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper);
  flex: none;
}
.medium-card.is-selected .medium-card__icon {
  background: var(--ember); color: var(--paper);
}
.medium-card__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.medium-card__sub {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.4;
}

/* ─── URL input ─── */
.url-input {
  display: flex; align-items: stretch;
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-3);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.url-input:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(14,14,16,0.06);
}
.url-input__prefix {
  flex: none;
  display: inline-flex; align-items: center;
  padding: 0 0 0 16px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-3);
  user-select: none;
}
.url-input input[type="text"],
.url-input input[type="url"] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
}
.url-input input:focus { box-shadow: none !important; border-color: transparent !important; }
.url-input__hint {
  margin-top: 8px;
  font-size: 12px; line-height: 1.5;
  color: var(--ink-3);
}

/* ─── Tarjeta del contenido online evaluado ─── */
.online-eval-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-4);
  padding: 20px;
  margin-top: 16px;
}
@media (min-width: 720px) {
  .online-eval-card { grid-template-columns: 220px 1fr; gap: 24px; }
}
.online-eval-card__visual { margin: 0; display: flex; align-items: flex-start; }
.online-eval-card__visual img {
  width: 100%;
  max-width: 220px;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-3);
  background: var(--bone);
  box-shadow: var(--shadow-2);
}
.online-eval-card__body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.online-eval-card__medium {
  display: inline-flex; align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.online-eval-card__medium--instagram { background: linear-gradient(135deg, #F58E5C, #E26683 55%, #A993D8); }
.online-eval-card__medium--linkedin  { background: #0A66C2; }
.online-eval-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.online-eval-card__desc {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}
.online-eval-card__url {
  font-family: var(--font-mono);
  font-size: 12px;
  word-break: break-all;
  color: var(--ember);
  display: inline-flex; align-items: center; gap: 4px;
}

/* =============================================================================
   Spinner inline · sustituye la flecha "→" del botón al hacer submit
   ============================================================================= */

.aligna-spin {
  display: inline-block;
  width: 22px; height: 22px;
  flex: none;
  border-radius: 999px;
  /* Anillo con conic-gradient warm aurora; el sector transparente al inicio crea la "C". */
  background: conic-gradient(
    from 0deg,
    transparent 0deg 30deg,
    var(--peach-300)  60deg,
    var(--peach-500) 130deg,
    var(--ember)     210deg,
    var(--blush-400) 290deg,
    transparent      355deg 360deg
  );
  /* Mask radial para vaciar el centro y dejar solo el anillo. */
  -webkit-mask: radial-gradient(circle, transparent 0 38%, #000 40% 100%);
          mask: radial-gradient(circle, transparent 0 38%, #000 40% 100%);
  animation: aligna-spin 0.85s linear infinite;
}
@keyframes aligna-spin { to { transform: rotate(360deg); } }

/* Cuando el botón está en estado loading: el cursor cambia y el anillo brilla más. */
.btn.is-loading,
.btn--primary.is-loading {
  cursor: progress;
  opacity: 0.96;
}
.btn.is-loading .aligna-spin {
  filter: drop-shadow(0 0 10px rgba(255, 181, 138, 0.45));
}

@media (prefers-reduced-motion: reduce) {
  .aligna-spin { animation-duration: 2.5s; }
}

/* =============================================================================
   RESPONSIVE — mobile (≤760px)
   ============================================================================= */

/* Botón hamburguesa: oculto en desktop */
.aligna-header__burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  padding: 0; gap: 4px;
  flex-direction: column;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.aligna-header__burger:hover { border-color: var(--ink); }
.aligna-header__burger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.aligna-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.aligna-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.aligna-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 760px) {
  /* Header: logo más pequeño + burger visible + nav drawer */
  .aligna-header { z-index: 100 !important; }
  .aligna-header__inner { height: 72px !important; padding: 0 20px !important; }
  .aligna-header__brand img { height: 36px !important; }
  .aligna-header__brand .aligna-wordmark { font-size: 28px !important; }
  .aligna-header__burger {
    display: inline-flex !important;
    flex: none;
  }

  /* CRÍTICO: backdrop-filter crea un nuevo containing block en iOS Safari,
     lo que confina los descendientes con position:fixed dentro del header
     (72 px alto). Resultado: el nav solo mostraba el primer link recortado.
     En mobile lo desactivamos. El header mantiene su semi-transparencia. */
  .aligna-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(251, 247, 242, 0.96) !important;
  }

  /* Nav drawer: display:none por defecto, display:flex cuando se abre. */
  .aligna-header__nav {
    position: fixed !important;
    top: 72px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 24px 20px 40px !important;
    background: var(--bone) !important;
    border-top: 1px solid var(--line) !important;
    z-index: 99 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Forzar fuente sans (los <a> a veces heredan estilos raros) */
    font-family: var(--font-sans) !important;
  }
  body.aligna-nav-open .aligna-header__nav,
  .aligna-header__nav.is-open {
    display: flex !important;
    animation: aligna-nav-slide-in 240ms var(--ease-out);
  }
  @keyframes aligna-nav-slide-in {
    from { transform: translateY(-16px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
  }

  /* Burger: animación 3 líneas → X cuando aria-expanded=true */
  .aligna-header__burger span {
    transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
  }
  .aligna-header__burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .aligna-header__burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .aligna-header__burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  .aligna-header__navlink {
    display: block !important;
    width: 100% !important;
    padding: 18px 4px !important;
    font-family: var(--font-sans) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--line) !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
  }
  .aligna-header__navlink:last-child { border-bottom: 0 !important; }
  body.aligna-nav-open { overflow: hidden !important; }

  /* Hero: tamaños más cómodos */
  .hero { padding: 56px 0 64px; }
  .hero__h1 { max-width: 100%; }
  .hero__lead { font-size: 16px; }
  .hero__ctas { gap: 10px; }

  .container { padding: 0 20px; }

  /* Result header (semaforo · banda · score) → stack vertical */
  .result-header {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .traffic-light {
    width: auto;
    flex-direction: row;
    padding: 10px 14px;
    border-radius: var(--radius-pill);
    align-self: start;
  }
  .score-meter { width: 100%; max-width: 140px; }
  .result-band { font-size: clamp(2rem, 9vw, 2.75rem) !important; }
  .result-diagnosis { font-size: 16px; }

  .result-meta-row { gap: 8px; }
  .meta-pill { font-size: 12px; padding: 5px 10px; }

  /* Inspección cromática + grid 2 cols → 1 col */
  .palette-check__grid { grid-template-columns: 1fr; gap: 20px; }
  .grid-2 { grid-template-columns: 1fr; gap: 24px; }

  /* Dimensiones: layout más compacto */
  .dim {
    grid-template-columns: 1fr 80px 44px;
    gap: 10px;
  }
  .dim__label { font-size: 13px; }

  /* Sections menos padding vertical */
  .section { padding: 56px 0; }
  .client-summary { padding: 48px 0; }

  /* Acciones grandes (PDF/Compartir): full width 1 col */
  .result-actions { grid-template-columns: 1fr; gap: 12px; }

  /* Botones primary/secondary: ancho cómodo */
  .btn--primary { min-height: 52px; padding: 0 22px; }
  .btn--secondary { min-height: 44px; }

  /* Form actions: stack en vertical si caben mal */
  .form-actions { gap: 10px; }
  .form-actions .btn { width: 100%; }

  /* Online eval card: imagen arriba + body debajo */
  .online-eval-card { grid-template-columns: 1fr; gap: 16px; }
  .online-eval-card__visual img { max-width: 100%; }

  /* Dropzone más compacta */
  .dropzone { min-height: 140px; padding: 18px; }
  .dropzone__icon { width: 36px; height: 36px; }

  /* History list: meta apila bajo el diagnóstico */
  .history__link { flex-direction: column; align-items: flex-start; gap: 8px; }
  .history__meta { flex-direction: row; align-items: center; }

  /* Footer */
  .aligna-footer__inner { gap: 12px; }

  /* Loader inline más visible */
  .aligna-spin { width: 20px; height: 20px; }

  /* Mood pills no se desbordan */
  .mood-pill { font-size: 12px; height: 38px; padding: 0 16px; }
}

/* Tablet vertical (≤900px): header sin burger todavía si cabe, ajustes suaves */
@media (max-width: 900px) and (min-width: 761px) {
  .aligna-header__nav { gap: 18px; }
  .aligna-header__navlink { font-size: 13px; }
  .client-summary__inner { grid-template-columns: 1fr; gap: 32px; }
}

/* =============================================================================
   PRINT mejorado — informe descargable como PDF
   ============================================================================= */

@media print {
  @page {
    size: A4 portrait;
    margin: 18mm 16mm 18mm 16mm;
    @bottom-right { content: counter(page) " / " counter(pages); font-family: sans-serif; font-size: 9pt; color: #666; }
    @top-left     { content: "Aligna · informe de evaluación"; font-family: sans-serif; font-size: 9pt; color: #999; letter-spacing: 0.12em; text-transform: uppercase; }
  }

  /* Reset general de fondos */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: #fff !important; color: #0E0E10 !important; }

  /* Ocultar todo lo que no es informe */
  .aligna-header,
  .aligna-footer,
  .aligna-header__burger,
  .form-actions,
  .result-actions,
  .dev-alert,
  .aligna-toast,
  .aligna-loader,
  .btn,
  .aligna-spin,
  script, style { display: none !important; }

  .container { max-width: none !important; padding: 0 !important; }

  /* Hero del resultado: limpio */
  .result-hero {
    padding: 0 0 12pt 0 !important;
    border: 0 !important;
    page-break-after: avoid;
  }
  .result-hero--aligned,
  .result-hero--aligned_with_adjustments,
  .result-hero--tensions_brand,
  .result-hero--incoherent { background: #fff !important; }

  /* Layout del header del resultado: stack horizontal limpio */
  .result-header {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    gap: 18pt !important;
    align-items: center !important;
    padding-bottom: 12pt;
    border-bottom: 1px solid #ccc;
    page-break-inside: avoid;
  }
  .traffic-light {
    flex-direction: column !important;
    width: 22pt !important;
    padding: 6pt 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border: 1px solid #ccc;
    gap: 6pt !important;
  }
  .traffic-light__dot { width: 9pt !important; height: 9pt !important; }
  .result-headline { min-width: 0; }

  /* Score: el conic-gradient no imprime bien. Lo sustituimos por un cuadro
     simple con borde de color según severidad — sigue siendo visualmente
     informativo y se imprime perfecto. */
  .score-meter { width: auto !important; gap: 4pt !important; align-items: center !important; }
  .score-meter__ring {
    width: 56pt !important;
    height: 56pt !important;
    background: #fff !important;
    border: 3pt solid var(--score-color, #0E0E10) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .score-meter__ring::before { display: none !important; }
  .score-meter__value { font-size: 18pt !important; line-height: 1 !important; }
  .score-meter__of    { font-size: 8pt !important; }
  .score-meter__label { font-size: 7pt !important; text-align: center !important; }
  .score--high .score-meter__ring { border-color: #6B8E5A !important; }
  .score--mid  .score-meter__ring { border-color: #C58A2E !important; }
  .score--low  .score-meter__ring { border-color: #B23A3A !important; }

  /* Tipografía optimizada */
  body { font-size: 10pt; line-height: 1.5; }
  h1   { font-size: 24pt; }
  h2   { font-size: 16pt; }
  h3   { font-size: 13pt; }
  .result-band { font-size: 26pt !important; line-height: 1.1 !important; }
  .result-diagnosis { font-size: 11pt !important; max-width: 100% !important; }
  .eyebrow { font-size: 8.5pt !important; }

  /* Page-breaks: solo evitamos cortes en items pequeños; los bloques grandes
     pueden romper página libremente. */
  .palette-violation,
  .dim,
  .swatch,
  .meta-pill,
  .recommended { page-break-inside: avoid; break-inside: avoid; }

  .block { padding: 12pt 0 !important; border-bottom: 1px solid #eee; }
  .block:first-of-type { padding-top: 8pt !important; }
  .block:last-of-type { border-bottom: 0; }

  /* Nada de páginas casi vacías por culpa de avoid global */
  p, li, h2, h3 { orphans: 3; widows: 3; }

  /* Imagen evaluada limitada en altura para que quepa */
  .original__visual img { max-height: 8cm !important; box-shadow: none !important; border: 1px solid #eee !important; }
  .online-eval-card { display: block !important; padding: 0 !important; border: 1px solid #ddd !important; border-radius: 8pt !important; }
  .online-eval-card__visual img { max-height: 6cm !important; box-shadow: none !important; }
  .online-eval-card__title { font-size: 14pt !important; }

  /* Quitar todas las sombras */
  .palette-check, .mood-card, .recommended, .meta-pill, .dim__bar,
  .swatch, .palette-violation, .original__visual img, .traffic-light,
  .score-meter__ring, .online-eval-card, .online-eval-card__visual img {
    box-shadow: none !important;
  }

  /* Pills de meta más sutiles */
  .meta-pill { background: transparent !important; border: 1px solid #ccc !important; padding: 3pt 8pt !important; }
  .confidence-badge, .violation-badge { background: transparent !important; border: 1px solid #999 !important; }

  /* Recommended version: card claro */
  .recommended { background: #f8f5ee !important; border: 1px solid #e6e0d4 !important; padding: 12pt !important; }
  .recommended__text { font-size: 14pt !important; }

  /* Asegurar contraste OK con bandas en PDF */
  .traffic-light__dot--aligned.is-on                  { background: #6B8E5A !important; }
  .traffic-light__dot--aligned_with_adjustments.is-on { background: #C58A2E !important; }
  .traffic-light__dot--tensions_brand.is-on           { background: #D6633D !important; }
  .traffic-light__dot--incoherent.is-on               { background: #B23A3A !important; }

  /* Cita original más legible */
  .original__text { background: #f8f5ee !important; border-left: 2pt solid #888 !important; padding: 10pt !important; font-size: 11pt !important; }

  /* Bullets con sus dots a color para print */
  .bullets li::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  a[href]::after { content: ""; }  /* no añadir URLs entre paréntesis a los links */
}

/* =============================================================================
   Histórico — botón borrar inline
   ============================================================================= */

.history__row {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 4px;
  border-bottom: 1px solid var(--line);
}
.history__row:last-child { border-bottom: 0; }
.history__row .history__link { flex: 1; }
.history__delete-form { display: flex; align-items: stretch; }
.history__delete {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px;
  background: transparent;
  border: 0;
  color: var(--ink-4);
  cursor: pointer;
  border-radius: var(--radius-2);
  margin: 4px 0;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.history__delete:hover {
  background: #FBE9EA;
  color: var(--danger);
}

/* =============================================================================
   Pantalla Cuenta — bloques de stats, tokens, tabla, acciones
   ============================================================================= */

.aligna-header__navlink--account {
  position: relative;
}
.aligna-header__navlink--account::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--ember);
  margin-right: 6px;
  vertical-align: middle;
}

.account-block + .account-block { padding-top: 32px; }

/* Cards de stats */
.account-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px) {
  .account-grid { grid-template-columns: repeat(3, 1fr); }
}
.account-card {
  padding: 22px 24px;
  border-radius: var(--radius-4);
  border: 1px solid var(--line);
  background: var(--paper);
}
.account-card--soft { background: var(--bone); }
.account-card__big {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}
.account-card__mid {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--ink);
}
.account-card__suffix {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-3);
}
.account-card__hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.45;
}
.account-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  margin-top: 12px;
  overflow: hidden;
}
.account-bar span {
  display: block;
  height: 100%;
  background: var(--ink);
  border-radius: inherit;
  transition: width 600ms var(--ease-out);
}
.account-bar--cap span { background: var(--ember); }

/* Token grid */
.token-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 720px) {
  .token-grid { grid-template-columns: repeat(5, 1fr); }
}
.token-stat {
  background: var(--bone);
  border-radius: var(--radius-3);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.token-stat--total {
  background: var(--ink);
  color: var(--paper);
}
.token-stat--total .token-stat__value,
.token-stat--total .token-stat__label { color: var(--paper); }
.token-stat__value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.token-stat__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-3);
}
.token-stat__label small {
  font-family: var(--font-mono);
  text-transform: lowercase;
  letter-spacing: 0;
  font-size: 10px;
  color: var(--ink-4);
}

/* Tabla desglose */
.account-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.account-table th {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-3);
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-strong);
}
.account-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.account-table tr:last-child td { border-bottom: 0; }

/* Acciones */
.account-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) {
  .account-actions { grid-template-columns: 1fr 1fr; }
}
.btn-action--danger {
  border-color: rgba(178, 58, 58, 0.25);
}
.btn-action--danger:hover {
  border-color: var(--danger);
}
.btn-action--danger .btn-action__icon {
  background: var(--danger);
}
.btn-action--danger .btn-action__title { color: var(--danger); }

/* =============================================================================
   Near-matches cromáticos · colores cercanos a paleta (compresión JPEG/WebP)
   ============================================================================= */

.palette-check__nears {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.palette-near__hint {
  margin-top: 6px;
  padding: 12px 14px;
  background: #FFF8EE;
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-2);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.palette-near__hint strong { color: var(--ink); font-weight: 600; }

.palette-nears {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.palette-near {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  font-size: 13px;
}
.palette-near__pair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.palette-near__arrow {
  color: var(--ink-4);
  font-family: var(--font-mono);
}
.palette-near__distance {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--warning);
  border: 1px solid var(--warning);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  margin-left: 4px;
}
.palette-near__note {
  flex: 1 1 100%;
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
}

/* =============================================================================
   Responsive · pantalla de resultado en mobile
   ============================================================================= */

@media (max-width: 760px) {
  .result-hero { padding: 56px 0 40px !important; }

  /* Header del resultado: stack vertical (semáforo arriba, headline, score) */
  .result-header {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .traffic-light {
    flex-direction: row !important;
    width: auto !important;
    align-self: flex-start !important;
    padding: 8px 14px !important;
    gap: 10px !important;
  }
  .traffic-light__dot { width: 14px !important; height: 14px !important; }

  .result-band {
    font-size: clamp(2rem, 9vw, 3rem) !important;
  }
  .result-diagnosis { font-size: 16px !important; }

  /* Score meter: más pequeño y alineado a la izquierda */
  .score-meter {
    align-self: flex-start !important;
    flex-direction: row !important;
    gap: 14px !important;
    width: auto !important;
    align-items: center !important;
  }
  .score-meter__ring { width: 84px !important; height: 84px !important; }
  .score-meter__value { font-size: 28px !important; }
  .score-meter__label,
  .score-meter__cap { text-align: left !important; }

  /* Meta row: pills apilados con espacio cómodo */
  .result-meta-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Bloques internos: padding más cómodo y sin ahogar texto */
  .section { padding: 56px 0 !important; }
  .block { padding: 24px 0 !important; }

  /* Inspección cromática: 1 columna en mobile */
  .palette-check { padding: 20px !important; }
  .palette-check__grid { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* Violaciones: menos padding interno */
  .palette-violation { padding: 12px 14px !important; gap: 10px !important; }
  .palette-violation .swatch__chip--lg { width: 28px !important; height: 28px !important; }

  /* Near matches: stack si no caben los chips */
  .palette-near { padding: 10px 12px !important; }

  /* Dimensiones: layout vertical con score al final */
  .dim {
    grid-template-columns: 1fr 70px 50px !important;
    gap: 10px !important;
  }
  .dim__label { font-size: 13px !important; }

  /* Card online evaluado: imagen arriba, contenido debajo (ya lo está pero con menos gap) */
  .online-eval-card { padding: 16px !important; gap: 16px !important; }
  .online-eval-card__visual img { max-width: 100% !important; }

  /* Recomendado: padding más razonable */
  .recommended { padding: 20px !important; }
  .recommended__text { font-size: 18px !important; }

  /* Acciones: stack siempre */
  .result-actions { grid-template-columns: 1fr !important; }
  .form-actions { flex-direction: column !important; align-items: stretch !important; }
  .form-actions .btn { width: 100% !important; }

  /* Histórico: filas más cómodas con click target grande */
  .history__link { padding: 16px 4px !important; flex-wrap: wrap !important; gap: 10px !important; }
  .history__delete { width: 44px !important; }
  .history__diagnosis { font-size: 14px !important; }
  .history__band { font-size: 10px !important; }

  /* Cuenta: cards full-width */
  .account-grid { grid-template-columns: 1fr !important; }
  .token-grid { grid-template-columns: 1fr 1fr !important; }
  .token-stat--total { grid-column: 1 / -1; }
  .account-actions { grid-template-columns: 1fr !important; }
  .account-table { font-size: 13px !important; }
  .account-table th, .account-table td { padding: 10px 8px !important; }
}

/* =============================================================================
   Cuestionario contextual · paso intermedio antes de evaluar
   ============================================================================= */

.ctx-questions {
  margin: 32px 0 8px;
  padding: 28px;
  border-radius: var(--radius-5);
  background: var(--bone);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ember);
  animation: aligna-ctx-in 280ms var(--ease-out);
}
@keyframes aligna-ctx-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ctx-q {
  padding: 0;
  margin: 0 0 24px;
  border: 0;
}
.ctx-q:last-child { margin-bottom: 8px; }
.ctx-q__label {
  display: block;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0 0 6px;
  padding: 0;
}
.ctx-q__help {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
}

@media (max-width: 760px) {
  .ctx-questions { padding: 18px; }
}