/* =========================================================
   1. VARIABLES DE PALETA OBSCURA Y NEUTRA
   ========================================================= */
:root {
  --bg-main: #09090b !important;       /* Negro casi absoluto para el fondo general */
  --bg-card: #121215 !important;       /* Gris carbón muy oscuro para las publicaciones */
  --bg-input: #18181b !important;      /* Gris oscuro para campos de texto */
  --border-subtle: #27272a !important;  /* Borde tenue para separar elementos */
  --border-hover: #3f3f46 !important;   /* Borde al pasar el cursor */
  --text-primary: #f4f4f5 !important;   /* Blanco suave de alto contraste */
  --text-secondary: #a1a1aa !important; /* Gris medio para detalles e iconos */
  --accent-color: #52525b !important;   /* Gris neutro para elementos activos */
}

/* =========================================================
   2. FONDO GENERAL Y ESTRUCTURA DE COLUMNAS
   ========================================================= */
html body,
html body .ui,
html body .column,
html body .column-header,
html body .column-header__button,
html body .navigation-panel,
html body .drawer__inner,
html body .drawer__header,
html body .getting-started,
html body .tabs-bar,
html body .columns-area,
html body .scrollable {
  background: var(--bg-main) !important;
  background-color: var(--bg-main) !important;
  border-left: none !important;
  border-right: none !important;
  border-color: transparent !important;
}

/* Quitar líneas divisorias entre columnas de Mastodon */
html body .column::after,
html body .column-header::after,
html body .column-inline__header::after {
  display: none !important;
  border: none !important;
}

/* =========================================================
   3. PUBLICACIONES (TOOTS) EN CÁPSULAS INDEPENDIENTES
   ========================================================= */
/* Contenedor exterior de la cápsula */
html body .archive-timeline .status,
html body .column > .scrollable .status,
html body .activity-stream .status,
html body .focusable {
  background: var(--bg-card) !important;
  border-radius: 10px !important;
  border: 1px solid var(--border-subtle) !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease, background-color 0.2s ease !important;
}

/* Limpieza de fondos y líneas internas para unificar el bloque */
html body .status,
html body .status__content,
html body .detailed-status,
html body .detailed-status__action-bar,
html body .status__prepend,
html body .status__info,
html body .status__action-bar {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Efecto hover sobre las publicaciones */
html body .archive-timeline .status:hover,
html body .column > .scrollable .status:hover,
html body .focusable:hover {
  border-color: var(--border-hover) !important;
  background: #16161a !important;
}

/* =========================================================
   4. CAJAS DE TEXTO Y BÚSQUEDA
   ========================================================= */
html body .compose-form .autosuggest-textarea__textarea,
html body .search__input {
  background-color: var(--bg-input) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
}

html body .compose-form .autosuggest-textarea__textarea:focus,
html body .search__input:focus {
  border-color: var(--border-hover) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05) !important;
}

/* =========================================================
   5. BOTONES Y ACCIONES
   ========================================================= */
html body .button,
html body button.button,
html body .button.button-primary,
html body .compose-form__publish-button .button {
  background-color: #27272a !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

html body .button:hover,
html body button.button:hover,
html body .compose-form__publish-button .button:hover {
  background-color: #3f3f46 !important;
  border-color: #52525b !important;
}

/* =========================================================
   6. FOOTER Y MENCIONES INFERIORES
   ========================================================= */
html body .getting-started__footer,
html body .landing-page__footer,
html body .footer {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin: 16px 8px !important;
  text-align: center !important;
}

html body .getting-started__footer,
html body .getting-started__footer p,
html body .footer p {
  color: var(--text-secondary) !important;
  font-size: 0.825rem !important;
}

html body .getting-started__footer a,
html body .footer a {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}