/*
 * blog-content.css
 * Estilos compartidos entre el editor WYSIWYG (Quill) del panel de administración
 * y la vista pública del blog. El objetivo es que el contenido se vea EXACTAMENTE
 * igual mientras se edita y una vez publicado ("lo que ves es lo que obtienes").
 *
 * Se aplica tanto a `.blog-content` (frontend) como a `.ql-editor` (superficie de
 * edición de Quill), de modo que ambas superficies comparten la misma tipografía,
 * espaciados y soporte de clases generadas por Quill (alineación, sangría, tamaño…).
 */

.blog-content,
.ql-editor {
  color: #374151;
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1.75;
  word-wrap: break-word;
}

/* Encabezados */
.blog-content h1, .ql-editor h1,
.blog-content h2, .ql-editor h2,
.blog-content h3, .ql-editor h3,
.blog-content h4, .ql-editor h4,
.blog-content h5, .ql-editor h5,
.blog-content h6, .ql-editor h6 {
  color: #111827;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}
.blog-content h1, .ql-editor h1 { font-size: 2.25rem; }
.blog-content h2, .ql-editor h2 { font-size: 1.875rem; }
.blog-content h3, .ql-editor h3 { font-size: 1.5rem; }
.blog-content h4, .ql-editor h4 { font-size: 1.25rem; }
.blog-content h5, .ql-editor h5 { font-size: 1.125rem; }
.blog-content h6, .ql-editor h6 { font-size: 1rem; }

/* Párrafos */
.blog-content p, .ql-editor p {
  margin-bottom: 1.25em;
}

/* Enlaces */
.blog-content a, .ql-editor a {
  color: #2563eb;
  text-decoration: underline;
}
.blog-content a:hover, .ql-editor a:hover {
  color: #1d4ed8;
}

/* Listas */
.blog-content ul, .ql-editor ul,
.blog-content ol, .ql-editor ol {
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.blog-content ul, .ql-editor ul { list-style: disc; }
.blog-content ol, .ql-editor ol { list-style: decimal; }
.blog-content li, .ql-editor li { margin-bottom: 0.5em; }

/* Citas */
.blog-content blockquote, .ql-editor blockquote {
  border-left: 4px solid #3b82f6;
  padding: 0.25em 0 0.25em 1rem;
  font-style: italic;
  color: #4b5563;
  margin: 1.5em 0;
}

/* Imágenes */
.blog-content img, .ql-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1.5em 0;
}

/* Código en línea */
.blog-content code, .ql-editor code {
  background-color: #f3f4f6;
  padding: 0.125rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Bloques de código */
.blog-content pre, .ql-editor pre,
.blog-content pre.ql-syntax, .ql-editor pre.ql-syntax {
  background-color: #1f2937;
  color: #f9fafb;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1.5em 0;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.blog-content pre code, .ql-editor pre code {
  background-color: transparent;
  padding: 0;
  color: inherit;
}

/* Tablas */
.blog-content table, .ql-editor table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
}
.blog-content th, .ql-editor th,
.blog-content td, .ql-editor td {
  border: 1px solid #e5e7eb;
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.blog-content th, .ql-editor th {
  background-color: #f9fafb;
  font-weight: 600;
}

/* Línea horizontal */
.blog-content hr, .ql-editor hr {
  border: 0;
  border-top: 1px solid #e5e7eb;
  margin: 2em 0;
}

/* Video incrustado de Quill */
.blog-content .ql-video, .ql-editor .ql-video {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 0.5rem;
  margin: 1.5em 0;
}

/* ---- Clases generadas por Quill (para que el frontend respete el editor) ---- */

/* Alineación */
.blog-content .ql-align-center { text-align: center; }
.blog-content .ql-align-right  { text-align: right; }
.blog-content .ql-align-justify { text-align: justify; }

/* Sangría */
.blog-content .ql-indent-1 { padding-left: 3em; }
.blog-content .ql-indent-2 { padding-left: 6em; }
.blog-content .ql-indent-3 { padding-left: 9em; }
.blog-content .ql-indent-4 { padding-left: 12em; }
.blog-content .ql-indent-5 { padding-left: 15em; }
.blog-content .ql-indent-6 { padding-left: 18em; }
.blog-content .ql-indent-7 { padding-left: 21em; }
.blog-content .ql-indent-8 { padding-left: 24em; }

/* Tamaños de fuente de Quill */
.blog-content .ql-size-small { font-size: 0.75em; }
.blog-content .ql-size-large { font-size: 1.5em; }
.blog-content .ql-size-huge  { font-size: 2.5em; }