/* =========================================================
   1. VARIABLES DE COLOR DE ALTO CONTRASTE
   ========================================================= */
:root {
  --purple-brand: #6366f1 !important;
  --purple-hover: #4f46e5 !important;
  --purple-light: #a78bfa !important;
  --bg-deep-space: #000000 !important; /* Negro absoluto */
  --bg-card: #14161f !important;
  --border-light: rgba(255, 255, 255, 0.08) !important;
}

/* =========================================================
   2. FONDOS GENERALES, COLUMNAS Y ELIMINACIÓN DE LÍNEAS LATERALES
   ========================================================= */
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-deep-space) !important;
  background-color: var(--bg-deep-space) !important;
  border-left: none !important;
  border-right: none !important;
  border-color: transparent !important;
}

/* Quitar divisores entre columnas */
html body .column::after,
html body .column-header::after,
html body .column-inline__header::after {
  display: none !important;
  border: none !important;
}

/* =========================================================
   3. PUBLICACIONES (TOOTS) CON ASPECTO DE CÁPSULA COMPLETA
   ========================================================= */
/* Quitar líneas internas y unificar el fondo de todo el Toot (arriba y abajo) */
html body .status,
html body .status__content,
html body .detailed-status,
html body .detailed-status__action-bar,
html body .focusable:focus .status,
html body .status__prepend, /* Texto superior: "En respuesta a...", "Recomendó", etc. */
html body .status__info {
  background: var(--bg-card) !important;
  background-color: var(--bg-card) !important;
  border: none !important;
}

/* Tarjeta/Cápsula entera que envuelve la publicación completa */
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: 12px !important;
  border: 1px solid var(--border-light) !important;
  margin-bottom: 12px !important;
  overflow: hidden !important; /* Mantiene bordes redondeados arriba y abajo */
  transition: transform 0.15s ease, border-color 0.15s ease !important;
}

/* Efecto al pasar el cursor sobre la cápsula */
html body .archive-timeline .status:hover,
html body .column > .scrollable .status:hover,
html body .focusable:hover {
  border-color: var(--purple-light) !important;
  transform: translateY(-1px);
}

/* =========================================================
   4. BOTONES PRINCIPALES (PUBLICAR, SEGUIR, GUARDAR)
   ========================================================= */
html body .button,
html body button.button,
html body .button.button-primary,
html body .compose-form__publish-button .button,
html body .admin-wrapper .sidebar ul li a.selected {
  background-color: var(--purple-brand) !important;
  background: var(--purple-brand) !important;
  border-color: var(--purple-brand) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Estado Hover con resplandor */
html body .button:hover,
html body button.button:hover,
html body .compose-form__publish-button .button:hover {
  background-color: var(--purple-hover) !important;
  background: var(--purple-hover) !important;
  border-color: var(--purple-hover) !important;
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.45) !important;
}

/* =========================================================
   5. ICONOS Y TEXTOS ACTIVOS (RESPLANDOR VIOLETA)
   ========================================================= */
html body .column-header__button.active,
html body .active .column-header__icon,
html body .column-link.active,
html body .column-link.active .fa,
html body .status__action-bar__button.active .fa,
html body .privacy-dropdown__option.active {
  color: var(--purple-light) !important;
  text-shadow: 0 0 8px rgba(167, 139, 250, 0.5) !important;
}

/* =========================================================
   6. CAJA DE REDACCIÓN Y BÚSQUEDA
   ========================================================= */
html body .compose-form .autosuggest-textarea__textarea,
html body .search__input {
  background-color: #11131c !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
}

html body .compose-form .autosuggest-textarea__textarea:focus,
html body .search__input:focus {
  border-color: var(--purple-brand) !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25) !important;
}

/* =========================================================
   7. TAMAÑO DEL LOGO Y MARCA DE MASTODON (AMPLIADO)
   ========================================================= */
/* Aumentar el tamaño del logo en todas las barras superiores y laterales */
html body .column-header__setting-btn .fa-mastodon,
html body .drawer__header a.brand svg,
html body .logo img,
html body .logo svg,
html body .navigation-panel .brand svg,
html body .navigation-panel .brand img,
html body a.brand svg {
  width: 64px !important;
  height: 64px !important;
  transform: scale(1.4) !important;
  transform-origin: center center !important;
}

/* Ajustar contenedores para permitir el tamaño mayor */
html body .drawer__header a.brand,
html body .navigation-bar .brand,
html body .navigation-panel .brand,
html body .logo,
html body a.brand {
  padding: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 70px !important;
}