/*
 * SGD V1 visual layer
 * Keeps the private V1 modules aligned without forcing each view to repeat the
 * same control, modal, table and card rules.
 */
:root {
  --sgd-ui-ink: #102340;
  --sgd-ui-muted: #5c7597;
  --sgd-ui-line: #d7e4f6;
  --sgd-ui-soft: #f6faff;
  --sgd-ui-card: rgba(255, 255, 255, 0.96);
  --sgd-ui-blue: #0b7df2;
  --sgd-ui-cyan: #06b6d4;
  --sgd-ui-green: #14b87a;
  --sgd-ui-red: #ef4444;
  --sgd-ui-radius-xl: 28px;
  --sgd-ui-radius-lg: 22px;
  --sgd-ui-radius-md: 14px;
  --sgd-ui-shadow-card: 0 24px 50px rgba(16, 35, 64, 0.1);
  --sgd-ui-shadow-soft: 0 18px 34px rgba(16, 35, 64, 0.08);
}

.usuarios-shell,
.empleado-shell,
.area-shell,
.area-structure-shell,
.tipo-doc-shell,
.security-monitor-shell,
.tramite-shell {
  color: var(--sgd-ui-ink);
}

.usuarios-hero,
.empleado-hero,
.area-hero,
.area-structure-hero,
.tipo-doc-hero,
.security-monitor-hero {
  margin-bottom: 1.15rem !important;
  padding: 1.55rem 1.65rem !important;
  border: 1px solid rgba(16, 35, 64, 0.08) !important;
  border-radius: var(--sgd-ui-radius-xl) !important;
  color: var(--sgd-ui-ink) !important;
  background:
    radial-gradient(circle at top right, rgba(6, 182, 212, 0.12), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 255, 0.98)) !important;
  box-shadow: var(--sgd-ui-shadow-card) !important;
}

.usuarios-hero::after,
.empleado-hero::after,
.area-hero::after,
.area-structure-hero::after,
.tipo-doc-hero::after,
.security-monitor-hero::after {
  right: -80px !important;
  bottom: -115px !important;
  top: auto !important;
  width: 280px !important;
  height: 280px !important;
  border: 40px solid rgba(11, 125, 242, 0.06) !important;
  border-radius: 999px !important;
}

.usuarios-kicker,
.empleado-eyebrow,
.area-kicker,
.area-structure-kicker,
.tipo-doc-kicker,
.security-monitor-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  padding: 0.42rem 0.9rem !important;
  border: 1px solid rgba(11, 125, 242, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(11, 125, 242, 0.07) !important;
  color: #1f4b82 !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.usuarios-hero h2,
.empleado-hero h1,
.area-hero h1,
.area-structure-hero h1,
.tipo-doc-hero h1,
.security-monitor-hero h1 {
  margin: 0.9rem 0 0.45rem !important;
  color: var(--sgd-ui-ink) !important;
  font-size: clamp(1.55rem, 2.2vw, 2.45rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.08 !important;
}

.usuarios-hero p,
.empleado-hero p,
.area-hero p,
.area-structure-hero p,
.tipo-doc-hero p,
.security-monitor-hero p {
  max-width: 820px !important;
  color: var(--sgd-ui-muted) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

.usuarios-btn-primary,
.empleado-new-btn,
.area-new-btn,
.area-structure-btn,
.tipo-doc-btn,
.security-monitor-btn {
  min-height: 46px !important;
  border: 0 !important;
  border-radius: 16px !important;
  padding: 0.86rem 1.15rem !important;
  color: #fff !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  box-shadow: 0 16px 28px rgba(220, 38, 38, 0.22) !important;
  font-weight: 900 !important;
}

.area-structure-btn-outline,
.tipo-doc-btn-outline,
.security-monitor-btn-outline {
  min-height: 46px !important;
  border: 1px solid rgba(11, 125, 242, 0.18) !important;
  border-radius: 16px !important;
  color: #1f4b82 !important;
  background: rgba(11, 125, 242, 0.07) !important;
  box-shadow: none !important;
  font-weight: 900 !important;
}

.usuarios-btn-primary:hover,
.empleado-new-btn:hover,
.area-new-btn:hover,
.area-structure-btn:hover,
.tipo-doc-btn:hover,
.security-monitor-btn:hover,
.area-structure-btn-outline:hover,
.tipo-doc-btn-outline:hover,
.security-monitor-btn-outline:hover {
  filter: brightness(1.03);
  transform: translateY(-2px);
}

.usuarios-btn-primary:hover,
.empleado-new-btn:hover,
.area-new-btn:hover,
.area-structure-btn:hover,
.tipo-doc-btn:hover,
.security-monitor-btn:hover {
  color: #fff !important;
}

.area-structure-btn-outline:hover,
.tipo-doc-btn-outline:hover,
.security-monitor-btn-outline:hover {
  color: #1f4b82 !important;
  text-decoration: none !important;
}

.usuarios-stat,
.empleado-stat,
.area-stat,
.area-structure-stat,
.tipo-doc-stat,
.security-monitor-stat,
.area-structure-rule,
.tipo-doc-guide,
.security-monitor-rule {
  height: 100% !important;
  border: 1px solid rgba(16, 35, 64, 0.08) !important;
  border-radius: var(--sgd-ui-radius-lg) !important;
  background: var(--sgd-ui-card) !important;
  box-shadow: var(--sgd-ui-shadow-soft) !important;
}

.usuarios-panel,
.empleado-panel,
.area-panel,
.area-structure-panel,
.tipo-doc-panel,
.security-monitor-panel,
.tramite-panel {
  overflow: hidden !important;
  border: 1px solid rgba(16, 35, 64, 0.08) !important;
  border-radius: var(--sgd-ui-radius-xl) !important;
  background: var(--sgd-ui-card) !important;
  box-shadow: 0 26px 52px rgba(16, 35, 64, 0.1) !important;
}

.usuarios-panel .card-body,
.empleado-panel .card-body,
.area-panel .card-body,
.area-structure-panel .card-body,
.tipo-doc-panel .card-body,
.security-monitor-panel .card-body,
.tramite-panel .card-body {
  padding: 1.2rem 1.35rem 1.35rem !important;
}

.empleado-filter,
.area-filter,
.area-structure-filter,
.tipo-doc-filter,
.security-monitor-filter,
.usuarios-filter-grid {
  margin-bottom: 1rem !important;
  padding: 1rem !important;
  border: 1px solid rgba(215, 228, 246, 0.92) !important;
  border-radius: 18px !important;
  background: var(--sgd-ui-soft) !important;
}

.usuarios-filter-grid .form-control,
.usuarios-filter-grid .custom-select,
.empleado-filter .form-control,
.area-filter .form-control,
.area-structure-filter .form-control,
.tipo-doc-filter .form-control,
.security-monitor-filter .form-control,
.tramite-panel .form-control,
.tramite-panel .custom-select {
  height: 46px !important;
  min-height: 46px !important;
  border: 1px solid var(--sgd-ui-line) !important;
  border-radius: var(--sgd-ui-radius-md) !important;
  background-color: #fff !important;
  color: var(--sgd-ui-ink) !important;
  box-shadow: none !important;
}

.empleado-filter label,
.area-filter label,
.area-structure-filter label,
.tipo-doc-filter label,
.security-monitor-filter label,
.tramite-panel label {
  color: #264569 !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

#btn_limpiar_filtros_usuario,
#btn_limpiar_filtros_empleado,
#btn_limpiar_filtros_area,
#btn_limpiar_filtros_area_estructura,
#btn_limpiar_filtros_tipo,
#btn_limpiar_filtros_alerta,
.security-monitor-clear,
.tramite-filter-clear {
  width: 100% !important;
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  border: 1px solid rgba(16, 35, 64, 0.08) !important;
  border-radius: var(--sgd-ui-radius-md) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #556f91 !important;
  font-weight: 900 !important;
  box-shadow: 0 14px 26px rgba(16, 35, 64, 0.08) !important;
}

#btn_limpiar_filtros_usuario:hover,
#btn_limpiar_filtros_empleado:hover,
#btn_limpiar_filtros_area:hover,
#btn_limpiar_filtros_area_estructura:hover,
#btn_limpiar_filtros_tipo:hover,
#btn_limpiar_filtros_alerta:hover,
.security-monitor-clear:hover,
.tramite-filter-clear:hover:not(:disabled) {
  border-color: rgba(11, 125, 242, 0.18) !important;
  background: #fff !important;
  color: #1f4b82 !important;
  box-shadow: 0 16px 30px rgba(16, 35, 64, 0.11) !important;
}

.usuarios-filter-state,
.empleado-filter__note,
.area-filter-state,
.area-structure-filter-state,
.tipo-doc-filter-state,
.security-monitor-filter-state,
.tramite-filter-state-text {
  width: fit-content !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  margin-top: 0.85rem !important;
  padding: 0.48rem 0.85rem !important;
  border-radius: 999px !important;
  background: rgba(15, 31, 58, 0.05) !important;
  color: #33557f !important;
  font-size: 0.84rem !important;
  font-weight: 900 !important;
}

.usuarios-table-wrap,
.area-table-wrap,
.area-structure-table-wrap,
.tipo-doc-table-wrap,
.security-monitor-table-wrap,
.empleado-panel .table-responsive {
  padding: 0.3rem !important;
  border: 1px solid rgba(16, 35, 64, 0.08) !important;
  border-radius: var(--sgd-ui-radius-lg) !important;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.92), rgba(255, 255, 255, 0.96)) !important;
}

#tabla_usuario thead th,
#tabla_empleado thead th,
#tabla_area thead th,
#tabla_area_estructura thead th,
#tabla_tipo thead th,
#tabla_alerta_operativa thead th,
#tabla_serie_documental thead th,
#tabla_subserie_documental thead th {
  border-top: 0 !important;
  color: #23426b !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  min-height: 40px !important;
  border: 1px solid var(--sgd-ui-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--sgd-ui-ink) !important;
  box-shadow: none !important;
}

.dataTables_wrapper .page-link {
  border-color: var(--sgd-ui-line) !important;
  color: #33557f !important;
}

.dataTables_wrapper .page-item.active .page-link {
  border-color: var(--sgd-ui-blue) !important;
  background: linear-gradient(135deg, var(--sgd-ui-blue), #1d4ed8) !important;
  color: #fff !important;
}

.usuarios-modal,
.empleado-modal,
.area-modal,
.area-structure-modal,
.tipo-doc-modal,
.security-monitor-modal,
.documentos-modal,
.login-recovery-modal {
  z-index: 2060;
}

.usuarios-modal .modal-content,
.empleado-modal .modal-content,
.area-modal .modal-content,
.area-structure-modal .modal-content,
.tipo-doc-modal .modal-content,
.security-monitor-modal .modal-content,
.documentos-modal .modal-content,
.login-recovery-modal .modal-content {
  overflow: hidden !important;
  border: 1px solid rgba(16, 35, 64, 0.08) !important;
  border-radius: 24px !important;
  box-shadow: 0 28px 60px rgba(16, 35, 64, 0.18) !important;
}

.usuarios-modal .modal-header,
.empleado-modal .modal-header,
.area-modal .modal-header,
.area-structure-modal .modal-header,
.tipo-doc-modal .modal-header,
.security-monitor-modal .modal-header,
.documentos-modal .modal-header,
.login-recovery-modal .modal-header {
  color: var(--sgd-ui-ink) !important;
  border-bottom: 1px solid rgba(16, 35, 64, 0.08) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 255, 0.98)) !important;
}

.usuarios-modal .modal-body,
.empleado-modal .modal-body,
.area-modal .modal-body,
.area-structure-modal .modal-body,
.tipo-doc-modal .modal-body,
.security-monitor-modal .modal-body,
.documentos-modal .modal-body,
.login-recovery-modal .modal-body {
  background: linear-gradient(180deg, #fcfdff, #f6faff) !important;
}

.usuarios-modal .modal-footer,
.empleado-modal .modal-footer,
.area-modal .modal-footer,
.area-structure-modal .modal-footer,
.tipo-doc-modal .modal-footer,
.security-monitor-modal .modal-footer,
.documentos-modal .modal-footer,
.login-recovery-modal .modal-footer {
  border-top: 1px solid rgba(16, 35, 64, 0.08) !important;
  background: #fff !important;
}

.usuarios-modal .form-control,
.empleado-modal .form-control,
.area-modal .form-control,
.area-structure-modal .form-control,
.tipo-doc-modal .form-control,
.security-monitor-modal .form-control,
.documentos-modal .form-control,
.login-recovery-modal .form-control,
.usuarios-modal .select2-container--default .select2-selection--single,
.empleado-modal .select2-container--default .select2-selection--single,
.area-modal .select2-container--default .select2-selection--single,
.area-structure-modal .select2-container--default .select2-selection--single,
.tipo-doc-modal .select2-container--default .select2-selection--single,
.security-monitor-modal .select2-container--default .select2-selection--single,
.tramite-panel .select2-container--default .select2-selection--single {
  min-height: 46px !important;
  border: 1px solid var(--sgd-ui-line) !important;
  border-radius: var(--sgd-ui-radius-md) !important;
  background: #fff !important;
  color: var(--sgd-ui-ink) !important;
  box-shadow: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 44px !important;
  color: var(--sgd-ui-ink) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 44px !important;
}

body.login-modern-page .auth-card {
  border-radius: 30px !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  box-shadow: 0 28px 70px rgba(2, 6, 23, 0.36) !important;
}

body.login-modern-page .btn-login-submit,
body.login-modern-page .recovery-btn-submit {
  border-radius: 16px !important;
  font-weight: 900 !important;
}

.reset-card {
  font-family: "Urbanist", "Segoe UI", sans-serif !important;
  border-radius: 30px !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  box-shadow: 0 28px 70px rgba(2, 6, 23, 0.36) !important;
}

.reset-title {
  font-family: "Sora", "Urbanist", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
}

.reset-card .form-control {
  min-height: 46px !important;
  border-radius: 14px !important;
}

.btn-reset {
  min-height: 46px !important;
  border-radius: 16px !important;
  font-weight: 900 !important;
}

@media (max-width: 767.98px) {
  .usuarios-hero,
  .empleado-hero,
  .area-hero,
  .area-structure-hero,
  .tipo-doc-hero,
  .security-monitor-hero {
    padding: 1.2rem !important;
    border-radius: 22px !important;
  }

  .usuarios-panel .card-body,
  .empleado-panel .card-body,
  .area-panel .card-body,
  .area-structure-panel .card-body,
  .tipo-doc-panel .card-body,
  .security-monitor-panel .card-body,
  .tramite-panel .card-body {
    padding: 1rem !important;
  }
}