/* Manual de usuario · versión web premium (usa los tokens de tfm.css). */
.m-barra{position:sticky;top:0;z-index:800;background:rgba(4,10,28,.8);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--borde)}
.m-barra .envoltura{display:flex;align-items:center;gap:10px;min-height:64px}
.m-volver{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 10px;border-radius:12px;border:1px solid var(--borde-2);text-decoration:none;font:700 14px var(--f-txt);color:var(--texto);background:rgba(255,255,255,.04)}
.m-volver:hover{background:rgba(255,255,255,.1)}
.m-titulo{flex:1;min-width:0;font:800 14px var(--f-disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--texto-2)}
.m-barra .btn{min-height:44px;padding:0 14px;font-size:14px}
.m-indice-btn{min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--borde-2);background:rgba(255,255,255,.04);color:#fff;font:700 14px var(--f-txt);cursor:pointer}
.m-progreso{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:linear-gradient(90deg,var(--oro),var(--celeste));transform-origin:0 50%;transform:scaleX(0)}

.m-hero{padding-block:44px 36px;background:radial-gradient(800px 420px at 85% 0%,rgba(58,99,194,.5),transparent 60%),linear-gradient(180deg,#071230,#040A1C)}
.m-hero .envoltura{display:grid;gap:28px;align-items:center}
.m-hero .poster{width:min(240px,62vw);margin-inline:auto;border-radius:18px;box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.18);transform:rotate(-3deg)}
.m-hero h1{font-size:clamp(32px,6.4vw,56px);font-weight:900}
.m-hero p{color:var(--texto-2);font-size:18px;max-width:52ch;margin-top:12px}
.m-ficha{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:18px 0 22px}
.m-ficha li{font:600 13px var(--f-txt);color:var(--chrome);padding:7px 12px;border-radius:999px;border:1px solid var(--borde-2);background:rgba(255,255,255,.04)}
.m-acc{display:flex;flex-wrap:wrap;gap:12px}

.m-layout{display:grid;gap:32px;padding-block:28px 40px}
.m-lateral{display:none}
.m-lateral nav{position:sticky;top:88px;max-height:calc(100dvh - 110px);overflow:auto;padding:14px;border-radius:18px;border:1px solid var(--borde);background:rgba(255,255,255,.025)}
.m-lateral h2{font:800 12px var(--f-txt);letter-spacing:.18em;text-transform:uppercase;color:var(--texto-3);margin:4px 8px 10px}
.m-lateral ol,.m-panel ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.m-lateral a,.m-panel a{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:baseline;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--texto-2);font-size:14px;line-height:1.35}
.m-lateral a b,.m-panel a b{font:700 12px var(--f-mono);color:var(--texto-3)}
.m-lateral a:hover,.m-panel a:hover{background:rgba(255,255,255,.06);color:#fff}
.m-lateral a.activo{background:linear-gradient(90deg,rgba(47,107,255,.35),rgba(47,107,255,.08));color:#fff}
.m-lateral a.activo b{color:var(--oro)}
.m-panel{position:fixed;inset:0;z-index:860;background:rgba(3,8,22,.6);display:flex;justify-content:flex-end}
.m-panel nav{width:min(360px,90vw);height:100%;overflow:auto;background:#081433;border-left:1px solid var(--borde-2);padding:18px 14px calc(24px + env(safe-area-inset-bottom,0px))}
.m-panel .cerrar{float:right;width:44px;height:44px;border-radius:12px;border:1px solid var(--borde-2);background:none;color:#fff;font-size:22px;cursor:pointer}
.m-panel h2{font:800 18px var(--f-disp);margin:8px 6px 14px}

/* Contenido del manual */
.m-contenido{min-width:0}
.m-contenido .envoltura{max-width:none;padding-inline:0}
.m-contenido .capitulo{padding-block:44px 8px;scroll-margin-top:84px}
.m-contenido .capitulo+.capitulo{border-top:1px solid var(--borde)}
.cab{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;align-items:end;margin-bottom:22px}
.cab .num{grid-row:span 2;font:900 64px/0.85 var(--f-disp);background:var(--metal-txt);-webkit-background-clip:text;background-clip:text;color:transparent}
.cab .eyebrow{font-size:11.5px}
.cab .eyebrow::before{display:none}
.cab h2{font-size:clamp(26px,4.2vw,36px);font-weight:900}
.intro{font-size:18px;color:var(--texto-2);max-width:68ch;margin-bottom:20px}
.texto{max-width:70ch;display:grid;gap:12px;color:var(--texto-2)}
.texto b,.cuerpo b,.intro b,.nota b,td b{color:#fff}
.m-contenido h3{font-size:21px;font-weight:800;margin:34px 0 14px}
.m-contenido h4{font:800 18px var(--f-disp);margin:0 0 4px;color:#fff}
.m-contenido ul,.m-contenido ol{padding-left:1.25em;margin:0}
.m-contenido li+li{margin-top:5px}
.m-contenido code,.m-contenido .mono{font-family:var(--f-mono);font-size:.86em;background:rgba(94,225,255,.1);color:#CFF4FF;padding:.08em .4em;border-radius:6px;word-break:break-word}
.ruta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 16px;font-size:13.5px}
.ruta span{background:rgba(47,107,255,.15);border:1px solid rgba(94,140,255,.35);padding:4px 11px;border-radius:999px;font-weight:700;color:#DCE7FF}
.ruta i{font-style:normal;color:var(--texto-3)}
.paso{display:grid;grid-template-columns:1fr;gap:16px;padding:22px 0;border-top:1px dashed var(--borde)}
.paso:first-of-type{border-top:0}
.paso figure{order:2;margin:0}
.paso .cuerpo{display:grid;gap:10px;min-width:0;color:var(--texto-2)}
.paso .n{display:inline-flex;align-items:center;gap:10px;font:700 12px var(--f-txt);letter-spacing:.14em;text-transform:uppercase;color:var(--celeste)}
.paso .n b{display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 6px;border-radius:10px;background:linear-gradient(135deg,#FFFFFF,#BFD0F2);color:#0A1638;font:900 15px var(--f-disp);letter-spacing:0}
.tel{max-width:250px;margin-inline:auto;padding:7px;border-radius:32px;background:linear-gradient(145deg,#2A3550,#0B1020 50%,#3A4766);box-shadow:var(--sombra)}
.tel img{width:100%;border-radius:25px;aspect-ratio:600/1333;background:#E9EEF7}
figcaption{font-size:13px;color:var(--texto-3);margin-top:10px;text-align:center}
.galeria{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0 8px}
.galeria .tel{max-width:none}
.doc-pdf{background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--sombra)}
.nota{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:14px 16px;border-radius:16px;margin:14px 0;max-width:74ch;border:1px solid var(--borde-2);background:rgba(255,255,255,.04);color:var(--texto-2)}
.nota::before{content:"";width:26px;height:26px;border-radius:50%;background:var(--c) center/15px no-repeat;margin-top:1px}
.nota strong:first-child{display:block;color:#fff}
.nota.importante{--c:var(--naranja);background:rgba(242,140,40,.1);border-color:rgba(242,140,40,.35)}
.nota.importante::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M7 3h2v6H7zM7 11h2v2H7z'/%3E%3C/svg%3E")}
.nota.hacienda{--c:var(--azul);background:rgba(47,107,255,.12);border-color:rgba(94,140,255,.35)}
.nota.hacienda::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M7 7h2v6H7zM7 3h2v2H7z'/%3E%3C/svg%3E")}
.nota.consejo{--c:#1E9E52;background:rgba(59,227,140,.08);border-color:rgba(59,227,140,.3)}
.nota.consejo::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.2' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E")}
.nota.alto{--c:#D63B3B;background:rgba(214,59,59,.1);border-color:rgba(255,110,110,.35)}
.nota.alto::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath stroke='white' stroke-width='2.2' d='M4.5 4.5l7 7M11.5 4.5l-7 7'/%3E%3C/svg%3E")}
.tabla{overflow-x:auto;margin:16px 0;border:1px solid var(--borde);border-radius:16px;background:rgba(255,255,255,.025)}
.tabla table{border-collapse:collapse;width:100%;font-size:15px;color:var(--texto-2)}
.tabla th,.tabla td{text-align:left;vertical-align:top;padding:11px 14px;border-bottom:1px solid var(--borde)}
.tabla th{font:700 12px var(--f-txt);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3);background:rgba(47,107,255,.1)}
.tabla tr:last-child td{border-bottom:0}
.recorrido{display:grid;gap:8px;margin:20px 0}
.recorrido div{padding:14px;border-radius:14px;border:1px solid var(--borde);background:rgba(255,255,255,.03)}
.recorrido b{font:800 13px var(--f-disp);letter-spacing:.08em;color:var(--oro)}
.recorrido p{font-size:14px;color:var(--texto-2);margin-top:4px}
.estados{display:grid;gap:10px;margin:18px 0}
.estado{padding:14px;border-radius:14px;border:1px solid var(--borde);background:rgba(255,255,255,.03)}
.estado p{font-size:15px;margin-top:8px;color:var(--texto-2)}
.chip{display:inline-block;font:700 12px var(--f-txt)!important;letter-spacing:.06em;padding:3px 10px;border-radius:999px;color:#fff}
.chip.ok{background:#1E8E3E}.chip.err{background:#C62828}.chip.sin{background:#5B6680}.chip.con{background:#B45309}.chip.inv{background:#475569}.chip.fir{background:#1F4FD0}
.anatomia{padding:18px;border-radius:18px;border:1px solid var(--borde);background:var(--sup);margin:16px 0}
.num-control{display:flex;flex-wrap:wrap;gap:5px;font:500 clamp(13px,2.4vw,19px) var(--f-mono)}
.num-control span{padding:8px 10px;border-radius:9px;color:#fff}
.anatomia .leyenda{display:grid;gap:8px 16px;margin-top:14px;font-size:14.5px;color:var(--texto-2)}
.anatomia .leyenda div{display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px}
.anatomia .leyenda i{width:14px;height:14px;border-radius:4px;margin-top:4px}
.c1{background:#3A4766}.c2{background:#1F4FD0}.c3{background:#C46A12}.c4{background:#0E8A6A}.c5{background:#6B3FC2}
.faq details{border:1px solid var(--borde);border-radius:14px;padding:14px 18px;margin:10px 0;background:rgba(255,255,255,.03)}
.faq summary{font-weight:700;cursor:pointer;font-size:17px;color:#fff}
.faq details p{margin-top:10px;color:var(--texto-2)}
.glosario{display:grid;gap:12px;margin:0}
.glosario div{border:1px solid var(--borde);border-radius:14px;padding:14px 16px;background:rgba(255,255,255,.03)}
.glosario dt{font:800 16px var(--f-disp);color:#fff}
.glosario dd{margin:4px 0 0;color:var(--texto-2);font-size:15px}
.m-fin{margin-top:40px;padding:28px;border-radius:24px;background:var(--metal);border:1px solid var(--borde-2);display:grid;gap:16px}
.m-fin h2{font-size:26px;font-weight:900}
.m-fin p{color:#D9E3FA}

@media (min-width:600px){
  .galeria{grid-template-columns:repeat(3,minmax(0,1fr))}
  .galeria.dos{grid-template-columns:repeat(2,minmax(0,240px))}
  .galeria.dos.pdf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .recorrido{grid-template-columns:repeat(5,minmax(0,1fr))}
  .estados{grid-template-columns:repeat(2,minmax(0,1fr))}
  .glosario,.anatomia .leyenda{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .m-hero .envoltura{grid-template-columns:auto minmax(0,1fr);gap:48px}
  .paso{grid-template-columns:240px minmax(0,1fr);gap:30px}
  .paso figure{order:0}
  .estados{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1100px){
  .m-layout{grid-template-columns:280px minmax(0,1fr);gap:48px}
  .m-lateral{display:block}
  .m-indice-btn{display:none}
}
@media (max-width:599px){
  .m-barra .btn span{display:none}
  .m-titulo{display:none}
  .m-indice-btn{margin-left:auto}
}