:root{--fondo:#fbfaf7;--papel:#fffefb;--texto:#1d1d1b;--suave:#6b6b66;--borde:#e3e0d8;--c1:#2f6f9f;--c2:#8a5a9e;--c3:#b4572e;--c4:#4f8a3c;--c5:#a67c00;--c6:#5c6f7f;--c7:#138a8a;--c8:#c2477a}
@media (prefers-color-scheme:dark){:root{--fondo:#17181a;--papel:#1d1f22;--texto:#ecebe7;--suave:#a3a29d;--borde:#2c2e31;--c1:#7fb3dc;--c2:#c39ad4;--c3:#e49a73;--c4:#9cc98a;--c5:#e0c060;--c6:#a9bccb;--c7:#6fd0cf;--c8:#ef8fb6}}
body{margin:0;background:var(--fondo);color:var(--texto);font:16px/1.5 Georgia,serif}main{max-width:960px;margin:0 auto;padding:16px}
h1{font-size:1.7rem;margin:.4rem 0 0}h2{font-size:1rem;margin:1.8rem 0 .5rem;font-family:system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--suave)}
select{font:inherit;padding:6px;max-width:100%}.meta{color:var(--suave);font-family:system-ui,sans-serif;font-size:.85rem}
.lienzo{background:var(--papel);border:1px solid var(--borde);border-radius:10px;overflow:hidden}.lienzo svg{display:block;width:100%;height:auto}
.leyenda{font-family:system-ui,sans-serif;font-size:.8rem;color:var(--suave);margin:.4rem 0}.leyenda b{font-weight:600}
#ficha{min-height:3.2em;font-size:.95rem;padding:.6rem .8rem;border-left:3px solid var(--borde);margin:.6rem 0}
ol{padding-left:0;list-style:none}li{border-bottom:1px solid var(--borde);padding:.35rem 0}.dia{font-family:system-ui,sans-serif;font-size:.8rem;color:var(--suave);display:inline-block;min-width:8.5em}
a{color:var(--c1)}footer{margin:2rem 0 1rem;color:var(--suave);font-size:.8rem;font-family:system-ui,sans-serif}
details.cuadro{margin:.5rem 0 0;font-family:system-ui,sans-serif;font-size:.85rem}details.cuadro summary{cursor:pointer;color:var(--suave)}
table.cuadro{border-collapse:collapse;width:100%;margin-top:.4rem}table.cuadro td,table.cuadro th{border-bottom:1px solid var(--borde);padding:.25rem .4rem;text-align:left;vertical-align:top}
table.cuadro th{color:var(--suave);font-weight:600}table.cuadro td.n{text-align:right;font-variant-numeric:tabular-nums}tr.fuera td{color:var(--suave)}
.vida{display:grid;grid-template-columns:6.2em 2.1em 2.1em 2.1em 1fr;column-gap:.2rem;font-size:.92rem}
.vida .cab{font-family:system-ui,sans-serif;font-size:.72rem;color:var(--suave);text-transform:uppercase;letter-spacing:.04em;padding:.2rem 0 .4rem;border-bottom:1px solid var(--borde);writing-mode:vertical-rl;transform:rotate(180deg);justify-self:center;align-self:end;height:7.5em}
.vida .cab.h{writing-mode:horizontal-tb;transform:none;height:auto;justify-self:start}
.vida .f{font-family:system-ui,sans-serif;font-size:.78rem;color:var(--suave);padding:.28rem 0;border-bottom:1px solid var(--borde)}
.vida .c{display:flex;justify-content:center;align-items:flex-start;padding-top:.45rem;border-bottom:1px solid var(--borde);background:linear-gradient(var(--borde),var(--borde)) center/1px 100% no-repeat}
.vida .t{padding:.28rem 0 .28rem .4rem;border-bottom:1px solid var(--borde)}.vida .t small{color:var(--suave);font-family:system-ui,sans-serif;font-size:.72rem}
.p{width:.8em;height:.8em;border-radius:50%;display:block}
.p.nacimiento{width:1.05em;height:1.05em;background:transparent!important;border:3px solid var(--c5);box-sizing:border-box;margin-top:-.1em}
.p.muerte{width:.85em;height:.85em;border-radius:1px;transform:rotate(45deg);background:var(--texto)!important}
.p.nacimiento-otro{width:1.05em;height:1.05em;background:transparent!important;border:3px solid var(--c8);box-sizing:border-box;margin-top:-.1em}
.p.muerte-otro{width:.85em;height:.85em;border-radius:1px;transform:rotate(45deg);background:var(--c8)!important}
.p.hito{box-shadow:0 0 0 3px var(--fondo),0 0 0 4.5px currentColor}
.et{font-family:system-ui,sans-serif;font-variant:all-small-caps;font-weight:700;letter-spacing:.06em;font-size:.82rem;padding:0 .35em;border-radius:3px;margin-right:.35em;border:1px solid currentColor}
.vida .fila-hito{font-weight:600}
.clave{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-family:system-ui,sans-serif;font-size:.82rem;margin:.4rem 0 .8rem;padding:.6rem .8rem;border:1px solid var(--borde);border-radius:8px;background:var(--papel)}
.clave .grupo{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .7rem}.clave .grupo>b{font-weight:600;margin-right:.1rem}
.clave i{display:inline-block;width:.8em;height:.8em;border-radius:50%;margin-right:.3em;vertical-align:-.05em}
.vida .marca{background:color-mix(in srgb,var(--c5) 14%,transparent)}
#anios text{cursor:pointer}
nav.arriba{font-family:system-ui,sans-serif;font-size:.85rem;margin:.2rem 0 .6rem}nav.arriba a{font-weight:700;text-decoration:none}
.buscador input{font:inherit;width:100%;max-width:520px;padding:.55rem .7rem;border:1px solid var(--borde);border-radius:8px;background:var(--papel);color:var(--texto)}
.lista{list-style:none;padding:0;columns:2 260px;column-gap:2rem}.lista li{border:0;padding:.15rem 0;break-inside:avoid}.lista .n{color:var(--suave);font-family:system-ui,sans-serif;font-size:.8rem}
.ejemplos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.8rem;margin:.6rem 0}.ejemplos a{display:block;border:1px solid var(--borde);border-radius:8px;overflow:hidden;background:var(--papel);text-decoration:none;color:var(--texto)}
.ejemplos img{width:100%;height:120px;object-fit:cover;display:block}.ejemplos span{display:block;padding:.4rem .5rem;font-size:.95rem}
.cifras{display:flex;flex-wrap:wrap;gap:1rem 2rem;font-family:system-ui,sans-serif}.cifras b{display:block;font-size:1.5rem;font-family:Georgia,serif}
.nota{font-family:system-ui,sans-serif;font-size:.85rem;line-height:1.45;color:var(--texto);background:var(--papel);border:1px solid var(--borde);border-left:4px solid var(--c1);border-radius:6px;padding:.6rem .8rem;margin:.6rem 0 1rem}
#aviso{font-family:system-ui,sans-serif;font-size:.82rem;color:var(--suave);min-height:1.2em}#aviso a{cursor:pointer}
.cabecera{display:flow-root;margin:.6rem 0 0}.cabecera figure{float:right;margin:0 0 .6rem 1rem;max-width:min(40%,260px)}
.cabecera img{width:100%;height:auto;border-radius:6px;display:block}.cabecera figcaption{font-family:system-ui,sans-serif;font-size:.7rem;color:var(--suave);margin-top:.25rem}
.cabecera p.par{font-size:1.05rem;margin:.2rem 0}.cabecera .desc{font-style:italic;color:var(--suave)}
@media (max-width:560px){.cabecera figure{float:none;margin:0 0 .6rem;max-width:100%}}
#periodos,.botones{display:flex;flex-wrap:wrap;gap:.35rem;margin:.6rem 0}.botones button,.botones a{text-decoration:none;font:inherit;font-family:system-ui,sans-serif;font-size:.85rem;padding:.3rem .65rem;border:1px solid var(--borde);border-radius:999px;background:var(--papel);color:var(--texto);cursor:pointer}
.botones button.activo,.botones a.activo{background:var(--texto);color:var(--fondo);border-color:var(--texto)}
#gtit i{display:inline-block;width:.7em;height:.7em;border-radius:50%;margin-right:.4em;vertical-align:.05em}
.grupo-de{font-family:system-ui,sans-serif;font-size:.85rem;margin:.5rem 0}
nav.arriba{display:flex;flex-wrap:wrap;gap:.2rem 1rem;align-items:baseline;border-bottom:1px solid var(--borde);padding-bottom:.4rem}nav.arriba a{font-weight:500;color:var(--texto)}nav.arriba a:first-child{color:var(--c1)}
.meses{display:flex;align-items:center;gap:.25rem;overflow-x:auto;margin:.8rem 0;font-family:system-ui,sans-serif;font-size:.85rem;scrollbar-width:none}
.meses a{flex:0 0 auto;padding:.3rem .55rem;border-radius:999px;text-decoration:none;color:var(--texto);border:1px solid transparent}
.meses a.activo{background:var(--texto);color:var(--fondo);font-weight:700}.meses a.flecha{border-color:var(--borde);font-weight:700}
.mes{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.6rem;margin:1rem 0}
.casilla{background:var(--papel);border:1px solid var(--borde);border-radius:10px;padding:.5rem .6rem;font-size:.85rem}
.casilla.hoy{border-color:var(--c1);box-shadow:0 0 0 2px var(--c1)}
.casilla h3{margin:0 0 .3rem;font-size:1.3rem;display:flex;justify-content:space-between;align-items:baseline}.casilla h3 a{text-decoration:none;color:var(--texto)}
.casilla h3 span{font-family:system-ui,sans-serif;font-size:.75rem;color:var(--suave);font-weight:400}
.casilla p{margin:.25rem 0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.casilla .tipo{font-family:system-ui,sans-serif;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--suave)}
ol.dia li{display:grid;grid-template-columns:4.2em 1fr;gap:.6rem}ol.dia .anio{font-family:system-ui,sans-serif;color:var(--suave);text-align:right;font-variant-numeric:tabular-nums}
.pasos{counter-reset:paso}.paso{border-left:3px solid var(--borde);padding:.2rem 0 .2rem 1rem;margin:1.2rem 0}
pre.crudo{white-space:pre-wrap;word-break:break-word;background:var(--papel);border:1px solid var(--borde);border-radius:8px;padding:.6rem .8rem;font-size:.8rem;line-height:1.45}
.temas-lista>li{border-bottom:1px solid var(--borde);padding:.6rem 0}.temas-lista h3{margin:0 0 .2rem;font-size:1.05rem}
@media (max-width:560px){.mes{grid-template-columns:1fr}}
.anio-mapa{display:grid;grid-template-columns:2.4em repeat(31,1fr);gap:2px;margin:.6rem 0 1rem;font-family:system-ui,sans-serif;font-size:.7rem;color:var(--suave)}
.anio-mapa .mm{align-self:center}.anio-mapa a,.anio-mapa i{display:block;aspect-ratio:1;border-radius:2px;background:var(--borde);min-width:0}.anio-mapa i.nada{background:none}
.anio-mapa a:hover{outline:2px solid var(--texto)}
.casilla.completa p{display:block;-webkit-line-clamp:unset;overflow:visible}.mes-tit{margin:1.4rem 0 .2rem;font-size:1.15rem}
.casilla:target{border-color:var(--c3);box-shadow:0 0 0 2px var(--c3)}
.hoy{margin:1.2rem 0}.hoy .casilla p{display:block;-webkit-line-clamp:unset}
.temas-hoy{list-style:none;padding:0}.temas-hoy li{padding:.45rem 0;border-bottom:1px solid var(--borde)}.temas-hoy a.tema{font-family:system-ui,sans-serif;font-weight:600;font-size:.85rem;text-decoration:none;margin-right:.4rem}
.temas-hoy .tipo,.casilla .tipo{font-family:system-ui,sans-serif;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--suave)}
button.tarjeta{font:inherit;font-size:.75rem;padding:.1rem .5rem;border:1px solid var(--borde);border-radius:999px;background:var(--fondo);color:var(--c1);cursor:pointer}
.casilla details{margin-top:.3rem;font-size:.82rem}.casilla details summary{cursor:pointer;color:var(--suave);font-family:system-ui,sans-serif}
.casilla p.destacado{font-size:.95rem}
ul.subtemas{list-style:none;padding:0 0 0 .8rem;border-left:2px solid var(--borde);margin:.3rem 0}ul.subtemas li{border:0;padding:.12rem 0;font-size:.95rem}
.barras{font-family:system-ui,sans-serif;font-size:.78rem}.barra{display:grid;grid-template-columns:6em 1fr 4.5em;align-items:center;gap:.4rem;margin:.12rem 0}
.barra .tramos{display:flex;height:1em;background:var(--papel);border-radius:3px;overflow:hidden}.barra i{display:block;height:100%}
.barras .solo_es,.leyenda-c.solo_es{background:var(--c3)}.barras .las_dos,.leyenda-c.las_dos{background:var(--suave)}.barras .solo_en,.leyenda-c.solo_en{background:var(--c1)}
.leyenda-c{display:inline-block;width:.8em;height:.8em;border-radius:2px;vertical-align:-.05em}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.dos ol{padding-left:1.2rem;list-style:decimal}.dos li{border:0;padding:.1rem 0;font-size:.92rem}
@media (max-width:560px){.dos{grid-template-columns:1fr}}
a.rojo,span.rojo{color:#ba0000}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) a.rojo,:root:not([data-theme="light"]) span.rojo{color:#ff7a7a}}
ul.sin-articulo{columns:1}ul.sin-articulo li{padding:.18rem 0;border-bottom:1px solid var(--borde)}
.barra .sig{color:var(--suave)}
.lg{font-family:system-ui,sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.05em;color:var(--c1);border:1px solid var(--c1);border-radius:3px;padding:0 .2em;vertical-align:.12em}
small.fe{color:var(--c3);font-family:system-ui,sans-serif}
