/*
 * Ficha de primera reunión: un formulario con aspecto de hoja impresa.
 * Las opciones son burbujas como las de una hoja de respuestas y el campo de texto
 * es una línea para escribir encima. Usa la letra del documento.
 */
@layer components {
  .ficha {
    container-type: inline-size;
    display: grid;
    gap: var(--space-m);
    padding: var(--space-l);
    color: var(--color-print);
    font-family: var(--font-document);
    line-height: var(--leading-document);
  }

  .ficha__title {
    padding-block-end: var(--space-s);
    border-block-end: 0.09375rem solid currentColor;
    font-family: var(--font-document);
    font-size: var(--step-2);
    font-stretch: 100%;
    font-weight: 700;
    letter-spacing: 0;
  }

  .ficha__fallback {
    display: grid;
    justify-items: start;
    gap: var(--space-m);
  }

  .ficha__form {
    display: grid;
    gap: var(--space-m);
  }

  .ficha__legend {
    display: block;
    margin-block-end: var(--space-3xs);
    font-weight: 700;
  }

  .ficha__optional {
    font-style: italic;
    font-weight: 400;
  }

  .ficha__options {
    display: grid;
    column-gap: var(--space-m);
  }

  .ficha__options--inline {
    grid-template-columns: repeat(2, max-content);
    column-gap: var(--space-l);
  }

  /* Con espacio suficiente, las etapas van en dos columnas. */
  @container (inline-size >= 30rem) {
    .ficha__options--columns {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(4, auto);
      grid-auto-flow: column;
    }
  }

  /* ── Burbuja: opción de respuesta ─────────────────────────────────────── */
  .bubble {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-xs);
    min-block-size: 2.75rem; /* área táctil cómoda */
    cursor: pointer;
  }

  .bubble__input {
    display: grid;
    place-content: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin: 0;
    border: 0.09375rem solid var(--color-ink-soft);
    border-radius: 50%;
    background-color: var(--color-paper);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }

  /* Relleno de la burbuja: crece desde el centro al marcarla. */
  .bubble__input::before {
    content: "";
    inline-size: 0.9375rem;
    block-size: 0.9375rem;
    border-radius: 50%;
    background-color: var(--color-accent);
    /* transform (y no scale): de esto depende que se distinga la opción marcada. */
    transform: scale(0);
    transition: transform var(--duration-fast) var(--ease-out);
  }

  .bubble__input:checked {
    border-color: var(--color-accent);
  }

  .bubble__input:checked::before {
    transform: scale(1);
  }

  .bubble__input:focus-visible {
    border-radius: 50%;
  }

  .bubble:hover .bubble__input {
    border-color: var(--color-accent);
  }

  /* Contraste forzado (Windows): se usa el botón de opción nativo, que ese modo sí respeta. */
  @media (forced-colors: active) {
    .bubble__input {
      appearance: auto;
    }

    .bubble__input::before {
      display: none;
    }
  }

  /* ── Línea para escribir ─────────────────────────────────────────────── */
  .ficha__line {
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: var(--space-2xs) 0;
    border: 0;
    border-block-end: 0.09375rem solid var(--color-ink-soft);
    border-radius: 0;
    background-color: transparent;
    font-family: var(--font-document);
    font-size: var(--step-0);
  }

  .ficha__line:hover {
    border-block-end-color: var(--color-accent);
  }

  /* ── Resultado: el mensaje armado y el botón ─────────────────────────── */
  .ficha__result {
    display: grid;
    gap: var(--space-s);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--color-line);
  }

  .ficha__result-label {
    font-weight: 700;
  }

  /* El mensaje es lo que dirá el tesista, así que va en la letra de la conversación. */
  .ficha__message {
    display: block;
    padding: var(--space-s);
    border-radius: var(--radius-mark);
    background-color: var(--color-desk);
    color: var(--color-ink);
    font-family: var(--font-brand);
    font-size: var(--text-ui);
    line-height: var(--leading-body);
  }

  /* Al cambiar el mensaje, un destello de resaltador muestra que se actualizó. */
  @media (prefers-reduced-motion: no-preference) {
    .ficha__message[data-updated="true"] {
      animation: ficha-message-updated 0.7s ease-out;
    }

    @keyframes ficha-message-updated {
      from {
        background-color: var(--color-highlight);
      }
    }
  }
}