/*
 * Hoja de tesis interactiva: el elemento memorable de la portada.
 *
 * Funciona solo con HTML y CSS, sin JavaScript:
 *   - las pestañas son botones de opción (radio) y eligen qué página se ve;
 *   - cada observación es una casilla (checkbox): al marcarla aparece la corrección
 *     resaltada y se dibuja el visto;
 *   - con las tres casillas de una página marcadas, cae el sello; mientras falte
 *     alguna, la pestaña de esa página lleva una marca de pendiente;
 *   - cuando no queda ninguna casilla sin marcar, cambia la indicación de debajo.
 *
 * Los estados que dependen de varias casillas a la vez usan :has(). El marcado está
 * en index.html y README.md explica cómo cambiar o añadir páginas.
 *
 * CSS no puede emparejar por sí solo un botón de opción con su pestaña y su página,
 * así que cinco listas de selectores enumeran las páginas por nombre (--metodo,
 * --referencias, --matriz). Al añadir una página hay que sumarla en las cinco.
 *
 * Todo se mide en unidades de contenedor (cqi) para que la hoja escale entera, como
 * una imagen, según el ancho que tenga. La secuencia animada de la primera página
 * está al final del archivo.
 */
@layer components {
  .sheet {
    container-type: inline-size;
    position: relative; /* ancla los botones de opción, ocultos a la vista */
    inline-size: 100%;
    --flag-thickness: max(1px, 0.085em); /* grosor del subrayado a lápiz */
  }

  /* ── Pestañas: separadores que asoman sobre la pila de hojas ───────────── */
  .sheet__tabs {
    position: relative;
    z-index: 2; /* por encima de las hojas de abajo, que asoman giradas */
    display: flex;
    align-items: flex-end;
    gap: var(--space-3xs);
    padding-inline-start: 4cqi;
  }

  .sheet__tab {
    position: relative; /* ancla la zona táctil ampliada */
    display: inline-flex;
    align-items: center;
    min-block-size: 2.25rem;
    /* Un poco más de aire al final: ahí va la marca de pendiente. */
    padding-inline: var(--space-xs) calc(var(--space-xs) + var(--space-3xs));
    border: 1px solid var(--color-line);
    border-block-end: 0;
    border-radius: var(--radius-control) var(--radius-control) 0 0;
    background-color: var(--color-tab-idle);
    color: var(--color-print);
    font-size: var(--step--1);
    font-weight: var(--weight-medium);
    line-height: 1;
    cursor: pointer;
  }

  /* Zona táctil: crece hacia arriba hasta los 44 px sin cambiar lo que se ve. */
  .sheet__tab::before {
    content: "";
    position: absolute;
    inset-block-end: 100%;
    inset-inline: 0;
    block-size: 0.5rem;
  }

  /*
   * Marca de pendiente: un punto a lápiz en la pestaña cuya página todavía tiene
   * observaciones sin levantar. Lleva un cerco de papel para que el rojo se
   * distinga también sobre una pestaña en reposo del tema de noche.
   */
  .sheet__tab::after {
    content: "";
    position: absolute;
    inset-block-start: 0.375rem;
    inset-inline-end: 0.375rem;
    inline-size: 0.375rem;
    block-size: 0.375rem;
    border-radius: 50%;
    background-color: var(--color-pencil);
    box-shadow: 0 0 0 0.125rem var(--color-paper);
    opacity: 0;
  }

  .sheet:has(.sheet__page--metodo .sheet__toggle:not(:checked)) .sheet__tab--metodo::after,
  .sheet:has(.sheet__page--referencias .sheet__toggle:not(:checked)) .sheet__tab--referencias::after,
  .sheet:has(.sheet__page--matriz .sheet__toggle:not(:checked)) .sheet__tab--matriz::after {
    opacity: 1;
  }

  /*
   * Pestaña elegida: es del mismo papel que la hoja y la pisa un píxel, así su
   * borde inferior desaparece y pestaña y hoja se ven como una sola pieza.
   * Cada pestaña se empareja con su botón de opción por la clase de página.
   */
  .sheet__tab-input--metodo:checked ~ .sheet__tabs .sheet__tab--metodo,
  .sheet__tab-input--referencias:checked ~ .sheet__tabs .sheet__tab--referencias,
  .sheet__tab-input--matriz:checked ~ .sheet__tabs .sheet__tab--matriz {
    min-block-size: 2.5rem;
    margin-block-end: -1px;
    background-color: var(--color-paper);
    cursor: default;
  }

  /*
   * Foco de teclado en una pestaña. El anillo queda a caballo entre la hoja y el
   * escritorio, así que lleva un halo de papel para verse sobre los dos fondos.
   */
  .sheet__tab-input--metodo:focus-visible ~ .sheet__tabs .sheet__tab--metodo,
  .sheet__tab-input--referencias:focus-visible ~ .sheet__tabs .sheet__tab--referencias,
  .sheet__tab-input--matriz:focus-visible ~ .sheet__tabs .sheet__tab--matriz {
    outline: 0.1875rem solid var(--color-focus);
    outline-offset: 0.125rem;
    box-shadow: 0 0 0 0.4375rem var(--color-paper);
  }

  /* ── Pila de hojas ──────────────────────────────────────────────────── */
  /* Todas las páginas ocupan la misma celda: la pila mide lo que la más alta
     y cambiar de página no mueve el resto de la portada. */
  .sheet__stack {
    position: relative;
    display: grid;
  }

  /* Dos hojas debajo, apenas giradas: es un borrador con varias páginas. */
  .sheet__stack::before,
  .sheet__stack::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-paper);
    background-color: var(--color-paper);
    box-shadow: var(--shadow-paper-low);
  }

  .sheet__stack::before {
    rotate: -2.4deg;
    translate: -1.4% 0.5%;
  }

  .sheet__stack::after {
    rotate: 1.6deg;
    translate: 1.2% 0.3%;
  }

  /* La hoja de arriba va derecha para que su texto se lea nítido. */
  .sheet__page {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    display: grid;
    align-content: start;
    row-gap: 4.4cqi;
    padding: 8cqi 7cqi 17cqi;
    color: var(--color-print);
    font-family: var(--font-document);
    font-size: 0.75rem; /* respaldo para navegadores sin unidades de contenedor */
    font-size: clamp(0.6875rem, 2.9cqi, 0.9375rem);
    line-height: 2; /* doble espacio, como pide un manuscrito */
    /* Oculta hasta que su pestaña la elige: no se ve, no se lee y no recibe foco. */
    visibility: hidden;
  }

  .sheet__tab-input--metodo:checked ~ .sheet__stack .sheet__page--metodo,
  .sheet__tab-input--referencias:checked ~ .sheet__stack .sheet__page--referencias,
  .sheet__tab-input--matriz:checked ~ .sheet__stack .sheet__page--matriz {
    visibility: visible;
  }

  /* Número de página arriba a la derecha, como en APA. */
  .sheet__folio {
    position: absolute;
    inset-block-start: 3.4cqi;
    inset-inline-end: 7cqi;
    line-height: 1;
  }

  .sheet__chapter {
    font-weight: 700;
    line-height: 1.55;
    text-align: center;
  }

  /* ── Apartado: texto a la izquierda y nota del asesor en el margen ──── */
  .sheet__block {
    position: relative; /* ancla la casilla, oculta a la vista */
    display: grid;
    grid-template-columns: minmax(0, 1fr) 31%;
    column-gap: 4cqi;
  }

  .sheet__heading {
    grid-column: 1;
    font-weight: 700;
  }

  .sheet__text {
    grid-column: 1;
    text-indent: 2em; /* sangría de primera línea */
    text-wrap: wrap;
  }

  /* Sin sangría: celdas de una matriz. */
  .sheet__text--flush {
    text-indent: 0;
  }

  /* Sangría francesa: entradas de la lista de referencias. */
  .sheet__text--hanging {
    padding-inline-start: 2em;
    text-indent: -2em;
    overflow-wrap: anywhere; /* un DOI largo puede partirse */
  }

  /*
   * Subrayado rojo y resaltador. Son fondos de un elemento en línea: si el texto
   * ocupa varias líneas, el fondo las recorre una tras otra, y eso permite
   * animarlos como un trazo que avanza.
   */
  .sheet__flag {
    background-image: linear-gradient(var(--color-pencil), var(--color-pencil));
    background-repeat: no-repeat;
    background-position: 0 97%;
    background-size: 100% var(--flag-thickness);
  }

  /*
   * Corrección. Mientras la observación está pendiente no se ve ni se lee, pero
   * conserva su sitio: así, al levantarla, el texto de la hoja no se mueve.
   */
  .sheet__fix {
    /* Por debajo del texto vecino: el resaltador se pasa un poco de la frase, como
       un trazo real, y no debe tapar la letra que tiene al lado. */
    position: relative;
    z-index: -1;
    margin-inline: -0.14em;
    padding-inline: 0.14em;
    border-radius: var(--radius-mark);
    background-image: linear-gradient(var(--color-highlight), var(--color-highlight));
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 0% 78%;
    color: transparent;
    visibility: hidden;
  }

  /* «inherit» y no «visible»: en una página oculta, la corrección sigue oculta. */
  .sheet__toggle:checked ~ .sheet__text .sheet__fix {
    background-size: 100% 78%;
    color: inherit;
    visibility: inherit;
  }

  /* ── Nota a lápiz: es la etiqueta de la casilla de su apartado ───────── */
  .sheet__note {
    position: relative; /* ancla la zona táctil ampliada */
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.32em;
    padding-block: 0.25em;
    color: var(--color-pencil);
    font-family: var(--font-hand);
    font-size: 1.5em;
    line-height: 1.08;
    rotate: -4deg;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /*
   * Zona táctil: una nota de una sola línea mide menos de 44 px de alto, así que la
   * zona crece lo mismo por arriba y por abajo hasta alcanzarlos. Si la nota ya es
   * más alta, el cálculo da un valor positivo y min() lo deja en cero.
   */
  .sheet__note::after {
    content: "";
    position: absolute;
    inset-block: min(0px, calc((100% - 2.75rem) / 2));
    inset-inline: 0;
  }

  .sheet__note-text {
    text-wrap: balance;
  }

  /* Casilla dibujada a mano: sus cuatro esquinas son distintas a propósito. */
  .sheet__box {
    position: relative;
    inline-size: 0.7em;
    block-size: 0.7em;
    margin-block-start: 0.16em;
    border: 0.075em solid var(--color-accent);
    border-radius: 0.14em 0.2em 0.16em 0.22em;
    transition: background-color var(--duration-fast) ease;
  }

  /* Solo con puntero: en una pantalla táctil el «hover» se queda pegado tras el toque. */
  @media (hover: hover) {
    .sheet__note:hover .sheet__box {
      background-color: color-mix(in oklch, var(--color-accent) 16%, transparent);
    }
  }

  .sheet__toggle:focus-visible ~ .sheet__note {
    outline: 0.1875rem solid var(--color-focus);
    outline-offset: 0.12em;
    border-radius: var(--radius-mark);
  }

  /* Visto: un trazo que se sale de la casilla, como hecho con prisa. */
  .sheet__check {
    position: absolute;
    inset-block-end: 8%;
    inset-inline-start: 6%;
    inline-size: 150%;
    block-size: 150%;
    overflow: visible;
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* El trazo mide 1 (pathLength). Con el desfase en 1 no se ve; en 0, entero. */
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  .sheet__toggle:checked ~ .sheet__note .sheet__check {
    stroke-dashoffset: 0;
  }

  /* ── Sello: solo cuando no queda ninguna observación pendiente ───────── */
  .sheet__stamp {
    position: absolute;
    inset-block-end: 4.6cqi;
    inset-inline-end: 6cqi;
    font-size: clamp(1.5rem, 6.8cqi, 2.125rem);
    opacity: 0;
    scale: 1.5;
    visibility: hidden;
  }

  .sheet__page:not(:has(.sheet__toggle:not(:checked))) .sheet__stamp {
    opacity: 1;
    scale: 1;
    visibility: inherit;
  }

  /*
   * Navegadores anteriores a 2023, sin :has(): no pueden saber si quedan
   * observaciones pendientes. La primera página, que llega levantada, conserva su
   * sello; en las demás no aparece.
   */
  @supports not selector(:has(*)) {
    .sheet__page--opening .sheet__stamp {
      opacity: 1;
      scale: 1;
      visibility: inherit;
    }
  }

  /* ── Indicación bajo la hoja ─────────────────────────────────────────── */
  /*
   * Hay dos textos y se ve uno: la invitación a probar o, cuando no queda ninguna
   * observación pendiente en ninguna página, la invitación a escribir. Ocupan la
   * misma celda para que el cambio no mueva lo que hay debajo.
   */
  .sheet__hints {
    display: grid;
    margin-block-start: var(--space-s);
    padding-inline-start: 4cqi;
  }

  .sheet__hint {
    grid-area: 1 / 1;
    color: var(--color-ink-soft);
    font-size: var(--step--1);
    line-height: var(--leading-snug);
  }

  .sheet__hint--done {
    visibility: hidden;
  }

  .sheet:not(:has(.sheet__toggle:not(:checked))) .sheet__hint--pending {
    visibility: hidden;
  }

  .sheet:not(:has(.sheet__toggle:not(:checked))) .sheet__hint--done {
    visibility: visible;
  }

  /* Hoja angosta (celular): la nota baja y queda al pie de su apartado. */
  @container (inline-size < 24rem) {
    .sheet__page {
      padding-block-end: 33cqi;
    }

    .sheet__block {
      grid-template-columns: minmax(0, 1fr);
    }

    .sheet__note {
      grid-column: 1;
      grid-row: auto;
      justify-self: end;
      margin-block-start: 1.2cqi;
      font-size: 1.55em;
      rotate: -2.5deg;
    }
  }

  /*
   * Contraste forzado (Windows): el navegador anula los fondos y pinta una placa
   * opaca detrás de cada línea de texto. El subrayado a lápiz y el resaltador, que
   * son fondos, se sustituyen por un subrayado de texto y por un borde.
   */
  @media (forced-colors: active) {
    .sheet__flag {
      background-image: none;
      text-decoration: underline;
    }

    .sheet__fix {
      /* En su capa normal: por debajo quedaría tapada por la placa del párrafo. */
      z-index: auto;
      border-block-end: 0.12em solid Highlight;
    }

    .sheet__check {
      stroke: CanvasText;
    }

    /* El punto de pendiente es un fondo: se le pide al navegador que lo conserve. */
    .sheet__tab::after {
      forced-color-adjust: none;
      background-color: CanvasText;
      box-shadow: none;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    /*
     * ── Respuesta a las acciones del visitante ───────────────────────────
     * Al marcar una casilla: el resaltador recorre la corrección, se dibuja el
     * visto y, si era la última, cae el sello. Al cambiar de pestaña, la página
     * entra con un movimiento corto.
     */
    .sheet__fix {
      transition:
        color 0.25s ease,
        background-size 0.4s var(--ease-out);
    }

    .sheet__check {
      transition: stroke-dashoffset 0.25s var(--ease-out) 0.12s;
    }

    .sheet__stamp {
      transition:
        opacity 0.12s ease,
        scale 0.22s cubic-bezier(0.3, 1.4, 0.5, 1);
    }

    .sheet__tab::after {
      transition: opacity 0.2s ease;
    }

    .sheet__tab-input--metodo:checked ~ .sheet__stack .sheet__page--metodo,
    .sheet__tab-input--referencias:checked ~ .sheet__stack .sheet__page--referencias,
    .sheet__tab-input--matriz:checked ~ .sheet__stack .sheet__page--matriz {
      animation: sheet-turn 0.26s var(--ease-out);
    }

    @keyframes sheet-turn {
      from {
        opacity: 0.35;
        translate: 0 0.8cqi;
      }
    }

    /*
     * ── Secuencia de la primera página ──────────────────────────────────
     * La página que abre llega con sus casillas marcadas. Al verse por primera
     * vez, recorre la historia completa: por cada observación se subraya el
     * texto, aparece la nota, se resalta la corrección y se marca el visto; al
     * final cae el sello.
     *
     * - data-sequence="auto": la secuencia corre (es el valor que trae el HTML).
     * - data-sequence="armed": queda en pausa en su primer fotograma. Lo pone
     *   js/modules/sheet-sequence.js mientras la hoja está fuera de pantalla.
     *
     * Cada animación solo declara su punto de partida; el de llegada es el estilo
     * de reposo definido arriba.
     */
    .sheet {
      --sequence-start: 0.7s; /* espera inicial: deja asentar la carga */
      --sequence-step: 1.15s; /* tiempo entre una observación y la siguiente */
    }

    .sheet__page--opening .sheet__block:nth-of-type(1) {
      --block-delay: var(--sequence-start);
    }

    .sheet__page--opening .sheet__block:nth-of-type(2) {
      --block-delay: calc(var(--sequence-start) + var(--sequence-step));
    }

    .sheet__page--opening .sheet__block:nth-of-type(3) {
      --block-delay: calc(var(--sequence-start) + 2 * var(--sequence-step));
    }

    .sheet[data-sequence] .sheet__page--opening .sheet__flag {
      animation: sheet-underline 0.45s var(--ease-out) var(--block-delay) backwards;
    }

    .sheet[data-sequence] .sheet__page--opening .sheet__note {
      animation: sheet-write 0.5s var(--ease-out) calc(var(--block-delay) + 0.3s) backwards;
    }

    .sheet[data-sequence] .sheet__page--opening .sheet__fix {
      animation: sheet-correct 0.4s var(--ease-out) calc(var(--block-delay) + 0.75s) backwards;
    }

    .sheet[data-sequence] .sheet__page--opening .sheet__check {
      animation: sheet-check 0.25s var(--ease-out) calc(var(--block-delay) + 1s) backwards;
    }

    .sheet[data-sequence] .sheet__page--opening .sheet__stamp {
      animation: sheet-stamp 0.22s cubic-bezier(0.3, 1.4, 0.5, 1)
        calc(var(--sequence-start) + 3 * var(--sequence-step) + 0.25s) backwards;
    }

    .sheet[data-sequence="armed"]
      .sheet__page--opening
      :is(.sheet__flag, .sheet__note, .sheet__fix, .sheet__check, .sheet__stamp) {
      animation-play-state: paused;
    }

    @keyframes sheet-underline {
      from {
        background-size: 0% var(--flag-thickness);
      }
    }

    /* La nota se descubre de izquierda a derecha. Parte de un recorte sin ancho: con
       un margen a la izquierda asomaría el borde de la casilla antes de tiempo. */
    @keyframes sheet-write {
      from {
        clip-path: inset(-20% 100% -20% 0);
      }

      to {
        clip-path: inset(-20% -5% -20% -5%);
      }
    }

    @keyframes sheet-correct {
      from {
        background-size: 0% 78%;
        color: transparent;
      }
    }

    @keyframes sheet-check {
      from {
        stroke-dashoffset: 1;
      }
    }

    @keyframes sheet-stamp {
      from {
        opacity: 0;
        scale: 1.6;
      }
    }
  }
}