/* ===================================================== Imperius Draconis – Hogwarts UI Theme (organizado) Estructura: Tokens → Base → Animaciones → Layout → Componentes → Formularios → Utilidades → Responsivo Modo de color: oscuro por defecto; claro con [data-theme="light"] en ===================================================== */ /* ===================== 1) TOKENS ===================== */ :root { /* Tipografías */ --font-ui: 'MedievalSharp', cursive; /* Colores base (modo oscuro por defecto) */ --bg-1: #1e1e1e; /* fondo principal */ --bg-2: #3b3b3b; /* fondo alterno */ --text: #f8f8f8; /* texto principal */ --muted: #d7d7d7; /* texto secundario */ /* Paleta Hogwarts */ --gold: #ffd700; /* dorado intenso */ --gold-2: #bfa046; /* marco dorado / borde */ --gold-soft-10: rgba(255, 215, 0, 0.10); --gold-soft-30: rgba(255, 215, 0, 0.30); --brown: #4b3621; /* café Hogwarts */ --scarlet: #7f0909; /* rojo oscuro (eliminar) */ --navy: #0e1a40; /* azul Hogwarts */ /* Sombras y bordes */ --shadow-1: 0 4px 6px rgba(0,0,0,0.30); --shadow-2: 0 10px 20px rgba(255, 204, 0, 0.70); --ring-gold: 0 0 10px var(--gold-2); /* Gradientes */ --grad-bg: linear-gradient(270deg, var(--bg-1), var(--bg-2), var(--bg-1)); --grad-th: linear-gradient(45deg, var(--gold-2), var(--gold)); --grad-btn-gold: linear-gradient(to right, #FFD700, #FFC300); --grad-btn-gold-hover: linear-gradient(to right, #FFC300, #FFD700); --grad-btn-create: linear-gradient(to right, #6A0DAD, #8A2BE2); --grad-btn-create-hover: linear-gradient(to right, #8A2BE2, #6A0DAD); } /* Overrides modo claro: colocar en */ body[data-theme="light"] { --bg-1: #fff; /* fondo principal claro */ --bg-2: #fffbe6; /* fondo alterno cálido */ --text: #222; /* texto oscuro */ --muted: #4b4b4b; /* secundario */ --grad-bg: linear-gradient(270deg, #fffbe6, #fff, #fffbe6); --ring-gold: 0 0 10px var(--gold-2); } /* ================ 2) BASE / RESET ================ */ html { scroll-behavior: smooth; } * { box-sizing: border-box; margin: 0; padding: 0; } body, input, select, textarea, button, .form-control { font-family: var(--font-ui) !important; } body { background: var(--grad-bg); background-size: 600% 600%; animation: gradientBG 20s ease infinite; color: var(--text); overflow-x: hidden; position: relative; } /* Fondo animado */ @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Partículas (capa inferior) */ #particles-js { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } /* ================== 3) TIPOGRAFÍA ================== */ .welcome-text { font-size: 2rem; color: var(--gold); text-shadow: 2px 2px 8px #000, 0 2px 4px #000; } .welcome-text-home { color: var(--gold); } body[data-theme="light"] .welcome-text { color: var(--gold-2) !important; text-shadow: 1px 1px 0 #fff, 0 2px 4px var(--gold-2); } body[data-theme="light"] .welcome-text-home { color: #000 !important; } .sub-welcome { color: var(--gold); text-shadow: 1px 1px 3px #000; font-size: 1.1rem; font-weight: normal; } body[data-theme="light"] .sub-welcome { color: var(--gold-2) !important; text-shadow: 1px 1px 0 #fff, 0 2px 3px var(--gold-2); } /* ================= 4) COMPONENTES ================= */ /* Tarjetas */ .hp-card { background-color: #2e2e2e; border: 2px solid var(--gold-2); border-radius: 15px; color: #fff; position: relative; overflow: hidden; transition: transform .4s, box-shadow .4s, background .4s, color .4s; } .hp-card:hover { transform: translateY(-10px) scale(1.05); box-shadow: var(--shadow-2); } body[data-theme="light"] .hp-card { background-color: var(--bg-2) !important; color: #2e2e2e !important; border: 2px solid var(--gold-2); } /* Tabla Hogwarts */ .table-hogwarts { width: 100%; border-collapse: separate; border-spacing: 0 10px; background-color: rgba(255, 255, 224, 0.05); border: 2px solid var(--gold-2); border-radius: 10px; box-shadow: 0 0 15px var(--gold-soft-30); overflow: hidden; } .table-hogwarts th { background: var(--grad-th); color: #1e1e1e; text-align: center; text-shadow: 1px 1px 2px #fff; } .table-hogwarts th a { color: var(--brown) !important; font-weight: bold; text-decoration: none !important; transition: color .2s, text-shadow .2s; } .table-hogwarts th a:hover, .table-hogwarts th a:focus { color: var(--gold) !important; text-shadow: 0 0 6px #ffd70090; } .table-hogwarts td { vertical-align: middle; text-align: center; background-color: rgba(255, 255, 224, 0.08); color: var(--brown); } .table-hogwarts tbody tr:hover { background-color: var(--gold-soft-10); transform: scale(1.01); transition: background-color .3s, transform .3s; } /* Modo claro para tabla */ body[data-theme="light"] .table-hogwarts th, body[data-theme="light"] .table-hogwarts td { background-color: var(--bg-2) !important; color: var(--text) !important; } /* Botones */ .btn-gold, .btn-hp, .btn-hp-create { font-weight: bold; border-radius: 8px; border: 1px solid var(--gold-2); transition: background .3s, transform .3s, box-shadow .3s, color .3s; box-shadow: var(--shadow-1); display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; } .btn-gold { background: var(--grad-btn-gold); color: #000; } .btn-gold:hover { background: var(--grad-btn-gold-hover); transform: translateY(-2px); box-shadow: 0 6px 10px rgba(0,0,0,.4); color: #000; } .btn-hp { background: var(--navy); color: #fff; padding: 5px 10px; } .btn-hp:hover { transform: scale(1.05); } .btn-hp-create { background: var(--grad-btn-create); color: #fff; } .btn-hp-create:hover { background: var(--grad-btn-create-hover); transform: translateY(-2px); box-shadow: 0 6px 10px rgba(0,0,0,.4); color: var(--gold); } /* Variantes simples */ .btn-editar { background-color: #eee117; color: #000; } .btn-eliminar { background-color: var(--scarlet); color: #fff; } .btn-detalle { background-color: var(--navy); color: #fff; } /* Filtro */ .filtro-hp { background-color: #f5f5dc; border: 2px solid var(--gold-2); border-radius: 8px; padding: 8px 12px; font-family: 'Garamond', serif; box-shadow: 0 2px 6px rgba(0,0,0,.2); color: #000; } .filtro-hp::placeholder { color: var(--brown); font-style: italic; } .filtro-hp:focus { border-color: var(--gold); box-shadow: var(--ring-gold); outline: none; } body[data-theme="light"] .filtro-hp { background-color: #fff !important; color: var(--text) !important; } /* Íconos de acción */ .action-icon { color: var(--brown) !important; font-size: 1.3rem; transition: transform .3s, color .3s, text-shadow .3s; margin: 0 7px; cursor: pointer; text-decoration: none; } .action-icon:hover { transform: scale(1.4); color: var(--gold) !important; text-shadow: 0 0 8px var(--gold); } .action-icon.delete { color: var(--scarlet) !important; } .action-icon.delete:hover { color: #ff4d4d !important; text-shadow: 0 0 8px #ff4d4d; } .action-icon:visited { color: var(--brown) !important; } /* Card de Dracoin en navbar */ .dracoins-badge { color: #ffc107; background: #312b15; border-radius: 1rem; padding: 4px 14px; margin-right: 12px; font-size: 1.1rem; letter-spacing: 1px; box-shadow: 0 1px 2px #0002; display: flex; align-items: center; font-weight: bold; text-decoration: none; } .dracoins-icon { font-family: 'Georgia', serif; font-size: 1.5rem; margin-right: 8px; color: #d4af37; filter: drop-shadow(0 0 2px #0008); line-height: 1; text-decoration: none; } .dracoins-badge-link { text-decoration: none; transition: filter .2s; } .dracoins-badge-link:hover .dracoins-badge { filter: brightness(1.25); box-shadow: 0 2px 8px #0005; cursor: pointer; } /* Botón/ícono de modo */ #modoIcon, #modoIcon:focus, #modoIcon:active, #modoIcon:hover { text-decoration: none !important; outline: none !important; box-shadow: none !important; } #modoIcon { font-size: 2.2rem !important; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: filter .15s, background .15s; background: none !important; border: none !important; padding: 0 7px; border-radius: 8px; color: var(--gold); cursor: pointer; vertical-align: middle; } /* ================= 5) FORMULARIOS ================= */ /* Etiquetas y controles en modo oscuro por defecto */ .form-check-label, .form-label, .form-check-input { color: #ffe37b !important; } .form-check-input { border: 2px solid #ffe37b; background-color: #2e2e2e; } .form-check-input:checked { background-color: var(--gold); border-color: var(--gold); box-shadow: 0 0 5px 2px #ffd70055; } .form-check-input:focus { box-shadow: 0 0 5px 2px #ffd70055; } /* Modo claro: inputs y labels */ body[data-theme="light"] .form-check-label, body[data-theme="light"] .form-label { color: var(--gold-2) !important; } body[data-theme="light"] .form-control, body[data-theme="light"] input, body[data-theme="light"] select { background-color: #fff !important; color: var(--text) !important; border-color: var(--gold-2) !important; } /* Radio dorado con punto dorado (modo claro) */ body[data-theme="light"] .form-check-input[type="radio"]:checked { border-color: var(--gold-2) !important; box-shadow: 0 0 4px 2px #ffd70070; background-color: var(--bg-2) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23bfa046' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='4'/%3e%3c/svg%3e") !important; background-size: 60% 60%; background-position: center; background-repeat: no-repeat; } /* Checkbox dorado (modo claro) */ body[data-theme="light"] .form-check-input[type="checkbox"] { border: 2px solid var(--gold-2); background-color: var(--bg-2); border-radius: 6px; width: 22px; height: 22px; margin-top: .2em; box-shadow: 0 1px 4px #bfa04633; } body[data-theme="light"] .form-check-input[type="checkbox"]:checked { background-color: var(--gold) !important; border-color: var(--gold-2) !important; background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' stroke='%234b3621' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4 8.5l3 3 5-6'/%3e%3c/svg%3e") !important; background-size: 70% 70%; background-position: center; background-repeat: no-repeat; } /* Foto de perfil como radio */ .foto-perfil-radio input[type="radio"] { display: none; } .foto-perfil-radio img { width: 40px !important; height: 40px !important; object-fit: cover; cursor: pointer; background: #222; border: 2px solid #e5c07b !important; box-shadow: 0 1px 6px #0002 !important; } .foto-perfil-radio input[type="radio"]:checked + img { border: 3px solid var(--gold); box-shadow: 0 0 0 2px #fff8, 0 2px 10px #0003; } .foto-perfil-radio { position: relative; display: inline-block; } .foto-perfil-radio .foto-check { display: none; position: absolute; top: -5px; right: -5px; z-index: 2; pointer-events: none; background: var(--gold); color: #222; font-size: 1rem; border-radius: 50%; padding: 0 4px; box-shadow: 0 1px 4px #0003; } .foto-perfil-radio input[type="radio"]:checked ~ .foto-check { display: block; animation: pop .25s; } @keyframes pop { 0% { transform: scale(.5); } 80% { transform: scale(1.15); } 100% { transform: scale(1); } } /* Dropdown de perfil */ #perfilDropdown > span { display: flex !important; align-items: center !important; gap: 8px !important; min-height: 40px !important; } #perfilDropdown img.rounded-circle { border: 2px solid var(--gold-2) !important; object-fit: cover !important; background: #222 !important; margin-right: 2px !important; } #perfilDropdown span span { vertical-align: middle !important; line-height: 1.2 !important; font-size: 1rem !important; color: var(--gold) !important; font-weight: 600 !important; } /* ================= 6) UTILIDADES ================= */ .text-gold { color: var(--gold) !important; } .text-brown { color: var(--brown) !important; } .border-gold { border-color: var(--gold-2) !important; } .bg-gold { background-color: var(--gold-2); color: #000; } /* ================= 7) RESPONSIVO ================= */ /* Botón flotante del modo en móvil */ @media (max-width: 600px) { .btn-toggle-modo { width: 44px; height: 44px; padding: 4px 0; font-size: 1.25rem; border-radius: 50%; position: fixed !important; right: 16px !important; bottom: 16px !important; top: 76px !important; left: auto !important; z-index: 1001; box-shadow: 0 2px 6px #bfa04680; display: flex; align-items: center; justify-content: center; } } /* ===== COMPAT: soportar .light-mode y [data-theme="light"] ===== */ /* Variables en claro si hay clase o atributo */ body.light-mode, body[data-theme="light"] { --bg-1: #fff; --bg-2: #fffbe6; --text: #222; --muted: #4b4b4b; --grad-bg: linear-gradient(270deg, #fffbe6, #fff, #fffbe6); --ring-gold: 0 0 10px var(--gold-2); } /* Reglas específicas que antes iban con body[data-theme="light"] */ body.light-mode .welcome-text, body[data-theme="light"] .welcome-text { color: var(--gold-2) !important; text-shadow: 1px 1px 0 #fff, 0 2px 4px var(--gold-2); } body.light-mode .welcome-text-home, body[data-theme="light"] .welcome-text-home { color: #000 !important; } body.light-mode .hp-card, body[data-theme="light"] .hp-card { background-color: var(--bg-2) !important; color: #2e2e2e !important; border: 2px solid var(--gold-2); } body.light-mode .table-hogwarts th, body[data-theme="light"] .table-hogwarts th, body.light-mode .table-hogwarts td, body[data-theme="light"] .table-hogwarts td { background-color: var(--bg-2) !important; color: var(--text) !important; } body.light-mode .filtro-hp, body[data-theme="light"] .filtro-hp { background-color: #fff !important; color: var(--text) !important; } body.light-mode .text-gold, body[data-theme="light"] .text-gold { color: var(--gold-2) !important; } body.light-mode .action-icon, body[data-theme="light"] .action-icon { color: var(--gold-2) !important; } body.light-mode .form-control, body[data-theme="light"] .form-control, body.light-mode input, body[data-theme="light"] input, body.light-mode select, body[data-theme="light"] select { background-color: #fff !important; color: var(--text) !important; border-color: var(--gold-2) !important; } /* Radios/checkboxes en claro */ body.light-mode .form-check-label, body[data-theme="light"] .form-check-label, body.light-mode .form-label, body[data-theme="light"] .form-label { color: var(--gold-2) !important; } body.light-mode .form-check-input[type="radio"]:checked, body[data-theme="light"] .form-check-input[type="radio"]:checked { border-color: var(--gold-2) !important; box-shadow: 0 0 4px 2px #ffd70070; background-color: var(--bg-2) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23bfa046' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='4'/%3e%3c/svg%3e") !important; background-size: 60% 60%; background-position: center; background-repeat: no-repeat; } body.light-mode .form-check-input[type="checkbox"], body[data-theme="light"] .form-check-input[type="checkbox"] { border: 2px solid var(--gold-2); background-color: var(--bg-2); border-radius: 6px; width: 22px; height: 22px; margin-top: .2em; box-shadow: 0 1px 4px #bfa04633; } body.light-mode .form-check-input[type="checkbox"]:checked, body[data-theme="light"] .form-check-input[type="checkbox"]:checked { background-color: var(--gold) !important; border-color: var(--gold-2) !important; background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' stroke='%234b3621' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4 8.5l3 3 5-6'/%3e%3c/svg%3e") !important; background-size: 70% 70%; background-position: center; background-repeat: no-repeat; } /* Asegura que el modo oscuro NO pise cuando estés en claro */ body:not(.light-mode):not([data-theme="light"]) .form-check-label, body:not(.light-mode):not([data-theme="light"]) .form-label, body:not(.light-mode):not([data-theme="light"]) .form-check-input { color: #ffe37b !important; } /* Agenda */ .agenda-item { line-height: 1.4; } .agenda-item:last-child { border-bottom: none; } /* Modo responsive para la tabla de crear agenda */ @media (max-width: 768px) { #agendaTable thead { display: none; /* Oculta encabezados */ } #agendaTable, #agendaTable tbody, #agendaTable tr, #agendaTable td { display: block; width: 100%; } #agendaTable tr { margin-bottom: 1rem; border: 1px solid #ddd; border-radius: 8px; background: #fff8e7; /* estilo pergamino */ padding: 0.75rem; } #agendaTable td { border: none; padding: 0.4rem 0; } #agendaTable td::before { content: attr(data-label); font-weight: bold; display: block; margin-bottom: 0.2rem; color: #6c3; /* color hogwarts opcional */ } #agendaTable .remove-row { display: block; width: 100%; margin-top: 0.5rem; } }