:root{--naranja: #ff9800;--naranja-oscuro: #e65100;--amarillo: #ffeb3b;--fondo: #fcfcfc;--texto: #1a1a1a;--borde: 4px solid #000}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:var(--fondo);color:var(--texto);margin:0;line-height:1.6}nav{background:var(--naranja);display:flex;justify-content:space-between;align-items:center;padding:1rem 5%;border-bottom:var(--borde);position:sticky;top:0;z-index:100}.logo{font-weight:900;font-size:1.5rem;letter-spacing:-1px;margin:0}.menu{display:flex;gap:15px;align-items:center}button,.btn{display:inline-block;text-decoration:none;text-align:center;color:var(--texto);background:var(--amarillo);border:var(--borde);padding:10px 20px;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;box-shadow:4px 4px #000;transition:all .1s;box-sizing:border-box}button:active,.btn:active{box-shadow:0 0 #000;transform:translate(4px,4px)}.btn-main{background:#fff}.intro-container{display:flex;flex-wrap:wrap;align-items:center;gap:30px;background:#fff;border:var(--borde);box-shadow:8px 8px #000;margin:40px 5% 20px;padding:30px}.meme-intro{max-width:250px;border:var(--borde)}.intro-text{flex:1;min-width:300px}.intro-text h2{margin-top:0;color:var(--naranja-oscuro);line-height:1.2;font-size:2rem}.header-container{text-align:center;padding:40px 20px}.grid-historias{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:30px;padding:20px 5% 50px}.card{background:#fff;border:var(--borde);padding:20px;box-shadow:8px 8px #000;transition:transform .2s ease;cursor:pointer;display:flex;flex-direction:column}.card:hover{transform:scale(1.02) translateY(-5px);animation:brilloFuego 1.5s infinite;border-color:var(--naranja-oscuro)}@keyframes brilloFuego{0%,to{box-shadow:8px 8px #000,0 0 10px #ff980066}50%{box-shadow:8px 8px #000,0 0 25px #ff5722b3}}.card h3{margin-top:0;border-bottom:2px solid #eee;padding-bottom:10px}.historia-corta{flex-grow:1;display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;color:#444}.votos-bar{margin-top:20px;display:flex;align-items:center;gap:10px;font-weight:700}.btn-fuego{background:none;border:none;box-shadow:none;font-size:1.6rem;padding:0}.btn-fuego:active{transform:scale(1.3)}.form-container{max-width:600px;margin:50px auto;padding:0 20px}form{display:flex;flex-direction:column;gap:20px}input,textarea{border:var(--borde);padding:15px;font-size:1rem;background:#fff}textarea{height:200px;resize:vertical}#btn-enviar{background:var(--naranja);font-size:1.2rem;padding:15px;margin-top:10px}.hidden{display:none!important}.tags-filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:15px}.btn-filtro{background:#fff;border:2px solid #000;box-shadow:2px 2px #000;padding:6px 14px;font-size:.9rem;border-radius:20px;cursor:pointer;transition:all .1s;font-family:inherit;font-weight:700}.btn-filtro.active{background:var(--amarillo);box-shadow:0 0 #000;transform:translate(2px,2px)}.btn-filtro:active{box-shadow:0 0 #000;transform:translate(2px,2px)}.tag-pill{display:inline-block;background:#f0f0f0;border:1px solid #000;padding:4px 10px;font-size:.75rem;font-weight:700;border-radius:12px;margin-bottom:10px;align-self:flex-start;cursor:help}select#categoria{border:var(--borde);padding:15px;font-size:1rem;background:#fff;cursor:pointer;font-family:inherit;color:var(--texto)}body.dark-mode{--fondo: #1c1c1c;--texto: #f0f0f0;--borde: 4px solid #fff;--amarillo: #4d4508}body.dark-mode .intro-container,body.dark-mode .card,body.dark-mode input,body.dark-mode textarea,body.dark-mode select{background:#2b2b2b;color:#f0f0f0}body.dark-mode .btn-filtro{background:#2b2b2b;color:#f0f0f0;border-color:#fff}body.dark-mode .tag-pill{background:#444;border-color:#f0f0f0;color:#fff}body.dark-mode .card h3{border-color:#444}.fecha-relativa{font-size:.8rem;color:gray;margin-left:auto}.btn-theme{background:transparent;border:none;box-shadow:none;font-size:1.5rem;padding:0 10px;vertical-align:middle}.btn-theme:active{transform:scale(1.1);box-shadow:none}.btn-compartir{background:var(--fondo);border:2px solid var(--texto);padding:8px 15px;font-weight:700;cursor:pointer;box-shadow:2px 2px 0 var(--texto);margin-top:20px;color:var(--texto)}.btn-compartir:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--texto)}@media (max-width: 600px){nav{flex-direction:column;gap:15px}.menu{flex-wrap:wrap;justify-content:center}.intro-container{flex-direction:column;text-align:center;padding:20px}.meme-intro{max-width:100%;margin-bottom:15px}}.footer-legal{text-align:center;padding:30px 20px;margin-top:50px;font-size:.85rem;color:#666;border-top:2px dashed #ccc;background:transparent;max-width:800px;margin-left:auto;margin-right:auto}body.dark-mode .footer-legal{color:#888;border-top-color:#444}.comentarios-section h3{margin-top:0;font-size:1.2rem;color:var(--naranja-oscuro)}.comentario{background:#fdfdfd;padding:12px 15px;border:2px solid #ccc;border-left:5px solid var(--naranja);border-radius:8px;margin-bottom:15px;box-shadow:2px 2px #ccc}body.dark-mode .comentario{background:#333;border-color:#555;box-shadow:2px 2px #222}.comentario-autor{font-weight:700;font-size:.85rem;margin-bottom:5px}.comentario-texto{font-size:.95rem!important;margin:0!important}.comentario-fecha{font-size:.75rem;color:gray;display:block;margin-top:8px}#vista-historia{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.spa-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:1.8rem;padding:0 20px;height:55px;box-sizing:border-box;border:var(--borde);box-shadow:4px 4px #000;margin:0;line-height:1;background:#fff;color:var(--texto);cursor:pointer;transition:all .1s}.spa-btn.disabled{cursor:default;background:#f0f0f0}.spa-btn span{font-size:1.4rem;font-family:monospace;font-weight:700}body.dark-mode .spa-btn{background:#2b2b2b}body.dark-mode .spa-btn.disabled{background:#333}body.dark-mode .botones-spa-container{border-top-color:#444}body.dark-mode .btn-main{background:#444;color:#fff;border-color:#fff}body.dark-mode .respuesta-box{background:#2b2b2b!important;border-color:#555!important;color:#fff!important}body.dark-mode .respuesta-box h4{color:#ff9800!important}.form-card{background:#fff;transition:background .3s ease}body.dark-mode .form-card{background:#2b2b2b;border-color:#555!important}body.dark-mode .form-card label,body.dark-mode .form-card p{color:#f0f0f0!important}body.dark-mode select,body.dark-mode select option{background-color:#2b2b2b!important;color:#f0f0f0!important;border-color:#555!important}
