/* Rotas e formulários maiores (editor de rota, administração). */

.route-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.route-card .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.route-card .dests { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.dest { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-inset); font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.dest .n { font-weight: 600; font-size: 12px; color: var(--label-2); text-transform: uppercase; letter-spacing: .04em; }
.dest.off { opacity: .55; }

.group { display: flex; flex-direction: column; gap: 10px; }
.group > .g-title { font-size: 12px; font-weight: 600; color: var(--label-2); text-transform: uppercase; letter-spacing: .04em; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }

/* Opção tipo "radio card" */
.option { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--separator); cursor: pointer; transition: border-color .12s, background .12s; }
.option:hover { background: var(--bg-hover); }
.option.on { border-color: var(--blue); background: var(--tint-blue); }
.option .radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--separator-strong); margin-top: 2px; flex: none; }
.option.on .radio { border: 5px solid var(--blue); }
.option .t { font-weight: 600; font-size: 13px; }
.option .d { font-size: 12px; color: var(--label-2); }

/* Cartão de rota no seletor por equipamento */
.route-option { align-items: flex-start; }
.route-option-dests { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; font-size: 12.5px; color: var(--label-2); }
.route-option-dests b { color: var(--label); font-weight: 500; margin-right: 2px; }
section > .row > h2 { font-size: 15px; }

/* Exclusão permanente do histórico */
.purge-warning { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--tint-red); color: var(--red); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.purge-warning p { color: var(--label); }
.purge-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.purge-facts > div { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-inset); display: flex; flex-direction: column; gap: 2px; }
.purge-facts .k { font-size: 11.5px; color: var(--label-2); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.purge-facts .v { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Administração */
.admin-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--separator); }
.inline-form .field { min-width: 140px; }
.port-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: var(--bg-inset); font-family: var(--mono); font-size: 12px; }

@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}