/**
 * article-content.css
 *
 * Estilos para el contenido generado por TinyMCE.
 * Se usa en DOS lugares:
 *   1. Frontend público: envolver el HTML guardado en <div class="article-content">
 *   2. Dentro del editor: referenciado en content_css de tinymce-init.js
 *      para que el admin vea exactamente cómo se verá el artículo publicado.
 *
 * Ubicación sugerida: webroot/css/article-content.css
 */


/* ================================================================
   CONTENEDOR BASE
   En tu template frontend: <div class="article-content">...</div>
================================================================ */
.article-content {
    font-size    : 1rem;
    line-height  : 1.85;
    color        : #3f4254;   /* Color de texto por defecto de Keen */
    word-break   : break-word;
    overflow-wrap: break-word;
}

/* Dentro del editor de TinyMCE (body del iframe) */
/*body {
    font-family: inherit;
    font-size   : 1rem;
    line-height : 1.85;
    color       : #3f4254;
    padding     : 1rem 1.5rem;
    margin      : 0;
}*/


/* ================================================================
   TIPOGRAFÍA
================================================================ */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6
/*h1, h2, h3, h4, h5, h6*/ {
    margin-top   : 2rem;
    margin-bottom: 0.75rem;
    font-weight  : 600;
    line-height  : 1.3;
    color        : #181c32;
}

.article-content p,
p {
    /*margin-bottom: 1.25rem;*/
    overflow     : hidden; /* Contiene floats de imágenes dentro del párrafo */
}

.article-content a,
a {
    color          : #009ef7;  /* Azul primario de Keen */
    text-decoration: underline;
}

.article-content a:hover,
a:hover {
    color: #0095e8;
}

.article-content strong, strong { font-weight: 700; }
.article-content em, em         { font-style: italic; }

.article-content blockquote,
blockquote {
    border-left  : 4px solid #009ef7;
    background   : #f1faff;
    padding      : 1rem 1.5rem;
    margin       : 1.75rem 0;
    border-radius: 0 0.5rem 0.5rem 0;
    font-style   : italic;
    color        : #5e6278;
}

.article-content pre,
pre {
    background   : #1e1e2d;
    color        : #a9b7d0;
    padding      : 1.25rem 1.5rem;
    border-radius: 0.5rem;
    overflow-x   : auto;
    font-size    : 0.875rem;
    line-height  : 1.7;
    margin-bottom: 1.5rem;
}

.article-content ul,
.article-content ol,
ul, ol {
    padding-left : 1.75rem;
    margin-bottom: 1.25rem;
}

/*.article-content li,
li {
    margin-bottom: 0.4rem;
}*/


/* ================================================================
   IMÁGENES — POSICIONAMIENTO Y RESPONSIVO

   El admin elige la clase desde el selector de TinyMCE.
   En móvil todos los floats se cancelan automáticamente.
================================================================ */

/* Base: todas las imágenes son responsivas */
.article-content img {
    max-width    : 100%;
    height       : auto;
    border-radius: 0.5rem;
    display      : inline-block;
}

/* ── Flotante izquierda ── */
.article-content img.img-float-left,
img.img-float-left {
    float        : left;
    margin       : 0.25rem 1.75rem 1rem 0;
    max-width    : 45%;
    border-radius: 0.5rem;
}

/* ── Flotante derecha ── */
.article-content img.img-float-right,
img.img-float-right {
    float        : right;
    margin       : 0.25rem 0 1rem 1.75rem;
    max-width    : 45%;
    border-radius: 0.5rem;
}

/* ── Centrada ── */
.article-content img.img-center,
img.img-center {
    display      : block;
    float        : none;
    margin       : 1.5rem auto;
    max-width    : 80%;
}

/* ── Ancho completo ── */
.article-content img.img-full,
img.img-full {
    display      : block;
    float        : none;
    width        : 100%;
    max-width    : 100%;
    margin       : 1.5rem 0;
    border-radius: 0.5rem;
}

/* ── Imagen con pie de foto (caption de TinyMCE) ── */
.article-content figure
{
    margin      : 1.5rem 0;
    text-align  : center;
}

.article-content figure img,
figure img {
    display: block;
    margin : 0 auto;
}

.article-content figcaption,
figcaption {
    font-size  : 0.8rem;
    color      : #a1a5b7;
    margin-top : 0.5rem;
    font-style : italic;
}

/* ── Clearfix: limpiar floats después de la imagen ── */
.article-content p::after,
p::after {
    content: '';
    display: table;
    clear  : both;
}


/* ================================================================
   TABLAS RESPONSIVAS
================================================================ */
.article-content table,
table {
    width          : 100%;
    border-collapse: collapse;
    margin-bottom  : 1.5rem;
    font-size      : 0.9rem;
    display        : block;   /* Permite scroll horizontal en móvil */
    overflow-x     : auto;
}

.article-content table td,
.article-content table th,
td, th {
    border  : 1px solid #e4e6ef;
    padding : 0.65rem 1rem;
    text-align: left;
}

.article-content table th,
th {
    background : #f5f8fa;
    font-weight: 600;
    color      : #181c32;
}

.article-content table tr:nth-child(even),
tr:nth-child(even) {
    background: #fafafa;
}


/* ================================================================
   MEDIA EMBEDS (YouTube, Vimeo via TinyMCE media plugin)
================================================================ */
.article-content .media-wrapper,
.media-wrapper {
    position      : relative;
    padding-bottom: 56.25%; /* 16:9 */
    height        : 0;
    overflow      : hidden;
    margin-bottom : 1.5rem;
    border-radius : 0.5rem;
}

.article-content .media-wrapper iframe,
.media-wrapper iframe {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
    border  : 0;
}

/* Iframe suelto (sin wrapper) también responsivo */
.article-content iframe,
iframe {
    max-width: 100%;
}


/* ================================================================
   MÓVIL — Cancelar floats en pantallas pequeñas
   Los floats se apilan verticalmente y ocupan el ancho completo
================================================================ */
@media (max-width: 768px) {

    .article-content img.img-float-left,
    .article-content img.img-float-right,
    img.img-float-left,
    img.img-float-right {
        float        : none !important;
        display      : block;
        margin       : 1rem auto;
        max-width    : 100%;
    }

    .article-content img.img-center,
    img.img-center {
        max-width: 100%;
    }

    .article-content table,
    table {
        font-size: 0.8rem;
    }

}