/* Branding styles derived from logo colors for Crediblamen */
:root{--logo-dark:#073048; --logo-teal:#00a389; --logo-accent:#ffd34a; --muted:#6c757d;}

/* Login card highlight */
.auth-wrapper .card.highlighted{ position:relative; overflow:visible; border-radius:.75rem; }
.auth-wrapper .card.highlighted .card-body{ background:#ffffff; border-radius:.6rem; }
.auth-wrapper .card.highlighted{ border:2px solid rgba(0,0,0,0.03); box-shadow:0 10px 30px rgba(7,48,72,0.06); }
.auth-wrapper .card.highlighted:before{ content:""; position:absolute; left:-2px; top:-2px; right:-2px; bottom:-2px; z-index:-1; border-radius:.85rem; background: linear-gradient(90deg, rgba(0,163,137,0.18), rgba(255,211,74,0.14)); }
.auth-wrapper .card.highlighted .card-footer{ border-top: none; }
.auth-wrapper .btn-primary{ background:var(--logo-teal); border-color:var(--logo-teal); }
.auth-wrapper .btn-primary:hover{ background:#007f68; border-color:#007f68; }
.auth-wrapper .text-muted, .auth-wrapper .small{ color:var(--muted); }
.auth-wrapper input:focus{ box-shadow:0 0 0 0.2rem rgba(0,163,137,0.12); border-color:var(--logo-teal); }
.auth-wrapper a.small{ color:var(--logo-dark); }

/* Menu grid */
.menu-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; max-width:940px; margin:0 auto;}
.menu-card{background:#fff; border-radius:.75rem; padding:1.5rem; text-align:center; box-shadow:0 6px 18px rgba(7,48,72,0.06); border:1px solid rgba(0,0,0,0.04);}
.menu-btn{display:inline-flex; align-items:center; justify-content:center; width:100%; padding:1rem; border-radius:.6rem; font-weight:600; color:#fff; background:var(--logo-dark); text-decoration:none; transition:transform .12s ease, box-shadow .12s ease;}
.menu-btn.small{padding:.6rem; font-size:.95rem}
.menu-btn:hover{transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,0.08)}
.menu-caption{display:block; margin-top:.6rem; color:var(--muted); font-size:.9rem}
/* colored variants */
.btn-creditos{background: linear-gradient(90deg, var(--logo-teal), #007f68);} 
.btn-pld{background: linear-gradient(90deg, #073048, #0b3e57);} /* dark blue */
.btn-komani{background: linear-gradient(90deg, #005f5a, #007f68);} /* teal variant */
.btn-tesoreria{background: linear-gradient(90deg, #f39c12, #ffd34a); color:#2b2b2b}
.btn-contabilidad{background: linear-gradient(90deg, #2b6ca3, #1f4f78);} /* bluish */
.btn-admin{background: linear-gradient(90deg, #6c757d, #495057);} /* muted */
@media (max-width: 768px){ .menu-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 480px){ .menu-grid{grid-template-columns:1fr;} }

/* Home/dashboard accents */
.page-wrap .prod-p-card{ position:relative; overflow:visible; border-radius:.75rem; border:2px solid rgba(0,0,0,0.03); box-shadow:0 10px 30px rgba(7,48,72,0.06); }
.page-wrap .prod-p-card:before{ content:""; position:absolute; left:-2px; top:-2px; right:-2px; bottom:-2px; z-index:-1; border-radius:.85rem; background: linear-gradient(90deg, rgba(0,163,137,0.12), rgba(255,211,74,0.08)); }
.page-header-title i{ background:linear-gradient(90deg,var(--logo-dark),var(--logo-teal)); color:#fff; padding:12px; border-radius:.5rem; }
.card-header.bg-blue{ background: linear-gradient(90deg,var(--logo-dark),var(--logo-teal)); }
.card.prod-p-card .text-white a{ color: #fff; font-weight:600; }
.page-wrap a.text-white{ color:#fff !important; }
.page-wrap .label a{ color:#fff; }
.page-wrap .table thead th{ background: linear-gradient(90deg, rgba(7,48,72,0.03), rgba(0,163,137,0.02)); }
.page-wrap input:focus, .page-wrap select:focus{ box-shadow:0 0 0 0.2rem rgba(0,163,137,0.08); border-color:var(--logo-teal); }

/* Chart / dashboard card styles - futuristic, elegant look */
.card.chart-card{
	border-radius: 1rem;
	overflow: hidden;
	border: 1px solid rgba(7,48,72,0.04);
	background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(250,250,250,0.95));
	box-shadow: 0 10px 30px rgba(7,48,72,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
}
.card.chart-card .card-header{ background: transparent; border-bottom: none; padding: .9rem 1rem; }
.card.chart-card .card-header h6{ font-weight:700; letter-spacing:0.6px; color:var(--logo-dark); }
.card.chart-card .card-body{ padding:1rem 1rem 1.25rem 1rem; }

/* subtle accent line at top using brand gradient */
.card.chart-card:before{
	content: '';
	display:block;
	height:4px;
	background: linear-gradient(90deg, rgba(0,163,137,1), rgba(7,48,72,0.9));
	margin-top:0;
}

/* Chart canvas container to add padding and center */
.chart-canvas-wrap{ padding:12px; background: transparent; }

/* Legend and tooltip refinements (fallbacks) */
.chartjs-tooltip{ background: rgba(7,48,72,0.95); color: #fff; border-radius:6px; padding:8px 10px; font-size:0.9rem; }

/* Make axes and gridlines subtle */
.chartjs-render-monitor{ display:block; }

/* Chart toolbar and action buttons */
.chart-toolbar .chart-action-btn{
	background: linear-gradient(90deg, rgba(0,163,137,0.95), rgba(7,48,72,0.9));
	color: #fff;
	border: none;
	padding: .45rem .75rem;
	margin-right: .35rem;
	border-radius: .5rem;
	font-weight:600;
	box-shadow: 0 6px 18px rgba(7,48,72,0.08);
	transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.chart-toolbar .chart-action-btn:hover{ transform: translateY(-3px); box-shadow: 0 10px 28px rgba(7,48,72,0.12); opacity:0.98; }
.chart-toolbar .chart-action-btn:active{ transform: translateY(-1px); }
.chart-action-icon{ margin-right: .45rem; }

/* Make toolbar card lighter to separate from chart cards */
.chart-toolbar .card-body{ background: transparent; padding: .6rem 1rem; }

/* Toolbar title styling */
.chart-toolbar .toolbar-title h6{ margin:0; font-weight:700; color:var(--logo-dark); letter-spacing:0.2px; }

/* Solicitud form section titles - elegant emphasis */
.solicitud-section-title{
	font-size:1.05rem;
	font-weight:800;
	color:var(--logo-dark);
	letter-spacing:1px;
	margin:1rem 0 0.5rem 0;
	padding-bottom:6px;
	border-bottom:3px solid rgba(0,163,137,0.12);
}

.solicitud-field-label{
	text-transform:uppercase;
	font-weight:700;
	color:rgba(7,48,72,0.85);
	font-size:0.85rem;
	letter-spacing:0.6px;
}

/* Upcoming / loading state styles used by reportes/* views */
.upcoming-title{ font-size:1.75rem; color:var(--logo-dark); font-weight:800; margin-bottom:.25rem; }
.upcoming-sub{ color:rgba(7,48,72,0.7); margin-bottom:1rem; font-size:1rem; }
.upcoming-progress{ height:14px; background:linear-gradient(90deg, rgba(7,48,72,0.03), rgba(7,48,72,0.02)); border-radius:999px; overflow:hidden; max-width:560px; margin:0 auto; }
.upcoming-progress .progress-bar{ background: linear-gradient(90deg, rgba(0,163,137,0.95), rgba(7,48,72,0.9)); width:0%; height:100%; transition: width .6s cubic-bezier(.2,.8,.2,1); box-shadow:0 6px 18px rgba(7,48,72,0.08); }
.upcoming-progress .progress-bar.pulse{ animation: pulseGlow 1.8s infinite; }
@keyframes pulseGlow{ 0%{ box-shadow: 0 6px 18px rgba(7,48,72,0.08); } 50%{ box-shadow: 0 14px 30px rgba(0,163,137,0.12); } 100%{ box-shadow: 0 6px 18px rgba(7,48,72,0.08); } }


/* Sidebar (elegant financial look) */
.app-sidebar.colored{ background: #fff; color:var(--logo-dark); border-right:1px solid rgba(7,48,72,0.04); }
.app-sidebar .sidebar-header{ padding:1rem 1rem; display:flex; align-items:center; justify-content:space-between; }
.app-sidebar .header-brand{ display:flex; align-items:center; gap:.6rem; color:var(--logo-dark); text-decoration:none; }

/* Make the small header logo area white so the uploaded logo blends in */
.app-sidebar .header-brand .logo-wrap {
	background: #ffffff; /* white background behind the logo */
	padding: 4px; /* small padding so circular logo doesn't touch edges */
	border-radius: 8px;
	display: inline-block;
}

.app-sidebar .header-brand img.header-brand-img {
	/* keep logo size consistent */
	width: 36px;
	height: 36px;
	object-fit: contain;
}

/* Make the header area visually white and ensure menu text contrasts well */
.app-sidebar .sidebar-header {
	background: #ffffff; /* white header */
}

/* Override compiled theme which sets .app-sidebar.colored .sidebar-header to dark */
.wrapper .page-wrap .app-sidebar.colored .sidebar-header {
	background-color: #ffffff !important;
}

.wrapper .page-wrap .app-sidebar.colored .sidebar-header .header-brand {
	color: var(--logo-dark) !important;
}

/* Ensure the nav toggle / close buttons in the header are dark (they were white in theme.css) */
.wrapper .page-wrap .app-sidebar.colored .sidebar-header .nav-toggle,
.wrapper .page-wrap .app-sidebar.colored .sidebar-header .nav-close,
.wrapper .page-wrap .app-sidebar.colored .sidebar-header .nav-toggle i,
.wrapper .page-wrap .app-sidebar.colored .sidebar-header .nav-close i {
	color: var(--logo-dark) !important;
}

/* Menu links in the sidebar should use the brand dark color for good contrast on white header */
.app-sidebar .navigation-main .nav-item a,
.app-sidebar .navigation-main .nav-item a span,
.app-sidebar .navigation-main .menu-item {
	color: var(--logo-dark);
}

.app-sidebar .navigation-main .nav-item a:hover,
.app-sidebar .navigation-main .nav-item.active a {
	color: var(--logo-teal);
}

/* Navbar (top) icon adjustments: ensure the logout/power icon is visible over white header */
header.header-top .dropdown-icon,
header.header-top .ik {
	color: var(--logo-dark) !important;
}
.app-sidebar .header-brand .text{ font-weight:700; letter-spacing:0.6px; color:var(--logo-dark); }
.app-sidebar .header-brand-img{ box-shadow:0 6px 18px rgba(7,48,72,0.06); border:1px solid rgba(7,48,72,0.04); }
.sidebar-profile{ border-top:1px solid rgba(7,48,72,0.03); }
.sidebar-profile .profile-img img{ box-shadow:0 6px 18px rgba(7,48,72,0.06); border:1px solid rgba(7,48,72,0.04); }
.sidebar-profile .profile-name{ color:var(--logo-dark); }
.sidebar-profile .profile-role{ color:rgba(7,48,72,0.6); }

.navigation-main .nav-lavel{ color:rgba(7,48,72,0.6); padding:0.75rem 1rem; font-size:.75rem; text-transform:uppercase; letter-spacing:1px; }
.navigation-main .nav-item{ margin:0.2rem 0; }
.navigation-main .nav-item a{ display:flex; align-items:center; gap:.75rem; padding:.65rem 1rem; color:var(--logo-dark); text-decoration:none; border-radius:.5rem; transition:all .12s ease; text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
.navigation-main .nav-item a i{ background:rgba(0,163,137,0.06); color:var(--logo-dark); padding:8px; border-radius:8px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; }
.navigation-main .nav-item a span{ font-weight:600; color:var(--logo-dark); }
.navigation-main .nav-item a:hover{ background: linear-gradient(90deg, rgba(0,163,137,0.03), rgba(7,48,72,0.01)); transform:translateX(4px); color:var(--logo-dark); }
.navigation-main .nav-item.active a{ background: linear-gradient(90deg, rgba(0,163,137,0.14), rgba(7,48,72,0.04)); color:var(--logo-dark); box-shadow:0 6px 22px rgba(7,48,72,0.06); }
.navigation-main .nav-item a{
	background: #ffffff; /* force white background for each menu option */
	border: 1px solid rgba(7,48,72,0.03);
}

.navigation-main .nav-item a i{
	background: rgba(7,48,72,0.03); /* subtle icon background to keep contrast on white */
}

.navigation-main .nav-item a:hover{
	background: linear-gradient(90deg, rgba(0,163,137,0.04), rgba(7,48,72,0.02));
	color: var(--logo-dark);
}

.navigation-main .nav-item.active a{
	background: linear-gradient(90deg, rgba(0,163,137,0.12), rgba(7,48,72,0.03));
	box-shadow: 0 6px 18px rgba(7,48,72,0.04);
}
.navigation-main .nav-item.has-sub > a:after{ content:'\25BE'; margin-left:auto; opacity:.7; color:var(--logo-dark); }
.navigation-main .submenu-content{ background:transparent; padding-left:1.25rem; }
.navigation-main .submenu-content .menu-item{ color:rgba(7,48,72,0.85); padding:.45rem 1rem; display:block; border-radius:.4rem; }
.navigation-main .submenu-content .menu-item:hover{ background: rgba(0,163,137,0.03); }

/* Make submenu items white by default too */
.navigation-main .submenu-content .menu-item{
	background: #ffffff;
	border: 1px solid rgba(7,48,72,0.03);
	margin: 0.25rem 0;
}

/* Compact when collapsed */
.app-sidebar.collapsed .sidebar-profile, .app-sidebar.collapsed .navigation-main .nav-lavel, .app-sidebar.collapsed .navigation-main .submenu-content{ display:none; }
.app-sidebar.collapsed .navigation-main .nav-item a{ justify-content:center; padding-left:0.6rem; padding-right:0.6rem; }

/* Ensure the user/profile icon in the top navbar remains white (overrides earlier dark rule) */
header.header-top .dropdown-toggle .ik.ik-user,
header.header-top #userDropdown > i.ik.ik-user,
header.header-top .dropdown-toggle .ik.ik-user.ik-2x {
	color: #ffffff !important;
	text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

/* keep the dropdown menu icons darker inside the opened dropdown (no visual conflict) */
header.header-top .dropdown-menu .dropdown-icon { color: var(--logo-dark) !important; }