MediaWiki:Common.css: Difference between revisions
Sincronização completa do CSS Dark Gótico-Punk master (seções 1 a 16) |
Implementação de arquitetura CSS 100% responsiva para Mobile e Tablet (v15) Tag: Reverted |
||
| Line 1: | Line 1: | ||
/ | |||
Revision as of 20:52, 1 September 2026
/* ==========================================================================\n TEMA DARK GÓTICO-PUNK — VAMPIRO: A MÁSCARA (v15 - RESPONSIVE & MOBILE-READY)\n ========================================================================== */\n\n@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,400&family=Special+Elite&display=swap');\n\n/* ==========================================================================\n 1. CASCATA PROGRESSIVA SINCRONIZADA (.vtm-section-block)\n ========================================================================== */\n@keyframes vtm-section-slide {\n 0% {\n opacity: 0;\n transform: translateX(-30px);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n#firstHeading,\n.mw-first-heading {\n animation: vtm-section-slide 0.55s cubic-bezier(0.2, 1, 0.3, 1) both !important;\n animation-delay: 0.04s !important;\n margin-bottom: 16px !important;\n padding-bottom: 8px !important;\n will-change: transform, opacity;\n}\n\n.vtm-section-block {\n opacity: 0;\n animation: vtm-section-slide 0.80s cubic-bezier(0.2, 1, 0.3, 1) forwards !important;\n margin-bottom: 26px !important;\n padding: 4px 0 !important;\n will-change: transform, opacity;\n}\n\n#content,\n.mw-body {\n overflow-x: hidden !important;\n}\n\n@media (prefers-reduced-motion: reduce) {\n #firstHeading,\n .mw-first-heading,\n .vtm-section-block {\n animation: none !important;\n transform: none !important;\n opacity: 1 !important;\n }\n}\n\n/* ==========================================================================\n 2. CODEX & VECTOR DESIGN TOKENS (VARIÁVEIS NATIVAS)\n ========================================================================== */\n:root,\nhtml,\nbody,\n.skin-vector-2022,\n.skin-vector,\n.mw-special-Userlogin {\n --background-color-base: #101015 !important;\n --background-color-base--hover: #181822 !important;\n --background-color-base--active: #22222e !important;\n --background-color-interactive-subtle: #16161d !important;\n --background-color-interactive: #1a1a24 !important;\n --background-color-disabled: #121217 !important;\n --background-color-neutral: #101015 !important;\n --background-color-neutral-subtle: #16161d !important;\n --background-color-backdrop: rgba(0, 0, 0, 0.85) !important;\n --background-color-container: #101015 !important;\n --background-color-surface: #16161d !important;\n --background-color-input: #121218 !important;\n --background-color-input--hover: #1a1a24 !important;\n\n --color-base: #ddd9d0 !important;\n --color-base--hover: #ffffff !important;\n --color-base-fixed: #ddd9d0 !important;\n --color-subtle: #9e9a91 !important;\n --color-placeholder: #6e6b65 !important;\n --color-disabled: #55534e !important;\n --color-inverted: #08080b !important;\n --color-progressive: #e55353 !important;\n --color-progressive--hover: #ff2a3f !important;\n --color-destructive: #c9182b !important;\n\n --border-color-base: #252530 !important;\n --border-color-subtle: #1c1c25 !important;\n --border-color-interactive: #3d0a12 !important;\n --border-color-muted: #20202a !important;\n --border-color-progressive: #8b0000 !important;\n\n --vtm-void: #08080b;\n --vtm-abyss: #0c0c10;\n --vtm-obsidian: #101015;\n --vtm-onyx: #16161d;\n --vtm-slate: #1c1c25;\n --vtm-charcoal: #22222d;\n --vtm-text: #ddd9d0;\n --vtm-text-dim: #9e9a91;\n --vtm-text-ghost: #5e5b55;\n --vtm-blood: #8b0000;\n --vtm-blood-vivid: #c9182b;\n --vtm-blood-neon: #ff2a3f;\n --vtm-blood-glow: rgba(201, 24, 43, 0.45);\n --vtm-gold: #c5a059;\n --vtm-gold-bright: #e5be75;\n --vtm-border: #252530;\n --vtm-border-blood: #3d0a12;\n --vtm-font-title: 'Cinzel', 'Playfair Display', Georgia, serif;\n --vtm-font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;\n --vtm-font-mono: 'Consolas', 'Fira Code', 'Courier New', monospace;\n --vtm-font-typewriter: 'Special Elite', 'Courier New', 'American Typewriter', monospace;\n}\n\n/* ==========================================================================\n 3. ESTRUTURA GLOBAL & CONTAINERS\n ========================================================================== */\nhtml,\nhtml body,\nbody.skin-vector-2022,\nbody.skin-vector,\nbody.mediawiki,\n.mw-special-Userlogin {\n background: var(--vtm-void) !important;\n background-color: var(--vtm-void) !important;\n color: var(--vtm-text) !important;\n font-family: var(--vtm-font-body) !important;\n}\n\n.mw-page-container,\n.mw-page-container-inner,\n.vector-column-start,\n.vector-column-end,\n.vector-page-toolbar,\n.vector-page-toolbar-container {\n background: var(--vtm-void) !important;\n background-color: var(--vtm-void) !important;\n border-color: var(--vtm-border) !important;\n}\n\n.mw-body,\n.vector-body,\n.mw-body-content,\n.mw-content-container,\n#content,\n#bodyContent,\n#mw-content-text,\n.mw-parser-output,\nmain.mw-body,\n.mw-special-Userlogin #content {\n background: var(--vtm-obsidian) !important;\n background-color: var(--vtm-obsidian) !important;\n color: var(--vtm-text) !important;\n border-color: var(--vtm-border) !important;\n}\n\n/* Padding interno */\n.mw-body-content,\n#bodyContent,\n.mw-parser-output {\n padding-left: 20px !important;\n padding-right: 20px !important;\n padding-top: 15px !important;\n padding-bottom: 25px !important;\n box-sizing: border-box !important;\n}\n\n.vector-header,\n.vector-header-container,\n.mw-header,\n#mw-head,\n.vector-sticky-header,\n.vector-sticky-header-container {\n background: var(--vtm-abyss) !important;\n background-color: var(--vtm-abyss) !important;\n border-bottom: 1px solid var(--vtm-border-blood) !important;\n}\n\n.vector-sticky-header {\n background: rgba(8, 8, 11, 0.97) !important;\n}\n\n#footer,\n.mw-footer,\n.vector-footer-container,\nfooter.mw-footer {\n background: var(--vtm-void) !important;\n background-color: var(--vtm-void) !important;\n color: var(--vtm-text-ghost) !important;\n border-top: 1px solid var(--vtm-border) !important;\n}\n\n/* ==========================================================================\n 4. TELA DE LOGIN (SPECIAL:USERLOGIN & FORMULÁRIO CODEX)\n ========================================================================== */\n.mw-special-Userlogin .mw-htmlform,\n.mw-special-Userlogin .mw-htmlform-codex,\n#userloginForm form,\n.mw-htmlform.mw-htmlform-codex {\n max-width: 440px !important;\n width: 100% !important;\n box-sizing: border-box !important;\n background: linear-gradient(135deg, rgba(22, 22, 29, 0.96) 0%, rgba(14, 14, 19, 0.98) 100%) !important;\n border: 1px solid var(--vtm-border-blood) !important;\n border-left: 4px solid var(--vtm-blood) !important;\n border-radius: 4px !important;\n padding: 24px 28px !important;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.85), inset 0 0 20px rgba(0, 0, 0, 0.5) !important;\n margin-top: 20px !important;\n}\n\n.mw-special-Userlogin .cdx-label__label__text,\n.mw-special-Userlogin .cdx-label,\n#userloginForm label {\n color: var(--vtm-gold) !important;\n font-family: var(--vtm-font-title) !important;\n font-weight: 700 !important;\n font-size: 0.92em !important;\n letter-spacing: 0.8px !important;\n text-transform: uppercase !important;\n}\n\n.mw-special-Userlogin .cdx-text-input,\n.mw-special-Userlogin .cdx-text-input__input,\n#userloginForm input.loginText,\n#userloginForm input[type=\"text\"],\n#userloginForm input[type=\"password\"] {\n background: #0b0b10 !important;\n background-color: #0b0b10 !important;\n color: #ffffff !important;\n border: 1px solid var(--vtm-border-blood) !important;\n border-radius: 4px !important;\n padding: 10px 14px !important;\n font-size: 1em !important;\n box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.9) !important;\n transition: all 0.25s ease !important;\n}\n\n.mw-special-Userlogin .cdx-text-input__input:focus,\n#userloginForm input.loginText:focus,\n#userloginForm input[type=\"text\"]:focus,\n#userloginForm input[type=\"password\"]:focus {\n border-color: var(--vtm-blood-neon) !important;\n box-shadow: 0 0 10px rgba(201, 24, 43, 0.6), inset 0 2px 8px rgba(0, 0, 0, 0.9) !important;\n outline: none !important;\n}\n\n.mw-special-Userlogin .cdx-button--action-progressive.cdx-button--weight-primary,\nbutton#wpLoginAttempt,\n#wpLoginAttempt,\n#userloginForm .cdx-button {\n background: linear-gradient(180deg, #8b1020 0%, #450810 100%) !important;\n background-color: #660e1a !important;\n color: #ffffff !important;\n font-family: var(--vtm-font-title) !important;\n font-size: 1.05em !important;\n font-weight: 800 !important;\n letter-spacing: 1px !important;\n text-transform: uppercase !important;\n border: 1px solid var(--vtm-blood-neon) !important;\n border-radius: 4px !important;\n padding: 12px 20px !important;\n cursor: pointer !important;\n box-shadow: 0 4px 16px rgba(201, 24, 43, 0.5) !important;\n transition: all 0.25s ease !important;\n margin-top: 18px !important;\n width: 100% !important;\n}\n\n.mw-special-Userlogin .cdx-button--action-progressive.cdx-button--weight-primary:hover,\nbutton#wpLoginAttempt:hover,\n#wpLoginAttempt:hover {\n background: linear-gradient(180deg, #b31529 0%, #5a0a15 100%) !important;\n box-shadow: 0 0 22px rgba(255, 42, 63, 0.85) !important;\n transform: translateY(-1px) !important;\n}\n\n.mw-special-Userlogin .cdx-checkbox__label,\n#userloginForm .mw-userlogin-rememberme {\n color: var(--vtm-text-dim) !important;\n font-size: 0.95em !important;\n}\n\n.mw-special-Userlogin .cdx-checkbox__input {\n accent-color: var(--vtm-blood) !important;\n}\n\n.mw-special-Userlogin a,\n#userloginForm a {\n color: #e55353 !important;\n text-decoration: none !important;\n transition: all 0.2s ease !important;\n}\n\n.mw-special-Userlogin a:hover,\n#userloginForm a:hover {\n color: var(--vtm-blood-neon) !important;\n text-shadow: 0 0 8px var(--vtm-blood-glow) !important;\n}\n\n/* ==========================================================================\n 5. VISUALEDITOR & OOUI TOOLBAR\n ========================================================================== */\n.ve-ui-toolbar,\n.oo-ui-toolbar,\n.oo-ui-toolbar-bar,\n.ve-init-mw-desktopArticleTarget-toolbar,\n.ve-ui-toolbar-floating {\n background: #14141c !important;\n background-color: #14141c !important;\n border-bottom: 1px solid var(--vtm-border-blood) !important;\n}\n\n.oo-ui-iconElement-icon,\n.oo-ui-toolbar .oo-ui-iconElement-icon,\n.ve-ui-toolbar .oo-ui-iconElement-icon,\n.oo-ui-indicatorElement-indicator {\n filter: brightness(0) invert(1) !important;\n opacity: 0.95 !important;\n}\n\n.oo-ui-widget-disabled .oo-ui-iconElement-icon,\n.oo-ui-tool.oo-ui-widget-disabled .oo-ui-iconElement-icon {\n filter: brightness(0) invert(1) !important;\n opacity: 0.28 !important;\n}\n\n.oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:hover {\n background: #251218 !important;\n background-color: #251218 !important;\n border-radius: 3px !important;\n}\n\n.oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-iconElement-icon {\n filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(255, 42, 63, 0.8)) !important;\n opacity: 1 !important;\n}\n\n.oo-ui-labelElement-label,\n.oo-ui-tool-title,\n.oo-ui-toolGroup-tools .oo-ui-tool-title,\n.oo-ui-popupToolGroup-title,\n.ve-ui-toolbar .oo-ui-labelElement-label {\n color: #ffffff !important;\n font-weight: 700 !important;\n font-size: 0.92em !important;\n}\n\n.oo-ui-widget-disabled .oo-ui-labelElement-label {\n color: #66635c !important;\n}\n\n.oo-ui-tool.oo-ui-tool-active > .oo-ui-tool-link,\n.oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle {\n background: #3d0a12 !important;\n background-color: #3d0a12 !important;\n border-radius: 3px !important;\n}\n\n.ve-ui-toolbar-saveButton.oo-ui-widget-enabled .oo-ui-buttonElement-button {\n background: linear-gradient(180deg, #8b1020 0%, #450810 100%) !important;\n background-color: #660e1a !important;\n border: 1px solid var(--vtm-blood-neon) !important;\n border-radius: 4px !important;\n box-shadow: 0 0 12px rgba(201, 24, 43, 0.6) !important;\n}\n\n.ve-ui-toolbar-saveButton.oo-ui-widget-enabled .oo-ui-labelElement-label {\n color: #ffffff !important;\n font-family: var(--vtm-font-title) !important;\n font-weight: 800 !important;\n}\n\n.ve-ui-toolbar-saveButton.oo-ui-widget-disabled .oo-ui-buttonElement-button {\n background: #181822 !important;\n border: 1px solid #282836 !important;\n opacity: 0.55 !important;\n}\n\n.oo-ui-popupWidget-popup,\n.oo-ui-menuSelectWidget,\n.oo-ui-menuOptionWidget,\n.oo-ui-window-frame,\n.oo-ui-dialog,\n.oo-ui-panelLayout-padded {\n background: #161620 !important;\n background-color: #161620 !important;\n color: #f0ece3 !important;\n border: 1px solid var(--vtm-border-blood) !important;\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9) !important;\n}\n\n.oo-ui-optionWidget-highlighted {\n background: #2b0e15 !important;\n color: #ff3b3b !important;\n}\n\n.oo-ui-optionWidget-selected {\n background: #420b14 !important;\n color: #ffffff !important;\n font-weight: 700 !important;\n}\n\n.ve-ui-surface,\n.ve-ce-surface,\n.ve-ce-documentNode,\n.ve-ui-surface-paste {\n background: #0b0b10 !important;\n background-color: #0b0b10 !important;\n color: #f0ece3 !important;\n caret-color: var(--vtm-blood-neon) !important;\n}\n\n/* ==========================================================================\n 6. PAINEIS FIXOS & DROPDOWNS\n ========================================================================== */\n.vector-pinnable-element,\n.vector-pinned-container,\n.vector-dropdown-content,\n.vector-dropdown .vector-dropdown-content,\n.vector-menu-content,\n.vector-page-tools,\n.vector-page-tools-pinned-container,\n.vector-main-menu,\n.vector-main-menu-pinned-container,\n.vector-appearance,\n.vector-appearance-pinned-container,\n.vector-toc,\n.vector-toc-pinned-container,\n#vector-main-menu-pinned-container,\n#vector-page-tools-pinned-container,\n#vector-appearance-pinned-container,\n#vector-toc-pinned-container,\naside.vector-pinnable-element,\nnav.vector-pinnable-element,\ndiv.vector-pinnable-element,\n.vector-settings {\n background: var(--vtm-obsidian) !important;\n background-color: var(--vtm-obsidian) !important;\n color: var(--vtm-text) !important;\n border-color: var(--vtm-border) !important;\n}\n\n.vector-pinnable-header {\n background: var(--vtm-abyss) !important;\n background-color: var(--vtm-abyss) !important;\n border-bottom: 1px solid var(--vtm-border-blood) !important;\n padding: 8px 12px !important;\n}\n\n.vector-pinnable-header-label {\n color: var(--vtm-gold) !important;\n font-family: var(--vtm-font-title) !important;\n font-weight: 700 !important;\n text-transform: uppercase !important;\n letter-spacing: 1px !important;\n font-size: 0.9em !important;\n}\n\n.vector-pinnable-header-toggle-button,\n.cdx-button--weight-quiet {\n background: var(--vtm-slate) !important;\n background-color: var(--vtm-slate) !important;\n color: var(--vtm-gold) !important;\n border: 1px solid var(--vtm-border) !important;\n border-radius: 3px !important;\n padding: 2px 8px !important;\n font-size: 0.8em !important;\n}\n\n.vector-pinnable-header-toggle-button:hover,\n.cdx-button--weight-quiet:hover {\n background: #2a0e14 !important;\n background-color: #2a0e14 !important;\n color: var(--vtm-blood-neon) !important;\n border-color: var(--vtm-blood) !important;\n}\n\n.vector-menu-heading,\n.vector-menu-heading-label,\n.sidebar-heading,\n.vector-page-tools .vector-menu-heading,\n.vector-main-menu .vector-menu-heading,\n#mw-panel .portal h3 {\n color: var(--vtm-gold) !important;\n font-family: var(--vtm-font-title) !important;\n font-weight: 700 !important;\n font-size: 0.82em !important;\n text-transform: uppercase !important;\n letter-spacing: 1.2px !important;\n border-bottom: 1px solid var(--vtm-border-blood) !important;\n margin-top: 14px !important;\n padding-bottom: 4px !important;\n}\n\n.vector-pinnable-element a,\n.vector-pinnable-element li a,\n.vector-page-tools a,\n.vector-main-menu a,\n.vector-dropdown-content a,\n.vector-menu-content a,\n#mw-panel .portal .body li a {\n color: var(--vtm-text-dim) !important;\n transition: all 0.15s ease !important;\n}\n\n.vector-pinnable-element a:hover,\n.vector-page-tools a:hover,\n.vector-main-menu a:hover,\n.vector-dropdown-content a:hover,\n#mw-panel .portal .body li a:hover {\n color: var(--vtm-blood-neon) !important;\n text-shadow: 0 0 8px var(--vtm-blood-glow) !important;\n padding-left: 4px !important;\n}\n\n/* ==========================================================================\n 7. ABAS DE NAVEGAÇÃO & AÇÃO\n ========================================================================== */\n.vector-menu-tabs,\n.vector-menu-tabs-legacy,\n.mw-portlet-views,\n.mw-portlet-namespaces {\n background: transparent !important;\n}\n\n.vector-menu-tabs li,\n.vector-menu-tabs-legacy li,\n.vector-tab-noicon,\n.mw-portlet-views li,\n.mw-portlet-namespaces li {\n background: var(--vtm-onyx) !important;\n background-color: var(--vtm-onyx) !important;\n border: 1px solid var(--vtm-border) !important;\n border-bottom: none !important;\n border-radius: 4px 4px 0 0 !important;\n margin-right: 3px !important;\n}\n\n.vector-menu-tabs li a,\n.vector-menu-tabs-legacy li a,\n.vector-tab-noicon a,\n.mw-portlet-views li a,\n.mw-portlet-namespaces li a {\n color: var(--vtm-gold) !important;\n font-family: var(--vtm-font-title) !important;\n font-size: 0.85em !important;\n font-weight: 600 !important;\n text-transform: uppercase !important;\n letter-spacing: 0.5px !important;\n padding: 8px 14px !important;\n}\n\n.vector-menu-tabs li a:hover,\n.vector-menu-tabs-legacy li a:hover,\n.mw-portlet-views li a:hover,\n.mw-portlet-namespaces li a:hover {\n color: #ffffff !important;\n background: #22141a !important;\n}\n\n.vector-menu-tabs li.selected,\n.vector-menu-tabs-legacy li.selected,\n.mw-portlet-views li.selected,\n.mw-portlet-namespaces li.selected,\n.vector-tab-noicon.selected {\n background: linear-gradient(180deg, #420b14 0%, #1e0508 100%) !important;\n background-color: #2b080d !important;\n border: 1px solid #8b0000 !important;\n border-top: 3px solid #ff2a3f !important;\n border-bottom: none !important;\n box-shadow: 0 -2px 10px rgba(201, 24, 43, 0.4) !important;\n}\n\n.vector-menu-tabs li.selected a,\n.vector-menu-tabs-legacy li.selected a,\n.mw-portlet-views li.selected a,\n.mw-portlet-namespaces li.selected a,\n.vector-tab-noicon.selected a,\n.vector-menu-tabs li.selected span,\n.mw-portlet-views li.selected span {\n color: #ffffff !important;\n font-weight: 800 !important;\n text-shadow: 0 0 8px rgba(255, 42, 63, 0.6) !important;\n}\n\n/* ==========================================================================\n 8. CAIXAS DE AVISO & FORMULÁRIOS WIKITEXT\n ========================================================================== */\n.warningbox,\n.mw-warning-with-logexcerpt,\n.mw-anon-edit-warning,\n.anon-edit-warning,\n.cdx-message--warning,\n.cdx-message,\n.mw-message-box {\n background: linear-gradient(90deg, rgba(77, 16, 24, 0.5) 0%, rgba(22, 14, 18, 0.9) 100%) !important;\n background-color: #1f0d12 !important;\n border: 1px solid #5a1420 !important;\n border-left: 5px solid var(--vtm-blood-vivid) !important;\n border-radius: 4px !important;\n color: #ede9e1 !important;\n padding: 12px 18px !important;\n margin: 1.2em 0 !important;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7) !important;\n}\n\n.cdx-message__content,\n.mw-message-box p,\n.mw-anon-edit-warning p {\n color: #ede9e1 !important;\n}\n\ntextarea#wpTextbox1,\n#wpTextbox1,\n.mw-editform textarea {\n background: #0b0b10 !important;\n background-color: #0b0b10 !important;\n color: #f0ece3 !important;\n font-family: var(--vtm-font-mono) !important;\n border: 1px solid #3d0a12 !important;\n border-radius: 4px !important;\n padding: 14px 16px !important;\n box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.95) !important;\n}\n\n/* ==========================================================================\n 9. BUSCA & BOTÃO \"INVESTIGAR\"\n ========================================================================== */\n#simpleSearch,\n.cdx-text-input__input,\n.vector-search-box-input,\n.cdx-search-input .cdx-text-input__input,\ninput[type=\"search\"] {\n background: var(--vtm-onyx) !important;\n background-color: var(--vtm-onyx) !important;\n color: #ffffff !important;\n border: 1px solid var(--vtm-border-blood) !important;\n border-radius: 4px 0 0 4px !important;\n}\n\nbutton.cdx-search-input__end-button,\n.cdx-search-input__end-button,\n.vector-search-box .cdx-button,\n.vector-search-box-vue .cdx-button,\n.vector-search-box-vue button,\n#searchButton,\n#mw-searchButton {\n background: #000000 !important;\n background-color: #000000 !important;\n color: #ffffff !important;\n font-family: var(--vtm-font-title) !important;\n font-weight: 800 !important;\n border: 1px solid var(--vtm-border-blood) !important;\n border-left: none !important;\n border-radius: 0 4px 4px 0 !important;\n}\n\nbutton.cdx-search-input__end-button *,\n.cdx-search-input__end-button span,\n.cdx-search-input__end-button .cdx-button__label,\n.vector-search-box .cdx-button__label {\n color: #ffffff !important;\n font-weight: 800 !important;\n}\n\nbutton.cdx-search-input__end-button:hover,\n.cdx-search-input__end-button:hover {\n background: #15151e !important;\n color: var(--vtm-blood-neon) !important;\n border-color: var(--vtm-blood-vivid) !important;\n}\n\n/* ==========================================================================\n 10. TIPOGRAFIA & CABEÇALHOS GÓTICOS (COM SCALING RESPONSIVO)\n ========================================================================== */\nh1, h2, h3, h4, h5, h6,\n.mw-heading h1, .mw-heading h2, .mw-heading h3 {\n font-family: var(--vtm-font-title) !important;\n font-weight: 700 !important;\n letter-spacing: 0.5px !important;\n color: var(--vtm-text) !important;\n}\n\nh1.firstHeading,\n.mw-first-heading,\n#firstHeading,\n.mw-body h1 {\n font-family: var(--vtm-font-title) !important;\n font-size: clamp(1.6em, 3.5vw + 0.5em, 2.3em) !important;\n color: var(--vtm-blood-vivid) !important;\n text-shadow: 0 0 14px var(--vtm-blood-glow) !important;\n border-bottom: 2px solid var(--vtm-blood) !important;\n padding-bottom: 8px !important;\n word-break: break-word !important;\n}\n\nh2, .mw-heading2 h2 {\n font-size: clamp(1.25em, 2.5vw + 0.4em, 1.55em) !important;\n color: #f0ece5 !important;\n border-bottom: 1px solid var(--vtm-border-blood) !important;\n padding-bottom: 6px !important;\n margin-top: 20px !important;\n word-break: break-word !important;\n}\n\nh3, .mw-heading3 h3 {\n font-size: clamp(1.05em, 2vw + 0.3em, 1.25em) !important;\n color: var(--vtm-gold) !important;\n margin-top: 14px !important;\n}\n\nh4, .mw-heading4 h4 {\n font-size: 1.05em !important;\n color: #c9182b !important;\n}\n\na, a:visited,\n.mw-body a, .mw-body a:visited,\n.mw-parser-output a {\n color: #e55353 !important;\n text-decoration: none !important;\n}\n\na:hover, a:focus,\n.mw-body a:hover {\n color: var(--vtm-blood-neon) !important;\n text-shadow: 0 0 8px var(--vtm-blood-glow) !important;\n}\n\n/* ==========================================================================\n 11. CITAÇÕES / BLOCKQUOTES (.vtm-quote)\n ========================================================================== */\nblockquote,\n.vtm-quote,\n.mw-parser-output blockquote,\n.mw-parser-output .vtm-quote,\n.mw-body blockquote,\n.mw-body .vtm-quote {\n font-family: var(--vtm-font-typewriter) !important;\n font-size: 1.05em !important;\n line-height: 1.6 !important;\n color: #c8c3b8 !important;\n text-align: left !important;\n background: linear-gradient(135deg, rgba(22, 22, 29, 0.95) 0%, rgba(12, 12, 16, 0.98) 100%) !important;\n border: none !important;\n border-left: 3px solid var(--vtm-blood) !important;\n border-radius: 0 4px 4px 0 !important;\n padding: 22px 18px 16px 18px !important;\n margin: 1.2em 0.8em !important;\n position: relative !important;\n box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4), 0 4px 20px rgba(0, 0, 0, 0.5) !important;\n letter-spacing: 0.3px !important;\n box-sizing: border-box !important;\n}\n\nblockquote p,\n.vtm-quote p,\n.mw-parser-output blockquote p,\n.mw-parser-output .vtm-quote p {\n font-family: var(--vtm-font-typewriter) !important;\n color: #c8c3b8 !important;\n text-align: left !important;\n margin: 0 0 6px 0 !important;\n}\n\nblockquote p:last-child,\n.vtm-quote p:last-child,\n.mw-parser-output blockquote p:last-child,\n.mw-parser-output .vtm-quote p:last-child {\n margin-bottom: 0 !important;\n}\n\nblockquote cite,\nblockquote footer,\nblockquote .quote-source,\n.vtm-quote cite,\n.vtm-quote footer,\n.vtm-quote .quote-source {\n display: block !important;\n font-family: var(--vtm-font-title) !important;\n font-size: 0.85em !important;\n color: var(--vtm-gold) !important;\n margin-top: 8px !important;\n text-align: right !important;\n font-style: normal !important;\n letter-spacing: 1px !important;\n}\n\n/* ==========================================================================\n 12. LOGO VETORIAL SVG COM AURA RUBRA (ADAPTÁVEL)\n ========================================================================== */\n.mw-logo {\n display: inline-flex !important;\n align-items: center !important;\n height: 96px !important;\n min-height: 96px !important;\n min-width: 260px !important;\n max-height: none !important;\n padding: 4px 0 !important;\n text-decoration: none !important;\n border: none !important;\n}\n\n.mw-logo::before {\n content: \"\" !important;\n display: block !important;\n background-image: url('/images/b/be/Wiki_Logo.svg') !important;\n background-size: contain !important;\n background-repeat: no-repeat !important;\n background-position: center left !important;\n height: 96px !important;\n width: 270px !important;\n max-height: 96px !important;\n max-width: 320px !important;\n filter: drop-shadow(0 0 2px #ff2a3f) drop-shadow(0 0 8px rgba(201, 24, 43, 0.85)) drop-shadow(0 0 18px rgba(139, 0, 0, 0.6)) !important;\n transition: filter 0.3s ease, transform 0.2s ease !important;\n}\n\n.mw-logo:hover::before {\n filter: drop-shadow(0 0 3px #ff2a3f) drop-shadow(0 0 12px rgba(255, 42, 63, 0.95)) drop-shadow(0 0 26px rgba(201, 24, 43, 0.85)) !important;\n transform: scale(1.02) !important;\n}\n\n.mw-logo-icon {\n display: none !important;\n}\n\n.mw-logo-container,\n.mw-logo-wordmark,\n.mw-logo-tagline {\n display: none !important;\n}\n\n.mw-wiki-logo {\n background-image: url('/images/b/be/Wiki_Logo.svg') !important;\n background-size: contain !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n border: none !important;\n}\n\n/* ==========================================================================\n 13. MENU HAMBÚRGUER (AURA RUBRA & HOVER EFFECT)\n ========================================================================== */\n#vector-main-menu-dropdown,\n.vector-main-menu-dropdown,\n#vector-main-menu-dropdown .vector-dropdown-label,\n.vector-main-menu-dropdown .vector-dropdown-label,\n#vector-main-menu-dropdown-label,\n.vector-header .vector-main-menu-dropdown .cdx-button,\n#vector-main-menu-dropdown .cdx-button,\n.vector-main-menu-dropdown-checkbox + label {\n background: transparent !important;\n border: none !important;\n box-shadow: none !important;\n outline: none !important;\n}\n\n#vector-main-menu-dropdown .vector-icon,\n.vector-main-menu-dropdown .vector-icon,\n#vector-main-menu-dropdown .cdx-button__icon,\n.mw-ui-icon-wikimedia-menu,\n#vector-main-menu-dropdown-label .vector-icon,\n#vector-main-menu-dropdown-label::before,\n.vector-main-menu-dropdown-checkbox + label .vector-icon {\n color: #f5f5f5 !important;\n background-color: #f5f5f5 !important;\n filter: drop-shadow(0 0 2px #ff2a3f) drop-shadow(0 0 8px rgba(201, 24, 43, 0.85)) drop-shadow(0 0 18px rgba(139, 0, 0, 0.6)) !important;\n transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) !important;\n}\n\n#vector-main-menu-dropdown:hover .vector-icon,\n.vector-main-menu-dropdown:hover .vector-icon,\n#vector-main-menu-dropdown:hover .cdx-button__icon,\n#vector-main-menu-dropdown .vector-dropdown-label:hover .vector-icon,\n.vector-main-menu-dropdown .vector-dropdown-label:hover .vector-icon,\n#vector-main-menu-dropdown:hover .mw-ui-icon-wikimedia-menu,\n#vector-main-menu-dropdown-label:hover .vector-icon,\n.vector-main-menu-dropdown-checkbox + label:hover .vector-icon {\n color: #ffffff !important;\n background-color: #ffffff !important;\n filter: drop-shadow(0 0 3px #ff2a3f) drop-shadow(0 0 12px rgba(255, 42, 63, 0.95)) drop-shadow(0 0 26px rgba(201, 24, 43, 0.85)) !important;\n transform: scale(1.08) !important;\n}\n\n#vector-main-menu-dropdown .vector-dropdown-label,\n.vector-main-menu-dropdown .vector-dropdown-label,\n#vector-main-menu-dropdown-label,\n.vector-main-menu-dropdown-checkbox + label {\n filter: drop-shadow(0 0 2px #ff2a3f) drop-shadow(0 0 8px rgba(201, 24, 43, 0.85)) drop-shadow(0 0 18px rgba(139, 0, 0, 0.6)) !important;\n transition: filter 0.3s ease, transform 0.2s ease !important;\n border-radius: 4px !important;\n cursor: pointer !important;\n}\n\n#vector-main-menu-dropdown .vector-dropdown-label:hover,\n.vector-main-menu-dropdown .vector-dropdown-label:hover,\n#vector-main-menu-dropdown-label:hover,\n.vector-main-menu-dropdown-checkbox + label:hover {\n filter: drop-shadow(0 0 3px #ff2a3f) drop-shadow(0 0 12px rgba(255, 42, 63, 0.95)) drop-shadow(0 0 26px rgba(201, 24, 43, 0.85)) !important;\n}\n\n#vector-main-menu-dropdown .vector-dropdown-label:focus,\n#vector-main-menu-dropdown .vector-dropdown-label:active,\n#vector-main-menu-dropdown-checkbox:focus + .vector-dropdown-label,\n#vector-main-menu-dropdown-checkbox:focus + label {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n}\n\n/* ==========================================================================\n 14. TARJA DE CENSURA & SEGREDO DINÂMICO (.vtm-segredo)\n ========================================================================== */\n.vtm-segredo {\n transition: all 0.3s ease;\n}\n\n/* --- CENSURADO: tarja preta pura e limpa --- */\n.vtm-segredo.is-redacted {\n background: #0a0a0e !important;\n color: transparent !important;\n user-select: none !important;\n -webkit-user-select: none !important;\n border-radius: 2px !important;\n padding: 1px 6px !important;\n cursor: help !important;\n}\n\n.vtm-segredo.is-redacted * {\n color: transparent !important;\n user-select: none !important;\n -webkit-user-select: none !important;\n}\n\n.vtm-segredo.is-redacted:hover {\n background: #141418 !important;\n}\n\n/* --- REVELADO / DESCLASSIFICADO --- */\n.vtm-segredo.is-revealed {\n background: rgba(45, 12, 18, 0.4) !important;\n color: #f5f0e6 !important;\n font-family: 'Special Elite', 'Courier New', monospace !important;\n border-radius: 3px !important;\n padding: 1px 6px !important;\n user-select: text !important;\n}\n\n.vtm-segredo.is-revealed * {\n color: #f5f0e6 !important;\n}\n\n/* --- FORMATO BLOCO (tipo=bloco) --- */\n.vtm-segredo[data-tipo=\"bloco\"] {\n display: block !important;\n margin: 1.2em 0 !important;\n padding: 16px 20px !important;\n border-radius: 4px !important;\n}\n\n.vtm-segredo[data-tipo=\"bloco\"].is-redacted {\n background: #0a0a0e !important;\n min-height: 60px !important;\n border-left: 4px solid #2a2a30 !important;\n}\n\n.vtm-segredo[data-tipo=\"bloco\"].is-revealed {\n background: linear-gradient(135deg, rgba(22, 16, 20, 0.92) 0%, rgba(12, 10, 14, 0.96) 100%) !important;\n border-left: 4px solid #c5a059 !important;\n}\n\n/* ==========================================================================\n 15. CONTRASTE & LEGIBILIDADE NOS MODAIS OOUI DO VISUALEDITOR\n ========================================================================== */\n.oo-ui-window-frame,\n.oo-ui-dialog,\n.oo-ui-panelLayout-padded,\n.oo-ui-processDialog-content,\n.ve-ui-mwTransclusionDialog {\n background: #121218 !important;\n background-color: #121218 !important;\n color: #ede9e1 !important;\n border: 1px solid #4a101a !important;\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.95) !important;\n}\n\n.oo-ui-window-head,\n.oo-ui-processDialog-title,\n.oo-ui-processDialog-navigation {\n background: #0c0c10 !important;\n border-bottom: 1px solid #3d0a12 !important;\n color: #c5a059 !important;\n font-family: var(--vtm-font-title) !important;\n font-weight: 700 !important;\n}\n\n.oo-ui-processDialog-title .oo-ui-labelElement-label {\n color: #ffffff !important;\n font-family: var(--vtm-font-title) !important;\n font-weight: 800 !important;\n letter-spacing: 0.5px !important;\n}\n\n/* Campos de entrada dentro do modal */\n.oo-ui-textInputWidget .oo-ui-inputWidget-input,\n.oo-ui-multilineTextInputWidget .oo-ui-inputWidget-input,\n.ve-ui-mwTransclusionDialog input,\n.ve-ui-mwTransclusionDialog textarea {\n background: #08080c !important;\n background-color: #08080c !important;\n color: #ffffff !important;\n font-family: var(--vtm-font-body) !important;\n font-size: 0.95em !important;\n border: 1px solid #3d0a12 !important;\n border-radius: 4px !important;\n padding: 8px 12px !important;\n box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.9) !important;\n}\n\n.oo-ui-textInputWidget .oo-ui-inputWidget-input:focus,\n.oo-ui-multilineTextInputWidget .oo-ui-inputWidget-input:focus {\n border-color: #ff2a3f !important;\n box-shadow: 0 0 10px rgba(201, 24, 43, 0.5), inset 0 2px 8px rgba(0, 0, 0, 0.9) !important;\n outline: none !important;\n}\n\n.oo-ui-textInputWidget .oo-ui-inputWidget-input::placeholder,\n.oo-ui-multilineTextInputWidget .oo-ui-inputWidget-input::placeholder {\n color: #7a766e !important;\n opacity: 1 !important;\n}\n\n.oo-ui-fieldLayout-header .oo-ui-labelElement-label,\n.ve-ui-mwParameterPage-label,\n.ve-ui-mwTemplateTitleInputWidget-label {\n color: #c5a059 !important;\n font-family: var(--vtm-font-title) !important;\n font-weight: 700 !important;\n font-size: 0.92em !important;\n}\n\n.oo-ui-fieldLayout-helpText,\n.ve-ui-mwParameterPage-description,\n.oo-ui-fieldLayout-help {\n color: #b0aca4 !important;\n font-size: 0.85em !important;\n line-height: 1.4 !important;\n}\n\n.oo-ui-bookletLayout-outline,\n.oo-ui-outlineSelectWidget,\n.oo-ui-outlineOptionWidget {\n background: #0d0d12 !important;\n color: #ddd9d0 !important;\n border-right: 1px solid #3d0a12 !important;\n}\n\n.oo-ui-outlineOptionWidget-selected {\n background: #3d0a12 !important;\n color: #ffffff !important;\n font-weight: 700 !important;\n}\n\n.oo-ui-outlineOptionWidget-highlighted {\n background: #251016 !important;\n color: #ff2a3f !important;\n}\n\n.oo-ui-processDialog-actions-primary .oo-ui-buttonElement-button {\n background: linear-gradient(180deg, #8b1020 0%, #450810 100%) !important;\n border: 1px solid #ff2a3f !important;\n border-radius: 4px !important;\n}\n\n.oo-ui-processDialog-actions-primary .oo-ui-labelElement-label {\n color: #ffffff !important;\n font-family: var(--vtm-font-title) !important;\n font-weight: 800 !important;\n}\n\n/* ==========================================================================\n 16. VISUALEDITOR — VISIBILIDADE TOTAL & EDIÇÃO DE SEGREDO\n ========================================================================== */\n.ve-ui-surface,\n.ve-ce-surface,\n.ve-ce-documentNode,\n.ve-init-mw-desktopArticleTarget-surface {\n background: #101015 !important;\n background-color: #101015 !important;\n color: #ede9e1 !important;\n caret-color: #ff2a3f !important;\n}\n\n.ve-ce-documentNode p,\n.ve-ce-documentNode h1,\n.ve-ce-documentNode h2,\n.ve-ce-documentNode h3,\n.ve-ce-documentNode h4,\n.ve-ce-documentNode li,\n.ve-ce-documentNode td,\n.ve-ce-documentNode div,\n.ve-ce-surface .vtm-section-block {\n opacity: 1 !important;\n visibility: visible !important;\n animation: none !important;\n transform: none !important;\n}\n\n.ve-ce-surface .vtm-segredo,\n.ve-ui-surface .vtm-segredo,\n.ve-ce-documentNode .vtm-segredo,\n.ve-ce-leafNode.ve-ce-mwTransclusionInlineNode,\n.ve-ce-leafNode.ve-ce-mwTransclusionBlockNode {\n background: rgba(60, 15, 25, 0.45) !important;\n color: #ffffff !important;\n border: 1px dashed #ff2a3f !important;\n border-radius: 3px !important;\n padding: 2px 6px !important;\n user-select: text !important;\n -webkit-user-select: text !important;\n}\n\n.ve-ce-surface .vtm-segredo .vtm-segredo-conteudo,\n.ve-ui-surface .vtm-segredo .vtm-segredo-conteudo,\n.ve-ce-documentNode .vtm-segredo .vtm-segredo-conteudo {\n opacity: 1 !important;\n visibility: visible !important;\n color: #ffffff !important;\n pointer-events: auto !important;\n}\n\n.ve-ce-surface .vtm-segredo::after,\n.ve-ui-surface .vtm-segredo::after,\n.ve-ce-documentNode .vtm-segredo::after {\n display: none !important;\n}\n\n.ve-ui-contextItemWidget,\n.ve-ui-mwTransclusionContextItem {\n background: #161622 !important;\n border: 1px solid #4a101a !important;\n border-left: 4px solid #8b0000 !important;\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.9) !important;\n border-radius: 4px !important;\n}\n\n.ve-ui-contextItemWidget .oo-ui-labelElement-label {\n color: #ffffff !important;\n font-family: var(--vtm-font-title) !important;\n font-weight: 700 !important;\n}\n\n.ve-ui-contextItemWidget .oo-ui-buttonElement-button {\n background: linear-gradient(180deg, #8b1020 0%, #450810 100%) !important;\n border: 1px solid #ff2a3f !important;\n border-radius: 3px !important;\n}\n\n.ve-ui-contextItemWidget .oo-ui-buttonElement-button .oo-ui-labelElement-label {\n color: #ffffff !important;\n font-weight: 800 !important;\n}\n\n/* ==========================================================================\n 17. INFOBOXES DE PERSONAGEM & CARDS (.vtm-infobox)\n ========================================================================== */\n.vtm-infobox {\n float: right;\n clear: right;\n width: 320px;\n margin: 0 0 1.4em 1.5em;\n background: linear-gradient(135deg, rgba(22, 22, 30, 0.98) 0%, rgba(12, 12, 17, 0.99) 100%) !important;\n border: 1px solid var(--vtm-border-blood) !important;\n border-top: 3px solid var(--vtm-blood-vivid) !important;\n border-radius: 4px !important;\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.85), inset 0 0 15px rgba(0, 0, 0, 0.5) !important;\n padding: 0 !important;\n overflow: hidden !important;\n font-size: 0.92em !important;\n color: var(--vtm-text) !important;\n box-sizing: border-box !important;\n}\n\n.vtm-infobox-header {\n background: linear-gradient(180deg, #5a0a14 0%, #200408 100%) !important;\n color: #ffffff !important;\n font-family: var(--vtm-font-title) !important;\n font-weight: 800 !important;\n font-size: 1.25em !important;\n text-align: center !important;\n padding: 10px 14px !important;\n border-bottom: 1px solid var(--vtm-blood) !important;\n letter-spacing: 1px !important;\n text-shadow: 0 0 10px rgba(255, 42, 63, 0.6) !important;\n}\n\n.vtm-infobox-subheader {\n background: #0d0d12 !important;\n color: var(--vtm-gold) !important;\n font-family: var(--vtm-font-title) !important;\n font-size: 0.82em !important;\n text-align: center !important;\n padding: 4px 10px !important;\n text-transform: uppercase !important;\n letter-spacing: 0.8px !important;\n border-bottom: 1px solid var(--vtm-border) !important;\n}\n\n.vtm-infobox-section {\n background: #14141c !important;\n color: var(--vtm-gold-bright) !important;\n font-family: var(--vtm-font-title) !important;\n font-weight: 700 !important;\n font-size: 0.85em !important;\n text-transform: uppercase !important;\n letter-spacing: 1px !important;\n padding: 6px 12px !important;\n border-top: 1px solid var(--vtm-border-blood) !important;\n border-bottom: 1px solid var(--vtm-border) !important;\n}\n\n.vtm-infobox-row {\n display: flex !important;\n justify-content: space-between !important;\n align-items: baseline !important;\n padding: 6px 12px !important;\n border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;\n gap: 10px !important;\n}\n\n.vtm-infobox-label {\n font-weight: 600 !important;\n color: var(--vtm-text-dim) !important;\n flex-shrink: 0 !important;\n min-width: 80px !important;\n}\n\n.vtm-infobox-data {\n color: #ede9e1 !important;\n text-align: right !important;\n word-break: break-word !important;\n}\n\n/* ==========================================================================\n 18. TABELAS RESPONSIVAS (.wikitable & .vtm-table)\n ========================================================================== */\ntable.wikitable,\n.vtm-table,\n.mw-parser-output table.wikitable {\n background: #0f0f15 !important;\n color: var(--vtm-text) !important;\n border: 1px solid var(--vtm-border-blood) !important;\n border-collapse: collapse !important;\n margin: 1.2em 0 !important;\n width: 100% !important;\n max-width: 100% !important;\n display: block !important;\n overflow-x: auto !important;\n -webkit-overflow-scrolling: touch !important;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;\n border-radius: 4px !important;\n}\n\ntable.wikitable th,\n.vtm-table th,\n.mw-parser-output table.wikitable th {\n background: linear-gradient(180deg, #38080f 0%, #1a0407 100%) !important;\n color: var(--vtm-gold) !important;\n font-family: var(--vtm-font-title) !important;\n font-weight: 700 !important;\n letter-spacing: 0.6px !important;\n border: 1px solid var(--vtm-border-blood) !important;\n padding: 8px 12px !important;\n text-align: left !important;\n}\n\ntable.wikitable td,\n.vtm-table td,\n.mw-parser-output table.wikitable td {\n border: 1px solid var(--vtm-border) !important;\n padding: 8px 12px !important;\n background: #111118 !important;\n}\n\ntable.wikitable tr:nth-child(even) td,\n.vtm-table tr:nth-child(even) td {\n background: #15151e !important;\n}\n\n/* ==========================================================================\n 19. MÍDIAS, IMAGENS & MINIATURAS RESPONSIVAS\n ========================================================================== */\n.mw-parser-output img,\n.mw-parser-output .thumb,\n.mw-parser-output .thumbinner,\n.mw-parser-output figure,\n.mw-parser-output .mw-default-size {\n max-width: 100% !important;\n height: auto !important;\n box-sizing: border-box !important;\n}\n\n.thumbinner {\n background: #14141c !important;\n border: 1px solid var(--vtm-border-blood) !important;\n border-radius: 4px !important;\n padding: 6px !important;\n}\n\n.thumbimage {\n border: 1px solid #20202c !important;\n}\n\n.thumbcaption {\n color: var(--vtm-text-dim) !important;\n font-size: 0.85em !important;\n padding: 4px 2px !important;\n}\n\n/* ==========================================================================\n 20. MEDIA QUERIES RESPONSIVAS — MOBILE & TABLET OPTIMIZATIONS\n ========================================================================== */\n\n/* --- TABLET & SMARTPHONE (< 900px) --- */\n@media (max-width: 900px) {\n .mw-page-container {\n padding: 0 !important;\n }\n\n .mw-body-content,\n #bodyContent,\n .mw-parser-output {\n padding-left: 14px !important;\n padding-right: 14px !important;\n }\n}\n\n/* --- SMARTPHONE (< 768px) --- */\n@media (max-width: 768px) {\n /* Logo proporcional no header */\n .mw-logo {\n height: 56px !important;\n min-height: 56px !important;\n min-width: 180px !important;\n width: 180px !important;\n }\n\n .mw-logo::before {\n height: 56px !important;\n width: 180px !important;\n max-height: 56px !important;\n max-width: 180px !important;\n }\n\n /* Infoboxes de personagens: fluxo vertical completo */\n .vtm-infobox {\n float: none !important;\n width: 100% !important;\n margin: 1.2em 0 !important;\n clear: both !important;\n }\n\n /* Imagens com alinhamento flutuante viram blocos centrais */\n .tright,\n .tleft,\n .floatright,\n .floatleft,\n .mw-halign-right,\n .mw-halign-left {\n float: none !important;\n margin: 1.2em auto !important;\n text-align: center !important;\n display: block !important;\n }\n\n .thumbinner {\n width: 100% !important;\n max-width: 100% !important;\n margin: 0 auto !important;\n }\n\n /* Citações e Segredos adaptados */\n blockquote,\n .vtm-quote,\n .mw-parser-output blockquote,\n .mw-parser-output .vtm-quote {\n margin: 1em 0 !important;\n padding: 16px 12px 12px 12px !important;\n font-size: 0.95em !important;\n }\n\n .vtm-segredo[data-tipo=\"bloco\"] {\n padding: 12px 14px !important;\n margin: 1em 0 !important;\n }\n\n /* Abas superiores condensadas para toque */\n .vector-menu-tabs li a,\n .vector-menu-tabs-legacy li a,\n .vector-tab-noicon a,\n .mw-portlet-views li a,\n .mw-portlet-namespaces li a {\n padding: 6px 9px !important;\n font-size: 0.76em !important;\n letter-spacing: 0.2px !important;\n }\n\n /* Formulário de login ocupa a tela confortavelmente */\n .mw-special-Userlogin .mw-htmlform,\n .mw-special-Userlogin .mw-htmlform-codex,\n #userloginForm form,\n .mw-htmlform.mw-htmlform-codex {\n padding: 18px 16px !important;\n margin: 10px auto !important;\n }\n}\n\n/* --- SMARTPHONE PEQUENO (< 480px) --- */\n@media (max-width: 480px) {\n .mw-logo {\n height: 44px !important;\n min-height: 44px !important;\n min-width: 140px !important;\n width: 140px !important;\n }\n\n .mw-logo::before {\n height: 44px !important;\n width: 140px !important;\n max-height: 44px !important;\n max-width: 140px !important;\n }\n\n .mw-body-content,\n #bodyContent,\n .mw-parser-output {\n padding-left: 8px !important;\n padding-right: 8px !important;\n padding-top: 8px !important;\n }\n\n .vtm-infobox-header {\n font-size: 1.1em !important;\n padding: 8px 10px !important;\n }\n\n .vtm-infobox-row {\n padding: 5px 8px !important;\n font-size: 0.9em !important;\n }\n\n .vector-menu-tabs li a,\n .vector-menu-tabs-legacy li a,\n .mw-portlet-views li a,\n .mw-portlet-namespaces li a {\n padding: 5px 6px !important;\n font-size: 0.7em !important;\n }\n}\n