/* static/css/new_detail.css */

.noticia-detalle {
    background-color: #252525; /* Un fondo ligeramente más claro que el principal */
    padding: 2rem;
    border-radius: 8px;
}

.noticia-detalle .noticia-date {
    color: #adb5bd; /* Un gris claro para la fecha */
}

.noticia-body {
    line-height: 1.8;
    font-size: 1.1rem;
    color: #e9ecef; /* Un color de texto principal más suave */
}

/* --- Estilos para el contenido de CKEditor --- */

.noticia-body h1,
.noticia-body h2,
.noticia-body h3,
.noticia-body h4,
.noticia-body h5,
.noticia-body h6 {
    margin-top: 1.6em;
    margin-bottom: 0.8em;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
}

.noticia-body p {
    margin-bottom: 1.2em;
}

.noticia-body a {
    color: #58a6ff; /* Un azul más brillante para los enlaces */
    text-decoration: underline;
    transition: color 0.2s ease-in-out;
}

.noticia-body a:hover {
    color: #80bfff;
}

.noticia-body ul,
.noticia-body ol {
    padding-left: 2em;
    margin-bottom: 1.2em;
}

.noticia-body blockquote {
    border-left: 4px solid #58a6ff;
    padding: 1em 1.5em;
    margin: 1.5em 0;
    background-color: #2c2c2c;
    border-radius: 0 4px 4px 0;
    font-style: italic;
    color: #ced4da;
}

.noticia-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5em 0;
}

.noticia-body pre {
    background-color: #1c1c1c;
    color: #f8f8f2;
    padding: 1em;
    border-radius: 4px;
    overflow-x: auto;
    font-family: 'Courier New', Courier, monospace;
}

/* Estilos para contenido incrustado (YouTube, etc.) */
.noticia-body iframe {
    max-width: 100%;
    margin: 1.5em 0;
    border-radius: 8px;
}

/* Estilos para tweets incrustados */
.noticia-body blockquote.twitter-tweet {
    background: #1e1e1e;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    border: 1px solid #333;
    margin: 1.5em auto !important;
    color: #ddd;
    font-size: 0.95rem;
    max-width: 550px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* El script de Twitter reemplaza el blockquote por un div.twitter-tweet-rendered + iframe interno. Centramos ese wrapper también. */
.noticia-body .twitter-tweet-rendered {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 550px;
}

.noticia-body .twitter-tweet-rendered iframe {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.noticia-body blockquote.twitter-tweet a {
    color: #58a6ff;
    text-decoration: none;
}

.noticia-body blockquote.twitter-tweet a:hover {
    text-decoration: underline;
}

/* --- Responsividad general para embeds multimedia --- */
.contenido-richtext iframe[src*="youtube.com"],
.contenido-richtext iframe[src*="youtu.be"],
.contenido-richtext iframe[src*="player.vimeo.com"],
.contenido-richtext iframe[src*="dailymotion.com"] {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    background: #000;
    border: none;
}

@supports not (aspect-ratio: 16 / 9) {
  .contenido-richtext iframe[src*="youtube.com"],
  .contenido-richtext iframe[src*="youtu.be"],
  .contenido-richtext iframe[src*="player.vimeo.com"],
  .contenido-richtext iframe[src*="dailymotion.com"] {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
  }
  .contenido-richtext iframe[src*="youtube.com"],
  .contenido-richtext iframe[src*="youtu.be"],
  .contenido-richtext iframe[src*="player.vimeo.com"],
  .contenido-richtext iframe[src*="dailymotion.com"] {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
  }
}

/* Mejora de layout para tweets en móviles */
@media (max-width: 576px) {
  .noticia-body blockquote.twitter-tweet {
      padding: 0.75rem 0.9rem;
      font-size: 0.9rem;
            max-width: 100%;
  }
}