/* ==========================================================================
   SISTEMATICO - Identidad de marca (Brand override)
   Aplica la paleta oficial sobre el theme Gentelella sin modificar el original.
   Cargar SIEMPRE después de custom.min.css.
   Manual de identidad: web/manual-identidad/index.html
   ========================================================================== */

:root{
	/* Colores oficiales SISTEMATICO */
	--smt-primary:    #0D3B66;   /* Azul portuario */
	--smt-primary-2:  #0A2E52;   /* hover/dark */
	--smt-accent:     #22D3EE;   /* Cyan eléctrico */
	--smt-accent-2:   #06B6D4;   /* hover */
	--smt-secondary:  #F4A259;   /* Naranjo cálido */
	--smt-bg:         #0A1124;   /* Fondo oscuro principal */
	--smt-bg-alt:     #0E1730;   /* Fondo alterno */
	--smt-bg-deep:    #060C1C;   /* Fondo extremo */
	--smt-bg-card:    #1A2138;   /* Tarjeta dark */
	--smt-light:      #F4F6FB;   /* Light surface */
	--smt-text:       #E6EDF7;   /* Texto primario sobre dark */
	--smt-soft:       #AAB4C8;   /* Texto soft */
	--smt-mute:       #6B7895;   /* Texto mute */
	--smt-border:     #1A2138;   /* Borde dark */
	--smt-border-l:   #E6E9ED;   /* Borde light */

	/* Semántica de estado */
	--smt-success:    #4ADE80;
	--smt-warning:    #F4A259;
	--smt-danger:     #FF6B6B;
	--smt-info:       #22D3EE;
}

/* === Tipografía Inter (manual de identidad) === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
body, .nav-md, .login_content, .form-control, .btn, .panel, .x_panel, .x_title h2{
	font-family: Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}

/* === Sidebar (left_col) === */
.nav-md .container.body .col-md-3.left_col,
.nav-md .container.body .col-md-3.left_col .left_col.scroll-view,
body .col-md-3.left_col,
body .left_col.scroll-view{
	background: var(--smt-bg) !important;
}
.nav_title{
	background: var(--smt-bg-deep) !important;
	border: 0 !important;
}
.site_title, .site_title:hover, .site_title:focus{
	color: var(--smt-accent) !important;
	background: var(--smt-bg-deep) !important;
	border-bottom: 1px solid rgba(255,255,255,0.06) !important;
	padding: 8px 12px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.site_title img{
	max-height: 38px !important;
	width: auto !important;
	height: auto !important;
}
.profile_info span{ color: var(--smt-soft) !important; }
.profile_info h2{ color: #fff !important; font-weight: 600 !important; }

.nav.side-menu > li{ border: 0 !important; }
.nav.side-menu > li > a{
	color: var(--smt-soft) !important;
	border-radius: 0 !important;
	transition: all .2s ease;
}
.nav.side-menu > li > a:hover{
	background: rgba(34,211,238,0.08) !important;
	color: var(--smt-accent) !important;
}
.nav.side-menu > li.active > a,
.nav.side-menu > li.current-page > a{
	background: linear-gradient(90deg, rgba(34,211,238,0.18), transparent) !important;
	color: var(--smt-accent) !important;
	border-left: 3px solid var(--smt-accent) !important;
}
.nav.child_menu li a{ color: var(--smt-soft) !important; }
.nav.child_menu li a:hover,
.nav.child_menu li.active a{ color: var(--smt-accent) !important; background: rgba(34,211,238,0.06) !important; }
.menu_section h3{
	color: var(--smt-mute) !important;
	font-size: 10px;
	letter-spacing: 1.5px;
	font-weight: 600;
}

/* === Top nav === */
.top_nav .nav_menu{
	background: #fff !important;
	border-bottom: 1px solid var(--smt-border-l) !important;
}
.top_nav .navbar-nav > li > a{ color: var(--smt-primary) !important; }
.top_nav .navbar-nav > li > a:hover{ color: var(--smt-accent) !important; }

/* === Page title / breadcrumbs === */
.page-title h3, .page-title h3 small{ color: var(--smt-primary) !important; font-weight: 600 !important; }

/* === Botones === */
.btn-primary, .btn-success.btn-primary{
	background-color: var(--smt-primary) !important;
	border-color: var(--smt-primary) !important;
	color: #fff !important;
	transition: all .2s ease;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active{
	background-color: var(--smt-primary-2) !important;
	border-color: var(--smt-primary-2) !important;
	color: #fff !important;
}
.btn-info{
	background-color: var(--smt-accent) !important;
	border-color: var(--smt-accent) !important;
	color: #001018 !important;
	font-weight: 600;
}
.btn-info:hover{
	background-color: var(--smt-accent-2) !important;
	border-color: var(--smt-accent-2) !important;
	color: #001018 !important;
}
.btn-warning{
	background-color: var(--smt-secondary) !important;
	border-color: var(--smt-secondary) !important;
	color: #3a2008 !important;
}
.btn-success{
	background-color: var(--smt-success) !important;
	border-color: var(--smt-success) !important;
}
.btn-danger{
	background-color: var(--smt-danger) !important;
	border-color: var(--smt-danger) !important;
}

/* === Paneles / cards === */
.x_panel{
	border: 1px solid var(--smt-border-l) !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 3px rgba(13,59,102,0.05) !important;
}
.x_title{
	border-bottom: 2px solid var(--smt-primary) !important;
}
.x_title h2{
	color: var(--smt-primary) !important;
	font-weight: 600 !important;
}
.x_title h2 small{ color: var(--smt-mute) !important; }

/* === Links === */
a{ color: var(--smt-primary); }
a:hover, a:focus{ color: var(--smt-accent); }

/* === Forms === */
.form-control:focus{
	border-color: var(--smt-accent) !important;
	box-shadow: 0 0 0 3px rgba(34,211,238,0.15) !important;
}
.has-success .form-control{ border-color: var(--smt-success) !important; }

/* === Badges / labels === */
.label-primary, .badge-primary{ background-color: var(--smt-primary) !important; }
.label-info, .badge-info{ background-color: var(--smt-accent) !important; color: #001018 !important; }
.label-warning, .badge-warning{ background-color: var(--smt-secondary) !important; }

/* === DataTables === */
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
	background: var(--smt-primary) !important;
	color: #fff !important;
	border-color: var(--smt-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
	background: var(--smt-accent) !important;
	color: #001018 !important;
	border-color: var(--smt-accent) !important;
}

/* === Tarjetas KPI (las nuevas que creamos en pag_principal) === */
.kpi-card{
	border-color: var(--smt-border-l) !important;
}
.kpi-card:hover{
	box-shadow: 0 4px 14px rgba(13,59,102,0.10) !important;
}
.kpi-title{ color: var(--smt-mute) !important; }
.kpi-value{ color: var(--smt-primary) !important; }
.kpi-sub{ color: var(--smt-mute) !important; }

/* === Login (index.php) === */
body.login{
	background: linear-gradient(135deg, var(--smt-bg) 0%, var(--smt-primary) 100%) !important;
}
.login_wrapper, .login_form, .login_content{
	background: rgba(255,255,255,0.97) !important;
	border-radius: 12px !important;
	box-shadow: 0 20px 60px rgba(10,17,36,0.45) !important;
}

/* === Footer === */
footer{
	background: var(--smt-bg-deep) !important;
	color: var(--smt-soft) !important;
	border-top: 1px solid var(--smt-border) !important;
}
footer a{ color: var(--smt-accent) !important; }

/* === Misc === */
.profile_pic{ background: rgba(255,255,255,0.04); border-radius: 50%; padding: 2px; }
.profile_pic .img-circle{ border: 2px solid var(--smt-accent) !important; }
hr{ border-top-color: var(--smt-border-l) !important; }
::selection{ background: var(--smt-accent); color: #001018; }