/* Estilos propios de las secciones públicas nuevas, complementan mameyugo.css */

.comentario-respuesta {
    margin-left: 40px;
}

.comentario-cabecera {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #846021;
}

.comentario-nombre {
    font-weight: bold;
    color: #474747;
}

.comentario-texto {
    border-top: 2px solid #8a7d42;
    background-color: #f8f6f1;
    margin-top: 6px;
    padding: 10px;
}

.comentario-responder {
    margin: 6px 0 20px;
}

/* Botón principal para abrir el formulario ("Deja tu comentario" /
   "Enviar comentario"), con el color de acento del sitio (#C32404) en
   vez del azul por defecto de Bootstrap. */
.btn-comentar {
    background: #C32404;
    background-image: none;
    border-color: #a31d03;
    text-shadow: none;
    color: #fff;
}

.btn-comentar:hover,
.btn-comentar:focus {
    background: #a31d03;
    background-image: none;
    color: #fff;
}

/* Enlace "Responder" bajo cada comentario: discreto, en el mismo tono
   sepia que la fecha del comentario, en vez de un botón gris suelto. */
.comentario-responder .btn-link {
    padding-left: 0;
    font-weight: bold;
    font-size: 12px;
    color: #846021;
}

.comentario-responder .btn-link:hover {
    color: #C32404;
    text-decoration: underline;
}

.form-comentario {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08);
    padding: 20px;
    margin: 12px 0 25px;
}

.form-comentario-titulo {
    margin: 0 0 15px;
    padding-bottom: 8px;
    font-size: 15px;
    font-weight: bold;
    color: #474747;
    border-bottom: 2px solid #8a7d42;
}

.form-comentario-fila {
    display: flex;
    gap: 15px;
}

.form-comentario-fila .control-group {
    flex: 1;
    min-width: 0;
}

.form-comentario .control-group {
    margin-bottom: 14px;
}

.form-comentario label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: bold;
    color: #846021;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.form-comentario-opcional {
    font-weight: normal;
    text-transform: none;
    color: #999;
}

.form-comentario input,
.form-comentario textarea {
    width: 100%;
    box-sizing: border-box;
    height: auto;
    padding: 8px 10px;
    background-color: #f8f6f1;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.form-comentario input:focus,
.form-comentario textarea:focus {
    outline: none;
    background-color: #fff;
    border-color: #C32404;
    box-shadow: 0 0 0 3px rgba(195, 36, 4, 0.12);
}

.form-comentario textarea {
    min-height: 100px;
    resize: vertical;
}

.form-comentario .hp-field {
    position: absolute;
    left: -9999px;
}

.form-comentario-acciones {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 4px;
}

.form-comentario .btn-cancelar-comentario {
    color: #846021;
}

.form-comentario .btn-cancelar-comentario:hover {
    color: #C32404;
    text-decoration: underline;
}

@media (max-width: 480px) {
    .form-comentario-fila {
        flex-direction: column;
        gap: 0;
    }
}

.comentario-mensaje {
    margin-top: 10px;
}

.comentario-mensaje:empty {
    display: none;
}

.posts-relacionados {
    margin: 20px 0;
}

.posts-relacionados ul {
    list-style: disc;
    padding-left: 20px;
}

/* Imagen de cabecera de una categoría, mismo tratamiento visual (esquinas
   redondeadas + anillo de sombra) que .rowpost para mantener coherencia. */
.categoria-banner {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.15);
    margin-bottom: 15px;
}

/* Miniaturas de post en los listados: mismo alto para todas, recortadas
   sin deformarse, en vez de mostrarse a su tamaño original. */
.post-mini-imagen {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
}

/* Imagen del detalle de un post: se limita la altura para posts con
   imágenes muy grandes, conservando el recorte proporcional. */
.img-detpost img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
}

/* mameyugo.css fija line-height: 20px en los títulos de post
   (.blog #blog-index h1) mientras que el enlace del título usa
   font-size: 24px, así que los títulos de más de una línea se
   solapaban. Se iguala la especificidad del selector original para
   que la sobreescritura funcione seguro. */
.blog #blog-index h1,
.blog #blog-index h1 a {
    line-height: 1.3;
}

/* En móvil el anillo de sombra + esquinas redondeadas de .rowpost
   (listado y detalle de post) queda mal, así que se sustituye por un
   borde superior/inferior simple, sin border-radius. */
@media (max-width: 767px) {
    .blog .rowpost {
        border-radius: 0;
        box-shadow: none;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
}