/* Biblioteca emecuatro: mismo estilo que emecuatro.com (Helvetica, fondo blanco, azul del logo). Ajusta la paleta aquí. */
:root{
  --tinta:#0f2e57;--texto:#1a1a1a;--suave:#5f6873;--tenue:#8a929c;
  --fondo:#FFFFFF;--lateral:#FFFFFF;--linea:#e0e5e9;--hover:#f4f6f7;
  --acento:#004aad;--acento-suave:#eaf1fb;--enlace:#004aad;--logo:#004aad;
  --serif:Helvetica,Arial,sans-serif;--sans:Helvetica,Arial,sans-serif;
  --barra:64px;--izq:272px;--der:340px;
}
*{box-sizing:border-box;font-style:normal!important;text-transform:none!important}
html,body{margin:0;height:100%}
body{background:var(--fondo);color:var(--texto);font:400 13.5px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}

/* Barra superior */
header.barra{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;height:var(--barra);padding:0 18px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.marca{display:flex;align-items:center}
.marca img{height:38px;width:auto;display:block}
.sep{width:1px;height:18px;background:var(--linea)}
.seccion{font-size:12.5px;color:var(--suave)}
.acciones{margin-left:auto;display:flex;gap:8px;align-items:center}
.buscar{position:relative}
.buscar input{width:240px;height:32px;padding:0 12px 0 30px;border:1px solid var(--linea);border-radius:8px;background:var(--lateral);font-size:12.5px;color:var(--texto);outline:none;transition:.15s}
.buscar input:focus{border-color:var(--acento);background:#fff}
.buscar svg{position:absolute;left:10px;top:9px;width:14px;height:14px;stroke:var(--tenue)}
.btn{height:32px;padding:0 11px;border:1px solid var(--linea);border-radius:8px;background:#fff;color:var(--suave);font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.btn:hover{color:var(--tinta);border-color:#D3D8DF}
.btn.on{color:var(--tinta);border-color:var(--acento);background:var(--acento-suave)}
.solo-movil{display:none}

/* Estructura de tres columnas; la derecha se colapsa sola */
.layout{display:grid;grid-template-columns:var(--izq) minmax(0,1fr) 0;height:calc(100vh - var(--barra));transition:grid-template-columns .28s ease}
.layout.con-panel{grid-template-columns:var(--izq) minmax(0,1fr) var(--der)}
nav.lateral,main.texto,aside.panel{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#DADFE6 transparent}

/* Columna izquierda */
nav.lateral{background:var(--lateral);border-right:1px solid var(--linea);padding:18px 12px 48px}
.rotulo{display:flex;align-items:center;justify-content:space-between;font:600 10px var(--sans);letter-spacing:.02em;color:var(--tenue);margin:0 8px 8px}
/* Ordenamientos: la ley y su reglamento como familia; sigla como sello */
.leyes{display:flex;flex-direction:column;gap:2px;margin-bottom:24px}
.leyes a{position:relative;display:flex;gap:10px;align-items:center;padding:6px 8px;border-radius:8px;font-size:12.5px;line-height:1.3;color:var(--texto);transition:background .15s,color .15s}
.leyes a b{flex:0 0 44px;text-align:center;font:600 9.5px/1 var(--sans);letter-spacing:.06em;padding:4px 0;border-radius:5px;background:var(--acento-suave);color:var(--tinta)}
.leyes a.const b{background:var(--tinta);color:#fff}
.leyes a.reg{margin-left:20px;font-size:12px;color:var(--suave)}
.leyes a.reg::before{content:"";position:absolute;left:-10px;top:-4px;height:calc(50% + 4px);width:8px;border-left:1px solid #D3D8DF;border-bottom:1px solid #D3D8DF;border-bottom-left-radius:5px}
.leyes a.reg b{flex-basis:40px;background:#fff;color:var(--enlace);box-shadow:inset 0 0 0 1px #C5D1E4}
.leyes a:hover{background:var(--hover);color:var(--tinta)}
.leyes a.activa{background:var(--acento-suave);color:var(--tinta);font-weight:600}
.leyes a.activa::after{content:"";position:absolute;right:8px;width:6px;height:6px;border-radius:50%;background:var(--enlace)}
.leyes a.activa b{background:var(--tinta);color:#fff;box-shadow:none}
/* Índice plegable: Título > Capítulo > Sección, cada nivel con su tono */
.toc-acciones{display:flex;gap:4px}
.toc-acciones button{border:0;background:none;padding:2px 4px;border-radius:4px;font:500 10.5px var(--sans);letter-spacing:0;text-transform:none;color:var(--enlace);cursor:pointer}
.toc-acciones button:hover{background:var(--acento-suave)}
.toc [data-i]{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:start}
.toc [data-i][hidden]{display:none}
.toc .flecha{width:18px;height:24px;border:0;background:none;padding:0;cursor:pointer;color:#9DB0CC;display:flex;align-items:center;justify-content:center;transition:transform .18s,color .15s}
.toc .flecha svg{width:10px;height:10px}
.toc .flecha:hover{color:var(--tinta)}
.toc .expandida>.flecha{transform:rotate(90deg);color:var(--enlace)}
.toc .t{display:block;padding:3px 8px;border-radius:6px;font-size:12.5px;line-height:1.4;transition:background .15s}
.toc .t:hover{background:var(--hover)}
.toc .n1{margin-top:10px}.toc .n1>.t{font-weight:600;color:var(--tinta)}
.toc .n2{margin-top:6px}.toc .n2>.t{font-weight:600;color:var(--tinta)}
.toc .n3{padding-left:12px}.toc .n3>.t{font-weight:500;color:var(--enlace)}
.toc .n4{padding-left:24px}.toc .n4>.t{font-size:12px;color:#5E77A0}
.toc .actual>.t{background:var(--acento-suave);color:var(--tinta)}
.toc .arts{grid-column:2;display:none;flex-wrap:wrap;gap:3px;padding:4px 8px 8px}
.toc .actual>.arts,.toc .abierta>.arts{display:flex}
.toc .arts a{min-width:28px;text-align:center;font-size:11px;padding:1px 5px;border-radius:5px;color:var(--enlace);background:#fff;border:1px solid var(--linea)}
.toc .arts a:hover{border-color:#C5D1E4;background:var(--acento-suave)}
.toc .arts a.activo{background:var(--tinta);border-color:var(--tinta);color:#fff}

/* Texto */
main.texto{padding:40px 56px 140px}
.portada{max-width:68ch;margin:0 auto 36px}
.portada .sig{font:600 11px var(--sans);letter-spacing:.02em;color:var(--acento)}
.portada h1{font:700 26px/1.25 var(--serif);color:var(--tinta);margin:6px 0 8px;letter-spacing:-.01em}
.portada .meta{font-size:12px;color:var(--tenue)}
.enc{max-width:68ch;margin:48px auto 18px;padding-top:18px;border-top:1px solid var(--linea)}
.enc .e{font:600 11px var(--sans);letter-spacing:.06em;color:var(--acento)}
.enc .s{font:600 18px/1.35 var(--serif);color:var(--tinta);margin-top:2px}
.enc.n3,.enc.n4{border-top:0;padding-top:0;margin-top:30px}
.enc.n3 .s,.enc.n4 .s{font-size:15.5px}
article.art{max-width:68ch;margin:0 auto 6px;padding:12px 0 12px 16px;border-left:2px solid transparent;scroll-margin-top:16px;transition:border-color .2s}
article.art.foco{border-left-color:var(--acento)}
article.art h3{font:700 14px var(--sans);color:var(--logo);margin:0 0 6px;display:flex;gap:10px;align-items:baseline}
article.art h3 .copiar{font-weight:400;font-size:11px;color:var(--tenue);cursor:pointer;opacity:0;transition:.15s}
article.art:hover h3 .copiar{opacity:1}
article.art p{margin:0 0 9px}
.correl{font-size:11.5px;color:var(--tenue);margin-top:4px}
p.nota,.nota{font-size:11px;color:var(--tenue);margin:-5px 0 9px!important}
.suelto{max-width:68ch;margin:0 auto 9px}
a.ref{color:var(--enlace);border-bottom:1px solid #C5D1E4;cursor:pointer;transition:.15s}
a.ref:hover{background:var(--acento-suave);border-bottom-color:var(--acento)}
a.ref.ext{border-bottom-style:dashed;border-bottom-color:var(--acento)}
mark{background:#DCE6F5;color:inherit;border-radius:2px}
.resultados{max-width:68ch;margin:0 auto 24px;padding:10px 14px;border:1px solid var(--linea);border-radius:8px;font-size:12px;color:var(--suave);background:var(--lateral)}
.resultados a{color:var(--tinta);border-bottom:1px solid var(--linea)}

/* Columna derecha */
aside.panel{border-left:1px solid var(--linea);background:var(--lateral);padding:0;opacity:0;transition:opacity .2s}
.layout.con-panel aside.panel{opacity:1;padding:18px 14px 60px}
.panel .rotulo{margin:0 2px 4px}
.panel .ayuda{font-size:11.5px;color:var(--tenue);margin:0 2px 12px;line-height:1.5}
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:10px;margin-bottom:8px;overflow:hidden;animation:entra .25s ease}
@keyframes entra{from{opacity:0;transform:translateY(4px)}}
.tarjeta.fija{border-color:var(--acento)}
.tarjeta .cab{display:flex;align-items:center;gap:8px;padding:8px 11px;cursor:pointer;font-size:12px;font-weight:600;color:var(--tinta)}
.tarjeta .cab .sig{font:600 9.5px var(--sans);letter-spacing:.06em;padding:2px 5px;border-radius:4px;background:var(--acento-suave);color:var(--acento)}
.tarjeta .cab .ir{margin-left:auto;font-weight:400;font-size:11px;color:var(--tenue)}
.tarjeta .cab .ir:hover{color:var(--tinta)}
.tarjeta .cuerpo{padding:0 11px 9px;font-size:12px;line-height:1.6;max-height:300px;overflow-y:auto;color:var(--texto)}
.tarjeta .cuerpo p{margin:0 0 7px}
.tarjeta.cerrada .cuerpo{display:none}

/* Portada de la biblioteca */
.catalogo{max-width:980px;margin:0 auto;padding:64px 24px 90px}
.catalogo .sig{font:600 11px var(--sans);letter-spacing:.02em;color:var(--acento)}
.catalogo h1{font:700 clamp(28px,4vw,38px)/1.15 var(--serif);color:var(--tinta);margin:8px 0 10px;letter-spacing:-.01em}
.catalogo .intro{color:var(--suave);max-width:60ch;margin:0 0 28px;font-size:14px}
.catalogo .buscar input{width:100%;max-width:380px;height:38px}
.catalogo .buscar svg{top:12px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:26px}
.rejilla a{display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;border:1px solid var(--linea);border-radius:12px;background:#fff;transition:.18s}
.rejilla a:hover{border-color:#D3D8DF;box-shadow:0 6px 20px rgba(11,31,58,.06);transform:translateY(-1px)}
.rejilla .s{font:600 10.5px var(--sans);letter-spacing:.02em;color:var(--acento)}
.rejilla .n{font:600 16px/1.3 var(--serif);color:var(--tinta)}
.rejilla .d{font-size:11.5px;color:var(--tenue);margin-top:auto;padding-top:6px}
.fuente{margin-top:36px;font-size:11.5px;color:var(--tenue);max-width:70ch}

@media (max-width:1180px){
  :root{--izq:240px}
  .layout,.layout.con-panel{grid-template-columns:var(--izq) minmax(0,1fr)}
  aside.panel{position:fixed;right:0;top:var(--barra);bottom:0;width:min(380px,92vw);transform:translateX(100%);transition:transform .25s;z-index:20;box-shadow:-10px 0 30px rgba(11,31,58,.08);opacity:1;padding:18px 14px 60px}
  aside.panel.abierto{transform:none}
}
@media (max-width:760px){
  .layout,.layout.con-panel{grid-template-columns:1fr}
  nav.lateral{position:fixed;left:0;top:var(--barra);bottom:0;width:86vw;max-width:320px;z-index:21;transform:translateX(-100%);transition:transform .25s;box-shadow:10px 0 30px rgba(11,31,58,.08)}
  nav.lateral.abierto{transform:none}
  main.texto{padding:24px 18px 110px}
  .solo-movil{display:inline-flex}
  .buscar input{width:130px}
  .seccion,.sep{display:none}
}
@media print{header.barra,nav.lateral,aside.panel{display:none!important}.layout{display:block;height:auto}main.texto{overflow:visible;padding:0}}

/* Texto de ley: fracciones, incisos y numerales con sangría y color */
article.art p.fr,article.art p.inc,article.art p.num{display:grid;grid-template-columns:var(--marca-w) minmax(0,1fr);column-gap:8px}
article.art p.fr{--marca-w:42px;padding-left:14px}
article.art p.inc{--marca-w:24px;padding-left:56px}
article.art p.num{--marca-w:24px;padding-left:84px}
article.art p.inc.n1{padding-left:14px}
article.art p .m{font-weight:700;text-align:right}
article.art p.fr .m{color:var(--logo)}
article.art p.inc .m{color:#4c78c3}
article.art p.num .m{color:#5f6873}
article.art p.nota{padding-left:56px}
.tarjeta .cuerpo p.fr,.tarjeta .cuerpo p.inc,.tarjeta .cuerpo p.num{display:grid;grid-template-columns:var(--marca-w) minmax(0,1fr);column-gap:6px}
.tarjeta .cuerpo p.fr{--marca-w:34px}.tarjeta .cuerpo p.inc{--marca-w:20px;padding-left:20px}.tarjeta .cuerpo p.num{--marca-w:20px;padding-left:40px}
.tarjeta .cuerpo p .m{font-weight:700;text-align:right;color:var(--logo)}
/* Catálogo por tipo de ordenamiento */
.grupo{margin-top:40px;scroll-margin-top:84px}
.grupo h2{font:700 18px var(--sans);color:var(--logo);margin:0;padding-bottom:10px;border-bottom:2px solid var(--logo)}
.grupo .rejilla{margin-top:16px}
.grupo .rejilla a.ext .d{color:var(--enlace)}
@media (max-width:760px){article.art p.fr{padding-left:0}article.art p.inc{padding-left:30px}article.art p.num{padding-left:50px}article.art p.inc.n1{padding-left:0}}
.grupo .ayuda-grupo{font-size:13px;color:var(--suave);margin:10px 0 0;max-width:70ch}
/* Reformas: una fila por paquete económico */
.rejilla.lineas{grid-template-columns:1fr;gap:0;border:1px solid var(--linea);border-radius:12px;overflow:hidden;background:#fff}
.rejilla.lineas a{flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px;padding:13px 18px;border:0;border-radius:0;border-top:1px solid var(--linea)}
.rejilla.lineas a:first-child{border-top:0}
.rejilla.lineas a:hover{transform:none;box-shadow:none;background:#F7F8FA}
.rejilla.lineas .n{font-size:15px}
.rejilla.lineas .d{margin:0;padding:0;text-align:right}
@media (max-width:560px){.rejilla.lineas a{flex-direction:column;gap:4px}.rejilla.lineas .d{text-align:left}}
/* Armonía con emecuatro.com: tinta negra, títulos en azul institucional, tarjetas con borde azul en movimiento y menú del sitio. */
:root{--tinta:#111111;--texto:#1f1f1f;--suave:#6f6f6f;--tenue:#8c8c8c;--linea:#e8e8e6;--hover:#f6f6f4}
@property --m4-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes m4-spin{to{--m4-a:360deg}}
.btn{border-radius:999px}
.btn.pill{background:var(--logo);border-color:var(--logo);color:#fff;font-weight:500;padding:0 18px;height:36px}
.btn.pill:hover{background:#00337a;color:#fff}
.m4-nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);margin:0 auto 0 calc(50% - 300px);font-size:13px;font-weight:700;line-height:1.15;text-align:center}
.m4-nav a{color:var(--tinta)}
.m4-nav a:hover,.m4-nav a[aria-current]{color:#000}
header.barra:has(.m4-nav){height:76px}
header.barra:has(.m4-nav) .acciones{flex:1;margin-left:24px}
header.barra:has(.m4-nav) .acciones .pill{margin-left:auto}
.catalogo .sig{color:var(--suave);font-weight:500;font-size:13px}
.catalogo h1{font-weight:700;color:var(--logo);letter-spacing:-.03em}
.grupo h2{color:var(--logo);border-bottom:1px solid var(--linea)}
.rejilla a,.rejilla.lineas{border:1.5px solid transparent;border-radius:20px;background:linear-gradient(#fafaf8,#fafaf8) padding-box,conic-gradient(from var(--m4-a),#004aad,#2f6fd0,#8fb6ee,#dbe8fb,#8fb6ee,#2f6fd0,#004aad) border-box;animation:m4-spin 9s linear infinite}
.rejilla.lineas a{border:0;border-radius:0;background:transparent;animation:none;border-top:1px solid var(--linea)}
.rejilla.lineas a:first-child{border-top:0}
.rejilla.lineas a:hover{background:#f1f5fc}
.rejilla .n{color:var(--tinta)}
.rejilla a:hover{border-color:transparent;box-shadow:0 10px 28px -14px rgba(0,74,173,.35)}
.rejilla.lineas a:hover{box-shadow:none}
@media (max-width:980px){.m4-nav{display:none}}
@media (prefers-reduced-motion:reduce){.rejilla a,.rejilla.lineas{animation:none}}