/* ===================================================== Imperius Draconis – Tema "Cute" (rosita & kawaii) Activa: ===================================================== */ /* Import tipografía redondeada */ @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap'); body[data-theme="cute"] { --font-ui: 'Quicksand', sans-serif; /* Colores base */ --bg-1: #fff0f5; /* rosa claro */ --bg-2: #ffe4ec; /* fondo panel */ --text: #4a2c35; /* marrón suave */ --muted: #a6787e; /* gris rosado */ /* Acentos */ --border: #fbcfe8; /* rosita claro */ --ring: rgba(236, 72, 153, 0.25); --accent: #ec4899; /* rosa fuerte */ --accent-2: #db2777; /* hover */ --success: #f472b6; /* rosado pastel */ --danger: #f43f5e; /* rosado rojizo */ --warning: #f9a8d4; /* rosa cálido */ /* Sombras suaves */ --shadow-1: 0 1px 3px rgba(236,72,153,.25); --shadow-2: 0 6px 16px rgba(236,72,153,.35); /* Fondos */ --grad-bg: linear-gradient(180deg, #fff0f5 0%, #ffe4ec 100%); /* Componentes */ --card-bg: #ffffff; --card-border: #f9a8d4; --table-th-bg: #fbcfe8; --table-td-bg: #fff0f5; /* Botones */ --btn-primary-bg: var(--accent); --btn-primary-bg-hover: var(--accent-2); --btn-primary-text: #fff; --btn-ghost-bg: #ffe4ec; --btn-ghost-text: #4a2c35; } /* Tarjetas */ body[data-theme="cute"] .hp-card { background: var(--card-bg) !important; border: 2px solid var(--card-border) !important; border-radius: 16px !important; color: var(--text) !important; box-shadow: var(--shadow-1) !important; } body[data-theme="cute"] .hp-card:hover { box-shadow: var(--shadow-2) !important; transform: translateY(-3px) !important; } /* Tablas */ body[data-theme="cute"] .table-hogwarts th { background: var(--table-th-bg) !important; color: var(--text) !important; text-shadow: none !important; } body[data-theme="cute"] .table-hogwarts td { background: var(--table-td-bg) !important; color: var(--text) !important; } body[data-theme="cute"] .table-hogwarts tbody tr:hover { background-color: #ffe4ec !important; } /* Textos */ body[data-theme="cute"] .welcome-text, body[data-theme="cute"] .welcome-text-home, body[data-theme="cute"] .sub-welcome { color: var(--accent) !important; text-shadow: none !important; font-family: var(--font-ui) !important; } /* Botones */ body[data-theme="cute"] .btn-gold, body[data-theme="cute"] .btn-hp, body[data-theme="cute"] .btn-hp-create { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; border: 1px solid var(--btn-primary-bg) !important; border-radius: 12px !important; } body[data-theme="cute"] .btn-gold:hover, body[data-theme="cute"] .btn-hp:hover, body[data-theme="cute"] .btn-hp-create:hover { background: var(--btn-primary-bg-hover) !important; transform: translateY(-1px) scale(1.02) !important; } /* Ghost button */ body[data-theme="cute"] .btn-detalle { background: var(--btn-ghost-bg) !important; color: var(--btn-ghost-text) !important; border-color: transparent !important; } /* Inputs */ body[data-theme="cute"] .form-control, body[data-theme="cute"] input, body[data-theme="cute"] select { background-color: #fff !important; color: var(--text) !important; border: 1px solid var(--border) !important; } body[data-theme="cute"] .form-control:focus, body[data-theme="cute"] input:focus, body[data-theme="cute"] select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--ring) !important; } /* Radios & checkboxes */ body[data-theme="cute"] .form-check-input { border: 1.5px solid var(--border) !important; background: #fff !important; } body[data-theme="cute"] .form-check-input:checked { background-color: var(--accent) !important; border-color: var(--accent) !important; } /* Íconos */ body[data-theme="cute"] .action-icon { color: var(--accent) !important; } body[data-theme="cute"] .action-icon:hover { color: var(--accent-2) !important; } body[data-theme="cute"] .dracoins-icon { color: var(--accent) !important; filter: drop-shadow(0 0 3px #f9a8d4) !important; } /* Utilidades */ body[data-theme="cute"] .text-gold { color: var(--accent) !important; } body[data-theme="cute"] .border-gold { border-color: var(--accent) !important; } body[data-theme="cute"] .bg-gold { background: var(--accent) !important; color: #fff !important; } /* Partículas off (o si quieres, usa corazoncitos 😉) */ body[data-theme="cute"] #particles-js { display: none !important; } /* Contenedor de corazones */ body[data-theme="cute"] #hearts-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: -1; /* igual que las partículas */ } /* Corazoncito */ body[data-theme="cute"] .heart { position: absolute; color: #ec4899; /* rosa */ font-size: 1.2rem; animation: floatUp linear forwards; opacity: 0.8; filter: drop-shadow(0 0 3px #f9a8d4); } @keyframes floatUp { 0% { transform: translateY(100vh) scale(0.8); opacity: 0.8; } 100% { transform: translateY(-10vh) scale(1.2); opacity: 0; } }