/*
  modern.css - capa de estilo moderna sobre subSilver (phpBB 2)
  Se carga despues del estilo original y solo lo sobrescribe.
  Para volver al aspecto clasico basta con quitar el <link> en overall_header.tpl.
*/

:root {
	--bg: #f3f5f8;
	--surface: #ffffff;
	--surface-alt: #f8fafc;
	--surface-head: #f1f4f8;
	--border: #e3e8ef;
	--border-strong: #cbd5e1;
	--text: #1e293b;
	--muted: #64748b;
	--primary: #1d5fc4;
	--primary-hover: #154a9c;
	--primary-soft: #eaf1fc;
	--visited: #5b3fa8;
	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono: "Cascadia Code", "JetBrains Mono", Consolas, "Courier New", monospace;
	--radius: 10px;
}

/* ---------- Base ---------- */

body {
	background: var(--bg) !important;
	color: var(--text);
	margin: 0;
	padding: 0 12px;
	font-family: var(--font);
	-webkit-font-smoothing: antialiased;
}

font, th, td, p, input, textarea, select { font-family: var(--font); }

a:link, a:active, a:visited { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--border); height: 0; }

/* Contenedor principal centrado */
body > table:first-of-type {
	max-width: 1240px;
	margin: 24px auto;
}

.bodyline {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .05);
	padding: 20px 24px !important;
}

/* ---------- Tablas del foro ---------- */

.forumline {
	background: var(--border) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius);
	overflow: hidden;
}

td.row1 { background: var(--surface) !important; }
td.row2 { background: var(--surface-alt) !important; }
td.row3, td.row3Right, td.spaceRow { background: var(--surface-head) !important; border: 0 !important; }

td.row1, td.row2 { padding: 10px 12px; }

/* Resaltar la fila al pasar el raton (indice, listados de temas), no dentro de un tema */
tr:hover > td.row1:not(.post-author):not(.post-content):not(.post-top):not(.post-actions),
tr:hover > td.row2:not(.post-author):not(.post-content):not(.post-top):not(.post-actions) { background: #f5f8fd !important; }

td.rowpic { background: var(--surface-head) !important; background-image: none !important; }

/* Cabeceras de columna: planas, sin degradado */
th, th.thHead, th.thSides, th.thTop, th.thLeft, th.thRight, th.thBottom, th.thCornerL, th.thCornerR {
	background: var(--surface-head) !important;
	background-image: none !important;
	color: var(--muted) !important;
	font-size: 12px !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	height: 38px;
	border: 0 !important;
	padding: 0 12px;
}

/* Filas de categoria y pie de tabla */
td.cat, td.catHead, td.catSides, td.catLeft, td.catRight, td.catBottom {
	background: var(--primary-soft) !important;
	background-image: none !important;
	border: 0 !important;
	height: 40px;
	padding: 0 12px;
}

/* ---------- Tipografia ---------- */

.maintitle {
	font-family: var(--font) !important;
	font-size: 26px !important;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--text) !important;
}

.gen { font-size: 15px !important; }
.genmed { font-size: 14px !important; }
.gensmall { font-size: 12.5px !important; }
.gen, .genmed, .gensmall { color: var(--text) !important; line-height: 1.5; }
a.gen, a.genmed, a.gensmall { color: var(--primary) !important; }

.cattitle { font-size: 15px !important; font-weight: 700; letter-spacing: 0 !important; color: var(--primary) !important; }

.forumlink { font-size: 16px !important; font-weight: 600; }
a.forumlink { color: var(--primary) !important; }

.nav { font-size: 14px !important; font-weight: 600; color: var(--text) !important; }
a.nav { color: var(--primary) !important; }

.topictitle, h1, h2 { font-size: 15px !important; font-weight: 600; color: var(--text) !important; }
a.topictitle:link { color: var(--primary) !important; }
a.topictitle:visited { color: var(--visited) !important; }

.name { font-size: 15px !important; color: var(--text) !important; }
.postdetails { font-size: 12.5px !important; color: var(--muted) !important; line-height: 1.5; }

/* Cuerpo de los mensajes */
.postbody {
	font-size: 15px !important;
	line-height: 1.65 !important;
	color: var(--text);
	overflow-wrap: anywhere;
}
.postbody img { max-width: 100%; height: auto; }
a.postlink:link { color: var(--primary) !important; text-decoration: underline; text-decoration-color: rgba(29, 95, 196, .35); text-underline-offset: 2px; }
a.postlink:visited { color: var(--visited) !important; }

/* ---------- Menu superior ---------- */

.mainmenu { font-size: 14px !important; color: var(--text) !important; }
a.mainmenu {
	display: inline-block;
	padding: 5px 9px;
	border-radius: 7px;
	color: var(--text) !important;
}
a.mainmenu:hover { background: var(--primary-soft); color: var(--primary) !important; text-decoration: none; }
a.mainmenu img { vertical-align: -1px; }

/* ---------- Citas y codigo ---------- */

td.quote {
	background: var(--surface-alt) !important;
	border: 0 !important;
	border-left: 3px solid var(--primary) !important;
	border-radius: 6px;
	padding: 10px 14px !important;
	font-size: 14px !important;
	color: #334155 !important;
	line-height: 1.6;
}

td.code {
	background: #ffffff !important;
	border: 1px solid var(--border-strong) !important;
	border-radius: 8px;
	padding: 12px 14px !important;
	font-family: var(--mono) !important;
	font-size: 13.5px !important;
	line-height: 1.55;
	color: #24292f !important;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
td.code code, td.code pre { font-family: var(--mono) !important; }

/* Colores de sintaxis C++ (cpp-highlight.js), al estilo del editor de C++Builder */
td.code .cpp-kw  { color: #000080; font-weight: 700; }   /* palabras reservadas */
td.code .cpp-com { color: #008000; font-style: italic; } /* comentarios */
td.code .cpp-str { color: #0000ff; }                     /* cadenas y caracteres */
td.code .cpp-num { color: #0000ff; }                     /* numeros */
td.code .cpp-pre { color: #008080; }                     /* #include, #define, #if... */
td.code code.cpp-code { white-space: pre-wrap; display: block; tab-size: 4; }

/* Boton "Copiar" en la cabecera de cada bloque de codigo */
td.cpp-code-header { padding-right: 0 !important; }
button.cpp-copy {
	float: right;
	margin: 0 0 2px 8px;
	padding: 3px 12px;
	font: 600 12px var(--font);
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: 6px;
	cursor: pointer;
}
button.cpp-copy:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
button.cpp-copy.cpp-copied { background: #e7f6ec; border-color: #2f9e55; color: #1d7a3e; }

/* ---------- Formularios ---------- */

input.post, textarea.post, select, input[type="text"], input[type="password"] {
	background: var(--surface) !important;
	color: var(--text) !important;
	border: 1px solid var(--border-strong) !important;
	border-radius: 7px;
	padding: 6px 9px;
	font-size: 14px !important;
	text-indent: 0;
}
input.post:focus, textarea.post:focus, select:focus, input[type="text"]:focus, input[type="password"]:focus {
	outline: none;
	border-color: var(--primary) !important;
	box-shadow: 0 0 0 3px rgba(29, 95, 196, .15);
}
textarea.post { line-height: 1.5; }

input.mainoption, input.liteoption, input[type="submit"] {
	background: var(--primary) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 7px;
	padding: 7px 16px;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer;
}
input.liteoption { background: #e2e8f0 !important; color: var(--text) !important; }
input.mainoption:hover, input[type="submit"]:hover { background: var(--primary-hover) !important; }
input.liteoption:hover { background: var(--border-strong) !important; }

/* Botones de formato BBCode al escribir un mensaje */
input.button {
	background: var(--surface) !important;
	color: var(--text) !important;
	border: 1px solid var(--border-strong) !important;
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 13px !important;
	cursor: pointer;
}
input.button:hover { background: var(--primary-soft) !important; border-color: var(--primary) !important; }

.helpline { background: transparent !important; border: 0 !important; color: var(--muted); }

/* ---------- Editor de mensajes (publicar, responder, mensajes privados) ---------- */

/* La plantilla fija 450px: que ocupen todo el ancho disponible */
input.post[name="subject"], input.post[name="username"] { width: 100% !important; max-width: 760px; box-sizing: border-box; }
textarea.post[name="message"] { width: 100% !important; min-height: 340px; box-sizing: border-box; font-size: 15px !important; }
form[name="post"] table[width="450"] { width: 100% !important; }
/* ...pero los botones juntos a la izquierda, no repartidos por toda la barra */
form[name="post"] table[width="450"] > tbody > tr:first-child > td { width: 1%; padding: 0 2px 0 0 !important; }
form[name="post"] table[width="450"] > tbody > tr:first-child > td:last-child { width: auto; text-align: left; }

/* Botones de BBCode: anchura segun su texto (la plantilla les fija 30-50px) */
input.button { width: auto !important; min-width: 34px; margin: 0 1px 4px 0; }

/* Linea de ayuda: texto, no un campo */
input.helpline[type="text"], input.helpline {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 2px 0 !important;
	width: 100% !important;
	color: var(--muted) !important;
	font-size: 12.5px !important;
}

/* Selectores de color y tamano mas compactos */
form[name="post"] select { padding: 3px 6px; font-size: 13px !important; }

/* Campos con ancho fijo en la plantilla (perfil, busqueda...): mas anchos, con limite */
td.row2 input.post[style*="width"], td.row2 input[type="text"][style*="width"], td.row2 input[type="password"][style*="width"] { width: 100% !important; max-width: 460px; box-sizing: border-box; }
td.row2 textarea.post[style*="width"] { width: 100% !important; max-width: 760px; box-sizing: border-box; }

/* Datos del autor (registrado, mensajes, ubicacion): uno por linea; si falta alguno no deja hueco */
td.post-author .post-info .pi { display: block; }

/* Herramientas de moderacion al pie del tema: solo ocupan espacio si las hay */
div.topic-admin:not(:empty) { margin-top: 14px; }

/* Cabecera de la lista de temas (viewforum) */
table.forum-top td.ft-crumb { padding-left: 12px; }
@media (max-width: 760px) {
	/* Todas las celdas como piezas de una sola fila flexible, en el orden que interesa en movil */
	.bodyline form table.forum-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; }
	.bodyline form table.forum-top > tbody, .bodyline form table.forum-top > tbody > tr { display: contents; }
	.bodyline form table.forum-top > tbody > tr > td { padding: 0 !important; }
	.bodyline form table.forum-top td.ft-crumb { order: 1; flex: 0 0 100%; font-size: 13px; }
	.bodyline form table.forum-top td.ft-crumb .nav { font-size: 13px; }
	.bodyline form table.forum-top td.ft-title { order: 2; flex: 0 0 100%; }
	.bodyline form table.forum-top td.ft-new { order: 3; }
	.bodyline form table.forum-top td.ft-mark { order: 4; margin-left: auto; text-align: right !important; }
	.bodyline form table.forum-top td.ft-pages { order: 5; flex: 0 0 100%; }
	.bodyline form table.forum-top td.ft-pages:not(:has(a)) { display: none !important; }
	/* Moderadores y usuarios: discretos y sin la linea en blanco */
	.forum-meta { display: block; margin-top: 4px; color: #6b7280; line-height: 1.5; }
	.forum-meta b { font-weight: normal; }
	.forum-meta br.gap { display: none; }
}

/* Pie de la lista de temas y del tema: botones, ruta, paginas y zona horaria */
table.nav-bottom td.nb-crumb { padding-left: 12px; }
@media (max-width: 760px) {
	.bodyline table.nav-bottom.nav-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 18px; }
	.bodyline table.nav-bottom.nav-bottom > tbody,
	.bodyline table.nav-bottom.nav-bottom > tbody > tr,
	.bodyline table.nav-bottom.nav-bottom > tbody > tr > td.nb-side { display: contents; }
	.bodyline table.nav-bottom.nav-bottom > tbody > tr > td { padding: 0 !important; }
	/* Fila 1: botones a la izquierda, "Pagina X de Y" a la derecha */
	.bodyline table.nav-bottom.nav-bottom td.nb-new { order: 1; }
	.bodyline table.nav-bottom.nav-bottom td.nb-pagenum { order: 2; margin-left: auto; text-align: right !important; }
	/* Fila 2: enlaces de pagina; fila 3: ruta; fila 4: zona horaria */
	table.nav-bottom .nb-pages { order: 3; flex: 0 0 100%; }
	table.nav-bottom .nb-pages:empty { display: none; }
	.bodyline table.nav-bottom.nav-bottom td.nb-crumb { order: 4; flex: 0 0 100%; padding-top: 8px !important; border-top: 1px solid #e5e7eb; }
	table.nav-bottom .nb-tz { order: 5; flex: 0 0 100%; color: #6b7280; }
	table.nav-bottom br.nb-br { display: none; }
}

/* ---------- Pie ---------- */

.copyright { font-size: 12px !important; letter-spacing: 0 !important; color: var(--muted) !important; }
a.copyright { color: var(--muted) !important; }

/* ---------- Movil ---------- */

@media (max-width: 760px) {
	body { padding: 0 4px; }
	body > table:first-of-type { margin: 8px auto; width: 100% !important; table-layout: fixed; }
	.bodyline { padding: 12px 10px !important; border-radius: 10px; }
	.maintitle { font-size: 21px !important; }
	td.row1, td.row2 { padding: 8px 6px; }

	/* Dejar que el texto parta linea (phpBB usa nowrap en muchas celdas) */
	td, th, span { white-space: normal !important; }

	/* Columnas secundarias (temas, mensajes, respuestas, autor, lecturas) */
	.hide-sm { display: none !important; }

	/* Banner del pie y logo adaptables */
	img[width="728"] { width: 100% !important; height: auto !important; }
	.bodyline > table:first-child img { max-width: 120px; height: auto; }

	/* Cabecera: logo arriba y menu debajo a todo el ancho */
	.bodyline > table:first-child > tbody > tr > td { display: block; width: auto !important; text-align: center; }
	.bodyline > table:first-child table { margin: 0 auto; }
	a.mainmenu { padding: 4px 6px; }

	input.post, select, textarea.post { max-width: 100%; }

	/* Temas: datos del autor encima del mensaje en vez de en columna */
	td.post-author, td.post-content, td.post-actions { display: block; width: auto !important; height: auto !important; }
	td.post-author { padding-bottom: 4px; border-bottom: 1px dashed var(--border); }
	td.post-author .post-avatar img { display: block; max-width: 56px; height: auto; float: left; margin: 2px 10px 4px 0; }
	/* Datos del autor arriba y a la derecha del avatar, no debajo */
	td.post-author br.post-gap { display: none; }
	td.post-author .post-info { display: block; overflow: hidden; padding-top: 2px; }
	td.post-author::after { content: ""; display: block; clear: both; }
	td.post-top { display: none !important; }
	/* Sin la cabecera AUTOR | MENSAJE: con las celdas apiladas dejaria una columna vacia */
	tr.post-head { display: none !important; }

	/* Tablas de datos (miembros, mensajes privados, busqueda...): si no caben, se desplazan dentro de su caja */
	table.forumline { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
	table.forumline > tbody { display: table; width: 100%; }

	/* Formularios etiqueta | campo: la etiqueta encima del campo */
	tr:has(> td.row2 :is(input.post, textarea, select, input[type="text"], input[type="password"])) > td.row1,
	tr:has(> td.row2 :is(input.post, textarea, select, input[type="text"], input[type="password"])) > td.row2 { display: block; width: auto !important; }
	td.row2 :is(input.post, textarea.post, input[type="text"], input[type="password"], select) { max-width: 100% !important; box-sizing: border-box; }
	input.post[style*="width"], textarea.post[style*="width"] { width: 100% !important; }

	/* Barra de BBCode del editor en varias lineas */
	form[name="post"] table[width="450"] > tbody > tr:first-child { display: flex; flex-wrap: wrap; gap: 2px; }
	form[name="post"] table[width="450"] > tbody > tr:first-child > td { width: auto !important; }
	form[name="post"] table[width="450"] > tbody > tr:not(:first-child) > td { display: block; }

	/* Mensajes privados: carpetas en varias lineas y el indicador de capacidad debajo */
	table.pm-folders-bar > tbody > tr > td { display: block; width: auto !important; }
	table.pm-folders > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }

	/* Estadisticas: las dos columnas de tablas, una debajo de otra */
	table.stats-cols > tbody > tr > td { display: block; width: auto !important; }

	/* Tablas de maquetacion (navegacion, paginacion, zona horaria, "Cambiar a", permisos):
	   sus columnas una debajo de otra, a todo el ancho */
	.bodyline > table:not(.forumline):not(:first-child) > tbody > tr > td,
	.bodyline > form > table:not(.forumline) > tbody > tr > td {
		display: block;
		width: auto !important;
		text-align: left !important;
		padding: 4px 0 !important;
	}
	.bodyline > table:not(.forumline):not(:first-child) > tbody > tr > td[align="right"],
	.bodyline > form > table:not(.forumline) > tbody > tr > td[align="right"] { margin-top: 4px; }

	/* Leyenda de iconos: en el movil ocupa mucho y aporta poco */
	table.legend { display: none !important; }

	/* Recuadro "Entrar" de la portada: cada campo en su linea */
	form[action*="login"] td.row1 { text-align: left !important; line-height: 1.8; }
	form[action*="login"] td.row1 input.post { display: block; width: 100% !important; box-sizing: border-box; margin: 2px 0 10px; }
	form[action*="login"] td.row1 input.mainoption { display: block; width: 100%; margin-top: 10px; }

	/* Desplegables: que quepan, y en "Cambiar a" el boton "Ir" al lado del desplegable */
	td.catBottom select, .bodyline form select { max-width: 100%; }
	span.filter-label { display: block; margin-bottom: 4px; }
	form[name="jumpbox"] td { white-space: normal !important; }
	form[name="jumpbox"] select { width: calc(100% - 56px) !important; margin-top: 4px; }
	form[name="jumpbox"] input.liteoption { width: 48px; padding-left: 0; padding-right: 0; }

	/* Cabecera de cada mensaje: fecha, asunto y botones en lineas separadas */
	td.post-content > table > tbody > tr:first-child > td { display: block; width: auto !important; }
	td.post-content .post-sep { display: none; }
	td.post-content .post-subject { display: block; margin-top: 2px; }
	td.post-buttons { white-space: normal !important; padding-top: 6px; }
	td.post-buttons img { margin: 0 4px 4px 0; }

	/* Botones del pie de cada mensaje (perfil, mp, email, www...): en horizontal.
	   La plantilla los mete en una tabla de 18px de ancho que los apilaba */
	td.post-actions table { width: auto !important; height: auto !important; }
	td.post-actions img { margin: 0 4px 4px 0; vertical-align: middle; }
}