/* Mesa de Ayuda TI — branding SiroBrand. Selectores acotados; no toca el core. */
@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/source-sans-3-latin-400.woff2") format("woff2");
}
@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/source-sans-3-latin-600.woff2") format("woff2");
}
@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/source-sans-3-latin-700.woff2") format("woff2");
}

:root {
	/* HEX exactos de https://ciberseg.cl/ — #001a2e se ve negro; superficies usan #003366 */
	--siro-navy: #003366;
	--siro-navy-mid: #0066a6;
	--siro-accent: #00c4e6;
	--siro-accent-mid: #0066a6;
	--siro-link: #006bb4;
	--siro-accent-soft: #e6f7fb;
	--siro-bg: #f3f4f6;
	--siro-card: #ffffff;
	--siro-text: #111827;
	--siro-muted: #4b5563;
	--siro-border: #e5e7eb;
	--siro-row: #f9fafb;
	--siro-on-dark: #f4f7fa;
	--siro-radius: 8px;
	--siro-font: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}

html,
body.skin-3,
body.login-layout {
	font-family: var(--siro-font);
	color: var(--siro-text);
	background: var(--siro-bg) !important;
}

/* —— Login —— */
body.login-layout {
	background:
		linear-gradient(180deg, var(--siro-navy) 0%, var(--siro-navy-mid) 38%, var(--siro-bg) 38%) !important;
}
.login-container {
	max-width: 540px;
	margin: 0 auto;
}
.login-logo {
	text-align: center;
	background: transparent;
	border-radius: 12px;
	padding: 0;
	margin: 0 auto 16px;
	max-width: 540px;
}
.login-logo img {
	display: block;
	margin: 0 auto;
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	max-height: 240px;
	object-fit: contain;
	object-position: center;
}
#login-box.widget-box {
	border: 1px solid var(--siro-border);
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(15, 39, 68, 0.12);
	background: var(--siro-card);
}
#login-box .widget-main {
	padding: 28px 32px 24px;
}
#login-box h4.header {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--siro-navy);
	border-bottom: 1px solid var(--siro-border);
	padding-bottom: 12px;
	margin-bottom: 8px;
}
#login-box h4.header::after {
	content: "Acceso a la plataforma de soporte";
	display: block;
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--siro-navy-mid);
	margin-top: 6px;
}
#login-box h4.header .ace-icon {
	color: var(--siro-accent);
}
#login-form input.form-control,
#login-form input[type="text"],
#login-form input[type="password"] {
	border: 1px solid var(--siro-border);
	border-radius: var(--siro-radius);
	height: 40px;
	box-shadow: none;
	color: var(--siro-text);
	background: #fff;
}
#login-form input:focus {
	border-color: var(--siro-accent);
	outline: 2px solid rgba(0, 196, 230, 0.28);
}
#login-form ::placeholder {
	color: #4a5a68;
	opacity: 1;
}
#login-form .btn-primary,
#login-form .btn-success,
#login-form .btn-inverse,
#login-box input[type="submit"],
#login-box button[type="submit"] {
	background: var(--siro-navy) !important;
	background-image: none !important;
	border-color: var(--siro-navy) !important;
	color: #fff !important;
	border-radius: var(--siro-radius);
	font-weight: 600;
}
#login-form .btn-primary:hover,
#login-form .btn-success:hover,
#login-form .btn-inverse:hover,
#login-box input[type="submit"]:hover,
#login-box button[type="submit"]:hover {
	background: var(--siro-navy-mid) !important;
	border-color: var(--siro-navy-mid) !important;
	color: #fff !important;
}
.login-container .toolbar,
#login-box .toolbar {
	background: var(--siro-row);
	border-top: 1px solid var(--siro-border);
	border-radius: 0 0 12px 12px;
}
#login-box .toolbar a,
.login-container .toolbar a {
	color: var(--siro-navy);
}

/* —— Encabezado —— */
#navbar.navbar-default {
	background: var(--siro-navy);
	border: 0;
	min-height: 88px;
	box-shadow: 0 1px 0 rgba(0, 196, 230, 0.18);
}
#navbar .navbar-header {
	min-height: 88px;
}
#navbar .navbar-brand {
	height: 88px;
	line-height: 88px;
	padding: 4px 16px 4px 10px;
	display: flex;
	align-items: center;
	max-width: none;
	font-size: 0;
}
#navbar .navbar-brand img {
	display: none;
}
#navbar .navbar-brand,
#navbar .navbar-brand span {
	color: transparent;
	font-weight: 600;
}
#navbar .navbar-brand::before {
	content: "";
	display: inline-block;
	width: 280px;
	height: 80px;
	margin-right: 0;
	flex: 0 0 280px;
	background: var(--siro-logo-url, none) center / contain no-repeat;
	background-color: transparent;
}
#navbar .ace-nav {
	height: 88px;
}
#navbar .ace-nav > li > a,
#navbar .ace-nav > li > a > .user-info,
#navbar .ace-nav > li > a > .ace-icon {
	background: transparent;
	color: var(--siro-on-dark);
	line-height: 88px;
}
#navbar .ace-nav > li > a:hover,
#navbar .ace-nav > li > a:hover > .ace-icon {
	background: var(--siro-navy-mid);
	color: #fff;
}
#navbar a.btn-primary {
	background-color: var(--siro-navy-mid) !important;
	background-image: none !important;
	border-color: var(--siro-accent) !important;
	color: #fff !important;
}
#navbar .menu-toggler,
#navbar .menu-toggler:before,
#navbar .menu-toggler:after {
	color: #fff;
	border-color: #fff;
}
.main-container {
	padding-top: 88px;
}
#sidebar.sidebar-fixed {
	top: 88px;
}

/* —— Menú lateral: fondo oscuro también en ítems (Ace skin-3 pinta gris claro) —— */
#sidebar,
#sidebar .nav-list {
	background-color: var(--siro-navy);
}
#sidebar .nav-list > li,
#sidebar .nav-list > li:before {
	background-color: var(--siro-navy);
	border-color: var(--siro-navy-mid);
}
#sidebar .nav-list > li > a,
#sidebar .nav-list > li > a > .menu-text,
#sidebar .nav-list > li > a > .menu-icon,
#sidebar .nav-list > li > a > .arrow,
#sidebar .nav-list a .menu-text,
#sidebar .nav-list a .menu-icon {
	background-color: var(--siro-navy) !important;
	background-image: none !important;
	color: var(--siro-on-dark) !important;
	border-left: 3px solid transparent;
}
#sidebar .nav-list > li:hover > a,
#sidebar .nav-list > li:hover > a > .menu-text,
#sidebar .nav-list > li:hover > a > .menu-icon,
#sidebar .nav-list > li:hover > a > .arrow,
#sidebar .nav-list > li.open > a,
#sidebar .nav-list > li.open > a > .menu-text,
#sidebar .nav-list > li.open > a > .menu-icon {
	background-color: var(--siro-navy-mid) !important;
	color: #fff !important;
}
#sidebar .nav-list > li:hover > a {
	border-left-color: var(--siro-accent);
}
#sidebar .nav-list > li.active > a,
#sidebar .nav-list > li.active > a > .menu-text,
#sidebar .nav-list > li.active > a > .menu-icon,
#sidebar .nav-list > li.active > a > .arrow {
	background-color: var(--siro-navy-mid) !important;
	background-image: none !important;
	color: #fff !important;
}
#sidebar .nav-list > li.active > a {
	border-left: 3px solid var(--siro-accent);
}
#sidebar .nav-list > li.active:after {
	border-color: var(--siro-accent);
}
#sidebar .submenu,
#sidebar .nav-list > li > .submenu {
	background-color: var(--siro-navy);
}
#sidebar .submenu > li > a {
	background-color: var(--siro-navy);
	color: #e4ebf2;
}
#sidebar .submenu > li > a:hover,
#sidebar .submenu > li.active > a {
	background-color: var(--siro-navy-mid);
	color: #fff;
}
#sidebar .sidebar-toggle,
#sidebar .sidebar-shortcuts,
#sidebar .sidebar-shortcuts-large,
#sidebar .sidebar-shortcuts-mini {
	background-color: var(--siro-navy);
	color: var(--siro-on-dark);
	border-color: var(--siro-navy-mid);
}
#sidebar .sidebar-shortcuts-large > .btn,
#sidebar .sidebar-shortcuts-mini > .btn {
	color: #fff;
}

/* —— Contenido —— */
.main-content,
.page-content {
	background: var(--siro-bg);
	color: var(--siro-text);
}
.page-header h1,
.page-header h1 small {
	color: var(--siro-navy);
}
.breadcrumbs,
.breadcrumbs .breadcrumb,
.breadcrumbs .breadcrumb > li,
.breadcrumbs .breadcrumb > li > a,
.breadcrumbs .nav-search-icon,
#nav-search .nav-search-icon {
	color: var(--siro-navy) !important;
}
.widget-box {
	border: 1px solid var(--siro-border);
	border-radius: var(--siro-radius);
	box-shadow: none;
	background: var(--siro-card);
}
.widget-header {
	background: var(--siro-row);
	border-bottom: 1px solid var(--siro-border);
	color: var(--siro-navy);
}
.widget-header .widget-title,
.widget-header .ace-icon {
	color: var(--siro-navy);
}
.widget-color-blue2 > .widget-header,
.widget-color-blue > .widget-header,
.widget-color-blue2 > .widget-header .widget-title,
.widget-color-blue > .widget-header .widget-title,
.widget-color-blue2 > .widget-header .widget-title.lighter,
.widget-color-blue > .widget-header .widget-title.lighter,
.widget-color-blue2 > .widget-header .ace-icon,
.widget-color-blue > .widget-header .ace-icon,
.widget-color-blue2 > .widget-header .widget-toolbar,
.widget-color-blue > .widget-header .widget-toolbar,
.widget-color-blue2 > .widget-header .widget-toolbar a,
.widget-color-blue > .widget-header .widget-toolbar a {
	background-color: var(--siro-navy) !important;
	border-color: var(--siro-navy) !important;
	color: #fff !important;
}

/* Badges Ace (#abbac3 + blanco) ilegibles */
.page-content .widget-header .badge,
.page-content .widget-title .badge {
	background-color: var(--siro-navy-mid) !important;
	color: #fff !important;
}
.breadcrumbs .label.label-default {
	background-color: var(--siro-navy) !important;
	color: #fff !important;
}
.page-content .label.label-grey {
	background-color: #3d4d5c !important;
	color: #fff !important;
}

/* Enlaces de contenido: no teñir botones ni menús */
.page-content .widget-main a:not(.btn):not(.ace-icon),
.page-content .table a:not(.btn),
.page-content .form-container a:not(.btn) {
	color: var(--siro-link);
}
.page-content .widget-main a:not(.btn):hover,
.page-content .table a:not(.btn):hover {
	color: var(--siro-navy);
}

/*
 * Acciones Mantis: Ace usa a menudo btn-white + btn-primary (texto #6688a6).
 * Tratar primary/success/info como cara sólida + texto blanco.
 */
.main-content a.btn-primary,
.main-content button.btn-primary,
.main-content input.btn-primary {
	background-color: var(--siro-navy) !important;
	background-image: none !important;
	border-color: var(--siro-navy) !important;
	color: #fff !important;
	font-weight: 600;
}
.main-content a.btn-primary .ace-icon,
.main-content button.btn-primary .ace-icon,
.main-content a.btn-primary .bigger-110,
.main-content button.btn-primary .bigger-110 {
	color: #fff !important;
}
.main-content a.btn-primary:hover,
.main-content button.btn-primary:hover,
.main-content input.btn-primary:hover {
	background-color: var(--siro-navy-mid) !important;
	background-image: none !important;
	border-color: var(--siro-navy-mid) !important;
	color: #fff !important;
}
.main-content a.btn-info,
.main-content button.btn-info,
.main-content input.btn-info {
	background-color: var(--siro-accent-mid) !important;
	background-image: none !important;
	border-color: var(--siro-accent-mid) !important;
	color: #fff !important;
	font-weight: 600;
}
.main-content a.btn-info:hover,
.main-content button.btn-info:hover {
	background-color: var(--siro-navy-mid) !important;
	color: #fff !important;
}

/* Subpestaña Ace .active (p. ej. Configuración): texto #537c9f sobre fondo claro */
.main-content a.btn-primary.active,
.main-content button.btn-primary.active,
.main-content .btn.btn-white.btn-primary.active {
	background-color: #fff !important;
	background-image: none !important;
	border: 1px solid var(--siro-navy) !important;
	border-top: 3px solid var(--siro-accent) !important;
	color: var(--siro-navy) !important;
}

.main-content a.btn-danger,
.main-content button.btn-danger,
.main-content input.btn-danger {
	background-color: #b42318 !important;
	background-image: none !important;
	border-color: #b42318 !important;
	color: #fff !important;
	font-weight: 600;
}
.main-content a.btn-warning,
.main-content button.btn-warning,
.main-content input.btn-warning {
	background-color: #b45309 !important;
	background-image: none !important;
	border-color: #b45309 !important;
	color: #fff !important;
	font-weight: 600;
}

/* Secundarios reales y .btn sin variante (Ace #abbac3 + blanco) */
.main-content a.btn:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-danger):not(.btn-warning):not(.btn-inverse),
.main-content button.btn:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-danger):not(.btn-warning):not(.btn-inverse),
.main-content input.btn:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-danger):not(.btn-warning):not(.btn-inverse),
.main-content .btn-default:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-danger):not(.btn-warning),
.main-content .btn-white:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-danger):not(.btn-warning) {
	background-color: #fff !important;
	background-image: none !important;
	border: 1px solid var(--siro-navy) !important;
	color: var(--siro-navy) !important;
	font-weight: 600;
}

/* Deshabilitados: se distinguen, no desaparecen */
.main-content .btn.disabled,
.main-content .btn[disabled],
.main-content fieldset[disabled] .btn {
	opacity: 0.55;
}
.main-content a.btn-primary.disabled,
.main-content button.btn-primary[disabled],
.main-content input.btn-primary[disabled] {
	color: #fff !important;
	background-color: var(--siro-navy) !important;
}

/* Pestañas de cuenta / admin */
.page-content .nav-tabs > li > a {
	color: var(--siro-navy);
	background-color: #e5e7eb;
	border-color: var(--siro-border);
	font-weight: 600;
}
.page-content .nav-tabs > li > a:hover {
	color: var(--siro-navy);
	background-color: var(--siro-accent-soft);
}
.page-content .nav-tabs > li.active > a,
.page-content .nav-tabs > li.active > a:hover,
.page-content .nav-tabs > li.active > a:focus {
	color: var(--siro-navy);
	background-color: #fff;
	border-color: var(--siro-border);
	border-top: 3px solid var(--siro-accent);
	font-weight: 600;
}

/* Formularios */
.page-content label,
.page-content .control-label,
#login-form label {
	color: var(--siro-navy);
}
.page-content input.form-control,
.page-content select.form-control,
.page-content textarea.form-control,
.page-content input.input-sm,
.page-content select.input-sm,
.page-content textarea.input-sm {
	color: var(--siro-text);
	background-color: #fff;
	border-color: var(--siro-border);
	border-radius: 6px;
}
.page-content input.form-control:focus,
.page-content select.form-control:focus,
.page-content textarea.form-control:focus {
	border-color: var(--siro-accent);
	color: var(--siro-text);
	outline: 2px solid rgba(0, 196, 230, 0.28);
}
.page-content .help-block,
.page-content .form-text {
	color: var(--siro-muted);
}
.page-content ::placeholder {
	color: #5a6a78;
	opacity: 1;
}

/* Tablas */
.page-content table.table > thead > tr > th,
.page-content .table-bordered > thead > tr > th,
.page-content td.category,
.page-content .category {
	background: #eef6fa;
	color: var(--siro-navy);
	font-weight: 600;
	border-color: var(--siro-border);
}
.page-content .table-striped > tbody > tr:nth-of-type(even),
.page-content tr.row-2 {
	background-color: var(--siro-row);
}
.page-content .table-hover > tbody > tr:hover,
.page-content table.table > tbody > tr:hover {
	background-color: var(--siro-accent-soft);
}
.page-content .table-bordered,
.page-content .table-bordered > tbody > tr > td {
	border-color: var(--siro-border);
	color: var(--siro-text);
}

.footer {
	background: transparent;
	color: var(--siro-muted);
	border-top: 1px solid var(--siro-border);
}
.footer a {
	color: var(--siro-link);
}

#navbar .dropdown-menu > li > a,
.main-content .dropdown-menu > li > a {
	color: var(--siro-text);
}
#navbar .dropdown-menu > li > a:hover,
.main-content .dropdown-menu > li > a:hover {
	background-color: var(--siro-accent-soft);
	color: var(--siro-navy);
}

.main-content a.btn-primary:focus,
.main-content button.btn-primary:focus,
#login-form .btn-primary:focus,
.page-content input.form-control:focus {
	outline: 2px solid var(--siro-accent);
	outline-offset: 2px;
}