:root {
      --bg: #181e27;
      --primary: #53e0bc;
      --secondary: #2c8df7;
      --danger: #de5376;
      --gray: #2c3140;
      --card-bg: #23293b;
      --accent: #ffd166;
      --shadow: 0 6px 24px 0 rgba(44,141,247,0.10);
      --text: #e0e4ef;
      --h1: 2rem;
      --h2: 1.5rem;
      --h3: 1.15rem;
      --border: 1px solid #23293b;
      --transition: 0.25s cubic-bezier(.34,.95,.51,.92);
      --radius: 18px;
    }
    * { box-sizing: border-box; }
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      background: linear-gradient(135deg, var(--bg) 40%, var(--card-bg) 100%);
      font-family: 'Montserrat', 'Arial', sans-serif;
      color: var(--text);
    }
    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
    header {
      border-bottom: var(--border);
      background: var(--gray);
      padding: 1rem 0;
      text-align: center;
      box-shadow: var(--shadow);
    }
    header h1 {
      font-size: var(--h1);
      font-weight: 700;
      margin: 0;
      color: var(--primary);
      letter-spacing: 2px;
      text-shadow: 0 2px 6px rgba(83,224,188,0.17);
      transition: color var(--transition);
    }
    .main-nav {
      display: flex;
      justify-content: center;
      gap: 1.5rem;
      margin-top: 0.8rem;
    }
    .main-nav button {
      border: none;
      background: var(--secondary);
      color: #fff;
      font-size: var(--h3);
      font-weight: 600;
      border-radius: var(--radius);
      padding: 0.6em 1.4em;
      margin: 0 0.1em;
      box-shadow: var(--shadow);
      cursor: pointer;
      transition: background var(--transition), transform var(--transition);
    }
    .main-nav button.active,
    .main-nav button:hover {
      background: var(--primary);
      color: var(--gray);
      transform: scale(1.07);
    }
    .container {
      flex: 1;
      max-width: 1000px;
      margin: 2rem auto;
      padding: 0 1rem;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }
    .filters {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem 2rem;
      align-items: center;
      margin-bottom: 1.2rem;
      background: var(--card-bg);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 1em;
    }
    .filters input[type="search"] {
      border: none;
      background: var(--gray);
      color: var(--text);
      font-size: var(--h3);
      border-radius: var(--radius);
      padding: 0.6em 1em;
      outline: none;
      width: 200px;
      transition: box-shadow var(--transition);
      box-shadow: 0 0 4px var(--primary);
    }
    .filters select {
      border: none;
      background: var(--gray);
      color: var(--accent);
      font-size: var(--h3);
      border-radius: var(--radius);
      padding: 0.6em 1em;
      outline: none;
      min-width: 150px;
      font-weight: 600;
      transition: box-shadow var(--transition);
      box-shadow: 0 0 4px var(--secondary);
    }
    .filters label {
      font-weight: 600;
      font-size: var(--h3);
      color: var(--primary);
      margin-right: 0.5em;
      white-space: nowrap;
    }
    .list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 2rem;
    }
    .card {
      background: var(--card-bg);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      padding: 1rem;
      position: relative;
      transition: transform var(--transition), box-shadow var(--transition);
      border: 2px solid transparent;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
    }
    .card:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 8px 32px rgba(44,141,247,0.18);
      border-color: var(--primary);
    }
    .card img {
      width: 100%;
      border-radius: var(--radius);
      box-shadow: 0 2px 14px #0007;
    }
    .card .name {
      font-size: var(--h2);
      font-weight: 700;
      margin-top: 0.5em;
      color: var(--accent);
    }
    .card .tag {
      display: inline-block;
      font-size: 0.95em;
      font-weight: 600;
      margin-right: 0.5em;
      padding: 0.2em 0.8em;
      border-radius: 8px;
      background: linear-gradient(90deg,var(--primary),#2c8df733 100%);
      color: var(--gray);
      letter-spacing: 1px;
    }
    .state-badge {
      font-size: 0.95em;
      font-weight: 700;
      padding: 0.25em 1em;
      border-radius: 8px;
      margin-right: 0.3em;
      background: var(--danger);
      color: #fff;
      letter-spacing: 1px;
      box-shadow: 0 0 16px var(--danger);
    }
    .state-badge.alive {
      background: var(--primary);
      color: var(--gray);
      box-shadow: 0 0 14px var(--primary);
    }
    .state-badge.unknown {
      background: var(--secondary);
      color: var(--gray);
    }
    .pagination {
      display: flex;
      gap: 0.4rem;
      justify-content: center;
      margin: 2rem 0 1rem 0;
      flex-wrap: wrap;
    }
    .pagination button {
      border: none;
      outline: none;
      background: var(--secondary);
      color: #fff;
      font-size: 1rem;
      font-weight: 600;
      border-radius: 6px;
      padding: 0.4em 0.9em;
      margin: 0 0.1em;
      box-shadow: var(--shadow);
      cursor: pointer;
      transition: background var(--transition), transform var(--transition);
    }
    .pagination button.active,
    .pagination button:hover {
      background: var(--primary);
      color: var(--gray);
      transform: scale(1.09);
    }
    /* ---- Detalle ---- */
    .details {
      background: var(--card-bg);
      border-radius: var(--radius);
      padding: 1.6rem 2rem;
      box-shadow: var(--shadow);
      display: flex;
      gap: 2rem;
      flex-wrap: wrap;
      align-items: flex-start;
    }
    .details img {
      border-radius: var(--radius);
      box-shadow: 0 6px 38px #0007;
      max-width: 260px;
      width: 100%;
      margin-bottom: 1.2rem;
    }
    .details-content {
      flex: 1;
      min-width: 260px;
      max-width: 540px;
    }
    .details-content h2 {
      font-size: var(--h2);
      font-weight: 700;
      margin: 0 0 0.6em 0;
      color: var(--accent);
    }
    .details-table {
      width: 100%;
      border-spacing: 0;
      margin-bottom: 1rem;
    }
    .details-table td {
      padding: 0.65em 0.7em;
      color: var(--primary);
      font-weight: 500;
      background: transparent;
      font-size: var(--h3);
      border-bottom: 1px solid #282e3d;
    }
    .details-table td.label {
      color: var(--text);
      font-weight: 700;
      min-width: 110px;
      letter-spacing: 1px;
    }
    .episodes-list {
      display: none;
      background: var(--gray);
      border-radius: 10px;
      padding: 1em;
      margin-top: 0.6em;
      box-shadow: 0 2px 14px #1b202a85;
      counter-reset: epis;
      font-size: 0.97em;
      max-height: 280px;
      overflow: auto;
      color: var(--accent);
    }
    .episodes-list.mostrar {
      display: block;
      animation: fadeIn .7s;
    }
    .episodes-list li {
      padding: 0.35em 0.4em;
      border-bottom: 1px solid #23293b;
      list-style: none;
      counter-increment: epis;
      position: relative;
    }
    .episodes-list li::before {
      color: var(--primary);
      content: "Ep " counter(epis) ": ";
      font-weight: 700;
      margin-right: 4px;
    }
    .toggle-episodios {
      border: none;
      background: var(--accent);
      color: var(--gray);
      font-weight: 700;
      padding: 0.5em 1.3em;
      border-radius: 8px;
      cursor: pointer;
      margin-top: 0.5em;
      box-shadow: 0 4px 12px #ffd16644;
      transition: background var(--transition), color var(--transition);
      font-size: 1em;
    }
    .toggle-episodios:hover {
      background: var(--primary);
      color: var(--card-bg);
    }
    .details-nav {
      display: flex;
      gap: 1rem;
      margin-top: 1.4em;
      justify-content: flex-end;
    }
    .details-nav button {
      border: none;
      background: var(--secondary);
      color: #fff;
      font-size: var(--h3);
      font-weight: 600;
      border-radius: 8px;
      padding: 0.7em 1.5em;
      box-shadow: var(--shadow);
      cursor: pointer;
      transition: background var(--transition), transform var(--transition);
    }
    .details-nav button:hover {
      background: var(--primary);
      color: var(--gray);
      transform: scale(1.07);
    }
    /* Loader y errores */
    .loader,
    .error {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--h2);
      font-weight: 700;
      gap: 1.3em;
      padding: 3em 0;
    }
    .loader { color: var(--primary); }
    .error {
      color: var(--danger);
      background: var(--gray);
      border-radius: var(--radius);
      margin: 2rem 0;
      box-shadow: 0 0 24px var(--danger);
      animation: neonError 1.2s infinite alternate;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(30px);}
      to   { opacity: 1; transform: none;}
    }
    @keyframes neonError {
      0% { text-shadow: 0 0 6px var(--danger), 0 0 20px #ff8fa9; }
      100% { text-shadow: 0 0 28px #ff8fa9; }
    }

    /* Responsivo */
    @media (max-width: 690px) {
      .details {
        flex-direction: column;
        align-items: stretch;
        gap: 1.3rem;
        padding: 1.4rem 0.8rem;
      }
      .details img {
        max-width: 100%;
      }
      .details-content {
        max-width: 100%;
      }
      .container {
        padding: 0;
      }
      .filters input[type="search"], .filters select {
        width: 100%;
        min-width: 100px;
      }
    }
    @media (max-width: 420px) {
      .main-nav { flex-direction: column; gap: 0.6rem; }
      header { padding:0.7rem 0;}
      .details { padding: 1rem 0.4rem; }
      .filters { padding: 0.6em; gap:0.7rem;}
    }