/* Mechanic Max — css/diagramas.css
   Vista Diagramas y manuales (#diagramas), visor de documentos y página completa de diagramas (diagramas.html, body.pagina-diag).
   Se carga después de estilo.css: aquí solo van los ajustes propios de estas vistas.
   Usa los tokens de :root (colores, --t-*, --e-*, --r-*) y las clases compartidas; la guía está en guia-estilo.html.

   Índice
     1. Vista: ritmo, índice de partes y botón principal     6. Fuentes oficiales y resumen por sistema
     2. Panel de configuración (cajetín de datos)            7. Mis archivos, figuras de boletines y esquemas
     3. Buscador, filtro e índice de sistemas                8. Página completa: índice
     4. Sistemas y tarjetas de diagrama                      9. Página completa: láminas
     5. Etiqueta de tipo y códigos                          10. Tableta y celular · 11. Impresión

   Las reglas para pantallas pequeñas van con «screen and», para que no se cuelen al imprimir
   (una hoja carta mide unos 710 px de ancho útil y entraría en los cortes de 960 y 700). */

:root{
  --diag-lupa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6F76' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");
  --diag-ampliar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7'/%3E%3C/svg%3E");
  --diag-hueco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CDCDC6' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='6' height='5' rx='1'/%3E%3Crect x='14.5' y='15' width='6' height='5' rx='1'/%3E%3Cpath d='M9.5 6.5h5a3 3 0 0 1 3 3V15'/%3E%3Cpath d='M6.5 9v5.5a3 3 0 0 0 3 3h5'/%3E%3C/svg%3E");
  --diag-partes-alto:44px;   /* alto del índice de partes que se queda pegado arriba */
}

/* ---------- 1. Vista: ritmo, índice de partes y botón principal ---------- */
/* Cada parte de la pantalla empieza con un filete: la vista es muy larga y así se ve dónde acaba una y empieza otra */
#v-diagramas>h2{margin:var(--e-8) 0 var(--e-2);padding-top:var(--e-6);border-top:1px solid var(--linea-fuerte);scroll-margin-top:calc(var(--diag-partes-alto) - var(--e-4))}
#diagPropios,#diagOficiales,#diagGrupos{scroll-margin-top:calc(var(--diag-partes-alto) + var(--e-4))}
#v-diagramas>.diag-secciones+h2{margin-top:var(--e-5);padding-top:0;border-top:0;scroll-margin-top:calc(var(--diag-partes-alto) + var(--e-2))}
#v-diagramas>h2+.ayuda{margin-bottom:var(--e-4)}
#v-diagramas .cabecera{margin-bottom:var(--e-4)}

/* El amarillo de esta pantalla es «Ver todos en página completa»; «Subir archivos» de la cabecera pasa a secundario
   (el botón amarillo de subir está abajo, en «Mis diagramas y manuales», junto a «Qué es» y «Sistema») */
#v-diagramas .cabecera>label.btn{background:var(--superficie);border-color:var(--borde-control);color:var(--texto);box-shadow:none}
#v-diagramas .cabecera>label.btn:hover{background:var(--superficie-2);border-color:var(--tinta-2)}
#v-diagramas .cabecera>label.btn:active{background:var(--hundido)}

/* Índice de partes (#diagSecciones): enlaces en fila con filete, pegado bajo la barra para saltar de una parte a otra */
.diag-secciones{position:sticky;top:var(--barra-alto);z-index:10;flex-wrap:nowrap;gap:0 var(--e-5);margin:0;padding:0;background:var(--fondo);border-bottom:1px solid var(--linea-fuerte);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.diag-secciones::-webkit-scrollbar{display:none}
.diag-secciones a{flex:none;min-height:var(--diag-partes-alto);padding:0;border:0;border-radius:0;background:none;color:var(--texto-2);font-size:var(--t-s);font-weight:600;box-shadow:inset 0 -2px 0 transparent;transition:color var(--dur) var(--curva),box-shadow var(--dur) var(--curva)}
.diag-secciones a:hover{background:none;color:var(--texto);box-shadow:inset 0 -2px 0 var(--tinta)}
.diag-secciones a:focus-visible{outline-offset:-2px}

/* ---------- 2. Panel de configuración (cajetín de datos) ---------- */
.mmd-panel{margin-bottom:var(--e-5);padding:var(--e-5)}
.mmd-cab{align-items:center;gap:var(--e-3)}
.mmd-cab>div:first-child{flex:1 1 280px;min-width:0;line-height:1.3}
.mmd-cab>div:first-child>b{font-family:var(--f-titulo);font-stretch:var(--ancho-titulo);font-size:var(--t-l);font-weight:700;letter-spacing:-.01em}
.mmd-motor{margin-left:var(--e-2);color:var(--texto-2);white-space:nowrap}
.mmd-cab:has(select) .ayuda{display:none}   /* la versión ya se lee en el desplegable */
.mmd-botones{display:contents}
.mmd-botones>:is(.btn,.btn-gris){flex:none}
.mmd-botones>label.en-linea{order:3;flex:1 1 100%;max-width:100%;color:var(--texto-2);font-size:var(--t-s);font-weight:500}
.mmd-botones select{flex:0 1 560px;width:auto;max-width:100%;font-weight:400;color:var(--texto);text-overflow:ellipsis}

/* Datos de la configuración: una tira de casillas con filetes, como el cajetín de un plano */
.mmd-fichas{gap:1px;margin:var(--e-4) 0 var(--e-3);border:1px solid var(--linea-fuerte);border-radius:var(--r-2);background:var(--linea);overflow:hidden}
/* min-content: la etiqueta (que no se parte) nunca se corta; si no cabe en la fila, la casilla pasa a la siguiente */
.mmd-ficha{flex:1 1 112px;gap:2px;min-width:min-content;padding:var(--e-2) var(--e-3);border:0;border-radius:0;font-size:var(--t-m);font-weight:650;line-height:1.3}
.mmd-ficha small{font-weight:500;line-height:1.3;white-space:nowrap}
.mmd-ficha.deducido{border:0}
.mmd-panel>.ayuda{margin:0;max-width:86ch;font-size:var(--t-s)}
.mmd-panel>.ayuda+.aviso-mmd,.mmd-panel>.mmd-fichas+.aviso-mmd{margin-top:var(--e-3)}

.mmd-form{grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:var(--e-3) var(--e-4);margin-top:var(--e-4);padding-top:var(--e-4)}
.mmd-form-pie{margin-top:var(--e-1)}
/* Con el panel completo a la vista ya hay un botón amarillo: «Redibujar» va en tinta */
.mmd-panel:has(.mmd-cab a.btn) .mmd-form-pie .btn{background:var(--tinta);border-color:var(--tinta);color:var(--sobre-tinta);box-shadow:none}
.mmd-panel:has(.mmd-cab a.btn) .mmd-form-pie .btn:hover{background:var(--tinta-2);border-color:var(--tinta-2)}

/* ---------- 3. Buscador, filtro e índice de sistemas ---------- */
.mmd-barra{gap:var(--e-3);margin-bottom:var(--e-3);scroll-margin-top:calc(var(--diag-partes-alto) + var(--e-2))}
#mmdNada{scroll-margin-top:calc(var(--diag-partes-alto) + var(--e-2))}

/* Mientras se busca o se filtra, la cuenta fija de cada sistema ya no es cierta: se esconde */
#diagPropios:has(.mmd-fig[hidden]) :is(.mmd-indice,.mmd-grupo) .cuenta,
.pd-sis:has(.pd-diag[hidden]) .pd-grupo .cuenta,
.pd-indice-sis:has(a[data-id][hidden]) .grupo .cuenta{display:none}
#mmdBuscar,#pdBuscar{padding-left:40px;background-image:var(--diag-lupa);background-repeat:no-repeat;background-position:10px 50%;background-size:20px 20px}
.mmd-barra .pestanas{flex:none}
#diagPropios>.mmd-indice{gap:6px;margin-bottom:0}
#diagPropios>.mmd-indice a{transition:background var(--dur) var(--curva),border-color var(--dur) var(--curva)}
#diagPropios>.vacio{margin-top:var(--e-4)}
#diagPropios>.ayuda,#diagOficiales>.ayuda{margin:var(--e-4) 0}

/* ---------- 4. Sistemas y tarjetas de diagrama ---------- */
.mmd-sis{scroll-margin-top:calc(var(--diag-partes-alto) + var(--e-2))}
#diagPropios>.mmd-indice{margin-bottom:var(--e-5)}
/* Cada sistema es una fila que se abre: cerrada, un filete fino; abierta, filete de tinta y sus dibujos debajo */
#diagPropios>.mmd-sis:first-of-type{border-top:1px solid var(--linea-fuerte)}
.mmd-plegable>summary{display:block;list-style:none;border-radius:0}
.mmd-plegable>summary::-webkit-details-marker{display:none}
.mmd-plegable>summary:focus-visible{outline-offset:-2px}
.mmd-grupo{gap:var(--e-3);min-height:56px;margin:0;padding:var(--e-3) var(--e-2) var(--e-3) var(--e-3);border-bottom:1px solid var(--linea-fuerte);transition:background var(--dur) var(--curva)}
.mmd-plegable>summary:hover .mmd-grupo{background:var(--superficie-2)}
.mmd-abrir{margin-left:auto;font-family:var(--f-base);font-stretch:100%;font-size:var(--t-s);font-weight:600;letter-spacing:0;color:var(--texto-2)}
.mmd-chevron{color:var(--texto-2);transition:transform var(--dur) var(--curva)}
.mmd-plegable[open] .mmd-chevron{transform:rotate(90deg)}
.mmd-plegable[open]>summary .mmd-grupo{border-bottom:2px solid var(--tinta)}
.mmd-plegable>.mmd-grid{padding:var(--e-5) 0 var(--e-7)}
/* 320 px de mínimo: en tableta (820) caben dos columnas; en el escritorio, tres */
.mmd-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:var(--e-5) var(--e-4)}

/* Marco del dibujo: siempre 16:9 sobre blanco (los dibujos son apaisados; con 3:2 sobraba blanco), para que las tarjetas de una fila queden alineadas */
.mmd-ver{position:relative;width:100%;aspect-ratio:16/9;background:#fff var(--diag-hueco) center/48px 48px no-repeat}
.mmd-ver img{position:absolute;inset:var(--e-2);width:calc(100% - 2*var(--e-2));height:calc(100% - 2*var(--e-2));object-fit:contain}
.mmd-ver::after{content:"";position:absolute;right:var(--e-2);bottom:var(--e-2);width:32px;height:32px;border-radius:var(--r-2);background:var(--tinta) var(--diag-ampliar) center/18px 18px no-repeat;opacity:0;transform:translateY(2px);transition:opacity var(--dur) var(--curva),transform var(--dur) var(--curva)}
.mmd-ver:hover::after,.mmd-ver:focus-visible::after{opacity:1;transform:none}
@media (hover:none){.mmd-ver::after{opacity:1;transform:none}}   /* sin ratón: el icono de ampliar se ve siempre */

.mmd-fig figcaption{position:relative;flex:1;gap:var(--e-2);padding:var(--e-4)}
.mmd-fig figcaption>b{padding-right:104px;font-family:var(--f-titulo);font-stretch:var(--ancho-titulo);font-size:1rem;font-weight:700;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.mmd-fig figcaption>.mmd-tipo{position:absolute;top:var(--e-4);right:var(--e-4)}
.mmd-fig figcaption>span:not(.mmd-tipo){line-height:1.5}
.mmd-cods{gap:6px;margin-top:var(--e-1)}
.mmd-sup{margin-top:auto;padding-top:var(--e-3);border-top:1px solid var(--linea)}
.mmd-sup summary{display:inline-block;padding:2px 0;font-size:var(--t-s)}
.mmd-sup summary:hover{color:var(--texto)}
.mmd-sup ul{font-size:var(--t-s);line-height:1.45}
.mmd-sup li+li{margin-top:var(--e-1)}

/* ---------- 5. Etiqueta de tipo y códigos ---------- */
.mmd-tipo{flex:none;min-height:22px;padding:2px 8px 2px 6px;border:1px solid var(--linea-fuerte);border-radius:var(--r-1);background:var(--superficie);color:var(--texto);line-height:1.3;white-space:nowrap}
.mmd-fig figcaption>.mmd-tipo{color:var(--texto)}
.mmd-cod{display:inline-flex;align-items:center;min-height:28px;padding:0 8px;border-color:var(--linea-fuerte);background:transparent;font-weight:500;transition:background var(--dur) var(--curva),border-color var(--dur) var(--curva)}
.mmd-cod:hover{background:var(--superficie-2);border-color:var(--tinta-2)}

/* ---------- 6. Fuentes oficiales y resumen por sistema ---------- */
/* Bloque de los diagramas propios: un bloque tranquilo con borde, sin franja de color */
.fuente-propia{margin-top:var(--e-5);padding:var(--e-5);border:1px solid var(--linea-fuerte);border-radius:var(--r-3)}
.fuente-propia .btn{background:var(--superficie);border-color:var(--borde-control);box-shadow:none}
.fuente-propia .btn:hover{background:var(--superficie);border-color:var(--tinta-2)}
/* Columnas equilibradas: los sistemas tienen entre 2 y 12 diagramas, y en rejilla quedaban huecos grandes */
.mmd-resumen{display:block;columns:3 240px;column-gap:var(--e-6);margin:var(--e-5) 0 var(--e-2)}
.mmd-resumen>div{break-inside:avoid;padding-bottom:var(--e-5)}
.mmd-resumen h4{margin:0;padding-bottom:var(--e-2);border-bottom:1px solid var(--linea-fuerte)}
.mmd-resumen .lista-oficial{margin-top:0}
.mmd-resumen .lista-oficial li{padding:0;border-top:0;border-bottom:1px solid var(--linea)}
.mmd-resumen .lista-oficial a{display:block;padding:6px 0;font-size:var(--t-s);font-weight:500;line-height:1.4;text-decoration:none}
.mmd-resumen .lista-oficial a:hover{text-decoration:underline;text-decoration-color:var(--tinta);text-decoration-thickness:1px}

/* ---------- 7. Mis archivos, figuras de boletines y esquemas ---------- */
#diagGrupos>.vacio{margin-bottom:var(--e-3)}
.diag-grupo h2{display:flex;align-items:center;gap:var(--e-3);margin:var(--e-5) 0 var(--e-3);font-size:var(--t-l)}
.diag-grupo:last-child{margin-bottom:0}

/* Páginas de boletín: la hoja se ve entera, en blanco sobre un fondo hundido */
#diagBoletines{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:var(--e-4)}
#diagBoletines .miniatura .ver{height:236px;padding:var(--e-3);background:var(--hundido)}
#diagBoletines .ver-pdf canvas{width:auto;max-height:212px;background:#fff;box-shadow:0 0 0 1px var(--linea-fuerte),var(--sombra-1)}
/* Mientras pdf.js dibuja, la hoja ya ocupa su sitio (420×544, carta) en gris claro; al terminar aparece la página */
#diagBoletines .ver-pdf canvas:not(.lista){background:var(--superficie-2);box-shadow:0 0 0 1px var(--linea)}
/* Pie en dos líneas: el número de boletín entero (se lee y se copia) y debajo la página */
#diagBoletines .pie{align-items:flex-start;padding:var(--e-2) var(--e-3)}
#diagBoletines .pie span{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-width:0}
#diagBoletines .pie b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-xs);font-weight:600;line-height:1.4}
#diagBoletines .pie small{flex:none;color:var(--texto-2);font-size:var(--t-xs);line-height:1.4}
#diagBoletines>.vacio,#diagBoletines>.ayuda{grid-column:1/-1}

#diagEsquemas{grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr))}
#diagEsquemas figcaption{flex:1;gap:var(--e-1);padding:var(--e-4)}
#diagEsquemas figcaption b{font-family:var(--f-titulo);font-stretch:var(--ancho-titulo);font-size:1rem;font-weight:700;line-height:1.25;letter-spacing:-.01em}
#diagEsquemas figcaption span{line-height:1.5}

/* ---------- 8. Página completa: índice ---------- */
/* Numeración fija de sistemas y láminas (data-n, la pone pagina.js): no cambia al buscar o filtrar */
.pd-cuerpo{grid-template-columns:296px minmax(0,1fr)}
/* Título, buscador y filtro quedan fijos; lo que se desplaza es la lista */
.pd-indice{height:100vh;height:100dvh;overflow:hidden;padding:var(--e-5) 0 0}
.pd-indice-tit{margin:0 var(--e-4) var(--e-3)}
.pd-indice>input{flex:none;margin:0 var(--e-4) var(--e-2)}
.pd-filtro{flex:none;margin:0 var(--e-4) var(--e-3)}
.pd-filtro button{min-width:0;padding:6px 2px}
.pd-indice-lista{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--e-2) var(--e-6);border-top:1px solid var(--linea);scrollbar-width:thin}
.pd-indice .grupo{margin:var(--e-4) var(--e-2) var(--e-1);line-height:1.3}
.pd-indice .grupo a{flex:1;min-width:0;padding:0;border-radius:var(--r-1);color:var(--texto);font-size:inherit;font-weight:650;line-height:inherit}
.pd-indice .grupo a::before{content:attr(data-n);display:inline-block;min-width:20px;color:var(--texto-3);font:500 var(--t-xs)/1 var(--f-mono);font-stretch:90%}
.pd-indice .grupo a:hover{background:none;text-decoration:underline;text-decoration-color:var(--tinta);text-decoration-thickness:1px;text-underline-offset:3px}
.pd-indice a[data-id]{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:baseline;gap:0 var(--e-1);padding:5px var(--e-2);transition:background var(--dur) var(--curva),color var(--dur) var(--curva)}
.pd-indice a[data-id]::before{content:attr(data-n);white-space:nowrap;color:var(--texto-3);font:500 var(--t-xs)/1 var(--f-mono);font-stretch:90%;font-variant-numeric:tabular-nums}
.pd-indice a[data-id]:hover::before{color:var(--texto-2)}
.pd-indice a:focus-visible{outline-offset:-2px}

/* ---------- 9. Página completa: láminas ---------- */
.pd-main{max-width:1200px;padding-top:var(--e-5)}
.pd-main>.vacio{max-width:72ch}
/* Sin índice (página abierta sin vehículo, sin configuración o con error): el aviso usa todo el ancho,
   y no se ofrece imprimir una página vacía */
.pd-cuerpo:has(>.pd-indice[hidden]){grid-template-columns:minmax(0,1fr)}
.pd-cuerpo:has(>.pd-indice[hidden])>.pd-main{max-width:none;padding-top:var(--e-6)}
body.pagina-diag:has(.pd-indice[hidden]) #pdImprimir,
body.pagina-diag:has(#pdAnio:empty) .pd-placa .placa-datos{display:none}
.pd-config .ayuda{max-width:96ch}

.pd-sis{scroll-margin-top:var(--e-4)}
.pd-grupo{align-items:baseline;gap:var(--e-3);margin:var(--e-8) 0 var(--e-5);padding-bottom:var(--e-3)}
.pd-grupo::before{content:attr(data-n);color:var(--texto-3);font:500 var(--t-xl)/1 var(--f-mono);font-stretch:90%;letter-spacing:0}
.pd-grupo .cuenta{align-self:center}

/* Lámina: número de sección, título y tipo; explicación; dibujo sobre blanco; códigos y supuestos */
.pd-diag{margin-bottom:var(--e-6);border-color:var(--linea-fuerte);border-radius:var(--r-2)}
.pd-diag-cab{flex-wrap:nowrap;align-items:flex-start;gap:var(--e-3) var(--e-5);padding:var(--e-4) var(--e-5) 0}
.pd-diag-cab>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e-1) var(--e-3);min-width:0;padding-top:6px}
.pd-diag-cab>div::before{content:attr(data-n);order:1;color:var(--texto-3);font:500 var(--t-m)/1 var(--f-mono);font-stretch:90%;font-variant-numeric:tabular-nums}
.pd-diag-cab h3{order:2;margin:0;font-size:var(--t-xl)}
.pd-diag-cab .mmd-tipo{order:3;align-self:center}
.pd-diag-cab>button,.pd-diag-acc{flex:none}
.pd-diag-acc{display:flex;flex-wrap:wrap;gap:var(--e-2)}
/* La lámina a la que se saltó desde el índice queda marcada con un filete amarillo arriba */
.pd-diag:target{border-color:var(--borde-control);box-shadow:inset 0 3px 0 var(--amarillo)}
.pd-nota{margin:var(--e-2) var(--e-5) var(--e-4);max-width:96ch}
.pd-lamina{padding:var(--e-4) var(--e-5)}
.pd-lamina img{max-width:1040px;margin:0 auto}

.pd-detalle{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:0 var(--e-7);padding:0 var(--e-5) var(--e-5)}
.pd-detalle h4{margin:var(--e-4) 0 var(--e-2);font-size:var(--t-s);color:var(--texto-2);letter-spacing:0}
.pd-cods{gap:0;border-bottom:1px solid var(--linea)}
.pd-cods div{grid-template-columns:64px minmax(0,1fr);gap:var(--e-3);padding:6px 0;border-top:1px solid var(--linea)}
.pd-cods dt{font-size:var(--t-s);line-height:1.5}
.pd-cods dd{line-height:1.5}
.pd-sup{padding:var(--e-2) 0 0 18px;border-top:1px solid var(--linea);line-height:1.5}
.pd-sup li{margin-bottom:6px}
.pd-pie{margin-top:var(--e-7);padding-top:var(--e-4);border-top:1px solid var(--linea);font-size:var(--t-s);max-width:none}

/* ---------- 10. Tableta y celular ---------- */
@media screen and (max-width:960px){
  /* Con el aviso de modo consulta la barra de arriba ocupa dos filas: el índice de partes no se pega */
  body.invitado .diag-secciones{position:static}
  .mmd-resumen{columns:2 220px}
  /* Panel: el vehículo ocupa su fila y los dos botones van juntos debajo, en vez de uno arriba y otro suelto */
  .mmd-cab{justify-content:flex-start}
  .mmd-cab>div:first-child{flex-basis:100%}
  /* Placa de la página completa: el nombre usa todo el ancho y las acciones bajan a su propia fila */
  .pd-placa>.pd-acciones{grid-row:3;grid-column:1/-1}

  /* Página completa: buscador y filtro arriba; los sistemas pasan a una tira que se queda pegada al bajar */
  .pd-cuerpo{display:flex;flex-wrap:wrap;align-items:center}
  .pd-indice{display:contents}
  .pd-indice-tit{display:none}
  .pd-indice>input{flex:1 1 240px;margin:var(--e-4) 0 var(--e-3) var(--margen)}
  .pd-filtro{flex:none;margin:var(--e-4) var(--margen) var(--e-3) var(--e-3)}
  .pd-filtro button{padding:6px 14px}
  .pd-indice-lista{position:sticky;top:0;z-index:10;flex:0 0 100%;flex-direction:row;align-items:center;gap:var(--e-2);min-height:56px;padding:var(--e-2) var(--margen);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea-fuerte);background:var(--lateral);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .pd-indice-lista::-webkit-scrollbar{display:none}
  .pd-indice-sis{flex:none;flex-direction:row;gap:0}
  .pd-indice a[data-id]{display:none}
  .pd-indice .grupo{position:relative;flex-basis:auto;gap:var(--e-2);min-height:var(--control);margin:0;padding:0 var(--e-3);border:1px solid var(--linea-fuerte);border-radius:var(--r-2);background:var(--superficie);font-weight:600;white-space:nowrap}
  .pd-indice .grupo a{font-weight:600;text-decoration:none}
  .pd-indice .grupo a::after{content:"";position:absolute;inset:0;border-radius:var(--r-2)}
  .pd-indice .grupo a:hover{text-decoration:none}
  .pd-indice .grupo:hover{border-color:var(--tinta-2)}
  .pd-indice .grupo a::before{min-width:0;margin-right:var(--e-2)}
  .pd-main{flex:0 0 100%;max-width:none}
  .pd-sis,.pd-diag{scroll-margin-top:calc(56px + var(--e-3))}
  .pd-grupo{margin-top:var(--e-7)}
}
@media screen and (max-width:700px){
  .pd-placa>.pd-acciones{grid-row:4}   /* en el celular el nombre tiene su propia fila: datos en la 3, acciones en la 4 */
  #v-diagramas>h2{margin-top:var(--e-7);padding-top:var(--e-5)}
  .diag-secciones{gap:0 var(--e-4);margin-right:calc(-1*var(--margen));padding-right:var(--margen)}
  .mmd-panel{padding:var(--e-4)}
  .mmd-botones>:is(.btn,.btn-gris){flex:1 1 100%;white-space:normal;text-align:center}
  .mmd-botones>label.en-linea{order:0;flex-wrap:wrap;gap:var(--e-1) var(--e-2);white-space:normal}
  .mmd-botones select{flex:1 1 100%;width:100%}
  .mmd-ficha{flex-basis:96px}
  .mmd-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mmd-form-pie>*{flex:1 1 100%;white-space:normal;text-align:center}
  .mmd-barra .pestanas{flex:1 1 100%}
  .mmd-barra .pestanas button{flex:1}
  /* Sistemas: una tira que se desliza, en vez de seis filas de botones */
  #diagPropios>.mmd-indice{flex-wrap:nowrap;margin-right:calc(-1*var(--margen));padding-right:0;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:var(--e-4)}
  #diagPropios>.mmd-indice::-webkit-scrollbar{display:none}
  #diagPropios>.mmd-indice a{flex:none}
  .mmd-grupo{min-height:52px}
  .mmd-cod{min-height:40px;padding:0 12px}
  .mmd-sup summary{display:flex;align-items:center;min-height:44px}
  .mmd-fig figcaption>b{padding-right:96px}
  .fuente-propia{padding:var(--e-4)}
  .mmd-resumen{columns:1}
  .mmd-resumen .lista-oficial a{padding:var(--e-2) 0;font-size:var(--t-m)}
  #diagBoletines{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-3)}
  #diagBoletines .miniatura .ver{height:200px}
  #diagBoletines .ver-pdf canvas{max-height:176px}

  .pd-indice>input{flex-basis:100%;margin:var(--e-3) var(--margen) var(--e-2)}
  .pd-filtro{flex:1 1 100%;margin:0 var(--margen) var(--e-3)}
  /* En el celular «Abrir en grande» va justo debajo del dibujo, que es lo que se quiere ampliar */
  .pd-diag:not(:has(>.vacio)){display:flex;flex-direction:column}
  .pd-diag-cab{display:contents}
  .pd-diag-cab>div{order:1;padding:var(--e-4) var(--e-4) 0}
  .pd-nota{order:2}
  .pd-lamina{order:3}
  .pd-diag-cab>:is(button,.pd-diag-acc){order:4;margin:var(--e-3) var(--e-4) 0}
  .pd-detalle{order:5}
  .pd-diag-cab h3{font-size:var(--t-l)}
  .pd-lamina{padding:var(--e-2)}
  .pd-detalle{padding:0 var(--e-4) var(--e-4)}
}

/* ---------- 11. Impresión de la página completa: portada con índice y una lámina tras otra ---------- */
@media print{
  @page diagramas{
    margin:14mm 14mm 17mm;
    @bottom-left{content:"Mechanic Max. Diagramas propios: no son los de fábrica";font:8pt Archivo,"Segoe UI",sans-serif;color:#444}
    @bottom-right{content:"Página " counter(page) " de " counter(pages);font:8pt Archivo,"Segoe UI",sans-serif;color:#444}
  }
  body.pagina-diag{page:diagramas;font-size:10pt}
  body.pagina-diag .mmd-tipo::before,body.pagina-diag .mmd-ficha small::before,body.pagina-diag .mmd-punto{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* Portada: el índice se imprime como tabla de contenido, en tres columnas y con la misma numeración que las láminas */
  body.pagina-diag>.pd-cuerpo>.pd-indice:not([hidden]){display:block!important;position:static;height:auto;max-height:none;overflow:visible;margin:0 0 6mm;padding:0;border:0;background:none}
  body.pagina-diag .pd-indice>input,body.pagina-diag .pd-filtro{display:none!important}
  body.pagina-diag .pd-indice-tit{margin:0 0 3mm;padding-bottom:1.5mm;border-bottom:1px solid #000;font-size:13pt}
  body.pagina-diag .pd-indice-lista{display:block;columns:3;column-gap:8mm;overflow:visible;padding:0;border:0}
  body.pagina-diag .pd-indice-sis{break-inside:avoid;padding-bottom:3mm}
  body.pagina-diag .pd-indice .grupo{margin:0 0 1mm;font-size:9pt;color:#000}
  body.pagina-diag .pd-indice .grupo .cuenta{display:none}
  body.pagina-diag .pd-indice a{color:#000}
  body.pagina-diag .pd-indice a[data-id]{grid-template-columns:11mm minmax(0,1fr);padding:.6mm 0;font-size:8.5pt;line-height:1.3}
  body.pagina-diag .pd-indice a::before{color:#444;white-space:nowrap}

  body.pagina-diag .pd-config{break-inside:avoid;padding:4mm;border-radius:0}
  body.pagina-diag .pd-config .mmd-cab .ayuda{display:block}
  body.pagina-diag .mmd-fichas{border-color:#999;background:#999;border-radius:0}
  body.pagina-diag .pd-config .ayuda{font-size:8.5pt;max-width:none}

  body.pagina-diag .pd-grupo{margin:0 0 5mm;padding-bottom:2mm;font-size:17pt}
  body.pagina-diag .pd-grupo::before{color:#000;font-size:17pt}
  body.pagina-diag .pd-grupo .cuenta{display:none}
  body.pagina-diag .pd-diag{margin:0 0 7mm;padding-top:2.5mm;border:0;border-top:1.5pt solid #000;border-radius:0;box-shadow:none;overflow:visible}
  body.pagina-diag .pd-diag-cab{padding:0}
  body.pagina-diag .pd-diag-cab>div{padding-top:0}
  body.pagina-diag .pd-diag-cab>div::before{color:#000;font-size:10pt}
  body.pagina-diag .pd-diag-cab h3{font-size:13pt}
  body.pagina-diag .mmd-tipo{border-color:#999;font-size:8pt}
  body.pagina-diag .pd-nota{margin:1.5mm 0 3mm;max-width:none;font-size:9pt;line-height:1.4}
  body.pagina-diag .pd-lamina{padding:2mm;border:1px solid #999}
  body.pagina-diag .pd-lamina img{max-width:100%;max-height:138mm;object-fit:contain}
  body.pagina-diag .pd-detalle{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8mm;padding:0}
  body.pagina-diag .pd-detalle>div:only-child{grid-column:1/-1}
  body.pagina-diag .pd-detalle h4{margin:3mm 0 1.5mm;font-size:9pt;color:#000}
  body.pagina-diag .pd-cods,body.pagina-diag .pd-cods div,body.pagina-diag .pd-sup{border-color:#bbb}
  body.pagina-diag .pd-cods div{padding:.8mm 0}
  body.pagina-diag .pd-cods dt,body.pagina-diag .pd-cods dd,body.pagina-diag .pd-sup{font-size:8.5pt;line-height:1.35}
  body.pagina-diag .pd-sup li{margin-bottom:.8mm}
  body.pagina-diag .pd-pie{margin-top:6mm;padding-top:2mm;border-color:#999;font-size:8pt}
}

/* ---------- 12. Pulido final (v11) ---------- */
/* Configuración del vehículo: en el escritorio siempre a la vista; en el celular, plegada en una línea («I4 1.5 L turbo · Integral · CVT»)
   para que el primer diagrama no quede a dos pantallas */
.mmd-cfg>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);min-height:var(--control);margin-top:var(--e-3);padding:var(--e-2) var(--e-3);border:1px solid var(--linea-fuerte);border-radius:var(--r-2);background:var(--superficie);list-style:none;font-weight:400;font-size:var(--t-s);color:var(--texto-2)}
.mmd-cfg>summary::-webkit-details-marker{display:none}
.mmd-cfg>summary b{color:var(--texto);font-weight:650}
.mmd-cfg-ver{flex:none;font-weight:600;color:var(--texto);text-decoration:underline;text-decoration-color:var(--amarillo);text-decoration-thickness:2px;text-underline-offset:3px}
.mmd-cfg[open] .mmd-cfg-ver{display:none}
@media (min-width:701px){.mmd-cfg>summary{display:none}}
/* Página completa: «Imprimir este» y «Abrir en grande» juntos */
.pd-diag-acc .btn-gris{min-height:36px;padding:6px 12px;font-size:var(--t-s)}
@media screen and (max-width:700px){
  /* La introducción larga de la sección se recorta a dos renglones (el detalle está en la página completa) */
  #v-diagramas>h2+.ayuda{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  /* La tira de partes se desliza: el borde derecho se difumina para que se note */
  .diag-secciones{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
}
@media print{
  /* Primera lámina justo debajo de la configuración: la página 2 ya no sale casi vacía */
  body.pagina-diag .pd-main>section.pd-sis:first-of-type .pd-grupo{break-before:auto}
  /* «Imprimir este»: solo esa lámina, sin portada, índice ni configuración */
  body.imprimir-uno .pd-diag:not(.imprimir),body.imprimir-uno.pagina-diag>.pd-cuerpo>.pd-indice:not([hidden]),body.imprimir-uno .pd-config,body.imprimir-uno .pd-grupo,body.imprimir-uno .pd-pie,body.imprimir-uno #pdNada{display:none!important}
  body.imprimir-uno .pd-diag.imprimir{border-top:0;margin:0}
  body.imprimir-uno .pd-diag.imprimir .pd-lamina img{max-height:190mm}
}