:root {
  --fondo: #f1fcee;
  --tinta: #1d1d1b;
  --suave: #6b6b66;
  --linea: #cfe3cc;
  --verde: #5a8859;
  --verde-claro: #c4e6cc;
  --marca: rgba(90, 136, 89, 0.16);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: Aleo, Georgia, serif;
  font-weight: 350;
  line-height: 1.6;
}

a { color: inherit; }
a:hover { color: var(--verde); }

.contenedor { max-width: 46rem; margin: 0 auto; padding: 2.5rem 1rem 5rem; }

.migas { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 0.85rem; color: var(--suave); margin-bottom: 2rem; }
.migas a { text-decoration: none; }

.idioma { display: inline-flex; border: 1px solid var(--linea); border-radius: 999px; overflow: hidden; }
.idioma button {
  font: inherit; font-size: 0.8rem; letter-spacing: 0.04em; padding: 0.25rem 0.75rem;
  border: 0; background: transparent; color: var(--suave); cursor: pointer;
}
.idioma button[aria-pressed="true"] { background: var(--verde); color: #fff; }

h1 { font-family: "Vollkorn SC", Georgia, serif; font-weight: 600; font-size: 2rem; line-height: 1.2; margin-bottom: 0.5rem; }
.entradilla { color: var(--suave); margin-bottom: 2rem; }

/* Índice */
.filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.filtros input, .filtros select {
  font: inherit; font-size: 0.9rem; padding: 0.35rem 0.6rem;
  border: 0.15rem solid var(--tinta); border-radius: 999px; background: #fff; color: var(--tinta); padding: 0.35rem 0.9rem;
}
.filtros input { flex: 1 1 12rem; }

.cuenta { font-size: 0.85rem; color: var(--suave); margin: -0.8rem 0 1rem; }

.anio { font-family: "Vollkorn SC", Georgia, serif; font-size: 1.5rem; margin: 2.2rem 0 0.8rem; color: var(--verde); }

/* Cada pieza es una burbuja: el título manda, luego la fecha y dos versos */
.burbujas { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 1rem; }
.burbuja {
  display: flex; flex-direction: column; gap: 0.35rem; height: 100%;
  padding: 0.9rem 1rem 1rem;
  border: 0.2rem solid var(--tinta); border-radius: 16px;
  background: var(--color, #e5d8f7); color: var(--tinta);
  text-decoration: none; transition: transform 200ms, box-shadow 200ms;
}
.burbuja:hover { color: var(--tinta); transform: translate(-4px, -4px) rotate(-0.6deg); box-shadow: 4px 4px var(--tinta); }
.burbuja .t { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 700; line-height: 1.1; overflow-wrap: break-word; hyphens: auto; }
.burbuja .f { font-size: 0.8rem; color: #4a4a45; }
.burbuja .etiquetas { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: auto; padding-top: 0.6rem; }
.burbuja .tipo, .burbuja .dedica { padding: 0.05rem 0.5rem; border: 1px solid var(--tinta); font-size: 0.7rem; background: rgba(255,255,255,0.5); }
.burbuja .tipo { border-radius: 999px; }
.burbuja .dedica { border-radius: 2px; border-style: dashed; }
.vacio { color: var(--suave); padding: 1rem 0; }

/* Poema */
.meta { font-size: 0.85rem; color: var(--suave); margin-bottom: 1.5rem; }
.meta a { color: var(--suave); }

/* Botones de capas: Forma · Sentido · Referencias */
:root { --c-forma: #8a5fbf; --c-sentido: var(--verde); --c-referencia: #c0753a; }
/* Interruptor general: sin análisis solo se ve el poema */
.herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 2rem; }
.interruptor { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--suave); cursor: pointer; user-select: none; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor .pista { position: relative; width: 2.2rem; height: 1.25rem; border-radius: 999px; background: var(--linea); transition: background 0.2s; }
.interruptor .pista::after { content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 0.95rem; height: 0.95rem; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.interruptor input:checked + .pista { background: var(--verde); }
.interruptor input:checked + .pista::after { transform: translateX(0.95rem); }
.interruptor input:focus-visible + .pista { outline: 2px solid var(--verde); outline-offset: 2px; }
main:not(.analisis) .capas, main:not(.analisis) > section { display: none; }
.capas { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.capas button {
  font: inherit; font-size: 0.85rem; padding: 0.25rem 0.85rem; cursor: pointer;
  border: 1px solid var(--color-capa); border-radius: 999px; background: transparent; color: var(--color-capa);
}
.capas button[aria-pressed="true"] { background: var(--color-capa); color: #fff; }
.capa-forma { --color-capa: var(--c-forma); }
.capa-sentido { --color-capa: var(--c-sentido); }
.capa-referencia { --color-capa: var(--c-referencia); }

.poema { white-space: pre-wrap; font-size: 1.1rem; line-height: 1.75; margin-bottom: 2.5rem; }
.poema .estrofa { display: block; height: 1rem; }
.verso { display: block; min-height: 1.75em; }
/* Traducción: pequeña, debajo del verso y solo con la web en inglés; el original siempre se ve */
.tr { display: none; }
html[data-lang="en"] .verso .tr { display: block; margin: -0.35rem 0 0.35rem; font-size: 0.85rem; line-height: 1.35; font-style: italic; color: #5d7f62; }
html[data-lang="en"] h1 .tr { display: block; margin-top: 0.3rem; font-size: 1rem; font-weight: 400; font-style: italic; color: #5d7f62; letter-spacing: 0; text-transform: none; font-variant: normal; }

.anotado { transition: background-color 0.2s, box-shadow 0.2s; border-radius: 2px; }
.on-forma .c-forma, .on-sentido .c-sentido, .on-referencia .c-referencia { cursor: pointer; }
.on-forma .c-forma { box-shadow: inset 0 -1px 0 var(--c-forma); }
.on-sentido .c-sentido { box-shadow: inset 0 -1px 0 var(--c-sentido); }
.on-referencia .c-referencia { box-shadow: inset 0 -1px 0 var(--c-referencia); }
/* Tramos de varios versos: raya al margen en vez de subrayado */
.on-forma .r-forma, .on-sentido .r-sentido, .on-referencia .r-referencia { cursor: pointer; padding-left: 0.6rem; margin-left: -0.8rem; }
.on-forma .r-forma { border-left: 2px solid var(--c-forma); }
.on-referencia .r-referencia { border-left: 2px solid var(--c-referencia); }
.on-sentido .r-sentido { border-left: 2px solid var(--c-sentido); }
.on-forma .anotado.r-forma:hover, .on-sentido .anotado.r-sentido:hover, .on-referencia .anotado.r-referencia:hover { background: rgba(90, 136, 89, 0.07); }
.on-forma .anotado.c-forma:hover, .on-sentido .anotado.c-sentido:hover, .on-referencia .anotado.c-referencia:hover, .anotado.activo { background: var(--marca); }

.nota {
  display: none; margin: 0.4rem 0 0.8rem; padding: 0.7rem 0.9rem;
  border-left: 2px solid var(--color-capa, var(--verde)); background: #fff;
  font-size: 0.92rem; line-height: 1.5; white-space: normal; color: var(--tinta);
}
.nota.abierta { display: block; }
.poema { position: relative; }
/* En pantalla ancha la nota abierta sale al lado del verso, como en Genius */
@media (min-width: 1280px) {
  .poema .nota { position: absolute; left: calc(100% + 2rem); width: min(20rem, calc((100vw - 46rem) / 2 - 3rem)); margin: 0; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
}
.nota .autor {
  display: inline-block; margin-right: 0.5rem; padding: 0 0.45rem; border: 1px dashed var(--suave); border-radius: 2px;
  font-size: 0.7rem; color: var(--suave); vertical-align: 0.1em;
}

/* Forma: sílabas y letra de rima al margen, y la palabra que rima coloreada */
.metro { display: none; float: right; margin-left: 1rem; font-size: 0.75rem; color: var(--suave); font-variant-numeric: tabular-nums; }
.metro b { display: inline-block; min-width: 1.3em; text-align: center; border-radius: 3px; background: var(--rima, transparent); color: var(--tinta); font-weight: 600; }
.on-forma .metro { display: inline; }
.metro.anotado { box-shadow: none !important; text-decoration: underline dotted; text-underline-offset: 3px; }
.on-forma .rima { background: var(--rima); border-radius: 3px; }

.forma dl, .lectura .rasgos { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin-bottom: 0.8rem; font-size: 0.95rem; }
.forma dt, .lectura dt { color: var(--suave); }
.rimas { list-style: none; font-size: 0.9rem; }
.rimas li { padding: 0.15rem 0; }
.rimas b { display: inline-block; min-width: 1.6em; text-align: center; border-radius: 3px; background: var(--rima); font-weight: 600; }
.aviso { font-size: 0.82rem; color: var(--suave); border: 1px dashed var(--linea); border-radius: 6px; padding: 0.5rem 0.75rem; margin-bottom: 0.9rem; }
.lectura p { margin-bottom: 0.7rem; }
.lectura .cab-analisis { font-size: 0.85rem; color: var(--suave); }
.puntos { display: inline-flex; gap: 0.25rem; vertical-align: middle; }
.puntos i { width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 1px solid var(--verde); }
.puntos i.lleno { background: var(--verde); }

section { margin-top: 2.5rem; }
h2 { font-family: "Vollkorn SC", Georgia, serif; font-size: 1.15rem; font-weight: 600; margin-bottom: 0.6rem; }
.valoracion { border-top: 1px solid var(--linea); padding: 0.8rem 0; }
.valoracion .cab { font-size: 0.85rem; color: var(--suave); margin-bottom: 0.3rem; }
.valoracion .nota-num { color: var(--verde); font-weight: 600; }
details summary { cursor: pointer; font-size: 0.85rem; color: var(--suave); padding: 0.5rem 0; }

.navegacion { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--linea); font-size: 0.9rem; }
.navegacion a { text-decoration: none; }

/* Año con el número de piezas */
.anio .n { margin-left: 0.5rem; font-family: inherit; font-size: 0.85rem; color: var(--suave); }

/* Móvil: hecho para el pulgar. Cada año es una fila que se desliza de lado, una burbuja
   tras otra; la página solo baja. En el poema, anterior y siguiente quedan abajo, a mano */
@media (max-width: 750px) {
  .burbujas {
    display: flex; gap: 0.8rem;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 1rem;
    margin: 0 -1rem; padding: 0.3rem 1rem 0.8rem;
    scrollbar-width: none;
  }
  .burbujas::-webkit-scrollbar { display: none; }
  .burbujas li { flex: 0 0 72%; scroll-snap-align: start; min-height: 10.5rem; }
  .burbujas li:last-child { margin-right: 1rem; }
  .burbuja:hover { transform: none; box-shadow: none; }
  .burbuja .t { font-size: 1.6rem; }
  .anio { margin: 1.6rem 0 0.4rem; }
  .filtros input, .filtros select { min-height: 2.8rem; font-size: 1rem; }

  .navegacion {
    position: sticky; bottom: 0; z-index: 5;
    margin: 2.5rem -1rem 0; padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
    background: var(--fondo); border-top: 0.15rem solid var(--tinta);
  }
  .navegacion a {
    flex: 1 1 0; min-width: 0; padding: 0.7rem 0.8rem;
    border: 0.15rem solid var(--tinta); border-radius: 999px; background: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .navegacion a:last-child { text-align: right; }
  .navegacion span { flex: 1 1 0; }
}

/* Legend of the labels: small and quiet, above the filters */
.entradilla { margin-bottom: 0.8rem; }
.leyenda { margin: 0 0 1.6rem; font-size: 0.85rem; color: var(--suave); }
.leyenda ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 0.6rem; align-items: baseline; }
.leyenda li { display: contents; }
.leyenda li > :first-child { justify-self: start; }
@media (max-width: 600px) { .leyenda { font-size: 0.78rem; line-height: 1.35; } .leyenda .tipo, .leyenda .dedica { font-size: 0.7rem; } }
.leyenda a { color: inherit; }
.leyenda .tipo, .leyenda .dedica { padding: 0.05rem 0.5rem; border: 1px solid var(--tinta); font-size: 0.75rem; color: var(--tinta); background: rgba(255,255,255,0.6); }
.leyenda .tipo { border-radius: 999px; }
.leyenda .dedica { border-radius: 2px; border-style: dashed; }

/* Forma: subsección de personas verbales, con su tabla (se desliza si no cabe) */
.forma h3 { font-size: 1.05rem; margin: 1.3rem 0 0.5rem; }
.forma p { margin-bottom: 0.6rem; font-size: 0.95rem; }
.tabla-desliza { overflow-x: auto; margin: 0.4rem 0 0.8rem; }
.personas { border-collapse: collapse; font-size: 0.88rem; min-width: 30rem; }
.personas th, .personas td { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.personas th { font-weight: 600; color: var(--suave); }
.personas td:nth-child(3), .personas td:nth-child(4), .personas th:nth-child(3), .personas th:nth-child(4) { text-align: right; white-space: nowrap; }
/* Temas: tema › subtema */
.temas ul { list-style: none; padding: 0; }
.temas li { padding: 0.2rem 0; }
.temas .sub { color: var(--suave); }