/* Estilos básicos para el contenido del editor */
.ck-editor__editable {
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    font-size: 16.5pt;
    line-height: 1.65;
    color: #ffffff;
    background-color: #2e3141 !important;
    padding: 1rem;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 200px;
    max-height: 600px;
    overflow-y: auto !important;
    box-sizing: border-box;
}

/* Estilos para encabezados */
.ck-heading_paragraph {
    font-size: 1rem;
    color: #cccccc;
}

.ck-heading_heading1 {
    font-size: 2.5rem;
    color: #ffffff;
    font-weight: bold;
}

.ck-heading_heading2 {
    font-size: 2rem;
    color: #ffffff;
    font-weight: bold;
}

.ck-heading_heading3 {
    font-size: 1.75rem;
    color: #ffffff;
    font-weight: bold;
}

/* Estilos para listas */
.ck-editor__editable ul {
    list-style: disc;
    margin-left: 2rem;
}

.ck-editor__editable ol {
    list-style: decimal;
    margin-left: 2rem;
}

/* Estilos para enlaces */
.ck-editor__editable a {
    color: #4c5c96;
    text-decoration: underline;
}

.ck-editor__editable a:hover {
    color: #53639e;
}

/* Estilos para imágenes */
.ck-editor__editable img {
    display: block;
    margin: 0 auto;
    width: 100%; /* Ajusta el ancho al contenedor */
    max-width: 100%; /* Limita el ancho máximo */
    height: auto; /* Mantiene la proporción de la imagen */
    border-radius: 5px; /* Bordes redondeados */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* Estilos para imágenes responsivas */
.image-inline {
    max-width: 100%; /* Limita el ancho al contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    display: inline-block; /* Imagen en línea */
}

.image-block {
    max-width: 100%; /* Limita el ancho al contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Imagen como bloque */
    margin: 0 auto; /* Centra la imagen */
}

.image-side {
    max-width: 50%; /* Limita el ancho al 50% del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    float: right; /* Flota a la derecha */
    margin-left: 1rem; /* Espaciado a la izquierda */
}

/* Asegurar que las tablas no desborden el contenedor */
.ck-editor__editable table {
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.ck-editor__editable table th,
.ck-editor__editable table td {
    border: 1px solid #cccccc;
    word-wrap: break-word;
    padding: 0.5rem;
    text-align: left;
}

.ck-editor__editable table th {
    background-color: #4c5c96;
    color: #ffffff;
}

/* Estilos para la barra de herramientas */
.ck-toolbar {
    flex-wrap: wrap;
    justify-content: center;
    background-color: #f8f9fa !important;
    border: 1px solid #ddd !important;
}

.ck-toolbar .ck-button {
    color: #333 !important;
    background-color: transparent !important;
}

.ck-toolbar .ck-button:hover {
    background-color: #e9ecef !important;
}

.ck-toolbar .ck-on {
    background-color: #e9ecef !important;
    color: #007bff !important;
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 768px) {
    .ck-editor__editable {
        font-size: 14px;
        padding: 0.5rem;
        min-height: 150px;
    }

    .ck-editor__editable img {
        max-width: 100%; /* Asegura que las imágenes no desborden el contenedor */
        height: auto; /* Mantiene la proporción */
    }

    .ck-editor__editable table {
        display: block; /* Permite que las tablas sean desplazables */
        overflow-x: auto; /* Desplazamiento horizontal */
    }

    .ck-toolbar {
        flex-wrap: wrap !important;
    }

    .ck-toolbar > .ck-toolbar__items {
        flex-wrap: wrap !important;
    }

    .ck-toolbar .ck-toolbar__items .ck-button {
        padding: 6px !important;
    }

    .ck-icon {
        font-size: 18px;
    }

    .image-side {
        max-width: 100%; /* Ajusta el ancho al contenedor en pantallas pequeñas */
        float: none; /* Elimina el flotado */
        margin: 0 auto; /* Centra la imagen */
    }
}

@media (max-width: 480px) {
    .ck-editor__editable {
        font-size: 12px;
        padding: 0.25rem;
        min-height: 120px;
    }

    .ck-toolbar .ck-toolbar__items .ck-button {
        padding: 4px !important;
    }

    .ck-icon {
        font-size: 16px;
    }
}

/* Modo oscuro para el admin de Django */
.dark-mode .ck-editor__editable {
    background-color: #2d2d2d !important;
    color: #f8f9fa !important;
    border-color: #444 !important;
}

.dark-mode .ck-toolbar {
    background-color: #333 !important;
    border-color: #444 !important;
}

.dark-mode .ck-toolbar .ck-button {
    color: #f8f9fa !important;
}

.dark-mode .ck-toolbar .ck-button:hover {
    background-color: #444 !important;
}

.dark-mode .ck-toolbar .ck-on {
    background-color: #444 !important;
    color: #007bff !important;
}

/* Estilos para el contenido del editor generados por CKEditor */
.ck-content {
    /* Asegura que el contenedor del editor también sea flexible */
    max-width: 100%;
    overflow-x: hidden; /* Para evitar desbordamientos horizontales */
}

/* Reglas para las imágenes dentro del contenido de CKEditor */
.ck-content img {
    max-width: 100% !important; /* Asegura que no se exceda el ancho de su contenedor */
    height: auto !important;    /* Mantiene la proporción */
    display: block;             /* Elimina espacios extra */
    /*
    Si tus imágenes .image.fit tienen margin, padding, border-radius, etc.,
    añádelos aquí para que se vean iguales.
    */
    margin-left: auto; /* Para centrar la imagen */
    margin-right: auto; /* Para centrar la imagen */
}

/* Reglas para el contenedor <figure> que CKEditor usa para las imágenes */
.ck-content figure.image {
    max-width: 100%; /* Asegura que la figura también sea responsiva */
    height: auto;
    margin: 1em auto; /* Centra la figura y le da un margen vertical */
    text-align: center; /* Por si la imagen es más pequeña que el contenedor y quieres centrarla */
}

/* Si usas pies de foto */
.ck-content figcaption {
    text-align: center;
    font-style: italic;
    font-size: 0.9em;
    color: #aaaaaa; /* Ajusta a tu color */
    margin-top: 5px;
}

/* Si usas los estilos de imagen de CKEditor (inline, block, side) */
.ck-content .image-style-full,
.ck-content .image-style-block {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.ck-content .image-style-side {
    float: right; /* O left, según lo que quieras */
    width: 50%; /* O un valor fijo, ajusta según tu diseño */
    margin: 0.5em;
    max-width: 100%; /* Siempre responsivo */
    height: auto;
}

/* Media queries que ya tienes en ckeditor.css para el editor en sí */
@media (max-width: 768px) {
    .ck-content img,
    .ck-content figure.image,
    .ck-content .image-style-side {
        float: none !important; /* Elimina flotados en móvil */
        width: 100% !important; /* Haz que ocupen todo el ancho */
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Estilos para HTML embebido */
.raw-html-embed {
    margin: 1em 0;
    padding: 1em;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.raw-html-embed pre {
    margin: 0;
    white-space: pre-wrap;
    font-family: monospace;
}

/* Estilos para la previsualización de HTML embebido */
.ck-html-embed-preview {
    padding: 1em;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.05);
    margin-top: 0.5em;
}

/* Ajustes responsivos para HTML embebido */
@media (max-width: 768px) {
    .raw-html-embed {
        padding: 0.5em;
    }
    
    .ck-html-embed-preview {
        padding: 0.5em;
    }
}