/* ============================================================
   MARCOSSTIC — brand-control.css
   ------------------------------------------------------------
   Capa visual del panel /control/, login y páginas de error.

   NO se carga en la tienda ni en el widget: esos siguen usando
   los ajustes nativos de Pretix (theme.css) y brand-base.css.

   Depende de brand-base.css para las variables --ms-*.
   Generado por branding/scripts/generar_ui.py a partir de
   branding/tokens/brand.json. No editar el archivo de dist.
   ============================================================ */

/* ------------------------------------------------------------
   1. Variables nativas de Pretix
   ------------------------------------------------------------
   El panel compila Bootstrap con su morado por defecto. Al
   redefinir las variables --pretix-brand-* en :root, todos los
   componentes que ya las consumen (botones, enlaces, pestañas,
   etiquetas, paginación) adoptan el azul Marcosstic sin tocar
   el SCSS compilado ni el núcleo de Pretix.
   ------------------------------------------------------------ */
:root {
  --pretix-brand-primary: #005CE6;
  --pretix-link-contrast-color: #005CE6;
  --pretix-link-hover-contrast-color: #0047B2;
  --pretix-brand-primary-lighten-5: #0066ff;
  --pretix-brand-primary-lighten-20: #4d94ff;
  --pretix-brand-primary-lighten-30: #80b3ff;
  --pretix-brand-primary-lighten-40: #b3d1ff;
  --pretix-brand-primary-lighten-48: #dceaff;
  --pretix-brand-primary-lighten-50: #e6f0ff;
  --pretix-brand-primary-lighten-53: #f5f9ff;
  --pretix-brand-primary-lighten-55: #ffffff;
  --pretix-brand-primary-darken-5: #0052cd;
  --pretix-brand-primary-darken-10: #0048b3;
  --pretix-brand-primary-darken-15: #003d9a;
  --pretix-brand-primary-darken-17: #00398f;
  --pretix-brand-primary-darken-20: #003380;
  --pretix-brand-primary-darken-30: #001f4d;
  --pretix-brand-primary-tint-90: #e6effd;
  --pretix-brand-primary-shade-25: #0045ad;
  --pretix-brand-primary-shade-42: #003585;
  --pretix-brand-primary-lighten-28-saturate-20: #76adff;
  --pretix-brand-primary-lighten-23-saturate-2: #5c9dff;
  --pretix-brand-success: #408252;
  --pretix-brand-success-lighten-10: #51a468;
  --pretix-brand-success-lighten-20: #70b883;
  --pretix-brand-success-lighten-30: #92c9a1;
  --pretix-brand-success-lighten-35: #a3d2b0;
  --pretix-brand-success-lighten-38: #add7b8;
  --pretix-brand-success-lighten-40: #b4dabe;
  --pretix-brand-success-lighten-48: #cfe8d6;
  --pretix-brand-success-lighten-50: #d6ebdc;
  --pretix-brand-success-darken-5: #387147;
  --pretix-brand-success-darken-10: #2f603c;
  --pretix-brand-success-darken-12: #2c5938;
  --pretix-brand-success-darken-15: #274f32;
  --pretix-brand-success-darken-17: #23482d;
  --pretix-brand-success-darken-20: #1e3e27;
  --pretix-brand-success-darken-30: #0e1b11;
  --pretix-brand-success-tint-50: #a0c1a9;
  --pretix-brand-success-tint-85: #e2ece5;
  --pretix-brand-success-shade-25: #30623e;
  --pretix-brand-success-shade-42: #254b30;
  --pretix-brand-danger: #C44F4F;
  --pretix-brand-danger-lighten-5: #ca6262;
  --pretix-brand-danger-lighten-15: #d78888;
  --pretix-brand-danger-lighten-25: #e4aeae;
  --pretix-brand-danger-lighten-30: #eac2c2;
  --pretix-brand-danger-lighten-33: #eecdcd;
  --pretix-brand-danger-lighten-43: #fbf3f3;
  --pretix-brand-danger-lighten-45: #fefbfb;
  --pretix-brand-danger-darken-5: #bb3f3f;
  --pretix-brand-danger-darken-10: #a83838;
  --pretix-brand-danger-darken-15: #953232;
  --pretix-brand-danger-darken-17: #8d2f2f;
  --pretix-brand-danger-darken-20: #822b2b;
  --pretix-brand-danger-darken-30: #5b1f1f;
  --pretix-brand-danger-tint-50: #e2a7a7;
  --pretix-brand-danger-tint-85: #f6e5e5;
  --pretix-brand-danger-shade-25: #933b3b;
  --pretix-brand-danger-shade-42: #722e2e;
  --pretix-border-radius-small: 4px;
  --pretix-border-radius-base: 6px;
  --pretix-border-radius-large: 10px;
  --pretix-body-bg: #FFFFFF;
}

/* ------------------------------------------------------------
   2. Estructura general del panel
   ------------------------------------------------------------ */
body {
  background: var(--ms-color-surface-muted);
  color: var(--ms-color-text);
}

#wrapper {
  background: var(--ms-color-surface-muted);
}

#page-wrapper {
  background: var(--ms-color-surface-muted);
  border-left: 1px solid var(--ms-color-border-soft);
}

#page-wrapper > .container-fluid {
  padding-top: 8px;
  padding-bottom: 24px;
}

#page-wrapper footer {
  margin-top: 24px;
  padding: 16px 0 8px;
  border-top: 1px solid var(--ms-color-border-soft);
  color: var(--ms-color-text-muted);
  font-size: 12px;
}

/* ------------------------------------------------------------
   3. Barra superior
   ------------------------------------------------------------ */
.navbar.navbar-inverse {
  background: var(--ms-color-ink);
  border-color: var(--ms-color-ink);
  box-shadow: var(--ms-shadow-sm);
}

.navbar-inverse .navbar-brand {
  color: var(--ms-color-surface);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: var(--ms-color-surface);
  background: rgba(255, 255, 255, 0.06);
}

/* W5.1: el logo del panel se sirve con URL propia y versionada.
   No se reutiliza el nombre con hash de Pretix, que puede seguir
   cacheado en el navegador con el icono antiguo. */
.navbar-brand img {
  content: url("logos/logo-icon.svg?v=w5.1");
}

/* W5.1: login y páginas de error usan la misma solución. La regla
   cubre cualquier plantilla de error que conserve el <img class="logo">
   nativo, aunque su src siga apuntando al archivo de Pretix. */
img.logo {
  content: url("logos/logo-horizontal-dark.svg?v=w5.1");
}

.navbar-inverse .navbar-nav > li > a {
  color: var(--ms-color-text-on-dark);
  font-weight: 600;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: var(--ms-color-surface);
  background: rgba(255, 255, 255, 0.09);
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  color: var(--ms-color-surface);
  background: var(--ms-color-ink-soft);
}

.navbar-inverse .navbar-nav > .disabled > a,
.navbar-inverse .navbar-nav > .disabled > a:hover,
.navbar-inverse .navbar-nav > .disabled > a:focus {
  color: var(--ms-color-muted);
}

nav.navbar .danger,
nav.navbar .danger:hover,
nav.navbar .danger:active {
  background-color: var(--ms-color-danger) !important;
}

.navbar-inverse .navbar-toggle {
  border-color: rgba(255, 255, 255, 0.32);
}

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background: var(--ms-color-ink-soft);
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: var(--ms-color-ink-soft);
}

/* ------------------------------------------------------------
   4. Barra lateral y selector de contexto
   ------------------------------------------------------------ */
.navbar-default.sidebar {
  background: var(--ms-color-surface);
  border-right: 1px solid var(--ms-color-border-soft);
}

.sidebar .sidebar-nav {
  background: transparent;
}

.sidebar ul li {
  border-bottom-color: var(--ms-color-border-soft);
}

.sidebar ul li a {
  color: var(--ms-color-text);
  font-weight: 500;
}

.sidebar ul li a:hover,
.sidebar ul li a:focus {
  color: var(--ms-color-primary);
  background: var(--ms-color-surface-muted);
  text-decoration: none;
}

.sidebar ul li a.active {
  color: var(--ms-color-primary);
  background: var(--ms-color-primary-tint-90);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--ms-color-primary);
}

.sidebar ul li a.active .fa,
.sidebar ul li a:hover .fa {
  color: var(--ms-color-primary);
}

.sidebar .nav-second-level li a {
  color: var(--ms-color-text-muted);
  font-weight: 500;
}

.sidebar .nav-second-level li a:hover,
.sidebar .nav-second-level li a.active {
  color: var(--ms-color-primary);
  background: var(--ms-color-primary-tint-90);
  box-shadow: none;
}

.sidebar .context-selector {
  border-bottom-color: var(--ms-color-border-soft);
}

.sidebar .context-selector > a:hover,
.sidebar .context-selector > a:focus,
.sidebar .context-selector.open > a {
  background: var(--ms-color-surface-muted);
}

.sidebar .context-selector .fa-stack .fa-circle {
  color: var(--ms-color-primary-tint-90);
}

.sidebar .context-selector .fa-stack .fa-inverse {
  color: var(--ms-color-primary);
}

.sidebar .context-selector .context-name {
  color: var(--ms-color-text);
  font-weight: 700;
}

.sidebar .context-selector .context-meta {
  color: var(--ms-color-text-muted);
  opacity: 1;
}

.sidebar-content {
  color: var(--ms-color-text-muted);
}

/* ------------------------------------------------------------
   5. Tipografía del contenido
   ------------------------------------------------------------ */
#page-wrapper h1,
#page-wrapper h2,
#page-wrapper h3,
#page-wrapper h4,
#page-wrapper h5,
#page-wrapper h6 {
  color: var(--ms-color-ink);
  letter-spacing: -0.02em;
}

#page-wrapper h1 {
  font-weight: 800;
}

#page-wrapper h2,
#page-wrapper h3 {
  font-weight: 700;
}

#page-wrapper .text-muted,
#page-wrapper .help-block {
  color: var(--ms-color-text-muted) !important;
}

#page-wrapper .page-header {
  margin-top: 20px;
  border-bottom-color: var(--ms-color-border-soft);
}

#page-wrapper hr {
  border-top-color: var(--ms-color-border-soft);
}

/* ------------------------------------------------------------
   6. Botones
   ------------------------------------------------------------ */
.btn {
  border-radius: var(--ms-radius-base);
  font-weight: 600;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.btn:focus-visible,
.btn:active:focus {
  outline: var(--ms-focus-width) solid var(--ms-color-focus);
  outline-offset: var(--ms-focus-offset);
  box-shadow: 0 0 0 4px var(--ms-focus-ring);
}

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

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

.btn-primary:active,
.btn-primary.active,
.open > .btn-primary.dropdown-toggle {
  background-color: var(--ms-color-primary-active);
  border-color: var(--ms-color-primary-active);
}

.btn-success {
  background-color: var(--ms-color-success);
  border-color: var(--ms-color-success-hover);
}

.btn-success:hover,
.btn-success:focus,
.btn-success.focus {
  background-color: var(--ms-color-success-hover);
  border-color: var(--ms-color-success-hover);
}

.btn-danger {
  background-color: var(--ms-color-danger);
  border-color: var(--ms-color-danger-hover);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus {
  background-color: var(--ms-color-danger-hover);
  border-color: var(--ms-color-danger-hover);
}

.btn-default {
  background: var(--ms-color-surface);
  border-color: var(--ms-color-border-ui);
}

.btn-default:hover,
.btn-default:focus,
.btn-default.focus {
  background: var(--ms-color-surface-muted);
  border-color: var(--ms-color-text-muted);
}

.btn-link {
  color: var(--ms-color-primary);
  font-weight: 600;
}

.btn-link:hover,
.btn-link:focus {
  color: var(--ms-color-primary-hover);
  text-decoration: underline;
}

/* ------------------------------------------------------------
   7. Formularios
   ------------------------------------------------------------ */
.form-control {
  color: var(--ms-color-text);
  background-color: var(--ms-color-surface);
  border-color: var(--ms-color-border-ui);
  border-radius: var(--ms-radius-base);
  box-shadow: none;
}

.form-control:focus {
  border-color: var(--ms-color-primary);
  box-shadow: 0 0 0 3px var(--ms-focus-ring);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: var(--ms-color-surface-muted);
  color: var(--ms-color-text-muted);
}

.form-control::placeholder {
  color: var(--ms-color-muted);
  opacity: 1;
}

.control-label {
  color: var(--ms-color-text);
  font-weight: 600;
}

.help-block {
  color: var(--ms-color-text-muted);
}

.input-group-addon {
  color: var(--ms-color-text-muted);
  background-color: var(--ms-color-surface-muted);
  border-color: var(--ms-color-border-ui);
  border-radius: var(--ms-radius-base);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--ms-color-primary);
}

.has-error .form-control,
.has-error .form-control:focus {
  border-color: var(--ms-color-danger);
}

.has-error .form-control:focus {
  box-shadow: 0 0 0 3px rgba(196, 79, 79, 0.2);
}

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
  color: var(--ms-color-danger-text);
}

.has-success .form-control,
.has-success .form-control:focus {
  border-color: var(--ms-color-success);
}

.has-success .form-control:focus {
  box-shadow: 0 0 0 3px rgba(64, 130, 82, 0.2);
}

.has-success .help-block,
.has-success .control-label {
  color: var(--ms-color-success-text);
}

/* ------------------------------------------------------------
   8. Tarjetas, paneles y cajas
   ------------------------------------------------------------ */
.panel {
  background: var(--ms-color-surface);
  border-color: var(--ms-color-border-soft);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-sm);
}

.panel-default {
  border-color: var(--ms-color-border-soft);
}

.panel-default > .panel-heading,
.panel-default > legend > .panel-heading {
  color: var(--ms-color-text);
  background: var(--ms-color-surface-subtle);
  border-color: var(--ms-color-border-soft);
  border-top-left-radius: calc(var(--ms-radius-lg) - 1px);
  border-top-right-radius: calc(var(--ms-radius-lg) - 1px);
}

.panel-default > .panel-heading .panel-title,
.panel-default > legend > .panel-heading .panel-title {
  font-weight: 700;
}

.panel-footer {
  background: var(--ms-color-surface-subtle);
  border-top-color: var(--ms-color-border-soft);
}

.panel-primary {
  border-color: var(--ms-color-primary);
}

.panel-primary > .panel-heading {
  background: var(--ms-color-primary);
  border-color: var(--ms-color-primary);
}

.panel-success {
  border-color: var(--ms-color-success-border);
}

.panel-success > .panel-heading {
  background: var(--ms-color-success-bg);
  border-color: var(--ms-color-success-border);
  color: var(--ms-color-success-text);
}

.panel-danger {
  border-color: var(--ms-color-danger-border);
}

.panel-danger > .panel-heading {
  background: var(--ms-color-danger-bg);
  border-color: var(--ms-color-danger-border);
  color: var(--ms-color-danger-text);
}

.well {
  background: var(--ms-color-surface-subtle);
  border-color: var(--ms-color-border-soft);
  border-radius: var(--ms-radius-lg);
  box-shadow: none;
}

.breadcrumb {
  background: transparent;
  padding-left: 0;
}

.breadcrumb > .active {
  color: var(--ms-color-text-muted);
}

/* ------------------------------------------------------------
   9. Tablas
   ------------------------------------------------------------ */
.table > thead > tr > th,
.table > thead > tr > td {
  color: var(--ms-color-text);
  background: var(--ms-color-surface-subtle);
  border-bottom: 2px solid var(--ms-color-border-soft);
  font-weight: 700;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th {
  border-top-color: var(--ms-color-border-soft);
}

.table > tbody > tr > th,
tbody th {
  background: var(--ms-color-surface-subtle);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: var(--ms-color-surface-subtle);
}

.table-hover > tbody > tr:hover {
  background: var(--ms-color-surface-muted);
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td {
  border-color: var(--ms-color-border-soft);
}

/* ------------------------------------------------------------
   10. Pestañas, píldoras y paginación
   ------------------------------------------------------------ */
.nav-tabs {
  border-bottom-color: var(--ms-color-border-soft);
}

.nav-tabs > li > a {
  color: var(--ms-color-text-muted);
  font-weight: 600;
  border-radius: var(--ms-radius-base) var(--ms-radius-base) 0 0;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  color: var(--ms-color-primary);
  background: var(--ms-color-surface-muted);
  border-color: transparent;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--ms-color-primary);
  background: var(--ms-color-surface);
  border-color: var(--ms-color-border-soft);
  border-bottom-color: transparent;
  box-shadow: inset 0 2px 0 var(--ms-color-primary);
}

.tab-content {
  background: var(--ms-color-surface);
  border-color: var(--ms-color-border-soft);
  border-radius: 0 var(--ms-radius-lg) var(--ms-radius-lg) var(--ms-radius-lg);
}

.nav-pills > li > a {
  color: var(--ms-color-primary);
  font-weight: 600;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: var(--ms-color-surface);
  background: var(--ms-color-primary);
}

.pagination > li > a,
.pagination > li > span {
  color: var(--ms-color-primary);
  background: var(--ms-color-surface);
  border-color: var(--ms-color-border-soft);
}

.pagination > li > a:hover,
.pagination > li > a:focus,
.pagination > li > span:hover,
.pagination > li > span:focus {
  color: var(--ms-color-primary-hover);
  background: var(--ms-color-surface-muted);
  border-color: var(--ms-color-border-soft);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
  color: var(--ms-color-surface);
  background: var(--ms-color-primary);
  border-color: var(--ms-color-primary);
}

/* ------------------------------------------------------------
   11. Alertas y etiquetas
   ------------------------------------------------------------ */
.alert {
  border-radius: var(--ms-radius-lg);
}

.alert-success {
  color: var(--ms-color-success-text);
  background: var(--ms-color-success-bg);
  border-color: var(--ms-color-success-border);
  border-left: 4px solid var(--ms-color-success);
}

.alert-danger {
  color: var(--ms-color-danger-text);
  background: var(--ms-color-danger-bg);
  border-color: var(--ms-color-danger-border);
  border-left: 4px solid var(--ms-color-danger);
}

.alert-info {
  color: var(--ms-color-primary-active);
  background: var(--ms-color-primary-tint-90);
  border-color: var(--ms-color-primary-border);
  border-left: 4px solid var(--ms-color-primary);
}

.alert-warning {
  border-left: 4px solid #b27800;
}

.label-primary {
  background: var(--ms-color-primary);
}

.label-success {
  background: var(--ms-color-success);
}

.label-danger {
  background: var(--ms-color-danger);
}

/* ------------------------------------------------------------
   12. Desplegables, modales y diálogos
   ------------------------------------------------------------ */
.dropdown-menu {
  border-color: var(--ms-color-border-soft);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-md);
}

.dropdown-menu > li > a {
  color: var(--ms-color-text);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: var(--ms-color-primary);
  background: var(--ms-color-primary-tint-90);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: var(--ms-color-surface);
  background: var(--ms-color-primary);
}

.modal-content {
  border-color: var(--ms-color-border-soft);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-lg);
}

.modal-header,
.modal-footer {
  border-color: var(--ms-color-border-soft);
}

.modal-title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.modal-card {
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-lg);
}

/* ------------------------------------------------------------
   13. Select2, datepicker y typeahead
   ------------------------------------------------------------ */
.select2-container--bootstrap .select2-selection {
  color: var(--ms-color-text);
  background: var(--ms-color-surface);
  border-color: var(--ms-color-border-ui);
  border-radius: var(--ms-radius-base);
}

.select2-container--bootstrap.select2-container--focus .select2-selection,
.select2-container--bootstrap.select2-container--open .select2-selection {
  border-color: var(--ms-color-primary);
  box-shadow: 0 0 0 3px var(--ms-focus-ring);
}

.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
  color: var(--ms-color-text);
}

.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
  color: var(--ms-color-primary-active);
  background: var(--ms-color-primary-tint-90);
  border-color: var(--ms-color-primary-border);
  border-radius: var(--ms-radius-pill);
}

.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
  color: var(--ms-color-surface);
  background: var(--ms-color-primary);
}

.select2-dropdown {
  border-color: var(--ms-color-border-soft);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-md);
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
  background: var(--ms-color-primary);
  text-shadow: none;
}

.bootstrap-datetimepicker-widget table td.today::before {
  border-bottom-color: var(--ms-color-primary);
}

.bootstrap-datetimepicker-widget a {
  color: var(--ms-color-primary);
}

.bootstrap-datetimepicker-widget .btn {
  color: var(--ms-color-text);
}

.tt-dropdown-menu,
.twitter-typeahead .tt-menu {
  background: var(--ms-color-surface);
  border-color: var(--ms-color-border-soft);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-md);
}

.twitter-typeahead .tt-suggestion.tt-cursor,
.twitter-typeahead .tt-suggestion:hover {
  color: var(--ms-color-surface);
  background: var(--ms-color-primary);
}

/* ------------------------------------------------------------
   14. Progreso y otros indicadores
   ------------------------------------------------------------ */
.progress {
  background: var(--ms-color-border-soft);
  border-radius: var(--ms-radius-pill);
}

.progress-bar {
  background-color: var(--ms-color-primary);
}

.progress-bar-success {
  background-color: var(--ms-color-success);
}

.progress-bar-danger {
  background-color: var(--ms-color-danger);
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  color: var(--ms-color-surface);
  background: var(--ms-color-primary);
  border-color: var(--ms-color-primary);
}

.list-group-item.active .list-group-item-text {
  color: var(--ms-color-primary-tint-90);
}

/* ------------------------------------------------------------
   15. Login y registro
   ------------------------------------------------------------ */
body.marcosstic-auth {
  background:
    radial-gradient(circle at 15% 0%, rgba(0, 92, 230, 0.08), transparent 45%),
    var(--ms-color-surface-muted);
  padding: 32px 0 48px;
}

.marcosstic-auth .container {
  max-width: 420px;
}

.marcosstic-auth .logo {
  width: 220px;
  margin-top: 8vh;
  margin-bottom: 28px;
}

.marcosstic-auth .form-signin {
  max-width: 380px;
  padding: 24px 24px 4px;
  background: var(--ms-color-surface);
  border: 1px solid var(--ms-color-border-soft);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-md);
}

.marcosstic-auth .form-signin h3 {
  margin-top: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.marcosstic-auth .form-signin .buttons .btn {
  min-width: 120px;
}

.marcosstic-auth .container > .alert,
.marcosstic-auth .impersonate-warning {
  max-width: 380px;
  border-radius: var(--ms-radius-lg);
}

.marcosstic-auth footer {
  color: var(--ms-color-text-muted);
  font-size: 12px;
}

/* ------------------------------------------------------------
   16. Páginas de error 404/500
   ------------------------------------------------------------ */
body.marcosstic-error {
  background:
    radial-gradient(circle at 85% 0%, rgba(0, 92, 230, 0.08), transparent 45%),
    var(--ms-color-surface-muted);
  padding: 56px 0;
}

.marcosstic-error .container {
  max-width: 760px;
}

.marcosstic-error .big-icon {
  color: var(--ms-color-primary);
}

.marcosstic-error .error-details h1 {
  font-weight: 800;
  letter-spacing: -0.03em;
}

.marcosstic-error .error-details p {
  color: var(--ms-color-text-muted);
}

.marcosstic-error .logo {
  width: 190px;
  margin-top: 24px;
}

/* ------------------------------------------------------------
   17. Ajustes responsivos
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: var(--ms-color-text-on-dark);
  }

  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: var(--ms-color-surface);
    background: var(--ms-color-ink-soft);
  }

  .marcosstic-auth .logo {
    margin-top: 4vh;
  }

  .marcosstic-error {
    text-align: center;
    padding: 32px 0;
  }

  .marcosstic-error .error-details {
    margin-left: 0;
  }
}