/* ===================================================== Imperius Draconis – Tema "Gryffindor" (rojo & dorado) Activa: ===================================================== */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap'); body[data-theme="gryffindor"] { --font-ui: 'Montserrat', sans-serif; /* Colores base */ --bg-1: #2b0d0d; /* rojo oscuro de fondo */ --bg-2: #3d1414; /* fondo secundario */ --text: #f5f5f5; /* texto claro */ --muted: #d4b887; /* dorado apagado */ /* Paleta Gryffindor */ --border: #b91c1c; --ring: rgba(220,38,38,0.3); --accent: #dc2626; /* rojo Gryffindor */ --accent-2: #b91c1c; /* rojo más oscuro */ --success: #facc15; /* dorado brillante */ --danger: #991b1b; --warning: #fbbf24; /* Sombras */ --shadow-1: 0 1px 3px rgba(185,28,28,.5); --shadow-2: 0 6px 16px rgba(185,28,28,.7); /* Fondos */ --grad-bg: linear-gradient(180deg, #2b0d0d 0%, #3d1414 100%); /* Componentes */ --card-bg: #3d1414; --card-border: var(--accent); --table-th-bg: #5c1e1e; --table-td-bg: #442020; /* Botones */ --btn-primary-bg: var(--accent); --btn-primary-bg-hover: var(--accent-2); --btn-primary-text: #fff; --btn-ghost-bg: #5c1e1e; --btn-ghost-text: #f5f5f5; } /* Tarjetas */ body[data-theme="gryffindor"] .hp-card { background: var(--card-bg) !important; border: 2px solid var(--card-border) !important; border-radius: 14px !important; color: var(--text) !important; box-shadow: var(--shadow-1) !important; } body[data-theme="gryffindor"] .hp-card:hover { box-shadow: var(--shadow-2) !important; transform: translateY(-2px) !important; } /* Tablas */ body[data-theme="gryffindor"] .table-hogwarts th { background: var(--table-th-bg) !important; color: var(--success) !important; } body[data-theme="gryffindor"] .table-hogwarts td { background: var(--table-td-bg) !important; color: var(--text) !important; } body[data-theme="gryffindor"] .table-hogwarts tbody tr:hover { background-color: rgba(220,38,38,0.2) !important; } /* Textos */ body[data-theme="gryffindor"] .welcome-text, body[data-theme="gryffindor"] .welcome-text-home, body[data-theme="gryffindor"] .sub-welcome { color: var(--success) !important; font-family: var(--font-ui) !important; text-shadow: 0 0 6px rgba(250,204,21,0.6); } /* Botones */ body[data-theme="gryffindor"] .btn-gold, body[data-theme="gryffindor"] .btn-hp, body[data-theme="gryffindor"] .btn-hp-create { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; border: 1px solid var(--btn-primary-bg) !important; } body[data-theme="gryffindor"] .btn-gold:hover, body[data-theme="gryffindor"] .btn-hp:hover, body[data-theme="gryffindor"] .btn-hp-create:hover { background: var(--btn-primary-bg-hover) !important; transform: translateY(-1px) scale(1.02) !important; } /* Inputs */ body[data-theme="gryffindor"] .form-control, body[data-theme="gryffindor"] input, body[data-theme="gryffindor"] select { background-color: #2b0d0d !important; color: var(--text) !important; border: 1px solid var(--border) !important; } body[data-theme="gryffindor"] .form-control:focus, body[data-theme="gryffindor"] input:focus, body[data-theme="gryffindor"] select:focus { border-color: var(--success) !important; box-shadow: 0 0 0 3px rgba(250,204,21,0.3) !important; } /* Radios & checkboxes */ body[data-theme="gryffindor"] .form-check-input { border: 1.5px solid var(--border) !important; background: #2b0d0d !important; } body[data-theme="gryffindor"] .form-check-input:checked { background-color: var(--success) !important; border-color: var(--success) !important; } /* Íconos */ body[data-theme="gryffindor"] .action-icon { color: var(--success) !important; } body[data-theme="gryffindor"] .action-icon:hover { color: var(--accent) !important; } body[data-theme="gryffindor"] .dracoins-icon { color: var(--success) !important; filter: drop-shadow(0 0 3px #b45309) !important; } /* Utilidades */ body[data-theme="gryffindor"] .text-gold { color: var(--success) !important; } body[data-theme="gryffindor"] .border-gold { border-color: var(--success) !important; } body[data-theme="gryffindor"] .bg-gold { background: var(--success) !important; color: #000 !important; } /* Partículas en rojo/dorado */ body[data-theme="gryffindor"] #particles-js canvas { filter: hue-rotate(-20deg) brightness(1.2); }