/* =============================================================================
   DRS MOTORS · DEMO — SERVICIOS: WhatsApp simulado, informe vehicular, catálogo DRS y trámites
   Mismas reglas que app.css: radio 0, un solo Azul Acero por pantalla y solo sobre sup-1
   (el botón principal o el de enviar), Azul Luz dentro de tarjetas, semánticos siempre con
   glifo, series de gráficas con --ser-1..4 (ser-5 está bloqueado sobre sup-2) y estimados
   con trama rayada. Tamaños solo de la escala (--fs-9 … --fs-76).
============================================================================= */

/* ---------------------------------------------------------------- comunes */
.trama{background-image:repeating-linear-gradient(135deg, var(--n-4) 0 1px, transparent 1px 6px)}
.srv-rejilla{background:
  linear-gradient(color-mix(in srgb, var(--linea) 55%, transparent) 1px, transparent 1px) 0 0/20px 20px,
  linear-gradient(90deg, color-mix(in srgb, var(--linea) 55%, transparent) 1px, transparent 1px) 0 0/20px 20px,
  var(--sup-1)}
.srv-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.srv-lista li{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:baseline}
.srv-lista li>.d{color:var(--txt-3)}
.srv-lista li>p{margin:0;color:var(--txt-1)}

/* Placa de línea (Contexto/11): el flap en miniatura + nombre de línea. Si falta espacio se
   recorta la placa, nunca el modelo. */
.placa-linea{
  display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;opacity:.85;
  font:600 var(--fs-9)/1.2 var(--f-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--txt-1);
}
.placa-linea-flap{flex:none;width:18px;height:6px;border-top:1px solid var(--txt-2);border-bottom:2px solid var(--acc-graf)}
.placa-linea-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.placa-linea b{font-weight:600}
.sello-signature{color:var(--acc-txt)}
.sello-unicornio{color:var(--txt-1)}

/* ---------------------------------------------------------------- WhatsApp simulado */
.wa{display:flex;flex-direction:column;height:calc(100% - var(--teclado, 0px));background:var(--sup-1)}   /* con teclado, el campo queda justo encima */
.wa-cab{flex:none;gap:10px}
.wa-avatar{display:grid;place-items:center;width:36px;height:36px;flex:none;background:var(--sup-2);border:1px solid var(--linea)}
.wa-avatar svg{display:block;width:24px;height:24px}
/* La foto de perfil de DRS en WhatsApp es su ícono de app, oscuro en los dos temas: sobre panel
   claro, el monograma para fondo oscuro desaparecía y solo quedaba el flap */
[data-modo="documento"] .wa-avatar{background:var(--txt-1);border-color:var(--txt-1)}
.wa-quien{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.wa-nombre{display:flex;align-items:center;gap:5px;font:700 var(--fs-13)/1.2 var(--f-body);color:var(--txt-1)}
.wa-nombre .ico{width:14px;height:14px;color:var(--acc-txt)}
.wa-sub{font-size:var(--fs-11);line-height:1.2;color:var(--txt-3)}
.wa-sub.wa-activo{color:var(--acc-txt)}
.wa-rotulo{
  flex:none;display:flex;align-items:center;gap:8px;padding:8px 15px;
  background:var(--sup-2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  font:600 var(--fs-9)/1.3 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2);
}
.wa-rotulo .ico{width:14px;height:14px;color:var(--txt-3)}
.wa-msgs{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  display:flex;flex-direction:column;gap:6px;padding:14px 12px 16px}
.wa-msgs::-webkit-scrollbar{display:none}
.wa-ficha{align-self:center;display:flex;flex-direction:column;align-items:center;gap:6px;margin:6px 0 10px;padding:14px 18px;
  background:var(--sup-2);border:1px solid var(--linea);text-align:center}
.wa-ficha .wa-avatar{width:44px;height:44px}
.wa-ficha .wa-avatar svg{width:30px;height:30px}
.wa-ficha b{font:700 var(--fs-13)/1.2 var(--f-body);color:var(--txt-1)}
.wa-dia{align-self:center;margin:2px 0 6px;padding:5px 9px;background:var(--sup-2);border:1px solid var(--linea);
  font:600 var(--fs-9)/1 var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3)}
.wa-msg{position:relative;max-width:84%;padding:8px 10px 6px;border:1px solid var(--linea);font-size:var(--fs-13);line-height:1.45;color:var(--txt-1)}
.wa-msg p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.wa-msg.wa-ellos{align-self:flex-start;background:var(--sup-2)}
.wa-msg.wa-yo{align-self:flex-end;background:color-mix(in srgb, var(--acc-graf) 14%, var(--sup-2));border-color:color-mix(in srgb, var(--acc-graf) 40%, var(--linea))}
.wa-meta{display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-top:3px;font-size:var(--fs-9);line-height:1;color:var(--txt-3);font-variant-numeric:tabular-nums}
[data-modo="documento"] .wa-msg.wa-yo .wa-meta{color:var(--txt-2)}   /* sobre la burbuja teñida de azul, txt-3 daba 4,1:1 */
.wa-checks{display:inline-flex;color:var(--txt-3);transition:color .2s}
.wa-checks .ico{width:13px;height:13px;stroke-width:2.5px}
.wa-checks .ico+.ico{margin-left:-8px}
.wa-checks.wa-leido{color:var(--acc-txt)}
.wa-msg.wa-nuevo{animation:wa-llega .28s var(--ease) both}
@keyframes wa-llega{from{opacity:0;transform:translateY(10px)}}
.wa-escribe{display:flex;align-items:center;gap:4px;padding:12px}
.wa-escribe i{width:6px;height:6px;background:var(--txt-3);animation:wa-punto 1s var(--ease) infinite}
.wa-escribe i:nth-child(2){animation-delay:.15s}
.wa-escribe i:nth-child(3){animation-delay:.3s}
@keyframes wa-punto{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.wa-pie{flex:none;display:flex;align-items:flex-end;gap:8px;padding:10px 12px max(10px, calc(30px - var(--teclado, 0px)));background:var(--sup-1);border-top:1px solid var(--linea)}
.wa-txt{flex:1;min-width:0;height:44px;min-height:44px;max-height:104px;padding:9px 12px;resize:none;overflow-y:auto;
  background:var(--sup-3);border:1px solid var(--n-4);color:var(--txt-1);font-size:var(--fs-16);line-height:1.5;scrollbar-width:none}
.wa-txt::placeholder{color:var(--txt-3)}
.wa-txt:focus{outline:2px solid var(--acc-txt);outline-offset:-1px;border-color:var(--acc-graf)}
.wa-enviar{flex:none;display:grid;place-items:center;width:44px;height:44px;background:var(--acc-1);color:var(--txt-acc)}
.wa-enviar:hover{filter:brightness(1.12)}
.wa-enviar .ico{width:20px;height:20px}

/* ---------------------------------------------------------------- informe vehicular */
/* Entrada: la placa como protagonista, con el flap debajo */
.inf-placa-caja{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;margin:0 -15px;padding:20px 15px 16px;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.inf-placa{width:100%;max-width:264px;height:78px;padding:6px 0 0;text-align:center;text-transform:uppercase;
  background:var(--sup-1);border:2px solid var(--txt-1);color:var(--txt-1);
  font:400 var(--fs-56)/1 var(--f-display);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.inf-placa::placeholder{color:var(--n-4)}
.inf-placa:focus{outline:none;border-color:var(--acc-graf)}
.inf-placa[aria-invalid="true"]{border-color:var(--neg)}
.inf-placa-flap{display:block;width:100%;max-width:264px;height:7px;border-top:1px solid var(--txt-2);border-bottom:2px solid var(--acc-graf)}
.inf-ayuda{display:flex;align-items:center;gap:6px;min-height:18px}
.inf-ayuda.inf-err{color:var(--neg)}
.inf-ayuda .ico{width:14px;height:14px;stroke-width:3px}
.inf-ejemplos{display:flex;flex-direction:column;gap:10px;padding:16px 0 0}
.inf-ejemplos .fichas{margin:0}
.inf-ejemplos .ficha{font:400 var(--fs-16)/1 var(--f-display);letter-spacing:.08em;color:var(--txt-1);padding:2px 12px 0}
.inf-ejemplos .ficha:hover{border-color:var(--txt-3)}

/* Qué trae: vista previa frente a completo */
.inf-tabla{padding:4px 15px 2px}
.inf-fila{display:grid;grid-template-columns:1fr 70px 70px;align-items:center;min-height:40px;border-bottom:1px solid var(--linea)}
.inf-fila .t13{color:var(--txt-1);padding:8px 0}
.inf-fila-cab{min-height:34px}
.inf-fila-cab .cap,.inf-fila-pie .d{text-align:center}
.inf-fila-pie{border-bottom:0;min-height:46px}
.inf-c{display:grid;place-items:center;color:var(--txt-1)}
.inf-c .ico{width:16px;height:16px;stroke-width:2.5px}
.inf-c.inf-no{color:var(--txt-3)}

/* Plano con el dibujo y rótulos */
.inf-plano{min-height:136px;padding-top:42px;overflow:hidden}
.inf-plano-placa{position:absolute;left:15px;top:12px;padding:5px 7px 3px;background:var(--sup-1);border:1px solid var(--txt-2);
  font:400 var(--fs-16)/1 var(--f-display);letter-spacing:.08em;color:var(--txt-1)}
.inf-plano-fuente{position:absolute;right:15px;top:16px}
.inf-proceso{padding:6px 0 10px}
.inf-revela{animation:inf-revela .45s var(--ease) both}
@keyframes inf-revela{from{opacity:0;transform:translateY(8px)}}
.inf-reg{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Estado general de la vista previa */
.inf-hallazgos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.inf-hallazgos>div{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 12px;border-right:1px solid var(--linea)}
.inf-hallazgos>div:last-child{border-right:0}
.inf-hallazgos .cap{line-height:1.35}

/* Secciones bloqueadas: candado + trama rayada */
.inf-bloqueos{padding:0}
.inf-bloq{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:14px 15px;border-bottom:1px solid var(--linea)}
.inf-bloq:last-child{border-bottom:0}
.inf-bloq-ico{grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--n-4);color:var(--txt-2)}
.inf-bloq-ico .ico{width:18px;height:18px}
.inf-bloq-barras{grid-column:2;display:flex;flex-direction:column;gap:6px;margin-top:8px}
.inf-bloq-barras i{display:block;height:8px;border:1px solid var(--linea)}
.inf-bloq-graf{grid-column:2;display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:8px;padding:0 4px;border-bottom:1px solid var(--n-4)}
.inf-bloq-graf i{flex:1;border:1px solid var(--linea);border-bottom:0}
.inf-bloq-graf i:nth-child(1){height:34%} .inf-bloq-graf i:nth-child(2){height:58%} .inf-bloq-graf i:nth-child(3){height:82%}
.inf-bloq-graf i:nth-child(4){height:100%} .inf-bloq-graf i:nth-child(5){height:72%} .inf-bloq-graf i:nth-child(6){height:50%} .inf-bloq-graf i:nth-child(7){height:28%}

/* Informe completo */
.inf-pagado{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.inf-banda{margin-top:4px}
.inf-banda .t13{margin-top:4px}
.inf-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.inf-tile{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 12px 13px;min-height:132px}
.inf-tile .etq{font-size:var(--fs-9);letter-spacing:.2em;color:var(--txt-3)}
.inf-tile .d{margin-top:2px}
.inf-tile>:last-child{margin-top:auto}
.inf-duenos{display:flex;gap:2px;width:100%;height:10px}
.inf-duenos i{flex:1}
.inf-advertencia{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin-top:12px;padding:14px 15px;background:var(--panel);border:1px solid var(--n-4)}
.inf-advertencia>.ico{width:20px;height:20px;color:var(--txt-1);margin-top:1px}
.inf-advertencia b{display:block;margin-bottom:6px;font:700 var(--fs-11)/1.2 var(--f-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--txt-1)}
.inf-advertencia p{font-size:var(--fs-13);line-height:1.5;color:var(--txt-2)}

/* Línea de tiempo (SVG) */
.inf-tl{display:block;width:100%;height:auto;overflow:visible}
.inf-tl text{font-family:var(--f-label);font-weight:600;font-size:9px;letter-spacing:.12em;fill:var(--txt-3)}
.inf-tl .tl-ano{letter-spacing:.04em}
.inf-tl .tl-p{fill:var(--sup-1);font-weight:700;letter-spacing:.1em}
/* En documento, Platino sobre ser-4 da 4,2:1: el rótulo lleva un halo de ser-2 (10:1 con el
   texto) para que se lea contra su propio borde, como las etiquetas del mapa (6.9) */
[data-modo="documento"] .inf-tl rect[style*="--ser-4"] + .tl-p{paint-order:stroke;stroke:var(--ser-2);stroke-width:2px;stroke-linejoin:miter;stroke-miterlimit:1}
.inf-tl .tl-nada{font-weight:500;letter-spacing:.02em}
.inf-tl .tl-hoy-t{fill:var(--txt-1)}
.inf-tl .tl-rej{stroke:var(--linea);stroke-width:1}
.inf-tl .tl-eje{stroke:var(--n-4);stroke-width:1}
.inf-tl .tl-hoy{stroke:var(--txt-2);stroke-width:1;stroke-dasharray:2 3}
.inf-tl .tl-tras{stroke:var(--txt-1);stroke-width:1.5}
.inf-tl .tl-trama-w{stroke:var(--warn);stroke-width:1.4}
.inf-tl .tl-trama-n{stroke:var(--txt-3);stroke-width:1.2}
.inf-tl .tl-prenda-v{stroke:var(--warn);stroke-width:1}
.inf-tl .tl-prenda{stroke:var(--n-4);stroke-width:1}
.inf-tl .tl-ico-w{fill:none;stroke:var(--warn);stroke-width:3.5;stroke-linecap:butt;stroke-linejoin:miter}
.inf-tl .tl-glifo-w{fill:var(--sup-2);stroke:var(--warn);stroke-width:1}
.inf-hitos-caja{margin-top:20px}
.inf-hitos .hito .chip{margin-top:8px}
.inf-h-dueno::before{background:var(--txt-2)}

/* SOAT y tecnomecánica año por año */
.inf-matriz{display:grid;grid-template-columns:44px repeat(var(--n), 1fr);gap:3px;align-items:center}
.inf-matriz .inf-ano{text-align:center;letter-spacing:.02em}
.inf-celda{display:grid;place-items:center;height:28px;border:1px solid var(--linea)}
.inf-celda .ico{width:12px;height:12px;stroke-width:3px}
.inf-celda.est-pos{border-color:color-mix(in srgb, var(--pos) 40%, var(--linea))}
.inf-celda.est-warn{border-color:color-mix(in srgb, var(--warn) 55%, var(--linea))}
.inf-celda.est-neg{border-color:color-mix(in srgb, var(--neg) 55%, var(--linea))}
.inf-na{color:var(--txt-3);font-size:var(--fs-11)}
.inf-leyenda{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:var(--fs-11);color:var(--txt-2)}
.inf-leyenda>span{display:inline-flex;align-items:center;gap:6px}
.inf-leyenda em{font-style:normal;color:var(--txt-2)}
.inf-leyenda .ico{width:12px;height:12px;stroke-width:3px}
.inf-leyenda b{font-weight:600;color:var(--txt-3)}
.inf-leyenda i{display:inline-block;width:10px;height:10px;flex:none}
.inf-leyenda .lg-veh{background:var(--txt-1)}
.inf-leyenda .lg-comp{border:1.5px solid var(--ser-2)}
.inf-leyenda .lg-banda{border:1px solid var(--ser-3);background-image:repeating-linear-gradient(135deg, var(--ser-4) 0 1px, transparent 1px 4px)}

/* Estudio de mercado */
.inf-rango{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.inf-rango>div{display:flex;flex-direction:column;gap:6px}
.inf-graf{display:block;width:100%;height:auto;margin-top:14px;overflow:visible}
.inf-graf text{font-family:var(--f-label);font-weight:600;font-size:9px;letter-spacing:.04em;fill:var(--txt-3)}
.inf-graf .g-rej{stroke:var(--linea);stroke-width:1}
.inf-graf .g-eje{stroke:var(--n-4);stroke-width:1}
.inf-graf .g-trama{stroke:var(--ser-4);stroke-width:1.2}
.inf-graf .g-banda{opacity:.6}
.inf-graf .g-banda-borde{stroke:var(--ser-3);stroke-width:1;stroke-dasharray:3 3}
.inf-graf .g-barra{stroke:var(--ser-3);stroke-width:1}
.inf-graf .g-rango{fill:var(--txt-2);letter-spacing:.16em}
.inf-graf .g-tit{letter-spacing:.16em}
.inf-graf .g-comp{fill:var(--sup-2);stroke:var(--ser-2);stroke-width:1.6}
.inf-graf .g-ano{fill:var(--txt-2)}
.inf-graf .g-cruz{stroke:var(--txt-2);stroke-width:1;stroke-dasharray:2 3}
.inf-graf .g-veh{fill:var(--txt-1)}
.inf-graf .g-veh-t{font-family:var(--f-display);font-weight:400;font-size:13px;letter-spacing:.06em;fill:var(--txt-1)}
.inf-ejemplo{margin-top:10px}
.inf-comps{margin-top:8px;border-top:1px solid var(--linea)}
.inf-comp{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--linea)}

/* Recomendaciones generadas con IA */
.inf-ia{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:10px 12px;border:1px solid var(--acc-graf);
  font:600 var(--fs-9)/1.3 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2)}
.inf-ia .ico{width:16px;height:16px;color:var(--acc-txt)}
.inf-ia b{color:var(--acc-txt);font-weight:700}
.inf-lista{margin-top:12px}
.inf-copiar{margin-top:16px}

/* ---------------------------------------------------------------- catálogo DRS */
.cat-tarjeta{display:block;width:100%;margin-bottom:10px;text-align:left;overflow:hidden}
.cat-tarjeta:hover{border-color:var(--n-4)}
.cat-plano{position:relative;display:block;height:158px;padding:34px 12px 4px;border-bottom:1px solid var(--linea)}
.cat-plano svg{display:block;width:100%;height:100%}
.cat-chip{position:absolute;left:12px;top:10px}
.cat-codigo{position:absolute;right:12px;top:15px}
.cat-info{display:flex;flex-direction:column;gap:7px;padding:13px 15px 14px}
.cat-specs{color:var(--txt-2);letter-spacing:.12em}
.cat-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:5px;padding-top:11px;border-top:1px solid var(--linea)}
.cat-pie .placa-linea{flex:1 1 auto}
.cat-pie .d{flex:none}

/* Ficha: galería de vistas en blueprint */
.cat-galeria{position:relative;margin:0 -15px;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.cat-riel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.cat-riel::-webkit-scrollbar{display:none}
.cat-vista{position:relative;flex:none;width:100%;height:226px;margin:0;display:grid;place-items:center;padding:18px 0 30px;scroll-snap-align:start}
.cat-lienzo{display:block}
.cat-lienzo svg{display:block;width:100%;height:auto}
.cat-lienzo.v-perfil,.cat-lienzo.v-planta{width:92%}
.cat-lienzo.v-frente{width:50%}
.cat-vista figcaption{position:absolute;left:15px;bottom:11px}
.cat-cuenta{position:absolute;right:15px;bottom:11px;color:var(--txt-3)}
.cat-cuenta b{color:var(--txt-1);font-weight:700}
.cat-seg{margin:10px 0 0}
.cat-titulo{padding:22px 0 4px}
.cat-titulo h1{margin-top:2px}
.cat-divisor{display:block;width:32px;height:2px;background:var(--acc-graf);margin:14px 0 12px}
.cat-specs2{margin-bottom:12px;font:600 var(--fs-11)/1.3 var(--f-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--txt-2)}
.cat-precio{display:flex;flex-direction:column;gap:6px;margin-top:20px}
.cat-puntajes{display:flex;flex-direction:column;gap:4px}
.cat-punt{display:grid;grid-template-columns:78px 1fr 34px;gap:12px;align-items:center;padding:5px 0}
.cat-barra{position:relative;height:6px;background:var(--linea)}
.cat-barra i{position:absolute;left:0;top:0;bottom:0;background:var(--ser-2)}
.cat-punt .d{text-align:right}
.cat-cuerpo{padding-bottom:44px}
.placa-linea.placa-grande{gap:10px;font-size:var(--fs-11)}
.placa-linea.placa-grande .placa-linea-flap{width:24px;height:7px}

/* ---------------------------------------------------------------- trámites DRS */
.tram-bogota{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:14px 15px;border:1px solid var(--txt-2);background:var(--sup-1)}
.tram-bogota>.ico{width:26px;height:26px;color:var(--txt-1)}
.tram-bogota .t13{margin-top:5px}
.tram-bloque{margin-top:26px}
.tram-opc{margin-bottom:6px}
.tram-opc[aria-checked="true"]{border-color:var(--acc-graf)}
.tram-caja{display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--n-4)}
.tram-opc[aria-checked="true"] .tram-caja{border-color:var(--sel-fondo);background:var(--sel-fondo);color:var(--sup-1)}
.tram-caja .ico{width:14px;height:14px;stroke-width:3px}
.tram-fichas{margin:0}
.tram-fichas .ficha{height:36px;letter-spacing:.1em}
.tram-cot{padding-top:4px}
.tram-linea{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--linea)}
.tram-linea .t13{color:var(--txt-1)}
.tram-linea .t11{grid-column:1 / -1}
.tram-valor{font-size:var(--fs-13);color:var(--txt-1);text-align:right}
.tram-pend{font:600 var(--fs-9)/1.2 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);text-align:right}
.tram-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0 2px}
.tram-mas{margin-top:4px}
.tram-mitad{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-top:14px;padding:12px 13px;background:var(--panel);border:1px solid var(--linea)}
.tram-mitad .t11{margin-top:5px}
.tram-mitad-v{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.tram-runt{margin-top:18px}
.tram-runt .ico{color:var(--txt-1)}
.tram-pasos li>.d{color:var(--txt-3)}