/* ============================================================
   formulario.css — el formulario legal como planchas

   Cada grupo (la caja y sus consecuencias) es una ficha de papel; en
   pantallas anchas van en dos columnas, como en el PDF, y se leen de
   arriba abajo y de izquierda a derecha (columnas de CSS, sin reordenar).
   ============================================================ */

.formulario { max-width: 74rem; }

/* ------------------------------------------------------------ arriba: el método y «Si piden» */

.f-arriba { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 2rem; align-items: start; margin-bottom: 2rem; }
.f-metodo { border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.1rem 1.05rem; background: var(--hoja); position: sticky; top: calc(var(--cab-alto) + 16px); }
.f-metodo-etq { color: var(--menta-texto); display: block; margin-bottom: .4rem; }
.f-metodo-lista { margin: 0; padding-left: 1.25rem; font-size: .96rem; }
.f-metodo-lista li + li { margin-top: .35rem; }
.f-metodo-lista li::marker { color: var(--menta-texto); font-family: var(--f-display); font-style: normal; }

.si-piden .h-seccion { margin-top: 0; }
.si-piden-txt { color: var(--crema-2); margin-bottom: .7rem; }
.si-piden-buscar { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .6rem; }
.si-piden-in {
  flex: 1;
  font: inherit;
  font-style: normal;
  color: var(--crema);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--linea);
  padding: .2rem .1rem;
}
.si-piden-in:focus { outline: none; border-bottom-color: var(--verde); }
.si-piden-lista { list-style: none; margin: 0; padding: 0; }
.si-piden-fila { display: grid; grid-template-columns: minmax(0, 1fr) 1.4rem minmax(0, 1.25fr); gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--filete-2); align-items: baseline; }
.si-piden-pide { font-style: normal; }
.si-piden-flecha { color: var(--menta); text-align: center; }
.si-piden-usa { font-size: .97rem; }
.si-piden-nada { font-style: normal; color: var(--crema-3); margin-top: .5rem; }

/* ------------------------------------------------------------ la barra de herramientas */

.f-barra {
  position: sticky;
  top: var(--cab-alto);
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: .55rem 0;
  margin-bottom: 1rem;
  background: color-mix(in srgb, var(--noche) 94%, transparent);
  border-bottom: 1px solid var(--filete-2);
}
.f-botones { display: flex; gap: .5rem; }
.f-tapar-ayuda { font-style: normal; color: var(--azul); margin: -.4rem 0 1rem; }

/* ------------------------------------------------------------ las planchas */

.f-sec { margin-top: 1.4rem; }
.f-sec-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.f-sec-cab .h-seccion { flex: 1; margin-bottom: 1rem; }
.f-sec-pags { color: var(--crema-3); font-style: normal; font-size: .93rem; white-space: nowrap; }
.f-columnas { columns: 2; column-gap: 2rem; }
.f-subsec {
  break-after: avoid;
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 500;
  margin: .4rem 0 .8rem;
  color: var(--menta-texto);
}
.f-grupo {
  break-inside: avoid;
  margin: 0 0 1.2rem;
  padding: .95rem 1.1rem 1rem;
  background: var(--hoja);
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  break-inside: avoid-column;
}
.f-grupo.es-hot { border-color: var(--linea); box-shadow: inset 0 3px 0 -1px var(--menta-velo); }
.f-grupo .res { padding-left: .95rem; }
.f-grupo .res + .res { margin-top: .9rem; }
.f-cab-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; margin-bottom: .4rem; }
.f-sub-tit { font-size: 1.08rem; font-weight: 500; color: var(--azul); }
.f-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; margin-top: .55rem; font-size: .9rem; }
.f-ubic { color: var(--menta-texto); letter-spacing: .12em; font-variant-numeric: lining-nums; font-family: var(--f-mono); text-transform: uppercase; font-size: .78em; }
.f-ir { font-style: normal; }

.f-cons { margin-top: .75rem; padding-top: .55rem; border-top: 1px solid var(--filete-2); }
.f-cons-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem; margin-bottom: .2rem; }
.f-cons-cab .etq { color: var(--menta-texto); }
.f-cons-de { font-style: normal; color: var(--crema-3); font-size: .9rem; }
.f-cons-lista { margin: 0; padding: 0; list-style: none; counter-reset: con; }
.f-con { counter-increment: con; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .8rem; padding: .22rem 0 .22rem 1.45rem; font-size: .96rem; }
.f-con::before { content: counter(con) '.'; position: absolute; left: 0; top: .22rem; color: var(--menta-texto); font-variant-numeric: lining-nums; font-weight: 600; }
.f-con-tit { font-weight: 600; }
.f-con-hot { color: var(--menta); }
.f-con .paso-por { align-self: end; }

.f-info { margin-top: .4rem; }
.f-info + .f-info { margin-top: 1.1rem; }
.f-info-tit { letter-spacing: .12em; color: var(--verde); font-weight: 600; margin-bottom: .35rem; font-family: var(--f-mono); text-transform: uppercase; font-size: .78em; }
.f-info-md { font-size: .95rem; }
.f-info-md p + p { margin-top: .5rem; }
.f-grupo#tablas { columns: auto; }

/* ------------------------------------------------------------ Solo ★ y Tapar */

.formulario.solo-hot .f-grupo:not(.es-hot), .formulario.solo-hot .f-subsec { display: none; }
.formulario.tapado .f-grupo:not(.destapada) .ficha-fila:not(:first-child),
.formulario.tapado .f-grupo:not(.destapada) .f-cons,
.formulario.tapado .f-grupo:not(.destapada) .res-ojo,
.formulario.tapado .f-grupo:not(.destapada) .res-def,
.formulario.tapado .f-grupo:not(.destapada) .f-info { display: none; }
.formulario.tapado .f-grupo:not(.destapada) { cursor: pointer; border-style: dashed; }
.formulario.tapado .f-grupo:not(.destapada)::after {
  content: 'Recita la tesis y los corolarios. Clic para destapar.';
  display: block;
  margin-top: .4rem;
  font-style: normal;
  font-size: .9rem;
  color: var(--azul);
}

@media (max-width: 1180px) { .f-columnas { columns: 1; } .formulario { max-width: 48rem; } }
@media (max-width: 860px) {
  .f-arriba { grid-template-columns: minmax(0, 1fr); }
  .f-metodo { position: static; }
}
@media (max-width: 560px) {
  .si-piden-fila { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .si-piden-flecha { display: none; }
  .si-piden-usa { padding-left: .8rem; border-left: 1px solid var(--linea); }
  .f-grupo { padding: .8rem .8rem .85rem; }
  .f-con { grid-template-columns: minmax(0, 1fr); }
  .f-con .paso-por { justify-self: end; }
  .f-botones .btn { padding: .35rem .8rem .42rem; }
}