:root {
  --admin-bg: #F5F6F8;
  --admin-surface: #FFFFFF;
  --admin-sidebar-bg: #111318;
  --admin-topbar-bg: #FFFFFF;
  --admin-text: #1B1D23;
  --admin-text-secondary: #6D717A;
  --admin-border: #E4E6EA;

  --admin-primary: #7251E8;
  --admin-primary-hover: #5F3DDC;
  --admin-primary-active: #5535C9;
  --admin-primary-soft: #EDE9FF;
  --admin-mint: #39CDBB;
  --admin-mint-strong: #168F82;
  --admin-mint-soft: #DFFFF9;

  --admin-status-active: #16875D;
  --admin-status-active-bg: #E4F7EF;
  --admin-status-info: #2878C8;
  --admin-status-info-bg: #E7F2FC;
  --admin-status-warning: #B56A09;
  --admin-status-warning-bg: #FFF2D8;
  --admin-status-error: #C43D4B;
  --admin-status-error-bg: #FDEBED;
  --admin-status-pending: #7251E8;
  --admin-status-pending-bg: #EDE9FF;
  --admin-status-paused: #68707D;
  --admin-status-paused-bg: #EEF0F3;

  --bs-focus-ring-color: rgba(114, 81, 232, .25);

  /* Pantallas de acceso (login/recuperación): base cálida clara, independiente del panel autenticado */
  --auth-bg: #F4F3EF;
  --auth-bg-deep: #EDEBE3;
  --auth-surface: #FFFFFF;
  --auth-border: #E2DFD5;
  --auth-text: #17181C;
  --auth-text-secondary: #6E6B62;
  --auth-mint: #62F2DF;
  --auth-mint-hover: #47E6CE;
  --auth-mint-active: #33D3BB;
  --auth-mint-ring: #1FAE9C;
  --auth-violet-hairline: rgba(114, 81, 232, .14);
}

html, body {
  background-color: var(--admin-bg);
  color: var(--admin-text);
}

a {
  color: var(--admin-primary);
}
a:hover {
  color: var(--admin-primary-active);
}

.text-secondary {
  color: var(--admin-text-secondary) !important;
}

/* Botones */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--admin-primary);
  --bs-btn-border-color: var(--admin-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--admin-primary-hover);
  --bs-btn-hover-border-color: var(--admin-primary-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--admin-primary-active);
  --bs-btn-active-border-color: var(--admin-primary-active);
  --bs-btn-disabled-bg: var(--admin-primary);
  --bs-btn-disabled-border-color: var(--admin-primary);
  --bs-btn-focus-shadow-rgb: 114, 81, 232;
}

.btn-outline-primary {
  --bs-btn-color: var(--admin-primary);
  --bs-btn-border-color: var(--admin-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--admin-primary);
  --bs-btn-hover-border-color: var(--admin-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--admin-primary-active);
  --bs-btn-active-border-color: var(--admin-primary-active);
  --bs-btn-focus-shadow-rgb: 114, 81, 232;
}

.btn-link {
  --bs-btn-color: var(--admin-primary);
  --bs-btn-hover-color: var(--admin-primary-active);
}

/* Formularios */
.form-control, .form-select {
  border-color: var(--admin-border);
}
.form-control:focus, .form-select:focus {
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 .25rem rgba(114, 81, 232, .15);
}
.form-check-input:checked {
  background-color: var(--admin-primary);
  border-color: var(--admin-primary);
}
.form-check-input:focus {
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 .25rem rgba(114, 81, 232, .15);
}

/* Tarjetas y tablas */
.card {
  background-color: var(--admin-surface);
  border-color: var(--admin-border);
}
.table {
  --bs-table-bg: var(--admin-surface);
  --bs-table-border-color: var(--admin-border);
  color: var(--admin-text);
}

/* Badges de estado, reutilizables en Campañas/Órdenes/Pagos/Tickets */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 600;
}
.badge-status-active { color: var(--admin-status-active); background-color: var(--admin-status-active-bg); }
.badge-status-info { color: var(--admin-status-info); background-color: var(--admin-status-info-bg); }
.badge-status-warning { color: var(--admin-status-warning); background-color: var(--admin-status-warning-bg); }
.badge-status-error { color: var(--admin-status-error); background-color: var(--admin-status-error-bg); }
.badge-status-pending { color: var(--admin-status-pending); background-color: var(--admin-status-pending-bg); }
.badge-status-paused { color: var(--admin-status-paused); background-color: var(--admin-status-paused-bg); }

/* Shell autenticado: sidebar oscuro + topbar/contenido claro */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  width: 260px;
  flex-shrink: 0;
  background-color: var(--admin-sidebar-bg);
  color: #fff;
  padding: 1.25rem 1rem;
  transition: width .2s ease;
}

/* El sidebar de escritorio ocupa la ventana, no el alto del contenido: sin esto, una página larga (el Dashboard)
   empuja el pie del sidebar —"Mi perfil"/"Cerrar sesión"— fuera de la vista y hay que scrollear hasta abajo para
   salir del panel. La navegación es lo único que scrollea; marca y controles del pie quedan siempre visibles. */
@media (min-width: 992px) {
  .app-sidebar:not(.app-sidebar--offcanvas) {
    position: sticky;
    top: 0;
    height: 100vh;
    /* overflow visible a propósito (y el scroll acotado a __nav, más abajo): el menú de cuenta del pie se
       despliega FUERA de la caja del sidebar —como flyout a la derecha cuando está colapsado— y un
       overflow:hidden acá lo recortaba justo en el borde del rail. */
    overflow: visible;
    z-index: 1030;
  }
  .app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__nav {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
  }
  .app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__nav::-webkit-scrollbar {
    width: 6px;
  }
  .app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__nav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .18);
    border-radius: 999px;
  }
}
.app-sidebar--offcanvas {
  --bs-offcanvas-width: 260px;
  --bs-offcanvas-bg: var(--admin-sidebar-bg);
  --bs-offcanvas-color: #fff;
  padding: 1.25rem 1rem 0;
}
.app-sidebar--offcanvas .offcanvas-body {
  padding: 1rem 0 1.25rem;
}

/* Navigation rail: sidebar de escritorio colapsado a solo iconos (ver .js-sidebar-collapse-toggle en site.js).
   Dos formas de llegar a este estado:
   1) Preferencia explícita del usuario (cookie vts-admin-sidebar-collapsed, clase .app-shell--collapsed/--expanded).
   2) Sin preferencia explícita (recién llegado, sin cookie): nace colapsado y se adapta solo al ancho de pantalla
      vía la media query de abajo — rail en escritorios angostos (hasta xl), sidebar completo en pantallas anchas. */
.app-shell--collapsed .app-sidebar:not(.app-sidebar--offcanvas) {
  width: 84px;
}
.app-shell--expanded .app-sidebar:not(.app-sidebar--offcanvas) {
  width: 260px;
}
@media (max-width: 1199.98px) {
  .app-shell:not(.app-shell--collapsed):not(.app-shell--expanded) .app-sidebar:not(.app-sidebar--offcanvas) {
    width: 92px;
  }
}

.app-sidebar__brand {
  display: flex;
  align-items: center;
  padding: 0 .5rem 1.25rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.app-sidebar__logo-img {
  height: 56px;
  width: auto;
  max-width: 100%;
}
.app-sidebar__logo-img--mark {
  display: none;
}
.app-shell--collapsed .app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__brand {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
.app-shell--collapsed .app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__logo-img--full {
  display: none;
}
.app-shell--collapsed .app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__logo-img--mark {
  display: block;
  height: 48px;
}
@media (max-width: 1199.98px) {
  .app-shell:not(.app-shell--collapsed):not(.app-shell--expanded) .app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__brand {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  .app-shell:not(.app-shell--collapsed):not(.app-shell--expanded) .app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__logo-img--full {
    display: none;
  }
  .app-shell:not(.app-shell--collapsed):not(.app-shell--expanded) .app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__logo-img--mark {
    display: block;
    height: 48px;
  }
}

.app-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex: 1 1 auto;
}
.app-sidebar__nav .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .65rem;
  color: rgba(255, 255, 255, .7);
  padding: .6rem .75rem;
  border-radius: .5rem;
  font-size: .925rem;
}
.app-sidebar__nav .nav-link i {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.app-sidebar__nav-group {
  margin-top: .5rem;
}
.app-sidebar__nav-group-summary {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: rgba(255, 255, 255, .7);
  padding: .6rem .75rem;
  border-radius: .5rem;
  font-size: .925rem;
  cursor: pointer;
  list-style: none;
}
.app-sidebar__nav-group-summary::-webkit-details-marker {
  display: none;
}
.app-sidebar__nav-group-summary i:first-child {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.app-sidebar__nav-group-summary:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, .06);
}
.app-sidebar__nav-group-chevron {
  margin-left: auto;
  font-size: 1rem;
  transition: transform .15s ease;
}
.app-sidebar__nav-group[open] .app-sidebar__nav-group-chevron {
  transform: rotate(180deg);
}
.app-sidebar__nav-group-items {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding-left: 1.35rem;
  margin-top: .1rem;
}
.app-sidebar__nav .nav-link:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, .06);
}
.app-sidebar__nav .nav-link.active {
  color: #fff;
  background-color: rgba(255, 255, 255, .08);
}
.app-sidebar__nav .nav-link.active::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 15%;
  bottom: 15%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background-color: var(--admin-mint);
}
.app-shell--collapsed .app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__nav .nav-link,
.app-shell--collapsed .app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__nav-group-summary {
  justify-content: center;
  gap: 0;
}

/* Rótulos de texto (nombre de la opción / nombre del usuario) y grupo "Administración": aplanados en el rail
   colapsado, igual que cualquier otro ítem — sin indent, sin chevron; el nombre accesible viaja en aria-label */
.app-shell--collapsed .app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__nav-label,
.app-shell--collapsed .app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__nav-group-chevron {
  display: none;
}
.app-shell--collapsed .app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__nav-group-items {
  padding-left: 0;
}
@media (max-width: 1199.98px) {
  .app-shell:not(.app-shell--collapsed):not(.app-shell--expanded) .app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__nav .nav-link,
  .app-shell:not(.app-shell--collapsed):not(.app-shell--expanded) .app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__nav-group-summary {
    justify-content: center;
    gap: 0;
  }
  .app-shell:not(.app-shell--collapsed):not(.app-shell--expanded) .app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__nav-label,
  .app-shell:not(.app-shell--collapsed):not(.app-shell--expanded) .app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__nav-group-chevron {
    display: none;
  }
  .app-shell:not(.app-shell--collapsed):not(.app-shell--expanded) .app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__nav-group-items {
    padding-left: 0;
  }
}

/* Toggle de colapso + perfil del usuario, anclados al pie del sidebar (nav crece por flex:1 y los empuja hacia abajo) */
.app-sidebar__rail-controls {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding-top: .75rem;
  margin-top: .75rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.app-sidebar__collapse-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, .7);
  padding: .5rem .75rem;
  border-radius: .5rem;
  font-size: 1.1rem;
  line-height: 1;
}
.app-sidebar__collapse-toggle:hover,
.app-sidebar__collapse-toggle:focus-visible {
  color: #fff;
  background-color: rgba(255, 255, 255, .06);
}
.app-shell--collapsed .app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__collapse-toggle {
  justify-content: center;
}
@media (max-width: 1199.98px) {
  .app-shell:not(.app-shell--collapsed):not(.app-shell--expanded) .app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__collapse-toggle {
    justify-content: center;
  }
}

.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Sticky por la misma razón que el sidebar: en móvil el botón hamburguesa de esta barra es el único acceso al
   menú, y en una página larga quedaba enterrado arriba de todo. */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: var(--admin-topbar-bg);
  border-bottom: 1px solid var(--admin-border);
  padding: .85rem 1.5rem;
}
.app-topbar__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
}
.app-topbar__toggle {
  color: var(--admin-text);
  padding: .25rem .5rem;
  font-size: 1.25rem;
}

/* Perfil del usuario: vive en el pie del sidebar (_SidebarUserMenu.cshtml), fondo oscuro en ambos estados */
.app-sidebar__footer {
  width: 100%;
}
.app-sidebar__footer .dropdown {
  width: 100%;
}
.app-user-menu {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  padding: .3rem .75rem .3rem .3rem;
  background-color: transparent;
  color: #fff;
  text-align: left;
}
.app-user-menu:hover,
.app-user-menu:focus-visible {
  background-color: rgba(255, 255, 255, .06);
}
.app-user-menu__avatar {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.app-user-menu__name {
  font-size: .9rem;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-shell--collapsed .app-sidebar:not(.app-sidebar--offcanvas) .app-user-menu {
  justify-content: center;
  width: auto;
  padding: .3rem;
  gap: 0;
}
@media (max-width: 1199.98px) {
  .app-shell:not(.app-shell--collapsed):not(.app-shell--expanded) .app-sidebar:not(.app-sidebar--offcanvas) .app-user-menu {
    justify-content: center;
    width: auto;
    padding: .3rem;
    gap: 0;
  }
}

/* Desplegable del menú de cuenta: en el sidebar de escritorio se ancla acá por CSS (el toggle va con
   data-bs-display="static", sin Popper). Con el posicionamiento automático, el rail de 84px no daba ancho
   para un menú alineado a la derecha y Popper lo empujaba contra el borde izquierdo de la ventana, medio
   encima del propio rail. Abre siempre hacia arriba, porque vive pegado al fondo de la pantalla.
   En el offcanvas móvil NO se toca: ahí el nav puede ser corto (roles de solo lectura) y el cálculo
   automático de Bootstrap sigue siendo el que evita que el menú se corte contra el borde del panel. */
.app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__footer .dropdown-menu {
  top: auto;
  right: auto;
  bottom: calc(100% + .5rem);
  left: 0;
  min-width: 100%;
  --bs-dropdown-box-shadow: 0 .75rem 2rem rgba(17, 19, 24, .35);
}
/* Colapsado: flyout a la derecha del rail, alineado al pie del avatar — el ancho del rail no alcanza para
   mostrarlo debajo, así que sale por fuera sobre el contenido (de ahí el z-index del sidebar). */
.app-shell--collapsed .app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__footer .dropdown-menu {
  bottom: 0;
  left: calc(100% + .75rem);
  min-width: 13rem;
}
@media (max-width: 1199.98px) {
  .app-shell:not(.app-shell--collapsed):not(.app-shell--expanded) .app-sidebar:not(.app-sidebar--offcanvas) .app-sidebar__footer .dropdown-menu {
    bottom: 0;
    left: calc(100% + .75rem);
    min-width: 13rem;
  }
}

.app-content {
  flex: 1;
  padding: 1.5rem;
}

.app-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  padding: 1rem 1.5rem 1.5rem;
  color: var(--admin-text-secondary);
  font-size: .85rem;
}
.app-footer__powered-by a {
  color: var(--admin-text-secondary);
  text-decoration: underline;
}

/* Shell anónimo: pantallas de acceso (login/recuperación) — composición cálida clara de dos zonas */
.auth-body {
  background-color: var(--auth-bg);
  color: var(--auth-text);
}

.auth-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background-color: var(--auth-surface);
  border: 1px solid var(--auth-border);
  border-radius: .75rem;
  box-shadow: 0 1px 2px rgba(23, 24, 28, .03), 0 10px 28px rgba(23, 24, 28, .05);
  padding: 2.25rem 2rem;
}
.auth-card__brand {
  margin-bottom: 1.75rem;
}
.status-illustration {
  width: 100%;
  max-width: 280px;
  border-radius: .85rem;
  box-shadow: 0 10px 28px rgba(11, 13, 18, .18);
}

.auth-card__logo-img {
  height: 80px;
  width: auto;
  max-width: 100%;
}

/* Campos del login: superficies claras, foco menta */
.auth-card .form-label {
  color: var(--auth-text);
  font-weight: 600;
  font-size: .875rem;
}
.auth-card .input-group-text {
  background-color: var(--auth-surface);
  border-color: var(--auth-border);
  color: var(--auth-text-secondary);
}
.auth-card .input-group:focus-within .input-group-text {
  border-color: var(--auth-mint-ring);
}
.auth-card .form-control {
  background-color: var(--auth-surface);
  border-color: var(--auth-border);
  color: var(--auth-text);
  min-height: 2.75rem;
}
.auth-card .form-control::placeholder {
  color: var(--auth-text-secondary);
  opacity: .85;
}
.auth-card .form-control:hover {
  border-color: #C9C5B7;
}
.auth-card .form-control:focus {
  border-color: var(--auth-mint-ring);
  box-shadow: 0 0 0 .2rem rgba(31, 174, 156, .16);
}
.auth-card .form-control.input-validation-error,
.auth-card .form-control.is-invalid {
  border-color: var(--admin-status-error);
}
.auth-card .form-control.input-validation-error:focus,
.auth-card .form-control.is-invalid:focus {
  box-shadow: 0 0 0 .2rem rgba(196, 61, 75, .16);
}
.auth-card .field-validation-error {
  color: var(--admin-status-error);
  font-size: .8125rem;
}
.auth-card .form-control:disabled {
  background-color: var(--auth-bg-deep);
  color: var(--auth-text-secondary);
  opacity: 1;
}

/* Checkbox "Mantener sesión" */
.auth-card .form-check-input:checked {
  background-color: var(--auth-mint);
  border-color: var(--auth-mint);
}
.auth-card .form-check-input:focus {
  border-color: var(--auth-mint-ring);
  box-shadow: 0 0 0 .2rem rgba(31, 174, 156, .16);
}

/* Enlaces destacados */
.auth-card a {
  color: var(--auth-mint-ring);
  font-weight: 600;
}
.auth-card a:hover {
  color: var(--auth-mint-active);
}

/* Botón principal: menta con texto oscuro (mismo tratamiento que el isotipo oficial) */
.auth-card .btn-primary {
  --bs-btn-color: #111318;
  --bs-btn-bg: var(--auth-mint);
  --bs-btn-border-color: var(--auth-mint);
  --bs-btn-hover-color: #111318;
  --bs-btn-hover-bg: var(--auth-mint-hover);
  --bs-btn-hover-border-color: var(--auth-mint-hover);
  --bs-btn-active-color: #111318;
  --bs-btn-active-bg: var(--auth-mint-active);
  --bs-btn-active-border-color: var(--auth-mint-active);
  --bs-btn-disabled-bg: var(--auth-mint);
  --bs-btn-disabled-border-color: var(--auth-mint);
  --bs-btn-focus-shadow-rgb: 31, 174, 156;
  font-weight: 700;
}

.auth-panel .app-footer {
  padding: 1.5rem 0 0;
  justify-content: center;
  text-align: center;
}

/* Select2 (tema select2-bootstrap-5-theme ya provee la base; ajustes finos de foco) */
.select2-container--bootstrap-5 .select2-selection:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 .25rem rgba(114, 81, 232, .15);
}

@media (max-width: 991.98px) {
  .app-content {
    padding: 1.25rem;
  }
}

/* Panel visual de marca a la derecha, compartido por todo el flujo de Account (ver _AuthLayout.cshtml) */
.login-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.login-panel-col {
  flex: 1 1 auto;
}

.login-visual {
  display: none;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem 2rem;
  background-color: var(--auth-bg-deep);
}

.login-visual__shape-dark {
  position: absolute;
  left: -14%;
  bottom: -20%;
  width: 62%;
  height: 65%;
  background-color: var(--admin-sidebar-bg);
  clip-path: polygon(0 28%, 58% 0, 100% 52%, 42% 100%, 0 100%);
}

.login-visual__mint-plane {
  position: absolute;
  right: -10%;
  top: -12%;
  width: 58%;
  height: 58%;
  border-radius: 2.5rem;
  background-color: var(--auth-mint);
}

.login-visual__content {
  position: relative;
  z-index: 1;
  max-width: 420px;
}

.login-visual__eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--auth-text-secondary);
  margin-bottom: 1rem;
}
.login-visual__eyebrow span {
  display: inline-block;
  width: 1.5rem;
  height: 2px;
  background-color: var(--auth-mint-ring);
}

.login-visual__headline {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--auth-text);
  margin-bottom: .75rem;
}

.login-visual__subtext {
  font-size: 1rem;
  color: var(--auth-text-secondary);
  max-width: 340px;
  margin-bottom: 0;
}

.login-visual__extra {
  display: none;
  position: relative;
  margin-top: 2.5rem;
  height: 260px;
}

.login-visual__card {
  position: absolute;
  border-radius: .85rem;
  box-shadow: 0 10px 28px rgba(23, 24, 28, .12);
}
.login-visual__card--back {
  top: 10px;
  right: 0;
  width: 220px;
  height: 150px;
  padding: 1.25rem;
  background-color: var(--admin-sidebar-bg);
  transform: rotate(6deg);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.login-visual__skeleton {
  display: block;
  height: 6px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, .18);
  width: 70%;
}
.login-visual__skeleton--mint {
  width: 45%;
  background-color: var(--auth-mint);
}
.login-visual__card--front {
  top: 0;
  left: 0;
  width: 260px;
  padding: 1.1rem;
  background-color: var(--auth-surface);
  border: 1px solid var(--auth-border);
  transform: rotate(-4deg);
}
.login-visual__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .85rem;
}
.login-visual__card-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--auth-text);
  margin-bottom: .15rem;
}
.login-visual__card-subtitle {
  font-size: .7rem;
  color: var(--auth-text-secondary);
  margin-bottom: 0;
}
.login-visual__avatars {
  display: flex;
  gap: .35rem;
  margin-bottom: .85rem;
}
.login-visual__avatars span {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background-color: var(--auth-border);
}
.login-visual__avatar--mint {
  background-color: var(--auth-mint) !important;
}
.login-visual__avatar--violet {
  background-color: var(--admin-primary) !important;
}
.login-visual__progress {
  height: 6px;
  border-radius: 999px;
  background-color: var(--auth-border);
  margin-bottom: .85rem;
  overflow: hidden;
}
.login-visual__progress span {
  display: block;
  width: 62%;
  height: 100%;
  background-color: var(--auth-mint);
}
.login-visual__chip {
  width: 2rem;
  height: 2rem;
  border-radius: .6rem;
  background-color: var(--admin-mint-soft);
  color: var(--auth-mint-ring);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}
.login-visual__mark {
  position: absolute;
  top: -42px;
  right: -30px;
  width: 190px;
  height: auto;
  transform: rotate(-8deg);
  filter: drop-shadow(0 8px 16px rgba(23, 24, 28, .18));
}

@media (min-width: 768px) {
  .login-visual {
    display: flex;
  }
}

@media (min-width: 992px) {
  .login-shell {
    flex-direction: row;
  }
  .login-panel-col {
    flex: 1 1 50%;
  }
  .login-visual {
    flex: 1 1 50%;
    padding: 3rem;
  }
  .login-visual__extra {
    display: block;
  }
}

/* Los errores de validación (server-side y client-side) se muestran vía SweetAlert2 (site.js), nunca inline. */
.field-validation-error,
.validation-summary-errors {
  display: none !important;
}

/* Campos obligatorios: RequiredLabelTagHelper le agrega esta clase + un asterisco a cualquier
   <label asp-for="..."> cuyo campo sea obligatorio, sin que haga falta marcarlo a mano por formulario. */
.form-label--required {
  font-weight: 600;
}

/* Pantalla de Sorteos (DrawSessions/Edit): grilla de tarjetas grandes por premio, con efecto de revelado al
   sortear — requisito explícito del usuario de que esta pantalla sea llamativa, no un mantenedor plano más. */
.draw-card {
  border: none;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 .25rem .75rem rgba(23, 24, 28, .08);
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
  position: relative;
}
.draw-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 .75rem 1.5rem rgba(23, 24, 28, .12);
}
.draw-card__photo {
  height: 160px;
  background-color: var(--admin-primary-soft);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--admin-primary);
}
.draw-card__body {
  padding: 1.25rem;
}
.draw-card--pending {
  border-top: 4px solid var(--admin-mint);
}
.draw-card--pending .draw-card__draw-btn {
  animation: drawPulseGlow 2.4s ease-in-out infinite;
}
.draw-card--drawn {
  border-top: 4px solid var(--admin-status-active);
}
.draw-card__result {
  background-color: var(--admin-status-active-bg);
  border-radius: .6rem;
  padding: .85rem 1rem;
}
.draw-card__winner {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--admin-status-active);
}

/* Efecto de revelado: se activa solo en la tarjeta del premio recién sorteado (ver DrawSessions/Edit.cshtml),
   comparando TempData["DrawnPrizeId"] con el premio de cada tarjeta. */
.draw-card.is-revealing .draw-card__result {
  animation: drawRevealPop .6s cubic-bezier(.34, 1.56, .64, 1);
}
.draw-card.is-revealing {
  animation: drawRevealGlow 1.4s ease-out;
}
.confetti-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation-name: confettiFall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

@keyframes drawPulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(57, 205, 187, .45); }
  50% { box-shadow: 0 0 0 .5rem rgba(57, 205, 187, 0); }
}
@keyframes drawRevealPop {
  0% { transform: scale(.85); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes drawRevealGlow {
  0% { box-shadow: 0 0 0 0 rgba(22, 135, 93, 0); }
  30% { box-shadow: 0 0 0 .75rem rgba(22, 135, 93, .18); }
  100% { box-shadow: 0 0 0 0 rgba(22, 135, 93, 0); }
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(220px) rotate(540deg); opacity: 0; }
}

/* Confeti a pantalla completa para el modo presentación: misma pieza y mismo keyframe base, pero con una
   caída mucho más larga que la de una tarjeta de la consola. */
.confetti-piece--tall {
  width: 11px;
  height: 16px;
  animation-name: confettiFallTall;
}
@keyframes confettiFallTall {
  0% { transform: translateY(-5vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(900deg); opacity: 0; }
}

/* ==========================================================================
   Modo presentación (_PresenterLayout + DrawSessions/Live)
   Pantalla pensada para transmitir en vivo: fondo oscuro, sin cromo administrativo, todo en tamaño de
   escenario. Paleta propia derivada del sidebar oscuro, no de la superficie clara del panel.
   ========================================================================== */
.presenter-body {
  --presenter-bg: #0C0E13;
  --presenter-surface: #171A22;
  --presenter-text: #F4F5F7;
  --presenter-text-secondary: #9AA0AC;
  background: radial-gradient(circle at 50% 0%, #1D2130 0%, var(--presenter-bg) 60%);
  color: var(--presenter-text);
  min-height: 100vh;
}
.presenter-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.presenter-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.75rem;
  flex: 0 0 auto;
}
.presenter-topbar__logo {
  height: 26px;
  opacity: .75;
}
.presenter-topbar__actions {
  display: flex;
  gap: .5rem;
}
.presenter-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: .6rem;
  background: transparent;
  color: var(--presenter-text-secondary);
  font-size: 1.15rem;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.presenter-btn-ghost:hover {
  background-color: rgba(255, 255, 255, .08);
  color: var(--presenter-text);
}
.presenter-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.75rem 3rem;
}

.live-draw {
  position: relative;
  width: 100%;
  max-width: 60rem;
  text-align: center;
}
.live-draw__eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 600;
  color: var(--admin-mint);
  margin-bottom: 1.5rem;
}
.live-draw__prize {
  display: flex;
  align-items: center;
  gap: 2rem;
  text-align: left;
  background-color: var(--presenter-surface);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 1.25rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.live-draw__photo {
  flex: 0 0 clamp(8rem, 22vw, 13rem);
  aspect-ratio: 1;
  border-radius: 1rem;
  background-color: rgba(114, 81, 232, .18);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--admin-primary);
}
.live-draw__prize-info {
  min-width: 0;
}
.live-draw__title {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: .5rem;
}
.live-draw__desc {
  color: var(--presenter-text-secondary);
  margin-bottom: .75rem;
}
.live-draw__tickets {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--admin-mint);
  font-weight: 600;
  margin: 0;
}

.live-draw__stage {
  background-color: var(--presenter-surface);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 1.25rem;
  padding: 2rem 1.5rem;
  margin-bottom: 1.75rem;
}
.live-draw__stage--revealed {
  border-color: rgba(57, 205, 187, .45);
  background: linear-gradient(180deg, rgba(57, 205, 187, .12) 0%, var(--presenter-surface) 100%);
}
.live-draw__stage-label {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .75rem;
  font-weight: 600;
  color: var(--presenter-text-secondary);
  margin-bottom: .75rem;
}
.live-draw__winner {
  font-size: clamp(2rem, 7vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: .5rem;
}
.live-draw__code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(1rem, 2.6vw, 1.6rem);
  letter-spacing: .08em;
  color: var(--admin-mint);
  margin: 0;
}
.live-draw__meta {
  color: var(--presenter-text-secondary);
  font-size: .9rem;
  margin: .75rem 0 0;
}
/* Durante la ruleta el código baraja a máxima velocidad: sin ganador todavía, solo el efecto. */
.live-draw__stage.is-spinning .live-draw__code {
  animation: liveSpinPulse .4s ease-in-out infinite;
}
.live-draw__stage.is-revealing {
  animation: liveRevealPop .7s cubic-bezier(.34, 1.56, .64, 1);
}

.live-draw__countdown {
  background-color: var(--presenter-surface);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  margin-bottom: 1.75rem;
}
.live-draw__clock {
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.5rem, 9vw, 5rem);
  font-weight: 800;
  line-height: 1;
  margin: 0;
}

.live-draw__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  border: none;
  border-radius: 999px;
  padding: 1.1rem 3.5rem;
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #0C0E13;
  background: linear-gradient(135deg, var(--admin-mint) 0%, #62F2DF 100%);
  box-shadow: 0 .75rem 2rem rgba(57, 205, 187, .3);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.live-draw__btn:not(:disabled) {
  animation: drawPulseGlow 2.4s ease-in-out infinite;
}
.live-draw__btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 1rem 2.5rem rgba(57, 205, 187, .42);
}
.live-draw__btn:disabled {
  filter: grayscale(1);
  opacity: .4;
  cursor: not-allowed;
}
.live-draw__force {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.25rem;
  border: 1px solid rgba(196, 61, 75, .5);
  border-radius: .6rem;
  background: transparent;
  color: #E88892;
  font-size: .85rem;
  padding: .5rem 1rem;
}
.live-draw__force:hover {
  background-color: rgba(196, 61, 75, .14);
}
.live-draw__next {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
  color: var(--admin-mint);
  font-weight: 600;
  text-decoration: none;
}
.live-draw__next:hover {
  color: #62F2DF;
}

@keyframes liveSpinPulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
@keyframes liveRevealPop {
  0% { transform: scale(.9); opacity: 0; }
  60% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 767.98px) {
  .live-draw__prize {
    flex-direction: column;
    text-align: center;
  }
  .live-draw__photo {
    flex-basis: auto;
    width: min(60vw, 13rem);
  }
}

/* ============================================================================
   Dashboard
   Composición tomada del mockup de marca (tarjetas KPI con color de marca,
   listas con estado y progreso, banner ilustrado de cierre), traducida al tema
   claro del panel: el mockup es dark completo, pero la paleta del admin es
   contenido claro + sidebar oscuro y esa decisión no se toca acá.
   Las ilustraciones (assets/images/admin-*.png) traen fondo oscuro propio, así
   que todo lo que las muestre va montado sobre un panel oscuro; si no, se ven
   como un rectángulo negro pegado sobre la superficie clara.
   ========================================================================= */

.dash-greeting {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 700;
  margin-bottom: .2rem;
}
.dash-greeting__wave {
  display: inline-block;
  transform-origin: 70% 70%;
  animation: dashWave 2.4s ease-in-out 1s 2;
}
@keyframes dashWave {
  0%, 60%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(14deg); }
  20%, 40% { transform: rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dash-greeting__wave { animation: none; }
}

/* Tarjetas KPI: cifra grande, etiqueta arriba, nota de contexto abajo e ícono
   como marca de agua. Las dos primeras van en color de marca para dar jerarquía
   a lo que está pasando ahora (igual que el mockup); el resto, superficie clara. */
.dash-kpi {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--admin-border);
  border-radius: 1rem;
  background-color: var(--admin-surface);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.dash-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 .75rem 1.5rem rgba(27, 29, 35, .1);
  border-color: var(--admin-primary);
}
.dash-kpi__label {
  position: relative;
  z-index: 1;
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--admin-text-secondary);
  margin-bottom: .35rem;
}
.dash-kpi__value {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--admin-text);
}
.dash-kpi__note {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: .4rem;
  font-size: .78rem;
  color: var(--admin-text-secondary);
}
.dash-kpi__icon {
  position: absolute;
  right: .75rem;
  bottom: .5rem;
  font-size: 3.25rem;
  line-height: 1;
  color: var(--admin-text);
  opacity: .07;
  pointer-events: none;
}

.dash-kpi--mint {
  border-color: transparent;
  background: linear-gradient(135deg, #2FBFAE 0%, #168F82 100%);
}
.dash-kpi--violet {
  border-color: transparent;
  background: linear-gradient(135deg, var(--admin-primary) 0%, var(--admin-primary-active) 100%);
}
.dash-kpi--mint .dash-kpi__label,
.dash-kpi--violet .dash-kpi__label,
.dash-kpi--mint .dash-kpi__note,
.dash-kpi--violet .dash-kpi__note {
  color: rgba(255, 255, 255, .78);
}
.dash-kpi--mint .dash-kpi__value,
.dash-kpi--violet .dash-kpi__value,
.dash-kpi--mint .dash-kpi__icon,
.dash-kpi--violet .dash-kpi__icon {
  color: #fff;
}
.dash-kpi--mint .dash-kpi__icon,
.dash-kpi--violet .dash-kpi__icon {
  opacity: .22;
}
a.dash-kpi--mint:hover,
a.dash-kpi--violet:hover {
  border-color: transparent;
}

/* Chips de estado: el desglose completo del ciclo de vida, secundario frente a los KPI. */
.dash-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .75rem;
  border: 1px solid var(--admin-border);
  border-radius: 999px;
  background-color: var(--admin-surface);
  text-decoration: none;
  font-size: .8125rem;
  color: var(--admin-text-secondary);
  transition: border-color .15s ease, color .15s ease;
}
.dash-chip:hover {
  border-color: var(--admin-primary);
  color: var(--admin-primary);
}
.dash-chip__dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  flex-shrink: 0;
}
.dash-chip__value {
  font-weight: 700;
  color: var(--admin-text);
}
.dash-chip:hover .dash-chip__value {
  color: var(--admin-primary);
}

.dash-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem;
}
.dash-section-head h2 {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}
.dash-section-head h2 i {
  color: var(--admin-primary);
}

/* Ítem de lista accionable (campaña activa, sorteo, bloqueo, cola de revisión). */
.dash-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 0;
  border-top: 1px solid var(--admin-border);
  text-decoration: none;
  color: inherit;
}
.dash-item:first-of-type {
  border-top: 0;
  padding-top: .25rem;
}
.dash-item:hover {
  color: inherit;
}
.dash-item:hover .dash-item__title {
  color: var(--admin-primary);
}
.dash-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .75rem;
  font-size: 1.2rem;
  background-color: var(--admin-primary-soft);
  color: var(--admin-primary);
}
.dash-item__icon--mint {
  background-color: var(--admin-mint-soft);
  color: var(--admin-mint-strong);
}
.dash-item__icon--warning {
  background-color: var(--admin-status-warning-bg);
  color: var(--admin-status-warning);
}
.dash-item__body {
  min-width: 0;
  flex: 1;
}
.dash-item__title {
  display: block;
  font-weight: 600;
  transition: color .15s ease;
  overflow-wrap: anywhere;
}
.dash-item__meta {
  display: block;
  font-size: .8125rem;
  color: var(--admin-text-secondary);
}
.dash-item__blockers {
  margin: .35rem 0 0;
  padding-left: 1.1rem;
  font-size: .8125rem;
  color: var(--admin-text-secondary);
}
.dash-item__count {
  flex-shrink: 0;
  font-weight: 700;
  font-size: .95rem;
  color: var(--admin-text-secondary);
}
.dash-item__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  text-align: right;
}

/* Progreso de premios entregados de una sesión: el equivalente honesto al
   "vendidos x/y" del mockup, con el único dato de avance que existe hoy. */
.dash-progress {
  display: block;
  width: 6.5rem;
  height: .3rem;
  margin-top: .4rem;
  border-radius: 999px;
  background-color: var(--admin-border);
  overflow: hidden;
}
.dash-progress__bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--admin-mint) 0%, var(--admin-mint-strong) 100%);
}

/* Estado vacío ilustrado. */
.dash-empty {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .75rem 0;
}
/* El PNG llena el contenedor y comparten radio: el fondo iguala al de la ilustración para que no asome
   ninguna franja de otro tono en los bordes redondeados. */
.dash-empty__art {
  flex-shrink: 0;
  width: 8.5rem;
  border-radius: .75rem;
  overflow: hidden;
  background-color: #0B0C12;
}
.dash-empty__art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .75rem;
}
.dash-empty__title {
  font-weight: 600;
  margin-bottom: .2rem;
}
.dash-empty__text {
  color: var(--admin-text-secondary);
  font-size: .875rem;
  margin-bottom: 0;
}
@media (max-width: 575.98px) {
  .dash-empty {
    flex-direction: column;
    text-align: center;
  }
}

/* Accesos rápidos. */
.dash-shortcut {
  display: flex;
  align-items: center;
  gap: .85rem;
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--admin-border);
  border-radius: .875rem;
  background-color: var(--admin-surface);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.dash-shortcut:hover {
  border-color: var(--admin-primary);
  box-shadow: 0 .5rem 1.25rem rgba(27, 29, 35, .08);
  transform: translateY(-2px);
}
.dash-shortcut__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .75rem;
  font-size: 1.35rem;
  background-color: var(--admin-mint-soft);
  color: var(--admin-mint-strong);
}
.dash-shortcut__title {
  font-weight: 600;
  color: var(--admin-text);
  margin-bottom: .15rem;
}
.dash-shortcut__text {
  font-size: .8125rem;
  color: var(--admin-text-secondary);
  margin-bottom: 0;
}

/* Banner de cierre con la mascota, sobre panel oscuro (la ilustración lo exige). */
/* El violeta entra por la izquierda y el flanco derecho queda en el oscuro base: ahí va la ilustración, y su
   fondo propio (casi negro) solo se funde de forma invisible contra un fondo igual de oscuro. */
.dash-banner {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  color: #fff;
  background:
    radial-gradient(100% 160% at 0% 0%, rgba(114, 81, 232, .55) 0%, rgba(114, 81, 232, 0) 62%),
    radial-gradient(80% 130% at 15% 100%, rgba(57, 205, 187, .18) 0%, rgba(57, 205, 187, 0) 60%),
    #0B0C12;
}
.dash-banner__body {
  padding: 1.6rem 1.75rem;
}
.dash-banner__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: .3rem;
}
.dash-banner__text {
  color: rgba(255, 255, 255, .72);
  margin-bottom: 0;
  max-width: 52ch;
}
/* Máscara radial en vez de mix-blend-mode: el blend teñiría la mascota menta al pasar sobre el violeta del panel.
   Así los cuatro bordes del PNG se desvanecen y la mascota conserva su color de marca exacto. */
.dash-banner__art {
  display: block;
  width: 100%;
  max-width: 18rem;
  height: auto;
  margin-left: auto;
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(closest-side at 50% 50%, #000 55%, transparent 100%);
}
@media (max-width: 767.98px) {
  .dash-banner__art {
    max-width: 12rem;
    margin: 0 auto;
  }
}

/* Pestañas de campaña (_CampaignTabs) ------------------------------------------------
   Bootstrap dibuja las nav-tabs con el borde en caja que quedó de la era de los recuadros:
   acá se reducen a una línea inferior con la pestaña activa en violeta de marca, que es
   lo que combina con el resto del panel (tarjetas planas sobre fondo claro). Son enlaces
   reales, no tabs con JS — ver el comentario del partial. */
.nav-tabs {
  border-bottom: 1px solid var(--admin-border);
  gap: 0.25rem;
}

.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.65rem 1rem;
  font-weight: 600;
  color: var(--admin-text-secondary);
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.nav-tabs .nav-link:hover {
  border-bottom-color: var(--admin-border);
  background-color: var(--admin-bg);
  color: var(--admin-text);
  isolation: auto; /* Bootstrap 5.3 lo pone en isolate y recorta el borde inferior. */
}

.nav-tabs .nav-link.active {
  background-color: transparent;
  border-bottom-color: var(--admin-primary);
  color: var(--admin-primary);
}

.nav-tabs .nav-link i {
  vertical-align: -0.1em;
}

/* El enlace de salida ("Todas las campañas") no es una pestaña: no lleva subrayado propio
   ni debe competir visualmente con la que está activa. */
.nav-tabs .nav-item.ms-auto .nav-link,
.nav-tabs .nav-item.ms-auto .btn {
  border-bottom-color: transparent;
  font-weight: 500;
}

@media (max-width: 575.98px) {
  /* En móvil las cuatro pestañas no entran en una línea: scrollean en horizontal en vez
     de apilarse, así el encabezado no empuja la tabla fuera de la primera pantalla. */
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  .nav-tabs .nav-link {
    white-space: nowrap;
    padding-inline: 0.75rem;
  }

  .nav-tabs .nav-item.ms-auto {
    margin-left: 0 !important;
  }
}