/* ============================================================
   lectura.css — la materia: el índice y el lector de capítulos

   El lector tiene margen: el texto a la izquierda, en una columna de ~75
   caracteres, y las notas de estudio a la derecha, en azul, a la altura
   del bloque que comentan. Bajo 1100 px el margen se mete en el texto,
   debajo de su bloque.

   Tres pieles, una por procedencia, como en integracion-i3:
     · DEFINICIÓN     panel verde macizo, texto oscuro;
     · RESULTADO      fondo elevado y filete fino; los teoremas, además,
                      con las esquinas en «L» del póster;
     · EXTRA (H1–H9)  azul: es nuestro, no del apunte.
   El rótulo va en mono mayúscula y la ficha Hip. / Tesis / Símb. es la de
   los formularios del usuario.
   ============================================================ */

/* ------------------------------------------------------------ el índice */

.materia-ix { max-width: 60rem; }
.ix-caps { list-style: none; margin: 0 auto; padding: 0; max-width: 54rem; }
.ix-cap { padding: 1.1rem 0 1rem; border-bottom: 1px solid var(--filete-2); }
.ix-cap:first-child { border-top: 1px solid var(--linea); }
.ix-cap-enlace { display: flex; align-items: baseline; gap: 1rem; color: var(--crema); }
.ix-cap-enlace:hover .ix-cap-tit { color: var(--verde); }
.ix-romano {
  font-family: var(--f-mono);
  font-weight: 700;
  color: var(--verde);
  font-size: 1.7rem;
  line-height: 1;
  min-width: 3.2rem;
  text-align: right;
}
.ix-cap-txt { display: flex; flex-direction: column; min-width: 0; flex: 0 1 auto; }
.ix-cap-tit { font-size: 1.42rem; line-height: 1.22; transition: color .2s; }
.ix-cap-bajada { color: var(--crema-2); font-style: normal; font-size: 1rem; line-height: 1.4; margin-top: .15rem; }
.ix-guia { flex: 1 1 2rem; border-bottom: 1px dotted var(--filete); transform: translateY(-.4em); min-width: 1.5rem; }
.ix-pag { color: var(--crema-3); white-space: nowrap; font-variant-numeric: lining-nums; font-size: .95rem; }
.ix-cap-refs { margin: .55rem 0 0 4.2rem; }

.ix-bloque { max-width: 54rem; margin: 0 auto; }
.ix-texto { color: var(--crema-2); max-width: var(--medida); margin-bottom: 1.1rem; }
.cambios ul { margin: 0; padding-left: 1.2rem; }
.cambios li { margin-bottom: .45rem; color: var(--crema); }
.cambios li::marker { color: var(--menta); }

.notacion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.4rem; margin: 0; }
.notacion-fila { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .9rem; padding: .42rem 0; border-bottom: 1px solid var(--filete-2); align-items: baseline; }
.notacion-fila dt { color: var(--verde); }
.notacion-fila dd { margin: 0; color: var(--crema-2); font-size: .97rem; }

/* El mapa de dependencias. */
.mapa-wrap { overflow-x: auto; margin: .4rem -.5rem 0; padding: .5rem; }
.mapa { width: 100%; min-width: 820px; height: auto; display: block; }
.mapa-flecha { fill: none; stroke: var(--crema-3); stroke-width: 1; opacity: .75; transition: opacity .2s, stroke .2s, stroke-width .2s; }
.mapa-punta { fill: var(--crema-3); }
.mapa-nodo rect { fill: var(--hoja); stroke: var(--menta); stroke-width: 1.1; transition: fill .2s, opacity .2s; }
.mapa-nodo { transition: opacity .2s; }
.mapa-nodo.tipo-cor rect { stroke: var(--verde); }
.mapa-nodo.tipo-extra rect { stroke: var(--azul); stroke-dasharray: 3 2; }
.mapa-nodo.tipo-fuera rect { stroke: var(--crema-3); stroke-dasharray: 2 3; fill: transparent; }
.mapa-rot { font-family: var(--f-mono); font-size: 10.1px; letter-spacing: .12em; fill: var(--verde); text-transform: uppercase; }
.mapa-nodo.tipo-res .mapa-rot { fill: var(--menta-texto); }
.mapa-nodo.tipo-extra .mapa-rot { fill: var(--azul); }
.mapa-nodo.tipo-fuera .mapa-rot { fill: var(--crema-2); }
.mapa-nom { font-family: var(--f-texto); font-size: 11.5px; font-style: normal; fill: var(--crema-2); }
.mapa-enlace:hover rect, .mapa-enlace:focus rect { fill: var(--menta-velo); }
.mapa.con-foco .mapa-flecha { opacity: .12; }
.mapa.con-foco .mapa-flecha.activa { opacity: 1; stroke: var(--verde); stroke-width: 1.7; }
.mapa.con-foco .mapa-nodo { opacity: .35; }
.mapa.con-foco .mapa-nodo.activa { opacity: 1; }
.mapa-ley { font-size: .92rem; color: var(--crema-3); margin-top: .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; }
.mapa-ley-c { display: inline-block; width: 1.4rem; height: .7rem; border: 1.2px solid var(--menta); border-radius: 2px; margin-left: .5rem; }
.mapa-ley-c.tipo-cor { border-color: var(--verde); }
.mapa-ley-c.tipo-extra { border-color: var(--azul); border-style: dashed; }
.mapa-ley-c.tipo-fuera { border-color: var(--crema-3); border-style: dotted; }

/* ------------------------------------------------------------ el capítulo */

.capitulo { max-width: calc(var(--medida) + var(--hueco) + var(--margen)); margin: 0 auto; }

.cap-cab { max-width: var(--medida); margin: 1.2rem 0 2.8rem; position: relative; }
.cap-vineta { color: var(--menta); width: 150px; margin-bottom: .6rem; }
.vineta { width: 100%; height: auto; display: block; overflow: visible; }
.vineta .traza { animation: trazar 2s cubic-bezier(.4, .1, .2, 1) both; }
.vin-tenue { opacity: .55; }
.vin-recta { stroke: var(--verde); }
.vin-eje { opacity: .35; }
.vin-p { fill: var(--verde); stroke: none; }
.vin-t { font-family: var(--f-texto); font-style: normal; font-size: 15px; fill: var(--menta-texto); stroke: none; }
.vin-chica { font-size: 12px; }
.cap-miga { display: block; color: var(--menta-texto); margin-bottom: .35rem; }
.cap-miga:hover { color: var(--verde); }
.cap-titulo {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.005em;
}
.cap-bajada { color: var(--crema-2); font-style: normal; margin-top: .7rem; font-size: 1.1rem; }
.cap-toc { margin-top: 1.2rem; padding-top: .8rem; border-top: 1px solid var(--linea); }

/* La página con margen: dos columnas, el margen a la altura de su bloque. */
.cuerpo {
  display: grid;
  grid-template-columns: minmax(0, var(--medida)) var(--margen);
  column-gap: var(--hueco);
  row-gap: 1.45rem;
  align-items: start;
}
.cuerpo > * { grid-column: 1; min-width: 0; }
.cuerpo > .margen { grid-column: 2; }

.parrafo p + p, .parrafo ul, .parrafo ol { margin-top: .6em; }
.parrafo ul, .parrafo ol { padding-left: 1.25rem; margin-bottom: 0; }
.parrafo li + li { margin-top: .3rem; }
.parrafo li::marker { color: var(--menta); }

h2.sub {
  margin-top: 1.4rem;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  color: var(--crema);
}
.sub-floron { flex: none; width: .55rem; height: .55rem; background: var(--verde); transform: translateY(-.12em); }

/* ------------------------------------------------------------ un resultado */

.res {
  position: relative;
  padding: 1rem 1.2rem 1.05rem;
  background: var(--noche-2);
  border: 1px solid var(--filete);
}
/* Las esquinas en «L» del póster: solo los teoremas. */
.res.k-teorema { border-color: var(--linea); }
.res.k-teorema::before, .res.k-teorema::after {
  content: ''; position: absolute; width: 22px; height: 22px; pointer-events: none;
}
.res.k-teorema::before { top: -1px; left: -1px; border-top: var(--filete-ancho) solid var(--verde); border-left: var(--filete-ancho) solid var(--verde); }
.res.k-teorema::after { bottom: -1px; right: -1px; border-bottom: var(--filete-ancho) solid var(--verde); border-right: var(--filete-ancho) solid var(--verde); }
.res.k-extra { background: var(--azul-velo); border: none; border-left: 2px solid var(--azul); }

/* DEFINICIÓN: el panel macizo. Todo lo de adentro, en el oscuro del panel. */
.res.k-definicion { background: var(--panel); border: none; color: var(--sobre-panel); }
.res.k-definicion .res-rot, .res.k-definicion .res-nombre, .res.k-definicion .ficha-fila dt,
.res.k-definicion a, .res.k-definicion a:hover { color: var(--sobre-panel); }
.res.k-definicion .res-fuente { color: color-mix(in srgb, var(--sobre-panel) 70%, transparent); }
.res.k-definicion a.xref { border-bottom-color: color-mix(in srgb, var(--sobre-panel) 50%, transparent); font-weight: 600; }
.res.k-definicion a.xref:hover { background: rgba(4, 20, 12, .1); }
.res.k-definicion .ficha-sim { background: rgba(4, 20, 12, .1); }
.res.k-definicion .demo-tit, .res.k-definicion .demo-origen, .res.k-definicion .demo-n,
.res.k-definicion .demo-flecha { color: var(--sobre-panel); }

.res-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .65rem; margin-bottom: .55rem; }
.res-rot {
  font-variant-numeric: lining-nums;
  letter-spacing: .12em;
  font-weight: 600;
  font-size: .87rem;
  color: var(--verde);
  font-family: var(--f-mono);
  text-transform: uppercase;
}
a.res-rot:hover { color: var(--verde-2); }
.k-extra .res-rot { color: var(--azul); }
.res-nombre { font-size: 1.12rem; font-style: normal; font-weight: 400; color: var(--crema); }
.res-hot { color: var(--menta); display: inline-flex; font-size: 1rem; transform: translateY(.1em); }
.res-fuente { margin-left: auto; font-size: .9rem; font-style: normal; color: var(--crema-3); }

.ficha { margin: 0; }
.ficha-fila { display: grid; grid-template-columns: 3.7rem minmax(0, 1fr); column-gap: .9rem; padding: .18rem 0; }
.ficha-fila dt {
  letter-spacing: .12em;
  font-weight: 500;
  color: var(--verde);
  padding-top: .02rem;
  font-family: var(--f-mono);
  text-transform: uppercase;
  font-size: .78em;
}
.k-extra .ficha-fila dt { color: var(--azul); }
.ficha-fila dd { margin: 0; min-width: 0; }
.ficha-sim { background: var(--menta-velo); margin: .3rem 0 0 -.55rem; padding: .32rem .55rem .36rem; border-radius: 2px; }
.res-def p + p { margin-top: .5rem; }

.res-ojo {
  margin-top: .65rem;
  padding: .5rem .8rem .55rem;
  border-left: 2px solid var(--alerta);
  background: var(--alerta-velo);
  font-size: .97rem;
}
.res-ojo .etq { color: var(--alerta); display: block; }

/* ------------------------------------------------------------ demostraciones */

.demo { margin-top: .75rem; }
.demo-sum {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .7rem;
  padding: .2rem 0;
  user-select: none;
}
.demo-sum::-webkit-details-marker { display: none; }
.demo-flecha { width: .82em; height: .82em; color: var(--menta-texto); transition: transform .25s ease; transform: translateY(.06em); }
details[open] > summary .demo-flecha { transform: translateY(.06em) rotate(90deg); }
.demo-tit { letter-spacing: .12em; color: var(--crema-2); font-weight: 500; font-family: var(--f-mono); text-transform: uppercase; font-size: .78em; }
.demo-sum:hover .demo-tit { color: var(--verde); }
.demo-origen { font-style: normal; color: var(--crema-3); font-size: .93rem; }
.demo-origen.es-nuestra { color: var(--azul); }
.demo-n { margin-left: auto; color: var(--crema-3); font-size: .9rem; font-variant-numeric: lining-nums; }

.pasos { list-style: none; counter-reset: paso; margin: .5rem 0 0; padding: 0; }
.paso {
  counter-increment: paso;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1.1rem;
  padding: .32rem 0 .32rem 2rem;
  border-top: 1px solid var(--filete-2);
}
.paso::before {
  content: counter(paso);
  position: absolute;
  left: .15rem;
  top: .34rem;
  font-family: var(--f-mono);
  font-size: .82rem;
  color: var(--menta-texto);
}
.paso-md { min-width: 0; }
.paso-md p + p { margin-top: .4rem; }
.paso-por {
  align-self: end;
  justify-self: end;
  max-width: 12rem;
  text-align: right;
  font-style: normal;
  color: var(--crema-2);
  font-size: .9rem;
  line-height: 1.35;
  padding-bottom: .1rem;
}
.pasos::after {
  content: '■';
  display: block;
  text-align: right;
  font-size: .6rem;
  color: var(--crema-2);
  padding-top: .2rem;
  border-top: 1px solid var(--filete-2);
}

/* ------------------------------------------------------------ el margen */

.margen { font-size: .9rem; line-height: 1.45; color: var(--azul); padding-top: .2rem; }
.nota-m + .nota-m { margin-top: .9rem; }
.nota-m p + p { margin-top: .35rem; }
.nota-m-etq {
  display: block;
  letter-spacing: .12em;
  font-weight: 500;
  font-size: .76rem;
  margin-bottom: .1rem;
  color: var(--azul);
  font-family: var(--f-mono);
  text-transform: uppercase;
}
.nota-m.tono-trampa .nota-m-etq, .nota-m.tono-trampa { color: var(--alerta); }
.nota-m.tono-conway, .nota-m.tono-conway .nota-m-etq { color: var(--crema-2); }
.nota-m ul, .nota-m ol { padding-left: 1rem; margin: .3rem 0 0; }

/* ------------------------------------------------------------ ejercicios dentro de la materia */

.ej-materia {
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  padding: .95rem 1.15rem 1rem;
  background: var(--hoja);
}
.ej-materia-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem; margin-bottom: .45rem; }
.ej-materia-rot { letter-spacing: .12em; font-weight: 600; color: var(--azul); font-variant-numeric: lining-nums; font-family: var(--f-mono); text-transform: uppercase; font-size: .78em; }
.ej-materia-alias { font-weight: 400; color: var(--crema-3); }
.ej-materia-tit { font-size: 1.08rem; font-style: normal; font-weight: 400; }
.ej-materia-md { font-size: .98rem; }
.ej-materia-ir { display: inline-block; margin-top: .55rem; font-style: normal; }

/* ------------------------------------------------------------ notas, erratas, tablas */

.nota {
  border-left: 2px solid var(--azul);
  background: var(--azul-velo);
  padding: .65rem 1rem .75rem;
  color: var(--crema);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.nota-etq { display: block; letter-spacing: .12em; color: var(--azul); margin-bottom: .2rem; font-weight: 500; font-family: var(--f-mono); text-transform: uppercase; font-size: .78em; }
.nota.tono-trampa { border-left-style: dashed; }
.nota.tono-conway { border-left-color: var(--crema-3); background: var(--noche-2); }
.nota.tono-conway .nota-etq { color: var(--crema-2); }

.errata { border-left: 2px solid var(--alerta); background: var(--alerta-velo); padding: .7rem 1rem .8rem; }
.errata .etq { color: var(--alerta); display: block; margin-bottom: .3rem; }

.tabla-wrap { overflow-x: auto; }
.tabla-tit { letter-spacing: .12em; color: var(--menta-texto); margin-bottom: .3rem; font-family: var(--f-mono); text-transform: uppercase; font-size: .78em; }
.tabla { border-collapse: collapse; width: 100%; font-size: .95rem; font-variant-numeric: lining-nums; }
.tabla th {
  text-align: left;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--verde);
  border-top: 1.5px solid var(--crema);
  border-bottom: 1px solid var(--crema);
  padding: .35rem .6rem;
  vertical-align: bottom;
  font-family: var(--f-mono);
  text-transform: uppercase;
  font-size: .78em;
}
.tabla td { padding: .38rem .6rem; border-bottom: 1px solid var(--filete-2); vertical-align: top; }
.tabla tbody tr:last-child td { border-bottom: 1.5px solid var(--crema); }

/* ------------------------------------------------------------ al pie del capítulo */

.cap-usan { max-width: var(--medida); margin-top: 3rem; }
.cap-usan-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: .5rem .9rem; }
.cap-usan-item { display: flex; flex-direction: column; padding: .55rem .8rem; border: 1px solid var(--filete-2); border-radius: var(--radio); color: var(--crema); }
.cap-usan-item:hover { border-color: var(--linea); background: var(--menta-velo); color: var(--crema); }
.cap-usan-rot { letter-spacing: .12em; color: var(--azul); font-variant-numeric: lining-nums; font-family: var(--f-mono); text-transform: uppercase; font-size: .78em; }
.cap-usan-tit { font-size: .97rem; line-height: 1.35; }

.cap-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 3.2rem; max-width: var(--medida); border-top: 1px solid var(--linea); padding-top: 1.2rem; }
.cap-nav-a { display: flex; flex-direction: column; color: var(--crema); }
.cap-nav-a.sig { text-align: right; }
.cap-nav-a:hover .cap-nav-tit { color: var(--verde); }
.cap-nav-tit { font-family: var(--f-display); font-size: 1.3rem; line-height: 1.2; transition: color .2s; }

/* ------------------------------------------------------------ pantallas angostas */

@media (max-width: 1100px) {
  .capitulo { max-width: var(--medida); }
  .cuerpo { grid-template-columns: minmax(0, 1fr); }
  .cuerpo > .margen { grid-column: 1; margin-top: -.7rem; padding: .55rem .9rem .6rem; border-left: 1px solid color-mix(in srgb, var(--azul) 45%, transparent); background: var(--azul-velo); border-radius: 0 var(--radio) var(--radio) 0; }
}
@media (max-width: 700px) {
  .notacion { grid-template-columns: minmax(0, 1fr); }
  .notacion-fila { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .ix-cap-enlace { flex-wrap: wrap; gap: .2rem .8rem; }
  .ix-romano { min-width: 2.2rem; font-size: 1.9rem; }
  .ix-cap-txt { flex: 1 1 calc(100% - 3.2rem); }
  .ix-guia { display: none; }
  .ix-pag { margin-left: 3rem; }
  .ix-cap-refs { margin-left: 0; }
  .res { padding-left: .85rem; }
  .res.k-teorema { padding-left: .8rem; }
  .ficha-fila { grid-template-columns: minmax(0, 1fr); }
  .ficha-fila dt { padding: 0; }
  .ficha-sim { margin-left: -.4rem; }
  .paso { grid-template-columns: minmax(0, 1fr); padding-left: 1.6rem; }
  .paso-por { justify-self: end; max-width: none; padding-top: .15rem; }
  .res-fuente { margin-left: 0; flex-basis: 100%; }
  .cap-nav { grid-template-columns: minmax(0, 1fr); }
  .cap-nav-a.sig { text-align: left; }
}