/* El tema de Muratic para el git (git.arboltec.com): negro y grises, una sola letra (Inter) y bordes redondeados,
   como la página (server/web/style.css). Parte del tema oscuro de Forgejo y cambia sus variables; lo demás son unos
   pocos ajustes de la barra, los botones, los campos, las cajas y la entrada. Lo instala tools/servidor/git.sh. */

@import url("./theme-forgejo-dark.css");

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin.woff2") format("woff2");
	font-weight: 400 600;
	font-display: swap;
}

:root {
	--is-dark-theme: true;
	color-scheme: dark;

	/* La escala de grises de Forgejo (sus "steel"), pasada a los de la página. */
	--steel-900: #000;
	--steel-850: #050505;
	--steel-800: #000;
	--steel-750: #0a0a0a;
	--steel-700: #0f0f0f;
	--steel-650: #141414;
	--steel-600: #1c1c1c;
	--steel-550: #262626;
	--steel-500: #383838;
	--steel-450: #555;
	--steel-400: #6a6a6a;
	--steel-350: #777;
	--steel-300: #8f8f8f;
	--steel-250: #a6a6a6;
	--steel-200: #bdbdbd;
	--steel-150: #cfcfcf;
	--steel-100: #e2e2e2;

	--fonts-proportional: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--border-radius: 10px;
	--border-radius-medium: 12px;

	/* Lo principal es gris claro con letra negra, como el botón que se enciende en la página. */
	--color-primary: #d4d4d4;
	--color-primary-contrast: #000;
	--color-primary-dark-1: #e4e4e4;
	--color-primary-dark-2: #ececec;
	--color-primary-dark-3: #f2f2f2;
	--color-primary-dark-4: #f5f5f5;
	--color-primary-dark-5: #f8f8f8;
	--color-primary-dark-6: #fbfbfb;
	--color-primary-dark-7: #fff;
	--color-primary-light-1: #bdbdbd;
	--color-primary-light-2: #a6a6a6;
	--color-primary-light-3: #8f8f8f;
	--color-primary-light-4: #6f6f6f;
	--color-primary-light-5: #555;
	--color-primary-light-6: #3a3a3a;
	--color-primary-light-7: #262626;
	--color-primary-alpha-10: #d4d4d419;
	--color-primary-alpha-20: #d4d4d433;
	--color-primary-alpha-30: #d4d4d44b;
	--color-primary-alpha-40: #d4d4d466;
	--color-primary-alpha-50: #d4d4d480;
	--color-primary-alpha-60: #d4d4d499;
	--color-primary-alpha-70: #d4d4d4b3;
	--color-primary-alpha-80: #d4d4d4cc;
	--color-primary-alpha-90: #d4d4d4e1;
	--color-primary-hover: #e4e4e4;
	--color-primary-active: #bdbdbd;

	--color-secondary: #1c1c1c;
	--color-secondary-light-1: #141414;
	--color-secondary-light-2: #111;
	--color-secondary-light-3: #0d0d0d;
	--color-secondary-light-4: #0a0a0a;
	--color-secondary-alpha-10: #1c1c1c19;
	--color-secondary-alpha-20: #1c1c1c33;
	--color-secondary-alpha-30: #1c1c1c4b;
	--color-secondary-alpha-40: #1c1c1c66;
	--color-secondary-alpha-50: #1c1c1c80;
	--color-secondary-alpha-60: #1c1c1c99;
	--color-secondary-alpha-70: #1c1c1cb3;
	--color-secondary-alpha-80: #1c1c1ccc;
	--color-secondary-alpha-90: #1c1c1ce1;
	--color-secondary-bg: #0f0f0f;

	--color-body: #000;
	--color-box-header: #0a0a0a;
	--color-box-body: #0a0a0a;
	--color-box-body-highlight: #111;
	--color-text-dark: #fff;
	--color-text: #e2e2e2;
	--color-text-light: #b5b5b5;
	--color-text-light-1: #a6a6a6;
	--color-text-light-2: #8f8f8f;
	--color-text-light-3: #777;
	--color-footer: #000;
	--color-timeline: #1c1c1c;
	--color-input-text: #e2e2e2;
	--color-input-background: #0a0a0a;
	--color-input-toggle-background: #1c1c1c;
	--color-input-border: #1c1c1c;
	--color-input-border-hover: #262626;
	--color-header-wrapper: #000;
	--color-header-wrapper-transparent: #00000000;
	--color-light-border: #ffffff14;
	--color-hover: #141414;
	--color-active: #1a1a1a;
	--color-menu: #0a0a0a;
	--color-card: #0a0a0a;
	--fancy-card-bg: #0a0a0a;
	--fancy-card-border: #1c1c1c;
	--color-markup-table-row: #ffffff05;
	--color-markup-code-block: #0a0a0a;
	--color-markup-code-inline: #141414;
	--color-button: #141414;
	--color-code-bg: #050505;
	--color-shadow: #000000a0;
	--color-text-focus: #fff;
	--color-expand-button: #1c1c1c;
	--color-placeholder-text: #555;
	--color-editor-line-highlight: #0f0f0f;
	--color-caret: #8f8f8f;
	--color-reaction-bg: #ffffff0d;
	--color-tooltip-text: #e2e2e2;
	--color-tooltip-bg: #0f0f0ff0;
	--color-nav-bg: #000;
	--color-nav-hover-bg: #0f0f0f;
	--color-secondary-nav-bg: #000;
	--color-label-text: #e2e2e2;
	--color-label-bg: #1c1c1c;
	--color-label-hover-bg: #262626;
	--color-label-active-bg: #383838;
	--color-label-bg-alt: #262626;
	--color-accent: #e2e2e2;
	--color-small-accent: #555;
	--color-highlight-fg: #e2e2e2;
	--color-highlight-bg: #ffffff12;
	--color-overlay-backdrop: #000000cc;
	--color-selection-bg: #2a2a2a;
	--color-selection-fg: #e2e2e2;
	--color-grey: #555;
	--color-grey-light: #8f8f8f;

	/* Avisos y diferencias: los mismos colores de siempre, apagados para que no griten sobre el negro. */
	--color-error-border: #4a3434;
	--color-error-bg: #140c0c;
	--color-error-bg-active: #241414;
	--color-error-bg-hover: #1e1111;
	--color-error-text: #e0c0c0;
	--color-success-border: #2a4433;
	--color-success-bg: #0c140f;
	--color-success-text: #b8d6c0;
	--color-warning-border: #4a3f25;
	--color-warning-bg: #15120b;
	--color-warning-text: #e2d2a8;
	--color-info-border: #2a3446;
	--color-info-bg: #0c1018;
	--color-info-text: #c5d0e0;
	--color-diff-removed-word-bg: #5a2828;
	--color-diff-added-word-bg: #1d4a2c;
	--color-diff-removed-row-bg: #1c0f0f;
	--color-diff-added-row-bg: #0d1a12;
	--color-diff-moved-row-bg: #2a2010;
	--color-diff-removed-row-border: #4a2a2a;
	--color-diff-added-row-border: #224a30;
	--color-diff-inactive: #141414;
	--color-console-bg: #050505;
	--color-console-border: #1c1c1c;
	--color-console-menu-bg: #0f0f0f;
	--color-console-menu-border: #262626;
}

body {
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: #2a2a2a;
	color: #e2e2e2;
}

:focus-visible {
	outline: 2px solid #5a5a5a;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- la barra de arriba, como la de la página */

#navbar {
	min-height: 64px;
	padding: 0 clamp(8px, 3vw, 32px);
	border-bottom: 1px solid #111;
}

#navbar-logo {
	gap: 14px;
}

#navbar-logo img {
	width: 30px;
	height: 22px;
	opacity: 0.9;
}

/* El nombre, en minúsculas, separado y gris (la .wordmark de la página). */
#navbar-logo::after {
	content: "muratic";
	margin-right: -0.48em;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.48em;
	line-height: 1;
	color: #8f8f8f;
}

#navbar .item {
	border-radius: 18px;
	color: #7a7a7a;
	font-size: 13px;
}

#navbar .item:hover,
#navbar .item.active {
	background: #0f0f0f;
	color: #e2e2e2;
}

#navbar-logo:hover {
	background: transparent !important;
}

/* La ayuda de Forgejo (afuera) no hace falta. */
#navbar a[href^="https://forgejo.org"] {
	display: none;
}

/* ---------------------------------------------------------------- botones y campos */

.ui.button {
	border-radius: 12px;
	font-weight: 500;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ui.primary.button,
.ui.primary.buttons .button {
	background: #d4d4d4;
	color: #000;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
	background: #e4e4e4;
	color: #000;
}

.ui.basic.button,
.ui.basic.buttons .button {
	border-color: #1c1c1c;
	color: #8f8f8f;
}

.ui.basic.button:hover,
.ui.basic.buttons .button:hover {
	border-color: #383838;
	background: transparent;
	color: #e2e2e2;
}

.ui.form input:not([type]),
.ui.form input[type="text"],
.ui.form input[type="email"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="url"],
.ui.form input[type="number"],
.ui.form textarea,
.ui.input > input,
.ui.selection.dropdown {
	border-radius: 12px;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ui.form input:focus,
.ui.form textarea:focus,
.ui.input > input:focus,
.ui.selection.dropdown.active {
	border-color: #383838 !important;
	background: #0d0d0d;
}

.ui.form .field > label {
	color: #8f8f8f;
	font-weight: 500;
	font-size: 13px;
}

/* ---------------------------------------------------------------- cajas, menús y etiquetas */

.ui.segment,
.ui.attached.segment,
.ui.attached.header,
.ui.top.attached.header,
.ui.cards > .card,
.ui.card,
.repository .file-header,
.ui.table {
	border-color: #1c1c1c;
}

.ui.top.attached.header,
.ui.attached.segment.header {
	color: #e2e2e2;
	font-weight: 500;
}

.ui.dropdown .menu,
.ui.menu .dropdown.item .menu,
.tippy-box {
	border-color: #1c1c1c;
	border-radius: 12px;
}

.ui.secondary.pointing.menu .active.item,
.ui.secondary.pointing.menu .active.item:hover {
	border-color: #d4d4d4;
	color: #e2e2e2;
}

a {
	text-decoration-color: #555;
}

/* ---------------------------------------------------------------- entrar: como la de la página */

.page-content.user.signin .column {
	max-width: 360px !important;
	padding-top: clamp(32px, 9vh, 96px);
}

/* El logo grande y el nombre, arriba de la caja. */
.page-content.user.signin .column > .ui.container:first-child::before {
	content: "";
	display: block;
	width: 72px;
	height: 52px;
	margin: 0 auto 22px;
	background: url("../img/logo.svg") center / contain no-repeat;
	opacity: 0.92;
}

/* En lugar de "Entrar", el nombre (el título sigue ahí para los lectores de pantalla). */
.page-content.user.signin .column > .ui.container:first-child > .ui.top.attached.header {
	margin-bottom: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 0;
	line-height: 1;
}

.page-content.user.signin .column > .ui.container:first-child > .ui.top.attached.header::after {
	content: "muratic";
	margin-right: -0.48em;
	color: #8f8f8f;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.48em;
}

.page-content.user.signin .ui.attached.segment {
	padding: 0;
	border: 0;
	background: transparent;
}

.page-content.user.signin .ui.form input {
	height: 48px;
	padding: 0 16px;
}

.page-content.user.signin .ui.form .field > label {
	display: none;
}

/* "Recordar este dispositivo": la casilla a la izquierda de su texto, en una línea. */
.page-content.user.signin .ui.form .inline.field .ui.checkbox {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	padding: 4px 2px;
}

.page-content.user.signin .ui.form .inline.field .ui.checkbox label {
	margin: 0;
	padding: 0;
	color: #777;
	font-size: 13px;
}

/* En la entrada, la barra lleva solo el logo (explorar y entrar llevan acá mismo). */
body:has(.page-content.user.signin) #navbar .item:not(#navbar-logo) {
	display: none;
}

.page-content.user.signin .ui.primary.button {
	height: 48px;
}

.page-content.user.signin .ui.attached.segment.header {
	padding: 8px 0 0;
	border: 0;
	background: transparent;
	font-size: 13px;
}

.page-content.user.signin .ui.attached.segment.header a {
	color: #777;
}

/* ---------------------------------------------------------------- el pie: solo el idioma */

.page-footer {
	padding: 14px clamp(16px, 4vw, 40px);
	border-top: 1px solid #0f0f0f;
	color: #555;
	font-size: 12px;
}

.page-footer .left-links,
.page-footer .right-links > a {
	display: none !important;
}

.page-footer .right-links {
	min-width: 0;
	margin-left: auto;
	justify-content: flex-end;
}

.page-footer .ui.dropdown.language {
	color: #555;
}

/* ---------------------------------------------------------------- detalles en grises */

/* Los avatares y la barra de lenguajes, sin colores: la página es en grises. */
img.avatar,
.ui.avatar.image {
	filter: grayscale(1) brightness(0.9);
}

.slice[style*="background-color"] {
	filter: grayscale(1) brightness(0.7);
}

/* Lo peligroso (borrar) y lo que pide confirmar, apagado como los avisos de la página. */
.ui.red.button,
.ui.red.buttons .button,
.ui.negative.button {
	background: #2a1414;
	border: 1px solid #4a3434;
	color: #e0c0c0;
}

.ui.red.button:hover,
.ui.red.buttons .button:hover,
.ui.negative.button:hover {
	background: #3a1a1a;
	color: #f0d0d0;
}

/* Autorizar a Git para Windows: el botón principal, no uno de peligro. */
.oauth2-authorize-application-box .ui.red.button {
	background: #d4d4d4;
	border-color: transparent;
	color: #000;
}

/* El RSS y Fork no se usan acá (nadie crea repositorios propios). */
.repo-header .repo-buttons a[href$=".rss"],
.repo-header .ui.labeled.button:has(a[href$="/fork"]) {
	display: none !important;
}

/* El código: los colores de siempre, apagados (ámbar, verde y celeste de la página Balance). */
.chroma .k, .chroma .kd, .chroma .kn, .chroma .kr, .chroma .kt, .chroma .nt, .chroma .o, .chroma .ow, .chroma .ne {
	color: #c8a27a;
}

.chroma .s, .chroma .s1, .chroma .s2, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .sd, .chroma .sh, .chroma .si, .chroma .sx, .chroma .se, .chroma .ss, .chroma .sr {
	color: #9fb59a;
}

.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .mo, .chroma .il, .chroma .kc, .chroma .no {
	color: #9ab0c8;
}

.chroma .nf, .chroma .na, .chroma .nb, .chroma .nc, .chroma .nd {
	color: #d9c08a;
}

.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm, .chroma .cs, .chroma .cpf {
	color: #6a6a6a;
}

.chroma .n, .chroma .nx, .chroma .nv, .chroma .nn, .chroma .p {
	color: #cfcfcf;
}