:root{--bg-primary: linear-gradient(to top, rgb(8, 18, 8), rgb(6, 27, 14));--bg-secondary: #1a1a1a;--bg-card: transparent;--text-primary: rgba(255, 255, 255, .87);--text-secondary: aliceblue;--accent: #97ce4c;--accent-hover: #b8d44e;--border-color: gray;--shadow-color: gray;--search-shadow: white;--input-bg: white;--input-text: black}[data-theme=light]{--bg-primary: linear-gradient(to top, #e8f5e9, #f1f8e9);--bg-secondary: #f5f5f5;--bg-card: #ffffff;--text-primary: #1a3a1a;--text-secondary: #2d5a2d;--accent: #2e7d32;--accent-hover: #1b5e20;--border-color: #c8e6c9;--shadow-color: rgba(46, 125, 50, .3);--search-shadow: rgba(46, 125, 50, .2);--input-bg: #ffffff;--input-text: #1a3a1a}*{margin:0;padding:0;box-sizing:border-box;color:var(--text-secondary)}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background:var(--bg-primary)}a{font-weight:500;color:var(--accent);text-decoration:inherit}a:hover{color:var(--accent-hover)}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--bg-secondary);color:var(--text-secondary);cursor:pointer;transition:border-color .25s}button:hover{border-color:var(--accent)}.Header-logo{font-family:monospace;font-size:1.5rem;font-weight:700;color:var(--accent)!important;text-decoration:none!important;letter-spacing:1px;transition:text-shadow .2s}.Header-logo:hover{text-shadow:0 0 15px color-mix(in srgb,var(--accent) 50%,transparent);border-color:transparent!important}#root{width:100%;min-height:100vh;margin:0 auto;padding:2rem;text-align:center;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:30px}.Header{width:100%;display:flex;flex-direction:row;justify-content:space-around;align-items:center}.Nav{display:flex;flex-direction:row;justify-content:space-around;align-items:center;gap:1rem}.Nav a{padding:.6em 1.2em;border-radius:8px;border:1px solid transparent;background-color:var(--bg-secondary);font-weight:500;text-decoration:none;transition:border-color .25s,background-color .25s;color:var(--text-secondary)}.Nav a:hover{border-color:var(--accent)}.Nav a.active{border-color:var(--accent);background-color:color-mix(in srgb,var(--accent) 15%,var(--bg-secondary))}.ThemeToggle{font-size:1.4rem;background:transparent;border:1px solid var(--border-color);padding:.4em .6em}.ThemeToggle:hover{border-color:var(--accent)}.Personajes,.Location,.Episodios{max-width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;flex-wrap:wrap;gap:1rem}.Personaje-title,.Location-title{font-size:3rem;font-family:monospace;color:var(--text-primary)}.Card{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:3rem}.Card-location,.Card-episodes{padding:10px;display:flex;flex-direction:column;gap:1rem;border:solid 2px var(--border-color);border-radius:8px;box-shadow:0 0 15px var(--shadow-color);background:var(--bg-card)}.Card-personaje{border:solid 2px var(--border-color);border-radius:8px;box-shadow:0 0 15px var(--shadow-color);text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s;overflow:hidden;background:var(--bg-card)}.Card-personaje:hover{transform:translateY(-4px);box-shadow:0 0 25px var(--accent);border-color:var(--accent)}.Search{color:var(--input-text);box-shadow:0 0 15px var(--search-shadow);padding:18px;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:5px;border:solid 2px var(--border-color);border-radius:8px;background:var(--bg-card)}.Search-label{color:var(--text-secondary);height:auto;display:flex;justify-content:center;align-items:center;gap:10px;padding:5px;font-size:1.3rem}.Search-label select{color:var(--input-text);background:var(--input-bg);font-size:1.3rem;cursor:pointer}.Search-label input{background:var(--input-bg);color:var(--input-text);border:1px solid var(--border-color);padding:.3em .5em;border-radius:4px;font-size:1rem}.Pages{padding:10px;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px;font-size:1rem}.Detail{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem}.Detail-back{align-self:flex-start;font-size:1rem}.Detail-card{display:flex;flex-direction:row;gap:2rem;border:solid 2px var(--accent);border-radius:12px;padding:2rem;box-shadow:0 0 20px color-mix(in srgb,var(--accent) 30%,transparent);background:var(--bg-card)}.Detail-img{width:300px;height:300px;border-radius:12px;object-fit:cover}.Detail-info{display:flex;flex-direction:column;gap:1rem;text-align:left}.Detail-info h1{font-size:2rem;font-family:monospace;color:var(--text-primary)}.Detail-badges{display:flex;gap:.5rem;flex-wrap:wrap}.Detail-badge{padding:.3em .8em;border-radius:20px;font-size:.9rem;font-weight:700;background-color:var(--bg-secondary);color:var(--text-secondary)}.Detail-section{border-top:1px solid var(--border-color);padding-top:.5rem}.Detail-section h3{font-size:.9rem;opacity:.7;margin-bottom:.2rem}.Footer{width:100%;padding:2rem 1rem;display:flex;flex-direction:column;align-items:center;gap:1rem;border-top:1px solid var(--border-color);margin-top:auto}.Footer-text{font-size:.9rem;color:var(--text-secondary);opacity:.8}.Footer-links{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center}.Footer-link{display:flex;align-items:center;gap:.4rem;padding:.5em 1em;border-radius:8px;border:1px solid var(--border-color);background-color:var(--bg-secondary);font-size:.9rem;font-weight:500;text-decoration:none;color:var(--text-secondary);transition:border-color .25s,background-color .25s,color .25s}.Footer-link:hover{border-color:var(--accent);color:var(--accent)}.Footer-link svg{flex-shrink:0}.Home{width:100%;max-width:900px;display:flex;flex-direction:column;align-items:center;gap:3rem;padding:2rem 0}.Home-hero{text-align:center;padding:3rem 1rem}.Home-title{font-size:4rem;font-family:monospace;color:var(--accent);text-shadow:0 0 30px color-mix(in srgb,var(--accent) 40%,transparent);margin-bottom:.5rem}.Home-subtitle{font-size:1.4rem;color:var(--text-secondary);opacity:.8}.Home-cards{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center}.Home-card{display:flex;flex-direction:column;align-items:center;gap:.8rem;padding:2.5rem 2rem;min-width:220px;border:2px solid var(--border-color);border-radius:16px;background:var(--bg-secondary);text-decoration:none;color:var(--text-secondary);transition:transform .2s,border-color .2s,box-shadow .2s}.Home-card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 0 25px color-mix(in srgb,var(--accent) 30%,transparent)}.Home-card-icon{font-size:3rem}.Home-card h2{font-size:1.3rem;color:var(--accent)}.Home-card p{font-size:.95rem;opacity:.7;text-align:center}@media (max-width: 768px){.Home-title{font-size:2.5rem}.Home-cards{flex-direction:column;align-items:center}.Home-card{width:100%;max-width:300px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}main,section{animation:fadeIn .3s ease-out}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton{background:linear-gradient(90deg,var(--bg-secondary) 25%,color-mix(in srgb,var(--bg-secondary) 80%,var(--text-secondary)) 50%,var(--bg-secondary) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px}.skeleton-card{width:280px;padding:10px;display:flex;flex-direction:column;gap:.8rem;border:solid 2px var(--border-color);border-radius:8px;background:var(--bg-card)}.skeleton-img{width:100%;height:280px;border-radius:8px}.skeleton-text{height:1.2rem;width:80%}.skeleton-text-short{height:1rem;width:50%}.skeleton-detail{max-width:800px;margin:0 auto;display:flex;flex-direction:row;gap:2rem;border:solid 2px var(--accent);border-radius:12px;padding:2rem;background:var(--bg-card)}.skeleton-detail-img{width:300px;height:300px;border-radius:12px}.skeleton-detail-info{display:flex;flex-direction:column;gap:1rem;flex:1}@media (max-width: 768px){.Header,.Nav,.Card{flex-direction:column;gap:1rem}.Search{flex-direction:column;gap:1.5rem;padding:10px}.Card-personaje{width:100%;max-width:300px}.Detail-card{flex-direction:column;align-items:center}.Detail-img{width:100%;max-width:300px;height:auto}.Footer-links{flex-direction:column;align-items:center}}