/* --- Estilos del Contenedor Principal --- */
#comparador-texto-plugin {
    max-width: 1000px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #0e1a2c;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* --- Estilos para la Disposición (Flexbox) --- */
.comparador-flex-container {
    display: flex;
    gap: 20px; /* Espacio entre los recuadros */
    margin-bottom: 20px;
}

/* Asegura que los recuadros ocupen el 50% cada uno */
.recuadro-container {
    flex: 1; 
    min-width: 0; /* Necesario para que flex funcione bien con texto largo */
}

.recuadro-container h3 {
    margin-top: 0;
    padding-bottom: 5px;
    border-bottom: 2px solid #e6f0ff;
}

/* --- Estilos de las Áreas de Texto (contenteditable) --- */
.area-comparacion {
    /* Apariencia básica de un textarea */
    border: 1px solid #0e1a2c;
    min-height: 300px; /* Altura mínima para trabajar cómodamente */
    padding: 15px;
    overflow-y: auto; /* Permite desplazamiento si el texto es muy largo */
    background-color: #fff;
    line-height: 1.6;
    font-size: 14px;
    box-sizing: border-box; /* Incluye padding y border en el ancho/alto */
    white-space: pre-wrap; /* Mantiene saltos de línea y espacios al pegar */
}

/* Estilo para el enfoque (focus) */
.area-comparacion:focus {
    border-color: #0e1a2c; /* Color azul de WordPress */
    outline: none; /* Elimina el contorno predeterminado del navegador */
    box-shadow: 0 0 5px rgba(0, 115, 170, 0.5);
}

/* --- Estilo de Resaltado para las Diferencias --- */
/* Esta clase es la que se usa en comparador.js */
.diferencia {
    /* Color que indica una inserción o diferencia. */
    background-color: #ffe0e0; /* Un rojo/rosa muy claro */
    font-weight: bold; /* Opcional: poner la palabra en negrita para énfasis */
    padding: 2px 0; /* Pequeño relleno para que se vea el resaltado */
    border-bottom: 2px dashed #cc0000; /* Opcional: subrayado para mayor visibilidad */
}

/* --- Estilos del Botón de Comparar --- */
#boton-comparar {
    /* Heredará muchos estilos de WordPress (button button-primary),
       pero podemos centrarlo o darle un margen superior. */
    display: block;
    width: 100%; /* Ocupa todo el ancho */
    padding: 12px;
    font-size: 16px;
    margin-top: 15px;
    cursor: pointer;
}