/* ===================================================== Imperius Draconis – Tema "Azkaban" (gris, opresivo, con niebla) Activa: ===================================================== */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap'); body[data-theme="azkaban"] { --font-ui: 'Cinzel', serif; /* Colores base */ --bg-1: #0b0b0b; /* negro húmedo */ --bg-2: #1a1a1a; /* gris carbón */ --text: #e5e5e5; /* gris claro */ --muted: #9ca3af; /* gris acero */ /* Paleta apagada */ --border: #374151; --ring: rgba(156,163,175,0.3); /* grisáceo */ --accent: #6b7280; /* gris medio */ --accent-2: #4b5563; /* hover más oscuro */ --success: #9ca3af; --danger: #7f1d1d; /* rojo apagado */ --warning: #a16207; /* dorado opaco */ /* Sombras difusas */ --shadow-1: 0 2px 6px rgba(0,0,0,.6); --shadow-2: 0 10px 25px rgba(0,0,0,.8); /* Fondo degradado */ --grad-bg: linear-gradient(180deg, #0b0b0b 0%, #1a1a1a 100%); /* Componentes */ --card-bg: #141414; --card-border: #374151; --table-th-bg: #1f2937; --table-td-bg: #111827; /* Botones */ --btn-primary-bg: var(--accent); --btn-primary-bg-hover: var(--accent-2); --btn-primary-text: #f5f5f5; --btn-ghost-bg: #1f2937; --btn-ghost-text: #e5e5e5; } /* Tarjetas */ body[data-theme="azkaban"] .hp-card { background: var(--card-bg) !important; border: 1px solid var(--card-border) !important; border-radius: 10px !important; color: var(--text) !important; box-shadow: var(--shadow-1) !important; } body[data-theme="azkaban"] .hp-card:hover { box-shadow: var(--shadow-2) !important; transform: none !important; } /* Tablas */ body[data-theme="azkaban"] .table-hogwarts th { background: var(--table-th-bg) !important; color: var(--accent) !important; } body[data-theme="azkaban"] .table-hogwarts td { background: var(--table-td-bg) !important; color: var(--text) !important; } body[data-theme="azkaban"] .table-hogwarts tbody tr:hover { background-color: rgba(107,114,128,0.15) !important; } /* Textos */ body[data-theme="azkaban"] .welcome-text, body[data-theme="azkaban"] .welcome-text-home, body[data-theme="azkaban"] .sub-welcome { color: var(--accent) !important; font-family: var(--font-ui) !important; text-shadow: 0 0 6px rgba(107,114,128,0.3); } /* Botones */ body[data-theme="azkaban"] .btn-gold, body[data-theme="azkaban"] .btn-hp, body[data-theme="azkaban"] .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="azkaban"] .btn-gold:hover, body[data-theme="azkaban"] .btn-hp:hover, body[data-theme="azkaban"] .btn-hp-create:hover { background: var(--btn-primary-bg-hover) !important; transform: none !important; } /* Inputs */ body[data-theme="azkaban"] .form-control, body[data-theme="azkaban"] input, body[data-theme="azkaban"] select { background-color: #0b0b0b !important; color: var(--text) !important; border: 1px solid var(--border) !important; } body[data-theme="azkaban"] .form-control:focus, body[data-theme="azkaban"] input:focus, body[data-theme="azkaban"] select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--ring) !important; } /* Íconos */ body[data-theme="azkaban"] .action-icon, body[data-theme="azkaban"] .dracoins-icon { color: var(--accent) !important; filter: none !important; } /* Contenedor de niebla */ body[data-theme="azkaban"] #fog-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0; } /* Capa de niebla */ body[data-theme="azkaban"] .fog { position: absolute; width: 250%; /* aún más grande, que cubra todo */ height: 250%; background: radial-gradient(circle, rgba(230,230,230,0.4) 0%, transparent 70%); animation: drift linear infinite; opacity: 0.6; /* subido de 0.15 a 0.6 */ mix-blend-mode: screen; /* se mezcla encima del fondo oscuro */ filter: blur(60px); /* difuminado fantasmagórico */ } @keyframes drift { 0% { transform: translate(-30%, -30%) scale(1); } 50% { transform: translate(-20%, -35%) scale(1.2); } 100% { transform: translate(-30%, -30%) scale(1); } }