/* =========================================================================
   FactuLibre — "¿Tienes claros tus primeros pasos como autónomo?"
   Estilos propios del test. Todos los selectores cuelgan de body.tp-page y
   solo usan las variables y componentes de styles.css (container, eyebrow,
   btn, breadcrumb, colores y radios). No define colores nuevos, no modifica
   ninguna regla existente y solo la carga esta página. Sin recursos externos.
   El resultado de una respuesta se comunica con texto y con forma del borde,
   nunca solo con color; no se usan rojo/verde ni animaciones de juego.
   ========================================================================= */

.tp-page [hidden] { display: none !important; }

/* Texto solo para lectores de pantalla */
.tp-page .tp-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.tp-page .tp-wrap { padding-bottom: clamp(2rem, 6vw, 3.5rem); }

/* ---------- Cabecera de la página ---------- */
.tp-page .tp-app > .eyebrow { margin-bottom: .8rem; }
.tp-page .tp-title {
  font-size: clamp(1.8rem, 4.8vw, 2.5rem); font-weight: 800;
  letter-spacing: -0.028em; line-height: 1.14; margin-bottom: 1.1rem;
}
/* Durante el recorrido el título se compacta para dejar sitio a la pregunta */
.tp-page .tp-app:not([data-state="intro"]) .tp-title {
  font-size: clamp(1.1rem, 2.8vw, 1.4rem); letter-spacing: -0.02em; margin-bottom: 1rem;
}

/* ---------- Introducción ---------- */
.tp-page .tp-lead { font-size: clamp(1.04rem, 2vw, 1.16rem); color: var(--ink); max-width: 62ch; margin-bottom: .85rem; }
.tp-page .tp-lead-2 { color: var(--ink-soft); max-width: 62ch; margin-bottom: 1.1rem; }
.tp-page .tp-meta {
  display: flex; flex-wrap: wrap; gap: .15rem .55rem; margin-bottom: 1.4rem;
  font-size: .9rem; font-weight: 600; color: var(--ink-soft);
}
.tp-page .tp-meta .dot { opacity: .6; }
@media (max-width: 559px) {
  .tp-page .tp-meta { column-gap: 1.1rem; }
  .tp-page .tp-meta .dot { display: none; }
}
.tp-page .tp-noscript {
  max-width: 62ch; padding: .9rem 1.1rem; border: 1px solid var(--border);
  border-left: 4px solid var(--warn); border-radius: var(--radius-sm); background: var(--surface);
}
.tp-page .tp-noscript a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Botones primarios de esta página: en modo oscuro el texto blanco de .btn-primary queda en 3,1:1
   sobre el azul claro; con el color de superficie (blanco en claro, oscuro en oscuro) llega a 5,5:1.
   No se toca styles.css: el resto del sitio mantiene el valor global. */
.tp-page #tp-app .btn-primary { color: var(--surface); }

/* ---------- Panel de pregunta y de resultado ---------- */
.tp-page section.tp-panel {
  padding: clamp(1.15rem, 3.6vw, 1.9rem);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  scroll-margin-top: 84px;
}
.tp-page .tp-head {
  font-family: var(--sans); font-size: .92rem; font-weight: 700; letter-spacing: .02em;
  color: var(--ink-soft); margin-bottom: .6rem; scroll-margin-top: 110px;
}
.tp-page .tp-bar { display: flex; gap: 5px; margin-bottom: 1.3rem; }
.tp-page .tp-bar span { flex: 1; height: 6px; border-radius: 99px; background: var(--border); }
.tp-page .tp-bar .is-done { background: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.tp-page .tp-bar .is-current { background: var(--accent); }

.tp-page .tp-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.tp-page .tp-legend {
  display: block; width: 100%; padding: 0; margin: 0 0 1.1rem;
  font-family: var(--display); font-weight: 800; font-size: clamp(1.2rem, 3.4vw, 1.5rem);
  line-height: 1.25; letter-spacing: -0.015em; color: var(--ink);
}
.tp-page .tp-options { display: grid; gap: .7rem; }

/* ---------- Opciones (radio nativo, tarjeta grande) ---------- */
.tp-page .tp-option { position: relative; display: block; cursor: pointer; }
.tp-page .tp-option input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer; z-index: 1;
}
.tp-page .tp-card {
  display: flex; align-items: flex-start; gap: .9rem; min-height: 60px;
  padding: .95rem 1.05rem; background: var(--bg);
  border: 2px solid color-mix(in srgb, var(--ink) 45%, var(--border)); border-radius: var(--radius-sm);
  transition: border-color .15s, background-color .15s;
}
.tp-page .tp-letter {
  flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; margin-top: .05rem;
  border: 2px solid var(--ink-soft); border-radius: 50%;
  font-size: .85rem; font-weight: 800; color: var(--ink-soft);
}
.tp-page .tp-text { font-size: 1rem; line-height: 1.5; color: var(--ink); }

@media (hover: hover) {
  .tp-page .tp-option:not(.is-locked):hover .tp-card { border-color: var(--accent); background: var(--accent-soft); }
  .tp-page .tp-option:not(.is-locked):hover .tp-letter { border-color: var(--accent); color: var(--accent-ink); }
}
.tp-page .tp-option input:focus-visible + .tp-card { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Pregunta bloqueada: se ve qué elegiste y cuál es la correcta, con texto y con forma del borde */
.tp-page .tp-option.is-locked,
.tp-page .tp-option.is-locked input { cursor: default; }
.tp-page .tp-option.is-locked:not(.is-chosen):not(.is-right) .tp-text { color: var(--ink-soft); }
.tp-page .tp-option.is-chosen .tp-card { border-color: var(--ink); background: var(--surface); }
.tp-page .tp-option.is-chosen .tp-letter { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.tp-page .tp-option.is-right .tp-card { border-color: var(--accent); border-style: dashed; background: var(--accent-soft); }
.tp-page .tp-option.is-right.is-chosen .tp-card { border-style: solid; }
.tp-page .tp-option.is-right .tp-letter { border-color: var(--accent); color: var(--accent-ink); }
.tp-page .tp-option.is-right.is-chosen .tp-letter { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.tp-page .tp-tag { display: block; margin: .35rem .25rem 0; font-size: .84rem; font-weight: 700; color: var(--ink-soft); }
.tp-page .tp-option.is-right .tp-tag { color: var(--accent-ink); }

.tp-page .tp-hint { margin-top: 1rem; font-size: .88rem; color: var(--ink-soft); }

/* ---------- Feedback ---------- */
.tp-page .tp-feedback {
  margin-top: 1.2rem; padding: 1rem 1.1rem; background: var(--bg);
  border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-sm);
}
.tp-page .tp-feedback.is-review { border-left-color: var(--warn); }
.tp-page .tp-verdict {
  display: inline-block; margin-bottom: .45rem; padding: .2rem .7rem; border-radius: 100px;
  font-size: .82rem; font-weight: 800; letter-spacing: .01em; color: var(--ink);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.tp-page .is-review .tp-verdict { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.tp-page .tp-explain { font-size: 1rem; line-height: 1.55; color: var(--ink); max-width: 62ch; }

.tp-page .tp-ctas { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.tp-page .tp-cta { white-space: normal; text-align: left; }
.tp-page .tp-arrow svg { width: 16px; height: 16px; }
.tp-page .tp-next-row { display: flex; margin-top: 1.3rem; }
.tp-page .tp-next-row .btn { width: 100%; }
@media (min-width: 560px) {
  .tp-page .tp-next-row { justify-content: flex-end; }
  .tp-page .tp-next-row .btn { width: auto; min-width: 14rem; }
}

/* ---------- Resultado ---------- */
.tp-page .tp-result-title {
  font-size: clamp(1.35rem, 3.6vw, 1.8rem); font-weight: 800;
  letter-spacing: -0.022em; line-height: 1.2; margin-bottom: .8rem; scroll-margin-top: 110px;
}
.tp-page .tp-result-text { color: var(--ink-soft); max-width: 62ch; margin-bottom: 1.3rem; }
.tp-page .tp-res-grid { display: grid; gap: 1rem; }
@media (min-width: 720px) {
  .tp-page .tp-res-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
}
.tp-page .tp-res {
  padding: 1.1rem 1.15rem; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.tp-page .tp-res--clear { border-left: 4px solid var(--accent); }
.tp-page .tp-res--review { border-left: 4px solid var(--warn); }
.tp-page .tp-res h3 { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: .7rem; }
.tp-page .tp-res p { color: var(--ink-soft); font-size: .97rem; }
.tp-page .tp-res-note { margin-bottom: .6rem; }
.tp-page .tp-res-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.tp-page .tp-res-list li { position: relative; padding-left: 1.15rem; font-size: .97rem; color: var(--ink); }
.tp-page .tp-res-list li::before {
  content: ""; position: absolute; left: .08rem; top: .62em; width: .42rem; height: .42rem;
  border-radius: 50%; background: var(--accent); opacity: .75;
}
.tp-page .tp-res-list--links { gap: .8rem; }
.tp-page .tp-res-topic { display: block; font-weight: 700; color: var(--ink); }
.tp-page .tp-res-links { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.tp-page .tp-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.tp-page .tp-link:hover { color: var(--accent); }
.tp-page .tp-res-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.tp-page .tp-result-foot { margin-top: 1.4rem; }

/* ---------- Pie de la página ---------- */
.tp-page .tp-privacy { margin-top: 1rem; font-size: .85rem; color: var(--ink-soft); }
.tp-page .tp-limits { margin-top: .6rem; font-size: .85rem; color: var(--ink-soft); max-width: 62ch; }

/* Alto contraste de Windows: el estado se sigue distinguiendo por borde y texto */
@media (forced-colors: active) {
  .tp-page .tp-card { border-color: ButtonText; }
  .tp-page .tp-option.is-chosen .tp-card { border-width: 4px; }
  .tp-page .tp-option input:focus-visible + .tp-card { outline-color: Highlight; }
}