/* Herrería El Yunque Azul — taller de ejemplo. Celular primero.
   Paleta: forja (negro), azul acero, amarillo de seguridad, papel de plano. */
:root {
  --forja: #13171b;
  --forja-2: #20272e;
  --acero: #1f4f7a;
  --acero-2: #163a5a;
  --acero-cl: #2f6799;
  --amarillo: #f4c20d;
  --amarillo-2: #ffd84a;
  --plano: #e8eef3;
  --plano-2: #d9e3eb;
  --linea: rgba(31, 79, 122, .13);
  --tinta: #14191e;
  --gris: #4e5a65;
  --papel: #fbfaf6;
  --rojo: #b9271f;
  --ambar: #a35f00;
  --verde: #23703c;
  --wa: #0f7a6e;
  --wa-2: #0b6359;
  --f-disp: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-txt: 'Barlow', 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --f-sten: 'Saira Stencil One', 'Barlow Condensed', sans-serif;
  --cab: 112px;
  --tabs: 62px;
  --franja: repeating-linear-gradient(-45deg, var(--amarillo) 0 10px, var(--forja) 10px 20px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cab) + 12px); }
body {
  margin: 0; font-family: var(--f-txt); font-size: 1rem; line-height: 1.5; color: var(--tinta);
  background-color: var(--plano);
  background-image:
    linear-gradient(var(--linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea) 1px, transparent 1px),
    linear-gradient(rgba(31, 79, 122, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 79, 122, .06) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  padding-bottom: calc(var(--tabs) + env(safe-area-inset-bottom));
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--acero); }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; box-shadow: 0 0 0 5px var(--forja); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 0; z-index: 99; background: var(--amarillo); color: var(--forja); padding: .6rem 1rem; font-weight: 700; }
.saltar:focus { left: 8px; top: 8px; }
[hidden] { display: none !important; }

/* ── cabecera ── */
.demo-banner { background: #2b2620; color: #f2ece1; text-align: center; font-size: .85rem; line-height: 1.4; padding: .4rem .9rem; letter-spacing: .01em; }
@media (min-width: 640px) { .demo-banner { font-size: .92rem; } }
.cab { position: sticky; top: 0; z-index: 50; color: #fff; background: var(--forja); }
.cab-barra {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .55rem max(16px, env(safe-area-inset-left)) .6rem;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #232a31, var(--forja));
  position: relative;
}
.cab-barra::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: var(--franja); }
.marca { display: flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; min-width: 0; }
.marca-yunque { width: 40px; height: 25px; color: var(--amarillo); flex: none; }
.marca-txt { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.marca-txt strong { font-family: var(--f-disp); font-weight: 800; font-size: 1.22rem; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca-txt small { font-size: .78rem; color: #c3ccd4; letter-spacing: .02em; }
.cab-acciones { display: flex; gap: .4rem; flex: none; }
.btn-icono, .btn-restaurar {
  display: inline-flex; align-items: center; gap: .35rem; height: 40px; min-width: 40px; justify-content: center;
  border: 1.5px solid #4a5560; border-radius: 8px; background: transparent; color: #fff; padding: 0 .55rem;
}
.btn-icono svg, .btn-restaurar svg { width: 20px; height: 20px; }
.btn-icono .ico-off { display: none; }
.btn-icono.mudo .ico-on { display: none; }
.btn-icono.mudo .ico-off { display: block; }
.btn-icono.mudo { color: #c3ccd4; }
.btn-restaurar span { font-size: .85rem; font-weight: 600; }
.btn-icono:hover, .btn-restaurar:hover { border-color: var(--amarillo); color: var(--amarillo); }
@media (max-width: 400px) { .btn-restaurar span { display: none; } .marca-txt strong { font-size: 1.08rem; } }

/* ── tipografía común ── */
.ojo { font-family: var(--f-mono); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--acero); margin: 0 0 .3rem; }
h1, .h-vista {
  font-family: var(--f-disp); font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
  line-height: 1.02; margin: 0 0 .5rem; color: var(--forja);
}
h1 { font-size: clamp(1.7rem, 6.4vw, 3rem); }
.h-vista { font-size: clamp(1.4rem, 5.6vw, 2.4rem); }
.h-sub { margin-top: 2.2rem; }
.h-chico { font-family: var(--f-disp); font-weight: 700; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .04em; margin: 0 0 .5rem; }
.lema { margin: 0; color: var(--gris); max-width: 46ch; }
.ayuda { color: var(--gris); font-size: .9rem; margin: .4rem 0; }
.vista { padding: 0 16px; max-width: 1240px; margin: 0 auto; }

/* ── botones ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .6rem 1.1rem;
  border-radius: 10px; border: 2px solid transparent; font-weight: 700; font-size: 1rem; text-decoration: none; line-height: 1.15; text-align: center;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-amarillo { background: var(--amarillo); color: var(--forja); border-color: var(--forja); box-shadow: 0 3px 0 var(--forja); }
.btn-amarillo:hover { background: var(--amarillo-2); }
.btn-amarillo:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--forja); }
.btn-amarillo:disabled { opacity: .55; cursor: default; }
.btn-borde { background: #fff; color: var(--forja); border-color: var(--forja); }
.btn-borde:hover { background: var(--plano); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-2); }
.ico-wa { width: 22px; height: 22px; }

/* ══════════ COTIZAR ══════════ */
.cot { display: flex; flex-direction: column; }
.cot-escena {
  position: sticky; top: var(--cab); z-index: 20; margin: 0 -16px; padding: 10px 16px 8px;
  background: rgba(232, 238, 243, .94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--forja);
  order: 2;
}
.cot-panel { display: contents; }
.cot-intro { order: 1; padding: 1.1rem 0 .9rem; }
.ctrl { order: 3; }
.parecidos { order: 4; }
.desglose { order: 5; }
.armar { order: 6; }
.precios { order: 7; }
.plano {
  height: clamp(170px, 31vh, 300px); border: 1.5px solid var(--acero); border-radius: 6px; position: relative; overflow: hidden;
  background-color: #f4f7fa;
  background-image:
    linear-gradient(rgba(31, 79, 122, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 79, 122, .16) 1px, transparent 1px),
    linear-gradient(rgba(31, 79, 122, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 79, 122, .07) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px;
}
.plano::before, .plano::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid var(--acero); z-index: 2; }
.plano::before { left: 6px; top: 6px; border-right: 0; border-bottom: 0; }
.plano::after { right: 6px; top: 6px; border-left: 0; border-bottom: 0; }
.plano svg { width: 100%; height: 100%; display: block; }
.plano.pintando .pieza-cuerpo { animation: pinta 900ms ease-out; }
@keyframes pinta { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* elementos del dibujo (unidades en metros) */
svg .suelo { fill: rgba(78, 90, 101, .18); }
svg .suelo-linea { stroke: #33414d; stroke-width: .035; }
svg .muro { fill: #e9e1d3; stroke: #b9ab94; stroke-width: .02; }
svg .castillo { fill: #d8cdb9; stroke: #a5967c; stroke-width: .02; }
svg .hueco { fill: #3b4148; }
svg .vidrio { fill: #b8cfdf; stroke: #7d97ab; stroke-width: .03; }
svg .vidrio-marco { stroke: #7d97ab; stroke-width: .03; }
svg .esc-coche { fill: #8293a2; }
svg .esc-persona { fill: #2a5d8a; opacity: .82; }
svg .esc-txt, svg .cota text, svg .esc-nota { font-family: var(--f-mono); font-weight: 700; fill: #1d4466; }
svg .esc-txt { font-size: .17px; }
svg .esc-nota { font-size: .17px; fill: var(--rojo); }
svg .cota line { stroke: #1d4466; stroke-width: .018; }
svg .cota text { font-size: .2px; paint-order: stroke; stroke: #f4f7fa; stroke-width: .06px; }
svg .lam { opacity: .97; }
svg .tablero { stroke: rgba(0, 0, 0, .28); stroke-width: .018; }
svg .chapa { fill: #c9a64a; }
svg .motor rect { fill: #2b3036; } svg .motor circle { fill: var(--amarillo); }
svg .pieza-cuerpo.es-claro { filter: drop-shadow(0 0 .012px #4a535b) drop-shadow(0 0 .012px #4a535b); }

/* contador tipo bomba de gasolina */
.bomba {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: 8px;
  background: var(--forja); color: #fff; border-radius: 8px; padding: .45rem .6rem .45rem .7rem;
  box-shadow: inset 0 0 0 2px #2d353d;
}
.bomba-total { display: flex; align-items: center; gap: .5rem; }
.bomba-et { font-family: var(--f-disp); font-weight: 700; text-transform: uppercase; font-size: .9rem; color: #c3ccd4; letter-spacing: .06em; }
.odo { display: inline-flex; align-items: center; font-family: var(--f-mono); font-weight: 700; font-size: clamp(1.45rem, 6.6vw, 2.1rem); line-height: 1; }
.odo-d { display: inline-block; width: .7em; height: 1.12em; overflow: hidden; margin: 0 1px; border-radius: 3px; color: var(--amarillo);
  background: linear-gradient(180deg, #000 0, #1b1f24 45%, #000 100%); box-shadow: inset 0 0 0 1px #333b43; }
.odo-tira { display: flex; flex-direction: column; transition: transform .5s cubic-bezier(.2, .9, .25, 1); }
.odo-tira span { display: block; height: 1.12em; line-height: 1.12em; text-align: center; }
.odo-s { color: var(--amarillo); padding: 0 1px; }
.bomba-mini { display: flex; flex-direction: column; align-items: flex-end; font-size: .78rem; color: #c3ccd4; line-height: 1.25; text-align: right; }
.bomba-mini b { color: #fff; font-family: var(--f-mono); font-weight: 700; }

/* controles */
.ctrl { display: grid; gap: .9rem; padding: 1rem 0 .4rem; }
.campo { border: 0; margin: 0; padding: 0; min-width: 0; }
.campo legend, .campo-rango label { font-family: var(--f-disp); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 1rem; padding: 0; margin-bottom: .35rem; }
.leg-valor { font-family: var(--f-txt); text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--gris); margin-left: .3rem; }
.segmentos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.seg {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .45rem .2rem; min-height: 60px;
  border: 1.5px solid #9aabb9; border-radius: 9px; background: #fff; font-weight: 600; font-size: .82rem; line-height: 1.1; text-align: center;
}
.seg svg { width: 24px; height: 24px; }
.seg span { padding-bottom: 3px; }
.seg[aria-pressed="true"] { background: var(--acero); border-color: var(--acero-2); color: #fff; box-shadow: inset 0 -3px 0 var(--amarillo); }
.campo-rango { display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
.campo-rango label { margin: 0; }
.campo-rango output { font-family: var(--f-mono); font-weight: 700; font-size: 1.1rem; background: var(--forja); color: var(--amarillo); padding: .1rem .5rem; border-radius: 6px; }
.campo-rango input { grid-column: 1 / -1; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0; --p: 50%; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 12px; border-radius: 6px; border: 1.5px solid var(--forja);
  background: linear-gradient(90deg, var(--acero) 0 var(--p), #fff var(--p));
  background-image: linear-gradient(90deg, var(--acero) 0 var(--p), #fff var(--p));
}
input[type="range"]::-moz-range-track { height: 12px; border-radius: 6px; border: 1.5px solid var(--forja); background: #fff; }
input[type="range"]::-moz-range-progress { height: 12px; border-radius: 6px; background: var(--acero); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 30px; height: 30px; margin-top: -10px; border-radius: 6px; background: var(--amarillo);
  border: 2px solid var(--forja); box-shadow: 0 2px 0 var(--forja);
}
input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 6px; background: var(--amarillo); border: 2px solid var(--forja); }
.colores { display: flex; flex-wrap: wrap; gap: 8px; }
.color { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #8c99a5; background: var(--c); padding: 0; position: relative; }
.color[aria-pressed="true"] { border-color: var(--forja); box-shadow: 0 0 0 3px var(--amarillo), 0 0 0 5px var(--forja); }
.interruptores { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.inter { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; min-height: 44px; cursor: pointer; }
.inter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.inter-cara { width: 50px; height: 28px; border-radius: 14px; background: #a6b2bc; border: 2px solid var(--forja); position: relative; transition: background .2s; flex: none; }
.inter-cara::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--forja); transition: transform .2s; }
.inter input:checked + .inter-cara { background: var(--acero); }
.inter input:checked + .inter-cara::after { transform: translateX(22px); background: var(--amarillo); }
.inter input:focus-visible + .inter-cara { outline: 3px solid var(--amarillo); outline-offset: 2px; }

/* trabajos parecidos */
.parecidos { padding: .8rem 0 .2rem; }
.tira { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.tira-f { margin: 0; scroll-snap-align: start; background: #fff; border: 1.5px solid var(--forja); border-radius: 8px; overflow: hidden; animation: entra .45s ease both; animation-delay: calc(var(--i) * 70ms); }
.tira-f img { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; }
.tira-f figcaption { font-size: .8rem; padding: .35rem .5rem .45rem; line-height: 1.25; }
.tira-f small { color: var(--gris); }
.tira-f:not(.igual) img { filter: saturate(.55); }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* desglose */
.desglose { overflow-x: auto; }
.desglose, .precios { margin: .8rem 0; background: #fff; border: 1.5px solid var(--forja); border-radius: 10px; }
.desglose summary, .precios summary {
  cursor: pointer; padding: .8rem 1rem; font-family: var(--f-disp); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem;
  display: flex; align-items: baseline; justify-content: flex-start; gap: .2rem .5rem; flex-wrap: wrap; list-style: none;
}
.desglose summary::-webkit-details-marker, .precios summary::-webkit-details-marker { display: none; }
.desglose summary::before, .precios summary::before { content: '▸'; color: var(--acero); margin-right: .35rem; transition: transform .2s; display: inline-block; }
details[open] > summary::before { transform: rotate(90deg); }
.precios summary small { font-family: var(--f-txt); text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--gris); font-size: .82rem; }
.sum-total { font-family: var(--f-mono); margin-left: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla td, .tabla th { padding: .38rem .9rem; text-align: left; vertical-align: top; }
.tabla td:last-child { text-align: right; font-family: var(--f-mono); font-weight: 500; white-space: nowrap; }
.tabla .t-cant { color: var(--gris); font-family: var(--f-mono); font-size: .76rem; white-space: nowrap; text-align: right; }
.tabla .t-grupo th, .tabla .t-grupo td { background: var(--plano-2); font-family: var(--f-disp); text-transform: uppercase; letter-spacing: .05em; font-size: .92rem; border-top: 1px solid #b6c4d0; }
.tabla .t-total th, .tabla .t-total td { background: var(--forja); color: var(--amarillo); font-size: 1.05rem; font-family: var(--f-mono); font-weight: 700; }
.tabla .t-total th { font-family: var(--f-disp); text-transform: uppercase; }
.tabla .t-nota td { text-align: left; font-family: var(--f-txt); color: var(--gris); white-space: normal; padding: .6rem .9rem .8rem; }
@media (max-width: 480px) { .tabla td:first-child { font-size: .84rem; } .tabla .t-cant { white-space: normal; min-width: 4.5rem; } }

.armar { display: grid; gap: .45rem; padding: .4rem 0 .4rem; }
.armar label { font-weight: 600; }
.opcional { color: var(--gris); font-weight: 400; }
.armar input, .od-nota input, .seg-form input, .lp-i input, .od-bloque input[type="date"] {
  min-height: 48px; border: 1.5px solid var(--forja); border-radius: 9px; padding: .5rem .75rem; background: #fff; width: 100%;
}
.armar .btn { font-size: 1.08rem; min-height: 54px; }
.lp { display: grid; padding: 0 1rem 1rem; gap: 6px; }
.lp-f { display: grid; grid-template-columns: 1fr 8.2rem; align-items: center; gap: .6rem; padding: .3rem 0; border-bottom: 1px dashed #c3ced8; }
.lp-n { font-size: .9rem; font-weight: 600; line-height: 1.2; }
.lp-n small { display: block; font-weight: 400; color: var(--gris); font-size: .78rem; }
.lp-i { display: flex; align-items: center; gap: .25rem; font-family: var(--f-mono); }
.lp-i input { min-height: 42px; font-family: var(--f-mono); text-align: right; }
.precios .ayuda { padding: 0 1rem; }

/* ══════════ TALLER ══════════ */
.taller-cab { padding: 1.1rem 0 .8rem; }
.semaforo-resumen {
  font-family: var(--f-disp); font-weight: 700; font-size: clamp(1.15rem, 4.6vw, 1.5rem); line-height: 1.2; margin: .3rem 0 .6rem;
  background: var(--forja); color: #fff; padding: .6rem .8rem; border-radius: 8px; border-left: 6px solid var(--amarillo);
}
.semaforo-resumen b.r { color: #ff8f86; }
.semaforo-resumen b.a { color: var(--amarillo); }
.leyenda { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .85rem; color: var(--gris); }
.leyenda li { display: flex; align-items: center; gap: .35rem; }
.sem { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sem-tarde { background: var(--rojo); } .sem-semana { background: #e0a100; } .sem-ok { background: var(--verde); }

.taller {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; border-radius: 6px;
  background-color: #c9d0d6;
  background-image: radial-gradient(rgba(0, 0, 0, .07) 1px, transparent 1.5px), radial-gradient(rgba(255, 255, 255, .25) 1px, transparent 1.5px);
  background-size: 9px 9px, 13px 13px; background-position: 0 0, 4px 6px;
  border: 7px solid var(--forja); box-shadow: inset 0 0 0 2px #59636c;
  position: relative;
}
.taller::before { content: 'Entrada'; position: absolute; top: -7px; left: 22px; width: 92px; height: 7px; background: var(--franja); font-size: 0; }
.est {
  position: relative; min-height: 150px; border-radius: 5px; padding: 6px; display: flex; flex-direction: column; gap: 6px;
  background: rgba(244, 247, 250, .55); border: 2px dashed rgba(19, 23, 27, .38); transition: background .15s, border-color .15s, transform .15s;
}
.est.sobre { background: rgba(244, 194, 13, .3); border: 2px solid var(--forja); transform: scale(1.015); }
.est-cab { display: flex; align-items: center; gap: .35rem; position: relative; z-index: 1; }
.est-cab h3 { margin: 0; font-family: var(--f-disp); font-weight: 800; text-transform: uppercase; font-size: .92rem; letter-spacing: .03em; line-height: 1.05; flex: 1; }
.est-n { width: 22px; height: 22px; border-radius: 50%; background: var(--forja); color: var(--amarillo); font-family: var(--f-mono); font-weight: 700; font-size: .75rem; display: grid; place-items: center; flex: none; }
.est-cuenta { font-family: var(--f-mono); font-weight: 700; font-size: .8rem; background: #fff; border: 1.5px solid var(--forja); border-radius: 5px; padding: 0 .35rem; }
.est-fondo { position: absolute; inset: 30px 6px 6px; display: grid; place-items: center; pointer-events: none; color: #6f7c88; opacity: .42; }
.est-ilus { width: 88%; max-width: 160px; }
.est-soldadura { background: rgba(255, 233, 196, .55); }
.est-soldadura .est-fondo { color: #a65a00; opacity: .38; }
.est-pintura { background: rgba(214, 228, 240, .7); }
.est-entregado { background: rgba(220, 240, 226, .6); }
.camioneta { width: 88%; max-width: 170px; }
.cam-batea { fill: #e9edf0; stroke: #5d6873; stroke-width: 2; }
.cam-cabina { fill: #fff; stroke: #5d6873; stroke-width: 2; }
.cam-vidrio { fill: #9fb8cb; }
.cam-llanta { fill: #2b3036; }
.cam-cuerda { stroke: #b07a2c; stroke-width: 1.6; stroke-dasharray: 4 3; fill: none; }
.est-instalacion .est-fondo { opacity: .7; }
.camioneta.arranca { animation: arranca 2.5s cubic-bezier(.5, 0, .4, 1); }
@keyframes arranca {
  0% { transform: none; } 8% { transform: translateX(-4px) rotate(-1deg); } 14% { transform: translateX(3px); }
  45% { transform: translateX(160%); opacity: 1; } 46% { opacity: 0; transform: translateX(-160%); } 60% { opacity: 1; }
  100% { transform: none; }
}
.est-piezas { display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; flex: 1; }
.est-vacia { margin: auto; font-size: .8rem; color: #5b6772; font-style: italic; }

.pz {
  display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 6px; width: 100%; padding: 4px 5px 4px 5px; text-align: left;
  background: #fff; border: 1.5px solid var(--forja); border-left-width: 6px; border-radius: 6px; box-shadow: 0 2px 0 rgba(19, 23, 27, .3);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; min-height: 50px;
}
.pz.sem-tarde { border-left-color: var(--rojo); animation: late 1.6s ease-in-out infinite; }
.pz.sem-semana { border-left-color: #e0a100; }
.pz.sem-ok { border-left-color: var(--verde); }
.pz.sem-entregado { border-left-color: #8e9aa5; opacity: .9; }
@keyframes late { 0%, 100% { box-shadow: 0 2px 0 rgba(19, 23, 27, .3), 0 0 0 0 rgba(185, 39, 31, .55); } 50% { box-shadow: 0 2px 0 rgba(19, 23, 27, .3), 0 0 0 5px rgba(185, 39, 31, 0); } }
.pz-dibujo { width: 34px; height: 40px; display: grid; place-items: center; background: #eef2f5; border-radius: 4px; }
.pz-dibujo .mini { width: 31px; height: 34px; }
.pz-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.12; }
.pz-l1 { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.pz-folio { font-family: var(--f-sten); font-weight: 400; font-size: .9rem; letter-spacing: .01em; white-space: nowrap; }
.pz-cli { font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-fecha { font-size: .74rem; color: var(--gris); display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.sem-tarde .pz-fecha { color: var(--rojo); font-weight: 700; }
.reloj { width: 13px; height: 13px; flex: none; }
.pz-resp { width: 22px; height: 22px; flex: none; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--forja); }
.pz.levantada { opacity: .3; }
.fantasma { position: fixed !important; z-index: 120; pointer-events: none; transform: rotate(-3deg) scale(1.06); box-shadow: 0 14px 28px rgba(0, 0, 0, .35) !important; animation: none !important; margin: 0; }
body.arrastrando, body.arrastrando * { cursor: grabbing !important; }
.pz.aterriza { animation: aterriza .55s cubic-bezier(.3, 1.5, .6, 1); }
@keyframes aterriza { from { transform: translateY(-14px) scale(1.06); } to { transform: none; } }
.pz.cae { animation: cae 1.1s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes cae { 0% { transform: translateY(-120px) rotate(-8deg); opacity: 0; } 55% { transform: translateY(0) rotate(0); opacity: 1; } 70% { transform: translateY(-8px); } 100% { transform: none; } }
.pz.al-rojo .pz-dibujo { background: #ffd9a8; box-shadow: 0 0 0 2px #ff9d2e, 0 0 16px 4px rgba(255, 140, 20, .65); transition: box-shadow 2s, background 2s; }
.pz.se-pinta .mini.pintado { animation: pinta 1.1s ease-out; }
.pz.sellada { position: relative; }
.pz.sellada::after {
  content: '✓ Entregado'; position: absolute; inset: 4px 4px 4px 42px; display: grid; place-items: center; font-family: var(--f-sten); font-size: .95rem;
  color: var(--verde); border: 3px double var(--verde); border-radius: 6px; background: rgba(255, 255, 255, .9); animation: sello .5s cubic-bezier(.2, 1.4, .5, 1);
}
.mini.crudo .pieza-cuerpo { opacity: .95; }
.taller-ayuda { margin: .6rem 0 0; }
.chispas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 130; }

/* ══════════ HOJAS (diálogos) ══════════ */
dialog.hoja { padding: 0; border: 0; width: 100%; max-width: 680px; max-height: 94vh; margin: auto auto 0; border-radius: 16px 16px 0 0; background: var(--papel); color: var(--tinta); box-shadow: 0 -10px 40px rgba(0, 0, 0, .35); }
dialog.hoja::backdrop { background: rgba(10, 14, 18, .62); }
dialog.hoja[open] { animation: sube .28s ease-out; }
@keyframes sube { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.hoja-in { max-height: 94vh; overflow-y: auto; padding: 1rem 16px calc(1.2rem + env(safe-area-inset-bottom)); position: relative; overscroll-behavior: contain; }
.hoja-cerrar { position: sticky; top: 0; display: block; margin: -.3rem -.3rem -44px auto; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--forja); background: #fff; font-size: 1.6rem; line-height: 1; z-index: 5; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.papel { margin-top: 2.6rem; }
@media (min-width: 720px) { dialog.hoja { margin: auto; border-radius: 14px; max-height: 90vh; } .hoja-in { max-height: 90vh; padding: 1.4rem 1.6rem; } }

/* papel de la cotización */
.papel { position: relative; background: #fff; border: 1px solid #d5d0c4; padding: 1rem; box-shadow: 0 2px 0 #e2ddd0, 0 4px 0 #d5d0c4; overflow: hidden; }
.papel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--franja); }
.papel-cab { display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start; padding-top: .5rem; border-bottom: 2px solid var(--forja); padding-bottom: .6rem; }
.papel-marca { display: flex; gap: .5rem; align-items: center; }
.papel-marca .marca-yunque { color: var(--acero); width: 44px; }
.papel-marca strong { display: block; font-family: var(--f-disp); font-weight: 800; text-transform: uppercase; font-size: 1.1rem; line-height: 1; }
.papel-marca small { color: var(--gris); font-size: .76rem; line-height: 1.2; display: block; }
.papel-marca { min-width: 0; }
.papel-folio { text-align: right; }
.papel-folio small { display: block; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.papel-folio span { white-space: nowrap; font-family: var(--f-sten); font-size: 1.55rem; line-height: 1; color: var(--acero); }
.papel-datos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .7rem 0; }
.papel-datos dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); font-family: var(--f-mono); }
.papel-datos dd { margin: 0; font-weight: 600; }
.papel-trabajo { font-weight: 700; margin: .2rem 0 .5rem; }
.papel-dibujo { height: 150px; background: #f4f7fa; border: 1px solid #c8d4de; border-radius: 4px; margin-bottom: .6rem; }
.papel-dibujo svg { width: 100%; height: 100%; }
.papel-tabla { width: 100%; border-collapse: collapse; font-size: .86rem; }
.papel-tabla td { padding: .25rem 0; border-bottom: 1px dotted #c7c2b5; }
.papel-tabla td:last-child, .papel-tabla tfoot td { text-align: right; font-family: var(--f-mono); white-space: nowrap; padding-left: .6rem; }
.papel-tabla tfoot th { text-align: left; font-family: var(--f-disp); text-transform: uppercase; font-size: 1.2rem; padding-top: .5rem; }
.papel-tabla tfoot td { font-size: 1.3rem; font-weight: 700; padding-top: .5rem; }
.papel-cond { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: .7rem 0 .4rem; }
.papel-cond div { background: var(--plano); border-radius: 6px; padding: .4rem .5rem; }
.papel-cond small { display: block; font-size: .7rem; color: var(--gris); text-transform: uppercase; letter-spacing: .06em; }
.papel-cond b { font-family: var(--f-mono); font-size: .92rem; }
.papel-pie { font-size: .75rem; color: var(--gris); margin: .4rem 0 0; }
.sello {
  position: absolute; right: 8%; top: 42%; padding: .3rem .9rem .2rem; border: 5px double var(--rojo); color: var(--rojo); border-radius: 8px;
  font-family: var(--f-sten); font-size: 2.3rem; line-height: 1; text-transform: uppercase; text-align: center; background: rgba(255, 255, 255, .55);
  transform: rotate(-14deg) scale(3); opacity: 0; pointer-events: none; mix-blend-mode: multiply;
}
.sello small { display: block; font-family: var(--f-mono); font-size: .8rem; }
.sello.puesto { opacity: .92; transform: rotate(-14deg); animation: sello .45s cubic-bezier(.2, 1.5, .5, 1); }
@keyframes sello { 0% { opacity: 0; transform: rotate(-14deg) scale(3); } 70% { opacity: .95; transform: rotate(-14deg) scale(.94); } 100% { opacity: .92; transform: rotate(-14deg) scale(1); } }
.papel-acciones { display: grid; gap: 8px; margin-top: 1rem; }
@media (min-width: 560px) { .papel-acciones { grid-template-columns: 1fr 1fr; } .papel-acciones #papel-aceptar { grid-column: 1 / -1; } }

/* detalle de orden */
.od-cab { display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start; margin-right: 44px; }
.od-folio { font-family: var(--f-sten); font-size: 1.5rem; line-height: 1; color: var(--acero); }
.od-cli { font-family: var(--f-disp); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; line-height: 1.05; margin: .15rem 0; }
.od-trab { margin: 0; font-size: .9rem; color: var(--gris); }
.chip-sem { font-size: .8rem; font-weight: 700; padding: .25rem .55rem; border-radius: 999px; white-space: nowrap; color: #fff; }
.chip-sem.sem-tarde { background: var(--rojo); } .chip-sem.sem-semana { background: #8a5a00; } .chip-sem.sem-ok { background: var(--verde); } .chip-sem.sem-entregado { background: #56626d; }
.od-dibujo { height: 150px; margin: .8rem 0; background: #f4f7fa; border: 1px solid #c8d4de; border-radius: 6px; }
.od-dibujo svg { width: 100%; height: 100%; }
.od-bloque { margin: 1rem 0; }
.od-bloque h4 { font-family: var(--f-disp); text-transform: uppercase; letter-spacing: .05em; font-size: 1rem; margin: 0 0 .4rem; }
.od-etapas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.od-et { min-height: 42px; border: 1.5px solid #9aabb9; background: #fff; border-radius: 7px; font-size: .85rem; font-weight: 600; padding: .3rem; }
.od-et.hecha { background: var(--plano-2); border-color: #7f93a4; }
.od-et.hecha::before { content: '✓ '; color: var(--verde); }
.od-et.actual { background: var(--amarillo); border-color: var(--forja); font-weight: 800; }
.od-dos { display: grid; gap: 0 1rem; }
@media (min-width: 560px) { .od-dos { grid-template-columns: 1fr 1.4fr; } }
.od-resp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.resp { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .78rem; font-weight: 600; padding: 4px 2px; border-radius: 8px; border: 1.5px solid transparent; cursor: pointer; text-align: center; }
.resp input { position: absolute; opacity: 0; }
.resp img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #9aabb9; }
.resp.sel { border-color: var(--forja); background: #fff; }
.resp.sel img { border-color: var(--amarillo); box-shadow: 0 0 0 2px var(--forja); }
.resp:focus-within { outline: 3px solid var(--amarillo); }
.od-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.od-cifras div { background: #fff; border: 1.5px solid #c3ced8; border-radius: 8px; padding: .4rem .5rem; }
.od-cifras small { display: block; font-size: .72rem; color: var(--gris); text-transform: uppercase; letter-spacing: .06em; }
.od-cifras b { font-family: var(--f-mono); font-size: 1rem; }
.od-cifras .debe { border-color: var(--rojo); } .od-cifras .debe b { color: var(--rojo); }
.od-cifras .liquidado b { color: var(--verde); }
.od-pagos { list-style: none; padding: 0; margin: .5rem 0; font-size: .86rem; }
.od-pagos li { display: flex; justify-content: space-between; border-bottom: 1px dotted #c7c2b5; padding: .2rem 0; }
.od-pagos b { font-family: var(--f-mono); font-weight: 500; }
.od-pago { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.od-pago #od-liquidar { grid-column: 1 / -1; }
.od-fotos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: .6rem; }
.od-fotos figure { margin: 0; position: relative; border-radius: 6px; overflow: hidden; border: 1.5px solid var(--forja); }
.od-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; height: auto; }
.od-fotos figcaption { position: absolute; left: 0; bottom: 0; background: var(--forja); color: var(--amarillo); font-size: .74rem; font-weight: 700; padding: .1rem .45rem; border-top-right-radius: 6px; }
.btn-foto { width: 100%; cursor: pointer; }
.od-notas { list-style: none; padding: 0; margin: 0 0 .5rem; font-size: .9rem; }
.od-notas li { background: #fff8d8; border-left: 4px solid var(--amarillo); padding: .35rem .55rem; margin-bottom: 4px; }
.od-notas small { color: var(--gris); font-family: var(--f-mono); font-size: .72rem; margin-right: .4rem; }
.od-nota { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.od-acciones { display: grid; gap: 8px; margin-top: 1.2rem; }
@media (min-width: 560px) { .od-acciones { grid-template-columns: 1fr 1fr; } }

/* ══════════ TRABAJOS ══════════ */
.trab-cab { padding: 1.1rem 0 .8rem; }
.filtros { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.filtros button { flex: none; min-height: 40px; padding: 0 .9rem; border-radius: 999px; border: 1.5px solid var(--forja); background: #fff; font-weight: 600; }
.filtros button[aria-pressed="true"] { background: var(--forja); color: var(--amarillo); }
.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.galeria figure { margin: 0; background: #fff; border: 1.5px solid var(--forja); border-radius: 8px; overflow: hidden; }
.galeria img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.galeria figcaption { font-size: .82rem; padding: .35rem .55rem .5rem; line-height: 1.25; }
.equipo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.persona { margin: 0; background: #fff; border: 1.5px solid var(--forja); border-radius: 8px; overflow: hidden; }
.persona img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.persona figcaption { padding: .45rem .6rem .6rem; display: flex; flex-direction: column; line-height: 1.2; }
.persona b { font-family: var(--f-disp); text-transform: uppercase; font-size: 1.15rem; }
.persona span { font-size: .84rem; }
.persona small { color: var(--gris); font-size: .78rem; margin-top: .2rem; }

/* ══════════ CTA y pie ══════════ */
.cta { margin: 2.5rem 0 0; background: var(--acero-2); color: #fff; position: relative; }
.cta::before { content: ''; display: block; height: 10px; background: var(--franja); }
.cta-in { max-width: 820px; margin: 0 auto; padding: 2rem 16px 2.2rem; }
.cta-ojo { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--amarillo); margin: 0 0 .4rem; }
.cta h2 { font-family: var(--f-disp); font-weight: 800; text-transform: uppercase; font-size: clamp(1.7rem, 6.5vw, 2.7rem); line-height: 1.06; margin: 0 0 .6rem; }
.cta p { margin: 0 0 1.1rem; color: #dbe5ee; max-width: 56ch; }
.cta-botones { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; }
.cta-botones .btn-wa { font-size: 1.08rem; min-height: 54px; padding: .7rem 1.3rem; }
.cta-tel { color: #fff; display: inline-flex; align-items: center; min-height: 44px; }
.pie { background: var(--forja); color: #c3ccd4; padding: 1.4rem 16px 1.8rem; font-size: .86rem; text-align: center; }
.pie p { margin: .3rem auto; max-width: 70ch; }
.pie a { color: var(--amarillo); display: inline-block; padding: .55rem .15rem; }
.pie .credito { margin-top: .8rem; color: #e1e6ea; }

/* botón fijo de contacto (discreto) */
.cta-fijo {
  position: fixed; right: 12px; bottom: calc(var(--tabs) + 12px + env(safe-area-inset-bottom)); z-index: 40;
  display: inline-flex; align-items: center; gap: .5rem; background: var(--wa); color: #fff; text-decoration: none;
  border-radius: 999px; padding: 0; width: 50px; height: 50px; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); border: 2px solid #fff;
}
.cta-fijo .ico-wa { width: 26px; height: 26px; }
.cta-fijo-txt { display: none; }
.cta-fijo:hover { background: var(--wa-2); }
body.con-hoja .cta-fijo { display: none; }
@media (min-width: 900px) {
  .cta-fijo, .pag-app .cta-fijo { display: inline-flex; width: auto; height: auto; padding: .55rem 1rem .55rem .8rem; font-size: .9rem; bottom: 20px; }
  .pestanas .pest-wa { display: none; }
  .pestanas { grid-template-columns: repeat(4, 1fr); }
  .cta-fijo-txt { display: inline; }
}

/* pestañas */
.pestanas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--forja); border-top: 2px solid #2d353d; padding-bottom: env(safe-area-inset-bottom);
}
.pestanas a { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: var(--tabs); color: #c3ccd4; text-decoration: none; font-size: .8rem; font-weight: 600; position: relative; }
.pestanas svg { width: 24px; height: 24px; }
.pestanas .pest-wa { color: #fff; background: var(--wa); }
.pestanas .pest-wa .ico-wa { width: 24px; height: 24px; }
.pag-app .cta-fijo { display: none; }
.pag-seg, .pag-legal { --tabs: 0px; }
.pestanas a[aria-current="page"] { color: var(--amarillo); box-shadow: inset 0 3px 0 var(--amarillo); }
.badge-tarde { position: absolute; top: 6px; left: calc(50% + 6px); background: var(--rojo); color: #fff; font-size: .7rem; font-weight: 800; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; }
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .pestanas { left: 50%; right: auto; bottom: auto; top: calc(var(--cab) - 56px); transform: translateX(-50%); width: 440px; border: 0; background: transparent; z-index: 55; padding: 0; }
  .pestanas a { flex-direction: row; height: 44px; gap: .4rem; font-size: .92rem; border-radius: 8px; }
  .pestanas a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
  .pestanas a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--amarillo); background: rgba(244, 194, 13, .08); }
  .pestanas svg { width: 20px; height: 20px; }
  .badge-tarde { top: 2px; left: auto; right: 4px; }
  .pie { padding-bottom: 6rem; }
}

/* guía */
.guia {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabs) + 12px + env(safe-area-inset-bottom)); z-index: 60; max-width: 420px;
  background: var(--forja); color: #fff; border: 2px solid var(--amarillo); border-radius: 12px; padding: .7rem .85rem .6rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  animation: entra .35s ease both;
}
.guia-paso { margin: 0; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amarillo); }
.guia-txt { margin: .15rem 0 .4rem; font-size: 1rem; line-height: 1.35; }
.guia-txt b { color: var(--amarillo); }
.guia-pie { display: flex; justify-content: space-between; align-items: center; }
.guia-pie button { background: none; border: 0; color: #c3ccd4; text-decoration: underline; padding: .4rem .2rem; font-size: .85rem; min-height: 44px; }
.guia-dots { display: flex; gap: 5px; }
.guia-dots i { width: 8px; height: 8px; border-radius: 50%; background: #4a5560; }
.guia-dots i.on { background: var(--amarillo); }
.guia-foco { outline: 3px solid var(--amarillo); outline-offset: 4px; border-radius: 6px; animation: foco 1.4s ease-in-out infinite; }
@keyframes foco { 50% { outline-color: rgba(244, 194, 13, .25); } }
@media (min-width: 900px) { .guia { left: auto; right: 24px; bottom: 90px; } }

/* avisos */
.avisos { position: fixed; top: calc(var(--cab) + 10px); left: 16px; right: 16px; z-index: 140; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.aviso { width: fit-content; max-width: 100%; background: var(--forja); color: #fff; border-left: 5px solid var(--amarillo); padding: .55rem .8rem; border-radius: 8px; font-weight: 600; font-size: .92rem; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); animation: aviso .3s ease-out; transition: opacity .35s, transform .35s; }
.aviso-ok { border-left-color: #3fbf6a; }
.aviso-mal { border-left-color: #ff6a5f; }
.aviso.fuera { opacity: 0; transform: translateY(-8px); }
@keyframes aviso { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ══════════ SEGUIMIENTO ══════════ */
.seg { max-width: 760px; margin: 0 auto; padding: 1.2rem 16px 0; }
.seg-cab { margin-bottom: 1rem; }
.seg-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 1rem 0 .5rem; }
.seg-form input { font-family: var(--f-sten); font-size: 1.6rem; letter-spacing: .06em; text-transform: uppercase; min-height: 58px; }
.seg-form .btn { min-height: 58px; font-size: 1.1rem; }
.seg-ejemplo { margin: 0; font-size: .95rem; }
.folio-chip { font-family: var(--f-sten); font-size: 1.05rem; background: var(--amarillo); border: 2px solid var(--forja); border-radius: 6px; padding: .1rem .55rem; box-shadow: 0 2px 0 var(--forja); margin-left: .2rem; min-height: 44px; }
.seg-error { background: #fff; border-left: 5px solid var(--rojo); padding: .8rem 1rem; border-radius: 8px; }
.seg-card { text-align: left; background: var(--papel); border: 2px solid var(--forja); border-radius: 12px; padding: 1rem; position: relative; overflow: hidden; animation: entra .4s ease; }
.seg-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--franja); }
.seg-card-cab { display: grid; gap: .6rem; padding-top: .4rem; }
.seg-card-cab h2 { font-family: var(--f-disp); font-weight: 800; text-transform: uppercase; font-size: 1.6rem; line-height: 1.05; margin: .15rem 0; }
.seg-card-cab p { margin: 0; color: var(--gris); font-size: .92rem; }
.seg-fecha { background: var(--forja); color: #fff; border-radius: 8px; padding: .5rem .7rem; }
.seg-fecha small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #c3ccd4; }
.seg-fecha b { font-family: var(--f-disp); font-size: 1.35rem; text-transform: uppercase; color: var(--amarillo); }
@media (min-width: 600px) { .seg-card-cab { grid-template-columns: 1fr auto; align-items: start; } .seg-fecha { text-align: right; } }
.seg-msj { font-size: 1.05rem; font-weight: 600; margin: .9rem 0 .3rem; }
.seg-tarde { background: #fff3f2; border-left: 4px solid var(--rojo); padding: .4rem .6rem; margin: .4rem 0; font-size: .92rem; }
.ruta { list-style: none; padding: 0 0 0 44px; margin: 1.1rem 0 .4rem; position: relative; --avance: 0px; }
.ruta::before { content: ''; position: absolute; left: 15px; top: 14px; bottom: 26px; width: 6px; border-radius: 3px; background: repeating-linear-gradient(180deg, #b7c4cf 0 8px, transparent 8px 13px); }
.ruta::after { content: ''; position: absolute; left: 15px; top: 14px; width: 6px; height: calc(var(--avance) - 14px); border-radius: 3px; background: var(--amarillo); box-shadow: 0 0 0 1px var(--forja); transition: height .55s ease; }
.ruta-p { position: relative; padding: 0 0 .7rem; min-height: 50px; }
.ruta-txt { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: start; }
.ruta-txt b, .ruta-txt .ruta-estado { grid-column: 1; }
.ruta-punto { position: absolute; left: -38px; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid #9aabb9; z-index: 1; transition: background .3s, border-color .3s; }
.ruta-txt b { font-family: var(--f-disp); font-weight: 800; text-transform: uppercase; font-size: 1.2rem; letter-spacing: .02em; color: #5f6b75; transition: color .3s; }
.ruta-estado { display: block; font-size: .85rem; color: #5f6b75; }
.ruta-p.hecho .ruta-punto { background: var(--verde); border-color: var(--forja); }
.ruta-p.hecho .ruta-punto::after { content: '✓'; color: #fff; font-weight: 800; font-size: .8rem; display: grid; place-items: center; height: 100%; }
.ruta-p.hecho b, .ruta-p.actual b { color: var(--forja); }
.ruta-p.actual .ruta-punto { background: var(--amarillo); border-color: var(--forja); animation: late 1.4s infinite; }
.ruta-p.actual .ruta-estado { color: var(--forja); font-weight: 700; }
.ruta-foto { grid-column: 2; grid-row: 1 / span 3; margin: 0; width: 118px; position: relative; border: 2px solid var(--forja); border-radius: 8px; overflow: hidden; background: #fff; opacity: 0; transform: translateY(12px) scale(.97); transition: opacity .5s ease .25s, transform .5s ease .25s; }
.ruta-p.visto .ruta-foto { opacity: 1; transform: none; }
.ruta-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; height: auto; }
.ruta-foto figcaption { font-family: var(--f-disp); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: .1rem .35rem; background: var(--forja); color: var(--amarillo); font-size: .74rem; line-height: 1.2; }
@media (min-width: 600px) { .ruta-foto { width: 190px; } .ruta-foto figcaption { font-size: .9rem; } }
.ruta-marcador { position: absolute; left: 1px; top: 0; width: 34px; height: 28px; display: grid; place-items: center; background: var(--forja); border-radius: 6px; z-index: 2; transition: transform .55s cubic-bezier(.4, 1.3, .5, 1); box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
.ruta-marcador .marca-yunque { width: 26px; height: 17px; color: var(--amarillo); }
.seg-saldo { border-top: 2px dashed #c3ced8; padding-top: .7rem; font-size: .98rem; }
.seg-saldo b { font-family: var(--f-mono); }
.seg-volver { max-width: 760px; margin: 1.2rem auto 0; padding: 0 16px; }
.pag-seg .cta { margin-top: 1.5rem; }

/* ══════════ aviso de privacidad ══════════ */
.legal { max-width: 760px; margin: 0 auto; padding: 1.4rem 16px 2.5rem; background: rgba(255, 255, 255, .78); }
.legal h1 { font-size: 2rem; }
.legal h2 { font-family: var(--f-disp); text-transform: uppercase; font-size: 1.25rem; margin: 1.4rem 0 .3rem; }
.legal-meta { color: var(--gris); font-family: var(--f-mono); font-size: .8rem; }
.pag-legal .pie { margin-top: 0; }

/* ══════════ escritorio ══════════ */
@media (min-width: 900px) {
  .vista { padding: 0 28px; }
  .cot { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 32px; align-items: start; }
  .cot-panel { display: block; grid-column: 2; grid-row: 1; padding-top: 1.4rem; }
  .cot-escena { grid-column: 1; grid-row: 1; margin: 1.4rem 0 0; top: calc(var(--cab) + 18px); border: 2px solid var(--forja); border-radius: 10px; padding: 12px; }
  .plano { height: min(52vh, 440px); }
  .tira { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; }
  .taller { grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px; }
  .est { min-height: 240px; }
  .galeria { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .equipo { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .cot-escena .bomba-mini { flex-direction: row; gap: 1rem; }
}
@media (max-height: 560px) and (max-width: 899px) {
  .cot-escena { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* impresión de la cotización (Descargar PDF) */
#imprimible { display: none; }
@media print {
  body.imprimiendo { background: #fff; padding: 0; }
  body.imprimiendo > *:not(#imprimible) { display: none !important; }
  body.imprimiendo #imprimible { display: block; }
  .papel-impreso { border: 0; box-shadow: none; max-width: 720px; margin: 0 auto; }
  .papel-impreso .sello:not(.puesto) { display: none; }
  .papel-impreso .papel-dibujo { height: 220px; }
}
@media (min-width: 900px) and (max-width: 1140px) { .btn-restaurar span { display: none; } }