/* Mechanic Max — css/taller.css Vistas: Todos los vehículos (#catalogo), Órdenes de trabajo (#ordenes), editor e impresión de la orden, Taller y respaldo (#ajustes), aviso de modo consulta, avisos breves (#toast) y visor de documentos (.visor). 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. Todos los vehículos 4. Taller y respaldo 2. Órdenes de trabajo 5. Modo consulta, avisos breves y visor 3. Editor de la orden 6. Tableta y celular 7. Orden impresa (factura / presupuesto) */ /* ---------- 1. Todos los vehículos ---------- */ /* Estado del catálogo: cifras a la izquierda, fecha y acción a la derecha, progreso debajo */ #catEstado{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--e-3) var(--e-5);padding:var(--e-4) var(--e-5);margin-bottom:var(--e-6)} #catEstado>.fila-botones{grid-column:2;grid-row:1;flex-direction:column;align-items:flex-end;gap:var(--e-2);margin:0} #catEstado>.fila-botones .ayuda{font-size:var(--t-s)} #catEstado .bib-cifras span{white-space:nowrap} #catEstado>.cat-progreso{grid-column:1/-1;grid-row:2;padding-top:var(--e-3);border-top:1px solid var(--linea)} #catEstado .bib-cifras b{font-size:var(--t-2xl);letter-spacing:-.02em} #catEstado .progreso{height:6px;margin:var(--e-2) 0 0} #catEstado>div:first-child:not(.bib-cifras){color:var(--texto)} /* preparando / error: el texto manda */ /* Explorador: año y marca se quedan a la vista mientras se recorren los modelos */ #v-catalogo .explorador{--alto-col:min(calc(100vh - var(--barra-alto) - 96px),680px);grid-template-columns:88px 172px minmax(0,1fr);gap:var(--e-5);margin-bottom:var(--e-4)} #v-catalogo .explorador>div:not(.cat-principal){position:sticky;top:calc(var(--barra-alto) + var(--e-4))} #v-catalogo .explorador>div>h3{font-size:var(--t-s);font-weight:600;color:var(--texto-2);font-family:var(--f-base);font-stretch:100%;letter-spacing:0;min-height:0;margin:0 0 var(--e-2)} #v-catalogo .col-lista{height:var(--alto-col);min-height:280px;border-color:var(--linea-fuerte)} #catMarcas.col-lista{height:calc(var(--alto-col) - 48px);min-height:232px} #v-catalogo .col-lista button{min-height:36px;padding:var(--e-2) var(--e-3);font-size:var(--t-m);line-height:1.3;color:var(--texto)} #v-catalogo .col-lista button:last-child{border-bottom:0} #v-catalogo .col-lista button.activa{color:var(--texto)} #v-catalogo .col-lista button:focus-visible{outline-offset:-3px} #v-catalogo #catAnios button{font-family:var(--f-mono);font-stretch:90%;font-size:var(--t-s)} #v-catalogo .filtro-col{min-height:var(--control)} /* Cabecera de la rejilla de modelos */ #v-catalogo .cat-principal{gap:var(--e-4)} #v-catalogo .cat-cab{min-height:var(--control)} #catTitulo{font-size:var(--t-l)} #v-catalogo .cat-cab .filtro-col{width:240px} /* Ficha del modelo elegido: foto, nombre, tres cifras y acciones en una fila */ #catFicha{grid-template-columns:240px minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:var(--e-3) var(--e-5);padding:var(--e-5);background:var(--superficie-2);border-color:var(--linea-fuerte)} #catFicha .cat-ficha-datos{display:contents} #catFicha>.foto{grid-column:1;grid-row:1/span 3} #catFicha .cat-ficha-datos>*{grid-column:2;margin:0} #catFicha .cat-ficha-datos>.fila-botones{grid-column:1/-1;column-gap:var(--e-2);margin-top:var(--e-2);padding-top:var(--e-4);border-top:1px solid var(--linea)} #catFicha h2{font-size:var(--t-xl);align-self:end} #catFicha .foto img,#catFicha .foto>span{background-color:var(--superficie);border-color:var(--linea)} #catFicha .foto figcaption{font-size:var(--t-xs)} #catFicha .bib-cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;align-self:start;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-2);overflow:hidden} #catFicha .bib-cifras span{display:flex;flex-direction:column;gap:2px;padding:var(--e-3) var(--e-4);font-size:var(--t-s);line-height:1.3} #catFicha .bib-cifras span+span{border-left:1px solid var(--linea)} #catFicha .bib-cifras b{margin:0;font-size:var(--t-xl);line-height:1.1;letter-spacing:-.02em} #catFicha .ayuda{font-size:var(--t-s)} #catFicha>.ayuda{padding:var(--e-2) 0} /* «Cargando…» */ #bCatPre{border-color:transparent;background:none;padding-left:var(--e-2);padding-right:var(--e-2);text-decoration:underline;text-decoration-color:var(--amarillo);text-decoration-thickness:2px;text-underline-offset:3px} #bCatPre:hover{background:var(--hundido);text-decoration-color:var(--tinta)} /* Tarjetas de modelo: foto 4:3 (de estudio sin fondo o normal) y el nombre debajo */ #v-catalogo .cat-modelos{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:var(--e-4)} #v-catalogo .cat-tarjeta{border-color:var(--linea);color:var(--texto)} /* Mientras la foto llega (o si no llega), el marco enseña una silueta neutra de carro, no un hueco gris */ #v-catalogo .cat-tarjeta img{padding:var(--e-3);border-bottom:1px solid var(--linea);transition:transform .24s var(--curva); background:var(--hundido) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B4B7B1' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17v-4.2l1.7-4.4A2 2 0 0 1 8.6 7h6.8a2 2 0 0 1 1.9 1.4L19 12.8V17'/%3E%3Cpath d='M5 12.8h14M3.5 17h17M6.5 17v2.5M17.5 17v2.5'/%3E%3Cpath d='M7.8 14.9h1.4M14.8 14.9h1.4'/%3E%3C/svg%3E") center/44% no-repeat} #v-catalogo .cat-tarjeta span{display:block;padding:var(--e-3) var(--e-3) var(--e-3);font-size:var(--t-m);font-weight:600;line-height:1.3} #v-catalogo .cat-tarjeta:hover img{transform:scale(1.03)} #v-catalogo .cat-tarjeta:focus-visible{outline:2px solid var(--tinta);outline-offset:2px} #v-catalogo .cat-tarjeta.activa{border-color:var(--tinta)} #v-catalogo .cat-tarjeta.activa span{background:var(--amarillo-suave)} #v-catalogo .cat-modelos>.ayuda{margin:0;padding:var(--e-6) var(--e-5);border:1px dashed var(--linea-fuerte);border-radius:var(--r-3);background:var(--superficie-2);text-align:center;max-width:none} /* Búsqueda en todos los boletines: resultado a la izquierda, botón a la derecha */ #v-catalogo>h2{margin-top:var(--e-8);padding-top:var(--e-6);border-top:1px solid var(--linea)} #formCat{margin-bottom:var(--e-2)} #catCuenta{font-size:var(--t-s);margin:0 0 var(--e-3)} #catCuenta:empty{display:none} #catResultados .bol{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--e-5);align-items:start;padding:var(--e-3) 0} #catResultados .bol>*{grid-column:1} #catResultados .bol>button{grid-column:2;grid-row:1/span 3;align-self:center} #catResultados .bol p{margin:var(--e-1) 0 0} #catResultados .bol p.ayuda{margin:var(--e-1) 0 0;font-size:var(--t-s)} #catResultados>.ayuda{margin:var(--e-3) 0} /* ---------- 2. Órdenes de trabajo ---------- */ #v-ordenes .cabecera{align-items:center} #v-ordenes .cabecera h1{margin:0} #v-ordenes .filtros{gap:var(--e-3);margin-bottom:var(--e-5)} #v-ordenes .filtros>input{flex:1 1 280px;max-width:480px} #v-ordenes .filtros>.pestanas{margin-left:auto} #tOrdenes{margin-top:0} #tOrdenes th{background:var(--superficie-2);border-top:1px solid var(--linea)} #tOrdenes td{padding-top:var(--e-3);padding-bottom:var(--e-3)} :is(#tOrdenes,#oHistorial .tabla) td:first-child{font-weight:500;color:var(--texto-2);width:88px} :is(#tOrdenes,#oHistorial .tabla) td:nth-child(2){white-space:nowrap;color:var(--texto-2);width:128px} :is(#tOrdenes,#oHistorial .tabla) td:nth-child(3){font-weight:600} :is(#tOrdenes,#oHistorial .tabla) td:nth-child(3) small{font-weight:400} :is(#tOrdenes,#oHistorial .tabla) td:nth-child(4) small.mono{font-size:var(--t-xs);letter-spacing:.02em} :is(#tOrdenes,#oHistorial .tabla) td:nth-child(5){width:136px} :is(#tOrdenes,#oHistorial .tabla) td.n{font-weight:650;width:112px} #tOrdenes tbody tr[data-id]:focus-within td{background:var(--superficie-2)} /* Sin órdenes, o ninguna coincide: un estado vacío centrado que dice qué hacer */ #tOrdenes:has(td.vacio){border-top:0} #tOrdenes td.vacio .vacio-accion{padding:0} body.invitado [data-nueva]{display:none} #tOrdenes td.vacio{white-space:normal;padding:var(--e-8) var(--e-5);border:1px dashed var(--linea-fuerte);border-radius:var(--r-3);background:var(--superficie-2);color:var(--texto-2);text-align:center} /* ---------- 3. Editor de la orden (panel lateral) ---------- */ #dOrden .panel-cab h2{line-height:1.2} #oFecha:empty{display:none} #dOrden .panel-cuerpo>.aviso{margin-bottom:var(--e-5)} #dOrden .tres-c{margin-top:var(--e-6);padding-top:var(--e-5);border-top:1px solid var(--linea)} #dOrden .tres-c li::before{margin-top:24px} #dOrden .chips{margin-top:var(--e-2)} #dOrden .chips:empty{display:none} #dOrden .panel-cuerpo>h3{margin:var(--e-6) 0 var(--e-3);padding-top:var(--e-5);border-top:1px solid var(--linea)} #dOrden .lineas th:nth-child(3),#dOrden .lineas th:nth-child(4){text-align:right;padding-right:var(--e-3)} #dOrden .lineas input[type=number]{text-align:right} #dOrden .lineas td:nth-child(5){padding-right:var(--e-2)} #dOrden .lineas td:last-child{width:40px;text-align:center} #dOrden .lineas button{width:var(--control);height:var(--control)} #dOrden .lineas td.ayuda{padding:var(--e-4) var(--e-1)!important;border:1px dashed var(--linea-fuerte);border-radius:var(--r-2);text-align:center} #dOrden .panel-cuerpo>.fila-botones{margin-top:var(--e-3)} #oTotales{width:320px;margin-top:var(--e-5);padding:var(--e-4);background:var(--superficie-2);border:1px solid var(--linea);border-radius:var(--r-3)} #oTotales div{padding:var(--e-1) 0} #oTotales div span:last-child{color:var(--texto);font-weight:500} #oTotales .gran span:last-child{font-weight:750} #oHistorial:not(:empty){margin-top:var(--e-6);padding-top:var(--e-5);border-top:1px solid var(--linea)} #oHistorial h3{margin-top:0} /* ---------- 4. Taller y respaldo ---------- */ /* Cada apartado: título a la izquierda y su contenido a la derecha, separados por filetes (sin tarjetas) */ #v-ajustes>h1{margin-bottom:var(--e-6)} #v-ajustes .ajuste,#v-ajustes>.compartir{--col-titulo:240px;display:grid;grid-template-columns:var(--col-titulo) minmax(0,1fr);column-gap:var(--e-7);align-items:start;margin:0;padding:var(--e-6) 0;border:0;border-top:1px solid var(--linea);border-radius:0;background:none} #v-ajustes .ajustes-cuerpo .ajuste:last-child{border-bottom:1px solid var(--linea)} #v-ajustes .ajuste>*,#v-ajustes>.compartir>*{grid-column:2;max-width:760px} #v-ajustes .ajuste>h2,#v-ajustes>.compartir>h2{grid-column:1;grid-row:1;margin:0;padding-top:2px;font-size:var(--t-l)} #v-ajustes .ajuste>.ayuda,#v-ajustes>.compartir>.ayuda{margin:0 0 var(--e-4)} #v-ajustes .ajuste>:last-child,#v-ajustes>.compartir>:last-child{margin-bottom:0} #v-ajustes>.compartir>.vacio,#v-ajustes>.compartir>.ayuda:only-child{grid-column:1/-1} #formTaller{gap:var(--e-4)} #formTaller .ancho:last-child{display:flex;justify-content:flex-start;padding-top:var(--e-2)} /* Enlace para compartir */ #v-ajustes .aviso-mmd{margin:0 0 var(--e-4)} #v-ajustes .enlace-compartir{margin:0 0 var(--e-3)} #inEnlace{background:var(--superficie-2);color:var(--texto)} #v-ajustes>.compartir .fila-botones{margin:0 0 var(--e-3)} /* Precarga: cuatro cifras unidas por filetes, botones y la cola */ #precargaEstado{padding:0;background:none;border:0;gap:var(--e-3)} #precargaEstado .bib-cifras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-3);overflow:hidden} #precargaEstado .bib-cifras span{display:flex;flex-direction:column;gap:2px;padding:var(--e-3) var(--e-4);font-size:var(--t-s);line-height:1.35} #precargaEstado .bib-cifras span+span{border-left:1px solid var(--linea)} #precargaEstado .bib-cifras b{margin:0;font-size:var(--t-xl);line-height:1.15} #precargaEstado .progreso{height:6px} #precargaEstado>.ayuda{margin:0} #v-ajustes .ajuste>.fila-botones{margin:var(--e-4) 0} #tPrecarga:empty{display:none} #tPrecarga td:nth-child(2){color:var(--texto-2);white-space:nowrap} #v-ajustes .tabla-marco:has(#tPrecarga:empty){display:none} #respaldoInfo{max-width:64ch;overflow-wrap:anywhere} #respaldoInfo b{font-family:var(--f-mono);font-stretch:87.5%;font-size:.82em;font-weight:450;color:var(--texto);background:var(--hundido);padding:1px 4px;border-radius:var(--r-1);overflow-wrap:anywhere} /* ---------- 5. Modo consulta, avisos breves y visor ---------- */ /* Modo consulta (enlace compartido): una etiqueta discreta en la barra */ body.invitado .barra .aviso-invitado{min-height:32px;padding:var(--e-1) var(--e-3);border:1px solid var(--linea-fuerte);border-radius:var(--r-1);background:var(--superficie-2);color:var(--texto);line-height:1.35} /* Aviso breve dentro del editor de la orden: centrado en el panel y por encima de su pie */ .panel-lateral #toast{left:calc(100vw - min(880px,100vw)/2);bottom:calc(var(--control) + 2*var(--e-3) + var(--e-4))} .modal #toast{bottom:var(--e-4)} #toast{display:flex;align-items:center;gap:var(--e-2);line-height:1.4;max-width:min(560px,calc(100vw - 2*var(--e-4)))} /* Visor: el documento sobre un lienzo neutro; zoom como un solo control */ .visor-cab{min-height:64px;padding:var(--e-3) var(--e-5);background:var(--superficie);gap:var(--e-2) var(--e-5)} .visor-cab>b{flex:1 1 240px;font-size:var(--t-l)} .visor-acc{gap:var(--e-3)} #zMenos,#zMas{width:var(--control);padding:0} #zMenos{border-top-right-radius:0;border-bottom-right-radius:0} #zMas{border-top-left-radius:0;border-bottom-left-radius:0;margin-right:var(--e-2)} #zNivel{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:var(--control);margin:0 calc(-1*var(--e-3));border-top:1px solid var(--borde-control);border-bottom:1px solid var(--borde-control);background:var(--superficie-2);color:var(--texto);font-size:var(--t-s)} #zNivel[hidden]+#zMas{margin:0} .visor-lienzo{background:var(--hundido)} .visor-lienzo img{background:#fff;box-shadow:var(--sombra-1)} /* ---------- 6. Tableta y celular ---------- */ @media (max-width:1200px){ #v-ajustes .ajuste,#v-ajustes>.compartir{display:block} #v-ajustes .ajuste>h2,#v-ajustes>.compartir>h2{margin-bottom:var(--e-2)} } @media (max-width:1100px){ /* Catálogo: año y marca pasan a ser tiras que se deslizan de lado; los modelos usan todo el ancho */ #v-catalogo .explorador{grid-template-columns:minmax(0,1fr);gap:var(--e-4)} #v-catalogo .explorador>div:not(.cat-principal){position:static} #v-catalogo .col-lista,#catMarcas.col-lista{display:flex;height:auto;min-height:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain} #v-catalogo .col-lista::-webkit-scrollbar{display:none} #v-catalogo .col-lista button{flex:none;width:auto;min-height:var(--control);padding:var(--e-2) var(--e-4);border-bottom:0;border-right:1px solid var(--linea);white-space:nowrap;scroll-snap-align:start} #v-catalogo .col-lista button:last-child{border-right:0} #v-catalogo .col-lista button.activa{background:var(--superficie);box-shadow:inset 0 -3px 0 var(--amarillo)} #v-catalogo .col-lista .ayuda{margin:var(--e-3);white-space:normal} /* Marca: filtro y tira en la misma fila */ #v-catalogo .explorador>div:nth-child(2){display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--e-2) var(--e-3);align-items:center} #v-catalogo .explorador>div:nth-child(2)>h3{grid-column:1/-1} #v-catalogo .explorador>div:nth-child(2) .filtro-col{margin:0} #v-catalogo .cat-modelos{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))} #catEstado{grid-template-columns:minmax(0,1fr)} #v-ordenes .filtros>input{flex-basis:100%;max-width:none} #v-ordenes .filtros>.pestanas{margin-left:0} #catEstado>.cat-progreso{grid-row:auto} #catEstado>.fila-botones{grid-column:1;grid-row:auto;flex-direction:row;justify-content:space-between;align-items:center;padding-top:var(--e-3);border-top:1px solid var(--linea)} #catEstado>.fila-botones .ayuda{order:-1} } @media (max-width:700px){ /* Catálogo */ #catEstado{grid-template-columns:minmax(0,1fr);padding:var(--e-4)} #catEstado>.fila-botones{grid-column:1;grid-row:auto;justify-content:stretch} #catEstado>.fila-botones .ayuda{order:0;flex-basis:100%;text-align:center} #catEstado>.cat-progreso{grid-row:auto} #catEstado .bib-cifras{flex-direction:column;gap:var(--e-1)} #catEstado .bib-cifras b{font-size:var(--t-xl)} #v-catalogo .explorador>div:nth-child(2){display:block} #v-catalogo .explorador>div:nth-child(2) .filtro-col{margin-bottom:var(--e-2)} #v-catalogo .cat-cab{flex-direction:column;align-items:stretch} #v-catalogo .cat-cab .filtro-col{width:100%} #v-catalogo .cat-modelos{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-3)} #v-catalogo .cat-tarjeta img{padding:var(--e-2)} #v-catalogo .cat-tarjeta span{padding:var(--e-2) var(--e-3) var(--e-3);font-size:var(--t-s)} #catFicha{grid-template-columns:minmax(0,1fr);grid-template-rows:none;padding:var(--e-4)} #catFicha>.foto,#catFicha .cat-ficha-datos>*{grid-column:1;grid-row:auto} #catFicha .bib-cifras span{padding:var(--e-2) var(--e-3)} #catFicha .bib-cifras b{font-size:var(--t-xl)} #catFicha .fila-botones>*{flex:1 1 100%} #catResultados .bol{grid-template-columns:minmax(0,1fr)} #catResultados .bol>button{grid-column:1;grid-row:auto;justify-self:start;margin-top:var(--e-3)} /* Órdenes: la tabla se lee como una lista de fichas (número y fecha, cliente, vehículo, estado y total) */ #v-ordenes .cabecera h1{flex-basis:100%} #v-ordenes .filtros>input{max-width:none} #v-ordenes .filtros>.pestanas{display:flex;width:100%;margin:0} #v-ordenes .pestanas button{flex:1 1 auto;padding:6px 10px} #v-ordenes .pestanas{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent)} :is(#tOrdenes,#oHistorial .tabla){display:block;overflow:visible;border-top:1px solid var(--linea)} :is(#tOrdenes,#oHistorial .tabla) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} :is(#tOrdenes,#oHistorial .tabla) tbody{display:block} :is(#tOrdenes,#oHistorial .tabla) tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--e-3);padding:var(--e-3) var(--e-1);border-bottom:1px solid var(--linea)} :is(#tOrdenes,#oHistorial .tabla) td{display:block;width:auto!important;padding:0!important;border:0} :is(#tOrdenes,#oHistorial .tabla) td:nth-child(1){grid-column:1;grid-row:1} :is(#tOrdenes,#oHistorial .tabla) td:nth-child(2){grid-column:2;grid-row:1;text-align:right;font-size:var(--t-s)} :is(#tOrdenes,#oHistorial .tabla) td:nth-child(3),:is(#tOrdenes,#oHistorial .tabla) td:nth-child(4){grid-column:1/-1} :is(#tOrdenes,#oHistorial .tabla) td:nth-child(4) small.mono{overflow-wrap:anywhere} :is(#tOrdenes,#oHistorial .tabla) td:nth-child(5){grid-column:1;margin-top:var(--e-2)} :is(#tOrdenes,#oHistorial .tabla) td.n{grid-column:2;align-self:end;font-size:var(--t-l)} :is(#tOrdenes,#oHistorial .tabla) td:nth-child(3) small{display:inline;margin-left:var(--e-2)} #tOrdenes tr:has(td.vacio){display:block;border:0;padding:var(--e-4) 0} #tOrdenes td.vacio{padding:var(--e-6) var(--e-4)!important;border:1px dashed var(--linea-fuerte)} /* Editor de la orden: campos en pares donde caben; cada línea de trabajo es una ficha */ #dOrden .rejilla{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--e-3)} #dOrden .rejilla>label:nth-child(1),#dOrden .rejilla>label:nth-child(4){grid-column:1/-1} #dOrden .rejilla>label:nth-child(2),#dOrden .rejilla>label:nth-child(3){grid-column:span 3} #dOrden .rejilla>label:nth-child(5){grid-column:span 4} #dOrden .rejilla>label:nth-child(6){grid-column:span 2} #dOrden .tres-c li{grid-template-columns:minmax(0,1fr)} #dOrden .tres-c li::before{display:none} #dOrden .tres-c label::before{content:counter(c);display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:var(--e-2);border-radius:var(--r-1);background:var(--tinta);color:var(--amarillo);font:600 var(--t-xs)/1 var(--f-mono)} #dOrden .tres-c label{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;row-gap:6px} #dOrden .tres-c label textarea{grid-column:1/-1} #dOrden .chip-nuevo input{flex:1 1 160px} #dOrden .tabla-marco{overflow:visible} #dOrden .lineas{display:block;min-width:0} #dOrden .lineas thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} #dOrden .lineas tbody{display:flex;flex-direction:column;gap:var(--e-3)} #dOrden .lineas tr{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) var(--control);gap:var(--e-2);padding:var(--e-3);border:1px solid var(--linea);border-radius:var(--r-3);background:var(--superficie-2)} #dOrden .lineas td{display:block;width:auto!important;padding:0} #dOrden .lineas td:nth-child(1){grid-column:1;grid-row:1} #dOrden .lineas td:nth-child(5){grid-column:2;grid-row:1;align-self:center;padding:0;font-size:var(--t-l)} #dOrden .lineas td:nth-child(6){grid-column:3;grid-row:1} #dOrden .lineas td:nth-child(2){grid-column:1/-1;grid-row:2} #dOrden .lineas td:nth-child(3){grid-column:1;grid-row:3} #dOrden .lineas td:nth-child(4){grid-column:2/-1;grid-row:3} #dOrden .lineas td:nth-child(3)::before,#dOrden .lineas td:nth-child(4)::before{display:block;margin-bottom:4px;font-size:var(--t-s);font-weight:600;color:var(--texto-2)} #dOrden .lineas td:nth-child(3)::before{content:"Cant./Horas"} #dOrden .lineas td:nth-child(4)::before{content:"Precio"} #dOrden .lineas td.ayuda{grid-column:1/-1!important;padding:var(--e-4)!important} #dOrden .lineas tr:has(td.ayuda){display:block;padding:0;border:0;background:none} #oTotales{width:100%} /* Taller y respaldo */ #precargaEstado .bib-cifras{grid-template-columns:repeat(2,minmax(0,1fr))} #precargaEstado .bib-cifras span:nth-child(3){border-left:0} #precargaEstado .bib-cifras span:nth-child(n+3){border-top:1px solid var(--linea)} #v-ajustes .enlace-compartir>*{flex:1 1 100%} /* Visor: título y «Cerrar» arriba, zoom y «Abrir aparte» debajo */ .visor-cab{display:grid;grid-template-columns:auto auto auto minmax(0,1fr) auto;align-items:center;gap:var(--e-2) 0;padding:var(--e-2) var(--e-4)} .visor-acc{display:contents} .visor-cab>b{grid-column:1/5;grid-row:1;font-size:var(--t-m)} .visor-acc>[data-cerrar]{grid-column:5;grid-row:1;justify-self:end} #visorAbrir{justify-self:end} #zMenos{grid-column:1;grid-row:2} #zNivel{grid-column:2;grid-row:2;margin:0} #zMas{grid-column:3;grid-row:2;margin:0} #visorAbrir{grid-column:5;grid-row:2} .panel-lateral #toast{left:50%;bottom:calc(var(--control) + 2*var(--e-3) + var(--e-3))} } /* ---------- 7. Orden impresa: factura o presupuesto ---------- Solo se ve al imprimir (estilo.css oculta #impresion en pantalla y oculta todo lo demás al imprimir). */ @media print{ #impresion{font:400 9.5pt/1.45 var(--f-base);color:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact} #impresion b{font-weight:650} /* Cabecera: taller a la izquierda, tipo de documento, número y fecha a la derecha */ #impresion .cab{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10mm;margin:0 0 6mm;padding:0 0 4mm;border-bottom:2.5pt solid #000} #impresion .cab>div:first-child{color:#333;line-height:1.5} #impresion h1{margin:0 0 1.5mm;font:800 19pt/1.1 var(--f-titulo);font-stretch:118%;letter-spacing:-.01em;color:#000} #impresion .doc{min-width:52mm;padding:2.5mm 3.5mm;border:1pt solid #000;border-radius:1.5mm;text-align:right;color:#333;font-variant-numeric:tabular-nums} #impresion .doc b{display:block;margin-bottom:.5mm;font:750 14pt/1.15 var(--f-titulo);font-stretch:112%;color:#000} /* Cliente y vehículo */ #impresion .bloques{display:grid;grid-template-columns:1fr 1fr;gap:4mm;margin:0 0 5mm} #impresion .bloques>div{padding:3mm 3.5mm;border:.75pt solid #9a9a9a;border-radius:1.5mm;line-height:1.55} #impresion .bloques small{display:block;margin-bottom:1mm;font-size:8pt;font-weight:600;color:#555} #impresion .bloques b{font-size:10.5pt} #impresion .bloques .mono{font:500 9pt/1 var(--f-mono);font-stretch:90%;letter-spacing:.08em;padding:.6mm 1.2mm;border:.75pt solid #9a9a9a;border-radius:1mm;background:#f2f2f2} /* Queja, causa y corrección */ #impresion>p:not(.pie){display:grid;grid-template-columns:24mm minmax(0,1fr);gap:3mm;margin:0;padding:2mm 0;border-bottom:.75pt solid #d4d4d4;break-inside:avoid} #impresion .bloques+p:not(.pie){border-top:.75pt solid #d4d4d4} #impresion>p:not(.pie) b{font-weight:650} /* Líneas de trabajo */ #impresion table{width:100%;margin:5mm 0 3mm;border-collapse:collapse;font-variant-numeric:tabular-nums} #impresion thead{display:table-header-group} #impresion th{padding:2mm 2.5mm;font-size:8pt;font-weight:600;color:#333;text-align:left;background:#efefef;border-top:.75pt solid #000;border-bottom:.75pt solid #000;white-space:nowrap} #impresion td{padding:2mm 2.5mm;border-bottom:.75pt solid #d4d4d4;vertical-align:top} #impresion tr{break-inside:avoid} #impresion td:first-child{width:26mm;color:#333;white-space:nowrap} #impresion .n{text-align:right;white-space:nowrap} #impresion td.n:last-child{font-weight:600} /* Totales */ #impresion .tot{width:74mm;margin:0 0 0 auto;font-variant-numeric:tabular-nums;break-inside:avoid} #impresion .tot div{display:flex;justify-content:space-between;gap:6mm;padding:1mm 2.5mm;color:#333} #impresion .tot .gran{margin-top:1.5mm;padding:2.5mm;border-top:0;background:#000;color:#fff;font:750 13pt/1.2 var(--f-titulo);font-stretch:112%} /* Nota y firmas */ #impresion .pie{margin:8mm 0 0;padding-top:2.5mm;border-top:.75pt solid #d4d4d4;font-size:8.5pt;color:#444} #impresion .firmas{display:grid;grid-template-columns:1.6fr 1fr;gap:12mm;margin-top:16mm;break-inside:avoid} #impresion .firma{width:auto;margin:0;padding-top:1.5mm;border-top:.75pt solid #000;font-size:8.5pt;color:#444} #impresion>.firma{width:70mm;margin-top:16mm} } /* Foto de modelo ya cargada: fuera la silueta (las fotos de estudio no tienen fondo y se vería detrás del carro) */ #v-catalogo .cat-tarjeta img.cargada{background-image:none} /* ---------- 8. Pulido final (v11) ---------- */ /* Catálogo: un solo tratamiento de foto. Las de estudio (NHTSA) van enteras sobre blanco; las de calle llenan el marco. Mientras cargan, la silueta y un brillo que pasa (sin brillo con «menos movimiento») */ #v-catalogo .cat-tarjeta img{background-color:#fff} #v-catalogo .cat-tarjeta img.calle{object-fit:cover;padding:0;background-color:var(--hundido)} #v-catalogo .cat-tarjeta img:not(.cargada){ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B4B7B1' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17v-4.2l1.7-4.4A2 2 0 0 1 8.6 7h6.8a2 2 0 0 1 1.9 1.4L19 12.8V17'/%3E%3Cpath d='M5 12.8h14M3.5 17h17M6.5 17v2.5M17.5 17v2.5'/%3E%3Cpath d='M7.8 14.9h1.4M14.8 14.9h1.4'/%3E%3C/svg%3E"),linear-gradient(100deg,var(--hundido) 30%,var(--superficie-2) 50%,var(--hundido) 70%); background-size:44% auto,250% 100%;background-position:center,100% 0;background-repeat:no-repeat;animation:cat-brillo 1.3s linear infinite} #v-catalogo .cat-tarjeta img.cargada{animation:cat-aparece .24s var(--curva)} @keyframes cat-brillo{to{background-position:center,-150% 0}} @keyframes cat-aparece{from{opacity:.4}to{opacity:1}} @media (prefers-reduced-motion:reduce){#v-catalogo .cat-tarjeta img{animation:none!important}} #catEstado>.cat-progreso{margin:0;padding-top:var(--e-2);font-size:var(--t-s)} /* Órdenes: si no se pudieron leer, el aviso dice que los datos siguen ahí (nunca «no hay órdenes») */ .aviso-error>.ico{color:var(--rojo)} #tOrdenes td.vacio-error{border-color:var(--rojo-borde);background:var(--rojo-fondo)} #abiertas .aviso-error{border-color:var(--rojo-borde);background:var(--rojo-fondo)} /* Taller y respaldo: primero el estado en lenguaje llano; rutas y tamaños, plegados */ #respaldoInfo{max-width:72ch} #respaldoInfo .respaldo-estado{display:block;color:var(--texto)} #respaldoInfo .respaldo-estado.ok::before{content:"";display:inline-block;width:8px;height:8px;margin:0 8px 1px 0;border-radius:50%;background:var(--verde);vertical-align:middle} #respaldoInfo .respaldo-estado b{font:inherit;font-weight:650;background:none;padding:0} .detalles-tecnicos{margin-top:var(--e-3)} .detalles-tecnicos>summary{display:list-item;min-height:32px;line-height:32px;font-size:var(--t-s);color:var(--texto-2)} .detalles-tecnicos p{margin:var(--e-2) 0 0;font-size:var(--t-s)} .detalles-tecnicos code{font-family:var(--f-mono);font-stretch:87.5%;font-size:.9em;color:var(--texto);background:var(--hundido);padding:1px 4px;border-radius:var(--r-1);overflow-wrap:anywhere} .fila-precarga .fila-botones-fin{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-3);margin-left:auto} /* Factura: «borrador» si la orden no está guardada; línea de autorización en el presupuesto */ #impresion .doc.borrador b{text-transform:uppercase;letter-spacing:.04em} @media print{ #impresion .autoriza{margin:6mm 0 0;padding:2.5mm 3.5mm;border:.75pt solid #000;border-radius:1.5mm;font-size:9pt;line-height:1.5;break-inside:avoid} } /* Visor: el documento centrado sobre el lienzo, como una hoja; se mueve y se acerca con el dedo */ .visor-lienzo{display:flex;padding:var(--e-5);touch-action:none} .visor-lienzo>img{margin:auto;flex:none;border-radius:var(--r-2);box-shadow:var(--sombra-2);transform:none} .visor-lienzo.con-pdf{padding:0;touch-action:auto;position:relative} .visor-lienzo.con-pdf>iframe{position:relative;z-index:1} .visor-cargando{margin:auto;display:flex;align-items:center;gap:var(--e-3)} .visor-lienzo.con-pdf>.visor-cargando{position:absolute;inset:0;justify-content:center} .visor-cargando::before{content:"";width:16px;height:16px;flex:none;border:2px solid var(--linea-fuerte);border-top-color:var(--tinta);border-radius:50%;animation:visor-giro .8s linear infinite} @keyframes visor-giro{to{transform:rotate(360deg)}} /* PDF página a página (celular) */ .visor-lienzo:has(.visor-pagina){flex-direction:column;align-items:center;gap:var(--e-3);padding:var(--e-3);touch-action:pan-x pan-y} .visor-pagina{display:flex;min-height:200px} .visor-pagina canvas{display:block;max-width:none;background:#fff;border-radius:var(--r-1);box-shadow:var(--sombra-2)} .visor-paginas{position:sticky;bottom:0;display:flex;align-items:center;justify-content:center;gap:var(--e-3);width:100%;padding:var(--e-2);background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-2);box-shadow:var(--sombra-2)} .visor-paginas .btn-gris{flex:1 1 0;min-width:0;white-space:normal} .visor-aviso{position:absolute;left:50%;bottom:var(--e-5);z-index:2;max-width:calc(100% - 2*var(--e-4));margin:0;padding:var(--e-2) var(--e-4);border-radius:var(--r-2);background:var(--tinta);color:var(--sobre-tinta);font-size:var(--t-s);font-weight:600;box-shadow:var(--sombra-3);transform:translateX(-50%);pointer-events:none} .visor[open]{position:fixed} /* La línea de trabajo de la orden pasa a ficha también en tableta: la descripción, que es lo que más se escribe, a lo ancho */ @media (max-width:900px){ #dOrden .tabla-marco{overflow:visible} #dOrden .lineas{display:block;min-width:0} #dOrden .lineas thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} #dOrden .lineas tbody{display:flex;flex-direction:column;gap:var(--e-3)} #dOrden .lineas tr{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) var(--control);gap:var(--e-2);padding:var(--e-3);border:1px solid var(--linea);border-radius:var(--r-3);background:var(--superficie-2)} #dOrden .lineas td{display:block;width:auto!important;padding:0} #dOrden .lineas td:nth-child(1){grid-column:1;grid-row:1} #dOrden .lineas td:nth-child(5){grid-column:2;grid-row:1;align-self:center;padding:0;font-size:var(--t-l)} #dOrden .lineas td:nth-child(6){grid-column:3;grid-row:1} #dOrden .lineas td:nth-child(2){grid-column:1/-1;grid-row:2} #dOrden .lineas td:nth-child(3){grid-column:1;grid-row:3} #dOrden .lineas td:nth-child(4){grid-column:2/-1;grid-row:3} #dOrden .lineas td:nth-child(3)::before,#dOrden .lineas td:nth-child(4)::before{display:block;margin-bottom:4px;font-size:var(--t-s);font-weight:600;color:var(--texto-2)} #dOrden .lineas td:nth-child(3)::before{content:"Cant./Horas"} #dOrden .lineas td:nth-child(4)::before{content:"Precio"} #dOrden .lineas td.ayuda{grid-column:1/-1!important;padding:var(--e-4)!important} #dOrden .lineas tr:has(td.ayuda){display:block;padding:0;border:0;background:none} } @media (max-width:700px){ /* Órdenes vacías: el «Nueva orden» de la cabecera basta (no dos botones iguales uno encima del otro) */ #tOrdenes td.vacio .vacio-accion .btn-gris[data-nueva]{display:none} .fila-precarga .fila-botones-fin{margin-left:0;width:100%} .visor-lienzo{padding:var(--e-3)} }