/*
 * Skin NexTech — capa de identidad de marca sobre Elastic.
 * Hereda todo el CSS compilado de Elastic y pisa solo colores,
 * tipografía y la página de login. Paleta "Original" del kit:
 * tinta #111111 / acento #F26522, Oxanium (títulos) + Archivo (texto).
 */

@import url("../../elastic/styles/styles.min.css");
@import url("https://fonts.googleapis.com/css2?family=Oxanium:wght@500;600;700&family=Archivo:wght@300;400;500;600&display=swap");

:root {
	--nx-ink: #111111;
	--nx-ink-soft: #2b2b2b;
	--nx-accent: #F26522;
	--nx-accent-hover: #d9571a;
	--nx-accent-tint: #fdeee3;
}

/* ---- Tipografía de marca ---- */

body,
input, button, select, textarea,
.form-control, .btn, .listing, .toolbar {
	font-family: 'Archivo', -apple-system, 'Helvetica Neue', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.header-title, .boxtitle,
#layout-sidebar .header, #layout-list .header-title {
	font-family: 'Oxanium', 'Archivo', sans-serif;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* ---- Enlaces y acento general ---- */

a { color: var(--nx-accent); }
a:hover, a:focus { color: var(--nx-accent-hover); }

::selection { background: var(--nx-accent); color: #fff; }

/* ---- Menú de tareas (barra izquierda): tinta de marca ---- */

#layout-menu {
	background-color: var(--nx-ink);
}

#layout-menu .special-buttons a:not(:focus) {
	background: #000000;
}

#taskmenu a.selected,
#taskmenu a:focus {
	color: var(--nx-accent) !important;
}

#taskmenu a:hover {
	color: #ffffff !important;
	background-color: var(--nx-ink-soft) !important;
}

#layout-menu .popover-header {
	background-color: var(--nx-ink);
}

/* ---- Botones ---- */

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
	color: #fff;
	background: var(--nx-accent);
	border-color: var(--nx-accent);
}

.btn-primary:hover,
.btn-primary:focus {
	color: #fff;
	background: var(--nx-accent-hover);
	border-color: var(--nx-accent-hover);
}

.btn-primary.disabled, .btn-primary:disabled {
	background: var(--nx-accent);
	border-color: var(--nx-accent);
	opacity: .5;
}

.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
	box-shadow: 0 0 0 .2rem rgba(242, 101, 34, .35);
}

/* ---- Controles de formulario ---- */

.form-control:focus {
	border-color: var(--nx-accent);
	box-shadow: 0 0 0 .2rem rgba(242, 101, 34, .25);
}

.custom-control-input:checked ~ .custom-control-label::before {
	border-color: var(--nx-accent);
	background-color: var(--nx-accent);
}

.custom-control-input:focus ~ .custom-control-label::before {
	box-shadow: 0 0 0 .2rem rgba(242, 101, 34, .25);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
	border-color: var(--nx-accent);
}

/* ---- Listados: selección y no leídos ---- */

.listing li.selected,
.listing tr.selected td {
	color: var(--nx-ink);
	background-color: var(--nx-accent-tint);
}

span.unreadcount {
	background: var(--nx-accent);
	color: #fff;
}

/* Fila activa en móvil (fondo pleno) */
@media (max-width: 1023px) {
	.listing li.selected {
		color: #fff;
		background-color: var(--nx-accent);
	}
}

/* ---- Página de login: hero oscuro como www.nextech.ar ---- */

body.task-login {
	background:
		linear-gradient(45deg,
			color-mix(in srgb, #F26522 22%, #111111),
			color-mix(in srgb, #F26522 7%, #111111) 55%,
			#111111);
	background-attachment: fixed;
	color: rgba(255, 255, 255, .85);
}

body.task-login #layout {
	background: transparent;
}

body.task-login #logo {
	display: block;
	margin: 0 auto 2rem;
	max-width: 300px;
	width: 85%;
}

body.task-login #login-form {
	top: 14vh;
}

body.task-login .form-control {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .18);
	color: #ffffff;
	border-radius: 4px;
}

body.task-login .form-control::placeholder {
	color: rgba(255, 255, 255, .45);
}

body.task-login .form-control:focus {
	background: rgba(255, 255, 255, .1);
	border-color: var(--nx-accent);
	box-shadow: 0 0 0 .2rem rgba(242, 101, 34, .3);
	color: #fff;
}

body.task-login .formcontent {
	background: transparent;
}

body.task-login #login-footer,
body.task-login #login-footer a,
body.task-login .support-link {
	color: rgba(255, 255, 255, .55);
}

body.task-login #login-footer a:hover {
	color: var(--nx-accent);
}

/* El botón de entrar, bien de marca */
body.task-login .btn-primary {
	background: var(--nx-accent);
	border-color: var(--nx-accent);
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
}

body.task-login .btn-primary:hover {
	background: color-mix(in srgb, #000 15%, var(--nx-accent));
}

/* ---- Modo oscuro de Elastic: mantener el acento naranja ---- */

html.dark-mode .listing tr.selected td {
	color: var(--nx-accent);
	background-color: #2b2b2b;
}

html.dark-mode a { color: var(--nx-accent); }

html.dark-mode .btn-primary {
	background: var(--nx-accent);
	border-color: var(--nx-accent);
	color: #fff;
}

html.dark-mode span.unreadcount {
	background: var(--nx-accent);
}