/* Estilo general del cuerpo de la página */
body {
    background-color: #f4f4f4; /* Establece el color de fondo de la página */
}

/* Contenedor principal de los comentarios, que se envuelve y centra los elementos */
.comentarios-wrapper {
    display: flex; /* Usa Flexbox para layout de los hijos */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea si es necesario */
    justify-content: center; /* Centra horizontalmente los elementos hijos */
    max-width: 100%; /* Asegura que el contenedor use todo el ancho disponible */
    margin: 0 auto; /* Centra el contenedor en la página */
}

/* Contenedor para la imagen dentro de los comentarios */
.comentarios-container-imagen-wrapper {
    flex: 1; /* Ocupa la mitad del ancho disponible del contenedor principal */
    max-width: 50%; /* Máximo ancho del 50% del contenedor principal */
    margin-left: auto; /* Alinea el contenedor de imagen al margen derecho */
}

/* Imagen dentro del contenedor de imagen */
.comentarios-container-imagen {
    width: 100%; /* Ancho completo del contenedor */
    height: 100%; /* Altura completa del contenedor */
    object-fit: cover; /* Ajusta la imagen para que cubra el contenedor sin distorsionarse */
    margin: 0; /* Sin márgenes adicionales */
    filter: grayscale(100%); /* Aplica un filtro en escala de grises a la imagen */
}

/* Contenedor principal para los comentarios */
.comentarios-container {
    flex: 1; /* Ocupa la otra mitad del ancho disponible del contenedor principal */
    max-width: 50%; /* Máximo ancho del 50% del contenedor principal */
    width: 100%; /* Ancho completo del contenedor */
    padding: 20px; /* Espacio interno alrededor del contenido */
  
    box-shadow: 0 0 6px rgba(0,0,0,0.1); /* Sombra sutil alrededor del contenedor */
    box-sizing: border-box; /* Incluye padding y border en el cálculo del ancho */
    display: flex; /* Usa Flexbox para layout interno */
    flex-direction: column; /* Dispone los elementos en una columna */
    align-items: center; /* Centra horizontalmente el contenido interno */
    justify-content: center; /* Centra verticalmente el contenido interno */
    
}

/* Estilo para el encabezado de los comentarios */
.comentarios-header {
    text-align: center; /* Centra el texto dentro del encabezado */
    color: #ffffff; /* Color del texto */
    font-weight: bold; /* Letras en negrita */
}

/* Estilo del formulario de comentarios */
.comentarios-form {
    display: flex; /* Usa Flexbox para layout del formulario */
    flex-direction: column; /* Dispone los elementos del formulario en una columna */
    width: 100%; /* Ancho completo del formulario */
    max-width: 400px; /* Ancho máximo del formulario */
    margin: 0 auto; /* Centra el formulario en su contenedor */
}

/* Estilo para las etiquetas dentro del formulario de comentarios */
.comentarios-label {
    margin-top: 6px; /* Espacio arriba de las etiquetas */
    color: #ffffff; /* Color del texto de las etiquetas */
}

/* Estilo para los campos de entrada de texto y áreas de texto */
.comentarios-input, .comentarios-textarea {
    background-color:transparent;
    color: #ccc;
    margin-top: 3px; /* Espacio arriba de los campos de texto */
    padding: 10px; /* Espacio interno dentro de los campos de texto */
    border: 2px solid #ffffff; /* Borde delgado y gris alrededor de los campos de texto */
    border-radius: 4px; /* Bordes redondeados */
    font-size: 16px; /* Tamaño de la fuente en los campos de texto */
    width: 100%; /* Ancho del 100% del contenedor padre */
    max-width: 400px; /* Ancho máximo ajustado a 400px */
    box-sizing: border-box; /* Incluye el padding y el border en el cálculo del ancho total */
}

/* Estilo para la sección de términos dentro del formulario */
.comentarios-terms {
    margin-top: 10px; /* Espacio arriba de la sección de términos */
}

/* Estilo para el botón dentro del formulario de comentarios */
.comentarios-button {
    margin-top: 10px; /* Espacio arriba del botón */
    padding: 6px; /* Espacio interno dentro del botón */
    background-color: #00594d; /* Color de fondo verde oscuro */
    color: #fff; /* Color del texto blanco */
    border: none; /* Sin borde alrededor del botón */
    border-radius: 4px; /* Bordes redondeados */
    font-size: 12px; /* Tamaño de la fuente en el botón */
    cursor: pointer; /* Cambia el cursor a una mano al pasar sobre el botón */
    width: 100%; /* Ancho del 100% del contenedor padre */
    max-width: 400px; /* Ancho máximo ajustado a 400px */
    box-sizing: border-box; /* Incluye el padding y el border en el cálculo del ancho total */
}

/* Estilo para el botón cuando se pasa el cursor sobre él */
.comentarios-button:hover {
    background-color: #003731; /* Cambia el color de fondo a un verde más claro al pasar el cursor */
}

/* Estilo para la respuesta de los comentarios */
.comentarios-response {
    margin-top: 10px; /* Espacio arriba de la respuesta */
    text-align: center; /* Centra el texto dentro de la respuesta */
    color: #333; /* Color del texto */
}

/* Reglas para pantallas pequeñas (dispositivos móviles) */
@media (max-width: 600px) {
    .comentarios-wrapper {
        flex-direction: column; /* Cambia a columna para pantallas pequeñas */
        align-items: center; /* Centra los elementos hijos horizontalmente */
    }

    .comentarios-container {
        max-width: 100%; /* Ajusta el ancho al 100% en pantallas pequeñas */
        display: flex; /* Usa flexbox para centrar el contenido */
        flex-direction: column; /* Asegura que el contenido esté en columna */
        align-items: center; /* Centra el contenido horizontalmente */
    }

    .comentarios-container-imagen-wrapper {
        margin-bottom: 20px; /* Espacio inferior para la imagen en pantallas pequeñas */
        margin-left: 0; /* Elimina el margen izquierdo en pantallas pequeñas */
        display: flex; /* Usa flexbox para centrar la imagen */
        justify-content: center; /* Centra la imagen horizontalmente */
        width: 100%; /* Asegura que el contenedor ocupe el 100% del ancho */
    }

    .comentarios-form {
        max-width: 100%; /* Asegura que el formulario use el 100% del ancho en pantallas pequeñas */
        box-sizing: border-box; /* Incluye el borde y el relleno en el ancho total */
    }

    .comentarios-input, .comentarios-textarea, .comentarios-button {
        max-width: 100%; /* Asegura que los campos y el botón usen el 100% del ancho en pantallas pequeñas */
        margin: 0 auto; /* Centra los elementos dentro del contenedor */
        display: block; /* Asegura que los elementos ocupen el ancho completo y se centren */
    }
}

    .comentarios-container {
        background-image: url('imagenes/fondos/fondo_comentarios.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Ajusta el valor 0.5 para más o menos oscuridad */
        background-blend-mode: darken;
    }


    .panel-difuinado-comentarios{
        background: linear-gradient(135deg, #003731, #cc0c00);
        backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    }
    
    .h1-comentarios {
        font-size: 35px; /* Tamaño del texto del encabezado */
        color: #fff; /* Color del texto blanco */
        font-weight: bold; /* Texto en negritas */
        text-align: left; /* Alinea el texto a la izquierda */
        padding: 0 20px; /* Relleno horizontal para alejar el texto de los bordes */
        margin: 0; /* Elimina margen si es necesario */
    }

    .p-comentarios {
        font-size: 15px; /* Tamaño del texto del encabezado */
        color: #fff; /* Color del texto blanco */
        text-align: left; /* Alinea el texto a la izquierda */
        padding: 0 20px 8px 10px; /* Relleno horizontal para alejar el texto de los bordes */
        font-style: italic; /* Aplica estilo cursivo */
        margin: 0; /* Elimina margen si es necesario */
    }

    .comentarios-wrapper {
        margin: 0;
        padding: 0;
    }
    
    .comentarios-container-imagen-wrapper {
        margin: 0;
        padding: 0;
    }