/*
 * Sistema visual compartido del Sistema de Gestión Web (SGW).
 * Se carga después de SB Admin 2 para unificar las pantallas existentes sin
 * modificar URLs, formularios ni contratos de la aplicación.
 */
:root {
  --sgw-primary: #2367a8;
  --sgw-primary-dark: #174b7c;
  --sgw-accent: #2f8f83;
  --sgw-success: #2f855a;
  --sgw-warning: #8c5a00;
  --sgw-danger: #c53030;
  --sgw-ink: #263238;
  --sgw-muted: #60717d;
  --sgw-border: #d8e0e5;
  --sgw-surface: #ffffff;
  --sgw-surface-soft: #f5f8fa;
  --sgw-focus: #1d75bd;
  --sgw-sidebar: #263238;
  --sgw-sidebar-submenu: #304650;
  --sgw-sidebar-submenu-nested: #38515d;
  --sgw-sidebar-submenu-hover: #42677b;
  --sgw-sidebar-tree-line: rgba(190, 218, 228, .42);
  --sgw-sidebar-tree-indent-2: 31px;
  --sgw-sidebar-tree-indent-3: 48px;
  --sgw-radius: 6px;
  --sgw-space-1: 4px;
  --sgw-space-2: 8px;
  --sgw-space-3: 12px;
  --sgw-space-4: 12px;
  --sgw-space-5: 16px;
}

html {
  font-size: 100%;
  background: var(--sgw-surface-soft);
}

body {
  background: var(--sgw-surface-soft);
  color: var(--sgw-ink);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 14px !important;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Shell */
#wrapper {
  min-height: 100vh;
}

#page-wrapper {
  min-height: calc(100vh - 51px);
  padding: var(--sgw-space-5);
  background: var(--sgw-surface-soft);
}

.sgw-shell .navbar,
.navbar.sgw-navbar {
  border: 0;
  background: var(--sgw-surface);
  box-shadow: 0 1px 4px rgba(38, 50, 56, .12);
}

.navbar.sgw-navbar,
.navbar.navbar-static-top.sgw-navbar {
  margin-bottom: 0 !important;
}

.navbar-brand.sgw-brand,
.authbar .navbar-brand {
  color: var(--sgw-ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 12px 16px;
}

.navbar-brand.sgw-brand strong,
.authbar .navbar-brand strong {
  color: var(--sgw-primary-dark);
}

.sgw-logout {
  display: inline-block;
  padding: 12px 16px !important;
  color: var(--sgw-ink) !important;
  font-weight: 600;
}

.sgw-logout:hover,
.sgw-logout:focus {
  color: var(--sgw-primary-dark) !important;
  background: var(--sgw-surface-soft) !important;
}

.sgw-login {
  display: flex;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #eef4f8 0%, #f8fafb 62%, #e5eef4 100%);
}

.sgw-login .container {
  width: 100%;
}

.sgw-login .login-panel {
  overflow: hidden;
  max-width: 430px;
  margin: 40px auto;
  border: 1px solid var(--sgw-border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(38, 50, 56, .14);
}

.sgw-login .login-panel .panel-heading {
  padding: 24px 28px 20px !important;
  text-align: center;
}

.sgw-login-title {
  margin: 0;
  color: var(--sgw-primary-dark);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: .04em;
}

.sgw-login-subtitle {
  margin: 4px 0 18px;
  color: var(--sgw-muted);
  font-size: 13px;
}

.sgw-login .panel-title {
  color: var(--sgw-ink);
  font-size: 17px;
  font-weight: 600;
  text-transform: none;
}

.sgw-login .login-panel .panel-body {
  padding: 28px;
}

.sgw-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sgw-space-4);
  margin: 0 0 var(--sgw-space-3);
  padding-bottom: var(--sgw-space-2);
  border-bottom: 1px solid var(--sgw-border);
}

.sgw-page-title {
  margin: 0;
  color: var(--sgw-ink);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
}

.sgw-page-subtitle,
.sgw-help,
.sgw-muted {
  color: var(--sgw-muted);
}

.sgw-page-subtitle {
  margin: var(--sgw-space-1) 0 0;
  font-size: 13px;
}

.sgw-breadcrumb {
  margin: 0 0 var(--sgw-space-3);
  padding: 0;
  color: var(--sgw-muted);
  font-size: 12px;
  list-style: none;
}

.sgw-breadcrumb > li {
  display: inline;
}

.sgw-breadcrumb > li + li:before {
  padding: 0 6px;
  color: #9aa8b1;
  content: "/\00a0";
}

/* Navigation */
.sgw-shell .sidebar {
  background: var(--sgw-sidebar);
  border-right: 1px solid #1b252a;
  box-shadow: 2px 0 8px rgba(17, 24, 39, .12);
}

.sgw-shell .sidebar ul li {
  border-bottom-color: rgba(255, 255, 255, .08);
}

.sgw-shell .sidebar .nav > li > a {
  color: #edf2f4;
}

.sgw-shell .sidebar .nav > li > a .fa {
  color: #b8d1dc;
}

.sgw-shell .sidebar .nav > li > a:hover,
.sgw-shell .sidebar .nav > li > a:focus,
.sgw-shell .sidebar .nav > li.active > a,
.sgw-shell .sidebar ul li a.active {
  color: #fff;
  background: #315c73;
}

.sgw-shell .sidebar .nav-second-level,
.sgw-shell .sidebar .nav-third-level {
  position: relative;
  padding-top: 3px;
  padding-bottom: 3px;
  background: var(--sgw-sidebar-submenu);
}

.sgw-shell .sidebar .nav-third-level {
  background: var(--sgw-sidebar-submenu-nested);
}

.sgw-shell .sidebar .nav-second-level::before,
.sgw-shell .sidebar .nav-third-level::before {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--sgw-sidebar-tree-line);
  content: "";
}

.sgw-shell .sidebar .nav-second-level::before {
  left: 19px;
}

.sgw-shell .sidebar .nav-third-level::before {
  left: 36px;
}

.sgw-shell .sidebar .nav-second-level > li > a,
.sgw-shell .sidebar .nav-third-level > li > a {
  color: #e1eaee;
}

.sgw-shell .sidebar .nav-second-level > li > a .fa,
.sgw-shell .sidebar .nav-third-level > li > a .fa {
  color: #a8c4d0;
}

.sidebar .nav > li > a {
  padding: 10px 15px;
  font-size: 13px;
  line-height: 1.35;
}

.sidebar .nav > li > a:hover,
.sidebar .nav > li > a:focus,
.sidebar .nav > li.active > a {
  color: #fff;
  background: rgba(255, 255, 255, .12);
}

.sgw-shell .sidebar .nav-second-level > li > a,
.sgw-shell .sidebar .nav-third-level > li > a {
  position: relative;
  padding-top: 7px;
  padding-right: 15px;
  padding-bottom: 7px;
  color: #d6e0e5;
  font-size: 12px;
}

.sgw-shell .sidebar .nav-second-level > li > a {
  padding-left: var(--sgw-sidebar-tree-indent-2);
}

.sgw-shell .sidebar .nav-third-level > li > a {
  padding-left: var(--sgw-sidebar-tree-indent-3);
}

.sgw-shell .sidebar .nav-second-level > li > a::before,
.sgw-shell .sidebar .nav-third-level > li > a::before {
  position: absolute;
  top: 50%;
  width: 8px;
  border-top: 1px solid var(--sgw-sidebar-tree-line);
  content: "";
}

.sgw-shell .sidebar .nav-second-level > li > a::before {
  left: 19px;
}

.sgw-shell .sidebar .nav-third-level > li > a::before {
  left: 36px;
}

.sidebar .nav-second-level > li > a:hover,
.sidebar .nav-third-level > li > a:hover,
.sidebar .nav-second-level > li > a:focus,
.sidebar .nav-third-level > li > a:focus {
  background: var(--sgw-sidebar-submenu-hover);
}

/* Surfaces and sections */
.panel {
  border: 1px solid var(--sgw-border);
  border-radius: var(--sgw-radius);
  background: var(--sgw-surface);
  box-shadow: 0 2px 7px rgba(38, 50, 56, .07);
}

.panel-heading {
  min-height: 36px;
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--sgw-border) !important;
  border-radius: var(--sgw-radius) var(--sgw-radius) 0 0;
  background: var(--sgw-surface-soft) !important;
  color: var(--sgw-ink) !important;
  font-size: 15px;
  font-weight: 600;
}

.panel-body {
  padding: var(--sgw-space-4);
}

.sgw-section {
  margin: 0 0 var(--sgw-space-4);
  padding: var(--sgw-space-4);
  border: 1px solid var(--sgw-border);
  border-radius: var(--sgw-radius);
  background: var(--sgw-surface);
}

.sgw-section-title {
  margin: 0 0 var(--sgw-space-3);
  color: var(--sgw-ink);
  font-size: 15px;
  font-weight: 600;
}

.sgw-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sgw-space-2);
  margin: 0 0 var(--sgw-space-5);
}

.sgw-quick-actions .btn {
  min-width: 150px;
}

.sgw-dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sgw-space-2);
}

.sgw-dashboard-actions > .btn,
.sgw-dashboard-actions > a.btn {
  margin: 0;
}

.sgw-dashboard-actions .panel-collapse {
  flex: 1 1 100%;
  order: 10;
}

.sgw-dashboard-actions .panel-body {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sgw-space-2);
  padding: var(--sgw-space-3) 0;
}

/* Forms and controls */
label {
  color: var(--sgw-ink);
  font-weight: 600;
  margin-bottom: var(--sgw-space-1);
}

.form-group {
  margin-bottom: var(--sgw-space-2);
}

.form-control,
select.form-control,
textarea.form-control,
input.form-control {
  min-height: 34px;
  border: 1px solid #b8c5cd;
  border-radius: 4px;
  color: var(--sgw-ink);
  font-size: 14px !important;
  line-height: 1.25;
  box-shadow: none;
}

textarea.form-control {
  min-height: 72px;
  resize: vertical;
}

.form-control::placeholder {
  color: #7a8a94;
  opacity: 1;
}

.form-control:focus,
select:focus,
textarea:focus,
input:focus,
button:focus,
a:focus {
  border-color: var(--sgw-focus);
  outline: 3px solid rgba(29, 117, 189, .25);
  outline-offset: 1px;
  box-shadow: none;
}

.sgw-help {
  display: block;
  margin-top: var(--sgw-space-1);
  font-size: 12px;
}

.sgw-form-error {
  margin: 6px 0 0;
  color: var(--sgw-danger);
  font-size: 12px;
  font-weight: 600;
}

.editing-input {
  width: 100%;
  min-width: 70px;
}

.sgw-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sgw-space-2);
  margin-top: var(--sgw-space-3);
}

.btn {
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-primary {
  border-color: var(--sgw-primary);
  background: var(--sgw-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  border-color: var(--sgw-primary-dark);
  background: var(--sgw-primary-dark);
}

.btn-success { background: var(--sgw-success); border-color: var(--sgw-success); }
.btn-warning { background: var(--sgw-warning); border-color: var(--sgw-warning); color: #fff; }
.btn-danger { background: var(--sgw-danger); border-color: var(--sgw-danger); }

.btn[disabled],
.btn.disabled,
button:disabled {
  cursor: not-allowed;
  opacity: .6;
}

/* Tables */
.dataTable_wrapper,
.table-responsive,
.sgw-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  margin-bottom: var(--sgw-space-3);
  color: var(--sgw-ink);
  font-size: 12.5px;
  line-height: 1.2;
}

.table > caption {
  padding: 0 0 var(--sgw-space-1);
  color: var(--sgw-ink);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}

.table > thead > tr > th {
  padding: 6px 8px;
  border-bottom: 2px solid #c8d3da;
  background: var(--sgw-surface-soft);
  color: #43545f;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.table > tbody > tr > td {
  padding: 4px 8px;
  vertical-align: middle;
}

/* DataTables agrega una regla más específica que la tabla Bootstrap. Esta
 * variante mantiene la misma densidad en los listados con paginación y
 * búsqueda, sin alterar su comportamiento. */
.sgw-shell table.dataTable > thead > tr > th,
.sgw-shell table.dataTable > tbody > tr > td {
  padding: 4px 8px;
}

.sgw-shell table.dataTable > tbody > tr > td .btn {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: #fbfcfd;
}

.table-hover > tbody > tr:hover {
  background: #eef5fa;
}

.table .text-right,
.table td.numeric,
.table th.numeric {
  text-align: right;
}

.table .text-center,
.table td.actions,
.table th.actions {
  text-align: center;
}

/*
 * El panel muestra muchas filas de consulta y todas incluyen una acción.
 * La densidad se ajusta sólo aquí para no comprimir formularios ni tablas
 * operativas donde los controles necesitan más espacio.
 */
.sgw-dashboard-table {
  margin-bottom: 0;
  font-size: 12px;
  line-height: 1.2;
}

.sgw-dashboard-table > thead > tr > th {
  padding: 6px 8px;
}

.sgw-dashboard-table > tbody > tr > td {
  padding: 4px 8px;
}

.sgw-dashboard-table .btn {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
}

.sgw-empty-state {
  padding: 32px 16px;
  color: var(--sgw-muted);
  text-align: center;
}

.sgw-empty-state strong {
  display: block;
  margin-bottom: var(--sgw-space-2);
  color: var(--sgw-ink);
  font-size: 15px;
}

.sgw-alert {
  border-radius: var(--sgw-radius);
  box-shadow: inset 3px 0 0 var(--sgw-focus);
}

/* Responsive behavior for small screens */
@media (max-width: 767px) {
  #page-wrapper {
    margin: 0;
    padding: 12px;
  }

  .navbar-brand.sgw-brand,
  .authbar .navbar-brand {
    max-width: calc(100vw - 80px);
    overflow: hidden;
    padding-left: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sgw-page-header {
    display: block;
  }

  .sgw-page-title {
    font-size: 21px;
  }

  .sgw-quick-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sgw-quick-actions .btn {
    width: 100%;
  }

  .sgw-actions .btn {
    flex: 1 1 auto;
  }

  .table {
    min-width: 640px;
  }

  .table > thead > tr > th,
  .table > tbody > tr > td {
    padding: 8px;
  }

  .form-control,
  select.form-control,
  textarea.form-control,
  input.form-control {
    min-height: 38px;
  }

  .btn {
    min-height: 36px;
    padding: 8px 12px;
  }

  .sgw-dashboard-table > thead > tr > th,
  .sgw-dashboard-table > tbody > tr > td {
    padding: 8px;
  }

  .sgw-shell table.dataTable > thead > tr > th,
  .sgw-shell table.dataTable > tbody > tr > td {
    padding: 8px;
  }

  .sgw-shell table.dataTable > tbody > tr > td .btn {
    min-height: 36px;
    padding: 8px 12px;
  }

  .sgw-dashboard-table .btn {
    min-height: 36px;
    padding: 8px 12px;
  }
}

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