:root {
  /* 🎨 TUS COLORES PRINCIPALES (Cámbialos aquí si quieres afinar) */
  --bacalao-bg: #000000;         /* Color de fondo principal (ej. negro puro) */
  --bacalao-panel: #16181c;      /* Color de las columnas/tarjetas de los posts */
  --bacalao-border: #2f3336;     /* Color de las líneas separadoras */
  --bacalao-primary: #1d9bf0;    /* Color de los botones "Bacalear" */
  --bacalao-text: #ffffff;       /* Color del texto principal */
  --bacalao-muted: #71767b;      /* Color del texto secundario/fechas */
}

/* 1. Fondo general de la aplicación */
body, .ui {
  background-color: var(--bacalao-bg) !important;
  color: var(--bacalao-text) !important;
}

/* 2. Columnas y Paneles (El timeline) */
.column > .scrollable, .getting-started, .compose-form, .column-header {
  background-color: var(--bacalao-panel) !important;
  border: 1px solid var(--bacalao-border) !important;
}

/* Quitar bordes gruesos de Mastodon entre posts y ponerlos finos */
.status {
  border-bottom: 1px solid var(--bacalao-border) !important;
}

/* 3. Botones (Como el de 'Publicar' / 'Bacalear') */
.button {
  background-color: var(--bacalao-primary) !important;
  color: #ffffff !important;
  border-radius: 12px !important; /* Bordes redondeados como en tu diseño */
  font-weight: bold !important;
}

.button:hover {
  filter: brightness(0.9);
}

/* 4. Color del texto y enlaces */
.status__content, .status__display-name strong {
  color: var(--bacalao-text) !important;
}

.status__content a, .account__display-name {
  color: var(--bacalao-primary) !important;
}

/* 5. Inyectar tu logo oficial de Gelesillo Bacalao */
.ui__header__logo {
  background-image: url('https://media.base44.com/images/public/user_6a0affe1a72b26665906cf51/4e1bc76cc_dbc26297-ceca-4bbf-a71a-0e595d5a5010.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  height: 44px !important; 
  width: 44px !important;
  border-radius: 12px;
}

/* Esconder el elefante por defecto de la interfaz de Mastodon */
.ui__header__logo svg {
  display: none !important;
}

/* Redondear avatares y limpiar la caja de publicación */
.account__avatar {
  border-radius: 50% !important;
}
.compose-form .autosuggest-textarea__textarea {
  background-color: transparent !important;
  color: var(--bacalao-text) !important;
}