/* ==========================================================================
   Antares · Directorio de personas
   - Gestión humana → Consultar colaboradores (.ag-roster lista, .hr-cred tarjetas)
   - Transporte → Conductores (.ag-fleet / .ag-pass)
   Primitivas compartidas: .ag-btn, .ag-icon-btn, .ag-menu, .ag-status, .ag-avatar, .ag-tag
   ========================================================================== */

:root {
  --ag-ok: #12a172;
  --ag-warn: #d98a00;
  --ag-alert: #e03131;
  --ag-busy: #2f74c0;
  --ag-scheduled: #7357e8;
  --ag-off: #8696a8;
  --ag-surface: var(--white, #fff);
  --ag-sunken: #f4f8fc;
  --ag-edge: rgba(var(--primary-rgb, 55, 124, 192), 0.16);
  --ag-edge-strong: rgba(var(--primary-rgb, 55, 124, 192), 0.3);
  --ag-ink: var(--text, #0b2138);
  --ag-ink-soft: var(--text-soft, #3a5a78);
  --ag-ink-faint: #7b93ab;
  --ag-shadow: 0 1px 2px rgba(11, 33, 56, 0.05), 0 6px 18px -10px rgba(11, 33, 56, 0.18);
  --ag-shadow-hover: 0 2px 4px rgba(11, 33, 56, 0.06), 0 18px 36px -18px rgba(11, 33, 56, 0.32);
  --ag-radius: 16px;
}

body[data-theme="dark"] {
  --ag-ok: #34d399;
  --ag-warn: #fbbf24;
  --ag-alert: #f87171;
  --ag-busy: #60a5fa;
  --ag-scheduled: #a78bfa;
  --ag-off: #94a3b8;
  --ag-sunken: rgba(148, 196, 255, 0.05);
  --ag-edge: rgba(148, 196, 255, 0.12);
  --ag-edge-strong: rgba(148, 196, 255, 0.24);
  --ag-ink-faint: #7f9ab5;
  --ag-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 22px -12px rgba(0, 0, 0, 0.6);
  --ag-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.35), 0 22px 40px -18px rgba(0, 0, 0, 0.75);
}

/* ---------- Tonos ---------- */
.ag-tone-ok, .ag-status--ok, .ag-status--available, .ag-roster-card--ok, .ag-pass--available { --ag-tone: var(--ag-ok); }
.ag-status--warn, .ag-roster-card--warn { --ag-tone: var(--ag-warn); }
.ag-status--alert, .ag-roster-card--alert { --ag-tone: var(--ag-alert); }
.ag-status--busy, .ag-pass--busy { --ag-tone: var(--ag-busy); }
.ag-status--scheduled, .ag-pass--scheduled { --ag-tone: var(--ag-scheduled); }
.ag-status--offline, .ag-pass--offline, .ag-status--unlinked, .ag-roster-card--unlinked { --ag-tone: var(--ag-off); }
.ag-status--neutral, .ag-roster-card--neutral { --ag-tone: rgb(var(--primary-rgb, 55, 124, 192)); }

/* ---------- Botones ---------- */
.ag-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0 0.95rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font: 600 0.8rem/1 var(--font-body, inherit);
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ag-btn svg { width: 1rem; height: 1rem; flex: none; }
.ag-btn--primary {
  background: var(--primary, #1d5a96);
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(var(--primary-rgb, 55, 124, 192), 0.9);
}
.ag-btn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ag-btn:focus-visible,
.ag-icon-btn:focus-visible,
.ag-seg__btn:focus-visible,
.ag-menu__item:focus-visible,
.ag-link-btn:focus-visible {
  outline: 2px solid rgba(var(--primary-rgb, 55, 124, 192), 0.65);
  outline-offset: 2px;
}

.ag-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--ag-edge);
  border-radius: 10px;
  background: var(--ag-surface);
  color: var(--ag-ink-soft);
  cursor: pointer;
  list-style: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ag-icon-btn::-webkit-details-marker { display: none; }
.ag-icon-btn svg { width: 1.05rem; height: 1.05rem; }
.ag-icon-btn:hover,
.ag-menu[open] > .ag-icon-btn {
  background: rgba(var(--primary-rgb, 55, 124, 192), 0.08);
  border-color: var(--ag-edge-strong);
  color: var(--primary, #1d5a96);
}
.ag-icon-btn.is-active,
.ag-icon-btn--primary {
  background: rgba(var(--primary-rgb, 55, 124, 192), 0.12);
  border-color: rgba(var(--primary-rgb, 55, 124, 192), 0.35);
  color: var(--primary, #1d5a96);
}
.ag-icon-btn[disabled] { opacity: 0.5; cursor: progress; }

.ag-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.5rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--primary, #1d5a96);
  font: 700 0.76rem/1 var(--font-body, inherit);
  cursor: pointer;
  white-space: nowrap;
}
.ag-link-btn svg { width: 0.9rem; height: 0.9rem; }
.ag-link-btn:hover { background: rgba(var(--primary-rgb, 55, 124, 192), 0.08); }

/* ---------- Menú ⋯ ---------- */
.ag-menu { position: relative; }
.ag-menu > summary { list-style: none; }
.ag-menu:not([open]) > .ag-menu__panel { display: none; }
.ag-menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  display: grid;
  min-width: 232px;
  padding: 0.35rem;
  border: 1px solid var(--ag-edge);
  border-radius: 12px;
  background: var(--ag-surface);
  box-shadow: 0 18px 40px -16px rgba(11, 33, 56, 0.35), 0 2px 6px rgba(11, 33, 56, 0.06);
  animation: ag-pop 0.14s ease-out;
  transform-origin: top right;
}
@keyframes ag-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.ag-menu__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ag-ink);
  font: 600 0.8rem/1.2 var(--font-body, inherit);
  text-align: left;
  cursor: pointer;
}
.ag-menu__item:hover { background: rgba(var(--primary-rgb, 55, 124, 192), 0.08); }
.ag-menu__ico { display: inline-grid; place-items: center; width: 1.1rem; color: var(--ag-ink-faint); }
.ag-menu__ico svg { width: 1rem; height: 1rem; }
.ag-menu__item--danger { color: var(--ag-alert); }
.ag-menu__item--danger .ag-menu__ico { color: currentColor; }
.ag-menu__item--danger:hover { background: color-mix(in srgb, var(--ag-alert) 10%, transparent); }
.ag-menu__sep { height: 1px; margin: 0.3rem 0.4rem; background: var(--ag-edge); }

/* ---------- Estado ---------- */
.ag-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.6rem 0.28rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ag-tone) 12%, transparent);
  color: color-mix(in srgb, var(--ag-tone) 82%, var(--ag-ink));
  font: 700 0.7rem/1 var(--font-body, inherit);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ag-status__dot {
  width: 0.45rem;
  height: 0.45rem;
  flex: none;
  border-radius: 50%;
  background: var(--ag-tone, var(--ag-off));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ag-tone, var(--ag-off)) 22%, transparent);
}
.ag-status--busy .ag-status__dot,
.ag-pass--busy .ag-pass__trip .ag-status__dot { animation: ag-pulse 1.8s ease-in-out infinite; }
@keyframes ag-pulse {
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ag-tone) 0%, transparent); }
}

/* ---------- Avatar ---------- */
.ag-avatar {
  --ag-av-a: #3f7fc4;
  --ag-av-b: #1d4f86;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--ag-av-a), var(--ag-av-b)) center / cover no-repeat;
  color: #fff;
  font: 700 1rem/1 var(--font-display, inherit);
  letter-spacing: 0.02em;
}
.ag-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ag-avatar--photo { background-size: cover; background-position: center; }
.ag-avatar--hue-1 { --ag-av-a: #18a38a; --ag-av-b: #0d6b5b; }
.ag-avatar--hue-2 { --ag-av-a: #8b6cf0; --ag-av-b: #5536b8; }
.ag-avatar--hue-3 { --ag-av-a: #f08a4b; --ag-av-b: #b6501a; }
.ag-avatar--hue-4 { --ag-av-a: #e2588b; --ag-av-b: #a32758; }
.ag-avatar--hue-5 { --ag-av-a: #4c9bd6; --ag-av-b: #22608f; }
.ag-avatar--lg { width: 3.4rem; height: 3.4rem; border-radius: 16px; font-size: 1.1rem; }
.ag-avatar--sm { width: 2.2rem; height: 2.2rem; border-radius: 10px; font-size: 0.78rem; }
.ag-avatar[class*="ag-avatar--ring-"] {
  box-shadow: 0 0 0 2px var(--ag-surface), 0 0 0 4px var(--ag-tone, var(--ag-off));
}
.ag-avatar--ring-available { --ag-tone: var(--ag-ok); }
.ag-avatar--ring-busy { --ag-tone: var(--ag-busy); }
.ag-avatar--ring-scheduled { --ag-tone: var(--ag-scheduled); }
.ag-avatar--ring-offline { --ag-tone: var(--ag-off); }
.ag-avatar__badge {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid var(--ag-surface);
  border-radius: 50%;
  background: var(--primary, #1d5a96);
  color: #fff;
}
.ag-avatar__badge svg { width: 0.72rem; height: 0.72rem; }

/* ---------- Etiquetas ---------- */
.ag-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.5rem;
  border: 1px solid var(--ag-edge);
  border-radius: 7px;
  background: var(--ag-sunken);
  color: var(--ag-ink-soft);
  font: 600 0.68rem/1.1 var(--font-body, inherit);
  white-space: nowrap;
}
.ag-tag svg { width: 0.8rem; height: 0.8rem; opacity: 0.75; }
.ag-tag--vehicle { color: var(--primary, #1d5a96); }
.ag-tag--svc { color: var(--ag-scheduled); border-color: color-mix(in srgb, var(--ag-scheduled) 30%, transparent); }
.ag-tag--alert { color: var(--ag-alert); border-color: color-mix(in srgb, var(--ag-alert) 30%, transparent); }
.ag-tag--muted { color: var(--ag-ink-faint); border-style: dashed; background: none; }

/* ==========================================================================
   Gestión humana · Plantilla de colaboradores
   ========================================================================== */
.ag-roster {
  display: grid;
  gap: 0.6rem;
  margin: 0.25rem 0 0.9rem;
}

.ag-roster-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, 1.15fr) minmax(280px, 1.6fr) minmax(150px, 0.65fr) auto;
  grid-template-areas: "id contract pay actions";
  align-items: center;
  gap: 1.1rem 1.6rem;
  padding: 0.95rem 1.1rem 0.95rem 1.35rem;
  border: 1px solid var(--ag-edge);
  border-radius: var(--ag-radius);
  background: var(--ag-surface);
  box-shadow: var(--ag-shadow);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ag-roster-card::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--ag-tone);
}
.ag-roster-card:hover {
  border-color: var(--ag-edge-strong);
  box-shadow: var(--ag-shadow-hover);
}
.ag-roster-card:has(.ag-menu[open]) { z-index: 5; }
.ag-roster-card:has(.ag-select) { padding-left: 3rem; }
.ag-roster-card:has(.ag-select input:checked) {
  border-color: rgba(var(--primary-rgb, 55, 124, 192), 0.55);
  background: color-mix(in srgb, rgb(var(--primary-rgb, 55, 124, 192)) 4%, var(--ag-surface));
}
.ag-roster-card--unlinked .ag-avatar { filter: grayscale(0.85); opacity: 0.75; }
.ag-roster-card--unlinked .ag-roster-card__name { color: var(--ag-ink-soft); }

.ag-select {
  position: absolute;
  left: 1.05rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ag-select input { position: absolute; opacity: 0; width: 1.1rem; height: 1.1rem; margin: 0; cursor: pointer; }
.ag-select span {
  width: 1.1rem;
  height: 1.1rem;
  border: 1.5px solid var(--ag-edge-strong);
  border-radius: 5px;
  background: var(--ag-surface);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ag-select input:checked + span {
  border-color: var(--primary, #1d5a96);
  background: var(--primary, #1d5a96) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 72% no-repeat;
}
.ag-select input:focus-visible + span { outline: 2px solid rgba(var(--primary-rgb, 55, 124, 192), 0.6); outline-offset: 2px; }

.ag-roster-card__id { grid-area: id; display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.ag-roster-card__who { min-width: 0; }
.ag-roster-card__name {
  margin: 0;
  overflow: hidden;
  color: var(--ag-ink);
  font: 700 0.95rem/1.25 var(--font-display, inherit);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ag-roster-card__role {
  margin: 0.12rem 0 0;
  overflow: hidden;
  color: var(--primary, #1d5a96);
  font: 600 0.74rem/1.3 var(--font-body, inherit);
  text-overflow: ellipsis;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ag-roster-card__doc {
  margin: 0.15rem 0 0;
  overflow: hidden;
  color: var(--ag-ink-faint);
  font: 500 0.72rem/1.3 var(--font-body, inherit);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ag-roster-card__contract { grid-area: contract; display: grid; gap: 0.5rem; min-width: 0; }
.ag-roster-card__contract-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.ag-roster-card__contract-type {
  overflow: hidden;
  color: var(--ag-ink-soft);
  font: 700 0.72rem/1 var(--font-body, inherit);
  text-overflow: ellipsis;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.ag-roster-card__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.ag-timeline { display: grid; gap: 0.35rem; }
.ag-timeline__track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--ag-sunken);
  box-shadow: inset 0 0 0 1px var(--ag-edge);
}
.ag-timeline__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ag-tone) 45%, transparent), var(--ag-tone));
}
.ag-timeline--open .ag-timeline__fill {
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ag-tone) 55%, transparent) 0 10px, transparent 10px 14px);
}
.ag-timeline__now {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 2px solid var(--ag-surface);
  border-radius: 50%;
  background: var(--ag-tone);
  box-shadow: 0 0 0 1px var(--ag-tone);
  transform: translate(-50%, -50%);
}
.ag-timeline__notice {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  border-radius: 2px;
  background: var(--ag-warn);
  transform: translateX(-50%);
}
.ag-timeline__notice::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  border: 4px solid transparent;
  border-top-color: var(--ag-warn);
  transform: translateX(-50%);
}
.ag-timeline__legend {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--ag-ink-faint);
  font: 500 0.68rem/1.2 var(--font-body, inherit);
}
.ag-timeline__legend strong {
  color: color-mix(in srgb, var(--ag-tone) 75%, var(--ag-ink));
  font-weight: 700;
  text-align: center;
}

.ag-roster-card__pay { grid-area: pay; display: grid; gap: 0.12rem; justify-items: end; text-align: right; }
.ag-roster-card__pay-label {
  color: var(--ag-ink-faint);
  font: 600 0.66rem/1 var(--font-body, inherit);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ag-roster-card__pay-value {
  color: var(--ag-ink);
  font: 700 1.05rem/1.2 var(--font-display, inherit);
  font-variant-numeric: tabular-nums;
}
.ag-roster-card__pay-sub { color: var(--ag-ink-faint); font: 500 0.68rem/1.2 var(--font-body, inherit); }

.ag-roster-card__actions { grid-area: actions; display: flex; align-items: center; gap: 0.4rem; }

@media (max-width: 1180px) {
  .ag-roster { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  .ag-roster-card {
    grid-template-columns: 1fr auto;
    grid-template-areas: "id pay" "contract contract" "actions actions";
    align-items: start;
    gap: 0.9rem 1rem;
  }
  .ag-roster-card:has(.ag-select) { padding-left: 1.35rem; padding-top: 2.4rem; }
  .ag-select { top: 0.95rem; left: 1.35rem; transform: none; }
  .ag-roster-card__actions { justify-content: flex-end; padding-top: 0.75rem; border-top: 1px dashed var(--ag-edge); }
  .ag-roster-card__actions .ag-btn--primary { margin-right: auto; }
}
@media (max-width: 520px) {
  .ag-roster { grid-template-columns: 1fr; }
  .ag-roster-card { grid-template-columns: 1fr; grid-template-areas: "id" "contract" "pay" "actions"; }
  .ag-roster-card__pay { justify-items: start; text-align: left; }
}

/* ==========================================================================
   Gestión humana · Credenciales (vista Tarjetas)
   Misma familia que las fichas de usuarios: banda, avatar superpuesto,
   anillo de vigencia y talón perforado.
   ========================================================================== */
.hr-cred-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 0.7rem;
  align-items: stretch;
  width: 100%;
  margin: 0.15rem 0 0.7rem;
}

.hr-cred {
  --hr-tone: #1d5a96;
  --hr-cred-bg: var(--ag-surface, #fff);
  --ag-tone: var(--hr-tone);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid var(--ag-edge);
  border-radius: 20px;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--hr-tone) 12%, transparent), transparent 46%),
    var(--hr-cred-bg);
  box-shadow: var(--ag-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.hr-cred--ok { --hr-tone: #12a172; }
.hr-cred--warn { --hr-tone: #d98a00; }
.hr-cred--alert { --hr-tone: #e03131; }
.hr-cred--unlinked { --hr-tone: #64748b; }
.hr-cred--neutral { --hr-tone: #1d5a96; }
.hr-cred:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--hr-tone) 42%, var(--ag-edge));
  box-shadow: 0 22px 40px -22px color-mix(in srgb, var(--hr-tone) 55%, rgba(11, 33, 56, 0.28));
}
.hr-cred:has(.ag-menu[open]) { z-index: 6; overflow: visible; transform: none; }
.hr-cred:has(.ag-select input:checked) {
  border-color: color-mix(in srgb, var(--hr-tone) 70%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hr-tone) 22%, transparent);
}
.hr-cred--unlinked .ag-avatar { filter: grayscale(0.85); opacity: 0.8; }
.hr-cred--unlinked .hr-cred__name { color: var(--ag-ink-soft); }

.hr-cred .ag-select.hr-cred__pick {
  position: static;
  top: auto;
  right: auto;
  left: auto;
  z-index: 1;
  flex: none;
  transform: none;
}
.hr-cred .ag-select span {
  border-color: var(--ag-edge-strong);
  background: var(--ag-surface, #fff);
}

.hr-cred__band {
  height: 40px;
  flex: none;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--hr-tone) 82%, #0b2138), var(--hr-tone)),
    repeating-linear-gradient(-28deg, transparent, transparent 10px, rgba(255, 255, 255, 0.07) 10px, rgba(255, 255, 255, 0.07) 11px);
}

.hr-cred__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 2.6rem;
  margin-top: -1.35rem;
  padding: 0 0.85rem;
}
.hr-cred__head .ag-avatar {
  flex: none;
  box-shadow: 0 0 0 4px var(--hr-cred-bg), 0 10px 20px -12px rgba(11, 33, 56, 0.45);
}
.hr-cred__head-meta {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-bottom: 0.15rem;
}
.hr-cred__head-meta .ag-status {
  background: var(--hr-cred-bg);
  box-shadow: 0 1px 2px rgba(11, 33, 56, 0.08);
}
.hr-cred__who {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  padding: 0.35rem 0.85rem 0;
}
.hr-cred__name {
  display: -webkit-box;
  margin: 0;
  min-height: 0;
  overflow: hidden;
  color: var(--ag-ink);
  font: 700 0.92rem/1.25 var(--font-display, inherit);
  letter-spacing: -0.02em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.hr-cred__org,
.hr-cred__mail {
  margin: 0;
  overflow: hidden;
  color: var(--ag-ink-faint);
  font: 600 0.78rem/1.35 var(--font-body, inherit);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hr-cred__org {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  color: var(--primary, #1d5a96);
  font-weight: 650;
}
.hr-cred__org > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hr-cred__vehicle {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(var(--primary-rgb, 55, 124, 192), 0.1);
  color: var(--primary, #1d5a96);
  font: 700 0.66rem/1 var(--font-body, inherit);
}
.hr-cred__vehicle svg { width: 0.78rem; height: 0.78rem; }
.hr-cred__mail { color: var(--ag-ink-soft); font-weight: 500; }

.hr-cred__meter {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 0;
  margin: 0.5rem 0.75rem 0;
  padding: 0.5rem 0.65rem;
  border: 1px dashed color-mix(in srgb, var(--hr-tone) 32%, var(--ag-edge));
  border-radius: 12px;
  background: color-mix(in srgb, var(--hr-tone) 7%, var(--hr-cred-bg));
}
.hr-cred__meter::before,
.hr-cred__meter::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--hr-cred-bg);
  box-shadow: inset 0 0 0 1px var(--ag-edge);
  transform: translateY(-50%);
}
.hr-cred__meter::before { left: -6px; }
.hr-cred__meter::after { right: -6px; }

.hr-cred__gauge {
  display: grid;
  flex: none;
  justify-items: center;
  gap: 0.15rem;
  width: 3.5rem;
  overflow: hidden;
}
.hr-cred__gauge small {
  max-width: 100%;
  overflow: hidden;
  color: var(--ag-ink-faint);
  font: 700 0.62rem/1 var(--font-body, inherit);
  letter-spacing: 0.02em;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.hr-cred__ring {
  --pct: 0;
  display: grid;
  place-items: center;
  flex: none;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 50%;
  background: conic-gradient(var(--hr-tone) calc(var(--pct) * 1%), color-mix(in srgb, var(--hr-tone) 14%, #d7e4f2) 0);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hr-tone) 22%, transparent);
}
.hr-cred__ring--open {
  background: repeating-conic-gradient(from -8deg, var(--hr-tone) 0 10deg, color-mix(in srgb, var(--hr-tone) 16%, #d7e4f2) 10deg 16deg);
}
.hr-cred__ring::after {
  content: "";
  grid-area: 1 / 1;
  width: calc(100% - 9px);
  height: calc(100% - 9px);
  border-radius: 50%;
  background: var(--hr-cred-bg);
}
.hr-cred__ring > span {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.05rem;
  grid-area: 1 / 1;
  max-width: 2.4rem;
}
.hr-cred__ring strong {
  color: var(--ag-ink);
  font: 800 1.05rem/1 var(--font-display, inherit);
  font-variant-numeric: tabular-nums;
}

.hr-cred__facts {
  display: grid;
  gap: 0.28rem;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hr-cred__facts li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.45rem;
  min-width: 0;
}
.hr-cred__facts span {
  flex: none;
  color: var(--ag-ink-faint);
  font: 700 0.58rem/1 var(--font-body, inherit);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.hr-cred__facts strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ag-ink);
  font: 700 0.74rem/1.2 var(--font-body, inherit);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hr-cred__note {
  min-height: 0;
  margin: 0.35rem 0.85rem 0;
  overflow: hidden;
  color: var(--ag-ink-soft);
  font: 500 0.7rem/1.3 var(--font-body, inherit);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hr-cred__note--alert { color: var(--ag-alert, #e03131); font-weight: 700; }
.hr-cred__note--warn { color: color-mix(in srgb, var(--ag-warn, #d98a00) 85%, var(--ag-ink)); font-weight: 700; }

.hr-cred__foot {
  display: grid;
  gap: 0.4rem;
  margin-top: auto;
  padding: 0.5rem 0.75rem 0.65rem;
  border-top: 1px solid var(--ag-edge);
}
.hr-cred__contact {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.hr-cred__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  color: var(--ag-ink-soft);
  font: 600 0.78rem/1.2 var(--font-body, inherit);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}
.hr-cred__tel svg { width: 0.9rem; height: 0.9rem; flex: none; }
.hr-cred__tel--muted { opacity: 0.55; }
.hr-cred__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
}
.hr-cred__actions .ag-btn { padding: 0.4rem 0.7rem; font-size: 0.72rem; }

@media (max-width: 720px) {
  .hr-cred-grid { grid-template-columns: 1fr; }
}

/* Filtros: panel «Más filtros» */
.ag-filter-more { position: relative; align-self: flex-end; }
.ag-filter-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.15rem;
  padding: 0 0.75rem;
  border: 1px solid var(--pay-edge, var(--ag-edge));
  border-radius: 10px;
  background: var(--ag-surface);
  color: var(--ag-ink-soft);
  font: 700 0.78rem/1 var(--font-body, inherit);
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
}
.ag-filter-more > summary::-webkit-details-marker { display: none; }
.ag-filter-more > summary svg { width: 0.95rem; height: 0.95rem; }
.ag-filter-more > summary svg:last-child { transition: transform 0.15s ease; opacity: 0.7; }
.ag-filter-more[open] > summary svg:last-child { transform: rotate(180deg); }
.ag-filter-more.is-active > summary,
.ag-filter-more[open] > summary {
  border-color: rgba(var(--primary-rgb, 55, 124, 192), 0.45);
  color: var(--primary, #1d5a96);
}
.ag-filter-more__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--primary, #1d5a96);
  color: #fff;
  font-size: 0.66rem;
}
.ag-filter-more__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  display: grid;
  gap: 0.7rem;
  min-width: 250px;
  padding: 0.85rem;
  border: 1px solid var(--ag-edge);
  border-radius: 14px;
  background: var(--ag-surface);
  box-shadow: 0 22px 44px -18px rgba(11, 33, 56, 0.38);
  animation: ag-pop 0.14s ease-out;
}
.ag-filter-more__panel .payroll-contracts-filter select { width: 100%; }

/* ==========================================================================
   Transporte · Conductores
   ========================================================================== */
.ag-fleet { display: grid; gap: 1rem; }

.ag-fleet__head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem 2rem;
  padding: 1.35rem 1.5rem;
  overflow: hidden;
  border: 1px solid var(--ag-edge);
  border-radius: 20px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(var(--primary-rgb, 55, 124, 192), 0.14), transparent 55%),
    linear-gradient(180deg, var(--ag-surface), color-mix(in srgb, var(--ag-sunken) 70%, var(--ag-surface)));
  box-shadow: var(--ag-shadow);
}
.ag-fleet__head::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 260px;
  height: 160px;
  border-radius: 50%;
  background: repeating-linear-gradient(-45deg, rgba(var(--primary-rgb, 55, 124, 192), 0.07) 0 2px, transparent 2px 12px);
  pointer-events: none;
}
.ag-eyebrow {
  margin: 0 0 0.25rem;
  color: var(--primary, #1d5a96);
  font: 700 0.68rem/1 var(--font-body, inherit);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.ag-fleet__title h2 {
  margin: 0;
  color: var(--ag-ink);
  font: 700 1.55rem/1.15 var(--font-display, inherit);
  letter-spacing: -0.01em;
}
.ag-fleet__hint { max-width: 60ch; margin: 0.4rem 0 0; color: var(--ag-ink-soft); font-size: 0.8rem; line-height: 1.45; }

.ag-fleet__kpis { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ag-kpi {
  display: grid;
  gap: 0.15rem;
  min-width: 128px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--ag-edge);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ag-surface) 88%, transparent);
  backdrop-filter: blur(6px);
}
.ag-kpi--ring { display: flex; align-items: center; gap: 0.75rem; }
.ag-kpi__label { color: var(--ag-ink-faint); font: 700 0.64rem/1 var(--font-body, inherit); text-transform: uppercase; letter-spacing: 0.09em; }
.ag-kpi__value { color: var(--ag-ink); font: 700 1.35rem/1.1 var(--font-display, inherit); font-variant-numeric: tabular-nums; }
.ag-kpi__value small { color: var(--ag-ink-faint); font-size: 0.8rem; font-weight: 600; }
.ag-kpi__sub { color: var(--ag-ink-soft); font-size: 0.68rem; }
.ag-kpi--warn .ag-kpi__value { color: var(--ag-warn); }
.ag-kpi--alert { border-color: color-mix(in srgb, var(--ag-alert) 35%, transparent); }
.ag-kpi--alert .ag-kpi__value { color: var(--ag-alert); }
.ag-kpi--ok .ag-kpi__value { color: var(--ag-ok); }
.ag-ring {
  --pct: 0;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: conic-gradient(var(--ag-ok) calc(var(--pct) * 1%), var(--ag-edge) 0);
}
.ag-ring > span {
  display: grid;
  place-items: center;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 50%;
  background: var(--ag-surface);
  color: var(--ag-ink);
  font: 700 0.66rem/1 var(--font-display, inherit);
}

.ag-fleet__body {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--ag-edge);
  border-radius: 20px;
  background: var(--ag-surface);
  box-shadow: var(--ag-shadow);
}
.ag-fleet__controls { display: grid; gap: 0.7rem; }
.ag-fleet__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.ag-fleet__row--filters { justify-content: flex-start; }
.ag-fleet__view { display: inline-flex; gap: 0.3rem; }

.ag-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 12px;
  background: var(--ag-sunken);
  box-shadow: inset 0 0 0 1px var(--ag-edge);
}
.ag-seg__btn {
  --ag-tone: rgb(var(--primary-rgb, 55, 124, 192));
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ag-ink-soft);
  font: 600 0.78rem/1 var(--font-body, inherit);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.ag-seg__btn--available { --ag-tone: var(--ag-ok); }
.ag-seg__btn--busy { --ag-tone: var(--ag-busy); }
.ag-seg__btn--scheduled { --ag-tone: var(--ag-scheduled); }
.ag-seg__btn--offline { --ag-tone: var(--ag-off); }
.ag-seg__btn--all .ag-seg__dot { display: none; }
.ag-seg__dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--ag-tone); }
.ag-seg__count {
  min-width: 1.4rem;
  padding: 0.15rem 0.35rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ag-tone) 12%, transparent);
  color: color-mix(in srgb, var(--ag-tone) 80%, var(--ag-ink));
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.ag-seg__btn:hover { color: var(--ag-ink); }
.ag-seg__btn.is-active {
  background: var(--ag-surface);
  color: var(--ag-ink);
  box-shadow: 0 1px 2px rgba(11, 33, 56, 0.08), 0 4px 10px -6px rgba(11, 33, 56, 0.25);
}

.ag-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 260px;
  max-width: 420px;
  min-height: 2.35rem;
  padding: 0 0.8rem;
  border: 1px solid var(--ag-edge);
  border-radius: 11px;
  background: var(--ag-sunken);
  color: var(--ag-ink-faint);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ag-search:focus-within {
  border-color: rgba(var(--primary-rgb, 55, 124, 192), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 55, 124, 192), 0.14);
}
.ag-search svg { width: 1rem; height: 1rem; flex: none; }
.ag-search input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--ag-ink);
  font: 500 0.82rem/1 var(--font-body, inherit);
}

.ag-select-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.35rem;
  padding: 0 0.15rem 0 0.7rem;
  border: 1px solid var(--ag-edge);
  border-radius: 11px;
  background: var(--ag-surface);
  color: var(--ag-ink-faint);
}
.ag-select-chip svg { width: 0.95rem; height: 0.95rem; flex: none; }
.ag-select-chip select {
  max-width: 13rem;
  padding: 0.45rem 0.55rem 0.45rem 0.1rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ag-ink-soft);
  font: 600 0.78rem/1 var(--font-body, inherit);
  cursor: pointer;
}
.ag-select-chip.is-set {
  border-color: rgba(var(--primary-rgb, 55, 124, 192), 0.45);
  background: rgba(var(--primary-rgb, 55, 124, 192), 0.07);
  color: var(--primary, #1d5a96);
}
.ag-select-chip.is-set select { color: var(--primary, #1d5a96); }

/* Tarjeta «pase» del conductor */
.ag-pass-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.9rem;
}
.ag-pass {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid var(--ag-edge);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ag-tone) 9%, transparent), transparent 92px),
    var(--ag-surface);
  box-shadow: var(--ag-shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.ag-pass::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--ag-tone);
}
.ag-pass:hover { transform: translateY(-2px); border-color: var(--ag-edge-strong); box-shadow: var(--ag-shadow-hover); }

.ag-pass__head { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.ag-pass__who { flex: 1; min-width: 0; }
.ag-pass__name {
  margin: 0;
  overflow: hidden;
  color: var(--ag-ink);
  font: 700 0.96rem/1.25 var(--font-display, inherit);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ag-pass__meta {
  margin: 0.15rem 0 0;
  overflow: hidden;
  color: var(--ag-ink-faint);
  font: 500 0.72rem/1.3 var(--font-body, inherit);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ag-pass__head .ag-status { align-self: flex-start; }

/* Franja de licencia con muescas de credencial */
.ag-pass__license {
  --ag-lic: var(--ag-ok);
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  padding: 0.7rem 0.8rem;
  border: 1px dashed var(--ag-edge-strong);
  border-radius: 12px;
  background: var(--ag-sunken);
}
.ag-pass__license::before,
.ag-pass__license::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ag-surface);
  box-shadow: inset 0 0 0 1px var(--ag-edge-strong);
  transform: translateY(-50%);
}
.ag-pass__license::before { left: -7px; clip-path: inset(0 0 0 50%); }
.ag-pass__license::after { right: -7px; clip-path: inset(0 50% 0 0); }
.ag-pass__license--warn { --ag-lic: var(--ag-warn); }
.ag-pass__license--alert { --ag-lic: var(--ag-alert); }
.ag-pass__cat {
  display: grid;
  place-items: center;
  min-width: 2.7rem;
  padding: 0 0.4rem;
  border-radius: 9px;
  background: linear-gradient(160deg, #1f2f44, #0d1a2a);
  color: #f6d365;
  font: 800 0.95rem/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 1px rgba(246, 211, 101, 0.35);
}
.ag-pass__license-body { display: grid; flex: 1; gap: 0.35rem; min-width: 0; }
.ag-pass__license-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ag-pass__license-num {
  overflow: hidden;
  color: var(--ag-ink);
  font: 700 0.8rem/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ag-pass__doc {
  --ag-tone: var(--ag-ok);
  flex: none;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ag-tone) 13%, transparent);
  color: color-mix(in srgb, var(--ag-tone) 85%, var(--ag-ink));
  font: 800 0.6rem/1 var(--font-body, inherit);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ag-pass__doc--warn { --ag-tone: var(--ag-warn); }
.ag-pass__doc--alert { --ag-tone: var(--ag-alert); }
.ag-meter { height: 5px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--ag-lic) 14%, transparent); }
.ag-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--ag-lic); transition: width 0.4s ease; }
.ag-pass__license-foot {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--ag-ink-faint);
  font: 600 0.68rem/1.2 var(--font-body, inherit);
}
.ag-pass__license-foot span:first-child { color: color-mix(in srgb, var(--ag-lic) 75%, var(--ag-ink)); }

.ag-pass__checks { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; }
.ag-check {
  --ag-tone: var(--ag-ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ag-ink-soft);
  font: 600 0.72rem/1.2 var(--font-body, inherit);
}
.ag-check svg { width: 0.9rem; height: 0.9rem; color: var(--ag-tone); }
.ag-check--ok { --ag-tone: var(--ag-ok); }
.ag-check--warn { --ag-tone: var(--ag-warn); color: color-mix(in srgb, var(--ag-warn) 70%, var(--ag-ink)); }
.ag-pass__vehicles { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.ag-pass__trip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  border-radius: 11px;
  background: color-mix(in srgb, var(--ag-tone) 9%, transparent);
  box-shadow: inset 3px 0 0 var(--ag-tone);
}
.ag-pass__trip-ico { display: grid; place-items: center; color: var(--ag-tone); }
.ag-pass__trip-ico svg { width: 1.05rem; height: 1.05rem; }
.ag-pass__trip--idle .ag-status__dot { margin: 0 0.15rem; }
.ag-pass__trip-copy { display: grid; flex: 1; gap: 0.1rem; min-width: 0; }
.ag-pass__trip-copy strong { color: var(--ag-ink); font: 700 0.78rem/1.2 var(--font-display, inherit); }
.ag-pass__trip-copy span {
  overflow: hidden;
  color: var(--ag-ink-soft);
  font: 500 0.72rem/1.3 var(--font-body, inherit);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ag-pass__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ag-edge);
}
.ag-pass__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  overflow: hidden;
  color: var(--ag-ink-soft);
  font: 600 0.76rem/1 var(--font-body, inherit);
  text-decoration: none;
  white-space: nowrap;
}
.ag-pass__phone svg { width: 0.95rem; height: 0.95rem; flex: none; color: var(--ag-ink-faint); }
a.ag-pass__phone:hover { color: var(--primary, #1d5a96); }
.ag-pass__phone--muted { color: var(--ag-ink-faint); font-style: italic; }
.ag-pass__actions { display: flex; align-items: center; gap: 0.35rem; flex: none; }

/* Vista lista */
.ag-fleet-table-wrap { overflow-x: auto; border: 1px solid var(--ag-edge); border-radius: 14px; }
.ag-table { width: 100%; border-collapse: collapse; font-family: var(--font-body, inherit); }
.ag-table thead th {
  position: sticky;
  top: 0;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--ag-edge);
  background: var(--ag-sunken);
  color: var(--ag-ink-faint);
  font-size: 0.66rem;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  white-space: nowrap;
}
.ag-table tbody td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--ag-edge);
  color: var(--ag-ink);
  font-size: 0.8rem;
  vertical-align: middle;
}
.ag-table tbody tr:last-child td { border-bottom: 0; }
.ag-table tbody tr { transition: background 0.12s ease; }
.ag-table tbody tr:hover { background: rgba(var(--primary-rgb, 55, 124, 192), 0.04); }
.ag-row td:first-child { box-shadow: inset 3px 0 0 var(--ag-tone, transparent); }
.ag-row--available { --ag-tone: var(--ag-ok); }
.ag-row--busy { --ag-tone: var(--ag-busy); }
.ag-row--scheduled { --ag-tone: var(--ag-scheduled); }
.ag-row--offline { --ag-tone: var(--ag-off); }
.ag-row__who { display: flex; align-items: center; gap: 0.65rem; min-width: 220px; }
.ag-row__who strong { display: block; font: 700 0.84rem/1.25 var(--font-display, inherit); }
.ag-row__who span,
.ag-row__sub { display: block; color: var(--ag-ink-faint); font-size: 0.7rem; line-height: 1.3; }
.ag-row__mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
.ag-row__strong { display: block; font-weight: 700; }
.ag-row__tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.ag-row__actions { white-space: nowrap; text-align: right; }
.ag-row__actions .ag-icon-btn { width: 2rem; height: 2rem; }

@media (max-width: 860px) {
  .ag-fleet__head { grid-template-columns: 1fr; padding: 1.1rem; }
  .ag-fleet__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-fleet__body { padding: 0.75rem; }
  .ag-search { max-width: none; flex-basis: 100%; }
  .ag-seg { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
}
@media (max-width: 720px) {
  .ag-table thead { display: none; }
  .ag-table, .ag-table tbody, .ag-table tr, .ag-table td { display: block; width: 100%; }
  .ag-table tbody tr { padding: 0.6rem 0.4rem; border-bottom: 1px solid var(--ag-edge); }
  .ag-table tbody td { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.3rem 0.5rem; border: 0; }
  .ag-table tbody td::before { content: attr(data-label); color: var(--ag-ink-faint); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; }
  .ag-table tbody td:first-child::before { content: none; }
  .ag-row td:first-child { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-pass, .ag-roster-card, .hr-cred, .ag-menu__panel, .ag-filter-more__panel, .ag-status__dot { animation: none !important; transition: none !important; }
  .hr-cred:hover { transform: none; }
  .ag-pass:hover { transform: none; }
}

/* ---------- Tema oscuro: superficies ---------- */
body[data-theme="dark"] .ag-roster-card,
body[data-theme="dark"] .ag-pass,
body[data-theme="dark"] .ag-fleet__body {
  background-color: rgba(15, 28, 46, 0.88);
}
body[data-theme="dark"] .hr-cred {
  --hr-cred-bg: rgba(15, 28, 46, 0.92);
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--hr-tone) 22%, transparent), transparent 46%),
    var(--hr-cred-bg);
}
body[data-theme="dark"] .hr-cred__ring::after,
body[data-theme="dark"] .hr-cred__meter::before,
body[data-theme="dark"] .hr-cred__meter::after {
  background: rgba(15, 28, 46, 0.92);
}
body[data-theme="dark"] .ag-fleet__head {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(96, 165, 250, 0.16), transparent 55%),
    rgba(15, 28, 46, 0.9);
}
body[data-theme="dark"] .ag-kpi { background: rgba(10, 20, 34, 0.6); }
body[data-theme="dark"] .ag-menu__panel,
body[data-theme="dark"] .ag-filter-more__panel {
  background: #13243a;
  box-shadow: 0 22px 44px -16px rgba(0, 0, 0, 0.8);
}
body[data-theme="dark"] .ag-btn--primary { background: #2f74c0; }
body[data-theme="dark"] .ag-icon-btn,
body[data-theme="dark"] .ag-select-chip,
body[data-theme="dark"] .ag-filter-more > summary { background: rgba(10, 20, 34, 0.7); }
body[data-theme="dark"] .ag-roster-card__role,
body[data-theme="dark"] .ag-eyebrow,
body[data-theme="dark"] .ag-tag--vehicle,
body[data-theme="dark"] .ag-link-btn { color: #7db8f2; }
body[data-theme="dark"] .ag-seg__btn.is-active { background: rgba(148, 196, 255, 0.1); box-shadow: none; }