/* ═══════════════════════════════════════════════════════════════════
   Portal & app — responsive + zoom
   Capa final: adapta layout al espacio real (viewport, zoom, sidebar).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Base: zoom del navegador y texto ── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── Shell del portal ── */
body.portal-mode {
  overflow-x: clip;
}

body.portal-mode .portal-layout {
  min-width: 0;
  height: 100dvh;
  min-height: 100dvh;
}

@media (max-width: 920px) {
  body.portal-mode .portal-layout {
    grid-template-rows: minmax(0, 1fr);
  }

  body.portal-mode .portal-main {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    height: 100%;
    max-height: 100dvh;
  }

  /* Dashboard oculta el header del portal; en móvil hace falta el botón ☰. */
  body.portal-mode .portal-main:has(.dashboard-studio) .portal-header {
    display: block;
    margin: 0 0 0.35rem;
  }

  body.portal-mode .portal-main:has(.dashboard-studio) .portal-header-bar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
  }

  body.portal-mode .portal-main:has(.dashboard-studio) .portal-header-bar h1,
  body.portal-mode .portal-main:has(.dashboard-studio) .portal-header .kpi-grid {
    display: none;
  }
}

body.portal-mode .sidebar,
body.portal-mode .portal-main,
body.portal-mode .portal-header,
body.portal-mode #view-root,
body.portal-mode .kpi-grid {
  min-width: 0;
  max-width: 100%;
}

body.portal-mode .portal-main {
  container-type: inline-size;
  container-name: portal-main;
  padding: clamp(0.85rem, 1.6vw, 1.8rem) clamp(0.85rem, 2.2vw, 2rem);
}

/* Capa comun de congruencia visual entre modulos del portal. */
.portal-main :where(
  .requests-studio,
  .transport-studio,
  .vehicles-studio,
  .drivers-studio,
  .calendar-studio,
  .history-studio,
  .reports-studio,
  .payroll-studio,
  .hiring-studio,
  .sst-studio,
  .b2b-studio,
  .admin-users-studio,
  .authorizations-studio,
  .profile-studio,
  .notifications-studio
) {
  display: grid;
  gap: clamp(0.8rem, 1.35vw, 1.15rem);
  min-width: 0;
}

.portal-main :where(.fleet-hero-strip, .users-hero-strip, .ntf-studio-head) {
  margin-bottom: 0;
  border: 1px solid color-mix(in srgb, var(--module-accent-start, var(--primary, #377cc0)) 16%, rgba(15, 35, 70, 0.1));
  box-shadow: 0 12px 28px rgba(15, 35, 70, 0.12);
}

.portal-main :where(.p-card, .table-wrap, .ntf-data-panel, .auth-queue-section, .reports-workspace, .requests-data-panel) {
  border-radius: 16px;
  border-color: color-mix(in srgb, var(--module-accent-start, var(--primary, #377cc0)) 12%, #d9e2ee);
  box-shadow: 0 8px 24px rgba(15, 35, 70, 0.08);
}

.portal-main :where(.p-card-header, .requests-data-head, .auth-queue-section-head, .ntf-studio-head) {
  gap: 0.75rem;
}

.portal-main :where(.toolbar, .ops-filters-bar, .reports-workspace-tabs, .ntf-toolbar, .b2b-leads-toolbar) {
  border-radius: 14px;
}

.portal-main :where(.empty-state) {
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--module-accent-start, var(--primary, #377cc0)) 24%, #d7e2ef);
  background: linear-gradient(135deg, rgba(55, 124, 192, 0.06), rgba(131, 190, 233, 0.09));
}

.portal-main :where(.btn, .btn-sm, .btn-action, .btn-outline, .btn-primary) {
  min-width: 0;
}

body[data-theme="dark"] .portal-main :where(.fleet-hero-strip, .users-hero-strip, .ntf-studio-head) {
  border-color: rgba(148, 196, 255, 0.16);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

body[data-theme="dark"] .portal-main :where(.p-card, .table-wrap, .ntf-data-panel, .auth-queue-section, .reports-workspace, .requests-data-panel) {
  border-color: rgba(148, 196, 255, 0.14);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

body[data-theme="dark"] .portal-main :where(.empty-state) {
  border-color: rgba(148, 196, 255, 0.18);
  background: linear-gradient(135deg, rgba(21, 52, 82, 0.46), rgba(13, 32, 54, 0.5));
}

body.portal-mode .portal-header h1 {
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.6rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

body.portal-mode .portal-header-bar {
  flex-wrap: wrap;
}

body.portal-mode .kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
}

/* Sidebar fluido en escritorio (zoom / pantallas estrechas) */
@media (min-width: 921px) {
  body.portal-mode:not(.portal-sidebar-collapsed) {
    --portal-sidebar-rail-width: clamp(220px, 17vw, var(--portal-sidebar-rail-width-expanded));
  }

  @media (max-width: 1280px) {
    body.portal-mode:not(.portal-sidebar-collapsed) {
      --portal-sidebar-rail-width: clamp(200px, 15vw, 260px);
    }
  }

  /* En pantallas medianas el menú expandido se mantiene a lo ancho (con
     etiquetas visibles), solo un poco más compacto, para que la flechita
     siempre ensanche/contraiga de verdad. La contracción a modo rail queda
     a cargo del botón <-> (estado .portal-sidebar-collapsed). */
  @media (max-width: 1160px) {
    body.portal-mode:not(.portal-sidebar-collapsed) {
      --portal-sidebar-rail-width: clamp(196px, 19vw, 240px);
    }
  }
}

/* ── Contenedor principal: responde al ancho útil (sidebar incluido) ── */
@container portal-main (max-width: 980px) {
  .hr-workspace-header {
    flex-direction: column;
    align-items: stretch;
  }

  .hr-workspace-header__switch {
    max-width: none;
    width: 100%;
  }

  .dashboard-studio .dash-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-studio .dash-command-center,
  .dashboard-studio .dash-analytics,
  .dashboard-studio .dash-layout,
  .dashboard-studio .dash-layout--fleet {
    grid-template-columns: 1fr;
  }

  .dashboard-studio .dash-side {
    position: static;
    grid-template-columns: 1fr 1fr;
  }

  .hiring-executive-strip,
  .payroll-executive-strip,
  .module-shell-head {
    flex-direction: column;
    align-items: stretch;
  }

  .hiring-strip-metrics {
    min-width: 0;
    width: 100%;
  }

  .requests-studio .requests-data-layout--admin {
    grid-template-columns: 1fr;
  }

  .requests-studio .requests-data-sidebar {
    position: static;
    max-height: none;
  }

  .portal-main .portal-ops-cards,
  .portal-main .trip-ops-cards,
  .portal-main .request-ops-cards,
  .portal-main .directory-grid,
  .portal-main .payroll-run-cards-grid,
  .portal-main .b2b-leads-mosaic,
  .portal-main .vehicle-ops-cards,
  .portal-main .drivers-ops-cards,
  .portal-main .employees-grid,
  .portal-main .hiring-cards.hiring-cards--candidates {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
  }

  .payroll-studio .payroll-section-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-studio .dash-metrics-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container portal-main (max-width: 720px) {
  .hr-workspace-tab--switch .hr-workspace-tab-hint {
    display: none;
  }

  .hr-workspace-tab--switch {
    min-width: 0;
    min-height: 2.55rem;
  }

  .dashboard-studio .dash-kpi-grid,
  .dashboard-studio .dash-exec-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-studio .dash-side,
  .dashboard-studio .dash-metrics-cards,
  .dashboard-studio .dash-client-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-studio .dash-hero--tower {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "aside";
  }

  .ops-command-bar,
  .module-panel-toolbar,
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .ops-command-cluster,
  .module-panel-actions__bar {
    width: 100%;
  }

  .users-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-main .portal-ops-cards,
  .portal-main .trip-ops-cards,
  .portal-main .request-ops-cards,
  .transport-studio .trip-ops-cards,
  .transport-studio .request-ops-cards,
  .transport-studio .vehicle-ops-cards,
  .transport-studio .drivers-ops-cards,
  .requests-studio .requests-data-results .trip-ops-cards,
  .requests-studio .requests-data-results .request-ops-cards,
  .portal-main .directory-grid,
  .portal-main .payroll-run-cards-grid,
  .portal-main .b2b-leads-mosaic,
  .portal-main .vehicle-ops-cards,
  .portal-main .drivers-ops-cards,
  .portal-main .employees-grid,
  .portal-main .hiring-cards.hiring-cards--candidates {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
  }

  .dashboard-studio .dash-metrics-cards,
  .payroll-studio .payroll-section-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-main .requests-data-results,
  .portal-main .transport-data-pane__body,
  .portal-main .transport-data-panes,
  .portal-main .transport-data-panel,
  .portal-main .transport-operate__main,
  .portal-main .payroll-operate__main,
  .portal-main .b2b-operate__main,
  .portal-main .notifications-studio .ntf-list,
  .portal-main .authorizations-studio .aut-operate__main,
  .portal-main .history-studio .history-operate__main,
  .portal-main .reports-studio .rpt-operate__main,
  .portal-main .admin-users-list-shell {
    min-width: 0;
    overflow-x: clip;
  }

  .notifications-studio .ntf-card {
    grid-template-columns: auto 1fr;
  }

  .notifications-studio .ntf-card__actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@container portal-main (max-width: 480px) {
  .dashboard-studio .dash-kpi-grid,
  .dashboard-studio .dash-exec-strip,
  .users-hero {
    grid-template-columns: 1fr;
  }

  .payroll-studio .payroll-section-cards,
  .dashboard-studio .dash-metrics-cards {
    grid-template-columns: 1fr;
  }
}

/* ── Tablas y grids: scroll horizontal antes que desbordar ── */
.portal-main .table-wrap,
.portal-main .trips-table-wrap,
.portal-main .transport-exec-table-wrap,
.portal-main .route-rates-table-wrap,
.portal-main .requests-table-wrap,
.portal-main .vehicles-table-wrap,
.portal-main .history-table-wrap,
.portal-main .history-report-table-wrap,
.payroll-shell .table-wrap,
.hiring-shell .table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.portal-main .dash-grid,
.portal-main .hiring-data-grid,
.portal-main .hiring-actions-grid,
.portal-main .payroll-data-grid,
.portal-main .p-form,
.profile-form {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
}

.hiring-data-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

/* ── Modales: zoom y safe-area ── */
.modal {
  padding: max(0.5rem, env(safe-area-inset-top, 0px))
    max(0.5rem, env(safe-area-inset-right, 0px))
    max(0.5rem, env(safe-area-inset-bottom, 0px))
    max(0.5rem, env(safe-area-inset-left, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal-card {
  width: min(640px, calc(100vw - 1.5rem));
  max-height: min(92dvh, calc(100dvh - 1.5rem));
  overflow-y: auto;
  margin: auto;
}

.modal-card-auth {
  width: min(760px, calc(100vw - 1rem));
  max-height: min(92dvh, calc(100dvh - 1rem));
}

.modal-card-edit,
.modal-card--discard,
.modal-card--payroll-bulk-result,
.modal-card-report-preview {
  width: min(720px, calc(100vw - 1.25rem));
  max-height: min(90dvh, calc(100dvh - 1.25rem));
}

#crud-modal .modal-card.modal-card-edit {
  max-height: min(92dvh, calc(100dvh - 1rem));
  overflow: hidden;
  padding-bottom: 0;
  --modal-card-pad-bottom: 0;
}

#crud-modal .modal-card.modal-card-edit.modal-card--detail-view {
  max-height: min(92dvh, calc(100dvh - 1rem));
}

.modal-edit-form,
.modal-body-lead {
  min-width: 0;
}

.modal-edit-form {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

@media (max-width: 720px) {
  .modal-card,
  .modal-card-edit,
  .modal-card--discard,
  .modal-card--payroll-bulk-result,
  .modal-card-report-preview {
    width: 100%;
    max-width: 100%;
    border-radius: 14px;
  }

  #crud-modal .modal-card.modal-card-edit,
  #crud-modal .modal-card.modal-card-edit.modal-card--detail-view {
    --modal-card-pad-x: 1rem;
    --modal-card-pad-top: 1rem;
    --modal-card-pad-bottom: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 14px;
  }

  #crud-modal .module-panel-actions--footer.modal-edit-actions .module-panel-actions__bar,
  .modal-card-edit .module-panel-actions--footer.modal-edit-actions .module-panel-actions__bar,
  .detail-view-footer .module-panel-actions__bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    padding: 0.8rem 1rem max(0.95rem, calc(0.8rem + env(safe-area-inset-bottom, 0px)));
  }

  #crud-modal .module-panel-actions--footer.modal-edit-actions .module-panel-actions__group--primary,
  #crud-modal .module-panel-actions--footer.modal-edit-actions .module-panel-actions__group--secondary,
  .detail-view-footer .module-panel-actions__group--primary,
  .detail-view-footer .module-panel-actions__group--secondary {
    width: 100%;
    margin-inline-start: 0;
    padding-inline-start: 0;
    justify-content: stretch;
  }

  #crud-modal .module-panel-actions--footer.modal-edit-actions .module-panel-actions__group--primary::before,
  .detail-view-footer .module-panel-actions__group--primary::before {
    display: none;
  }

  #crud-modal .module-panel-actions--footer.modal-edit-actions .btn,
  #crud-modal .module-panel-actions--footer.modal-edit-actions .module-panel-btn,
  #crud-modal .detail-view-close-btn,
  .detail-view-footer .btn,
  .detail-view-footer .module-panel-btn,
  .detail-view-footer .detail-view-close-btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .modal-info-layout--headless .modal-head--sr-only {
    top: max(0.25rem, env(safe-area-inset-top, 0px));
    right: max(0.25rem, env(safe-area-inset-right, 0px));
  }

  .detail-view-sheet__head {
    flex-direction: column;
    padding-right: 2.75rem;
  }

  #crud-modal .modal-card.modal-card-edit,
  #crud-modal .modal-card.modal-card-edit.modal-card--detail-view {
    padding: var(--modal-card-pad-top, 1rem) var(--modal-card-pad-x, 1rem) 0;
  }

  .modal-card:not(.modal-card--discard),
  .modal-card-edit:not(.modal-card--discard):not(.modal-card--detail-view),
  .modal-card--payroll-bulk-result,
  .modal-card-report-preview {
    padding: 1rem 0.85rem;
  }

  .modal-card--discard {
    padding: 0;
  }

  .modal-discard {
    padding: 0.25rem 1rem 1.1rem;
  }

  .modal-edit-actions.module-panel-actions,
  .modal-edit-actions:not(.module-panel-actions) {
    flex-direction: column;
    align-items: stretch;
  }

  .modal-edit-actions .btn,
  .modal-edit-actions .module-panel-actions__group {
    width: 100%;
    min-width: 0;
  }
}

/* ── Formularios de creación ── */
@container portal-main (max-width: 768px) {
  .antares-create-form > .hr-form-hero,
  .antares-create-form .transport-form--single > .hr-form-hero,
  .antares-create-form .acf-schedule__grid,
  .antares-create-form .datetime-group,
  .create-trip-form-v2__request-grid,
  .create-trip-form-v2__assign-row,
  .create-trip-form-v2__milestones {
    grid-template-columns: 1fr;
  }

  .antares-create-form .acf-schedule__grid {
    grid-template-rows: none;
  }

  .antares-create-form .acf-schedule-card {
    grid-row: auto;
    grid-template-rows: none;
  }

  .antares-create-form .acf-schedule-card__body {
    display: grid;
    gap: 0.7rem;
  }

  .antares-create-form .acf-schedule-field--date,
  .antares-create-form .acf-schedule-field--time {
    grid-row: auto;
  }

  .antares-create-form .acf-schedule__connector {
    grid-row: auto;
    flex-direction: row;
    padding: 0.5rem 0;
  }

  .antares-create-form .acf-schedule__connector-line {
    width: auto;
    height: 2px;
    min-height: 0;
    flex: 1 1 auto;
  }

  .create-trip-form-v2__preview-wrap {
    position: static;
    order: -1;
  }

  .antares-create-form .module-panel-actions__bar,
  .create-trip-form-v2__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .antares-create-form .antares-create-form__submit,
  .antares-create-form .create-trip-submit-btn,
  .create-trip-form-v2__submit {
    width: 100%;
    min-width: 0;
  }
}

/* ── Sitio público: grids y navegación ── */
.grid-2,
.grid-3,
.grid-4,
.coverage-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

@media (max-width: 920px) {
  .portal-main {
    padding: 1rem;
  }

  .portal-header-bar {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Registrar | Consultar: control segmentado compacto (no óvalos apilados). */
  .portal-main .hr-workspace-header {
    padding: 0.65rem 0.75rem;
    gap: 0.6rem;
  }

  .portal-main .hr-workspace-header__switch,
  .portal-main .hr-workspace-header__switch--actions {
    align-self: stretch !important;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .portal-main :where(
    .requests-studio,
    .transport-studio,
    .vehicles-studio,
    .drivers-studio,
    .history-studio,
    .payroll-studio,
    .hiring-studio
  ) .hr-workspace-header__switch {
    align-self: stretch !important;
  }

  .portal-main .hr-workspace-tabs--switch {
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    gap: 0.2rem;
    padding: 0.22rem;
    border-radius: 12px !important;
  }

  .portal-main .hr-workspace-tab--switch {
    flex: 1 1 0;
    min-width: 0 !important;
    width: auto !important;
    min-height: 2.35rem;
    padding: 0.38rem 0.55rem;
    border-radius: 9px !important;
    justify-content: center;
  }

  .portal-main .hr-workspace-tab--switch .hr-workspace-tab-body {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-align: center;
    min-width: 0;
  }

  .portal-main .hr-workspace-tab--switch .hr-workspace-tab-hint {
    display: none !important;
  }

  .portal-main .hr-workspace-tab--switch .hr-workspace-tab-ico {
    width: 1.3rem;
    height: 1.3rem;
    flex-shrink: 0;
    border-radius: 7px;
  }

  .portal-main .hr-workspace-tab--switch .hr-workspace-tab-label {
    font-size: 0.8rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .portal-main .payroll-workspace-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    gap: 0.2rem;
    padding: 0.22rem;
    border-radius: 12px;
    border: 1px solid var(--portal-ui-edge, rgba(55, 124, 192, 0.16));
    background: color-mix(in srgb, var(--portal-ui-card-solid, #fff) 82%, var(--primary-light, #cce5f8));
  }

  .portal-main .payroll-workspace-actions__btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 2.35rem;
    padding-inline: 0.45rem;
    border-radius: 9px !important;
    justify-content: center;
    font-size: 0.8rem;
  }

  .portal-main .payroll-workspace-actions__btn .btn-icon {
    width: 0.95rem;
    height: 0.95rem;
  }

  /* Rails de creación/consulta internos: fila compacta en lugar de tarjetas altas. */
  .portal-main :where(
    .requests-operate-nav,
    .transport-operate-nav,
    .vehicles-operate-nav,
    .payroll-operate-nav,
    .hiring-operate-nav
  ) {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .portal-main :where(
    .requests-operate-nav-tab,
    .transport-operate-nav-tab,
    .vehicles-operate-nav-tab,
    .payroll-operate-nav-tab,
    .hiring-operate-nav-tab
  ) {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: min(100%, 9.5rem);
    padding: 0.55rem 0.65rem;
    border-radius: 12px !important;
  }

  .portal-main :where(
    .requests-operate-nav-hint,
    .transport-operate-nav-hint,
    .vehicles-operate-nav-hint,
    .payroll-operate-nav-hint,
    .hiring-operate-nav-hint,
    .requests-operate-nav-norm,
    .transport-operate-nav-norm,
    .vehicles-operate-nav-norm,
    .payroll-operate-nav-norm,
    .hiring-operate-nav-norm
  ) {
    display: none;
  }
}

@media (max-width: 420px) {
  .portal-main .hr-workspace-tab--switch .hr-workspace-tab-ico {
    display: none;
  }

  .portal-main .payroll-workspace-actions__btn .btn-icon {
    display: none;
  }
}

@media (max-width: 640px) {
  .hero-stats,
  .grid-3,
  .grid-4,
  .coverage-grid {
    grid-template-columns: 1fr;
  }

  .users-hero {
    grid-template-columns: 1fr;
  }
}

/* ── Zoom: recorte con ellipsis (tarjetas compactas) ── */
.portal-main .trip-ops-card-item-value,
.portal-main .trip-ops-card-item dd,
.portal-main .trip-ops-card-route-node strong,
.portal-main .directory-card__fact dd,
.portal-main .directory-chip strong,
.portal-main .payroll-run-card-employee,
.portal-main .b2b-leads-meta dd {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal-main .trip-ops-card-title,
.portal-main .directory-card__title,
.portal-main .payroll-run-card-title,
.portal-main .b2b-leads-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.portal-main .trip-ops-card-status-block,
.portal-main .trip-ops-card-status-picker,
.portal-main .vehicle-availability-bar,
.portal-main .driver-trip-bar,
.portal-main .driver-availability-bar,
.portal-main .request-ops-card-trip {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 520px) {
  .portal-main .btn,
  .portal-main .btn-action,
  .portal-main .btn-sm {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }

  .hr-workspace-jump-btn.btn-primary {
    flex: 1 1 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Portal UX polish — cohesión visual transversal
   Alcance: módulos operativos, RRHH, perfiles, notificaciones y B2B.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --portal-ui-surface: #f4f8fc;
  --portal-ui-card: rgba(255, 255, 255, 0.94);
  --portal-ui-card-solid: #ffffff;
  --portal-ui-edge: rgba(55, 124, 192, 0.16);
  --portal-ui-edge-strong: rgba(55, 124, 192, 0.28);
  --portal-ui-text: #0b2138;
  --portal-ui-muted: #5b7188;
  --portal-ui-shadow: 0 18px 44px rgba(15, 35, 70, 0.1);
  --portal-ui-shadow-soft: 0 8px 24px rgba(15, 35, 70, 0.07);
  --portal-ui-radius: 18px;
  --portal-ui-radius-sm: 13px;
}

body[data-theme="dark"] {
  --portal-ui-surface: #071824;
  --portal-ui-card: rgba(13, 28, 48, 0.88);
  --portal-ui-card-solid: rgba(13, 28, 48, 0.96);
  --portal-ui-edge: rgba(148, 196, 255, 0.15);
  --portal-ui-edge-strong: rgba(148, 196, 255, 0.25);
  --portal-ui-text: #e8f4fc;
  --portal-ui-muted: #9eb8d8;
  --portal-ui-shadow: 0 22px 54px rgba(0, 0, 0, 0.32);
  --portal-ui-shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.24);
}

body.portal-mode .portal-main {
  background:
    radial-gradient(circle at 8% 0%, rgba(var(--primary-mid-rgb), 0.18), transparent 28rem),
    radial-gradient(circle at 100% 4%, rgba(var(--primary-rgb), 0.13), transparent 24rem),
    linear-gradient(180deg, color-mix(in srgb, var(--portal-ui-surface) 92%, #fff), var(--portal-ui-surface));
}

body[data-theme="dark"].portal-mode .portal-main {
  background:
    radial-gradient(circle at 10% 0%, rgba(var(--primary-mid-rgb), 0.14), transparent 28rem),
    radial-gradient(circle at 100% 4%, rgba(var(--primary-rgb), 0.18), transparent 24rem),
    linear-gradient(180deg, #071824 0%, #081421 100%);
}

.portal-main :where(
  .requests-studio,
  .transport-studio,
  .vehicles-studio,
  .drivers-studio,
  .calendar-studio,
  .history-studio,
  .reports-studio,
  .payroll-studio,
  .hiring-studio,
  .sst-studio,
  .b2b-studio,
  .admin-users-studio,
  .authorizations-studio,
  .profile-studio,
  .notifications-studio
) {
  isolation: isolate;
}

.portal-main :where(
  .fleet-hero-strip,
  .users-hero-strip,
  .ntf-studio-head,
  .reports-hero,
  .auth-hero,
  .profile-hero,
  .calendar-hero,
  .history-hero,
  .b2b-hero,
  .payroll-studio-head,
  .hiring-studio-head,
  .transport-studio-head,
  .vehicles-studio-head,
  .requests-studio-head,
  .sst-studio .p-card:first-child
) {
  position: relative;
  overflow: hidden;
  border-radius: clamp(16px, 1.2vw, 22px);
  border: 1px solid var(--portal-ui-edge-strong);
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb), 0.12), transparent 58%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(241, 248, 255, 0.88));
  box-shadow: var(--portal-ui-shadow);
}

.portal-main :where(
  .fleet-hero-strip,
  .users-hero-strip,
  .ntf-studio-head,
  .reports-hero,
  .auth-hero,
  .profile-hero,
  .calendar-hero,
  .history-hero,
  .b2b-hero,
  .payroll-studio-head,
  .hiring-studio-head,
  .transport-studio-head,
  .vehicles-studio-head,
  .requests-studio-head,
  .sst-studio .p-card:first-child
)::after {
  content: "";
  position: absolute;
  inset: auto -8% -42% auto;
  width: min(24rem, 58%);
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(var(--primary-mid-rgb), 0.2), transparent 68%);
  pointer-events: none;
}

body[data-theme="dark"] .portal-main :where(
  .fleet-hero-strip,
  .users-hero-strip,
  .ntf-studio-head,
  .reports-hero,
  .auth-hero,
  .profile-hero,
  .calendar-hero,
  .history-hero,
  .b2b-hero,
  .payroll-studio-head,
  .hiring-studio-head,
  .transport-studio-head,
  .vehicles-studio-head,
  .requests-studio-head,
  .sst-studio .p-card:first-child
) {
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb), 0.16), transparent 58%),
    linear-gradient(160deg, rgba(13, 28, 48, 0.98), rgba(9, 22, 38, 0.94));
}

.portal-main :where(.p-card, .table-wrap, .ntf-data-panel, .auth-queue-section, .reports-workspace, .requests-data-panel) {
  background: var(--portal-ui-card);
  border-color: var(--portal-ui-edge);
  box-shadow: var(--portal-ui-shadow-soft);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
}

.portal-main :where(.p-card, .portal-ops-card, .trip-ops-card, .directory-card:not(.directory-card--compact), .hiring-candidate-card, .ntf-card) {
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.portal-main :where(.p-card:hover, .portal-ops-card:hover, .trip-ops-card:hover, .directory-card:not(.directory-card--compact):hover, .hiring-candidate-card:hover, .ntf-card:hover) {
  border-color: var(--portal-ui-edge-strong);
  box-shadow: var(--portal-ui-shadow);
}

.portal-main :where(.p-card-header, .hr-action-card__head, .requests-data-head, .auth-queue-section-head, .modal-head) {
  border-bottom-color: var(--portal-ui-edge);
}

.portal-main :where(.p-card-header h2, .hr-action-card__copy h3, .modal-head h2, .detail-view-sheet__title) {
  color: var(--portal-ui-text);
  letter-spacing: -0.02em;
}

.portal-main :where(.p-card-header p, .hr-action-card__desc, .modal-head__subtitle, .detail-view-sheet__subtitle, .muted) {
  color: var(--portal-ui-muted);
}

.portal-main :where(
  .hr-workspace-tabs,
  .auth-tabs-bar,
  .reports-workspace-tabs,
  .payroll-data-nav,
  .payroll-workspace-actions,
  .hist-trace-module-filters,
  .ntf-filter-tabs,
  .ntf-filter-rail
) {
  border: 1px solid var(--portal-ui-edge);
  background: color-mix(in srgb, var(--portal-ui-card-solid) 82%, var(--primary-light));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 22px rgba(15, 35, 70, 0.06);
}

.portal-main :where(
  .hr-workspace-tab:not(.hr-workspace-tab--switch),
  .auth-tab-btn,
  .reports-workspace-tab,
  .payroll-data-nav-tab,
  .hist-trace-module-chip,
  .ntf-filter-tab,
  .ntf-filter-btn,
  .ntf-pref-toggle
) {
  border-radius: 999px;
}

.portal-main :where(
  .hr-workspace-tab.is-active,
  .auth-tab-btn.is-active,
  .reports-workspace-tab.is-active,
  .payroll-data-nav-tab.is-active,
  .hist-trace-module-chip.is-active,
  .ntf-filter-tab.is-active,
  .ntf-filter-btn--active
) {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 10px 24px rgba(var(--primary-rgb), 0.24);
}

.portal-main .notifications-studio :where(.ntf-pref-toggle) {
  min-height: 2.75rem;
  background: color-mix(in srgb, var(--portal-ui-card-solid) 82%, var(--primary-light));
  border-color: var(--portal-ui-edge);
  box-shadow: 0 8px 22px rgba(15, 35, 70, 0.07);
}

.portal-main .notifications-studio :where(.ntf-pref-toggle:not(.ntf-pref-toggle--off):not([disabled])) {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--portal-ui-edge));
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb), 0.09), transparent 60%),
    var(--portal-ui-card-solid);
}

.portal-main .notifications-studio :where(.ntf-pref-toggle__switch) {
  box-shadow: inset 0 1px 2px rgba(11, 33, 56, 0.22);
}

body[data-theme="dark"] .portal-main .notifications-studio :where(.ntf-pref-toggle) {
  background: rgba(8, 18, 32, 0.72);
  border-color: rgba(148, 196, 255, 0.16);
}

.portal-main :where(.form-section, .modal-edit-form label, .p-form label, .module-filter-field, .searchable-select) {
  border-radius: var(--portal-ui-radius-sm);
}

.portal-main :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .searchable-select-input,
  .native-trip-filter-input
) {
  border-color: color-mix(in srgb, var(--primary) 14%, var(--line, #d7e2ef));
  background: color-mix(in srgb, var(--portal-ui-card-solid) 96%, var(--primary-light));
  color: var(--portal-ui-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.portal-main :where(
  input:not([type="checkbox"]):not([type="radio"]):hover,
  select:hover,
  textarea:hover,
  .searchable-select-input:hover,
  .native-trip-filter-input:hover
) {
  border-color: color-mix(in srgb, var(--primary) 26%, var(--line, #d7e2ef));
}

.portal-main :where(
  input:not([type="checkbox"]):not([type="radio"]):focus,
  select:focus,
  textarea:focus,
  .searchable-select-input:focus,
  .native-trip-filter-input:focus
) {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line, #d7e2ef));
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

body[data-theme="dark"] .portal-main :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .searchable-select-input,
  .native-trip-filter-input
) {
  background: rgba(8, 18, 32, 0.82);
  border-color: rgba(148, 196, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.portal-main :where(.table-wrap) {
  overflow: auto;
}

.portal-main :where(table) {
  border-collapse: separate;
  border-spacing: 0;
}

.portal-main :where(thead th) {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--portal-ui-card-solid) 88%, var(--primary-light));
  color: color-mix(in srgb, var(--portal-ui-text) 86%, var(--primary));
  box-shadow: 0 1px 0 var(--portal-ui-edge);
}

.portal-main :where(tbody tr) {
  transition: background 0.16s ease, transform 0.16s ease;
}

.portal-main :where(tbody tr:hover) {
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}

body[data-theme="dark"] .portal-main :where(thead th) {
  background: color-mix(in srgb, rgba(13, 28, 48, 0.98) 88%, var(--primary));
}

.portal-main :where(.btn-primary, .trip-ops-card-btn--solid, .create-trip-submit-btn, .antares-create-form__submit) {
  background-image: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  border-color: color-mix(in srgb, var(--primary) 66%, #fff) !important;
  box-shadow: 0 10px 24px rgba(var(--primary-rgb), 0.24);
}

.portal-main :where(.btn-primary:hover, .trip-ops-card-btn--solid:hover, .create-trip-submit-btn:hover, .antares-create-form__submit:hover) {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(var(--primary-rgb), 0.3);
}

.portal-main :where(.btn-outline, .btn-action, .module-panel-btn, .trip-ops-card-btn--outline) {
  border-color: var(--portal-ui-edge);
  background: color-mix(in srgb, var(--portal-ui-card-solid) 86%, var(--primary-light));
}

.portal-main :where(.empty-state, .searchable-select-empty, .ntf-empty) {
  color: var(--portal-ui-muted);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

@container portal-main (max-width: 760px) {
  .portal-main :where(
    .fleet-hero-strip,
    .users-hero-strip,
    .ntf-studio-head,
    .reports-hero,
    .auth-hero,
    .profile-hero,
    .calendar-hero,
    .history-hero,
    .b2b-hero,
    .payroll-studio-head,
    .hiring-studio-head,
    .transport-studio-head,
    .vehicles-studio-head,
    .requests-studio-head
  ) {
    padding-inline: clamp(0.9rem, 4vw, 1.15rem);
  }

  .portal-main :where(.table-wrap) {
    border-radius: 14px;
  }

  .portal-main :where(.p-card, .portal-ops-card, .trip-ops-card, .ntf-card) {
    border-radius: 14px;
  }
}

/* ── Revisión UX profunda: formularios, tarjetas y estados ── */
:root {
  --portal-input-radius: 10px;
  --portal-field-card-bg: color-mix(in srgb, var(--portal-ui-card-solid, #fff) 96%, var(--primary-light, #cce5f8));
}

.portal-main :where(.form-section legend, #crud-form.p-form-colored.modal-edit-form .form-section legend) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  /* La regla base `.form-section legend` (color:#fff sobre chip degradado) tiene mayor
     especificidad; aquí ya quitamos ese fondo, así que forzamos un color legible según el tema. */
  color: var(--portal-ui-text) !important;
  letter-spacing: -0.01em;
  text-transform: none;
}

.portal-main :where(.form-section .muted, .form-section-grid + p.muted, .field-help, .emp-contract-duration-hint) {
  color: var(--portal-ui-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.portal-main :where(.form-section-grid .field-error, .modal-edit-form .field-error) {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 0.45rem;
  padding: 0.48rem 0.62rem;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, #d64545 20%, transparent);
  background: color-mix(in srgb, #d64545 7%, var(--portal-ui-card-solid, #fff));
  color: #b42323;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.4;
}

.portal-main :where(.form-section-grid .field-error, .modal-edit-form .field-error)::before {
  content: "!";
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  margin-top: 0.08rem;
  border-radius: 999px;
  background: #d64545;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

.portal-main :where(.modal-edit-form .form-section-grid label:has(.field-invalid), .p-form .form-section-grid label:has(.field-invalid)) {
  border-color: #d64545 !important;
  box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.14) !important;
}

.portal-main :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .searchable-select-input,
  .native-trip-filter-input,
  .acf-picker__open-btn,
  .acf-date-preset,
  .acf-time-preset,
  .acf-time-slot,
  .acf-cal__day
) {
  border-radius: var(--portal-input-radius);
}

.portal-main :where(
  .acf-picker__open-btn:focus-visible,
  .acf-date-preset:focus-visible,
  .acf-time-preset:focus-visible,
  .acf-time-slot:focus-visible,
  .acf-cal__day:focus-visible,
  .module-panel-btn:focus-visible,
  .trip-ops-card-btn:focus-visible,
  .ntf-pref-toggle:focus-visible,
  .ntf-filter-btn:focus-visible,
  .reports-workspace-tab:focus-visible,
  .auth-tab-btn:focus-visible
) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.portal-main :where(.antares-create-form .form-section-grid input, .antares-create-form .form-section-grid select, .antares-create-form .form-section-grid textarea) {
  box-shadow: none;
}

.portal-main :where(.antares-create-form__submit:disabled, .create-trip-submit-btn:disabled, .hr-form-wizard-submit:disabled) {
  filter: grayscale(0.35);
  transform: none !important;
  box-shadow: none;
}

body[data-theme="dark"] .portal-main :where(.form-section-grid .field-error, .modal-edit-form .field-error) {
  border-color: rgba(248, 113, 113, 0.24);
  background: rgba(127, 29, 29, 0.35);
  color: #fecaca;
}

.portal-main :where(.history-empty-state, .auth-inbox-empty .empty-state, .hiring-empty-state, .ntf-empty) {
  padding: 1rem 1.1rem;
  border-radius: var(--portal-ui-radius-sm);
  border: 1px dashed var(--portal-ui-edge-strong);
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb), 0.06), transparent 62%),
    var(--portal-field-card-bg);
}

.portal-main :where(.history-empty-state)::before {
  content: "";
  display: block;
  width: 2.35rem;
  height: 2.35rem;
  margin: 0 0 0.55rem;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb), 0.14), rgba(var(--primary-mid-rgb), 0.12)),
    var(--portal-ui-card-solid);
  box-shadow: inset 0 0 0 1px var(--portal-ui-edge);
}

.portal-main :where(.history-fleet-log-card, .profile-stat-card, .reports-studio .reports-export-grid .p-card) {
  position: relative;
  overflow: hidden;
  border-color: var(--portal-ui-edge);
  border-radius: var(--portal-ui-radius-sm);
  background: var(--portal-ui-card);
  box-shadow: var(--portal-ui-shadow-soft);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.portal-main :where(.history-fleet-log-card:hover, .profile-stat-card:hover, .reports-studio .reports-export-grid .p-card:hover) {
  transform: translateY(-2px);
  border-color: var(--portal-ui-edge-strong);
  box-shadow: var(--portal-ui-shadow);
}

.portal-main :where(.history-fleet-log-card::before, .profile-stat-card::before, .reports-studio .reports-export-grid .p-card::before) {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: inherit;
  background: var(--ops-card-accent, var(--primary));
  pointer-events: none;
}

.portal-main .trip-ops-card-item-value--value {
  color: color-mix(in srgb, var(--primary) 84%, var(--portal-ui-text)) !important;
  font-weight: 800;
}

.portal-main :where(.portal-ops-card-status-pill__text, .portal-ops-card-doc-pill, .status, .status-pretty) {
  white-space: normal;
}

.portal-main :where(.directory-card__actions, .ntf-card__actions) {
  gap: 0.45rem;
}

.portal-main :where(.directory-card__actions .btn, .ntf-card__actions .btn) {
  min-height: 2.05rem;
  border-radius: 10px;
  font-weight: 750;
}

.portal-main .ntf-card:hover {
  transform: translateY(-1px);
}

.portal-main .ntf-card__read-badge {
  border-radius: 999px;
  border: 1px solid var(--portal-ui-edge);
  background: color-mix(in srgb, #10b981 10%, var(--portal-ui-card-solid));
  color: #047857;
}

body[data-theme="dark"] .portal-main .ntf-card__read-badge {
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.28);
}

@container portal-main (max-width: 720px) {
  .portal-main :where(.modal-edit-form, .form-section-grid) {
    grid-template-columns: 1fr;
  }

  .portal-main :where(.history-fleet-log-grid, .admin-users-list-shell .user-grid, .user-grid, .reports-export-grid, .admin-users-insights-grid, .admin-users-command-grid) {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
  }

  .portal-main :where(.history-fleet-log-card, .profile-stat-card, .reports-studio .reports-export-grid .p-card) {
    border-radius: 14px;
  }
}

@container portal-main (max-width: 480px) {
  .portal-main :where(.acf-time-slots__grid, .acf-timepicker__grid--hours, .acf-timepicker__grid--minutes) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-main :where(.directory-card__actions, .ntf-card__actions, .reports-workspace-tabs) {
    flex-direction: column;
    align-items: stretch;
  }

  .portal-main :where(.directory-card__actions .btn, .ntf-card__actions .btn, .reports-workspace-tab) {
    width: 100%;
    justify-content: center;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   CORRECCIONES DE CONTRASTE — claro / oscuro
   Detectadas con scripts/ui-theme-audit.mjs. El revamp "module-ux-polish"
   (arriba) convirtió los hero-strips oscuros en paneles glass claros, pero el
   contenido interno seguía con la cromática del fondo azul original (texto
   blanco). Aquí se re-tonaliza para garantizar legibilidad (WCAG AA).
   ════════════════════════════════════════════════════════════════════════ */

/* —— 1. Chips de métricas de hero-strip en TEMA CLARO ——
   Por defecto los chips heredan texto blanco; sobre el panel glass quedan
   invisibles. Se les da fondo claro translúcido + texto legible. */
body:not([data-theme="dark"]) .portal-main :where(.fleet-hero-metric, .drivers-hero-metric) {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(55, 124, 192, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body:not([data-theme="dark"]) .portal-main :where(.fleet-hero-metric, .drivers-hero-metric) span {
  color: #50708f;
}

body:not([data-theme="dark"]) .portal-main :where(.fleet-hero-metric, .drivers-hero-metric) strong {
  color: #0b2138;
}

/* Variantes con tono (atención/alerta): se conserva el matiz, sólo se sube su
   opacidad para que el texto oscuro de arriba contraste bien. */
body:not([data-theme="dark"]) .portal-main :where(.fleet-hero-metric-warn, .drivers-hero-metric-warn) {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.34), rgba(251, 191, 36, 0.2));
  border-color: rgba(217, 119, 6, 0.4);
}

body:not([data-theme="dark"]) .portal-main :where(.fleet-hero-metric-alert, .drivers-hero-metric-alert) {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.34), rgba(254, 202, 202, 0.28));
  border-color: rgba(220, 38, 38, 0.42);
}

/* Nómina y Contratación mantienen el hero-strip con fondo oscuro (teal/índigo):
   sus chips siguen con texto blanco. */
body:not([data-theme="dark"]) .portal-main :where(.fleet-hero-strip--hr-payroll, .fleet-hero-strip--hr-hiring) .fleet-hero-metric {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

body:not([data-theme="dark"]) .portal-main :where(.fleet-hero-strip--hr-payroll, .fleet-hero-strip--hr-hiring) .fleet-hero-metric span {
  color: rgba(255, 255, 255, 0.86);
}

body:not([data-theme="dark"]) .portal-main :where(.fleet-hero-strip--hr-payroll, .fleet-hero-strip--hr-hiring) .fleet-hero-metric strong {
  color: #ffffff;
}

/* Notificaciones: métrica de atención en ámbar legible sobre glass claro. */
body:not([data-theme="dark"]) .portal-main .ntf-metric--warn dd {
  color: #b45309;
}

/* —— 2. Encabezados de hero-strips glass en TEMA CLARO —— */
body:not([data-theme="dark"]) .portal-main :where(
  .users-hero-strip, .reports-hero, .auth-hero, .profile-hero,
  .calendar-hero, .history-hero, .b2b-hero
) :where(h2, .fleet-hero-kicker, .users-hero-kicker, .drivers-hero-kicker, .notif-hero-kicker) {
  color: var(--portal-ui-text);
}

body:not([data-theme="dark"]) .portal-main :where(
  .users-hero-strip, .reports-hero, .auth-hero, .profile-hero,
  .calendar-hero, .history-hero, .b2b-hero
) > div > p,
body:not([data-theme="dark"]) .portal-main .admin-users-hero-main > p {
  color: var(--portal-ui-muted);
}

/* Panel "Acciones rápidas" del módulo Usuarios y permisos. */
body:not([data-theme="dark"]) .portal-main .admin-users-hero-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.66));
  border-color: rgba(55, 124, 192, 0.2);
}

body:not([data-theme="dark"]) .portal-main :where(.admin-users-hero-panel__eyebrow, .admin-users-hero-score span) {
  color: #50708f;
}

body:not([data-theme="dark"]) .portal-main :where(.admin-users-hero-panel__copy, .admin-users-hero-score p) {
  color: var(--portal-ui-text);
}

body:not([data-theme="dark"]) .portal-main .admin-users-hero-score strong {
  color: #0b2138;
}

/* —— 3. Navegación operativa por secciones en TEMA OSCURO ——
   La pestaña activa heredaba color de texto oscuro (diseñado para el fondo
   claro) y la micro-etiqueta normativa usaba tonos saturados ilegibles sobre
   oscuro. Se usa [class*=…] (el atributo de clase contiene "is-active", por lo
   que [class$=…] no casa) y `!important` para superar las reglas por sección
   (especificidad 0,4,0). */
body[data-theme="dark"] .portal-main [class*="-operate-nav-tab"].is-active {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.34), rgba(13, 26, 44, 0.96)) !important;
  border-color: rgba(96, 165, 250, 0.42) !important;
  color: #e8f1ff !important;
}

body[data-theme="dark"] .portal-main [class*="-operate-nav-tab"].is-active :where([class*="-operate-nav-label"], [class*="-operate-nav-hint"], [class*="-operate-nav-copy"]) {
  color: #dceafc !important;
}

body[data-theme="dark"] .portal-main [class*="-operate-nav-norm"] {
  background-color: rgba(148, 163, 184, 0.22) !important;
  color: #c9daf2 !important;
}

/* —— 4. Botones de panel secundarios en TEMA OSCURO ——
   El texto base (slate #475569) no contrasta sobre el fondo oscuro del botón. */
body[data-theme="dark"] .portal-main :where(.module-panel-toolbar, .module-panel-actions--footer) .module-panel-btn:not(.btn-primary) {
  color: #c3d2e6;
}

/* —— 5. Botón de acción (btn-action): texto blanco con contraste AA —— */
.portal-main .btn-action {
  background: linear-gradient(180deg, #5290d6 0%, #2f73b8 54%, #255a85 100%);
  color: #ffffff;
}

body[data-theme="dark"] .portal-main .btn-action {
  background: linear-gradient(180deg, #5290d6 0%, #2f6fb0 52%, #234e78 100%);
  color: #ffffff;
}

/* —— 6. Etiquetas auxiliares de baja intensidad en TEMA CLARO —— */
body:not([data-theme="dark"]) .portal-main :where(.directory-chip small, .directory-card__fact dt) {
  color: #5b7188;
}

body:not([data-theme="dark"]) .portal-main .profile-key-item > p {
  color: #5b7188;
}

body:not([data-theme="dark"]) .portal-main .empty-state p {
  color: #51677d;
}

body:not([data-theme="dark"]) .portal-main .profile-stat-card p {
  color: #5b7188;
}

body:not([data-theme="dark"]) .portal-main .acf-picker__placeholder {
  color: #647488;
}

/* —— 7. Insignias de encabezado de módulo en TEMA OSCURO ——
   Fondo de tinte al 10% (casi transparente sobre el panel oscuro) con texto
   índigo/azul saturado: se aclara el texto y se refuerza el fondo. */
body[data-theme="dark"] .portal-main :where(
  .hist-trace-hero__badge, .history-studio-head__badge,
  .hiring-studio-head__badge, .payroll-studio-head__badge
) {
  color: #c4d2f6;
  background-color: rgba(129, 140, 248, 0.2);
  border-color: rgba(129, 140, 248, 0.32);
}

/* —— 8. Cronograma de la solicitud (acf-schedule) en TEMA OSCURO ——
   Los badges/etiquetas usaban tonos saturados sobre tarjetas oscuras. */
body[data-theme="dark"] .portal-main .acf-schedule-card__badge--pickup {
  color: #9fbdf6;
}

body[data-theme="dark"] .portal-main .acf-schedule-card__badge--delivery {
  color: #5fd1a8;
}

body[data-theme="dark"] .portal-main :where(.acf-schedule-card__step, .acf-schedule__connector-chip) {
  color: #9db1c9;
}

body[data-theme="dark"] .portal-main .acf-schedule__connector--warn .acf-schedule__connector-chip {
  color: #f5c07a;
}

/* —— 9. Historial: token de acento índigo en TEMA OSCURO ——
   --trace-accent (#4338ca) es legible sobre superficies claras pero no sobre
   las oscuras; se aclara el token (afecta badge, contador, chips, etc.). */
body[data-theme="dark"] .history-studio.hist-trace-shell {
  --trace-accent: #a5b4fc;
  --trace-accent-soft: rgba(129, 140, 248, 0.2);
  --trace-accent-border: rgba(129, 140, 248, 0.34);
}

body[data-theme="dark"] .portal-main .history-studio.hist-trace-shell :where(.hist-trace-result-meta__label, .hist-trace-result-sort, .hist-trace-result-sort span) {
  color: #9fb2c9;
}