:root {
  --siged-font-scale: 1;
  --siged-focus: #ffbf47;
}

html {
  font-size: calc(100% * var(--siged-font-scale));
  scroll-behavior: smooth;
}

html.siged-font-large {
  --siged-font-scale: 1.125;
}

html.siged-font-larger {
  --siged-font-scale: 1.25;
}

html.siged-readable-font body,
html.siged-readable-font :where(input, select, textarea, button) {
  font-family: Verdana, Tahoma, Arial, sans-serif !important;
}

html.siged-reading-spacing body {
  letter-spacing: .025em;
  word-spacing: .08em;
}

html.siged-reading-spacing :where(p, li, label, td, th, input, select, textarea, button) {
  line-height: 1.7 !important;
}

html[lang="en-US"] .login-box h1::after {
  content: "Integrated Document Management System";
}

html.siged-reduce-motion,
html.siged-reduce-motion *,
html.siged-reduce-motion *::before,
html.siged-reduce-motion *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .01ms !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid var(--siged-focus) !important;
  outline-offset: 3px !important;
}

.siged-skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 30000;
  padding: 11px 16px;
  border-radius: 10px;
  color: #102b3c;
  background: #ffdf70;
  font-weight: 850;
  transform: translateY(-160%);
  transition: transform .15s ease;
}

.siged-skip-link:focus {
  transform: translateY(0);
}

.siged-a11y-launcher {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 25000;
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #173b5e;
  color: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
  font-size: 1.4rem;
  cursor: pointer;
}

.siged-a11y-panel {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 62px);
  z-index: 25000;
  width: min(360px, calc(100vw - 28px));
  max-height: min(620px, calc(100dvh - 100px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 18px;
  color: #172b38;
  background: #fff;
  border: 1px solid #bac8d2;
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .3);
}

.siged-a11y-panel[hidden] {
  display: none !important;
}

.siged-a11y-panel h2 {
  margin: 0 0 5px;
  font-size: 1.15rem;
}

.siged-a11y-panel p {
  margin: 0 0 14px;
  color: #536775;
  font-size: .86rem;
  line-height: 1.45;
}

.siged-a11y-field {
  display: grid;
  gap: 6px;
  margin: 12px 0;
}

.siged-a11y-field label,
.siged-a11y-group > span {
  font-size: .84rem;
  font-weight: 850;
}

.siged-a11y-field select {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 2px solid #bac8d2;
  border-radius: 10px;
  background: #fff;
  color: #172b38;
  font-size: 1rem;
}

.siged-a11y-group {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.siged-a11y-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.siged-a11y-actions button,
.siged-a11y-toggle,
.siged-a11y-reset {
  min-height: 44px;
  padding: 9px;
  border: 2px solid #173b5e;
  border-radius: 10px;
  background: #fff;
  color: #173b5e;
  font-weight: 850;
  cursor: pointer;
}

.siged-a11y-actions button[aria-pressed="true"],
.siged-a11y-toggle[aria-pressed="true"] {
  background: #173b5e;
  color: #fff;
}

.siged-a11y-toggle,
.siged-a11y-reset {
  width: 100%;
  margin-top: 7px;
}

.siged-a11y-reset {
  border-color: #6a7882;
  color: #394955;
}

.siged-language-note {
  margin: 10px 0 0 !important;
  padding: 10px;
  border-left: 4px solid #b58b28;
  background: #fff7d8;
  color: #493a13 !important;
}

.siged-a11y-live {
  position: fixed;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html.siged-high-contrast {
  --bg: #000 !important;
  --card: #000 !important;
  --text: #fff !important;
  --muted: #fff !important;
  --border: #fff !important;
  --input: #000 !important;
  --primary: #ffdf00 !important;
  --primary2: #ffdf00 !important;
  --accent: #00ffff !important;
  --sidebar: #000 !important;
  --navy: #000 !important;
  --green: #005f50 !important;
  --gold: #ffdf00 !important;
  --danger: #ff6b6b !important;
  --siged-focus: #00ffff;
}

html.siged-high-contrast body,
html.siged-high-contrast .login-screen,
html.siged-high-contrast .login-shell,
html.siged-high-contrast .login-panel,
html.siged-high-contrast .main,
html.siged-high-contrast .content {
  color: #fff !important;
  background: #000 !important;
}

html.siged-high-contrast :where(
  .card, .stat, .item, .login-box, .login-card, .sidebar, .modal-card,
  [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "]
) {
  color: #fff !important;
  background: #000 !important;
  border-color: #fff !important;
}

html.siged-high-contrast :where(input, select, textarea) {
  color: #fff !important;
  background: #000 !important;
  border: 2px solid #fff !important;
}

html.siged-high-contrast :where(a, label, p, span, small, h1, h2, h3, h4, th, td) {
  color: inherit;
}

html.siged-high-contrast :where(button, .btn, [role="button"]) {
  color: #000 !important;
  background: #ffdf00 !important;
  border: 2px solid #fff !important;
}

html.siged-high-contrast .siged-a11y-panel {
  color: #fff !important;
  background: #000 !important;
  border-color: #fff !important;
}

html.siged-high-contrast .siged-a11y-panel p {
  color: #fff !important;
}

html.siged-high-contrast .siged-a11y-panel .siged-language-note {
  color: #000 !important;
  background: #ffdf00 !important;
}

html.siged-high-contrast .siged-a11y-panel button[aria-pressed="true"] {
  color: #fff !important;
  background: #0047ab !important;
  border-color: #00ffff !important;
}

html.siged-high-contrast img {
  outline: 1px solid #fff;
}

[role="dialog"][aria-modal="true"] {
  overscroll-behavior: contain;
}

/*
 * Desplazamiento horizontal táctil
 * La página completa permanece ajustada al ancho del dispositivo, pero las
 * tablas y barras de pestañas anchas pueden deslizarse de forma independiente.
 */
:where(
  .siged-scroll-x,
  .table-wrap,
  .rrhh-table-wrap,
  .od-table,
  .med-table,
  .med-table-wrap,
  .dir-table-wrap,
  .cpsp-table-wrap,
  .alm-table-wrap,
  .inventario-table-wrap,
  .vehiculos-table-wrap,
  .visitas-table-wrap,
  .pre-table-wrap
) {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y !important;
  scrollbar-width: thin;
}

:where(
  .siged-scroll-tabs,
  .rrhh-tabs,
  .od-tabs,
  .med-tabs,
  .dir-tabs,
  .cpsp-tabs,
  .alm-tabs,
  .inventario-tabs,
  .vehiculos-tabs,
  .visitas-tabs,
  .pre-tabs
) {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  touch-action: pan-x pan-y !important;
  scrollbar-width: thin;
}

:where(
  .siged-scroll-tabs,
  .rrhh-tabs,
  .od-tabs,
  .med-tabs,
  .dir-tabs,
  .cpsp-tabs,
  .alm-tabs,
  .inventario-tabs,
  .vehiculos-tabs,
  .visitas-tabs,
  .pre-tabs
) > * {
  flex: 0 0 auto !important;
  white-space: nowrap;
  scroll-snap-align: start;
}

@media (max-width: 900px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body,
  #app,
  #portalView,
  .app,
  .portal,
  .layout,
  .main,
  .content,
  #moduleContent,
  #portalContent {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body {
    overflow-x: hidden !important;
  }

  .main,
  .content,
  #moduleContent,
  #portalContent,
  :where(
    .modal-box,
    .modal-card,
    .rrhh-modal-card,
    .od-modal > div,
    .med-modal > div,
    .dir-modal > div,
    .cpsp-modal-card,
    .alm-modal-card,
    .vehiculos-modal-card,
    .visitas-modal-card
  ) {
    touch-action: auto !important;
  }

  :where(input, select, textarea) {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 16px !important;
  }

  :where(button, .btn, [role="button"]) {
    min-height: 44px;
    touch-action: manipulation;
  }

  :where(
    .rrhh-form, .od-form, .med-form, .dir-form, .cpsp-form,
    .alm-form, .vehiculos-form, .visitas-form-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(
    .rrhh-field.full, .od-field.full, .med-field.full, .dir-field.full,
    .cpsp-field.full, .alm-field.full, .vehiculos-field.full,
    .visitas-field.full, .field.full
  ) {
    grid-column: 1 / -1 !important;
  }

  :where(
    .rrhh-grid, .od-grid, .med-grid, .dir-grid, .cpsp-grid,
    .alm-grid, .vehiculos-grid, .visitas-grid, .cards
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(
    .rrhh-table, .od-table table, .med-table table, .dir-table,
    .cpsp-table, .alm-table, .vehiculos-table, .visitas-table,
    #moduleContent table, #portalContent table
  ) {
    width: max-content;
    min-width: 720px;
  }

  :where(
    .table-wrap, .rrhh-table-wrap, .od-table, .med-table, .med-table-wrap, .dir-table-wrap,
    .cpsp-table-wrap, .alm-table-wrap, .vehiculos-table-wrap,
    .visitas-table-wrap, .inventario-table-wrap, .pre-table-wrap
  ) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y !important;
  }

  :where(
    .rrhh-modal, .od-modal, .med-modal, .dir-modal, .cpsp-modal,
    .alm-modal, .vehiculos-modal, .visitas-modal, .modal
  ) {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  :where(
    .rrhh-modal-card, .od-modal > div, .med-modal > div, .dir-modal > div,
    .cpsp-modal-card, .alm-modal-card, .vehiculos-modal-card,
    .visitas-modal-card, .modal-card
  ) {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 96dvh !important;
    border-radius: 18px 18px 0 0 !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    overflow: auto !important;
  }

  :where(.topbar, .topbar-actions, .rrhh-actions, .od-actions, .med-actions,
    .dir-actions, .cpsp-actions, .alm-actions, .vehiculos-actions,
    .visitas-actions, .actions) {
    flex-wrap: wrap !important;
  }

  :where(h1, h2, h3, h4, p, td, th, label, .nav-item, button) {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 480px) {
  .siged-a11y-launcher {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .siged-a11y-panel {
    right: 8px;
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 60px);
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 85px);
    padding: 15px;
  }

  .siged-a11y-actions {
    grid-template-columns: 1fr;
  }

  :where(
    .rrhh-actions, .od-actions, .med-actions, .dir-actions,
    .cpsp-actions, .alm-actions, .vehiculos-actions,
    .visitas-actions, .actions
  ) > :where(button, a) {
    flex: 1 1 100% !important;
    width: 100%;
  }
}