/* ===========================================================
   Servicios Portalup - shared UI skin
   Used by: buscador_egresados.php, verificate.php, planilla.php

   Note: colors are written as plain hex values on purpose (no CSS
   custom properties) so this renders correctly even on older
   browsers that don't support var().
   =========================================================== */

html, body.svc-page{
	height:100%;
}
body.svc-page{
	margin:0;
	background:#eef1f7;
	font-family:"Segoe UI", Helvetica, Arial, sans-serif;
	color:#16244f;
}
/* Footer always at the bottom of the page: #wrap is at least as tall as
   the viewport, and the footer is pulled up by its own height so it
   sits flush right after it when content is short. */
body.svc-page #wrap{
	min-height:100%;
	box-sizing:border-box;
	padding-bottom:110px;
}
body.svc-page .svc-footer{
	position:relative;
	margin-top:-110px;
	height:110px;
	box-sizing:border-box;
}

/* ---------- Navbar ---------- */
.svc-navbar{
	background:#00266b;
	color:#ffffff;
	padding:14px 28px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:12px;
}
.svc-navbar__brand{
	display:flex;
	align-items:center;
	gap:14px;
}
.svc-navbar__logo{
	height:44px;
	width:44px;
	border-radius:50%;
	object-fit:cover;
	background:#ffffff;
}
.svc-navbar__name{
	font-weight:700;
	font-size:18px;
	line-height:1.2;
	letter-spacing:.3px;
	color:#ffffff;
	white-space:nowrap;
}
.svc-navbar__right{
	font-size:13px;
	color:#dfe3f5;
	display:flex;
	align-items:center;
	gap:26px;
}
.svc-navbar__link{
	display:inline-flex;
	align-items:center;
	gap:6px;
	color:#ffffff;
	text-decoration:none;
	font-size:13.5px;
}
.svc-navbar__link:hover{
	color:#cfe0f7;
	text-decoration:none;
}
.svc-navbar__link .glyphicon{
	font-size:13px;
}

/* ---------- Hero ---------- */
.svc-hero{
	position:relative;
	background-color:#eaf3fc;
	background-image:
		radial-gradient(ellipse 60% 140% at 100% 0%, rgba(0,86,178,.16), transparent 60%),
		linear-gradient(120deg, rgba(0,50,115,.10) 0%, rgba(0,86,178,.06) 45%, rgba(255,255,255,0) 75%);
	padding:34px 28px 40px;
}
.svc-hero__inner{
	max-width:1100px;
	margin:0 auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;
	flex-wrap:wrap;
}
.svc-hero__eyebrow-text{
	font-size:12.5px;
	font-weight:700;
	letter-spacing:.6px;
	text-transform:uppercase;
	color:#00266b;
	margin-bottom:6px;
}
.svc-hero__title{
	font-size:32px;
	font-weight:800;
	color:#0f2a5c;
	margin:0 0 8px;
}
.svc-hero__title .svc-hero__accent{
	color:#0056b2;
}
.svc-hero__subtitle{
	font-size:15px;
	color:#3b4b66;
	max-width:560px;
	line-height:1.5;
}
.svc-hero__mark{
	flex:none;
	display:flex;
	align-items:center;
	gap:12px;
	color:#0f2a5c;
	opacity:.9;
}
.svc-hero__mark-text{
	font-size:13px;
	line-height:1.3;
	max-width:170px;
}
.svc-hero__mark-text b{
	display:block;
	font-size:22px;
	letter-spacing:1px;
	color:#0056b2;
}

/* ---------- Container / cards ---------- */
.svc-container{
	max-width:1100px;
	margin:24px auto 40px;
	padding:0 20px;
	box-sizing:border-box;
}
.svc-card{
	background:#ffffff;
	border-radius:18px;
	box-shadow:0 14px 34px rgba(15,26,61,.10);
	padding:26px 28px 28px;
	margin-bottom:22px;
}
.svc-card__header{
	display:flex;
	align-items:flex-start;
	gap:14px;
	margin-bottom:20px;
	flex-wrap:wrap;
}
.svc-card__icon{
	flex:none;
	width:44px;
	height:44px;
	border-radius:50%;
	background:#dceafc;
	color:#0056b2;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:18px;
}
.svc-card__heading{
	font-size:19px;
	font-weight:700;
	color:#16244f;
	margin:0;
}
.svc-card__subheading{
	font-size:13px;
	color:#606a7b;
	margin-top:2px;
}
.svc-card__header-extra{
	margin-left:auto;
	display:flex;
	align-items:center;
	gap:8px;
	font-size:13px;
	color:#606a7b;
}
.svc-card__header-extra b{
	color:#0f2a5c;
}

/* ---------- Fields ---------- */
.svc-fields{
	display:flex;
	flex-wrap:wrap;
	gap:16px;
	margin-bottom:20px;
}
.svc-field{
	flex:1 1 200px;
	min-width:170px;
}
.svc-field label{
	display:block;
	font-size:13px;
	font-weight:600;
	color:#0f2a5c;
	margin-bottom:7px;
}
.svc-field__control{
	position:relative;
}
.svc-field__control .glyphicon{
	position:absolute;
	left:13px;
	top:50%;
	transform:translateY(-50%);
	color:#93a0b3;
	font-size:13px;
	pointer-events:none;
}
.svc-field__control input{
	padding-left:36px;
}
.svc-field .form-control,
.svc-field select.form-control{
	border:1px solid #e2e6ee;
	background:#f3f5f9;
	border-radius:10px;
	height:42px;
	font-size:14px;
	box-shadow:none;
	width:100%;
}
.svc-field .form-control:focus{
	border-color:#2f7dd1;
	background:#ffffff;
	box-shadow:0 0 0 3px #e3eefb;
}

/* ---------- Buttons ---------- */
.svc-actions{
	display:flex;
	flex-wrap:wrap;
	gap:14px;
}
.svc-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	height:46px;
	padding:0 26px;
	border-radius:10px;
	font-size:14px;
	font-weight:600;
	border:1px solid transparent;
	cursor:pointer;
}
.svc-btn-primary{
	background:#0f2a5c;
	color:#ffffff;
	box-shadow:0 10px 20px rgba(15,42,92,.25);
}
.svc-btn-primary:hover, .svc-btn-primary:focus{
	color:#ffffff;
	background:#0a1f47;
}
.svc-btn-outline{
	background:#ffffff;
	color:#0056b2;
	border-color:#e2e6ee;
}
.svc-btn-outline:hover, .svc-btn-outline:focus{
	color:#0056b2;
	background:#f3f5f9;
}

/* ---------- Alerts ---------- */
.svc-alert{
	border-radius:12px;
	padding:14px 18px;
	font-size:14px;
	margin-bottom:20px;
}
.svc-alert-danger{
	background:#fdecec;
	color:#a12626;
	border:1px solid #f6c9c9;
}
.svc-alert-info{
	background:#e3eefb;
	color:#003273;
	border:1px solid #bcd9f5;
}

/* ---------- Results table ---------- */
.svc-table-wrap{
	border-radius:12px;
	overflow-x:auto;
	overflow-y:hidden;
}

/* planilla.php has many columns (position, name, unit, position, salary,
   dates, expense status...) that don't fit a 1100px card - give that
   page a wider container and let its table scroll horizontally instead
   of squeezing every column unreadably thin. */
.planilla-page .svc-container{
	max-width:1500px;
}
.planilla-page .svc-table-wrap table{
	min-width:1450px;
}
.svc-table-wrap table.dataTable,
.svc-table-wrap table{
	margin:0 !important;
	width:100% !important;
}
.svc-table-wrap table thead th{
	background-color:#eef2f8 !important;
	color:#0f2a5c !important;
	border:none !important;
	font-size:12.5px;
	font-weight:700;
	letter-spacing:.2px;
	padding:14px 16px !important;
}
.svc-table-wrap table tbody td{
	padding:14px 16px;
	font-size:13.5px;
	vertical-align:middle;
	border-top:1px solid #e2e6ee !important;
}
.svc-table-wrap table tbody tr:nth-child(odd){
	background:#fafbfd;
}
.svc-table-wrap table tbody tr:hover{
	background:#e3eefb;
}
.svc-view-link{
	display:inline-flex;
	align-items:center;
	gap:6px;
	color:#0056b2;
	font-weight:600;
	text-decoration:none;
	cursor:pointer;
	background:none;
	border:none;
	padding:0;
}
.svc-view-link:hover{
	color:#0f2a5c;
	text-decoration:underline;
}
.dataTables_wrapper .dataTables_length select{
	border-radius:8px;
	border:1px solid #e2e6ee;
	padding:4px 8px;
}
.dataTables_wrapper .dataTables_info{
	color:#606a7b;
	font-size:13px;
	padding-top:16px !important;
}
.dataTables_wrapper .dataTables_paginate .pagination>li>a,
.dataTables_wrapper .dataTables_paginate .pagination>li>span{
	border-radius:8px !important;
	margin-left:4px;
	border:1px solid #e2e6ee;
	color:#16244f;
}
.dataTables_wrapper .dataTables_paginate .pagination>li.active>a{
	background:#0056b2;
	border-color:#0056b2;
	color:#ffffff;
}

/* ---------- Info card (verificate result) / detail modal ---------- */
.svc-info-table,
.svc-detail-table{
	width:100%;
	border-collapse:collapse;
}
.svc-info-table caption{
	text-align:left;
	padding:0 0 14px;
	font-size:15px;
	font-weight:700;
	color:#16244f;
}
.svc-info-table td,
.svc-detail-table td{
	padding:10px 4px;
	border-top:1px solid #e2e6ee;
	font-size:14px;
}
.svc-info-table td:first-child,
.svc-detail-table td:first-child{
	color:#606a7b;
	width:45%;
}

/* ---------- Footer ---------- */
.svc-footer{
	background:#00266b;
	color:#dfe3f5;
	padding:18px 28px;
	display:flex;
	flex-direction:column;
	align-items:stretch;
	gap:10px;
	font-size:13px;
	box-sizing:border-box;
}
.svc-footer__top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:16px;
}
.svc-footer__brand{
	display:flex;
	align-items:center;
	gap:14px;
}
.svc-footer__logo{
	height:38px;
	width:38px;
	border-radius:50%;
	object-fit:cover;
	background:#ffffff;
}
.svc-footer__divider{
	width:1px;
	align-self:stretch;
	background:rgba(255,255,255,.25);
	margin:0 4px;
}
.svc-footer__tagline{
	font-style:italic;
	color:#b9c0e0;
	text-align:right;
}
.svc-footer__links{
	display:flex;
	gap:26px;
	flex-wrap:wrap;
}
.svc-footer__links a{
	display:inline-flex;
	align-items:center;
	gap:6px;
	color:#dfe3f5;
	text-decoration:none;
	font-size:13px;
}
.svc-footer__links a:hover{
	color:#ffffff;
	text-decoration:none;
}

@media (max-width: 900px){
	.svc-hero__mark{ display:none; }
}
@media (max-width: 768px){
	.svc-hero__title{ font-size:26px; }
	.svc-card__header-extra{ margin-left:0; }
	.svc-navbar{ flex-direction:column; align-items:flex-start; }
	.svc-footer__tagline{ text-align:left; }
}