/* ===================================================== Imperius Draconis – Tema "Clean" (minimal blanco & negro) Activa: ===================================================== */ /* Import tipografía moderna */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap'); /* Paleta y tokens del tema */ body[data-theme="clean"] { --font-ui: 'Inter', sans-serif; /* Colores base */ --bg-1: #ffffff; --bg-2: #f5f5f5; --text: #111111; --muted: #555555; /* Neutrales */ --border: #e5e5e5; --ring: rgba(0,0,0,0.15); /* Acentos en negro/gris */ --accent: #111111; --accent-2: #333333; --success: #16a34a; --danger: #dc2626; --warning: #ca8a04; /* Sombras suaves */ --shadow-1: 0 1px 2px rgba(0,0,0,.06); --shadow-2: 0 4px 12px rgba(0,0,0,.1); /* Fondos */ --grad-bg: linear-gradient(180deg, #ffffff 0%, #fafafa 100%); /* Componentes */ --card-bg: #ffffff; --card-border: var(--border); --table-th-bg: #f0f0f0; --table-td-bg: #ffffff; /* Botones */ --btn-primary-bg: var(--accent); --btn-primary-bg-hover: var(--accent-2); --btn-primary-text: #ffffff; --btn-ghost-bg: #f5f5f5; --btn-ghost-text: #111111; } /* Tarjetas */ body[data-theme="clean"] .hp-card { background: var(--card-bg) !important; border: 1px solid var(--card-border) !important; border-radius: 12px !important; color: var(--text) !important; box-shadow: var(--shadow-1) !important; } body[data-theme="clean"] .hp-card:hover { box-shadow: var(--shadow-2) !important; } /* Tablas */ body[data-theme="clean"] .table-hogwarts { background: var(--table-td-bg) !important; border: 1px solid var(--border) !important; box-shadow: none !important; border-radius: 8px !important; } body[data-theme="clean"] .table-hogwarts th { background: var(--table-th-bg) !important; color: var(--text) !important; text-shadow: none !important; } body[data-theme="clean"] .table-hogwarts td { background: var(--table-td-bg) !important; color: var(--text) !important; } /* Textos */ body[data-theme="clean"] .welcome-text, body[data-theme="clean"] .welcome-text-home, body[data-theme="clean"] .sub-welcome { color: var(--text) !important; text-shadow: none !important; font-family: var(--font-ui) !important; } /* Botones */ body[data-theme="clean"] .btn-gold, body[data-theme="clean"] .btn-hp, body[data-theme="clean"] .btn-hp-create { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; border: 1px solid var(--btn-primary-bg) !important; box-shadow: none !important; } body[data-theme="clean"] .btn-gold:hover, body[data-theme="clean"] .btn-hp:hover, body[data-theme="clean"] .btn-hp-create:hover { background: var(--btn-primary-bg-hover) !important; color: #fff !important; } /* Ghost button */ body[data-theme="clean"] .btn-detalle { background: var(--btn-ghost-bg) !important; color: var(--btn-ghost-text) !important; border-color: transparent !important; } /* Inputs */ body[data-theme="clean"] .form-control, body[data-theme="clean"] input, body[data-theme="clean"] select { background-color: #fff !important; color: var(--text) !important; border: 1px solid var(--border) !important; } body[data-theme="clean"] .form-control:focus, body[data-theme="clean"] input:focus, body[data-theme="clean"] select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--ring) !important; } /* Radios & checkboxes */ body[data-theme="clean"] .form-check-input { border: 1.5px solid var(--border) !important; background: #fff !important; } body[data-theme="clean"] .form-check-input:checked { background-color: var(--accent) !important; border-color: var(--accent) !important; } /* Íconos */ body[data-theme="clean"] .action-icon { color: #444 !important; text-shadow: none !important; } body[data-theme="clean"] .action-icon:hover { color: var(--accent) !important; } body[data-theme="clean"] .dracoins-icon { color: var(--accent) !important; filter: none !important; } /* Utilidades que antes eran doradas */ body[data-theme="clean"] .text-gold { color: var(--accent) !important; } body[data-theme="clean"] .border-gold { border-color: var(--accent) !important; } body[data-theme="clean"] .bg-gold { background: var(--accent) !important; color: #fff !important; } /* Partículas off */ body[data-theme="clean"] #particles-js { display: none !important; }