/* GestionRRHH unified design system
   Loaded after module styles so every screen shares one visual language. */
:root {
  /* Aliases exactos de la paleta corporativa definida en global.css. */
  --ui-brand-900: var(--color-secundario-5); /* #06415d */
  --ui-brand-800: var(--color-primario-1); /* #196189 */
  --ui-brand-700: var(--color-primario-1); /* #196189 */
  --ui-brand-600: var(--color-secundario-1); /* #3982a5 */
  --ui-brand-light: var(--color-secundario-4); /* #00a0ce */
  --ui-card-header-bg: var(--ui-brand-700);
  --ui-accent-600: var(--color-secundario-2); /* #069a74 */
  --ui-accent-500: var(--color-primario-2); /* #41c4aa */
  --ui-accent-100: #e5f7f2;
  --ui-ink-900: var(--color-secundario-3); /* #354b45 */
  --ui-ink-700: #3f596a;
  --ui-ink-500: #6c8190;
  --ui-surface: #ffffff;
  --ui-surface-soft: var(--color-fondo); /* #f8f9fa */
  --ui-surface-muted: #edf4f7;
  --ui-line: #d7e4ea;
  --ui-line-strong: #b9ccd5;
  --ui-danger: #a93646;
  --ui-warning: #a66a00;
  --ui-radius-sm: 0.5rem;
  --ui-radius: 0.75rem;
  --ui-radius-lg: 1rem;
  --ui-shadow-sm: 0 2px 8px rgba(7, 43, 61, 0.07);
  --ui-shadow: 0 10px 28px rgba(7, 43, 61, 0.1);
  --ui-focus: 0 0 0 0.2rem rgba(54, 191, 165, 0.24);
  --ui-control-height: 2.75rem;
  /* Escala tipográfica: cada nivel es deliberadamente mayor que el siguiente. */
  --ui-type-page: clamp(1.875rem, 3vw, 2.25rem);
  --ui-type-section: 1.375rem;
  --ui-type-card: 1.125rem;
  --ui-type-subheading: 1rem;
  --ui-type-body: 0.9375rem;
  --ui-type-control: 0.9rem;
  --ui-type-label: 0.75rem;
  --ui-type-caption: 0.75rem;
  --bs-primary: var(--ui-brand-700);
  --bs-primary-rgb: 25, 97, 137;
  --bs-border-color: var(--ui-line);
  --bs-body-color: var(--ui-ink-900);
  --bs-body-font-family: var(--fuente-secundaria);
}

body {
  color: var(--ui-ink-900);
  background-color: var(--ui-surface-soft);
  font-family: var(--fuente-secundaria);
  font-size: 1rem;
  line-height: 1.5;
}

body::before { opacity: 0.16; }

.content {
  padding: max(clamp(1rem, 2vw, 1.75rem), env(safe-area-inset-top))
    max(clamp(1rem, 2vw, 1.75rem), env(safe-area-inset-right))
    max(clamp(1rem, 2vw, 1.75rem), env(safe-area-inset-bottom))
    max(clamp(1rem, 2vw, 1.75rem), env(safe-area-inset-left));
}
.app-content-main > .container,
.app-content-main > .container-fluid,
.app-content-main > main { max-width: 1500px; margin-inline: auto; }

h1, h2, h3, h4, h5, h6 { margin-top: 0; color: var(--ui-ink-900); }
.content h1 { font-size: var(--ui-type-page); line-height: 1.08; }
.content h2 { font-size: var(--ui-type-section); line-height: 1.2; }
.content h3 { font-size: var(--ui-type-card); line-height: 1.25; }
.content h4,
.content h5,
.content h6 { font-size: var(--ui-type-subheading); line-height: 1.3; }
p { color: var(--ui-ink-700); }
a { color: var(--ui-brand-700); }
a:hover { color: var(--ui-brand-900); }

/* Shared page headers */
.content header:not(.card-header):not(.modal-header),
.archivo-toolbar,
.director-header,
.viajes-toolbar {
  min-height: 5rem;
  margin: 0 0 1rem;
  padding: 0 0 0.9rem;
  border-bottom: 1px solid var(--ui-line);
}

.tool-brand-logo { width: auto; max-width: min(100%, 20rem); max-height: 4.25rem; object-fit: contain; }
.section-title,
.archivo-toolbar h1,
.director-header h1 {
  color: var(--ui-brand-900);
  font-size: var(--ui-type-page);
  letter-spacing: 0.025em;
  line-height: 1.05;
}
.module-kicker,
.info-kicker { color: var(--ui-accent-600); }

/* Sidebar navigation */
.sidebar {
  width: 260px;
  padding-top: 0;
  background: linear-gradient(180deg, var(--color-secundario-5), var(--color-primario-1)) !important;
  border-right: 1px solid rgba(255,255,255,.12);
  box-shadow: 8px 0 28px rgba(7,43,61,.12);
}
.sidebar-header { min-height: 5.25rem; border-bottom: 1px solid var(--ui-line); }
.sidebar .sidebar-header a {
  display: flex;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.sidebar .sidebar-header img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 3.75rem;
}
.sidebar hr { height: 1px; margin: .35rem 1rem; background: rgba(255,255,255,.18); }
.sidebar a,
.tool-link {
  margin: .2rem .65rem;
  padding: .72rem .8rem;
  border-radius: var(--ui-radius-sm);
  font-weight: 500;
  line-height: 1.25;
}
.sidebar a:hover,
.tool-link:hover { background: rgba(255,255,255,.11); transform: none; }
.sidebar .active,
.tool-link.active {
  background: #fff;
  color: #073c50;
  box-shadow: inset 3px 0 0 rgba(255,255,255,.72);
  font-weight: 700;
}
.sidebar-user-info { margin: .25rem .65rem; padding: .7rem .8rem; border-radius: var(--ui-radius-sm); background: rgba(255,255,255,.07); color: #fff; }
.sidebar-user-info .bi,
.sidebar-user-role { color: #9ee3d4 !important; }
.sidebar-toggle-btn { border-color: var(--ui-line); border-radius: var(--ui-radius); color: var(--ui-brand-900); box-shadow: var(--ui-shadow); }

/* Surfaces: cards, panels and modal containers */
.card,
.tool-card,
.viajes-card,
.inner-card,
.archivo-panel,
.director-controls,
.director-search,
.director-card,
.info-hero,
.info-feature-card,
.auth-card,
.modal-content {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: rgba(255,255,255,.98);
  box-shadow: var(--ui-shadow-sm);
}
.card, .tool-card, .viajes-card, .inner-card, .modal-content { overflow: hidden; }
.card > .card-header,
.tool-card > .card-header,
.director-card > .card-header,
.viajes-card > .card-header,
.inner-card > .card-header,
.viajes-modal .modal-header,
.modal-header {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  padding: .75rem 1rem;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.18);
  border-radius: 0;
  background: var(--ui-card-header-bg);
  color: #fff;
  font-family: var(--fuente-secundaria);
  font-size: var(--ui-type-card);
  font-weight: 700;
  letter-spacing: .015em;
}
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.module-table-heading > span:first-child,
.metrics-toolbar-copy > span:first-child,
.catalog-header > span:first-child,
.tool-card-title,
.tool-card-title .login-global-range {
  margin: 0;
  color: inherit;
  font-family: var(--fuente-secundaria);
  font-size: var(--ui-type-card);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-transform: none;
}
.director-controls-heading h2,
.director-card h2,
.director-card-title h2,
.info-feature-card h2 {
  font-size: var(--ui-type-subheading);
  font-weight: 700;
  line-height: 1.3;
}
.module-table-caption,
.director-controls-heading p,
.archivo-results-header span,
.card-header small,
.catalog-header small {
  color: rgba(255,255,255,.9);
  font-size: var(--ui-type-caption);
  font-weight: 500;
  line-height: 1.35;
}
.modal-header .modal-title { color: #fff; font-family: var(--fuente-secundaria); font-weight: 700; }
.modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.card-body, .modal-body { padding: 1rem; }
.modal-footer { border-top: 1px solid var(--ui-line); background: var(--ui-surface-soft); }
.archivo-panel, .director-controls, .director-search, .director-card { border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-sm); }
.director-controls, .director-search, .director-card { margin-top: 1rem; }
.director-shell > .director-card,
.director-shell > .director-grid { margin-top: 0; }
.director-query-panel .director-search {
  margin-top: 0;
  border: 0;
  border-top: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.director-summary article { background: var(--color-secundario-5); color: var(--color-texto); }
.director-readonly { background: var(--ui-accent-100); color: var(--color-primario-1); }
.director-search-results a,
.director-search-action,
.director-action { color: var(--color-primario-1); }

/* Inputs, selects and dropdown menus */
.form-label,
.content label:not(.form-check):not(.btn) {
  color: var(--ui-ink-700);
  font-size: var(--ui-type-label);
  font-weight: 700;
  line-height: 1.25;
}
.table-filter-field > span,
.table-filter-check .form-check-label,
.metrics-period-field > span,
.metrics-selector-field > span,
.toolbar-context-label,
.archivo-field > span,
.archivo-page-size-field > span,
.director-controls label,
.form-label {
  color: var(--ui-ink-700);
  font-family: var(--fuente-secundaria);
  font-size: var(--ui-type-label) !important;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.form-control,
.form-select,
.input-group-text,
.gas-input {
  min-height: var(--ui-control-height);
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-sm);
  background-color: #fff;
  color: var(--ui-ink-900);
  font-family: var(--fuente-secundaria);
  font-size: var(--ui-type-control);
}
.form-select { background-color: #fff; }
.form-control:hover,
.form-select:hover { border-color: #83a7b8; }
.form-control:focus,
.form-select:focus,
.gas-input:focus {
  border-color: var(--ui-accent-500);
  box-shadow: var(--ui-focus);
  animation: none;
}
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] { border-color: var(--ui-line); background: var(--ui-surface-muted); color: var(--ui-ink-500); opacity: 1; }
.input-group-text { border-right: 0; background: var(--ui-surface-soft); color: var(--ui-brand-700); pointer-events: auto; }
.input-group > .form-control:not(:first-child) { border-left-color: var(--ui-line); }
.dropdown-menu,
.table-autocomplete {
  padding: .4rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: #fff;
  box-shadow: var(--ui-shadow);
}
.dropdown-item { border-radius: .4rem; color: var(--ui-ink-900); }
.dropdown-item:hover,
.dropdown-item:focus { background: var(--ui-accent-100); color: var(--ui-brand-900); }
.form-check-input:checked { border-color: var(--ui-accent-600); background-color: var(--ui-accent-600); }

/* Buttons */
.btn,
.tool-btn,
.auth-btn {
  min-height: 2.5rem;
  border-radius: var(--ui-radius-sm);
  font-family: var(--fuente-secundaria);
  font-size: var(--ui-type-control);
  font-weight: 700;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.btn-primary,
.btn-success,
.tool-btn-primary,
.tool-btn-calculate,
.auth-btn-primary,
.viajes-shell .btn-primary,
.viajes-modal .btn-primary,
.viajes-shell .btn-success,
.viajes-modal .btn-success {
  border-color: var(--ui-brand-700);
  background: var(--ui-brand-700);
  color: #fff;
}
.btn-primary:hover,
.btn-success:hover,
.tool-btn-primary:hover,
.tool-btn-calculate:hover,
.auth-btn-primary:hover { border-color: var(--ui-brand-900); background: var(--ui-brand-900); color: #fff; }
.btn-outline-primary { border-color: var(--ui-brand-700); color: var(--ui-brand-700); }
.btn-outline-primary:hover { border-color: var(--ui-brand-700); background: var(--ui-brand-700); color: #fff; }
.btn-outline-secondary,
.tool-btn-secondary,
.tool-btn-outline,
.auth-btn-secondary { border-color: var(--ui-line-strong); background: #fff; color: var(--ui-ink-700); }
.btn-outline-secondary:hover,
.tool-btn-secondary:hover,
.tool-btn-outline:hover,
.auth-btn-secondary:hover { border-color: var(--ui-brand-700); background: var(--ui-surface-muted); color: var(--ui-brand-900); }
.btn-danger,
.tool-btn-danger { border-color: var(--ui-danger); background: var(--ui-danger); color: #fff; }
.btn:focus-visible { box-shadow: var(--ui-focus); }

/* Tables */
.table-responsive { border: 1px solid var(--ui-line); border-radius: var(--ui-radius-sm); background: #fff; }
.table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(54,191,165,.055); margin-bottom: 0; color: var(--ui-ink-900); }
.table > thead > tr > th,
.tool-table-head th,
.archivo-table th {
  padding: .75rem .8rem;
  border: 0;
  border-bottom: 1px solid var(--ui-line-strong);
  background: var(--ui-surface-muted);
  color: var(--ui-brand-900);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
  vertical-align: middle;
}
.table > tbody > tr > td { padding: .75rem .8rem; border-color: var(--ui-line); vertical-align: middle; }
.table > tbody > tr > td { font-size: var(--ui-type-control); line-height: 1.4; }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table-group-row td,
.admin-area-group-row td { background: var(--ui-accent-100) !important; color: var(--ui-brand-900); font-weight: 700; }

/* Tabs, badges, alerts and pagination */
.nav-tabs { gap: .25rem; border-bottom-color: rgba(255,255,255,.24); }
.nav-tabs .nav-link { border: 0; border-radius: .45rem .45rem 0 0; color: rgba(255,255,255,.84); font-family: var(--fuente-secundaria); font-size: var(--ui-type-control); font-weight: 700; letter-spacing: 0 !important; }
.nav-tabs .nav-link:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav-tabs .nav-link.active { background: #fff; color: var(--ui-brand-900); }
.badge, [class*="-badge"] { font-weight: 700; letter-spacing: .01em; }
.alert { border-radius: var(--ui-radius); border-width: 1px; box-shadow: var(--ui-shadow-sm); }
.page-link { border-color: var(--ui-line); color: var(--ui-brand-700); }
.page-link:hover { background: var(--ui-accent-100); color: var(--ui-brand-900); }
.active > .page-link, .page-link.active { border-color: var(--ui-brand-700); background: var(--ui-brand-700); }

/* Shared footers and auth surfaces */
.sectFooter {
  width: 100%;
  max-width: 1500px;
  margin: 1.5rem auto 0;
  padding: 1rem 0 .25rem;
  border-top: 1px solid var(--ui-line);
  color: var(--ui-ink-500);
}
.sectFooter h6 { margin: .35rem 0 0; color: var(--ui-ink-500); font-family: var(--fuente-secundaria); font-size: .82rem; font-weight: 500; }
.sectFooter .footer-logo { max-height: 3.25rem; }
.footer-cdt-link { color: var(--ui-brand-700); font-weight: 700; text-decoration: none; }

/* El encabezado de Administración usa un .container centrado. Su footer debe
   compartir los mismos límites para que ambos bordes queden alineados. */
.content:has(.admin-tool-shell) > .sectFooter {
  width: 100%;
  margin-inline: auto;
}

@media (min-width: 576px) {
  .content:has(.admin-tool-shell) > .sectFooter { max-width: 540px; }
}

@media (min-width: 768px) {
  .content:has(.admin-tool-shell) > .sectFooter { max-width: 720px; }
}

@media (min-width: 992px) {
  .content:has(.admin-tool-shell) > .sectFooter { max-width: 960px; }
}

@media (min-width: 1200px) {
  .content:has(.admin-tool-shell) > .sectFooter { max-width: 1140px; }
}

@media (min-width: 1400px) {
  .content:has(.admin-tool-shell) > .sectFooter { max-width: 1320px; }
}
.auth-card { border-color: var(--ui-line); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow); }
.auth-title { color: var(--ui-brand-900); }
.auth-brand-product { color: var(--ui-brand-700); }

@media (max-width: 1199.98px) {
  .content {
    padding: max(1rem, env(safe-area-inset-top))
      max(.75rem, env(safe-area-inset-right))
      max(1rem, env(safe-area-inset-bottom))
      max(.75rem, env(safe-area-inset-left));
  }
  .content header:not(.card-header):not(.modal-header) { min-height: auto; }
}

@media (max-width: 767.98px) {
  .content {
    padding-right: max(.5rem, env(safe-area-inset-right));
    padding-left: max(.5rem, env(safe-area-inset-left));
  }
  .content header:not(.card-header):not(.modal-header),
  .archivo-toolbar,
  .director-header { align-items: flex-start; }
  .card-header, .modal-header { padding: .7rem .8rem; }
  .responsive-card-table tbody tr { border-color: var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-sm); }
  .responsive-card-table tbody td[data-label]::before { color: var(--ui-brand-700); }
  .sectFooter { margin-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .tool-link, .card, .archivo-panel, .director-card { transition: none !important; }
}

/* Barras secundarias: el header queda reservado exclusivamente para marca y título. */
.archivo-module-actions,
.director-module-context,
.viajes-context-bar {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: -0.35rem 0 1rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: rgba(25, 97, 137, 0.045);
}

.archivo-module-actions p,
.director-module-context p { margin: 0; color: var(--color-secundario-1); }
.viajes-context-bar { flex-wrap: wrap; }
.viajes-context-bar .toolbar-context-form { flex: 1 1 18rem; }

/* Controles sobre encabezados corporativos oscuros. */
.metrics-board-toolbar .metrics-period-field > span,
.metrics-board-toolbar .metrics-selector-field > span {
  color: var(--color-texto) !important;
  font-size: var(--ui-type-label) !important;
  font-weight: 500 !important;
  letter-spacing: 0.035em;
}

.metrics-board-toolbar .form-select {
  border-color: rgba(255, 255, 255, 0.58);
  background-color: var(--ui-surface);
  color: var(--color-secundario-5);
}

/* Jerarquía ligera: tamaño, color y espacio sustituyen el exceso de negrita. */
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6,
.section-title,
.auth-title { font-weight: 400 !important; }

.card-header,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.module-table-heading > span:first-child,
.metrics-toolbar-copy > span:first-child,
.catalog-header > span:first-child,
.tool-card-title,
.tool-card-title .login-global-range,
.modal-title,
.director-controls-heading h2,
.director-card h2,
.info-feature-card h2 { font-weight: 500 !important; }

.form-label,
.content label:not(.form-check):not(.btn),
.table-filter-field > span,
.table-filter-check .form-check-label,
.metrics-period-field > span,
.metrics-selector-field > span,
.toolbar-context-label,
.archivo-field > span,
.archivo-page-size-field > span,
.director-controls label { font-weight: 500 !important; }

.btn,
.tool-btn,
.auth-btn,
.nav-link,
.tab-btn,
.dropdown-item,
.badge,
[class*="-badge"],
.page-link,
.sidebar a,
.tool-link,
strong,
b { font-weight: 500 !important; }

.table > thead > tr > th,
.tool-table-head th,
.archivo-table th,
.responsive-card-table tbody td[data-label]::before { font-weight: 500 !important; }

@media (max-width: 767.98px) {
  .archivo-module-actions,
  .director-module-context,
  .viajes-context-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .archivo-module-actions .archivo-toolbar-actions,
  .archivo-module-actions .btn { width: 100%; }

  .viajes-context-bar .toolbar-context-form {
    flex: 0 0 auto;
    width: 100%;
  }

  .viajes-context-bar .module-actions,
  .viajes-context-bar .module-actions .btn {
    width: 100%;
  }
}

@media (max-width: 359.98px) {
  .responsive-card-table tbody td[data-label] {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
  }
}

/* Contrato de contraste para iconos: el glifo siempre sigue al componente. */
:where(
  [class*="-icon"],
  .btn,
  .tool-btn,
  .auth-btn,
  .nav-link,
  .tab-btn,
  .tool-link,
  .page-link,
  .badge,
  .dropdown-item
) .bi,
:where(
  [class*="-icon"],
  .btn,
  .tool-btn,
  .auth-btn,
  .nav-link,
  .tab-btn,
  .tool-link,
  .page-link,
  .badge,
  .dropdown-item
) .bi::before {
  color: inherit !important;
}

.archivo-panel-icon,
.archivo-panel-icon .bi,
.archivo-panel-icon .bi::before,
.info-feature-card > .bi,
.info-feature-card > .bi::before,
.card-header .module-table-heading > span > .bi,
.card-header .module-table-heading > span > .bi::before,
.metrics-toolbar-copy .bi,
.metrics-toolbar-copy .bi::before,
.modal-header .modal-title .bi,
.modal-header .modal-title .bi::before,
.director-summary article .bi,
.director-summary article .bi::before {
  color: var(--color-texto) !important;
}

.archivo-file-icon,
.archivo-file-icon .bi,
.archivo-file-icon .bi::before,
.input-group-text .bi,
.input-group-text .bi::before {
  color: var(--color-primario-1) !important;
}

.archivo-filter-group legend .bi,
.archivo-filter-group legend .bi::before {
  color: var(--color-secundario-2) !important;
}

.btn-primary,
.btn-success,
.btn-danger,
.tool-btn-primary,
.tool-btn-danger,
.auth-btn-primary {
  --ui-icon-color: var(--color-texto);
}

.btn-primary .bi,
.btn-success .bi,
.btn-danger .bi,
.tool-btn-primary .bi,
.tool-btn-danger .bi,
.auth-btn-primary .bi {
  color: var(--ui-icon-color) !important;
}

.btn-outline-primary .bi,
.btn-outline-secondary .bi,
.tool-btn-outline .bi,
.tool-btn-secondary .bi {
  color: currentColor !important;
}