/*
 * Tema The Matrix para Mastodon (Fondo Suavizado)
 * Autor: Asistente Gemini
 */

/* 1. Variables de Color (MODIFICADAS) */
:root {
    --matrix-green: #00ff00;    /* Verde neón brillante */
    --dark-background: #191c20; /* Gris muy oscuro, parecido al tema nocturno de Mastodon */
    --dark-grey-text: #008800;  /* Verde oscuro para texto secundario */
    --softer-border: #004400;   /* Un verde más sutil para bordes */
}

/* 2. Fondo y Cuerpo Principal */
body {
    background-color: var(--dark-background) !important;
    color: var(--matrix-green) !important; /* Texto principal en verde */
}

/* 3. Columnas y Paneles (El "entorno" digital) */
.column,
.drawer,
.menu-bar,
.modal-root .modal-card {
    /* Mantengo el fondo ligeramente más oscuro que el body para dar profundidad */
    background-color: #121518 !important; 
    border-color: var(--softer-border) !important; /* Borde más sutil */
    color: var(--matrix-green) !important;
}

/* 4. Encabezados y Nombres de Usuario */
h1, h2, h3, h4, h5,
.display-name__html,
.column-header,
.account__display-name strong {
    color: var(--matrix-green) !important;
    text-shadow: 0 0 4px var(--matrix-green); /* Pequeño brillo */
}

/* 5. Límites y Separadores */
hr, .column-link {
    border-color: var(--softer-border) !important;
}

/* 6. Enlaces e Interacción (Hover) */
a,
.link,
.status__content a,
.column-link:hover,
.tabs__item--active .tabs__link {
    color: var(--matrix-green) !important;
    text-decoration: none;
}

/* 7. Botones y Elementos Interactivos */
button,
.button {
    background-color: transparent !important;
    border: 1px solid var(--matrix-green) !important;
    color: var(--matrix-green) !important;
    transition: background-color 0.3s, color 0.3s;
}

/* Efecto Hover para botones: Inversión de color */
button:hover,
.button:hover {
    background-color: var(--matrix-green) !important;
    color: var(--dark-background) !important; /* Usa el nuevo gris oscuro para el texto */
    box-shadow: 0 0 10px var(--matrix-green);
}

/* 8. Textos Secundarios (Fechas, menciones) */
.text--ellipsis,
.status__meta,
.status__display-name,
.search__input-wrapper input {
    color: var(--dark-grey-text) !important; /* Un verde más sutil para el detalle */
}

/* 9. Área de Composición (Escribir un Toot) */
textarea.compose-form__text {
    background-color: #121518 !important; /* Fondo del área de texto un poco más oscuro */
    border: 1px solid var(--matrix-green) !important;
    color: var(--matrix-green) !important;
    font-family: 'Consolas', 'Monospace', monospace; /* Fuente de código */
}

/* 10. Fuente Monospaced para una sensación de "código" (Opcional, si está disponible) */
body,
.status__content,
.compose-form__text {
    font-family: 'Consolas', 'Monospace', monospace;
    font-weight: 500;
}

/* 11. Estilo para el Toot (Status) */
.status, .detailed-status {
    border-left: 2px solid var(--matrix-green) !important;
    padding-left: 10px;
}