/* Actividad por visita: one row per car, entry and exit together. */
#live-visits { margin: 0 0 18px; overflow: hidden; border: 1px solid #dce4dc; border-radius: 14px; background: #fff; }
#live-visits .activity-list-heading { gap: 16px; flex-wrap: wrap; }
#live-visits .live-tabs { display: flex; gap: 2px; margin: 0; padding: 3px; border-radius: 8px; background: #f2f5f0; }
#live-visits .live-tabs button { height: 32px; padding: 0 12px; border: 0; font-size: 11px; }
#live-visits .live-tabs button.is-on { border-radius: 6px; background: #fff; color: #254c39; box-shadow: 0 1px 4px #132c1812; }

.visits-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; padding: 0 24px 18px; }
.visits-toolbar .live-find-wrap { flex: 1; max-width: 360px; margin: 0; }
#visits-find { width: 100%; height: 39px; min-height: 39px; border: 1px solid #dfe5df; border-radius: 8px; background: #f8faf7; font-size: 12px; }
.visits-summary { margin: 0; color: #5f7165; font-size: 12px; font-variant-numeric: tabular-nums; }
#live-visits .form-error { margin: 0 24px 14px; }

.visits-head,
.visit-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.1fr) minmax(120px, 1fr) minmax(110px, 1fr) minmax(110px, 1fr) 80px 80px 110px;
  align-items: center;
  gap: 14px;
}
.visits-head {
  padding: 12px 24px;
  border-block: 1px solid #ece4cc;
  background: #f7f3e4;
  color: #6f6a55;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.visits-head .is-num,
.visit-amount { text-align: right; }
.visits-rows { margin: 0; padding: 0; list-style: none; }
.visit-row { min-height: 60px; padding: 12px 24px; border-bottom: 1px solid #eef1eb; box-sizing: border-box; }
.visit-row:hover { background: #fafcf8; }
.visit-plate { min-width: 0; }
.visit-when { color: #33483b; font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.visit-duration { color: #33483b; font-family: var(--font-mono); font-size: 12px; }
.visit-amount { color: #1f3a2c; font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.is-empty { color: #b3bcb4; }
.visit-type.is-empty, .visit-state.is-empty { padding: 0; background: none; }

.visit-type,
.visit-state {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f0f2ee;
  color: #5d6c61;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.visit-type::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }
.visit-type[data-state="permit"] { background: #e6eef7; color: #3f6c9a; }
.visit-type[data-state="customer"] { background: var(--color-moss-weak); color: var(--color-moss); }
.visit-type:not([data-state])::before { display: none; }
.visit-state[data-state="paid"] { background: var(--color-moss-weak); color: var(--color-moss); }
.visit-state[data-state="unpaid"] { background: color-mix(in srgb, var(--color-danger) 13%, transparent); color: var(--color-danger); }
.visit-state[data-state="inside"] { background: var(--color-sand-weak); color: var(--color-warn-ink); }
.visit-state[data-state="permit"] { background: #e6eef7; color: #3f6c9a; }

.visits-empty { margin: 0; padding: 40px 24px; color: #879586; text-align: center; }
#visits-more { margin: 16px auto; }

.activity-reads { margin: 0; border: 1px solid #dce4dc; border-radius: 14px; background: #fff; }
.activity-reads > summary {
  padding: 16px 24px;
  color: #33483b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.activity-reads > summary::-webkit-details-marker { display: none; }
.activity-reads > summary::before { content: "▸"; display: inline-block; width: 16px; color: #8a978e; transition: transform 0.15s; }
.activity-reads[open] > summary::before { transform: rotate(90deg); }
.activity-reads > summary span { margin-left: 8px; color: #8a978e; font-size: 11px; font-weight: 400; }
.activity-reads #live-hits { border: 0; border-top: 1px solid #edf0e9; border-radius: 0 0 14px 14px; }

@media (max-width: 1100px) {
  .visits-head,
  .visit-row { grid-template-columns: minmax(110px, 1fr) 110px 100px 100px 64px 70px 96px; gap: 10px; }
  .visits-head,
  .visit-row { padding-inline: 16px; }
}
@media (max-width: 760px) {
  .visits-toolbar { padding: 0 14px 14px; }
  .visits-toolbar .live-find-wrap { flex-basis: 100%; max-width: none; }
  .visits-head { display: none; }
  .visit-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "plate state"
      "type amount"
      "entered left"
      "duration duration";
    gap: 8px 12px;
    padding: 14px;
  }
  .visit-plate { grid-area: plate; }
  .visit-state { grid-area: state; justify-self: end; }
  .visit-type { grid-area: type; }
  .visit-amount { grid-area: amount; font-size: 14px; }
  .visit-entered { grid-area: entered; }
  .visit-left { grid-area: left; justify-self: end; }
  .visit-duration { grid-area: duration; color: #7c8c80; }
  .visit-entered::before { content: "Entró "; color: #8a978e; font-family: var(--font-sans); }
  .visit-left::before { content: "Salió "; color: #8a978e; font-family: var(--font-sans); }
  .visit-duration::before { content: "Duración "; font-family: var(--font-sans); }
  .visit-row .is-empty { display: none; }
  .activity-reads > summary { padding: 14px; }
  .activity-reads > summary span { display: block; margin: 4px 0 0 16px; }
}