@media (prefers-color-scheme: dark) {

  body {

    background-color: #000;

    color: inherit;

  }



  * {

    color-scheme: dark;

  }

}



/* Desactiva el menú contextual flotante y la selección de texto */
* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

body {
  /* Permite el desplazamiento vertical manteniendo bloqueados el zoom y otros gestos */
  touch-action: pan-y; 
}



        /* Variables Globales */

        :root {

            --bg-color-light: #f4f4f4;

            --text-color-light: #333;

            --card-bg-light: #ffffff;

            --card-border-light: #ddd;

            --primary-color-light: #2d7186;

            --secondary-color-light: #018786;

            --link-color-light: #1976d2;

            --input-bg-light: #fff;

            --input-border-light: #ccc;

            --button-bg-light: var(--primary-color-light);

            --button-text-light: #fff;

            --header-bg-light: #eee;

            --footer-bg-light: #eee;

            --loader-color-light: var(--primary-color-light);

            --modal-bg-light: #fefefe;

            --filter-bg-light: #e0e0e0;

            --filter-active-bg-light: var(--primary-color-light);

            --filter-active-text-light: #fff;

            --pagination-button-bg-light: #e0e0e0;

            --pagination-active-bg-light: var(--primary-color-light);

            --pagination-active-text-light: #fff;

            --error-bg-light: rgba(255, 82, 82, 0.15);

            --error-border-light: #ff5252;

            --error-text-light: #d32f2f;

            --retry-button-bg-light: #ffcdd2;

            --retry-button-text-light: #c62828;



            --bg-color-dark: #121212;

            --text-color-dark: #e0e0e0;

            --card-bg-dark: #1e1e1e;

            --card-border-dark: #333;

            --primary-color-dark: #62bdd6;

            --secondary-color-dark: #03dac6;

            --link-color-dark: #90caf9;

            --input-bg-dark: #2c2c2c;

            --input-border-dark: #444;

            --button-bg-dark: var(--primary-color-dark);

            --button-text-dark: #000;

            --header-bg-dark: #1f1f1f;

            --footer-bg-dark: #1f1f1f;

            --loader-color-dark: var(--primary-color-dark);

            --modal-bg-dark: #2a2a2a;

            --filter-bg-dark: #333;

            --filter-active-bg-dark: var(--primary-color-dark);

            --filter-active-text-dark: #000;

            --pagination-button-bg-dark: #333;

            --pagination-active-bg-dark: var(--primary-color-dark);

            --pagination-active-text-dark: #000;

            --error-bg-dark: rgba(255, 138, 128, 0.15);

            --error-border-dark: #ff8a80;

            --error-text-dark: #ff8a80;

            --retry-button-bg-dark: #4e3432;

            --retry-button-text-dark: #ffab91;

        }



        /* Configuración Base y Tema Claro por Defecto */

        :root {

            color-scheme: light;

            --bg-color: var(--bg-color-light); --text-color: var(--text-color-light); --card-bg: var(--card-bg-light); --card-border: var(--card-border-light); --primary-color: var(--primary-color-light); --secondary-color: var(--secondary-color-light); --link-color: var(--link-color-light); --input-bg: var(--input-bg-light); --input-border: var(--input-border-light); --button-bg: var(--button-bg-light); --button-text: var(--button-text-light); --header-bg: var(--header-bg-light); --footer-bg: var(--footer-bg-light); --loader-color: var(--loader-color-light); --modal-bg: var(--modal-bg-light); --filter-bg: var(--filter-bg-light); --filter-active-bg: var(--filter-active-bg-light); --filter-active-text: var(--filter-active-text-light); --pagination-button-bg: var(--pagination-button-bg-light); --pagination-active-bg: var(--pagination-active-bg-light); --pagination-active-text: var(--pagination-active-text-light); --error-bg: var(--error-bg-light); --error-border: var(--error-border-light); --error-text: var(--error-text-light); --retry-button-bg: var(--retry-button-bg-light); --retry-button-text: var(--retry-button-text-light);

        }



        /* Tema Oscuro */

        body.dark-theme {

            color-scheme: dark;

            --bg-color: var(--bg-color-dark); --text-color: var(--text-color-dark); --card-bg: var(--card-bg-dark); --card-border: var(--card-border-dark); --primary-color: var(--primary-color-dark); --secondary-color: var(--secondary-color-dark); --link-color: var(--link-color-dark); --input-bg: var(--input-bg-dark); --input-border: var(--input-border-dark); --button-bg: var(--button-bg-dark); --button-text: var(--button-text-dark); --header-bg: var(--header-bg-dark); --footer-bg: var(--footer-bg-dark); --loader-color: var(--loader-color-dark); --modal-bg: var(--modal-bg-dark); --filter-bg: var(--filter-bg-dark); --filter-active-bg: var(--filter-active-bg-dark); --filter-active-text: var(--filter-active-text-dark); --pagination-button-bg: var(--pagination-button-bg-dark); --pagination-active-bg: var(--pagination-active-bg-dark); --pagination-active-text: var(--pagination-active-text-dark); --error-bg: var(--error-bg-dark); --error-border: var(--error-border-dark); --error-text: var(--error-text-dark); --retry-button-bg: var(--retry-button-bg-dark); --retry-button-text: var(--retry-button-text-dark);

        }



        body {

            background-color: var(--bg-color); color: var(--text-color);

            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; transition: background-color 0.3s, color 0.3s;

        }

        /* Sin el destello gris/azul al tocar enlaces y botones en movil. */
        * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

        html { scroll-behavior: smooth; }

        #app { flex-grow: 1; padding: 1rem 1rem 6rem 1rem; /* Increased bottom padding for footer */ max-width: 800px; margin: 0 auto; width: 100%; }

        header { background-color: var(--header-bg); padding: 1rem; text-align: center; margin-bottom: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: background-color 0.3s; }

        header h1 { font-size: 1.8rem; color: var(--primary-color); font-weight: bold; transition: color 0.3s; }



        /* Search & Filters */

        #search-container { position: sticky; top: 0; background-color: var(--bg-color); padding: 1rem 0 0.5rem 0; z-index: 10; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); transition: background-color 0.3s; margin-bottom: 1rem; border-radius: 0 0 8px 8px; }

        #search-section { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; padding: 0 0.5rem; }

        #search-input { flex-grow: 1; padding: 0.8rem 1rem; font-size: 1rem; border: 1px solid var(--input-border); background-color: var(--input-bg); color: var(--text-color); border-radius: 25px; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }

        #search-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.35); }

        #search-button { padding: 0.8rem 1.2rem; font-size: 1rem; background-color: var(--button-bg); color: var(--button-text); border: none; border-radius: 25px; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease, color 0.3s; display: flex; align-items: center; justify-content: center; }

        #search-button:hover { filter: brightness(1.1); }

        #search-button:active { transform: scale(0.95); }

        #filter-section { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0 0.5rem 0.5rem 0.5rem; justify-content: center; }

        .filter-button { padding: 0.4rem 0.8rem; font-size: 0.85rem; border: none; border-radius: 15px; background-color: var(--filter-bg); color: var(--text-color); cursor: pointer; transition: background-color 0.2s, color 0.2s; }

        .filter-button.active { background-color: var(--filter-active-bg); color: var(--filter-active-text); font-weight: bold; }

        .filter-button:not(.active):hover { filter: brightness(0.9); }



        /* Results & Details */

        #results-section, #detail-section { margin-top: 1rem; animation: fadeIn 0.5s ease-out; }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        .result-item, .detail-content, .character-item, .sample-item, .film-item, .dubbedby-item { background-color: var(--card-bg); border: 1px solid var(--card-border); padding: 1rem; margin-bottom: 1rem; border-radius: 8px; transition: box-shadow 0.2s ease, transform 0.1s ease, background-color 0.3s, border-color 0.3s; }

        .result-item { cursor: pointer; }

        .result-item:hover { box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.4); }

        .result-item:active { transform: scale(0.98); }

        .result-item h3, .detail-content h2, .character-item h4 { margin-bottom: 0.5rem; color: var(--primary-color); transition: color 0.3s; }

        .result-item .type-icon { margin-right: 0.5em; display: inline-block; width: 1.5em; text-align: center; }

        .result-item .item-title { display: inline; }

        .result-item p { font-size: 0.9em; opacity: 0.8; margin-top: 0.3rem; }

        .detail-content p, .character-item p, .sample-item p, .film-item p, .dubbedby-item p { margin-bottom: 0.5rem; }

        .detail-content a, .character-item a, .sample-item a, .film-item a, .dubbedby-item a { color: var(--link-color); text-decoration: none; font-weight: 500; transition: color 0.3s; }

        .detail-content a:hover, .character-item a:hover, .sample-item a:hover, .film-item a:hover, .dubbedby-item a:hover { text-decoration: underline; color: var(--secondary-color); }



        /* Audio Player */

        audio { width: 100%; margin-top: 0.5rem; border-radius: 5px; }

        /* Basic styling for controls, browsers vary wildly */

        audio::-webkit-media-controls-panel { background-color: rgba(0, 0, 0, 0.1); }

        body.dark-theme audio::-webkit-media-controls-panel { background-color: rgba(255, 255, 255, 0.1); }



        /* Loader */

        #loader { display: none; border: 4px solid rgba(128, 128, 128, 0.2); border-top: 4px solid var(--loader-color); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 2rem auto; transition: border-top-color 0.3s; }

        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }



        /* Footer */

        footer { background-color: var(--footer-bg); color: var(--text-color); text-align: center; padding: 0.8rem 0; position: fixed; bottom: 0; left: 0; width: 100%; border-top: 1px solid var(--card-border); font-size: 0.85rem; z-index: 10; box-shadow: 0 -2px 5px rgba(0,0,0,0.1); transition: background-color 0.3s, color 0.3s, border-top-color 0.3s; }

        footer .footer-content { display: flex; justify-content: space-between; align-items: center; max-width: 800px; margin: 0 auto; padding: 0 1rem; }

        footer .footer-icons button { background: none; border: none; color: var(--text-color); font-size: 1.2rem; /* Slightly larger */ cursor: pointer; margin-left: 1rem; /* Increased spacing */ padding: 0.3rem; transition: color 0.2s, transform 0.1s; opacity: 0.8; }

        footer .footer-icons button:hover { color: var(--primary-color); opacity: 1; }

        footer .footer-icons button:active { transform: scale(0.9); }

        footer .credits { opacity: 0.8; }

        footer .credits a { color: var(--link-color); text-decoration: none; font-weight: 500; }

        footer .credits a:hover { text-decoration: underline; }



        /* Hidden Utility */

        .hidden { display: none !important; }



        /* Error Message */

        #error-container { margin-top: 1rem; }

        .error-message { color: var(--error-text); background-color: var(--error-bg); border: 1px solid var(--error-border); padding: 1rem; border-radius: 8px; display: flex; flex-direction: column; /* Stack icon/text and button */ align-items: flex-start; gap: 0.8rem; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }

        .error-message-content { display: flex; align-items: center; gap: 0.8rem; width: 100%; }

        .error-message i { font-size: 1.2rem; }

        .retry-button { background-color: var(--retry-button-bg); color: var(--retry-button-text); border: 1px solid var(--error-border); padding: 0.5rem 1rem; border-radius: 5px; cursor: pointer; font-weight: bold; transition: background-color 0.2s, color 0.2s; margin-top: 0.5rem; align-self: flex-end; /* Align button to the right */ }

        .retry-button:hover { filter: brightness(0.95); }

        .retry-button:active { transform: scale(0.98); }



        /* Detail View Enhancements */

        .detail-header { display: flex; flex-direction: column; /* Stack title and button on small screens */ align-items: flex-start; gap: 0.5rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--card-border); }

        @media (min-width: 500px) { /* Row layout on larger screens */

            .detail-header { flex-direction: row; justify-content: space-between; align-items: center; }

        }

        .detail-header h2 { margin: 0; font-size: 1.6rem; flex-grow: 1; margin-right: 1rem; /* Only needed for row layout */ }

        .back-button { background: none; border: 1px solid var(--input-border); color: var(--text-color); padding: 0.5rem 1rem; border-radius: 20px; cursor: pointer; transition: background-color 0.2s, color 0.2s, transform 0.1s, border-color 0.3s; white-space: nowrap; }

        .back-button:hover { background-color: var(--input-bg); border-color: var(--primary-color); color: var(--primary-color); }

        .back-button:active { transform: scale(0.95); }

        .section-title { font-size: 1.3rem; font-weight: bold; margin-top: 2rem; margin-bottom: 1rem; border-bottom: 2px solid var(--primary-color); padding-bottom: 0.4rem; color: var(--primary-color); transition: color 0.3s, border-bottom-color 0.3s; }

        .section-title i { margin-right: 0.5em; }

        .character-item, .sample-item, .film-item, .dubbedby-item { padding-left: 1.5rem; position: relative; border-left: 3px solid var(--secondary-color); transition: border-left-color 0.3s; }

        .character-item::before, .sample-item::before, .film-item::before, .dubbedby-item::before { /* Removed ::before styling as icons are now inline */ }

        .character-item h4 { color: var(--text-color); font-size: 1.1rem; transition: color 0.3s; }

        .original-link { display: inline-block; margin-top: 1rem; font-size: 0.9em; opacity: 0.8; }

        .original-link i { margin-right: 0.3em; }

        .sample-item .audio-description { margin-bottom: 0.3rem; opacity: 0.9; }



        /* Pagination */

        .pagination-container { text-align: center; margin: 2rem 0 1rem 0; }

        .pagination-button, .pagination-info { background-color: var(--pagination-button-bg); color: var(--text-color); border: 1px solid var(--card-border); padding: 0.5rem 0.8rem; margin: 0 0.2rem; border-radius: 4px; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.3s; }

        .pagination-button:disabled { opacity: 0.5; cursor: not-allowed; }

        .pagination-button.active { background-color: var(--pagination-active-bg); color: var(--pagination-active-text); border-color: var(--pagination-active-bg); font-weight: bold; }

        .pagination-info { cursor: default; }

        .pagination-select { background-color: var(--input-bg); color: var(--text-color); border: 1px solid var(--input-border); padding: 0.5rem; border-radius: 4px; margin: 0 0.3rem; cursor: pointer; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }



        /* Help Modal */

        .modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); animation: fadeInModal 0.3s ease-out; }

        @keyframes fadeInModal { from { background-color: rgba(0,0,0,0); } to { background-color: rgba(0,0,0,0.6); } }

        .modal-content {background-color: var(--modal-bg); margin: 10% auto; padding: 25px; border: 1px solid var(--card-border); border-radius: 8px; width: 90%; max-width: 600px; position: relative; animation: slideInModal 0.4s ease-out; transition: background-color 0.3s, border-color 0.3s; margin-top: 10px;}

        @keyframes slideInModal { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

        .modal-close-button { color: var(--text-color); position: absolute; top: 10px; right: 15px; font-size: 1.8rem; font-weight: bold; cursor: pointer; opacity: 0.7; transition: color 0.3s, opacity 0.2s; }

        .modal-close-button:hover, .modal-close-button:focus { opacity: 1; text-decoration: none; outline: none; }

        .modal h2 { color: var(--primary-color); margin-bottom: 1rem; }

        .modal p { margin-bottom: 0.8rem; line-height: 1.7; }

        .modal ul { margin-left: 20px; margin-bottom: 0.8rem; } /* Added list styling */

        .modal li { margin-bottom: 0.5rem; } /* Added list item spacing */

        .modal a { color: var(--link-color); }

        .modal a:hover { color: var(--secondary-color); }

        .modal .source-note { font-size: 0.9em; opacity: 0.8; margin-top: 1.5rem; border-top: 1px dashed var(--card-border); padding-top: 1rem; }

        .modal.visible { display: block; }







#results-title {margin-bottom: 20px;}

/* Estilos para el botón de volver arriba (siempre visible) */
#scroll-top-button {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: 1rem;
    padding: 0.3rem;
    transition: color 0.2s, transform 0.1s;
    opacity: 0.8;
    display: inline-block; /* Aseguramos que siempre sea visible */
}

#scroll-top-button:hover {
    color: var(--primary-color);
    opacity: 1;
}

#scroll-top-button:active {
    transform: scale(0.9);
}






/* Mejoras visuales para el loader */

/* Estilo actual del loader */
#loader {
    display: none;
    border: 4px solid rgba(128, 128, 128, 0.2);
    border-top: 4px solid var(--loader-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 2rem auto;
    transition: border-top-color 0.3s;
}

/* Animación adicional para destacar el área del loader */
@keyframes loaderFocus {
    0% { box-shadow: 0 0 0 0 rgba(var(--loader-color-rgb, 98, 189, 214), 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(var(--loader-color-rgb, 98, 189, 214), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--loader-color-rgb, 98, 189, 214), 0); }
}

/* Añadir esta clase al loader cuando está visible */
#loader.active {
    animation: spin 1s linear infinite, loaderFocus 2s infinite;
    /* El contenedor necesita padding/margin para que la animación de pulsación se vea bien */
    padding: 5px;
}

/* Variable de color RGB para la animación de pulsación */
:root {
    --loader-color-rgb: var(--accent-rgb-dark, 98, 189, 214); /* Valor para tema oscuro */
}

body:not(.dark-theme) {
    --loader-color-rgb: var(--accent-rgb-light, 45, 113, 134); /* Valor para tema claro */
}



/* Estilos para la sección "Doblado Por" */
.actor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.actor-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

.dark-theme .actor-card {
    background-color: #2a2a2a;
}

.light-theme .actor-card {
    background-color: #f0f0f0;
}

.actor-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.actor-card-content {
    display: flex;
    padding: 12px;
    align-items: center;
}

.actor-icon {
    margin-right: 12px;
    font-size: 1.2rem;
    color: #7293d6;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(114, 147, 214, 0.1);
}

.actor-info {
    flex: 1;
}

.actor-name {
    font-weight: 500;
    margin-bottom: 3px;
}

.actor-count {
    font-size: 0.85rem;
    opacity: 0.7;
    margin: 0;
}

.voice-item {
    margin-bottom: 12px;
    padding: 8px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.05);
}

#usual-voices-list, #dubbed-by-list {
    margin-bottom: 25px;
}

/* Mejoras para visualización móvil */
@media (max-width: 480px) {
    .actor-grid {
        grid-template-columns: 1fr;
    }
}



/* Estilos para la sección "Doblado Por" */
.actor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 15px;
    margin-bottom: 25px;
}

.actor-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

.dark-theme .actor-card {
    background-color: #2a2a2a;
}

.light-theme .actor-card {
    background-color: #f0f0f0;
    color: #333;
}

.actor-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.actor-card-content {
    display: flex;
    padding: 12px;
    align-items: center;
}

.actor-icon {
    margin-right: 12px;
    font-size: 1.2rem;
    color: #7293d6;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(114, 147, 214, 0.1);
}

.actor-info {
    flex: 1;
}

.actor-name {
    font-weight: 500;
    margin-bottom: 3px;
}

.actor-count {
    font-size: 0.85rem;
    opacity: 0.7;
    margin: 0;
}

.voice-item {
    margin-bottom: 12px;
    padding: 8px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.05);
}

.dark-theme .voice-item {
    background-color: #2a2a2a;
}

.light-theme .voice-item {
    background-color: #f0f0f0;
    color: #333;
}

#usual-voices-list, #dubbed-by-list {
    margin-bottom: 25px;
}

/* Mejoras para visualización móvil */
@media (max-width: 480px) {
    .actor-grid {
        grid-template-columns: 1fr;
    }
}


.pagination-info {display: none;}