/* ============================================================================
   Nocturno — tema oscuro moderno para MyBB
   Override que se carga DESPUÉS de global.css + css3.css del tema Master.
   Reestiliza todos los componentes del Default a una paleta oscura limpia.
   ========================================================================== */

:root {
	--bg:        #0d0e12;   /* fondo base de la página            */
	--bg-deep:   #0a0b0e;   /* fondo aún más oscuro (body)        */
	--surface:   #15171d;   /* tarjetas / contenedores            */
	--surface-2: #1b1e26;   /* filas, cabeceras secundarias       */
	--surface-3: #232733;   /* hover / elevación                  */
	--border:    #2a2f3a;   /* bordes sutiles                     */
	--border-2:  #353b49;   /* bordes destacados                  */
	--text:      #d7dae1;   /* texto principal                    */
	--text-soft: #aab0bd;   /* texto secundario                   */
	--text-mut:  #7c8493;   /* texto atenuado                     */
	--accent:    #e83e8c;   /* magenta — acento principal         */
	--accent-2:  #ff5fa2;   /* magenta claro — hover              */
	--accent-dk: #b32869;   /* magenta oscuro — degradados        */
	--crimson:   #c0263f;   /* crimson — realces puntuales        */
	--header:    #7a0d1c;   /* burdeos — header de categoría      */
	--header-dk: #4d0a14;   /* burdeos profundo — degradado       */
	--font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Base ---------------------------------------------------------------- */
body {
	background: var(--bg-deep) !important;
	color: var(--text) !important;
	font-family: var(--font) !important;
}

#container {
	background: var(--bg) !important;
	color: var(--text) !important;
	font-family: var(--font) !important;
	border-left: 1px solid var(--border);
	border-right: 1px solid var(--border);
	box-shadow: 0 0 40px rgba(0,0,0,.6);
}

table { color: var(--text) !important; font-family: var(--font) !important; }

a:link, a:visited { color: var(--accent) !important; text-decoration: none; }
a:hover, a:active { color: var(--accent-2) !important; text-decoration: none; }

hr { background: var(--border) !important; color: var(--border) !important; }

/* ---- Cabecera / logo ----------------------------------------------------- */
#logo {
	background: linear-gradient(180deg, #16181f 0%, #101218 100%) !important;
	border-bottom: 2px solid var(--accent) !important;
	padding: 14px 0;
}
#logo img { width: 340px; height: auto; max-width: 100%; vertical-align: middle; }

/* ---- Barra superior de usuario (#panel) ---------------------------------- */
#panel .upper {
	background: linear-gradient(180deg, #1a1d25 0%, #111319 100%) !important;
	color: var(--text-soft) !important;
	border-top: 1px solid var(--border-2) !important;
	border-bottom: 1px solid #000 !important;
}
#panel .upper a:link, #panel .upper a:visited,
#panel .upper a:hover, #panel .upper a:active { color: var(--text) !important; }

#panel .lower {
	background: var(--surface) !important;
	color: var(--text-mut) !important;
	border-top: 1px solid var(--border) !important;
	border-bottom: 1px solid var(--border) !important;
}
#panel .lower a:link, #panel .lower a:visited,
#panel .lower a:hover, #panel .lower a:active { color: var(--text-soft) !important; }

/* ---- Contenido ----------------------------------------------------------- */
#content { background: var(--bg) !important; }

/* ---- Tablas / bordes ----------------------------------------------------- */
.tborder {
	background: var(--border) !important;
	border: 1px solid var(--border) !important;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* Cabecera de tabla (título de sección) — burdeos elegante */
.thead {
	background: linear-gradient(180deg, var(--header) 0%, var(--header-dk) 100%) !important;
	color: #fff !important;
	border-top: 1px solid #9a2030 !important;
	border-bottom: 1px solid #000 !important;
	text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.thead a:link, .thead a:visited, .thead a:hover, .thead a:active { color: #fff !important; }
.thead input.textbox, .thead select { border: 1px solid var(--header-dk) !important; }
/* Descripción dentro del header de categoría: blanco para máximo contraste */
.thead .smalltext { color: rgba(255,255,255,.92) !important; }

/* Categoría / barra de navegación de tabla */
.tcat {
	background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%) !important;
	color: var(--text-soft) !important;
	border-top: 1px solid var(--border-2) !important;
	border-bottom: 1px solid #000 !important;
}
.tcat a:link, .tcat a:visited { color: var(--text) !important; }
.tcat a:hover, .tcat a:active { color: var(--accent-2) !important; }

/* Filas */
.trow1 { background: var(--surface) !important; border-color: var(--border) !important; }
.trow2 { background: var(--surface-2) !important; border-color: var(--border) !important; }
.trow1, .trow2 { color: var(--text) !important; }
.trow_shaded, .post.unapproved_post { background: #3a2326 !important; }
.trow_deleted, .post.deleted_post { background: #2a2340 !important; }

.trow_selected, tr.trow_selected td {
	background: #3a3320 !important;
	color: var(--text) !important;
	border-color: #6b5d2a !important;
}
.trow_selected a:link, .trow_selected a:visited,
.trow_selected a:hover, .trow_selected a:active { color: var(--accent-2) !important; }

.trow_sep {
	background: var(--surface-3) !important;
	color: var(--text) !important;
	border-bottom: 1px solid #000 !important;
}

.tfoot {
	background: var(--surface-2) !important;
	color: var(--text-mut) !important;
	border-top: 1px solid var(--border-2) !important;
}
.tfoot a:link, .tfoot a:visited { color: var(--text-soft) !important; }
.tfoot a:hover, .tfoot a:active { color: var(--accent-2) !important; }

.bottommenu {
	background: var(--surface) !important;
	color: var(--text) !important;
	border: 1px solid var(--border-2) !important;
	border-radius: 6px;
}

.selectall { background: #3a3320 !important; color: var(--text) !important; border-bottom: 1px solid #6b5d2a !important; }

/* ---- Navegación (breadcrumb) --------------------------------------------- */
.navigation { color: var(--text-mut) !important; }
.navigation a:link, .navigation a:visited { color: var(--text-soft) !important; }
.navigation a:hover, .navigation a:active { color: var(--accent-2) !important; }
.navigation .active { color: var(--text) !important; }

/* ---- Formularios --------------------------------------------------------- */
input.textbox, textarea, select {
	background: #0f1116 !important;
	color: var(--text) !important;
	border: 1px solid var(--border-2) !important;
	border-radius: 4px;
	font-family: var(--font) !important;
}
input.textbox:focus, textarea:focus, select:focus { border-color: var(--accent) !important; }

button, input.button {
	background: linear-gradient(180deg, var(--surface-3) 0%, var(--surface) 100%) !important;
	color: var(--text) !important;
	border: 1px solid var(--border-2) !important;
	border-radius: 4px;
	font-family: var(--font) !important;
}
button:hover, input.button:hover { border-color: var(--accent) !important; color: #fff !important; }

#search input.button {
	background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dk) 100%) !important;
	color: #fff !important;
	border-color: var(--accent-dk) !important;
}

fieldset { border: 1px solid var(--border) !important; }
fieldset.trow1, fieldset.trow2 { border-color: var(--border-2) !important; }

/* ---- Botones de acción (a.button) ---------------------------------------- */
a.button:link, a.button:visited, a.button:hover, a.button:active {
	background: linear-gradient(180deg, var(--surface-3) 0%, var(--surface) 100%) !important;
	color: var(--text) !important;
	border: 1px solid var(--border-2) !important;
	border-radius: 4px;
}
a.button:hover { border-color: var(--accent) !important; color: #fff !important; }

.postbit_buttons > a:link, .postbit_buttons > a:visited,
.postbit_buttons > a:hover, .postbit_buttons > a:active {
	background: var(--surface-2) !important;
	color: var(--text-soft) !important;
	border: 1px solid var(--border) !important;
	border-radius: 3px;
}
.postbit_buttons > a:hover { border-color: var(--accent) !important; color: #fff !important; }

/* ---- Posts (showthread) -------------------------------------------------- */
.post .post_author {
	background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%) !important;
	border-top: 2px solid var(--accent) !important;
	border-bottom: 1px solid var(--border) !important;
}
.post.classic .post_author { border: 1px solid var(--border) !important; border-left: 0 !important; }
.post .post_author div.author_avatar img { background: var(--surface) !important; border: 1px solid var(--border-2) !important; }
.post .post_author div.author_statistics { color: var(--text-mut) !important; }
.post.classic .post_author div.author_statistics { border-top: 1px dotted var(--border) !important; }

.post .post_head { border-bottom: 1px dotted var(--border) !important; }
.post .post_head span.post_date { color: var(--text-soft) !important; }
.post .post_head span.edited_post, .post .post_head span.edited_post a { color: var(--text-mut) !important; }

.post_body { color: var(--text) !important; }
.post_content .signature { border-top: 1px dotted var(--border) !important; }
.post .post_meta { color: var(--text-mut) !important; }
.post .post_meta a:link, .post .post_meta a:visited,
.post .post_meta a:hover, .post .post_meta a:active { color: var(--text-soft) !important; }

.post_controls {
	background: var(--surface-2) !important;
	border-bottom: 1px solid var(--border) !important;
}
.thread_start_datetime { color: var(--text-mut) !important; }
.ignored_post, .deleted_post_collapsed { border-top: 3px solid var(--accent-dk) !important; }
.deleted_post_hidden { border-top: 2px solid var(--border) !important; }

/* ---- Citas / código ------------------------------------------------------ */
blockquote {
	background: var(--surface) !important;
	border: 1px solid var(--border-2) !important;
	border-left: 3px solid var(--accent) !important;
	border-radius: 4px;
}
blockquote cite { border-bottom: 1px solid var(--border) !important; }
blockquote cite > span { color: var(--text-mut) !important; }

.codeblock {
	background: #0a0b0e !important;
	border: 1px solid var(--border-2) !important;
	border-radius: 4px;
}
.codeblock .title { border-bottom: 1px solid var(--border) !important; }
.codeblock code { color: #9ad0a0; }

/* ---- Editor -------------------------------------------------------------- */
.editor { background: var(--surface) !important; border: 1px solid var(--border-2) !important; }
.editor_control_bar { background: var(--surface-2) !important; border: 1px solid var(--border) !important; }
.post .editor_control_bar { background: var(--surface-2) !important; }

/* ---- Menús emergentes ---------------------------------------------------- */
.popup_menu { background: var(--surface) !important; border: 1px solid var(--border-2) !important; border-radius: 4px; }
.popup_menu .popup_item { background: var(--surface-2) !important; color: var(--text) !important; }
.popup_menu .popup_item:hover { background: var(--accent) !important; color: #fff !important; }
.drop_go_page { background: var(--surface-2) !important; }

/* ---- Paginación ---------------------------------------------------------- */
.pagination a {
	background: var(--surface-2) !important;
	color: var(--text-soft) !important;
	border: 1px solid var(--border-2) !important;
	border-radius: 3px;
}
.pagination a:hover { background: var(--accent) !important; color: #fff !important; border-color: var(--accent-dk) !important; }
.pagination .pagination_current {
	background: var(--accent) !important;
	color: #fff !important;
	border-radius: 3px;
	padding: 3px 6px;
}
.pagination_breadcrumb { background: var(--surface) !important; border: 1px solid var(--border) !important; outline: 1px solid var(--border-2) !important; }

/* ---- Alertas / estados --------------------------------------------------- */
.pm_alert { background: #3a2f12 !important; border: 1px solid #6b5d2a !important; color: var(--text) !important; }
.red_alert { background: #3a1c1f !important; border: 1px solid var(--crimson) !important; color: #ff9aa6 !important; }
.red_alert a:link, .red_alert a:visited, .red_alert a:hover, .red_alert a:active { color: #ff9aa6 !important; }
div.error { background: #3a2f12 !important; border: 2px solid #6b5d2a !important; }
div.error p { color: var(--text) !important; }
.highlight { background: #4a4320 !important; color: #fff !important; }
.online { color: #4cd964 !important; }
.offline { color: var(--text-mut) !important; }

/* ---- Misc ---------------------------------------------------------------- */
/* author_statistics se mantiene atenuado; las descripciones de foro se suben */
.post .post_author div.author_statistics { color: var(--text-mut) !important; }
.smalltext { color: #bcc2cd !important; }
/* Descripción de cada subforo (debajo del enlace) con buen contraste */
.trow1 .smalltext, .trow2 .smalltext { color: #c3c9d4 !important; }
img.attachment { border: 1px solid var(--border-2) !important; }
.poll_votedfor { background: var(--surface-2) !important; border-color: var(--border) !important; }

/* ---- Scrollbar (WebKit/Blink) -------------------------------------------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 6px; border: 2px solid var(--bg-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dk); }

/* ---- Galería de imágenes adjuntas ---------------------------------------- */
/* Grid de 2 columnas de ancho fijo (580px). Las imágenes se muestran COMPLETAS
   (sin recortar) con object-fit: contain, alto máximo 500px y fondo negro que
   rellena el espacio sobrante (ideal para verticales/cuadradas). Click abre el
   adjunto a tamaño completo. Requiere .attach-gallery / .attach-item (plantillas
   postbit_attachments_images / _image). */
.attach-gallery {
	display: grid;
	grid-template-columns: repeat(2, 580px);
	gap: 12px;
	margin: 10px 0;
	max-width: 100%;
}
.attach-gallery .attach-item {
	display: block;
	overflow: hidden;
	border: 1px solid var(--border-2);
	border-radius: 6px;
	line-height: 0;
	background: #000;
}
.attach-gallery img.attachment {
	display: block;
	width: 100%;
	height: auto;
	max-height: 500px;
	object-fit: contain;
	background: #000;
	cursor: zoom-in;
	transition: filter .25s ease;
}
.attach-gallery .attach-item:hover img.attachment {
	filter: brightness(1.08);
}
/* Pantallas estrechas: una sola columna a ancho completo */
@media (max-width: 1250px) {
	.attach-gallery { grid-template-columns: 1fr; }
}