:root{--ghost-accent-color:#ef4444;}

/* Feature image de posts: limitar tamano para que no ocupe demasiado espacio */
.gh-article-image {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.gh-article-image img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 8px;
}
@media (max-width: 700px) {
  .gh-article-image img {
    height: 260px;
  }
}
.gh-article-author-image {
  display: none;
}
.gh-form {
  background-color: transparent;
  border: 1px solid rgba(255,255,255,0.25);
}
.gh-form-input {
  background: transparent;
  color: #fafafa;
}
.gh-button {
  background-color: var(--ghost-accent-color, #ef4444);
  border: 1px solid var(--ghost-accent-color, #ef4444);
  color: #fff;
}

/* ==== Variables globales para modo oscuro forzado ==== */
:root {
    --color-primary-text: #ffffff !important;
    --color-secondary-text: #ffffff !important;
    --color-white: #000000 !important;
    --color-border: #000000 !important;
    --color-divider: #000000 !important;
    --color-background: #000000 !important;
    --color-background-secondary: #000000 !important;
}

/* ==== Fondo general negro ==== */
body, html {
    background-color: #000000 !important;
    color: var(--color-primary-text) !important;
}

/* ==== Quitar líneas de gh-section-title ==== */
.gh-section-title {
    align-items: center !important;
    display: flex !important;
    border: none !important;
    background: none !important;
}

/* ==== Ajuste del contenido de los posts ==== */
.post-card, .post-content, .article {
    background-color: transparent !important;
    color: var(--color-primary-text) !important;
}

/* ==== Texto de extractos en blanco ==== */
.gh-article-excerpt {
    color: #ffffff !important;
}

/* ==== Bordes y líneas negras ==== */
hr, .divider, .post-meta, .post-footer, .site-footer, .footer, .more-issues:before, .more-issues:after {
    border-color: #000000 !important;
    background-color: #000000 !important;
}

/* ==== Encabezados y títulos ==== */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-primary-text) !important;
}

/* ==== Links blancos sin azul ==== */
a, a:visited {
    color: #ffffff !important;
    text-decoration: none !important;
}
a:hover {
    color: #cccccc !important;
}

/* ==== Botones del header y subscribe ==== */
button, .button, input[type="submit"], .subscribe-button {
    background-color: #ef4444 !important;
    border: 1px solid #ef4444 !important;
    color: #ffffff !important;
}
button:hover, .button:hover, input[type="submit"]:hover, .subscribe-button:hover {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
}

/* ==== Íconos de búsqueda, login y otros ==== */
.icon, .search-icon, .menu-icon {
    background-color: #000000 !important;
    border: none !important;
}

/* ==== Formularios ==== */
input, textarea {
    background-color: #000000 !important;
    border: 1px solid #000000 !important;
    color: #ffffff !important;
}
input::placeholder, textarea::placeholder {
    color: #999999 !important;
}

/* ==== Sidebar y secciones ==== */
.sidebar, .widget, .about, .topics {
    background-color: transparent !important;
    border: none !important;
    color: var(--color-primary-text) !important;
}

/* ==== Footer ==== */
.site-footer, .footer {
    background-color: #000000 !important;
    color: var(--color-secondary-text) !important;
    border-top: 1px solid #000000 !important;
}

  .gh-section-title {
    align-items: center !important;
    display: none !important;
    border: none !important;
    background: none !important;
}

.gh-article-footer {
    border-top: 0px solid var(--color-light-gray); 
    margin-top: 8rem;
    padding-top: 3.2rem;
}

  code {
    font-family: var(--font-mono);
    font-size: 15px;
    background-color: #000 !important; /* fondo negro */
    color: #fff !important;            /* texto blanco */
    padding: 3px 6px;
    border-radius: 4px;
}

pre code {
    display: block;
    background-color: #000 !important; /* fondo negro */
    color: #fff !important;            /* texto blanco */
    padding: 12px;
    overflow-x: auto;
    border-radius: 6px;
}