/* =========================================
    COMENTARIOS DE VOCABULARIO
   ========================================= */

.contenedor-ejemplos {
    margin: 40px 0;
    padding: 0; /* Quitamos padding lateral extra si ya lo tiene el padre */
    clear: both !important;
    position: relative !important;
    z-index: 10 !important;
}

.contenedor-ejemplos h3 {
    color: var(--color-texto);
    font-size: 1.3rem;
}

.formulario-sugerencia .logged-in-as {
    display: none;
}

/* La lista de oraciones */
.michi-content-lists {
    .ejemplos-ul {
        list-style-type: circle var(--color-principal-hover);
        padding: 0;
    }

    .ejemplos-ul li {
        margin-left: 40px;
        font-family: var(--font-pretty-cursive); /* Indie Flower */
        font-size: 1.2rem;
        position: relative;
    }

    .ejemplos-ul li::marker {
        color: var(--color-principal);
    }
}
.icono-comilla {
    color: var(--color-principal-claro);
}

.autor-ejemplo {
    color: var(--color-principal-claro);
}

.sin-ejemplos {
    font-style: italic;
    color: var(--color-texto-suave);
}

/* El Formulario */
/* .formulario-sugerencia {
    max-width: 600px;
    margin: 20px auto;
    margin-top: 40px;
    padding: 20px;
    border-radius: 20px;
    border: 1.5px solid var(--color-principal-claro)
} */

.escribir-con-feedback {
    margin-top: 20px;
}

/* .formulario-sugerencia {
    textarea, input {
        width: calc(100% - 20px);
        padding: 5px 10px 5px 10px;
        border: 1px solid var(--color-borde);
        border-radius: 10px;
        font-family: var(--font-pretty-cursive);
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    textarea:focus,
    textarea:active {
    outline: none;
    }
} */

.form-submit,
.escribir-con-feedback,
.tarjeta-juego-hablar,
.juego-entrevista {
    /* Botón de Enviar (Reutilizando tus estilos de botón) */
    input[type="submit"],
    .boton-miacat-enviar,
    .boton-miacat-feedback,
    .boton-miacat-siguiente {
        background-color: var(--color-principal);
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 20px;
        cursor: pointer;
        font-family: var(--font-cuerpo);
        font-weight: bold;
        text-transform: lowercase;
        max-width: 45%;
        font-size: 1.1em;
        margin: 3px;
        transition: 0.2s;
    }

    .boton-miacat-feedback {
        background-color: var(--color-ai);
    }

    .boton-miacat-siguiente {
        background-color: var(--color-amarillo);
    }

    input[type="submit"]:hover,
    .boton-miacat-enviar:hover,
    .boton-miacat-feedback:hover,
    .boton-miacat-siguiente:hover {
        transform: scale(1.04);
    }

    .boton-miacat-feedback:disabled:hover {
        background-color: var(--color-ai);
        transform: none;
    }

    .boton-miacat-feedback:disabled {
        opacity: 0.7;
        cursor: wait;
    }

    .boton-miacat-enviar:disabled:hover {
        transform: none;
        background-color: var(--color-principal);
    }

    input[type="submit"]:hover,
    .boton-miacat-enviar:hover {
        background-color: var(--color-principal-hover);
    }

    .boton-miacat-feedback:hover {
        background-color: var(--color-ai-darker);
    }

    .boton-miacat-siguiente:hover {
        background-color: var(--color-amarillo-oscuro);
    }

    input:active, input:focus {
        outline: none;
    }
}

.juego-escribir {
    #reply-title {
        display: none;
    }
}

.escribir-con-feedback {
    #caja-feedback-miacat {
        border: 1.5px solid var(--color-ai);
        background-color: var(--color-rosa-palida);
        border-radius: 15px;
        padding: 20px;
        margin-top: 15px;
        display: block;
    }
    .titulo-feedback {
        color: #5E3047;
        margin-top: 0;
        margin-bottom: 10px;
        font-weight: bold;
    }
    #contenido-feedback-texto pre {
         /* Corrección para que el JSON no se salga de la caja */
        white-space: pre-wrap;
        background: transparent;
        border: none;
        padding: 0;
    }
}

/* Estilos del Reporte Miacat */
.miacat-reporte {
    font-family: inherit;
}

/* =========================================
   ESTILO UNIFICADO (MiaCat v2 - Card Style)
   ========================================= */

/* 1. El Contenedor Principal (La Tarjeta) */
/* Antes tenía borde verde, ahora es una tarjeta blanca con sombra suave */
.formulario-sugerencia {
    /* max-width: 650px; */
    margin: 30px auto;
    padding: 30px;

    background-color: #ffffff;
    border: 1px solid #eef2f5; /* Borde sutil casi invisible */
    border-radius: 20px;       /* Bordes muy redondeados */
    box-shadow: 0 10px 40px rgba(0,0,0,0.06); /* Sombra difusa "premium" */

    position: relative;
    transition: transform 0.3s ease;
}

/* 2. Los Inputs y Textarea (Más modernos) */
.formulario-sugerencia textarea,
.formulario-sugerencia input[type="text"] {
    width: 100%; /* Ocupa todo el ancho */
    padding: 15px;

    background-color: #f8f9fa; /* Gris muy clarito, no blanco */
    border: 2px solid transparent; /* Sin borde visible por defecto */
    border-radius: 15px;

    font-family: var(--font-cuerpo); /* Mejor leer en fuente normal que cursiva */
    font-size: 1rem;
    color: #444;

    transition: all 0.2s ease;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.01);
    box-sizing: border-box; /* Importante para que el padding no rompa el ancho */
    margin-bottom: 15px;
}

.formulario-sugerencia textarea:focus,
.formulario-sugerencia input[type="text"]:focus {
    outline: none;
    background-color: #fff;
    border-color: var(--color-azul); /* Se ilumina al escribir */
    box-shadow: 0 4px 12px rgba(111, 160, 212, 0.15);
}

/* 3. La Caja de Feedback (Integrada) */
.escribir-con-feedback #caja-feedback-miacat {
    background-color: var(--color-rosa-palida); /* Un rosa muy pálido */
    border: 1.5px dashed var(--color-ai); /* Borde punteado */
    border-radius: 15px;
    padding: 20px;
    margin-top: 25px;
    position: relative;
}

.titulo-feedback {
    color: var(--color-frambuesa);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 700;
}

/* 4. Título del Formulario (El que dice "¿Tienes una oración...?") */
.formulario-sugerencia h3#reply-title {
    color: var(--color-principal);
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: left; /* Alineado a la izquierda se ve más moderno */
}

/* Ajuste para el link de "Inicia sesión" */
.comment-form-author small {
    font-size: 0.85rem;
    background: #f0f7ff;
    padding: 8px 12px;
    border-radius: 8px;
    display: inline-block;
}