/**
 * GoPass Dark — base + header
 * Paleta alineada a FlexTV panel (flextv.css), acento bordo en lugar de azul.
 */

.gopass-dark {
  --gp-bg: #121214;
  --gp-surface: #1a1a1d;
  --gp-elevated: #222226;
  --gp-border: #2e2e32;
  --gp-border-subtle: #232326;
  --gp-text: #f4f4f5;
  --gp-muted: #71717a;
  --gp-accent: #f65852;
  --gp-accent-hover: #ff7369;
  --gp-accent-dim: rgba(246, 88, 82, 0.15);
  --gp-accent-border: rgba(246, 88, 82, 0.22);
  --gp-success: #4ade80;
  --gp-success-dim: rgba(74, 222, 128, 0.12);
  --gp-danger: #f87171;
  --gp-danger-dim: rgba(248, 113, 113, 0.12);
  --gp-radius: 10px;
  --gp-radius-sm: 6px;
  --gp-font: 'Proxima Nova', -apple-system, BlinkMacSystemFont, sans-serif;
  --gp-header-h: 4.75rem;
  --gp-header-btn-h: 2.5rem;
  --gp-logo-h: 43px;
  --gp-shadow-inset: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --gp-card-shine: linear-gradient(180deg, rgba(246, 88, 82, 0.08) 0%, transparent 100%);
  --gp-content-px: 1.25rem;
  --gp-content-py: 1rem;
  --gp-header-bg: #000000;
  --gp-header-bg-mid: #020203;
  --gp-header-bg-low: #050506;
  --gp-footer-filet-red: 1px;
  --gp-header-fg: #f4f4f5;
  --gp-header-fg-muted: #a1a1aa;
  --gp-header-ghost-bg: #141416;
  --gp-header-ghost-border: #2e2e32;
  --gp-header-border: rgba(255, 255, 255, 0.06);
  --gp-header-filet-red: 1px;
  --gp-header-filet-gray: 0px;
  --gp-header-filet-color: rgba(246, 88, 82, 0.55);
  --gp-card-border: #3f3f46;
  --gp-header-total-h: calc(var(--gp-header-h) + var(--gp-header-filet-red));
  --gp-header-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  --gp-header-surface: #0a0a0c;
  --gp-header-edge: rgba(255, 255, 255, 0.08);
  --gp-head-edge-inset: 0;
  --gp-footer-h: 2.125rem;
  --gp-scrollbar-thumb: #3f3f46;
  --gp-scrollbar-track: #141416;
}

/* Márgenes laterales: mobile 1.25rem · desktop 5rem */

@media (min-width: 992px) {
  .gopass-dark {
    --gp-content-px: 5rem;
    --gp-header-h: 5.25rem;
    --gp-header-btn-h: 2.625rem;
    --gp-logo-h: 49px;
    --gp-header-surface: #0a0a0c;
    --gp-header-edge: rgba(255, 255, 255, 0.1);
    --gp-header-border: rgba(255, 255, 255, 0.08);
    --gp-header-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
    --gp-header-filet-red: 1px;
    --gp-header-filet-gray: 0px;
    --gp-footer-filet-red: 1px;
    --gp-head-edge-inset: 1.65rem;
  }
}

/* ── Base ── */
.gopass-dark,
.gopass-dark body {
  background: var(--gp-bg) !important;
  color: var(--gp-text) !important;
  -webkit-font-smoothing: antialiased;
}

.gopass-dark .page,
.gopass-dark .page-content,
.gopass-dark .view-main,
.gopass-dark #app,
.gopass-dark .tabs,
.gopass-dark .tabs-animated-wrap {
  background: var(--gp-bg) !important;
}

.gopass-dark .home-page,
.gopass-dark .home-page.videos {
  background: transparent !important;
}

.gopass-dark h1, .gopass-dark h2, .gopass-dark h3,
.gopass-dark h4, .gopass-dark h5, .gopass-dark h6,
.gopass-dark .title {
  color: var(--gp-text) !important;
}

/* ── Layout: scroll en page-content; gp-page-inner + footer sticky ── */
.gopass-dark,
.gopass-dark body {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100%;
}

.gopass-dark #app {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden;
}

.gopass-dark .view-main,
.gopass-dark .view.view-main {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
}

.gopass-dark .page {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

.gopass-dark .tabs-animated-wrap {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100%;
  min-height: 0 !important;
  overflow: hidden !important;
}

.gopass-dark .tabs {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100%;
  min-height: 0 !important;
  overflow: hidden !important;
}

.gopass-dark .page-content,
.gopass-dark .page-content.tab {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  position: relative !important;
}

/* ── gp-page-inner: footer al pie si hay poco contenido; al final del scroll si hay mucho ── */
.gopass-dark .page-content:has(> .gp-page-inner) {
  display: block !important;
}

.gopass-dark .page-content > .gp-page-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.gopass-dark .gp-page-inner > .gp-header-spacer,
.gopass-dark .gp-page-inner > .container.gp-header-spacer {
  position: relative;
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 var(--gp-header-total-h) !important;
  height: var(--gp-header-total-h) !important;
  min-height: var(--gp-header-total-h) !important;
  max-height: var(--gp-header-total-h) !important;
  overflow: visible !important;
  z-index: 2;
}

.gopass-dark .gp-page-inner > .gp-footer {
  flex: 0 0 auto;
  margin-top: auto !important;
  margin-bottom: 0 !important;
}

.gopass-dark .home-page.videos {
  flex: 0 0 auto;
  position: relative;
}

/* ── HEADER spacer: reserva altura aunque .head sea position:fixed ── */
.gopass-dark .page-content > .gp-header-spacer,
.gopass-dark .page-content > .container:first-child {
  position: relative;
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 var(--gp-header-total-h) !important;
  height: var(--gp-header-total-h) !important;
  min-height: var(--gp-header-total-h) !important;
  max-height: var(--gp-header-total-h) !important;
  overflow: visible !important;
  z-index: 2;
}

/*
 * Degradé debajo del header: va en el contenido (después del spacer),
 * no debajo del header fixed, para que no quede tapado.
 */
.gopass-dark .page-content > .home-page,
.gopass-dark .page-content > .home-page.videos,
.gopass-dark .gp-page-inner > .home-page,
.gopass-dark .gp-page-inner > .home-page.videos {
  position: relative;
  z-index: 1;
  background-image: var(--gp-card-shine);
  background-repeat: no-repeat;
  background-size: 100% 7.5rem;
  background-position: top center;
}

/* ── Estándares de página (título, panel, datatables) ── */
.gopass-dark .gp-title-row,
.gopass-dark .vp-title-row,
.gopass-dark .mm-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.gopass-dark .gp-title-row h1,
.gopass-dark .vp-title-row h1,
.gopass-dark .mm-title-row h1 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--gp-text) !important;
}

.gopass-dark .gp-title-row p,
.gopass-dark .vp-title-row p,
.gopass-dark .mm-title-row p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--gp-text) !important;
}

.gopass-dark .gp-panel,
.gopass-dark .mm-panel {
  position: relative;
  z-index: 1;
  background-color: var(--gp-elevated);
  background-image: var(--gp-card-shine);
  border: 1px solid var(--gp-card-border);
  border-radius: var(--gp-radius);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  margin-bottom: 1rem;
  overflow: hidden;
}

.gopass-dark .gp-panel .table-responsive,
.gopass-dark .mm-panel .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* DataTables — controles alineados */
.gopass-dark .dataTables_wrapper {
  color: var(--gp-muted);
}

.gopass-dark .dataTables_wrapper > .row {
  align-items: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.gopass-dark .dataTables_wrapper > .row > [class*="col-"] {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.gopass-dark .dataTables_wrapper > .row > [class*="col-"]:last-child {
  justify-content: flex-end;
}

.gopass-dark .dataTables_wrapper .dataTables_length,
.gopass-dark .dataTables_wrapper .dataTables_filter,
.gopass-dark .dataTables_wrapper .dataTables_info,
.gopass-dark .dataTables_wrapper .dataTables_paginate {
  color: var(--gp-muted) !important;
  font-size: 0.75rem;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
}

.gopass-dark .dataTables_wrapper .dataTables_length label,
.gopass-dark .dataTables_wrapper .dataTables_filter label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-weight: 400;
  color: var(--gp-muted) !important;
  white-space: nowrap;
}

.gopass-dark .dataTables_wrapper .dataTables_length select,
.gopass-dark .dataTables_wrapper .dataTables_filter input {
  display: inline-flex;
  align-items: center;
  height: 2rem !important;
  margin: 0 !important;
  padding: 0 0.5rem !important;
  background: var(--gp-bg) !important;
  border: 1px solid var(--gp-border) !important;
  color: var(--gp-text) !important;
  border-radius: var(--gp-radius-sm);
  font-size: 0.75rem;
  line-height: 1 !important;
  vertical-align: middle;
  box-sizing: border-box;
}

.gopass-dark .dataTables_wrapper .dataTables_length select {
  min-width: 3.5rem;
  padding-right: 1.5rem !important;
}

.gopass-dark .dataTables_wrapper .dataTables_filter input {
  min-width: 10rem;
}

.gopass-dark .dataTables_wrapper .dataTables_length select:focus,
.gopass-dark .dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: var(--gp-accent) !important;
}

.gopass-dark .dataTables_wrapper .dataTables_info,
.gopass-dark .dataTables_wrapper .dataTables_paginate {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.gopass-dark .dataTables_wrapper .page-item .page-link {
  background: var(--gp-surface) !important;
  border-color: var(--gp-border) !important;
  color: var(--gp-text) !important;
}

.gopass-dark .dataTables_wrapper .page-item.active .page-link {
  background: var(--gp-accent) !important;
  border-color: var(--gp-accent) !important;
  color: #fff !important;
}

.gopass-dark .dataTables_wrapper .page-item.disabled .page-link {
  opacity: 0.45;
}

.gopass-dark .head {
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(246, 88, 82, 0.28), transparent 55%),
    radial-gradient(700px 400px at 90% 80%, rgba(246, 88, 82, 0.1), transparent 50%),
    linear-gradient(165deg, #000 0%, #121214 55%, #1a0f10 100%) !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 900 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-height: var(--gp-header-h);
  box-sizing: border-box;
  isolation: isolate;
  overflow: visible;
}

.gopass-dark .head::before {
  display: none;
}

/* Filete inferior como en login mobile */
.gopass-dark .head::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--gp-header-filet-red);
  background: linear-gradient(90deg, transparent, rgba(246, 88, 82, 0.55), transparent);
  pointer-events: none;
  z-index: 3;
}

@media (min-width: 992px) {
  .gopass-dark .head .gp-head-actions {
    gap: 0.65rem;
  }

  .gopass-dark .head .gp-btn-create-event {
    min-width: 5.75rem;
    padding: 0 0.55rem !important;
    font-size: 1rem !important;
    box-shadow: 0 4px 16px rgba(246, 88, 82, 0.28) !important;
  }

  .gopass-dark .head .gp-btn-create-event__label {
    font-size: 1rem;
  }

  .gopass-dark .head .nav-link.dropdown-toggle,
  .gopass-dark .head .gp-menu-btn {
    background: var(--gp-accent) !important;
    border-color: var(--gp-accent) !important;
  }

  .gopass-dark .head .nav-link.dropdown-toggle:hover,
  .gopass-dark .head .nav-link.dropdown-toggle:focus,
  .gopass-dark .head .show > .nav-link.dropdown-toggle,
  .gopass-dark .head .gp-menu-btn:hover,
  .gopass-dark .head .gp-menu-btn:focus,
  .gopass-dark .head .show > .gp-menu-btn {
    background: var(--gp-accent) !important;
    border-color: var(--gp-accent) !important;
    filter: brightness(1.08);
    box-shadow: 0 6px 22px rgba(246, 88, 82, 0.48) !important;
  }
}

.gopass-dark .head > .row {
  position: relative;
  z-index: 1;
  display: flex !important;
  max-width: none;
  width: 100%;
  margin: 0 !important;
  padding: 0 var(--gp-content-px) !important;
  min-height: var(--gp-header-h);
  align-items: center !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  gap: 1rem;
}

.gopass-dark .head .gp-head-brand,
.gopass-dark .head .col-2 {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  padding-left: var(--gp-head-edge-inset) !important;
  height: auto !important;
  min-height: 0;
  display: flex !important;
  align-items: center !important;
}

.gopass-dark .head img {
  max-height: var(--gp-logo-h) !important;
  height: auto !important;
  width: auto;
  cursor: pointer;
  display: block;
  opacity: 1;
  position: relative;
  z-index: 1;
  transition: transform 0.25s ease, opacity 0.25s ease, filter 0.25s ease;
}

.gopass-dark .head img:hover {
  transform: scale(1.04);
  opacity: 0.92;
  filter: drop-shadow(0 2px 8px rgba(246, 88, 82, 0.12));
}

.gopass-dark .head .col-10,
.gopass-dark .head .col-10.p-3,
.gopass-dark .head .gp-head-actions {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  padding-right: var(--gp-head-edge-inset) !important;
  margin-left: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 0.5rem;
  flex-wrap: nowrap !important;
  min-width: 0;
}

.gopass-dark .head .gp-head-actions .instalarMenu,
.gopass-dark .head .gp-head-actions .gp-btn-create-event,
.gopass-dark .head .gp-head-actions .gp-head-menu {
  flex: 0 0 auto;
  flex-shrink: 0;
}

.gopass-dark .head .gp-head-menu {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.gopass-dark .head .gp-head-nav {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 2;
}

.gopass-dark .head .gp-head-actions .btn-danger,
.gopass-dark .head .gp-btn-create-event {
  width: auto !important;
  min-width: 5rem;
  max-width: none !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
  color: #fff !important;
  overflow: visible !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.gopass-dark .head .gp-btn-create-event__label {
  display: inline;
  white-space: nowrap;
  font-size: 0.9375rem;
  line-height: 1.15;
}

.gopass-dark .head .instalarMenu {
  display: none;
}

.gopass-dark .head .instalarMenu.is-visible {
  display: flex !important;
  align-items: center;
}

@media (display-mode: standalone), (display-mode: minimal-ui) {
  .gopass-dark .head .instalarMenu,
  .gopass-dark .head .instalarMenu.is-visible,
  .gopass-dark .gp-install-menu-item,
  .gopass-dark .gp-install-menu-item.is-visible,
  .gopass-dark .gp-install-menu-divider {
    display: none !important;
  }
}

/* Botones del header — misma altura */
.gopass-dark .head .gp-btn-create-event,
.gopass-dark .head .btn-danger,
.gopass-dark .head .nav-link.dropdown-toggle,
.gopass-dark .head .gp-menu-btn,
.gopass-dark .head .gp-head-search-btn,
.gopass-dark .head .instalarMenu .instalarBtn,
.gopass-dark .head .btn-dark.instalarBtn {
  height: var(--gp-header-btn-h) !important;
  min-height: var(--gp-header-btn-h) !important;
  max-height: var(--gp-header-btn-h) !important;
  box-sizing: border-box !important;
  flex-shrink: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1 !important;
}

.gopass-dark .head .instalarMenu .instalarBtn,
.gopass-dark .head .btn-dark.instalarBtn,
.gopass-dark .head .gp-head-search-btn {
  width: var(--gp-header-btn-h) !important;
  min-width: var(--gp-header-btn-h) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Menú */
.gopass-dark .head .nav-item.dropdown {
  list-style: none !important;
  margin: 0;
  position: relative;
}

.gopass-dark .head .nav-link.dropdown-toggle,
.gopass-dark .head .gp-menu-btn {
  color: #fff !important;
  background: var(--gp-accent) !important;
  border: 1px solid var(--gp-accent) !important;
  border-radius: var(--gp-radius-sm) !important;
  padding-left: 0.65rem !important;
  padding-right: 0.65rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  white-space: nowrap;
  min-width: var(--gp-header-btn-h) !important;
  box-shadow: 0 4px 14px rgba(246, 88, 82, 0.28) !important;
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.25s ease;
}

.gopass-dark .head .nav-link.dropdown-toggle::after {
  display: none !important;
}

.gopass-dark .head .gp-menu-btn > i.fa-bars {
  color: #fff !important;
}

.gopass-dark .head .gp-menu-btn:hover > i.fa-bars,
.gopass-dark .head .gp-menu-btn:focus > i.fa-bars,
.gopass-dark .head .show > .gp-menu-btn > i.fa-bars {
  color: #fff !important;
}

.gopass-dark .head .gp-menu-btn:hover,
.gopass-dark .head .gp-menu-btn:focus,
.gopass-dark .head .show > .gp-menu-btn,
.gopass-dark .head .nav-link.dropdown-toggle:hover,
.gopass-dark .head .nav-link.dropdown-toggle:focus,
.gopass-dark .head .show > .nav-link.dropdown-toggle {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(246, 88, 82, 0.48) !important;
  background: var(--gp-accent) !important;
  border-color: var(--gp-accent) !important;
  color: #fff !important;
}

.gopass-dark .head .gp-menu-btn {
  position: relative !important;
}

.gopass-dark .head .gp-menu-badge {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  z-index: 2;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: var(--gp-accent) !important;
  color: #fff !important;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--gp-header-bg);
  pointer-events: none;
}

.gopass-dark .head .gp-menu-badge.is-visible {
  display: inline-flex;
}

.gopass-dark .head .gp-menu-badge--inline {
  position: static;
  top: auto;
  right: auto;
  margin-left: 0.4rem;
  min-width: 1.15rem;
  height: 1.15rem;
  font-size: 0.6875rem;
  box-shadow: none;
  pointer-events: none;
}

.gopass-dark .head .gp-menu-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 1200;
  box-sizing: border-box;
  width: max-content;
  max-width: 14rem;
  height: auto;
  margin: 0;
  padding: 0.45rem 0.65rem;
  border-radius: 6px;
  background: #1c1c1f;
  border: 1px solid #2e2e32;
  color: #f4f4f5;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--gp-font);
  line-height: 1.3;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: left;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.gopass-dark .head .gp-menu-btn[data-tooltip]:hover::after,
.gopass-dark .head .gp-menu-btn[data-tooltip]:focus::after {
  opacity: 1;
  visibility: visible;
}

.gopass-dark .head .nav-link.dropdown-toggle:hover,
.gopass-dark .head .nav-link.dropdown-toggle:focus,
.gopass-dark .head .show > .nav-link.dropdown-toggle {
  color: var(--gp-text) !important;
  background: var(--gp-surface) !important;
  border-color: var(--gp-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Debajo del header, anclado al botón (no se sale a la derecha en móvil) */
.gopass-dark .head .dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  margin: calc((var(--gp-header-h) - var(--gp-header-btn-h)) / 2 + 0.25rem) 0 0 0 !important;
  transform: none !important;
  float: none !important;
  background: var(--gp-elevated) !important;
  border: 1px solid var(--gp-border-subtle) !important;
  border-radius: var(--gp-radius) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
  padding: 0.35rem !important;
  min-width: 15.5rem;
  max-width: min(15.5rem, calc(100vw - 1.5rem));
  width: max-content;
  z-index: 1100 !important;
}

.gopass-dark .head .dropdown-menu.show {
  display: block !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
}

.gopass-dark .head .dropdown-item {
  color: var(--gp-text) !important;
  border-radius: var(--gp-radius-sm) !important;
  padding: 0.5rem 0.65rem !important;
  font-size: 0.8125rem !important;
  display: flex !important;
  align-items: center;
  transition: background 0.15s;
}

.gopass-dark .head .gp-install-menu-item {
  display: none !important;
}

.gopass-dark .head .gp-install-menu-item.is-visible {
  display: flex !important;
}

.gopass-dark .head .gp-install-menu-divider {
  display: none !important;
}

.gopass-dark .head .gp-install-menu-divider.is-visible {
  display: block !important;
}

.gopass-dark .head .dropdown-item i {
  width: 1.1rem;
  margin-right: 0.35rem;
  text-align: center;
  color: var(--gp-accent);
  opacity: 0.9;
  flex-shrink: 0;
}

/* fa-chromecast es marca; no usar .fab (choca con Framework7 FAB) */
.gopass-dark .head .dropdown-item i.fa-chromecast {
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

.gopass-dark .head .dropdown-item .gp-menu-amount,
.gopass-dark .head .dropdown-item b {
  margin-left: 0.3em;
}

.gopass-dark .head .dropdown-item:hover,
.gopass-dark .head .dropdown-item:focus {
  background: var(--gp-accent-dim) !important;
  color: var(--gp-text) !important;
}

.gopass-dark .head .dropdown-divider {
  border: 0 !important;
  border-top: 1px solid #52525b !important;
  opacity: 1 !important;
  margin: 0.35rem 0.4rem !important;
}

.gopass-dark .head .dropdown-item[style*="color:#ff0000"],
.gopass-dark .head .dropdown-item[style*="color: red"] {
  color: var(--gp-danger) !important;
}

.gopass-dark .head .dropdown-item[style*="color:green"] {
  color: var(--gp-success) !important;
}

.gopass-dark .head .dropdown-item strong[style*="color:blue"] {
  color: var(--gp-accent) !important;
}

/* Crear Evento */
.gopass-dark .head .btn-danger,
.gopass-dark .head .gp-btn-create-event {
  background: var(--gp-accent) !important;
  border: 1px solid var(--gp-accent) !important;
  border-radius: var(--gp-radius-sm) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  width: auto !important;
  margin-right: 0 !important;
  box-shadow: 0 4px 14px rgba(246, 88, 82, 0.28) !important;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease;
}

.gopass-dark .head .btn-danger:hover,
.gopass-dark .head .gp-btn-create-event:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(246, 88, 82, 0.48) !important;
}

.gopass-dark .head .btn-dark.instalarBtn {
  background: var(--gp-elevated) !important;
  border: 1px solid var(--gp-border) !important;
  color: var(--gp-text) !important;
  border-radius: var(--gp-radius-sm) !important;
  box-shadow: none;
}

.gopass-dark .head .btn-dark.instalarBtn:hover {
  background: var(--gp-surface) !important;
  border-color: rgba(246, 88, 82, 0.35) !important;
  color: var(--gp-text) !important;
}

/* ── Tablas ── */
.gopass-dark .table {
  color: var(--gp-text) !important;
  margin-bottom: 0;
}

.gopass-dark .table thead th,
.gopass-dark .table thead td,
.gopass-dark .table tfoot th,
.gopass-dark .table tfoot td,
.gopass-dark table.dataTable thead th,
.gopass-dark table.dataTable thead td,
.gopass-dark table.dataTable tfoot th,
.gopass-dark table.dataTable tfoot td {
  background: var(--gp-card-shine), var(--gp-elevated) !important;
  border-color: var(--gp-border-subtle) !important;
  border-top: none !important;
  color: var(--gp-muted) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.25 !important;
  padding: 0.65rem 1rem !important;
  vertical-align: middle !important;
  height: auto !important;
}

.gopass-dark .table tfoot th,
.gopass-dark .table tfoot td,
.gopass-dark table.dataTable tfoot th,
.gopass-dark table.dataTable tfoot td {
  border-top: 1px solid var(--gp-border-subtle) !important;
  border-bottom: none !important;
}

.gopass-dark .table thead th *,
.gopass-dark .table thead td *,
.gopass-dark .table tfoot th *,
.gopass-dark .table tfoot td *,
.gopass-dark table.dataTable thead th *,
.gopass-dark table.dataTable tfoot th *,
.gopass-dark table.dataTable tfoot td * {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

.gopass-dark .table tbody td,
.gopass-dark table.dataTable tbody td {
  border-color: var(--gp-border-subtle) !important;
  padding: 0.75rem 1rem !important;
  vertical-align: middle !important;
  font-size: 0.8125rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--gp-text);
}

.gopass-dark .table-striped tbody tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.02) !important;
}

.gopass-dark .table-hover tbody tr:hover {
  background: var(--gp-accent-dim) !important;
}

.gopass-dark .table td a {
  color: var(--gp-text) !important;
  cursor: pointer;
}

.gopass-dark .table td a:hover {
  color: var(--gp-accent) !important;
}

/* ── Botones ── */
.gopass-dark .btn-danger {
  background: var(--gp-accent) !important;
  border-color: var(--gp-accent) !important;
  border-radius: var(--gp-radius-sm) !important;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(246, 88, 82, 0.3);
}

.gopass-dark .btn-danger:hover {
  filter: brightness(1.08);
}

/* ── Footer: dentro de .gp-page-inner — al pie del viewport o al final del scroll ── */
.gopass-dark .gp-footer {
  position: relative !important;
  width: 100%;
  margin: auto 0 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  flex: 0 0 auto;
  min-height: var(--gp-footer-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: var(--gp-surface) !important;
  border-top: 0 !important;
  color: var(--gp-muted) !important;
  font-size: 0.75rem;
  line-height: 1;
  z-index: 1;
}

.gopass-dark .gp-footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--gp-footer-filet-red);
  background: linear-gradient(90deg, transparent, var(--gp-header-filet-color), transparent);
  pointer-events: none;
}

.gopass-dark .gp-footer__inner {
  width: 100%;
  min-height: var(--gp-footer-h);
  padding: 0 var(--gp-content-px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
}

.gopass-dark .gp-footer strong {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-weight: 600;
  color: var(--gp-muted);
  line-height: 1;
}

.gopass-dark .gp-footer a {
  color: var(--gp-accent) !important;
  text-decoration: none;
  transition: color 0.15s ease;
  pointer-events: auto;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.gopass-dark .gp-footer a:hover {
  color: var(--gp-accent-hover) !important;
}

/* ── Scrollbar (como FlexTV) ── */
.gopass-dark,
.gopass-dark * {
  scrollbar-width: thin;
  scrollbar-color: var(--gp-scrollbar-thumb) var(--gp-scrollbar-track);
}

.gopass-dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.gopass-dark ::-webkit-scrollbar-track {
  background: var(--gp-scrollbar-track);
  border-radius: 999px;
}

.gopass-dark ::-webkit-scrollbar-thumb {
  background: var(--gp-scrollbar-thumb);
  border: 2px solid var(--gp-scrollbar-track);
  border-radius: 999px;
}

.gopass-dark ::-webkit-scrollbar-thumb:hover {
  background: #52525b;
}

.gopass-dark ::-webkit-scrollbar-thumb:active {
  background: var(--gp-accent);
  border-color: rgba(246, 88, 82, 0.25);
}

/* ── F7 dialogs ── */
body.gopass-dark,
.gopass-dark {
  --f7-dialog-bg-color: #222226;
  --f7-dialog-text-color: #d4d4d8;
  --f7-dialog-title-text-color: #f4f4f5;
  --f7-dialog-button-text-color: #f65852;
  --f7-dialog-button-pressed-bg-color: rgba(246, 88, 82, 0.12);
  --f7-dialog-input-bg-color: #0a0a0c;
  --f7-dialog-input-border-color: #2e2e32;
  --f7-dialog-input-placeholder-color: #71717a;
}

.gopass-dark .dialog,
.gopass-dark .dialog-inner,
body.gopass-dark .dialog,
body.gopass-dark .dialog-inner {
  background: #222226 !important;
  border: 1px solid #3f3f46 !important;
  color: #f4f4f5 !important;
}

.gopass-dark .dialog-title,
.gopass-dark .dialog .dialog-title,
body.gopass-dark .dialog-title,
body.gopass-dark .dialog .dialog-title {
  color: #f4f4f5 !important;
  font-weight: 700 !important;
}

.gopass-dark .dialog-text,
.gopass-dark .dialog .dialog-text,
body.gopass-dark .dialog-text,
body.gopass-dark .dialog .dialog-text {
  color: #d4d4d8 !important;
}

.gopass-dark .dialog-buttons,
body.gopass-dark .dialog-buttons {
  border-top-color: #3f3f46 !important;
}

.gopass-dark .dialog-button,
body.gopass-dark .dialog-button {
  color: #f65852 !important;
}

.gopass-dark .dialog-button.dialog-button-bold,
body.gopass-dark .dialog-button.dialog-button-bold {
  color: #ff7369 !important;
  font-weight: 700 !important;
}

/* SweetAlert2 titles (todas las páginas dark) */
body.gopass-dark .swal2-popup,
body.gopass-dark.swal2-shown .swal2-popup {
  background: #222226 !important;
  color: #f4f4f5 !important;
  border: 1px solid #3f3f46;
}

body.gopass-dark .swal2-title {
  color: #f4f4f5 !important;
}

body.gopass-dark .swal2-html-container,
body.gopass-dark .swal2-content,
body.gopass-dark .swal2-html-container *,
body.gopass-dark .swal2-content * {
  color: #d4d4d8 !important;
}

body.gopass-dark .swal2-html-container label,
body.gopass-dark .swal2-html-container b,
body.gopass-dark .swal2-html-container strong {
  color: #f4f4f5 !important;
}

body.gopass-dark .swal2-html-container .form-control,
body.gopass-dark .swal2-html-container input {
  color: #f4f4f5 !important;
  background: #0a0a0c !important;
  border-color: #2e2e32 !important;
}

/*
 * Grid de cards de eventos — gap único (favoritos / categoría / channel / myChannel)
 * Horizontal entre cards = 0.8rem (0.4 + 0.4). Vertical = 0.4 + 0.5 + 0.4.
 */
.gopass-dark .live > .row,
.gopass-dark .cat-events-row,
.gopass-dark .ch-events-row,
.gopass-dark .mc-events-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  margin-left: -0.4rem !important;
  margin-right: -0.4rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: auto !important;
  max-width: none !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
}

.gopass-dark .live > .row > .fv-card-col,
.gopass-dark .live > .row > .cat-card-col,
.gopass-dark .live > .row > .ch-card-col,
.gopass-dark .live > .row > .mc-event-col,
.gopass-dark .cat-events-row > .cat-card-col,
.gopass-dark .ch-events-row > .ch-card-col,
.gopass-dark .mc-events-row > .mc-event-col {
  display: flex !important;
  flex-direction: column !important;
  padding: 0.4rem !important;
  margin: 0 0 0.5rem !important;
  box-sizing: border-box !important;
  float: none !important;
}

.gopass-dark .fv-card-col.col-12,
.gopass-dark .cat-card-col.col-12,
.gopass-dark .ch-card-col.col-12,
.gopass-dark .mc-event-col.col-12 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

@media (min-width: 768px) {
  .gopass-dark .fv-card-col.col-md-3,
  .gopass-dark .cat-card-col.col-md-3,
  .gopass-dark .ch-card-col.col-md-3,
  .gopass-dark .mc-event-col.col-md-3 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
}

.gopass-dark .live > .row > .fv-card-col > .card,
.gopass-dark .live > .row > .cat-card-col > .card,
.gopass-dark .live > .row > .ch-card-col > .card,
.gopass-dark .live > .row > .mc-event-col > .card,
.gopass-dark .cat-events-row > .cat-card-col > .card,
.gopass-dark .ch-events-row > .ch-card-col > .card,
.gopass-dark .mc-events-row > .mc-event-col > .card {
  margin: 0 !important;
  width: 100% !important;
}

/* EN VIVO AHORA: texto y punto siempre rojos en todos los cards */
.gopass-dark .fv-card-status--live,
.gopass-dark .fv-card-status--live b,
.gopass-dark .fv-card-status--live i,
.gopass-dark .ch-card-status--live,
.gopass-dark .ch-card-status--live b,
.gopass-dark .ch-card-status--live i,
.gopass-dark .cat-card-status--live,
.gopass-dark .cat-card-status--live b,
.gopass-dark .cat-card-status--live i,
.gopass-dark .mc-status--live,
.gopass-dark .mc-status--live b,
.gopass-dark .mc-status--live span,
.gopass-dark .mc-status--live i,
.gopass-dark .card a.fv-card-status--live,
.gopass-dark .card a.ch-card-status--live,
.gopass-dark .card a.cat-card-status--live,
.gopass-dark .card [style*="color:#ff0000"],
.gopass-dark .card [style*="color: #ff0000"],
.gopass-dark .card [style*="color:#ff0000"] i,
.gopass-dark .card [style*="color: #ff0000"] i,
.gopass-dark .card [style*="color:#ff0000"] b,
.gopass-dark .card [style*="color: #ff0000"] b {
  color: #ff0000 !important;
}

/* PROMO / GRATIS siempre verde en todos los cards */
.gopass-dark .ch-price--free,
.gopass-dark .ch-price--free b,
.gopass-dark .ch-price--promo,
.gopass-dark .ch-price--promo b,
.gopass-dark .cat-price--free,
.gopass-dark .cat-price--free b,
.gopass-dark .cat-price--promo,
.gopass-dark .cat-price--promo b,
.gopass-dark .card .ch-price--free,
.gopass-dark .card .ch-price--free b,
.gopass-dark .card .ch-price--promo,
.gopass-dark .card .ch-price--promo b,
.gopass-dark .card .cat-price--free,
.gopass-dark .card .cat-price--free b,
.gopass-dark .card .cat-price--promo,
.gopass-dark .card .cat-price--promo b,
.gopass-dark .card span.ch-price--free,
.gopass-dark .card span.ch-price--promo,
.gopass-dark .card span.cat-price--free,
.gopass-dark .card span.cat-price--promo {
  color: #4ade80 !important;
}