/*
 * Estilos base para Eurowiki.
 * - Inspirado en Wikipedia: tipografía legible, layout de dos columnas.
 * - Comentarios en español; sin frameworks.
 */

:root {
  --color-bg: #f6f6f6;
  --color-text: #202122;
  --color-muted: #54595d;
  --color-link: #0645ad;
  --color-border: #a2a9b1;
  /* Paleta adicional para login y admin moderno */
  --color-surface: #ffffff;
  --color-primary: #2563eb; /* azul vibrante */
  --color-primary-contrast: #ffffff;
  --color-shadow: rgba(31, 41, 55, 0.15);
  --radius: 12px;
}

/* ==========================
 * Overrides de Bootstrap para formularios (login)
 * ========================== */
/* Comentario: tamaños y radios según guía del proyecto (labels 14px, inputs 16px, radio 6–8px) */
body.auth .form-label {
  font-size: 14px;
}
body.auth .form-control {
  font-size: 16px; /* Comentario: tamaño de texto del input */
  border-radius: 8px; /* Comentario: bordes redondeados dentro del rango requerido */
  padding: 12px; /* Comentario: padding suficiente para comodidad */
}
body.auth .input-group-text {
  border-radius: 8px; /* Comentario: armonizar radios con los inputs */
}
/* Comentario: ajustar la card del login para mantener estilo consistente */
body.auth .card.rounded-3 {
  border-radius: 12px; /* Comentario: sombra y radios suaves según el diseño */
}
/* Comentario: botones principales más grandes y centrados */
body.auth .btn-primary.btn-lg {
  border-radius: 8px;
}

/* =============================
 * Fallback de utilidades para login sin Bootstrap
 * Objetivo: garantizar un diseño limpio y responsivo del formulario aunque el CSS de CDN esté bloqueado por CSP en producción.
 * Todas las reglas se limitan al contexto body.auth para no interferir con otras vistas.
 * ============================= */

/* Grid básico */
body.auth .row { display: flex; flex-wrap: wrap; margin-right: -8px; margin-left: -8px; }
body.auth .row > [class*='col-'] { padding-right: 8px; padding-left: 8px; }
body.auth .justify-content-center { justify-content: center; }
/* Columna md-6: 50% a partir de 768px */
body.auth .col-md-6 { width: 100%; flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
  body.auth .col-md-6 { flex: 0 0 50%; max-width: 50%; }
}
/* Columna lg-5: ~41.666% a partir de 992px */
body.auth .col-lg-5 { width: 100%; flex: 0 0 100%; max-width: 100%; }
@media (min-width: 992px) {
  body.auth .col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
}

/* Espaciados y utilidades comunes */
body.auth .p-4 { padding: 1.5rem !important; }
body.auth .mb-3 { margin-bottom: 1rem !important; }
body.auth .mt-3 { margin-top: 1rem !important; }
body.auth .d-flex { display: flex !important; }
body.auth .align-items-center { align-items: center !important; }
body.auth .rounded-3 { border-radius: 12px !important; }
body.auth .shadow-sm { box-shadow: 0 2px 8px rgba(31, 41, 55, 0.08) !important; }

/* Tarjeta y cuerpo */
body.auth .card { border: 1px solid var(--color-border); background: #fff; }
body.auth .card-body { padding: 16px; }

/* Grupo de entrada (input-group) */
body.auth .input-group { display: flex; align-items: stretch; width: 100%; }
body.auth .input-group .form-control { flex: 1 1 auto; }
body.auth .input-group-text { display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--color-border); background: #f8f9fa; color: var(--color-muted); }

/* Botones */
body.auth .btn { display: inline-block; font-weight: 600; text-align: center; border: 1px solid transparent; padding: 10px 16px; font-size: 16px; line-height: 1.5; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; }
body.auth .btn-lg { padding: 12px 18px; font-size: 18px; }
body.auth .btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-contrast); }
body.auth .btn-primary:hover { filter: brightness(0.95); }
body.auth .btn-outline-secondary { background: #fff; border-color: var(--color-border); color: var(--color-text); }
body.auth .btn-outline-secondary:hover { background: #f0f3f7; }

/* Alertas */
body.auth .alert { border: 1px solid var(--color-border); border-radius: 8px; padding: 12px; }
body.auth .alert-danger { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }

/* Texto auxiliar */
body.auth .text-muted { color: var(--color-muted) !important; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
}

/* Contenedor principal con ancho máximo legible */
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* Cabecera: fila con logotipo y buscador en la misma línea */
/* Cabecera principal: fondo blanco, borde inferior y fija (sticky) para mantener menú visible siempre */
.header { background: #fff; border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 1030; box-shadow: 0 2px 8px rgba(31, 41, 55, 0.08); }
.header_row { display: flex; align-items: center; gap: 16px; }
/* Cabecera en vistas Twig (.site_header): fija y a ancho completo con contenedor interno en flex */
.site_header { background: #fff; border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 1030; box-shadow: 0 2px 8px rgba(31, 41, 55, 0.08); width: 100%; }
.site_header .header_inner { display: flex; align-items: center; gap: 16px; padding: 8px 16px; }
.site_header .header_inner .search_form { flex: 1; }
/* Comentario: El logotipo original mide 1500x414. Se escala respetando la relación de aspecto. */
.logo_link { display: inline-flex; align-items: center; }
.logo_img { width: 150px; height: auto; /* Mantiene la relación de aspecto */ }
/* El formulario de búsqueda ocupa el espacio restante a la derecha del logotipo */
.header_row .search_form { flex: 1; }
/* En el header, el input debe ocupar todo el espacio disponible entre el logo y las acciones */
.header_row .search_form input { flex: 1 1 auto; min-width: 0; }
/* Ocultar el label del header para mantener un layout en una sola línea (el label se muestra en formularios dentro del contenido) */
.header_row .search_form label { display: none; }
/* El enlace contextual se mantiene a la derecha sin partirse en varias líneas */
.search_form .login_link { white-space: nowrap; }
.search_form { display: flex; gap: 8px; align-items: center; }
.search_form input { padding: 8px; border: 1px solid var(--color-border); border-radius: 4px; }
.search_form button { padding: 8px 12px; }

/* Responsivo (iOS/Android): ocultar logotipo en móviles para ganar espacio en la cabecera */
@media (max-width: 576px) {
  /* Comentario: solo ocultamos el logotipo en pantallas pequeñas para mejorar usabilidad */
  .header .logo_link,
  .site_header .logo_link {
    display: none; /* Ocultamos el enlace del logotipo */
  }
}

/* Responsivo (iOS/Android): compactar el botón de búsqueda en el header y mostrar solo 'B' */
@media (max-width: 576px) {
  /* Comentario: en el header, el botón se reduce para que el menú quede completo en móvil */
  .header_row .search_form button,
  .site_header .header_inner .search_form button {
    font-size: 0; /* Comentario: ocultar el texto visualmente sin quitarlo del DOM */
    width: 40px; min-width: 40px; /* Comentario: ancho compacto del botón */
    padding: 8px; /* Comentario: padding reducido y simétrico */
    border: 1px solid var(--color-border); /* Comentario: borde suave para integrarse con el input */
    border-radius: 8px; /* Comentario: radios consistentes con las reglas de formularios */
  }
  .header_row .search_form button::after,
  .site_header .header_inner .search_form button::after {
    content: 'B'; /* Comentario: mostrar solo la letra 'B' en móvil */
    font-size: 16px; font-weight: 600; line-height: 1; /* Comentario: legible y centrado */
  }
}

/* --- Overrides específicos para el formulario dentro de las cards --- */
/* Evitar que el formulario del contenido herede el display:flex del header */
.card form.search_form { display: block; }
/* Fila de búsqueda: todo en una línea y la consulta ocupa el espacio restante */
.card form.search_form .search_row { display:flex; flex-wrap:nowrap; width:100%; gap:12px; align-items:center; box-sizing:border-box; }
/* El grupo de consulta crece para ocupar el espacio restante */
.card form.search_form .search_group { flex: 1 1 auto; min-width: 220px; }
/* El grupo de orden es fijo y pequeño */
.card form.search_form .order_group { flex: 0 0 180px; }
/* Las acciones (botón) no crecen */
.card form.search_form .search_actions_wrap { flex: 0 0 auto; }
/* El input ocupa 100% dentro de su grupo */
.card form.search_form .search_group .input_text { width: 100%; }
/* El select ocupa 100% dentro de su grupo */
.card form.search_form .order_group .input_select { width: 100%; }
/* El botón mantiene ancho automático y no se estira */
.card form.search_form .button_primary { width: auto; padding: 8px 16px; border-radius: 6px; position: relative; top: 8px; }

/*
 * Layout base: contenido a ancho completo en portada.
 */
.main { display: block; padding: 24px 0; }
.content { background: #fff; border: 1px solid var(--color-border); padding: 16px; }

h1, h2, h3 { color: var(--color-text); }
/* Escala tipográfica de títulos para jerarquía consistente en todo el sitio
   - Objetivo: que los títulos de sección (h2) destaquen sobre los títulos de artículo (h3)
   - Evitar que h1/h3 se vean más grandes que h2 en páginas de categoría y artículo */
h1 { font-size: 28px; line-height: 1.2; /* Comentario: tamaño principal para títulos de página (categoría/artículo) */ }
h2 { font-size: 24px; line-height: 1.3; /* Comentario: títulos de sección (Destacados, Últimos, Categorías) */ }
h3 { font-size: 20px; line-height: 1.4; /* Comentario: títulos de ítems (artículos dentro de secciones) */ }
/* Ajuste del estilo display-4 (Bootstrap) para no sobredimensionar títulos de artículo */
.display-4 { font-size: 28px; line-height: 1.2; /* Comentario: armonizar con h1 para que no supere a h2 */ }
/* Responsivo: reducir ligeramente en pantallas pequeñas */
@media (max-width: 700px) {
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  h3 { font-size: 18px; }
  .display-4 { font-size: 24px; }
}
a { color: var(--color-link); }

.footer { padding: 24px 0; text-align: center; color: var(--color-muted); }

/* Portada: grid superior y categorías debajo a ancho completo */
body.home .container { max-width: 100%; padding: 0 24px; }
body.home .content { border: none; }
.home_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.home_categories { margin-top: 24px; background: #fff; border: 1px solid var(--color-border); padding: 16px; }
.card { background: #fff; border: 1px solid var(--color-border); padding: 16px; }
.card h2 { margin-top: 0; }

/* Categorías en columnas para aprovechar ancho */
.categories_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.categories_grid h3 { margin-top: 0; }
.categories_grid ul { margin: 8px 0 0; padding-left: 18px; }

/* Estilos específicos para categorías privadas en la página de inicio */
body.home .home_categories .categories_grid > .private-content {
  background-color: #fef2f2; /* Comentario: fondo rojo claro */
  border-left: 4px solid #ef4444; /* Comentario: borde izquierdo rojo para destacar */
  padding: 12px; /* Comentario: padding para separar el contenido del borde */
  border-radius: 6px; /* Comentario: bordes redondeados */
  border: 1px solid #fca5a5; /* Comentario: borde completo más suave */
  display: block; /* Comentario: asegurar que el fondo se aplique a todo el bloque */
}

/* Estilo focalizado: categoría privada con ID 55 */
body.home .home_categories .categories_grid [data-cat-id="55"] {
  background-color: #fef2f2 !important; /* Comentario: aplicar fondo rojo claro específicamente a ID 55 */
  border-left: 4px solid #ef4444 !important; /* Comentario: borde izquierdo rojo para ID 55 */
  border: 1px solid #fca5a5 !important; /* Comentario: borde completo más suave para ID 55 */
  border-radius: 6px !important; /* Comentario: bordes redondeados */
}

/* Comentario: aplicar estilo al enlace del título de la categoría ID 55 sin borde interior */
body.home .home_categories .categories_grid [data-cat-id="55"] h3 a {
  display: block; /* Comentario: ocupar todo el ancho del bloque */
  background-color: transparent !important; /* Comentario: fondo transparente para evitar duplicar */
  border: none !important; /* Comentario: sin borde interior */
  padding: 8px 12px; /* Comentario: padding interno */
  border-radius: 0; /* Comentario: sin bordes redondeados en el enlace */
}

/* Comentario: hover del enlace del título para ID 55 */
body.home .home_categories .categories_grid [data-cat-id="55"] h3 a:hover {
  background-color: #fee2e2; /* Comentario: fondo ligeramente más oscuro al hacer hover */
}

body.home .home_categories .categories_grid > .private-content:hover {
  background-color: #fee2e2; /* Comentario: fondo ligeramente más oscuro al hacer hover */
}

/* Comentario: aplicar estilo directamente al enlace del título de la categoría privada sin borde interior */
.home_categories .categories_grid .private-content h3 a {
  display: block; /* Comentario: el enlace ocupa todo el ancho del bloque */
  background-color: transparent; /* Comentario: fondo transparente para evitar duplicar el fondo */
  border: none; /* Comentario: sin borde interior */
  padding: 8px 12px; /* Comentario: padding interno para el enlace */
  border-radius: 0; /* Comentario: sin bordes redondeados en el enlace */
}

/* Comentario: hover del enlace con tono ligeramente más oscuro */
.home_categories .categories_grid .private-content h3 a:hover {
  background-color: #fee2e2; /* Comentario: fondo ligeramente más oscuro al hacer hover */
}

/* Estilos específicos para artículos privados en la página de inicio */
.card article.private-content {
  background-color: #fef2f2; /* Comentario: fondo rojo claro */
  border-left: 4px solid #ef4444; /* Comentario: borde izquierdo rojo para destacar */
  padding: 12px; /* Comentario: padding para separar el contenido del borde */
  border-radius: 6px; /* Comentario: bordes redondeados */
  border: 1px solid #fca5a5; /* Comentario: borde completo más suave */
  margin-bottom: 16px; /* Comentario: separación entre artículos */
}

.card article.private-content:hover {
  background-color: #fee2e2; /* Comentario: fondo ligeramente más oscuro al hacer hover */
}

/* Estilos específicos para elementos li privados en últimos artículos */
.card li.private-content {
  background-color: #fef2f2; /* Comentario: fondo rojo claro */
  border-left: 4px solid #ef4444; /* Comentario: borde izquierdo rojo para destacar */
  padding: 8px 12px; /* Comentario: padding para separar el contenido del borde */
  border-radius: 6px; /* Comentario: bordes redondeados */
  border: 1px solid #fca5a5; /* Comentario: borde completo más suave */
  margin-bottom: 8px; /* Comentario: separación entre elementos */
  list-style: none; /* Comentario: quitar viñetas para elementos privados */
}

.card li.private-content:hover {
  background-color: #fee2e2; /* Comentario: fondo ligeramente más oscuro al hacer hover */
}

/* Responsivo: colapsa a 2 y 1 columnas en pantallas más estrechas */
@media (max-width: 1100px) {
  .home_grid { grid-template-columns: 1fr; }
  .categories_grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .categories_grid { grid-template-columns: 1fr; }
}

/* Estilos para la paginación moderna */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background-color: #fff;
  color: var(--color-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.pagination a:hover {
  border-color: var(--color-primary);
  background-color: #f0f3f7;
  color: var(--color-primary);
}

.pagination .active {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: 700;
  cursor: default;
}

.pagination .disabled {
  color: var(--color-muted);
  background-color: var(--color-bg);
  border-color: var(--color-border);
  opacity: 0.7;
  cursor: not-allowed;
}

.pagination .ellipsis {
  border: none;
  background: none;
  box-shadow: none;
  padding: 0 4px;
}

/* Bloques de sección modernos para distinguir claramente cambios de secciones */
.section_block {
  /* Comentario: tarjeta grande con sombra suave para separar secciones */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(31, 41, 55, 0.06);
  padding: 16px;
  margin-bottom: 24px;
}

.section_title {
  /* Comentario: título con línea divisoria a la derecha para enfatizar el cambio de sección */
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px 0;
  font-size: 22px;
}
.section_title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
  opacity: 0.6;
}

.section_meta { color: var(--color-muted); font-size: 13px; }

/* Cabecera de categoría con borde inferior para separarla de las secciones */
.category_header { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.category_description { color: var(--color-muted); margin: 8px 0 0 0; }

/* Tarjetas con efecto hover para categorías y artículos */
.category_card, .article_card, .article_row {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.category_card:hover, .article_card:hover, .article_row:hover {
  border-color: var(--color-primary);
  box-shadow: 0 8px 20px rgba(31, 41, 55, 0.08);
  transform: translateY(-2px);
}

/* Reglas base para las tarjetas (sin inline styles) */
.category_card, .article_card, .article_row {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px;
}
.article_row h3 { margin: 0 0 4px 0; }

/* Grid de artículos para destacados */
.articles_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1100px) { .articles_grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .articles_grid { grid-template-columns: 1fr; } }

/* Badge para conteos y metadatos cortos */
.badge_count {
  display: inline-block;
  font-size: 12px;
  color: var(--color-muted);
  background: #f0f3f7;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 2px 8px;
  margin-left: 6px;
}

/* ==========================
 * Estilos específicos de login
 * ========================== */
/* Centrado vertical y horizontal del contenedor de login */
body.auth .main { padding: 0; }
body.auth .content { border: none; background: transparent; }
body.auth .center_wrapper {
  min-height: calc(100vh - 72px - 88px); /* alto de viewport menos header y footer aprox */
  display: grid;
  place-items: center; /* centro absoluto */
}

/* Tarjeta moderna con sombra e iconos */
.login_card {
  width: 100%;
  max-width: 440px; /* tamaño cómodo en desktop */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px var(--color-shadow);
  padding: 24px;
}
.login_header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.login_icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: var(--color-primary-contrast);
  font-weight: 700;
}
.login_title { margin: 0; font-size: 22px; }

/* Estados de error informativos */
.alert { padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; }
.alert_error { background: #fee2e2; color: #7f1d1d; border: 1px solid #fecaca; }

/* Mensajes flash en el área de administración - sin afectar layout */
body.admin .alert {
  position: relative; /* Cambio para evitar el desplazamiento */
  top: 80px; /* debajo del header */
  right: 20px;
  max-width: 400px;
  margin-bottom: 0; /* eliminar margin que afecta al layout */
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Formulario con iconos y campos grandes */
.login_form .form_group { margin-bottom: 12px; }
.input_wrap { display: flex; align-items: center; gap: 8px; border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 12px; background: #fff; }
.input_wrap .field_icon { color: var(--color-muted); }
.input_wrap input { flex: 1; border: none; outline: none; font-size: 16px; }

/* Botón principal atractivo */
.form_actions { margin-top: 8px; }
.button_primary { width: 100%; padding: 12px; border: none; border-radius: 10px; background: var(--color-primary); color: var(--color-primary-contrast); font-size: 16px; cursor: pointer; }
.button_primary:hover { filter: brightness(1.05); }

/* Pie de ayuda del login */
.login_help { margin-top: 12px; color: var(--color-muted); font-size: 14px; text-align: center; }

/* ==========================
 * Layout administrativo (sidebar + main) inspirado en paneles modernos
 * ========================== */
/* El admin debe aprovechar el 100% del ancho de la ventana */
body.admin .container { max-width: 100%; padding: 0 24px; }
/* El contenedor base no debe añadir bordes ni relleno extra */
body.admin .content { padding: 0; border: none; background: transparent; }
/* Grid de 2 columnas: menú a la izquierda, contenido a la derecha */
.admin_layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0; /* sin separación, se define separador en sidebar */
  background: transparent; /* sin recuadro global */
  min-height: calc(100vh - 72px); /* alto total menos header; no restamos footer para que el sidebar llegue al bottom */
}
/* Sidebar vertical con scroll propio y separador visual a la derecha */
.admin_sidebar {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 16px 12px;
  height: calc(100vh - 72px); /* altura del viewport menos la cabecera, llega al fondo */
  position: sticky; /* se mantiene visible al hacer scroll */
  top: 72px; /* compensación aproximada de la altura del header */
  overflow-y: hidden; /* el scroll irá en la navegación, el bloque de usuario queda fijo abajo */
  display: flex; flex-direction: column; /* estructura vertical */
}
/* La navegación ocupa el alto disponible y tiene su propio scroll */
.admin_sidebar nav { flex: 1 1 auto; overflow-y: auto; padding-bottom: 64px; /* espacio extra para que el último item no quede tapado por el bloque de usuario */ }
/* Navegación vertical tipo panel moderno: enlaces como bloques clicables */
.admin_sidebar nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.admin_sidebar nav a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--color-text);
  text-decoration: none;
}
.admin_sidebar nav a:hover { background: #f0f3f7; }
.admin_sidebar nav a.active { background: #e8eef9; color: #1f3a8a; }

/* Zona principal del panel con relleno cómodo y tarjetas opcionales */
.admin_main { padding: 20px; background: transparent; }

/* Bloque inferior del sidebar: usuario con menú desplegable */
.admin_sidebar_user { position: sticky; bottom: 0; left: 0; right: 0; background: var(--color-surface); border-top: 1px solid var(--color-border); padding: 12px; margin-top: 8px; }
/* Menú de usuario usando <details>/<summary> para accesibilidad */
.user_menu { position: relative; }
.user_menu_toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.user_avatar { width: 32px; height: 32px; border-radius: 50%; background: #e8eef9; color: #1f3a8a; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.user_identity { display: flex; flex-direction: column; }
.user_identity .user_name { font-weight: 600; color: var(--color-text); }
.user_identity .user_role { font-size: 12px; color: var(--color-muted); }
/* Panel flotante del menú */
.user_menu_panel { position: absolute; left: 0; right: 0; bottom: 48px; display: none; background: #fff; border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.08); padding: 8px; }
.user_menu[open] .user_menu_panel { display: block; }
.user_menu_panel a { display: block; padding: 10px 12px; border-radius: 6px; color: var(--color-text); text-decoration: none; }
.user_menu_panel a:hover { background: #f0f3f7; }

/* Responsivo para el panel: en pantallas estrechas el menú se sitúa arriba */
@media (max-width: 900px) {
  .admin_layout { grid-template-columns: 1fr; }
  .admin_sidebar {
    height: auto;
    position: relative;
    top: 0; /* sin pegajoso en móviles */
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
}

/* ==========================
 * Mejoras del panel admin: iconos, tarjetas, botones, tablas
 * ========================== */
/* Iconos del menú lateral en SVG: tamaño uniforme y color heredado (currentColor) */
.nav_icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px; }
.nav_icon svg { width: 20px; height: 20px; fill: currentColor; }
.nav_text { vertical-align: middle; }

/* Grid de tarjetas del panel y tarjetas con sombra suave y bordes redondeados */
.cards_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.activity_grid { margin-top: 2rem; }
.admin_card { border-radius: var(--radius); box-shadow: 0 8px 24px var(--color-shadow); }

/* Botones globales del admin: consistentes y accesibles con foco visible */
:root { --color-focus: #1d4ed8; }
.button { display: inline-block; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); text-decoration: none; cursor: pointer; }
.button:focus-visible, .admin_sidebar nav a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.button.button_primary { border-color: transparent; background: var(--color-primary); color: var(--color-primary-contrast); }
.button.button_primary:hover { filter: brightness(1.05); }
.button.button_secondary { background: #eef2f7; color: #1f2937; }
.button.button_secondary:hover { filter: brightness(0.98); }
.button.button_danger { background: #dc2626; color: #ffffff; border-color: #b91c1c; }
.button.button_danger:hover { filter: brightness(0.98); }

/* Contenedor superior de acciones: botón crear a la derecha y ancho normal */
.admin_actions_top { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.admin_create_button { width: auto; }

/* Contenedor de botones de acción en la tabla: en línea y misma altura */
.action_buttons { display: inline-flex; gap: 8px; align-items: stretch; }
.action_buttons .button, .action_buttons button { height: 38px; display: inline-flex; align-items: center; }
.action_buttons form { display: inline-flex; }

/* Modal de confirmación moderno (estilo limpio tipo Bootstrap/Material) */
.modal[hidden] { display: none !important; }
/* Modal: respetar comportamiento de Bootstrap para evitar overlays permanentes que bloqueen la interacción */
.modal { /* sin overrides: Bootstrap gestiona display/posición/z-index */ }
.modal_backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.modal_dialog { position: relative; width: 100%; max-width: 420px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,0.2); overflow: hidden; }
.modal_header { padding: 16px; border-bottom: 1px solid var(--color-border); }
.modal_body { padding: 16px; }
.modal_footer { padding: 16px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--color-border); }

/* Centrado específico del modal de confirmación de Artículos (sin afectar otros modales)
 * Seguridad: sin dependencias externas, compatible con CSP.
 * Accesibilidad: el contenedor usa flex para centrar en viewport.
 */
#confirm_modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1055; }
#confirm_modal .modal_backdrop { position: fixed; inset: 0; z-index: 0; }
#confirm_modal .modal_dialog { z-index: 1; margin: 0; }

/* Centrado específico del modal de confirmación en Admin (Usuarios y Categorías)
 * Seguridad: sin overrides globales de .modal para no romper Bootstrap.
 * Accesibilidad: se centra el diálogo en viewport usando flex.
 */
#modal_confirm_delete {
  position: fixed; /* overlay ocupa todo el viewport */
  inset: 0; /* top/right/bottom/left: 0 */
  display: flex; /* centrar con flexbox */
  align-items: center; /* centro vertical */
  justify-content: center; /* centro horizontal */
  z-index: 1055; /* encima del contenido, respetando stack Bootstrap */
}
#modal_confirm_delete .modal_backdrop {
  position: fixed; /* cubre todo el viewport */
  inset: 0; /* cobertura completa */
  z-index: 0; /* detrás del diálogo */
}
#modal_confirm_delete .modal_dialog {
  z-index: 1; /* por encima del backdrop */
  margin: 0; /* sin margen para un centrado perfecto */
}
@media (max-width: 480px) {
  #modal_confirm_delete .modal_dialog {
    width: calc(100% - 24px); /* padding lateral para evitar tocar bordes en móviles */
  }
}


/* Tablas del admin: legibles, responsivas y con zebra */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); text-align: left; }
.table thead th { background: #edf2f7; color: #1f2937; }
.table tbody tr:hover { background: #f8fafc; }

/* ==========================
 * Formularios modernos (admin) siguiendo guías
 * ========================== */
.admin_form { display: grid; gap: 14px; }
.form_group { display: grid; gap: 8px; }
.form_group label { font-size: 14px; color: var(--color-text); }
.admin_form input[type="text"],
.admin_form input[type="email"],
.admin_form input[type="password"],
.admin_form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px; /* bordes redondeados 6-8px */
  font-size: 16px; /* input 16px */
  background: #fff;
}
.form_help { font-size: 13px; color: var(--color-muted); margin-top: -2px; }

/* ==========================================================
   Bloque de estilos: Filtros horizontales en Artículos
   Objetivo: mostrar los filtros de izquierda a derecha de forma responsiva.
   Reglas de estilo: labels encima, inputs con border-radius 6-8px, espaciado vertical 12–16px.
   Seguridad: sin dependencias externas; compatible con CSP estricto.
   ========================================================== */

/* Contenedor del formulario de filtros: usa flex para alinear en fila */
.filters_form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
/* Grupo base de campo dentro del formulario de filtros */
.filters_form .form_group { display: flex; flex-direction: column; min-width: 160px; }
/* Estilo del campo de búsqueda: crece más para ocupar espacio */
.filters_form .filter_search { flex: 1 1 320px; }
/* Selects pequeños: tamaño equilibrado en desktop */
.filters_form .filter_select_sm { flex: 0 1 220px; }
/* Acciones (botón buscar) */
.filters_form .filters_actions { flex: 0 0 auto; }
/* Inputs y selects coherentes con guía de formularios */
.filters_form .form-control, .filters_form .form-select { border-radius: 8px; padding: 8px 10px; }
/* Espaciado vertical entre label e input */
.filters_form .form-label { margin-bottom: 6px; font-size: 14px; }
/* Responsive: en pantallas pequeñas, los grupos ocupan toda la fila para legibilidad */
@media (max-width: 768px) {
  .filters_form { gap: 10px; }
  .filters_form .form_group { flex: 1 1 100%; }
  .filters_form .filters_actions { flex: 0 0 100%; }
}
/* Variant admin_form: asegura consistencia con estilos admin existentes */
.admin_form .btn.btn-outline-primary { padding: 10px 16px; font-weight: 600; }

/* Componente switch accesible para booleanos */
.switch { display: inline-flex; align-items: center; gap: 10px; position: relative; }
.switch_input { appearance: none; width: 44px; height: 24px; border-radius: 999px; position: relative; outline: none; cursor: pointer; background: #e5e7eb; border: 1px solid #cbd5e1; transition: background .2s ease; }
.switch_input:checked { background: var(--color-primary); border-color: var(--color-primary); }
.switch_input:disabled { cursor: not-allowed; opacity: .6; }
.switch_slider { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transform: translateX(2px); transition: transform .2s ease; }
.switch_input:checked + .switch_slider { transform: translateX(22px); }

/* Pequeñas mejoras de accesibilidad al foco */
.admin_form input:focus-visible,
.admin_form select:focus-visible,
.switch_input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* ==========================
 * Modo oscuro opcional respetando prefers-color-scheme
 * ========================== */
/* Tema claro forzado en el panel de administración; sin modo oscuro.
 * Esto evita fondos negros tras el login y mejora el contraste de iconos sobre fondo blanco. */
body.admin {
  --color-bg: #ffffff; /* fondo general blanco */
  --color-text: #202122; /* texto principal */
  --color-muted: #54595d; /* texto secundario */
  --color-link: #0645ad; /* enlaces */
  --color-border: #a2a9b1; /* bordes */
  --color-surface: #ffffff; /* tarjetas/sidebars */
  --color-shadow: rgba(31, 41, 55, 0.15); /* sombras suaves */
  --color-primary: #2563eb; /* azul en claro */
  --color-primary-contrast: #ffffff; /* contraste botones */
  --color-focus: #1d4ed8; /* foco accesible */
}

/* Ajustes de superficies y estados en tema claro del admin */
body.admin .content, body.admin .home_categories, body.admin .card { background: var(--color-surface); border-color: var(--color-border); }
body.admin .admin_sidebar { background: var(--color-surface); border-color: var(--color-border); }
/* Mejora de legibilidad de iconos y enlaces sobre fondo blanco */
.admin_sidebar .nav_icon svg { opacity: 0.9; } /* ligera intensidad para mejor visibilidad */
body.admin .admin_sidebar nav a:hover { background: #f0f3f7; }
body.admin .admin_sidebar nav a.active { background: #e8eef9; color: #1f3a8a; }
body.admin .input_wrap { background: var(--color-surface); border-color: var(--color-border); }
body.admin .input_wrap input { color: var(--color-text); }
body.admin .table thead th { background: #edf2f7; color: #1f2937; }
body.admin .table tbody tr:hover { background: #f8fafc; }
body.admin .button { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
body.admin .button.button_secondary { background: #eef2f7; color: #1f2937; }
body.admin .button.button_primary { background: var(--color-primary); color: #ffffff; }
body.admin .button.button_danger { background: #dc2626; border-color: #b91c1c; color: #ffffff; }

/* ==========================
 * Estados de éxito para alertas
 * ========================== */
.alert_success { background: #dcfce7; color: #14532d; border: 1px solid #bbf7d0; }

/* ==========================
 * Formularios modernos (reglas del proyecto)
 * - Labels encima de inputs
 * - Inputs con bordes redondeados 6-8px y padding suficiente
 * - Espaciado vertical 12–16px entre campos
 * - Contraseña con botón mostrar/ocultar
 * - Campos booleanos como switch/checkbox
 * ========================== */
.form_group { margin-bottom: 14px; }
.form_group label { display: block; font-size: 14px; color: var(--color-text); margin-bottom: 6px; }
.input_text, .input_password, .input_select { width: 100%; padding: 12px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 16px; background: #fff; color: var(--color-text); }
.input_text[readonly], .input_select[disabled], .input_password[readonly] { background: #f3f4f6; color: #6b7280; cursor: not-allowed; }

/* Contenedor para campo de contraseña con botón de mostrar/ocultar */
.password_wrap { position: relative; }
.toggle_password_btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: none; padding: 6px; border-radius: 6px; cursor: pointer; color: var(--color-muted); }
.toggle_password_btn:hover { color: var(--color-text); }
.toggle_password_btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.toggle_password_icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }

/* Switch accesible para booleanos (ej. Activo) */
.switch_row { display: flex; align-items: center; gap: 10px; }
.switch_control { appearance: none; width: 44px; height: 24px; border: 1px solid var(--color-border); border-radius: 12px; background: #e5e7eb; position: relative; cursor: pointer; }
.switch_control::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: left 0.18s ease; }
.switch_control:checked { background: #4ade80; border-color: #16a34a; }
.switch_control:checked::after { left: 22px; }
.switch_control:disabled { opacity: 0.6; cursor: not-allowed; }

/* Acciones del formulario: botones grandes y espaciados */
.form_actions { display: flex; gap: 10px; align-items: center; }
.form_actions .button { font-size: 16px; padding: 12px 16px; }

/* Ayuda/nota bajo campos */
.helper_text { font-size: 13px; color: var(--color-muted); margin-top: 6px; }

/* Responsivo: mantener inputs a ancho completo en móviles */
@media (max-width: 600px) {
  .form_actions { flex-direction: column; align-items: stretch; }
  .form_actions .button { width: 100%; }
}

/* ==========================
 * Árbol de categorías en administración
 * ========================== */
/* Indentación para mostrar jerarquía de categorías */
.category_row_level_0 { 
  background: #f8fafc !important;
  border-left: 4px solid #3b82f6 !important;
}
.category_row_level_0 td:first-child { 
  padding-left: 8px; 
}
.category_row_level_1 { 
  background: #f1f5f9 !important;
  border-left: 4px solid #64748b !important;
}
.category_row_level_1 td:first-child { 
  padding-left: 8px; 
}
.category_row_level_1 .category_name { 
  padding-left: 20px; 
}
.category_row_level_2 { 
  background: #f8fafc !important;
  border-left: 4px solid #94a3b8 !important;
}
.category_row_level_2 td:first-child { 
  padding-left: 8px; 
}
.category_row_level_2 .category_name { 
  padding-left: 40px; 
}
.category_row_level_3 { 
  background: #f1f5f9 !important;
  border-left: 4px solid #cbd5e1 !important;
}
.category_row_level_3 td:first-child { 
  padding-left: 8px; 
}
.category_row_level_3 .category_name { 
  padding-left: 60px; 
}
.category_row_level_4 { 
  background: #f8fafc !important;
  border-left: 4px solid #e2e8f0 !important;
}
.category_row_level_4 td:first-child { 
  padding-left: 8px; 
}
.category_row_level_4 .category_name { 
  padding-left: 80px; 
}
.category_row_level_5 { 
  background: #f1f5f9 !important;
  border-left: 4px solid #f1f5f9 !important;
}
.category_row_level_5 td:first-child { 
  padding-left: 8px; 
}
.category_row_level_5 .category_name { 
  padding-left: 100px; 
}

/* Indicador visual de jerarquía */
.category_row_level_1 .category_name::before { 
  content: "└─ "; 
  color: #64748b; 
  font-weight: bold;
}
.category_row_level_2 .category_name::before { 
  content: "  └─ "; 
  color: #94a3b8; 
  font-weight: bold;
}
.category_row_level_3 .category_name::before { 
  content: "    └─ "; 
  color: #cbd5e1; 
  font-weight: bold;
}
.category_row_level_4 .category_name::before { 
  content: "      └─ "; 
  color: #e2e8f0; 
  font-weight: bold;
}
.category_row_level_5 .category_name::before { 
  content: "        └─ "; 
  color: #f1f5f9; 
  font-weight: bold;
}

/* Badges de estado para categorías */
.status_badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status_active {
  background: #dcfce7;
  color: #14532d;
  border: 1px solid #bbf7d0;
}

.status_inactive {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.status_private {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.status_public {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

/* ==========================
 * Formularios modernos siguiendo reglas del proyecto
 * ========================== */
/* Card contenedor para formularios */
.form_card {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

/* Espaciado entre grupos de campos */
.form_modern .form_group {
  margin-bottom: 1rem;
}

/* Labels encima de inputs según reglas */
.form_label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #374151;
  line-height: 1.4;
}

/* Inputs con bordes redondeados y padding suficiente */
.form_input,
.form_textarea,
.form_select {
  width: 100%;
  font-size: 16px;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
}

/* Estados de focus para inputs */
.form_input:focus,
.form_textarea:focus,
.form_select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Textarea específico */
.form_textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.5;
}

/* Switch/checkbox moderno según reglas */
.form_switch_group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.form_switch {
  width: 44px;
  height: 24px;
  appearance: none;
  background: #d1d5db;
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  border: none;
  flex-shrink: 0;
}

.form_switch:checked {
  background: #3b82f6;
}

.form_switch::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.form_switch:checked::before {
  transform: translateX(20px);
}

.form_switch_label {
  font-size: 16px;
  cursor: pointer;
  margin: 0;
  color: #374151;
  font-weight: 500;
}

/* Texto de ayuda bajo campos */
.form_help {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-top: 0.25rem;
  line-height: 1.4;
}

/* Información adicional en formularios */
.form_info {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 1rem;
  margin: 1.5rem 0;
}

.form_info p {
  margin: 0.25rem 0;
  font-size: 14px;
  color: #374151;
}

.form_info strong {
  color: #111827;
}

/* Acciones del formulario */
.form_actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  justify-content: flex-start;
  align-items: center;
}

/* Botones grandes según reglas */
.button_large {
  padding: 0.875rem 1.5rem;
  font-size: 16px;
  font-weight: 500;
}

/* Alertas de error */
.alert_error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.alert_error ul {
  margin: 0;
  padding-left: 1.5rem;
}

.alert_error li {
  margin: 0.25rem 0;
}

/* Responsividad para formularios */
@media (max-width: 768px) {
  .form_card {
    margin: 0 1rem;
    padding: 1.5rem;
  }
  
  .form_actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form_actions .button {
    width: 100%;
    justify-content: center;
  }
  
  .form_switch_group {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

@media (max-width: 480px) {
  .form_card {
    margin: 0 0.5rem;
    padding: 1rem;
  }
  
  .form_input,
  .form_textarea,
  .form_select {
    font-size: 16px; /* Evitar zoom en iOS */
  }
}

/* ==========================
 * Editor Markdown (artículos)
 * - Estilos externos para cumplir CSP (style-src 'self')
 * - Área de escritura amplia y responsiva
 * - Tipografía monoespaciada para el editor
 * ========================== */

/* Contenedor del editor: borde suave y radios redondeados */
.editor-container {
  /* Borde y sombra ligera para distinguir el área del editor */
  border: 1px solid #dee2e6; /* Comentario: color gris claro consistente con Bootstrap */
  border-radius: 8px; /* Comentario: bordes redondeados según reglas del proyecto */
  overflow: hidden; /* Comentario: asegura que los elementos internos no sobresalgan */
  background: #fff; /* Comentario: fondo blanco para máxima legibilidad */
  width: 100%; /* Comentario: ocupar todo el ancho disponible del contenedor padre */
}

/* Barra de herramientas superior del editor */
.editor-toolbar {
  background: #f8f9fa; /* Comentario: gris muy claro para contraste suave */
  border-bottom: 1px solid #dee2e6; /* Comentario: separación visual de la toolbar */
  padding: 0.5rem; /* Comentario: espacio suficiente para botones */
}

/* Área principal del editor y la vista previa en disposición horizontal */
.editor-content {
  display: flex; /* Comentario: distribución horizontal de editor y preview */
  min-height: 600px; /* Comentario: aumentar altura mínima del área de escritura */
}

/* Asegurar que el panel de edición ocupe el 100% cuando la preview esté oculta */
#editor-pane {
  flex: 1; /* Comentario: el contenedor del editor ocupa todo el ancho disponible */
  display: flex; /* Comentario: permite que el textarea hijo expanda dentro */
}
#editor-pane .editor-pane {
  flex: 1; /* Comentario: el textarea se expande dentro del contenedor flex */
  width: 100%; /* Comentario: ocupar el ancho completo del contenedor */
}

/* Panel de edición (textarea) */
.editor-pane {
  flex: 1; /* Comentario: ocupar el mismo espacio que la preview */
  border: none; /* Comentario: eliminar bordes del textarea dentro del contenedor estilizado */
  resize: none; /* Comentario: gestionar altura por JS para consistencia visual */
  padding: 1rem; /* Comentario: espacio interno para comodidad de escritura */
  font-family: 'Monaco','Menlo','Ubuntu Mono', monospace; /* Comentario: tipografía monoespaciada para código */
  font-size: 14px; /* Comentario: tamaño cómodo de lectura */
  line-height: 1.5; /* Comentario: mejorar legibilidad del texto */
  width: 100%; /* Comentario: ocupar el ancho disponible del contenedor */
  min-height: 600px; /* Comentario: altura mínima inicial amplia */
}

/* Panel de previsualización */
.preview-pane {
  flex: 1; /* Comentario: ocupar la mitad del ancho disponible */
  padding: 1rem; /* Comentario: espacio interno para contenido renderizado */
  background: #fff; /* Comentario: mantener fondo blanco en preview */
  border-left: 1px solid #dee2e6; /* Comentario: separación visual respecto al editor */
  overflow-y: auto; /* Comentario: scroll vertical cuando el contenido es largo */
  display: none; /* Comentario: ocultar por defecto en escritorio para que el editor ocupe todo el ancho */
}
/* Mostrar preview cuando esté activa (JS/Bootstrap) */
.preview-pane.show,
.preview-pane.active {
  display: block; /* Comentario: visible cuando esté activada */
}

/* Botonera de la toolbar: pequeños grupos con separación consistente */
.btn-toolbar .btn-group {
  margin-right: 0.5rem; /* Comentario: separación horizontal entre grupos de botones */
}

/* Contenido de la vista previa y artículos: márgenes y estilos básicos para Markdown */
.preview-content h1,
.preview-content h2,
.preview-content h3,
.preview-content h4,
.preview-content h5,
.preview-content h6,
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  margin-top: 1.5rem; /* Comentario: separación superior para títulos */
  margin-bottom: 0.5rem; /* Comentario: separación inferior para títulos */
}

.preview-content p,
.article-content p {
  margin-bottom: 1rem; /* Comentario: separación entre párrafos */
}

.preview-content blockquote,
.article-content blockquote {
  border-left: 4px solid #dee2e6; /* Comentario: línea lateral para citas */
  padding-left: 1rem; /* Comentario: espacio interno en citas */
  margin: 1rem 0; /* Comentario: separación vertical de citas */
  color: #6c757d; /* Comentario: tono gris para citas */
}

.preview-content code {
  background: #f8f9fa; /* Comentario: fondo para fragmentos de código inline */
  padding: 0.2rem 0.4rem; /* Comentario: espacio interno del código inline */
  border-radius: 4px; /* Comentario: bordes redondeados para chips de código */
  font-size: 0.875em; /* Comentario: tamaño ligeramente reducido respecto al texto */
}

.preview-content pre {
  background: #f8f9fa; /* Comentario: fondo para bloques preformateados */
  padding: 1rem; /* Comentario: espacio interno de bloques de código */
  border-radius: 8px; /* Comentario: bordes redondeados según guía */
  overflow-x: auto; /* Comentario: scroll horizontal para líneas largas */
}

/* Comentario: aplicar los mismos estilos de código a la vista pública de artículos */
.article-content code {
  background: #f8f9fa; /* Comentario: fondo para fragmentos de código inline en artículos */
  padding: 0.2rem 0.4rem; /* Comentario: espacio interno del código inline */
  border-radius: 4px; /* Comentario: bordes redondeados */
  font-size: 0.875em; /* Comentario: tamaño ligeramente reducido */
}

.article-content pre {
  background: #f8f9fa; /* Comentario: fondo para bloques de código en artículos */
  padding: 1rem; /* Comentario: espacio interno de bloques de código */
  border-radius: 8px; /* Comentario: bordes redondeados según guía */
  overflow-x: auto; /* Comentario: scroll horizontal para líneas largas */
}

/* Líneas horizontales: estilo coherente en editor y vista pública */
.preview-content hr,
.article-content hr {
  border: none; /* Comentario: quitamos estilo por defecto del navegador */
  height: 1px; /* Comentario: grosor de la línea */
  background-color: #dee2e6; /* Comentario: color gris suave para separar secciones */
  margin: 1.25rem 0; /* Comentario: espaciado vertical adecuado */
}

/* Imágenes dentro del contenido de la preview: bloque, responsivas y sin flotado */
.preview-content img {
  display: block; /* Comentario: mostrar como bloque para que queden debajo del texto anterior */
  max-width: 100%; /* Comentario: limitar al ancho del contenedor para responsividad */
  height: auto; /* Comentario: respetar la relación de aspecto del logotipo/imagen */
  margin: 1rem auto; /* Comentario: separar verticalmente y centrar horizontalmente */
  float: none; /* Comentario: evitar que floten y provoquen texto a los lados */
  clear: both; /* Comentario: impedir que elementos flotantes anteriores afecten su posición */
}

/* Imágenes dentro del contenido de artículos públicos: bloque, responsivas y sin flotado */
.article-content img {
  display: block; /* Comentario: mostrar como bloque para que queden debajo del texto anterior */
  max-width: 100%; /* Comentario: limitar al ancho del contenedor para responsividad */
  height: auto; /* Comentario: respetar la relación de aspecto de la imagen */
  margin: 1rem auto; /* Comentario: separar verticalmente y centrar horizontalmente */
  float: none; /* Comentario: evitar que floten y provoquen texto a los lados */
  clear: both; /* Comentario: impedir que elementos flotantes anteriores afecten su posición */
}

/* Comentario: estilo por defecto para iframes en preview (YouTube) */
.preview-content iframe {
  display: block; /* Comentario: tratar como bloque para poder centrar con márgenes */
  max-width: 100%; /* Comentario: nunca exceder el ancho del contenedor */
  margin: 1rem auto; /* Comentario: centrar horizontalmente */
  border: none; /* Comentario: quitar borde del iframe */
}

/* Comentario: vídeos responsivos dentro de artículos públicos (YouTube). Evitar que sobresalgan en móvil */
.article-content iframe {
  display: block; /* Comentario: bloque para controlar ancho y altura */
  max-width: 100%; /* Comentario: limitar al ancho del contenedor */
  width: 100%; /* Comentario: ocupar todo el ancho disponible */
  aspect-ratio: 16 / 9; /* Comentario: mantener proporción 16:9 típica de YouTube */
  height: auto; /* Comentario: calcular altura a partir del ancho y el aspect-ratio */
  border: 0; /* Comentario: sin borde para estética limpia */
}

/* Comentario: contenedor con proporción fija para vídeos responsivos en artículos */
.article-content .ratio-16x9 {
  position: relative; /* Comentario: base para posicionamiento del iframe interno */
  width: 100%; /* Comentario: ocupar todo el ancho disponible */
  aspect-ratio: 16 / 9; /* Comentario: mantener proporción 16:9 */
}
.article-content .ratio-16x9 iframe {
  position: absolute; /* Comentario: expandir el iframe dentro del contenedor */
  top: 0; left: 0; right: 0; bottom: 0; /* Comentario: cubrir todo el contenedor */
  width: 100%; height: 100%; /* Comentario: ajustar a la proporción */
}

/* Comentario: contenedor con proporción fija para vídeos responsivos */
.preview-content .ratio-16x9 {
  position: relative; /* Comentario: base para posicionamiento del iframe interno */
  width: 100%; /* Comentario: ocupar todo el ancho disponible */
  aspect-ratio: 16 / 9; /* Comentario: mantener proporción 16:9 */
}
.preview-content .ratio-16x9 iframe {
  position: absolute; /* Comentario: expandir el iframe dentro del contenedor */
  top: 0; left: 0; right: 0; bottom: 0; /* Comentario: cubrir todo el contenedor */
  width: 100%; height: 100%; /* Comentario: ajustar a la proporción */
}

/* Comentario: utilidad para centrar texto dentro de un contenedor (preview/editor) */
.preview-content .text-center {
  text-align: center; /* Comentario: centrar el texto */
}

/* Tabs del editor para móviles: ocultas por defecto, visibles en pantallas pequeñas */
.editor-tabs {
  display: none; /* Comentario: ocultar tabs en escritorio */
}

/* Área de arrastrar y soltar para subida de imágenes */
.drag-drop-area {
  border: 2px dashed #dee2e6; /* Comentario: borde discontínuo para indicar dropzone */
  border-radius: 8px; /* Comentario: bordes redondeados acordes al diseño */
  padding: 2rem; /* Comentario: área cómoda para interacción */
  text-align: center; /* Comentario: centrar contenido dentro de la dropzone */
  background: #f8f9fa; /* Comentario: fondo claro para contraste */
  transition: all 0.3s ease; /* Comentario: suavizar cambios de estado */
  cursor: pointer; /* Comentario: indicar interactividad */
}

.drag-drop-area:hover,
.drag-drop-area.dragover {
  border-color: #0d6efd; /* Comentario: color primario al pasar o arrastrar */
  background: #e7f3ff; /* Comentario: retroalimentación visual en interacción */
}

/* Input de archivo accesible: oculto visualmente pero funcional en todos los navegadores
   Comentario: evitar display:none porque algunos navegadores bloquean abrir el diálogo vía .click() cuando el input está completamente oculto. */
.sr-only-file {
  position: absolute !important; /* Comentario: sacarlo del flujo visual */
  left: -10000px !important; /* Comentario: desplazar fuera del viewport */
  width: 1px !important; /* Comentario: dimensiones mínimas */
  height: 1px !important; /* Comentario: dimensiones mínimas */
  overflow: hidden !important; /* Comentario: ocultar contenido */
  clip: rect(0 0 0 0) !important; /* Comentario: recorte total */
  white-space: nowrap !important; /* Comentario: prevenir que ocupe espacio */
}

/* Responsividad del editor: en móviles, editor y preview en vertical */
@media (max-width: 768px) {
  .editor-content {
    flex-direction: column; /* Comentario: stack vertical en pantallas pequeñas */
    min-height: 480px; /* Comentario: reducir altura mínima en móvil para mejor ajuste */
  }
  .preview-pane {
    border-left: none; /* Comentario: eliminar borde lateral en móvil */
    border-top: 1px solid #dee2e6; /* Comentario: añadir borde superior para separación */
    display: none; /* Comentario: ocultar preview por defecto en móvil, accesible por tabs */
  }
  .editor-tabs {
    display: flex; /* Comentario: mostrar tabs en móvil para alternar editor/preview */
  }
  .editor-tabs .nav-link {
    border-radius: 0; /* Comentario: tabs planas para integrarse con el contenedor */
  }
}

/* ==========================
 * Corrección para evitar conflictos entre Bootstrap y CSS Grid del admin
 * ========================== */
/* Neutralizar estilos de Bootstrap que interfieren con el layout del admin */
.admin_layout .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

.admin_layout .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.admin_layout .col-lg-8,
.admin_layout .col-lg-4,
.admin_layout [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Asegurar que admin_main mantenga su comportamiento correcto */
.admin_main {
  overflow-x: hidden; /* Evitar scroll horizontal */
  width: 100%;
}

/* ==========================
 * Estilos para contenido privado
 * ========================== */
/* Comentario: marcar visualmente el contenido privado con fondo rojo claro (persistente) */
.private-content {
  background-color: #fef2f2; /* Comentario: fondo rojo muy claro SIEMPRE visible en contenido privado */
  border-left: 4px solid #ef4444; /* Comentario: borde izquierdo rojo para destacar */
  padding: 8px 12px; /* Comentario: separar el contenido del borde */
  border-radius: 4px; /* Comentario: bordes ligeramente redondeados */
  position: relative; /* Comentario: posicionamiento para el indicador */
}

/* Indicador de contenido privado */
.private-indicator {
  display: inline-block;
  background-color: #ef4444; /* Comentario: badge rojo para indicar privacidad */
  color: white; /* Comentario: texto blanco para contraste */
  font-size: 11px; /* Comentario: tamaño pequeño */
  font-weight: 600; /* Comentario: texto en negrita */
  padding: 2px 6px; /* Comentario: padding compacto */
  border-radius: 3px; /* Comentario: bordes redondeados */
  text-transform: uppercase; /* Comentario: texto en mayúsculas */
  margin-left: 8px; /* Comentario: separación del contenido */
  vertical-align: middle; /* Comentario: alineación vertical */
}

/* Estilos específicos para artículos privados en listas */
.article_card.private-content,
.article_row.private-content {
  border-color: #fca5a5; /* Comentario: borde más suave para cards */
}

/* Estilos específicos para categorías privadas */
.category_card.private-content {
  background-color: #fef2f2; /* Comentario: fondo rojo claro persistente en tarjetas de categorías privadas */
  border-color: #fca5a5; /* Comentario: borde más suave para cards de categorías */
  border-left: 4px solid #ef4444; /* Comentario: borde izquierdo rojo para destacar */
}

/* Hover para contenido privado */
.private-content:hover {
  background-color: #fee2e2; /* Comentario: fondo ligeramente más oscuro al hacer hover */
}

/* ==========================
 * Título en resultados de búsqueda (privados)
 * ========================== */
/* Comentario: aplicar sombreado rojo al nombre del artículo cuando el resultado es privado, igual que en home */
.results_list .result_item.private-content h3 a {
  display: inline-block !important; /* Comentario: permite aplicar fondo y padding alrededor del texto del título */
  background-color: #fef2f2 !important; /* Comentario: fondo rojo claro para el título */
  border-left: 4px solid #ef4444 !important; /* Comentario: borde izquierdo rojo consistente */
  padding: 4px 8px !important; /* Comentario: separación interna para mejor legibilidad */
  border-radius: 4px !important; /* Comentario: bordes ligeramente redondeados para integrarse con el card */
  color: #dc2626 !important; /* Comentario: texto rojo para mayor visibilidad */
}

/* Comentario: estado hover ligeramente más oscuro para consistencia */
.results_list .result_item.private-content h3 a:hover {
  background-color: #fee2e2 !important;
  color: #b91c1c !important; /* Comentario: texto rojo más oscuro en hover */
}