/** * darkmode.css — Variables de modo oscuro para Ludoteca * Se activa añadiendo la clase .dark al */ /* ── Modo oscuro ── */ html.dark { --ink: #f0e8d8; --paper: #1e1710; --cream: #2a2118; --gold: #d4a84b; --rust: #c4523f; --moss: #5d8054; --shadow: rgba(0,0,0,.45); } html.dark body { background: var(--paper); color: var(--ink); } /* Header */ html.dark header { background: #120e08; border-bottom: 1px solid #2e2418; } /* Cards y formularios */ html.dark .game-card, html.dark .form-card, html.dark .match-card, html.dark .top-game-card, html.dark .podium-slot, html.dark table, html.dark .game-admin-row, html.dark .modal { background: #261e14; border-color: #3a2e20; } html.dark th { background: #120e08; } html.dark td { border-bottom-color: #2e2418; } html.dark tr:hover td { background: #2e2418; } html.dark input, html.dark select, html.dark textarea { background: #1e1710; color: var(--ink); border-color: #3a2e20; } html.dark input:focus, html.dark select:focus, html.dark textarea:focus { border-color: var(--gold); } html.dark .toolbar, html.dark .tabs, html.dark .tab-btn { background: #1a1410; border-color: #2e2418; } html.dark .tab-btn { color: #8a7b6a; } html.dark .tab-btn.active { color: var(--ink); } html.dark .chip { border-color: #3a2e20; color: #9c8e7a; } html.dark .chip.active, html.dark .chip:hover { background: var(--gold); border-color: var(--gold); color: #1a1209; } html.dark .player-chip, html.dark .cat-tag { background: #2a2118; } html.dark .card-img-placeholder, html.dark .modal-img-placeholder, html.dark .game-admin-placeholder, html.dark .match-game-placeholder, html.dark .top-game-placeholder { background: #2a2118; } html.dark .scores-builder { border-color: #3a2e20; } html.dark .modal-overlay { background: rgba(0,0,0,.8); } html.dark .btn-ghost { border-color: #3a2e20; color: var(--ink); } html.dark footer { border-top-color: #2e2418; color: #6b5e4e; } html.dark .hero, html.dark .page-hero { background: #120e08; } html.dark .search-bar input, html.dark .toolbar input { background: #1e1710; } /* Modal text legibility */ html.dark .modal-desc { color: #d4c8b4 !important; } html.dark .modal-title { color: #f0e8d8 !important; } html.dark .modal-section-title { color: #a09080 !important; } html.dark .modal-specs { color: #b0a090 !important; } html.dark .modal-body p { color: #c8bfaf; } html.dark .modal-header { border-bottom-color: #3a2e20; } html.dark .modal-footer { border-top-color: #3a2e20; } html.dark .card-title { color: #f0e8d8; } html.dark .card-meta { color: #9c8e7a; } html.dark .cat-tag { background: #2a2118; color: #d4a84b; } html.dark .count-bar { color: #7a6d5e; } /* Toggle button */ .dark-toggle { background: none; border: 1.5px solid #3a3020; border-radius: 999px; color: #9c8e7a; cursor: pointer; font-size: .9rem; padding: .3rem .6rem; transition: all .2s; line-height: 1; display: flex; align-items: center; gap: .3rem; } .dark-toggle:hover { border-color: var(--gold); color: var(--gold); } html.dark .dark-toggle { border-color: #4a3a28; color: #c8bfaf; } html.dark .dark-toggle:hover { border-color: var(--gold); color: var(--gold); } /* ── Score pills (fichas de jugadores en partidas) ── */ html.dark .score-pill { background: #2a2118; color: #f0e8d8; border-color: #3a2e20; } html.dark .score-pill.winner { background: #2a2118; color: var(--gold); border-color: var(--gold); }