/* ---------- Descarga remota de tacógrafo (29/10/2026) ---------- */
.tc { background: #fff; border: 1px solid var(--vg-line, #e6e9ee); border-radius: 22px; padding: 24px 26px 18px; box-shadow: 0 18px 44px rgba(11,22,36,.06); }
.tc-top { display: flex; justify-content: space-between; gap: 16px; align-items: center; font-size: 13px; color: var(--vg-muted, #56616c); margin-bottom: 18px; flex-wrap: wrap; }
.tc-top b { color: var(--vg-ink, #17212b); font-size: 15px; }
.tc-leg { display: flex; gap: 14px; } .tc-leg span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.tc-leg .a::before { background: #fe6601; } .tc-leg .b::before { border-radius: 2px; background: #e9edf2; border: 1px dashed #8b97a3; }
.tc-row { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: center; margin: 14px 0; }
.tc-row > b { font-size: 14px; color: var(--vg-ink, #17212b); }
.tc-bar { position: relative; height: 34px; background: repeating-linear-gradient(90deg, #f6f7f9 0 calc(100%/6 - 1px), #eceff3 calc(100%/6 - 1px) calc(100%/6)); border-radius: 10px; }
.tc-lim { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px; background: #eef1f5; border-right: 3px dashed #17212b; }
.tc-lim em { position: absolute; right: 8px; top: -20px; font-style: normal; font-size: 11.5px; font-weight: 700; color: #17212b; white-space: nowrap; }
.tc-bar i { position: absolute; top: 7px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: #fe6601; box-shadow: 0 0 0 4px rgba(254,102,1,.18); }
.tc-axis { position: relative; height: 16px; margin-left: 184px; font-size: 11px; color: #8b97a3; } .tc-axis span { position: absolute; transform: translateX(-50%); }
.tc-x { text-align: right; font-size: 11px; color: #8b97a3; }
.tc-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; align-items: center; margin-top: 34px; }
.tc-note { font-size: 12.5px; color: var(--vg-muted, #56616c); margin-top: 18px; line-height: 1.5; }
.tc-how { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; margin-top: 36px; }
.tc-how img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 30px 70px rgba(11,22,36,.18); }
.tc-dash table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tc-dash th { text-align: left; color: #6f849c; font-weight: 600; font-size: 12px; padding: 8px 6px; border-bottom: 1px solid rgba(255,255,255,.08); }
.tc-dash td { padding: 10px 6px; border-bottom: 1px solid rgba(255,255,255,.06); color: #dbe5f0; }
.tc-st { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; }
.tc-st--ok { background: rgba(22,163,74,.16); color: #4ade80; } .tc-st--pend { background: rgba(254,102,1,.18); color: #ffb27a; }
@media (max-width: 980px) { .tc-grid, .tc-how { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .tc-row { grid-template-columns: 1fr; gap: 6px; } .tc-axis { margin-left: 0; } .tc-lim em { font-size: 10.5px; } .tc { padding: 20px 16px 14px; } }