:root{--primary:#00b5cc;--primary-dark:#0097a8;--secondary:#97ce4c;--danger:#e74c3c;--warning:#f39c12;--success:#2ecc71;--favorite:#ff6b6b;--bg-dark:#1e1e2f;--bg-card:#2d2d44;--bg-overlay:#000000d9;--text-light:#f0f0f0;--text-gray:#b8b8d0;--text-muted:#aaa;--border-radius-sm:.5rem;--border-radius-md:.75rem;--border-radius-lg:1rem;--border-radius-xl:1.5rem;--shadow:0 4px 6px #0000001a;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:.75rem;--spacing-lg:1rem;--spacing-xl:1.5rem;--spacing-2xl:2rem;--transition-fast:.2s ease;--transition-normal:.3s ease}*{box-sizing:border-box;margin:0;padding:0}html{font-size:100%}body{color:var(--text-light);background:linear-gradient(135deg,#0a0e1a 0%,#1a1f2e 100%);min-height:100vh;font-family:Inter,sans-serif}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--primary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--primary-dark)}.app-container{max-width:87.5rem;padding:var(--spacing-lg);margin:0 auto}.hidden{display:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(.625rem)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@media (width>=768px){.app-container{padding:var(--spacing-xl)}}.header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--border-radius-md);padding:var(--spacing-lg);margin-bottom:var(--spacing-xl);box-shadow:var(--shadow);background:#1e1e2ff2;border:1px solid #00b5cc33}.header-content{align-items:center;gap:var(--spacing-md);flex-direction:column;width:100%;display:flex}.header h1{text-align:center;font-size:1.8rem;font-weight:700}.header h1 span,.header h1 i{color:var(--primary)}.main-nav{align-items:center;gap:var(--spacing-md);flex-direction:column;display:flex}.view-buttons{gap:var(--spacing-md);flex-wrap:wrap;justify-content:center;display:flex}.nav-btn{border:2px solid var(--bg-card);color:var(--text-gray);padding:var(--spacing-sm) var(--spacing-lg);cursor:pointer;transition:var(--transition-normal);align-items:center;gap:var(--spacing-sm);background:0 0;border-radius:2.5rem;font-size:.875rem;font-weight:600;display:flex}.nav-btn.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 .25rem .75rem #4caf504d}.favorites-count{background:var(--favorite);color:#fff;padding:.125rem var(--spacing-sm);border-radius:1.25rem;font-size:.75rem}@media (width>=768px){.header-content{flex-flow:wrap;justify-content:space-between}.header h1{text-align:left;text-wrap:nowrap;font-size:1.8rem}.main-nav{flex-direction:row}}.character-card{border-radius:var(--border-radius-lg);cursor:pointer;transition:transform var(--transition-fast), box-shadow var(--transition-fast);background:#ffffff0d;border:1px solid #ffffff0d;position:relative;overflow:hidden}.character-card:hover{border-color:#4caf504d;transform:translateY(-.25rem);box-shadow:0 .5rem 1.5rem #0000004d}.character-img{aspect-ratio:1;object-fit:cover;width:100%}.character-info{padding:var(--spacing-md)}.character-name{justify-content:space-between;align-items:center;margin-bottom:.375rem;font-size:.95rem;font-weight:700;display:flex}.character-card .fav-btn{cursor:pointer;width:36px;height:36px;transition:var(--transition-fast);z-index:10;background:#0009;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:12px;right:12px}.character-card .fav-btn i{color:#fff;font-size:1.2rem}.character-status{align-items:center;gap:.375rem;font-size:.75rem;display:flex}.status-badge{width:var(--spacing-sm);height:var(--spacing-sm);border-radius:50%;display:inline-block}.status-alive{background:var(--primary)}.status-dead{background:var(--danger)}.status-unknown{background:var(--warning)}.filters-section{margin-bottom:var(--spacing-xl)}.search-box{position:relative}.search-box i{left:var(--spacing-lg);color:#888;position:absolute;top:50%;transform:translateY(-50%)}.search-box input{width:100%;padding:.875rem var(--spacing-lg) .875rem 3rem;color:#fff;background:#0006;border:1px solid #ffffff1a;border-radius:.3125rem;font-size:.85rem}.search-box input:focus{border-color:var(--primary);outline:none}.filter-group{margin-top:var(--spacing-lg);grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:.375rem;display:grid}.filter-group select{background:var(--bg-card);min-width:7.5rem;color:var(--text-light);cursor:pointer;border:1px solid #ffffff1a;border-radius:.3125rem;max-height:3.0625rem;padding:.625rem .875rem}@media (width>=1024px){.filters-section{gap:var(--spacing-xl);grid-template-columns:1fr 1fr;margin-bottom:0;display:grid}.filter-group{grid-template-columns:1fr 1fr;gap:.625rem;margin-top:0}}.pagination{justify-content:center;align-items:center;gap:var(--spacing-lg);margin:var(--spacing-xl) 0;flex-wrap:wrap;display:flex}.page-btn{background:var(--bg-card);color:var(--text-light);cursor:pointer;transition:var(--transition-fast);border:none;border-radius:30px;align-items:center;gap:8px;padding:10px 20px;display:flex}.page-btn:hover:not(:disabled){background:var(--primary);color:#fff}.page-btn:disabled{opacity:.4;cursor:not-allowed}.page-info{color:var(--text-muted);font-size:.85rem}@media (width>=768px){.page-btn{padding:var(--spacing-md) 1.25rem;font-size:1rem}.page-info{font-size:1rem}}.loading-indicator{text-align:center;padding:var(--spacing-2xl)}.spinner{border:.25rem solid #4caf5033;border-top-color:var(--primary);width:3.125rem;height:3.125rem;margin:0 auto var(--spacing-lg);border-radius:50%;animation:.8s linear infinite spin}.error-message{color:#ff8a80;padding:var(--spacing-lg);border-radius:var(--border-radius-md);text-align:center;margin:var(--spacing-lg) 0;background:#f4433633;border:1px solid #f44336}.fa-exclamation-triangle{margin-bottom:var(--spacing-md);font-size:2rem}.retry-btn{margin-top:var(--spacing-md);background:var(--primary);color:#fff;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--border-radius-sm);cursor:pointer;border:none}.retry-btn:hover{background:var(--primary-dark)}.episode-card{border-radius:var(--border-radius-lg);padding:var(--spacing-lg);cursor:pointer;transition:var(--transition-fast);background:#ffffff0d;border:1px solid #ffffff0d}.episode-card:hover{border-color:var(--primary);background:#4caf501a}.episode-name{margin-bottom:var(--spacing-sm);font-size:1rem;font-weight:700}.episode-info{color:var(--text-muted);gap:var(--spacing-md);flex-wrap:wrap;font-size:.8rem;display:flex}.modal{background:var(--bg-overlay);z-index:1000;justify-content:center;align-items:center;width:100%;height:100%;padding:1.25rem;display:none;position:fixed;top:0;left:0}.modal.active{display:flex}.modal-content{border-radius:var(--border-radius-xl);background:linear-gradient(135deg,#1a1f2e 0%,#0f1420 100%);border:1px solid #4caf504d;width:100%;max-width:37.5rem;max-height:90vh;position:relative;overflow-y:auto}.modal-close{top:var(--spacing-md);cursor:pointer;color:var(--text-muted);width:2rem;height:2rem;transition:var(--transition-fast);background:#00000080;border-radius:50%;justify-content:center;align-items:center;font-size:1.5rem;display:flex;position:absolute;right:1.25rem}.modal-close:hover{color:var(--text-light);background:#000000b3}.modal-body{padding:var(--spacing-xl)}.character-detail{text-align:center}.character-detail-img{object-fit:cover;border:.1875rem solid var(--primary);width:11.25rem;height:11.25rem;margin:var(--spacing-lg);border-radius:50%}.character-detail h2{margin:var(--spacing-lg)}.detail-info{text-align:left;padding:var(--spacing-lg);border-radius:var(--border-radius-lg);background:#0000004d}.detail-info p{margin:var(--spacing-sm) 0}.character-detail .fav-btn{cursor:pointer;width:36px;height:36px;transition:var(--transition-fast);z-index:10;background:#0009;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.character-detail .detail-header{align-items:center;width:fit-content;margin:0 auto;display:flex}.character-detail .fav-btn i{color:#fff;font-size:1.2rem}.fav-btn.active i{color:var(--favorite)}.episodes-list{gap:var(--spacing-sm);margin-top:var(--spacing-md);flex-wrap:wrap;display:flex}.episode-tag{padding:var(--spacing-xs) var(--spacing-md);background:#4caf5033;border-radius:1.25rem;font-size:.75rem}@media (width>=768px){.episode-tag{font-size:.85rem}}.loading-detail,.error-detail{text-align:center;padding:var(--spacing-2xl)}.episode-detail h2{text-align:center;margin-bottom:var(--spacing-xl)}.characters-list{gap:var(--spacing-md);margin-top:var(--spacing-lg);grid-template-columns:repeat(auto-fill,minmax(150px,1fr));display:grid}.character-link{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);border-radius:var(--border-radius-sm);cursor:pointer;transition:var(--transition-fast);background:#0000004d;display:flex}.character-link:hover{background:#00b5cc33;transform:translate(4px)}.character-link img{object-fit:cover;border-radius:50%;width:40px;height:40px}.character-link span{font-size:.875rem}footer{margin-top:var(--spacing-2xl);padding:var(--spacing-xl) var(--spacing-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--border-radius-md);text-align:center;background:#1e1e2ff2;border-top:1px solid #00b5cc33}.footer-credit{color:var(--text-muted);margin-bottom:var(--spacing-sm);font-size:.875rem}.creator-link{color:var(--primary);transition:var(--transition-fast);font-weight:600;text-decoration:none}.creator-link:hover{color:var(--primary-dark);text-decoration:underline}.footer-copyright{color:var(--text-muted);font-size:.75rem}.view{animation:fadeIn var(--transition-normal);display:none}.view.active{display:block}.seccion-header{margin-bottom:var(--spacing-xl)}.seccion-header h2{text-align:center;margin-bottom:1.25rem;font-size:1.5rem;font-weight:700}.characters-grid{gap:var(--spacing-lg);margin-bottom:var(--spacing-2xl);grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));display:grid}.episodes-grid{gap:var(--spacing-lg);margin-bottom:var(--spacing-2xl);grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));display:grid}.episodes-search{margin-bottom:var(--spacing-lg)}@media (width>=768px){.characters-grid{gap:var(--spacing-xl);grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr))}}@media (width>=1024px){.characters-grid{grid-template-columns:repeat(auto-fill,minmax(13.75rem,1fr))}}