/* ========================================= theme-templates.css - versión BESTIA Cargar DESPUÉS de /Estilos.css Uso: ========================================= */ /* ========================================= THEME TOKENS ========================================= */ :root, [data-theme="ocean"] { --page-inline-offset: 15px; --theme-bg-base: #1a2332; --theme-bg-surface: #243447; --theme-bg-nav: #111b27; --theme-bg-elevated: #2b3d52; --theme-bg-overlay: rgba(16, 22, 31, 0.82); --theme-text-primary: #f1faee; --theme-text-secondary: #a8dadc; --theme-text-muted: #c7d0d8; --theme-text-inverse: #0f1720; --theme-text-on-solid: #f1faee; --theme-border-strong: #2d8b8b; --theme-border-soft: rgba(168, 218, 220, 0.28); --theme-border-muted: rgba(199, 208, 216, 0.22); --theme-border-contrast: #111b27; --theme-primary: #2d8b8b; --theme-primary-hover: #1f6464; --theme-primary-soft: rgba(45, 139, 139, 0.18); --theme-secondary: #43586f; --theme-secondary-hover: #526a84; --theme-secondary-soft: rgba(82, 106, 132, 0.20); --theme-success: #2d8b8b; --theme-success-hover: #1f6464; --theme-warning: #f2c14e; --theme-warning-hover: #d6a836; --theme-danger: #b84c5c; --theme-danger-hover: #913848; --theme-disabled-bg: #6c757d; --theme-disabled-border: #5a6268; --theme-disabled-text: #ffffff; --theme-field-disabled-bg: #1a2332; --theme-field-disabled-text: #a8dadc; --theme-field-readonly-bg: #1a2332; --theme-field-readonly-text: #a8dadc; --theme-tag-bg: #ffffff; --theme-alert-success-bg: rgba(45, 139, 139, 0.16); --theme-alert-success-border: rgba(45, 139, 139, 0.58); --theme-alert-success-text: #d7f6f3; --theme-alert-warning-bg: rgba(242, 193, 78, 0.16); --theme-alert-warning-border: rgba(242, 193, 78, 0.58); --theme-alert-warning-text: #fff4d1; --theme-alert-danger-bg: rgba(184, 76, 92, 0.18); --theme-alert-danger-border: rgba(184, 76, 92, 0.62); --theme-alert-danger-text: #ffe1e5; --theme-focus: #2d8b8b; --theme-focus-ring: rgba(45, 139, 139, 0.25); --theme-shadow-strong: rgba(0, 0, 0, 0.50); --theme-shadow-medium: rgba(0, 0, 0, 0.40); --theme-shadow-card: 0 8px 18px rgba(0, 0, 0, 0.35); --theme-shadow-card-soft: 0 10px 28px rgba(0, 0, 0, 0.22); --theme-shadow-soft: 0 10px 18px -12px rgba(0, 0, 0, 0.85); --theme-shadow-soft-hover: 0 14px 24px -14px rgba(0, 0, 0, 0.95); --theme-shadow-modal: 0 16px 36px rgba(0, 0, 0, 0.38); --theme-menu-tile-bg: linear-gradient(180deg, rgba(43, 61, 82, 0.96), rgba(30, 44, 60, 0.98)); --theme-menu-tile-hover-bg: linear-gradient(180deg, rgba(53, 78, 103, 0.98), rgba(36, 55, 74, 1)); --theme-menu-tile-border: rgba(168, 218, 220, 0.24); --theme-menu-tile-icon-bg: rgba(45, 139, 139, 0.18); --theme-menu-tile-icon-color: #a8dadc; --theme-menu-section-title: #a8dadc; --bg-base: var(--theme-bg-base); --bg-surface: var(--theme-bg-surface); --bg-nav: var(--theme-bg-nav); --color-primary: var(--theme-primary); --color-primary-hover: var(--theme-primary-hover); --color-accent: var(--theme-text-secondary); --color-text: var(--theme-text-primary); --color-text-inverse: var(--theme-text-inverse); --color-focus: var(--theme-focus); --color-disabled-surface: var(--theme-field-disabled-bg); --shadow-strong: var(--theme-shadow-strong); --shadow-medium: var(--theme-shadow-medium); --focus-ring: var(--theme-focus-ring); --bs-body-color: var(--theme-text-primary); --bs-body-bg: var(--theme-bg-base); --bs-border-color: var(--theme-border-strong); --bs-border-color-translucent: var(--theme-border-soft); --bs-primary: var(--theme-primary); --bs-secondary: var(--theme-secondary); --bs-success: var(--theme-success); --bs-info: var(--theme-primary); --bs-warning: var(--theme-warning); --bs-danger: var(--theme-danger); --bs-light: var(--theme-bg-elevated); --bs-dark: var(--theme-bg-nav); --theme-select-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f1faee' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } [data-theme="aurora"] { --theme-bg-base: #18212b; --theme-bg-surface: #223242; --theme-bg-nav: #0f1720; --theme-bg-elevated: #294155; --theme-bg-overlay: rgba(12, 18, 25, 0.82); --theme-text-primary: #f4fbff; --theme-text-secondary: #b9ece7; --theme-text-muted: #bfd3df; --theme-text-inverse: #10181f; --theme-text-on-solid: #f4fbff; --theme-border-strong: #34a0a4; --theme-border-soft: rgba(185, 236, 231, 0.28); --theme-border-muted: rgba(191, 211, 223, 0.24); --theme-border-contrast: #0f1720; --theme-primary: #34a0a4; --theme-primary-hover: #26797b; --theme-primary-soft: rgba(52, 160, 164, 0.18); --theme-secondary: #4e647d; --theme-secondary-hover: #627d9b; --theme-secondary-soft: rgba(98, 125, 155, 0.20); --theme-success: #2f9a83; --theme-success-hover: #237562; --theme-warning: #e9b949; --theme-warning-hover: #c89b31; --theme-danger: #c55d73; --theme-danger-hover: #9d465a; --theme-disabled-bg: #6c757d; --theme-disabled-border: #5a6268; --theme-disabled-text: #ffffff; --theme-field-disabled-bg: #1a2530; --theme-field-disabled-text: #b9ece7; --theme-field-readonly-bg: #1a2530; --theme-field-readonly-text: #b9ece7; --theme-tag-bg: #ffffff; --theme-alert-success-bg: rgba(47, 154, 131, 0.16); --theme-alert-success-border: rgba(47, 154, 131, 0.56); --theme-alert-success-text: #d8fff5; --theme-alert-warning-bg: rgba(233, 185, 73, 0.16); --theme-alert-warning-border: rgba(233, 185, 73, 0.56); --theme-alert-warning-text: #fff4d6; --theme-alert-danger-bg: rgba(197, 93, 115, 0.18); --theme-alert-danger-border: rgba(197, 93, 115, 0.58); --theme-alert-danger-text: #ffe3e8; --theme-focus: #34a0a4; --theme-focus-ring: rgba(52, 160, 164, 0.25); --theme-select-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f4fbff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } [data-theme="ember"] { --theme-bg-base: #221b1a; --theme-bg-surface: #302625; --theme-bg-nav: #171110; --theme-bg-elevated: #3a2f2d; --theme-bg-overlay: rgba(20, 14, 13, 0.82); --theme-text-primary: #f9f3ee; --theme-text-secondary: #f2d4b7; --theme-text-muted: #d8c2b2; --theme-text-inverse: #171110; --theme-text-on-solid: #fdf7f2; --theme-border-strong: #c4734a; --theme-border-soft: rgba(242, 212, 183, 0.28); --theme-border-muted: rgba(216, 194, 178, 0.24); --theme-border-contrast: #171110; --theme-primary: #c4734a; --theme-primary-hover: #9f5936; --theme-primary-soft: rgba(196, 115, 74, 0.18); --theme-secondary: #6f5650; --theme-secondary-hover: #8a6a62; --theme-secondary-soft: rgba(138, 106, 98, 0.20); --theme-success: #7b9d61; --theme-success-hover: #5f794a; --theme-warning: #d8a24b; --theme-warning-hover: #b48339; --theme-danger: #b95a5a; --theme-danger-hover: #944646; --theme-disabled-bg: #6c757d; --theme-disabled-border: #5a6268; --theme-disabled-text: #ffffff; --theme-field-disabled-bg: #251d1c; --theme-field-disabled-text: #f2d4b7; --theme-field-readonly-bg: #251d1c; --theme-field-readonly-text: #f2d4b7; --theme-tag-bg: #fff8f2; --theme-alert-success-bg: rgba(123, 157, 97, 0.18); --theme-alert-success-border: rgba(123, 157, 97, 0.58); --theme-alert-success-text: #edf8e1; --theme-alert-warning-bg: rgba(216, 162, 75, 0.18); --theme-alert-warning-border: rgba(216, 162, 75, 0.58); --theme-alert-warning-text: #fff0d6; --theme-alert-danger-bg: rgba(185, 90, 90, 0.18); --theme-alert-danger-border: rgba(185, 90, 90, 0.60); --theme-alert-danger-text: #ffe2e2; --theme-focus: #c4734a; --theme-focus-ring: rgba(196, 115, 74, 0.25); --theme-select-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f9f3ee' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } [data-theme="zelula"] { --theme-bg-base: #1e1718; --theme-bg-surface: #2a2022; --theme-bg-nav: #121214; --theme-bg-elevated: #342729; --theme-bg-overlay: rgba(16, 11, 12, 0.84); --theme-text-primary: #f7f1ef; --theme-text-secondary: #e9c8cb; --theme-text-muted: #d8c1c2; --theme-text-inverse: #140d0f; --theme-text-on-solid: #fff8f8; --theme-border-strong: #b64a55; --theme-border-soft: rgba(233, 200, 203, 0.24); --theme-border-muted: rgba(216, 193, 194, 0.20); --theme-border-contrast: #120d0e; --theme-primary: #ba1321; --theme-primary-hover: #9f303b; --theme-primary-soft: rgba(186, 19, 33, 0.14); --theme-secondary: #705255; --theme-secondary-hover: #876567; --theme-secondary-soft: rgba(135, 101, 103, 0.18); --theme-success: #809974; --theme-success-hover: #677d5e; --theme-warning: #cf9c62; --theme-warning-hover: #b2814a; --theme-danger: #c85b67; --theme-danger-hover: #aa4550; --theme-disabled-bg: #6c757d; --theme-disabled-border: #5a6268; --theme-disabled-text: #ffffff; --theme-field-disabled-bg: #261d1f; --theme-field-disabled-text: #e7d0d2; --theme-field-readonly-bg: #261d1f; --theme-field-readonly-text: #e7d0d2; --theme-tag-bg: #fff7f8; --theme-alert-success-bg: rgba(128, 153, 116, 0.16); --theme-alert-success-border: rgba(128, 153, 116, 0.50); --theme-alert-success-text: #edf6e9; --theme-alert-warning-bg: rgba(207, 156, 98, 0.16); --theme-alert-warning-border: rgba(207, 156, 98, 0.50); --theme-alert-warning-text: #fcefdc; --theme-alert-danger-bg: rgba(200, 91, 103, 0.16); --theme-alert-danger-border: rgba(200, 91, 103, 0.52); --theme-alert-danger-text: #fde7e9; --theme-focus: #b64a55; --theme-focus-ring: rgba(182, 74, 85, 0.24); --theme-menu-tile-bg: linear-gradient(180deg, rgba(58, 42, 45, 0.94), rgba(39, 29, 31, 0.99)); --theme-menu-tile-hover-bg: linear-gradient(180deg, rgba(73, 51, 55, 0.98), rgba(50, 35, 38, 1)); --theme-menu-tile-border: rgba(233, 200, 203, 0.18); --theme-menu-tile-icon-bg: rgba(182, 74, 85, 0.16); --theme-menu-tile-icon-color: #e9c8cb; --theme-menu-section-title: #e9c8cb; --theme-select-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f8f2f1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } [data-theme="test-hot"] { --theme-bg-base: #2b0f0f; --theme-bg-surface: #4a1818; --theme-bg-nav: #180808; --theme-bg-elevated: #5a2222; --theme-bg-overlay: rgba(32, 8, 8, 0.82); --theme-text-primary: #fff3ee; --theme-text-secondary: #ffb38a; --theme-text-muted: #e7c0b1; --theme-text-inverse: #180808; --theme-text-on-solid: #fff8f4; --theme-border-strong: #ff8a4c; --theme-border-soft: rgba(255, 138, 76, 0.28); --theme-border-muted: rgba(255, 179, 138, 0.24); --theme-border-contrast: #180808; --theme-primary: #ff8a4c; --theme-primary-hover: #e56f32; --theme-primary-soft: rgba(255, 138, 76, 0.18); --theme-secondary: #8f4f45; --theme-secondary-hover: #a96155; --theme-secondary-soft: rgba(169, 97, 85, 0.2); --theme-success: #7fb069; --theme-success-hover: #659353; --theme-warning: #f0b24a; --theme-warning-hover: #cf9435; --theme-danger: #d85b5b; --theme-danger-hover: #b94747; --theme-disabled-bg: #6c757d; --theme-disabled-border: #5a6268; --theme-disabled-text: #ffffff; --theme-field-disabled-bg: #321717; --theme-field-disabled-text: #ffcfb3; --theme-field-readonly-bg: #321717; --theme-field-readonly-text: #ffcfb3; --theme-tag-bg: #fff4ec; --theme-alert-success-bg: rgba(127, 176, 105, 0.18); --theme-alert-success-border: rgba(127, 176, 105, 0.58); --theme-alert-success-text: #eef8e7; --theme-alert-warning-bg: rgba(240, 178, 74, 0.18); --theme-alert-warning-border: rgba(240, 178, 74, 0.58); --theme-alert-warning-text: #fff2d8; --theme-alert-danger-bg: rgba(216, 91, 91, 0.18); --theme-alert-danger-border: rgba(216, 91, 91, 0.60); --theme-alert-danger-text: #ffe7e7; --theme-focus: #ff8a4c; --theme-focus-ring: rgba(255, 138, 76, 0.25); --theme-select-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff3ee' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } [data-theme] { --bg-base: var(--theme-bg-base); --bg-surface: var(--theme-bg-surface); --bg-nav: var(--theme-bg-nav); --color-primary: var(--theme-primary); --color-primary-hover: var(--theme-primary-hover); --color-accent: var(--theme-text-secondary); --color-text: var(--theme-text-primary); --color-text-inverse: var(--theme-text-inverse); --color-focus: var(--theme-focus); --color-disabled-surface: var(--theme-field-disabled-bg); --shadow-strong: var(--theme-shadow-strong); --shadow-medium: var(--theme-shadow-medium); --focus-ring: var(--theme-focus-ring); } /* ========================================= BASE ========================================= */ html[data-theme], body[data-theme], [data-theme] { color-scheme: dark; } html, body { background-color: var(--bg-base); color: var(--color-text); } body[data-theme] { background-color: var(--bg-base) !important; color: var(--color-text) !important; } body[data-theme] .body-content, body[data-theme] .page-root, body[data-theme] .root, body[data-theme] .login-page { background: transparent !important; color: var(--color-text) !important; } [data-theme] a { color: var(--color-accent); } [data-theme] .shadowrb, [data-theme] .btn { box-shadow: 6px 6px 6px -3px var(--shadow-strong); } [data-theme] .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; } [data-theme] .btn:not(.grid-action-btn):not(.btn-close) { min-width: 7rem; } /* ========================================= BLOCKS / CARDS / PANELS ========================================= */ [data-theme] .app-page-header, [data-theme] .menu-header, [data-theme] .ptv-header, [data-theme] .extracard_center, [data-theme] .card, [data-theme] .well, [data-theme] .panel, [data-theme] .modal-content { background-color: var(--bg-surface) !important; border: 1px solid var(--color-primary) !important; color: var(--color-text) !important; } [data-theme] .card, [data-theme] .card-body, [data-theme] .card-title { background-color: var(--bg-surface) !important; color: var(--color-text) !important; } [data-theme] .modal-title, [data-theme] .modal-header .modal-title, [data-theme] .modal-header h1, [data-theme] .modal-header h2, [data-theme] .modal-header h3, [data-theme] .modal-header h4, [data-theme] .modal-header h5, [data-theme] .modal-header h6 { color: var(--color-accent) !important; } [data-theme] .card { box-shadow: var(--theme-shadow-card-soft) !important; } [data-theme] .extracard_center { box-shadow: var(--theme-shadow-card) !important; } [data-theme] .app-page-title, [data-theme] .app-page-subtitle, [data-theme] .menu-title, [data-theme] .menu-subtitle, [data-theme] .ptv-header-title, [data-theme] .ptv-header-subtitle, [data-theme] .app-page-accent, [data-theme] .login-title, [data-theme] .TituloApp { color: var(--color-accent) !important; } /* ========================================= ALERTS ========================================= */ [data-theme] .app-alert, [data-theme] .alert { border-width: 1px; border-style: solid; } [data-theme] .alert-success { background-color: var(--theme-alert-success-bg) !important; border-color: var(--theme-alert-success-border) !important; color: var(--theme-alert-success-text) !important; } [data-theme] .alert-warning { background-color: var(--theme-alert-warning-bg) !important; border-color: var(--theme-alert-warning-border) !important; color: var(--theme-alert-warning-text) !important; } [data-theme] .alert-danger { background-color: var(--theme-alert-danger-bg) !important; border-color: var(--theme-alert-danger-border) !important; color: var(--theme-alert-danger-text) !important; } /* ========================================= FORMS ========================================= */ [data-theme] input, [data-theme] select, [data-theme] textarea, [data-theme] .form-control, [data-theme] .form-control:focus, [data-theme] textarea.form-control, [data-theme] select.form-control, [data-theme] .form-select, [data-theme] .form-select:focus { background-color: var(--bg-surface) !important; color: var(--color-text) !important; border: 1px solid var(--color-primary) !important; } [data-theme] .form-control::placeholder { color: var(--color-accent) !important; opacity: 0.75; } [data-theme] .form-control:focus, [data-theme] .form-select:focus { outline: none; border-color: var(--color-focus) !important; box-shadow: 0 0 0 0.2rem var(--focus-ring) !important; } [data-theme] .form-control[disabled], [data-theme] .form-control[readonly], [data-theme] .form-select:disabled, [data-theme] .form-select[disabled], [data-theme] input[disabled], [data-theme] select[disabled], [data-theme] textarea[disabled] { background-color: var(--theme-field-disabled-bg) !important; color: var(--theme-field-disabled-text) !important; background-image: none !important; opacity: 0.85; } [data-theme] .form-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: var(--theme-select-indicator) !important; background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; padding-right: 2.25rem; } /* ========================================= BUTTONS ========================================= */ [data-theme] .btn-primary, [data-theme] .btn-info { background-color: var(--theme-primary) !important; border-color: var(--theme-border-contrast) !important; color: var(--theme-text-on-solid) !important; } [data-theme] .btn-primary:hover, [data-theme] .btn-primary:focus, [data-theme] .btn-primary:active, [data-theme] .btn-primary.active, [data-theme] .btn-info:hover, [data-theme] .btn-info:focus, [data-theme] .btn-info:active, [data-theme] .btn-info.active { background-color: var(--theme-primary-hover) !important; border-color: var(--theme-border-contrast) !important; color: var(--theme-text-on-solid) !important; } [data-theme] .btn-secondary { background-color: var(--theme-secondary) !important; border-color: var(--theme-border-contrast) !important; color: var(--theme-text-on-solid) !important; } [data-theme] .btn-danger { background-color: var(--theme-danger) !important; border-color: var(--theme-border-contrast) !important; color: var(--theme-text-on-solid) !important; } [data-theme] .btn.disabled, [data-theme] .btn:disabled, [data-theme] fieldset:disabled .btn, [data-theme] .btn-primary.disabled, [data-theme] .btn-primary:disabled, [data-theme] .btn-info.disabled, [data-theme] .btn-info:disabled, [data-theme] .btn-secondary.disabled, [data-theme] .btn-secondary:disabled, [data-theme] .btn-danger.disabled, [data-theme] .btn-danger:disabled, [data-theme] fieldset:disabled .btn-primary, [data-theme] fieldset:disabled .btn-info, [data-theme] fieldset:disabled .btn-secondary, [data-theme] fieldset:disabled .btn-danger, [data-theme] .btn.disabled:hover, [data-theme] .btn.disabled:focus, [data-theme] .btn.disabled:active, [data-theme] .btn-primary.disabled:hover, [data-theme] .btn-primary.disabled:focus, [data-theme] .btn-primary.disabled:active, [data-theme] .btn-info.disabled:hover, [data-theme] .btn-info.disabled:focus, [data-theme] .btn-info.disabled:active, [data-theme] .btn-secondary.disabled:hover, [data-theme] .btn-secondary.disabled:focus, [data-theme] .btn-secondary.disabled:active, [data-theme] .btn-danger.disabled:hover, [data-theme] .btn-danger.disabled:focus, [data-theme] .btn-danger.disabled:active { background-color: var(--theme-disabled-bg) !important; border-color: var(--theme-disabled-border) !important; color: var(--theme-disabled-text) !important; opacity: 1 !important; box-shadow: none !important; pointer-events: none; } /* ========================================= NAVBAR / FOOTER / OVERLAYS ========================================= */ body[data-theme] .navbar, body[data-theme] .navbar-dark, body[data-theme] .navbar-collapse { background-color: var(--bg-nav) !important; } body[data-theme] .navbar-dark .navbar-nav .nav-link, body[data-theme] .navbar-dark .navbar-brand, body[data-theme] .navbar-dark .navbar-toggler, body[data-theme] .navbar .nav-link, body[data-theme] .navbar .navbar-brand, body[data-theme] .navbar .navbar-toggler, body[data-theme] footer, body[data-theme] footer *, body[data-theme] #version { color: var(--color-text) !important; border-color: var(--theme-border-soft) !important; } body[data-theme] .navbar-dark .navbar-nav .nav-link:hover, body[data-theme] .navbar-dark .navbar-nav .nav-link:focus, body[data-theme] .navbar .nav-link:hover, body[data-theme] .navbar .nav-link:focus, body[data-theme] .navbar .navbar-brand:hover, body[data-theme] .navbar .navbar-brand:focus { color: var(--color-accent) !important; } body[data-theme] hr, body[data-theme] footer hr, body[data-theme] .card hr { border-color: var(--theme-border-soft) !important; opacity: 1 !important; } [data-theme] .Background_Wait { background-color: var(--theme-bg-overlay) !important; } [data-theme] .Progress_Wait { background-color: var(--bg-surface) !important; border: 1px solid var(--color-primary) !important; color: var(--color-text) !important; } /* ========================================= LOGIN-SPECIFIC HARD OVERRIDES ========================================= */ body[data-theme] .login-page, body[data-theme] .login-page * { color: inherit; } body[data-theme] .login-page .login-label { color: var(--color-text) !important; } body[data-theme] .login-page .login-link { color: var(--color-primary) !important; } body[data-theme] .login-page .login-link:hover, body[data-theme] .login-page .login-link:focus { color: var(--color-accent) !important; } body[data-theme] .login-page .extracard_center, body[data-theme] .login-page .card, body[data-theme] .login-page .card-body { background: var(--bg-surface) !important; color: var(--color-text) !important; border: 2px solid var(--color-primary) !important; box-shadow: var(--theme-shadow-modal) !important; } body[data-theme] .login-page .form-control, body[data-theme] .login-page input, body[data-theme] .login-page textarea, body[data-theme] .login-page select { background: var(--bg-surface) !important; color: var(--color-text) !important; border: 1px solid var(--color-primary) !important; } body[data-theme] .login-page .form-control::placeholder { color: var(--color-accent) !important; } /* ========================================= MENU HELPERS ========================================= */ [data-theme] .menu-section-title, [data-theme] .menu-group-title { color: var(--theme-menu-section-title); } [data-theme] .menu-tile, [data-theme] .menu-card, [data-theme] .menu-shortcut { background: var(--theme-menu-tile-bg); color: var(--color-text); border: 1px solid var(--theme-menu-tile-border); border-radius: 10px; box-shadow: var(--theme-shadow-card-soft); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; } [data-theme] .menu-tile:hover, [data-theme] .menu-tile:focus, [data-theme] .menu-card:hover, [data-theme] .menu-card:focus, [data-theme] .menu-shortcut:hover, [data-theme] .menu-shortcut:focus { background: var(--theme-menu-tile-hover-bg); border-color: var(--color-accent); box-shadow: var(--theme-shadow-soft-hover); transform: translateY(-1px); } /* ========================================= TEST-HOT ABSOLUTE OVERRIDES ========================================= */ body[data-theme="test-hot"] { background: #2b0f0f !important; color: #fff3ee !important; } body[data-theme="test-hot"] .body-content, body[data-theme="test-hot"] .page-root, body[data-theme="test-hot"] .root, body[data-theme="test-hot"] .login-page { background: transparent !important; color: #fff3ee !important; } body[data-theme="test-hot"] .navbar, body[data-theme="test-hot"] .navbar-dark, body[data-theme="test-hot"] .navbar-collapse { background: #180808 !important; } body[data-theme="test-hot"] .card, body[data-theme="test-hot"] .extracard_center, body[data-theme="test-hot"] .card-body { background: #4a1818 !important; color: #fff3ee !important; border: 3px solid #ff8a4c !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important; } body[data-theme="test-hot"] .login-title, body[data-theme="test-hot"] .TituloApp { color: #ffb38a !important; } body[data-theme="test-hot"] .login-label, body[data-theme="test-hot"] .navbar .nav-link, body[data-theme="test-hot"] .navbar .navbar-brand, body[data-theme="test-hot"] #version, body[data-theme="test-hot"] footer, body[data-theme="test-hot"] footer * { color: #fff3ee !important; } body[data-theme="test-hot"] .form-control, body[data-theme="test-hot"] input, body[data-theme="test-hot"] textarea, body[data-theme="test-hot"] select:not(.form-select) { background: #4a1818 !important; color: #fff3ee !important; border: 1px solid #ff8a4c !important; } body[data-theme="test-hot"] .form-control::placeholder { color: #ffb38a !important; opacity: 0.8 !important; } body[data-theme="test-hot"] hr, body[data-theme="test-hot"] footer hr { border-color: rgba(255, 179, 138, 0.35) !important; opacity: 1 !important; } /* ========================================= EMBER ABSOLUTE OVERRIDES ========================================= */ body[data-theme="ember"] { background: #221b1a !important; color: #f9f3ee !important; } body[data-theme="ember"] .body-content, body[data-theme="ember"] .page-root, body[data-theme="ember"] .root, body[data-theme="ember"] .login-page { background: transparent !important; color: #f9f3ee !important; } body[data-theme="ember"] .navbar, body[data-theme="ember"] .navbar-dark, body[data-theme="ember"] .navbar-collapse { background: #171110 !important; } body[data-theme="ember"] .card, body[data-theme="ember"] .extracard_center, body[data-theme="ember"] .card-body { background: #302625 !important; color: #f9f3ee !important; border: 2px solid #c4734a !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38) !important; } body[data-theme="ember"] .login-title, body[data-theme="ember"] .TituloApp { color: #f2d4b7 !important; } body[data-theme="ember"] .login-label, body[data-theme="ember"] .navbar .nav-link, body[data-theme="ember"] .navbar .navbar-brand, body[data-theme="ember"] #version, body[data-theme="ember"] footer, body[data-theme="ember"] footer * { color: #f9f3ee !important; } body[data-theme="ember"] .form-control, body[data-theme="ember"] input, body[data-theme="ember"] textarea, body[data-theme="ember"] select:not(.form-select) { background: #302625 !important; color: #f9f3ee !important; border: 1px solid #c4734a !important; } body[data-theme="test-hot"] .form-select, body[data-theme="ember"] .form-select { background-color: var(--bg-surface) !important; background-image: var(--theme-select-indicator) !important; background-repeat: no-repeat !important; background-position: right 0.75rem center !important; background-size: 16px 12px !important; } body[data-theme="ember"] .form-control::placeholder { color: #f2d4b7 !important; opacity: 0.8 !important; } body[data-theme="ember"] hr, body[data-theme="ember"] footer hr { border-color: rgba(242, 212, 183, 0.28) !important; opacity: 1 !important; }