/* Libro blanco de Nubo en la web (/libro-blanco y /libro-blanco/<capítulo>).
   Lo genera web/herramientas/libro-blanco/ (ver su LEEME.md). Páginas de lectura larga:
   Lexend para leer (cuerpo 18 px, ~70 caracteres por línea, alineado a la izquierda), Sora solo en titulares, cifras y citas destacadas.
   Los colores son los del design system de Nubo (nubo.css), puestos una sola vez como variables. */

:root{
  /* tokens de nubo.css: versiones legibles (AA) de cada color de marca y sus fondos suaves */
  --lb-morado-600:#9C08AE;   /* nubo-morado-600 */
  --lb-morado-50:#FDF0FF;    /* nubo-morado-50 */
  --lb-azul-600:#0061BC;     /* nubo-azul-600 */
  --lb-azul-50:#EFF6FF;      /* nubo-azul-50 */
  --lb-verde-600:#007558;    /* nubo-verde-600 */
  --lb-verde-50:#DBFFF0;     /* nubo-verde-50 */
  --lb-amarillo-600:#8A5600; /* nubo-amarillo-600 */
  --lb-amarillo-50:#FFF3E6;  /* nubo-amarillo-50 */
  --lb-magenta-600:#B5005B;  /* nubo-magenta-600 */
  --lb-magenta-50:#FFF1F4;   /* nubo-magenta-50 */
  --lb-tenue:#666167;        /* nubo-tinta-tenue */
}
body.lb-tema-morado{--lb-acento:var(--purple);--lb-acento-texto:var(--lb-morado-600);--lb-tinte:var(--lb-morado-50)}
body.lb-tema-azul{--lb-acento:var(--blue);--lb-acento-texto:var(--lb-azul-600);--lb-tinte:var(--lb-azul-50)}
body.lb-tema-verde{--lb-acento:var(--green);--lb-acento-texto:var(--lb-verde-600);--lb-tinte:var(--lb-verde-50)}
body.lb-tema-amarillo{--lb-acento:var(--orange);--lb-acento-texto:var(--lb-amarillo-600);--lb-tinte:var(--lb-amarillo-50)}
body.lb-tema-magenta{--lb-acento:var(--pink);--lb-acento-texto:var(--lb-magenta-600);--lb-tinte:var(--lb-magenta-50)}
body.lb-tema-tinta{--lb-acento:var(--ink);--lb-acento-texto:var(--ink);--lb-tinte:var(--surface)}

.lb-main{font-family:Lexend,sans-serif;color:var(--ink);background:#fff}
.lb-main h1,.lb-main h2,.lb-main h3{font-family:Sora,sans-serif;letter-spacing:-.025em;color:var(--ink)}
.lb-main a{color:var(--lb-acento-texto);text-underline-offset:3px}
.lb-main .button{text-decoration:none}
.lb-main .button.primary{color:#fff}
.lb-main :focus-visible{outline:3px solid var(--lb-acento-texto);outline-offset:3px;border-radius:4px}

/* ---------- cabecera de cada página ---------- */
.lb-hero{background:var(--lb-tinte);border-bottom:1px solid var(--line)}
.lb-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(1.5rem,5vw,4rem);align-items:center;padding-top:1.4rem;padding-bottom:clamp(2rem,5vw,3.6rem)}
.lb-hero-texto{max-width:46rem}
.lb-migas{margin-bottom:clamp(1.6rem,4vw,3rem)}
.lb-migas ol{display:flex;flex-wrap:wrap;gap:.2rem .5rem;list-style:none;margin:0;padding:0;font-size:1rem}
.lb-migas li+li::before{content:"›";margin-right:.5rem;color:var(--lb-tenue)}
.lb-migas a{color:var(--ink);text-decoration:underline}
.lb-migas [aria-current]{color:var(--lb-tenue)}
.lb-kicker{margin:0 0 .6rem;font-weight:700;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--lb-acento-texto)}
.lb-hero h1{margin:0 0 1rem;font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.12}
.lb-intro{margin:0;font-size:1.2rem;line-height:1.65;max-width:38rem}
.lb-hero-foto img{display:block;width:100%;height:clamp(200px,28vw,330px);object-fit:cover;border-radius:var(--radius);border:2px solid var(--lb-acento)}

/* ---------- maquetación de lectura ---------- */
.lb-layout{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);padding-top:clamp(2rem,4vw,3.4rem);padding-bottom:clamp(2rem,4vw,3rem);align-items:start}
.lb-lateral{position:sticky;top:5.5rem;max-height:calc(100vh - 7rem);overflow:auto;font-size:1rem;line-height:1.45;padding-right:.4rem}
.lb-indice summary{cursor:pointer;font-family:Sora,sans-serif;font-weight:600;font-size:1rem;padding:.3rem 0 .7rem;list-style-position:inside}
.lb-indice ol{list-style:none;margin:0;padding:0}
.lb-indice>ol{border-left:2px solid var(--line)}
.lb-indice li{margin:0}
.lb-indice a{display:block;padding:.38rem .8rem;color:var(--lb-tenue);text-decoration:none;border-left:3px solid transparent;margin-left:-2px}
.lb-indice a:hover{color:var(--ink)}
.lb-indice a[aria-current="location"]{color:var(--ink);font-weight:600;border-left-color:var(--lb-acento)}
.lb-indice .lb-sub a{padding-left:1.6rem}
.lb-lateral-pdf{margin-top:1.2rem}
.lb-lateral-pdf .button{display:block;text-align:center;font-size:1rem;line-height:1.35}

.lb-texto{min-width:0;max-width:54rem;font-size:1.125rem;line-height:1.78;text-align:left}
.lb-texto>p,.lb-texto>ul,.lb-texto>ol,.lb-texto>h2,.lb-texto>h3,.lb-texto>h4,.lb-caja p,.lb-caja ul{max-width:41rem}
.lb-texto p{margin:0 0 1.15rem}
.lb-texto h2{font-size:clamp(1.55rem,2.6vw,2rem);line-height:1.22;margin:3rem 0 1.1rem;scroll-margin-top:6rem}
.lb-texto h3{font-size:clamp(1.25rem,2vw,1.45rem);line-height:1.3;margin:2.2rem 0 .8rem;scroll-margin-top:6rem}
.lb-texto h4{font-family:Lexend,sans-serif;font-size:1.15rem;font-weight:700;line-height:1.4;margin:1.8rem 0 .6rem;scroll-margin-top:6rem}
.lb-texto>h2:first-child,.lb-texto>h3:first-child{margin-top:0}
.lb-num{color:var(--lb-acento-texto);margin-right:.15em;white-space:nowrap}
.lb-texto ul,.lb-texto ol:not(.lb-refs):not(.lb-principios-vistazo){margin:0 0 1.3rem;padding-left:1.35rem}
.lb-texto li{margin:0 0 .6rem;padding-left:.2rem}
.lb-texto li::marker{color:var(--lb-acento-texto)}
.lb-texto strong{font-weight:700}
.lb-texto em{font-style:italic;color:inherit}
.lb-texto .lb-destacada em,.lb-texto .lb-destacada .acento{color:var(--lb-acento-texto)}

/* cita destacada (pull quote) */
.lb-destacada{margin:2.4rem 0;padding:.2rem 0 .2rem 1.4rem;border-left:5px solid var(--lb-acento);max-width:44rem}
.lb-destacada p{margin:0;font-family:Sora,sans-serif;font-weight:600;font-size:clamp(1.3rem,2.4vw,1.65rem);line-height:1.38;letter-spacing:-.02em;color:var(--ink)}
.lb-destacada em,.lb-destacada .acento{font-style:normal;color:var(--lb-acento-texto)}

/* cajas de color */
.lb-caja{margin:2rem 0;padding:1.3rem 1.5rem .5rem;background:var(--lb-tinte);border-left:4px solid var(--lb-acento);border-radius:0 var(--radius) var(--radius) 0}
.lb-caja p,.lb-caja ul{font-size:1.0625rem;line-height:1.7}
.lb-caja-titulo{font-weight:700;color:var(--lb-acento-texto);margin:0 0 .6rem!important}

/* bloque de cifras clave */
.lb-cifras{list-style:none;margin:2.4rem 0!important;padding:0!important;display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.2rem 2rem;border-top:3px solid var(--lb-acento);padding-top:1.3rem!important;max-width:none!important}
.lb-cifras li{margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.lb-cifra{font-family:Sora,sans-serif;font-weight:700;font-size:clamp(2rem,4vw,2.7rem);line-height:1.05;letter-spacing:-.03em;color:var(--lb-acento-texto)}
.lb-cifras span{font-size:1rem;line-height:1.5}
.lb-cifras small{font-size:1rem;line-height:1.45;color:var(--lb-tenue)}

/* figuras y tablas */
.lb-figura{margin:2.4rem 0;padding:0}
.lb-figura-marco{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow-x:auto}
.lb-figura img{display:block;width:100%;height:auto;background:#fff}
.lb-figura figcaption{margin-top:.8rem;font-size:1rem;line-height:1.6;max-width:44rem}
.lb-figura figcaption strong{color:var(--lb-acento-texto)}
.lb-nota{display:block;margin-top:.25rem;color:var(--lb-tenue)}
.lb-tabla{margin:2rem 0}
.lb-tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.lb-tabla table{width:100%;min-width:34rem;border-collapse:collapse;font-size:1rem;line-height:1.55;text-align:left}
.lb-tabla table[data-cols="2"]{min-width:0}
.lb-tabla caption{caption-side:top;text-align:left;font-size:1rem;color:var(--lb-tenue);padding-bottom:.6rem}
.lb-tabla thead th{border-bottom:3px solid var(--lb-acento);padding:.5rem .9rem .6rem 0;font-weight:700;vertical-align:bottom}
.lb-tabla tbody th,.lb-tabla tbody td{padding:.8rem .9rem .8rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.lb-tabla tbody th{font-weight:700;width:22%}

/* lista de siete (capítulo «de un vistazo») */
.lb-principios-vistazo{list-style:none;margin:2rem 0;padding:0!important;display:grid;gap:1.4rem}
.lb-principios-vistazo li{margin:0;padding:1.1rem 1.3rem;background:var(--lb-tinte);border-radius:var(--radius);border-left:4px solid var(--lb-acento)}
.lb-principios-vistazo h3{margin:0 0 .35rem;font-size:1.2rem}
.lb-principios-vistazo p{margin:0}
.lb-romano{font-family:Sora,sans-serif;font-weight:700;color:var(--lb-acento-texto);margin-right:.25em}
.lb-nav-principios{margin-top:3rem;padding:1.4rem 1.6rem;background:var(--lb-tinte);border-radius:var(--radius)}
.lb-nav-principios h2{margin:0 0 1rem!important;font-size:1.4rem!important}
.lb-nav-principios ol{list-style:none;margin:0;padding:0!important;display:grid;gap:.55rem}
.lb-nav-principios a{color:var(--ink);font-weight:600}

/* referencias */
.lb-seccion-refs{margin-top:3.5rem;padding-top:.5rem;border-top:3px solid var(--lb-acento)}
.lb-refs{list-style:none;margin:1.2rem 0 0;padding:0}
.lb-refs li{margin:0 0 .9rem;padding:0 0 0 1.6rem;text-indent:-1.6rem;font-size:1rem;line-height:1.6;overflow-wrap:anywhere}
.lb-refs li:target{background:var(--lb-tinte);outline:2px solid var(--lb-acento);outline-offset:4px;border-radius:4px}
a.lb-cita{color:inherit;text-decoration:underline;text-decoration-color:var(--lb-acento);text-decoration-thickness:2px;text-underline-offset:3px}
a.lb-cita:hover{color:var(--lb-acento-texto)}

/* cierre: anterior / siguiente, descarga, licencia */
.lb-cierre{padding-bottom:clamp(2.5rem,5vw,4rem)}
.lb-pasos{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0 2.4rem;border-top:1px solid var(--line);padding-top:2rem}
.lb-paso{display:flex;flex-direction:column;gap:.25rem;padding:1rem 1.2rem;border:2px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink)!important;font-size:1.0625rem;line-height:1.4}
.lb-paso small{font-size:1rem;color:var(--lb-tenue)}
.lb-paso span{font-family:Sora,sans-serif;font-weight:600}
.lb-paso:hover{border-color:var(--lb-acento)}
.lb-paso-sig{text-align:right;align-items:flex-end}
.lb-descarga{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;justify-content:space-between;padding:1.4rem 1.6rem;background:var(--lb-tinte);border-radius:var(--radius);border:1px solid var(--line)}
.lb-descarga p{margin:0;max-width:34rem;font-size:1.0625rem;line-height:1.55}
.lb-licencia{margin:1.6rem 0 0;font-size:1rem;line-height:1.6;color:var(--lb-tenue);max-width:46rem}
.lb-licencia a{color:var(--lb-tenue)}

/* ---------- portada ---------- */
.lb-hero-portada{background:var(--lb-morado-600);color:#fff;border-bottom:0}
.lb-hero-portada .lb-migas a,.lb-hero-portada .lb-migas [aria-current],.lb-hero-portada .lb-migas li+li::before{color:#fff}
.lb-hero-portada .lb-kicker{color:#fff}
.lb-hero-portada h1{color:#fff;font-size:clamp(2.6rem,6.2vw,4.6rem);line-height:1.02}
.lb-subtitulo{margin:0 0 1.4rem;font-family:Sora,sans-serif;font-weight:600;font-size:clamp(1.2rem,2.2vw,1.55rem);color:#fff}
.lb-acceso{margin:0 0 1.6rem;font-size:1.1rem;line-height:1.55;max-width:32rem}
.lb-acciones{display:flex;flex-wrap:wrap;gap:.9rem}
.lb-hero-portada .button.primary{background:#fff;color:var(--lb-morado-600);border-color:#fff}
.lb-hero-portada .button.outline{background:transparent;color:#fff;border:2px solid #fff;box-shadow:none}
.lb-hero-portada-foto img{height:auto;max-height:480px;width:auto;max-width:100%;margin-left:auto;border:0;border-radius:6px;box-shadow:0 18px 0 rgba(28,20,29,.18)}
.lb-portada-cuerpo{padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.lb-portada-cuerpo section{margin-bottom:clamp(2.5rem,5vw,4rem)}
.lb-portada-cuerpo h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 1.2rem}
.lb-resumen-libro{max-width:44rem;font-size:1.15rem;line-height:1.75}
.lb-resumen-libro p{margin:0 0 1.1rem}
.lb-principios-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1rem}
.lb-principios-grid a{display:flex;flex-direction:column;gap:.5rem;height:100%;padding:1.2rem 1.3rem;border:2px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink);line-height:1.5}
.lb-principios-grid a:hover{border-color:var(--lb-morado-600)}
.lb-principios-grid .lb-romano{font-size:1.7rem;color:var(--lb-morado-600);margin:0}
.lb-principios-grid strong{font-family:Sora,sans-serif;font-size:1.08rem;line-height:1.3;letter-spacing:-.02em}
.lb-resumen{font-size:1rem;color:var(--lb-tenue)}
.lb-ind{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:.6rem 2.4rem;font-size:1.05rem;line-height:1.5}
.lb-ind>li{margin:0 0 1.1rem;break-inside:avoid}
.lb-ind a{color:var(--ink);text-decoration:none}
.lb-ind a:hover{text-decoration:underline}
.lb-ind-titulo{font-family:Sora,sans-serif;font-weight:600}
.lb-ind-sub{list-style:none;margin:.4rem 0 0;padding:0 0 0 1rem;border-left:2px solid var(--line);font-size:1rem}
.lb-ind-sub li{margin:.2rem 0}
.lb-ind-principio{padding-left:1rem}
.lb-citar .lb-apa{margin:0;padding:1rem 1.2rem;background:var(--lb-morado-50);border-left:4px solid var(--purple);border-radius:0 var(--radius) var(--radius) 0;font-size:1.05rem;line-height:1.6;overflow-wrap:anywhere;max-width:48rem}

/* ---------- pantallas pequeñas ---------- */
@media (max-width:959px){
  .lb-layout{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .lb-lateral{position:static;max-height:none;overflow:visible;padding:0}
  .lb-indice{border:1px solid var(--line);border-radius:var(--radius);padding:.2rem 1rem}
  .lb-indice[open]{padding-bottom:.8rem}
  .lb-lateral-pdf{display:none}
}
@media (max-width:700px){
  .lb-hero-grid{grid-template-columns:minmax(0,1fr)}
  .lb-hero-foto{order:-1}
  .lb-hero-foto img{height:150px}
  .lb-hero-portada-foto img{height:auto;max-height:300px;margin:0}
  .lb-hero-portada-foto{order:2}
  .lb-pasos{grid-template-columns:1fr}
  .lb-paso-sig{text-align:left;align-items:flex-start}
  .lb-texto{font-size:1.0625rem}
  .lb-figura img{min-width:720px}
  .lb-descarga{flex-direction:column;align-items:flex-start}
  .lb-descarga .button,.lb-acciones .button{width:100%;text-align:center}
}
@media print{.lb-lateral,.lb-pasos,.lb-descarga{display:none}}

/* móvil: cada fila de una tabla de tres o más columnas pasa a ser una tarjeta, y cada dato lleva encima el
   nombre de su columna (lo pone construir.mjs desde el encabezado ya traducido). Antes la tabla se cortaba por
   la derecha y había que adivinar que se deslizaba (nubo-web#78) */
@media (max-width:700px){
  .lb-tabla table:not([data-cols="2"]),.lb-tabla table:not([data-cols="2"]) tbody,.lb-tabla table:not([data-cols="2"]) tr{display:block}
  .lb-tabla table:not([data-cols="2"]){min-width:0}
  .lb-tabla table:not([data-cols="2"]) caption{display:block}
  .lb-tabla table:not([data-cols="2"]) thead{display:none}
  .lb-tabla table:not([data-cols="2"]) tr{border:1.5px solid var(--line);border-radius:14px;padding:2px 16px;margin-bottom:12px}
  .lb-tabla table:not([data-cols="2"]) tbody th,.lb-tabla table:not([data-cols="2"]) td{display:block;width:auto;padding:.7rem 0}
  .lb-tabla table:not([data-cols="2"]) td::before{content:attr(data-l);display:block;font-size:.875rem;font-weight:700;color:var(--lb-tenue)}
  .lb-tabla table:not([data-cols="2"]) tr>:last-child{border-bottom:0}
  /* las de dos columnas (término y qué significa, principio y su pregunta): uno debajo del otro, como un glosario;
     en columnas, la primera quedaba tan estrecha que caía palabra a palabra */
  .lb-tabla table[data-cols="2"],.lb-tabla table[data-cols="2"] tbody,.lb-tabla table[data-cols="2"] tr{display:block}
  .lb-tabla table[data-cols="2"] caption{display:block}
  .lb-tabla table[data-cols="2"] thead{display:none}
  .lb-tabla table[data-cols="2"] tr{border-bottom:1px solid var(--line);padding:.8rem 0}
  .lb-tabla table[data-cols="2"] tbody th,.lb-tabla table[data-cols="2"] td{display:block;width:auto;border:0;padding:0}
  .lb-tabla table[data-cols="2"] tbody th{margin-bottom:.3rem}
}