/* Branding styles derived from logo colors for Crediblamen */
:root{--logo-dark:#021a40; --logo-teal:#00b3ff; --logo-accent:#7fd3ff; --muted:#95a5b0;}

/* 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(4,1fr); gap:1.25rem; max-width:1100px; margin:0 auto; align-items:stretch;}
.menu-card{background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border-radius:.95rem; padding:1.4rem; text-align:center; box-shadow:0 18px 50px rgba(2,18,28,0.18); border:1px solid rgba(255,255,255,0.06); display:flex; flex-direction:column; justify-content:center; backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); position:relative; overflow:visible;}
.menu-btn{display:inline-flex; align-items:center; justify-content:center; width:100%; padding:1.15rem 1rem; border-radius:.85rem; font-weight:700; color:#fff; background:linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.04); text-decoration:none; transition:transform .16s cubic-bezier(.2,.9,.2,1), box-shadow .16s ease, opacity .12s ease; font-size:1.03rem}
.menu-btn.small{padding:.7rem; font-size:.98rem}
.menu-btn:hover{transform:translateY(-8px) scale(1.01); box-shadow:0 22px 60px rgba(2,18,28,0.22);}
.menu-caption{display:block; margin-top:.7rem; color:var(--muted); font-size:.95rem}
/* top accent bar on cards */
.menu-card:before{ content:''; display:block; height:6px; width:64px; border-radius:6px; position:absolute; left:50%; transform:translateX(-50%); top:-10px; background: linear-gradient(90deg, rgba(0,179,255,0.95), rgba(7,48,163,0.95)); box-shadow:0 8px 28px rgba(0,179,255,0.10); }

/* sheen animation */
.menu-card .menu-btn{ position:relative; overflow:hidden; }
.menu-btn::after{ content:''; position:absolute; pointer-events:none; left:-40%; top:-40%; width:80%; height:180%; transform:rotate(25deg) translateX(-100%); background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.06) 100%); transition:transform .9s cubic-bezier(.2,.9,.2,1); border-radius:12px; opacity:0; }
.menu-card .menu-btn:hover::after{ transform:rotate(25deg) translateX(120%); opacity:0.9; }

.menu-btn i{ font-size:1.6rem; margin-right:.7rem; display:inline-flex; align-items:center; justify-content:center; filter:drop-shadow(0 6px 18px rgba(2,18,28,0.12)); }

/* accent pulse */
@keyframes accentPulse{ 0%{ box-shadow:0 8px 30px rgba(0,163,137,0.06);} 50%{ box-shadow:0 18px 56px rgba(0,163,137,0.12);} 100%{ box-shadow:0 8px 30px rgba(0,163,137,0.06);} }
.btn-creditos:hover, .btn-contabilidad:hover{ animation: accentPulse 1.6s ease-in-out; }
/* colored variants */
.btn-creditos{background: linear-gradient(90deg, var(--logo-teal), #0a84d6); box-shadow: 0 12px 42px rgba(0,179,255,0.12);} 
.btn-pld{background: linear-gradient(90deg, #021a40, #0b2a5a); box-shadow:0 10px 36px rgba(7,48,72,0.10);} /* dark blue */
.btn-komani{background: linear-gradient(90deg, #007aa3, #00a3d9); box-shadow:0 10px 36px rgba(0,127,104,0.08);} /* teal variant */
.btn-konami{background: linear-gradient(90deg, #007aa3, #00a3d9); box-shadow: 0 10px 36px rgba(0,127,104,0.10);} /* alias for legacy class name */
.btn-tesoreria{background: linear-gradient(90deg, #7fd3ff, #cfeffd); color:#022235; box-shadow: 0 10px 36px rgba(127,211,255,0.10);} 
.btn-contabilidad{background: linear-gradient(90deg, #0a3b6b, #08305a); box-shadow: 0 12px 44px rgba(10,59,107,0.12);} /* bluish */
.btn-admin{background: linear-gradient(90deg, #495057, #333a40); box-shadow:0 10px 36px rgba(108,117,125,0.06);} /* muted */
@media (max-width: 768px){ .menu-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 480px){ .menu-grid{grid-template-columns:1fr;} }

/* Icon sizing inside menu buttons */
.menu-btn i{ font-size:1.45rem; margin-right:.6rem; display:inline-flex; align-items:center; justify-content:center; }

/* Slightly larger card title feel when only 4 buttons show */
.menu-card .menu-btn{ padding:1.2rem; }
.menu-card .menu-caption{ max-width:260px; margin:0.6rem auto 0; }

/* Accessibility: focus state */
.menu-btn:focus{ outline:3px solid rgba(0,163,137,0.12); outline-offset:3px; }

/* 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 but keep readable text and clear hover/active states */
.navigation-main .submenu-content .menu-item{
	background: #ffffff;
	border: 1px solid rgba(7,48,72,0.03);
	margin: 0.25rem 0;
	color: var(--logo-dark) !important;
	font-weight: 600;
	padding: .45rem 1rem;
}
.navigation-main .submenu-content .menu-item:hover,
.navigation-main .submenu-content .menu-item.active{
	background: linear-gradient(90deg, rgba(0,163,137,0.06), rgba(7,48,72,0.02));
	color: var(--logo-teal) !important;
	box-shadow: 0 6px 18px rgba(7,48,72,0.04);
}

/* 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; }