:root {
  --md-primary: #1565c0;
  --md-primary-dark: #0d47a1;
  --md-primary-soft: #e3f2fd;
  --md-success: #2e7d32;
  --md-danger: #c62828;
  --md-warning: #ed6c02;
  --md-surface: #ffffff;
  --md-background: #f4f6f9;
  --md-border: #dce3ec;
  --md-text: #243044;
  --md-shadow-raised: 0 7px 22px rgba(15, 23, 42, .16);
}

html, body, .x-body {
  background: var(--md-background) !important;
  color: var(--md-text) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
}

.x-panel-body-default, .x-window-body-default {
  background-color: var(--md-surface);
  color: var(--md-text);
}

/* Botones Material. */
.x-btn-default-small {
  background: #fff !important;
  border: 1px solid #c8d1dc !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12) !important;
  transition: background-color .15s ease, box-shadow .15s ease,
              transform .15s ease !important;
}

.x-btn-default-small .x-btn-inner-default-small {
  color: #334155 !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.x-btn-default-small.x-btn-over, .x-btn-default-small:hover {
  background: #f8fafc !important;
  box-shadow: 0 3px 8px rgba(15, 23, 42, .18) !important;
}

.x-btn-default-small.x-btn-pressed {
  box-shadow: none !important;
  transform: translateY(1px);
}

.md-primary.x-btn-default-small, .md-primary .x-btn-default-small,
.md-success.x-btn-default-small, .md-success .x-btn-default-small,
.md-danger.x-btn-default-small, .md-danger .x-btn-default-small,
.md-warning.x-btn-default-small, .md-warning .x-btn-default-small {
  border-color: transparent !important;
}

.md-primary.x-btn-default-small, .md-primary .x-btn-default-small {
  background: var(--md-primary) !important;
}
.md-success.x-btn-default-small, .md-success .x-btn-default-small {
  background: var(--md-success) !important;
}
.md-danger.x-btn-default-small, .md-danger .x-btn-default-small {
  background: var(--md-danger) !important;
}
.md-warning.x-btn-default-small, .md-warning .x-btn-default-small {
  background: var(--md-warning) !important;
}

.md-primary .x-btn-inner, .md-primary.x-btn-default-small .x-btn-inner,
.md-success .x-btn-inner, .md-success.x-btn-default-small .x-btn-inner,
.md-danger .x-btn-inner, .md-danger.x-btn-default-small .x-btn-inner,
.md-warning .x-btn-inner, .md-warning.x-btn-default-small .x-btn-inner {
  color: #fff !important;
}

.md-secondary.x-btn-default-small, .md-secondary .x-btn-default-small {
  background: #eef2f6 !important;
  border-color: #cbd5e1 !important;
}

.x-btn-disabled {
  box-shadow: none !important;
  filter: grayscale(.35);
  opacity: .55 !important;
}

/* Campos. */
.x-form-text-default, .x-form-textarea,
.x-form-trigger-wrap-default, .x-form-field {
  background-color: #fff !important;
  color: var(--md-text) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
}

.x-form-text-default, .x-form-trigger-wrap-default, .x-form-textarea {
  border-color: #bcc8d6 !important;
  border-radius: 5px !important;
}

.x-form-trigger-wrap-default.x-form-trigger-wrap-focus,
.x-form-trigger-wrap-focus, .x-form-text-default:focus, .x-form-textarea:focus {
  border-color: var(--md-primary) !important;
  box-shadow: 0 0 0 2px rgba(21, 101, 192, .16) !important;
}

.x-form-item-label, .x-form-item-label-default,
.x-component-default.x-box-item {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

/* Barras y superficies. */
.md-appbar, .md-appbar .x-panel-body-default {
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid var(--md-border) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}

.md-workspace-card, .md-workspace-card .x-panel-body-default {
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid var(--md-border) !important;
}

.md-modal-toolbar, .md-modal-toolbar .x-panel-body-default {
  background: #f8fafc !important;
  border: 0 !important;
  border-bottom: 1px solid var(--md-border) !important;
}

/* Login. */
.md-login-card {
  background: #fff !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: var(--md-shadow-raised) !important;
  overflow: hidden;
}

.md-login-card .x-panel-body-default {
  background: #fff !important;
  border: 0 !important;
}

.md-login-button.x-btn-default-small, .md-login-button .x-btn-default-small {
  border-radius: 7px !important;
  box-shadow: 0 3px 8px rgba(21, 101, 192, .28) !important;
}

/* El boton de acceso usa el tamano "medium" de ExtJS. */
.md-login-button.x-btn-default-medium,
.md-login-button .x-btn-default-medium {
  background: var(--md-primary) !important;
  border: 1px solid var(--md-primary) !important;
  border-radius: 7px !important;
  box-shadow: 0 3px 8px rgba(21, 101, 192, .28) !important;
  transition: background-color .15s ease, box-shadow .15s ease,
              transform .15s ease !important;
}

.md-login-button .x-btn-inner-default-medium {
  color: #fff !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

.md-login-button.x-btn-default-medium:hover,
.md-login-button.x-btn-default-medium.x-btn-over {
  background: var(--md-primary-dark) !important;
  border-color: var(--md-primary-dark) !important;
  box-shadow: 0 5px 12px rgba(21, 101, 192, .34) !important;
}

.md-login-button.x-btn-default-medium.x-btn-pressed {
  box-shadow: 0 1px 4px rgba(21, 101, 192, .24) !important;
  transform: translateY(1px);
}

/* Grids. */
.md-data-grid, .md-data-grid .x-panel-body-default,
.md-data-grid .x-grid-view {
  background: #fff !important;
  border: 0 !important;
}

.x-grid-header-ct, .x-column-header {
  background: #eef3f8 !important;
  border-color: var(--md-border) !important;
}

.x-column-header-text, .x-column-header-inner {
  color: #475569 !important;
  font-weight: 600 !important;
}

.x-grid-item {
  color: #334155 !important;
  border-color: #e7ecf2 !important;
}

.x-grid-item:nth-child(even) .x-grid-cell {
  background-color: #fafcff;
}

.x-grid-item-over .x-grid-cell {
  background-color: #edf6ff !important;
}

.x-grid-item-selected .x-grid-cell {
  background-color: var(--md-primary-soft) !important;
  color: var(--md-primary-dark) !important;
}

.x-grid-cell, .x-grid-cell-inner {
  border-color: #e7ecf2 !important;
}

/* Ventanas y dialogos. */
.x-window-default {
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: var(--md-shadow-raised) !important;
  overflow: hidden;
}

.x-window-header-default-top, .x-window-header-default {
  background: var(--md-primary) !important;
  border: 0 !important;
}

.x-window-header-default .x-title-text,
.x-window-header-default-top .x-title-text {
  color: #fff !important;
  font-weight: 600 !important;
}

.x-message-box .x-window-body { padding: 12px !important; }
.x-mask { background: rgba(15, 23, 42, .34) !important; }

/* Navegacion lateral. */
.md-navigation, .md-navigation .x-treelist,
.md-navigation .x-treelist-container {
  background: #102a43 !important;
  color: #e2e8f0 !important;
  border: 0 !important;
}

.md-navigation .x-treelist-item-text,
.md-navigation .x-treelist-item-icon,
.md-navigation .x-treelist-item-expander {
  color: #e2e8f0 !important;
}

.md-navigation .x-treelist-row-over,
.md-navigation .x-treelist-item-selected > .x-treelist-row {
  background: rgba(255, 255, 255, .12) !important;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #eef2f6; }
::-webkit-scrollbar-thumb {
  background: #a8b5c5;
  border: 2px solid #eef2f6;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: #7e8da0; }