/* Tour guiado e Central de tutoriais: escuro e vermelho em qualquer tonalidade escolhida. */
.dx-tour { position: fixed; inset: 0; z-index: 2000; pointer-events: none; font-family: inherit; }
.dx-tour[hidden] { display: none; }
.dx-tour.no-target { background: rgb(0 0 0 / .62); }
.dx-tour-spot { position: fixed; border-radius: 10px; box-shadow: 0 0 0 3px #e11d2e, 0 0 0 9999px rgb(0 0 0 / .62); transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease; pointer-events: none; }
.dx-tour-box { position: fixed; pointer-events: auto; width: min(380px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow: auto; background: #111; color: #f5f5f5; border: 1px solid #2c2c2c; border-top: 3px solid #e11d2e; border-radius: 12px; padding: 14px 16px 12px; box-shadow: 0 18px 50px rgb(0 0 0 / .55); font-size: 14px; line-height: 1.5; }
.dx-tour.no-target .dx-tour-box { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.dx-tour-box:focus { outline: none; }
.dx-tour-head { display: flex; align-items: center; gap: 8px; }
.dx-tour-count { flex: 1; color: #a3a3a3; font-size: 12px; text-transform: none; }
.dx-tour-box h2 { margin: 6px 0 4px; font-size: 17px; line-height: 1.3; color: #fff; }
.dx-tour-box p { margin: 0 0 10px; color: #e5e5e5; }
.dx-tour-note { font-size: 12.5px; color: #fca5a5 !important; }
.dx-tour-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dx-tour-grow { flex: 1; }
.dx-tour-btn, .dx-tour-x { font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid #3a3a3a; background: #1c1c1c; color: #f5f5f5; padding: 7px 14px; min-height: 38px; }
.dx-tour-btn.primary { background: #e11d2e; border-color: #e11d2e; color: #fff; font-weight: 600; }
.dx-tour-btn.primary:hover { background: #c81424; }
.dx-tour-btn.ghost { background: transparent; border-color: transparent; color: #a3a3a3; padding-inline: 6px; }
.dx-tour-btn[hidden] { display: none; }
.dx-tour-x { padding: 2px 9px; min-height: 30px; background: transparent; border-color: transparent; color: #a3a3a3; }
.dx-tour-btn:focus-visible, .dx-tour-x:focus-visible, .dx-help:focus-visible, .tour-card a:focus-visible { outline: 3px solid #ff6b78; outline-offset: 2px; }
.dx-tour-dots { display: flex; gap: 5px; justify-content: center; margin-top: 10px; }
.dx-tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: #3a3a3a; }
.dx-tour-dots i.on { background: #e11d2e; width: 18px; border-radius: 4px; }
.dx-tour.dx-tour-mobile .dx-tour-box { left: 8px !important; right: 8px; width: auto; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); transform: none !important; max-height: 46vh; }
.dx-tour.dx-tour-mobile.dx-tour-top .dx-tour-box { top: calc(8px + env(safe-area-inset-top, 0px)) !important; bottom: auto; }
.dx-tour-mobile .dx-tour-btn { min-height: 44px; }
.dx-tour-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2001; background: #111; color: #fff; border: 1px solid #e11d2e; border-radius: 10px; padding: 10px 16px; box-shadow: 0 10px 30px rgb(0 0 0 / .4); max-width: calc(100vw - 32px); }
@media (prefers-reduced-motion: reduce) { .dx-tour-spot { transition: none; } }

/* Botão "?" da barra superior */
.dx-help { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid currentColor; font-weight: 700; text-decoration: none; color: inherit; flex: none; }
.dx-help:hover { color: #e11d2e; }

/* Central de tutoriais */
.tour-center { display: grid; gap: 1rem; }
.tour-hero { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; justify-content: space-between; padding: 1rem 1.25rem; border-radius: 14px; background: #0d0d0d; color: #f5f5f5; border: 1px solid #262626; border-left: 4px solid #e11d2e; }
.tour-hero p { margin: .3rem 0 0; color: #c9c9c9; }
.tour-progress { min-width: 180px; }
.tour-progress-bar { display: block; width: 100%; height: 8px; border: 0; border-radius: 4px; background: #2a2a2a; overflow: hidden; margin-top: .35rem; appearance: none; accent-color: #e11d2e; }
.tour-progress-bar::-webkit-progress-bar { background: #2a2a2a; border-radius: 4px; }
.tour-progress-bar::-webkit-progress-value { background: #e11d2e; border-radius: 4px; }
.tour-progress-bar::-moz-progress-bar { background: #e11d2e; border-radius: 4px; }
.tour-group h2 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted, #a3a3a3); margin: .4rem 0 .6rem; }
.tour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .8rem; }
.tour-card { display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.1rem; border-radius: 12px; border: 1px solid var(--c-line, #262626); background: var(--c-surface, #fff); }
.tour-card h3 { margin: 0; font-size: 16px; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.tour-card .tour-done { font-size: 11px; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: #14532d; color: #dcfce7; }
.tour-card p { margin: 0; color: var(--c-muted, #a3a3a3); }
.tour-card details summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.tour-card ol { margin: .4rem 0 0; padding-left: 1.2rem; display: grid; gap: .3rem; font-size: 13px; }
.tour-card ol b { display: block; }
.tour-card .tour-actions { margin-top: auto; display: flex; gap: .5rem; flex-wrap: wrap; padding-top: .3rem; }
.tour-filter { display: flex; gap: .5rem; flex-wrap: wrap; }
.tour-filter input { flex: 1; min-width: 200px; }
@media (max-width: 639px) { .tour-grid { grid-template-columns: 1fr; } .tour-hero { padding: .9rem 1rem; } }
.ca-top-actions { display: flex; align-items: center; gap: 8px; }
@media print { .dx-tour, .dx-tour-toast, .dx-help { display: none !important; } }