/*
 Theme Name: Twenty Twenty Child
 Theme URI: https://example.com/twentytwenty-child/
 Description: Tema hijo de Twenty Twenty
 Author: MS
 Author URI: https://comunidadcpe.com/wordpress
 Template: twentytwenty
 Version: 1.0.0
 Text Domain: twentytwenty-child
 */


  /* INICIA Cambiar el fondo de la página a blanco */
body {
    background-color: #ffffff !important; /* Blanco puro */
}

/* Opcional: Asegurarse de que el contenedor principal también sea blanco */
.site-content {
    background-color: #ffffff !important;
}

/* Opcional: Si el header o el footer tienen un fondo diferente y quieres que también sean blancos */
.header-footer-group {
    background-color: #ffffff !important;
}
 /* FIN Cambiar el fondo de la página a blanco */

 /* INICIA CONTENIDO */
 /* Centrado de Contenido */
.centered-content {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Estilos de los Botones Sociales */
.creator-fields p {
    margin-bottom: 10px; /* Espacio entre los botones */
}

.social-button {
    display: inline-block; /* Para que parezca un botón */
    padding: 10px 20px;
    margin: 5px; /* Espacio alrededor de cada botón */
    border: none;
    border-radius: 5px; /* Bordes ligeramente redondeados */
    background-color: #0073aa; /* Color por defecto, como el azul de WP */
    color: white;
    font-size: 16px;
    text-decoration: none; /* Quita el subrayado */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Transición suave al pasar el ratón */
}

.social-button:hover {
    background-color: #005177; /* Color más oscuro al pasar el ratón */
    text-decoration: none; /* Asegura que no se subraye al pasar el ratón */
}

/* Colores específicos para cada red social (opcional) */
.tiktok-button { background-color: #25F4EE; color: #000; } /* Cian de TikTok */
.tiktok-button:hover { background-color: #00E6E2; }

.instagram-button {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    color: white;
}
.instagram-button:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); opacity: 0.9; } /* Mantener gradiente, solo cambiar opacidad */

.youtube-button { background-color: #FF0000; } /* Rojo de YouTube */
.youtube-button:hover { background-color: #CC0000; }

.facebook-button { background-color: #1877F2; } /* Azul de Facebook */
.facebook-button:hover { background-color: #145CB6; }

.x-button { background-color: #000000; } /* Negro de X (Twitter) */
.x-button:hover { background-color: #333333; }

/* Estilo para la cantidad de seguidores */
.followers-count {
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    margin-top: 20px;
}
 /* FIN CONTENIDO */

 /* INICIA Estilos para la imagen destacada */
.post-thumbnail {
    margin-bottom: 20px; /* Espacio debajo de la imagen */
}

.post-thumbnail img {
    max-width: 100%; /* Asegura que no se desborde del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Elimina espacio extra que algunos navegadores añaden debajo de las imágenes */
}

.post-thumbnail img {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.post-thumbnail img {
    border-radius: 50%; /* Esto hace que la imagen sea un círculo perfecto */
    object-fit: cover; /* Asegura que la imagen cubra el círculo sin distorsionarse */
    width: 200px; /* Define un tamaño fijo, ajusta según necesites */
    height: 200px; /* Debe ser igual al ancho para un círculo perfecto */
    border: 5px solid #eee; /* Opcional: añade un borde ligero alrededor de la imagen */
}
 /* FIN Estilos para la imagen destacada */

  /* INICIO Tus estilos CSS existentes */
        .cantidad-seguidores {
            display: block;
            margin-top: 10px;
            font-weight: bold;
            color: #333;
        }
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            box-sizing: border-box;
        }
        .container {
            max-width: 960px;
            width: 100%;
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-top: 20px;
            margin-bottom: 20px;
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 5px;
        }
        .seo-subtitle {
            text-align: center;
            color: #666;
            font-size: 1.1em;
            margin-top: 0;
            margin-bottom: 30px;
        }

        /* Estilos para el formulario de búsqueda avanzada */
        .advanced-search-form {
            background-color: #f9f9f9;
            border: 1px solid #eee;
            padding: 20px;
            margin-bottom: 30px;
            border-radius: 5px;
        }
        .advanced-search-form .form-group {
            margin-bottom: 15px;
        }
        .advanced-search-form label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .advanced-search-form select,
        .advanced-search-form input[type="text"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 16px;
        }
        .advanced-search-form select[multiple] {
            min-height: 80px;
        }
        .advanced-search-form button {
            background-color: #0073aa;
            color: white;
            padding: 12px 25px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }
        .advanced-search-form button:hover {
            background-color: #005177;
        }
        .advanced-search-form .hint {
            font-size: 0.9em;
            color: #555;
            margin-top: 8px;
        }

        /* Estilos para los resultados de búsqueda */
        .search-results {
            margin-top: 20px;
        }
        .search-results article {
            background-color: #fff;
            border: 1px solid #e9e9e9;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        .search-results article:last-child {
            border-bottom: 1px solid #e9e9e9;
        }
        .search-results h2 {
            margin-top: 0;
        }
        .search-results h2 a {
            text-decoration: none;
            color: #0073aa;
        }
        .search-results h2 a:hover {
            color: #005177;
            text-decoration: underline;
        }
        .search-results p {
            color: #444;
            line-height: 1.6;
        }
        .search-results .meta-info {
            font-size: 0.9em;
            color: #777;
        }

        /* Mejoras para la usabilidad del select múltiple nativo en móviles (Select2 lo reemplazará) */
        @media (max-width: 768px) {
            .advanced-search-form select[multiple] {
                height: auto;
                min-height: 40px;
            }
            .advanced-search-form select[multiple] option {
                padding: 10px;
            }
            .container {
                padding: 20px;
            }
            h1 {
                font-size: 1.8em;
            }
            .seo-subtitle {
                font-size: 1em;
            }
        }
        /* FIN Tus estilos CSS existentes */