/* ===== RESET BASE PROFESIONAL ===== */
html, body{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

*, *::before, *::after{
	box-sizing: border-box;
}

body{
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Elimina márgenes por defecto en textos */
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd{
	margin: 0;
}

/* Imágenes y media fluidos */
img, picture, video, canvas, svg{
	display: block;
	max-width: 100%;
}

/* Inputs heredan fuente */
input, button, textarea, select{
	font: inherit;
}

/* Evita overflow horizontal fantasma */
body{
	overflow-x: hidden;
}





		*{ box-sizing:border-box; }
		html, body { height:100%; }
		body{
			margin:0;
			font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
			color: var(--text);
			background:
				radial-gradient(1200px 600px at 20% 10%, rgba(79,124,255,0.25), transparent 55%),
				radial-gradient(900px 500px at 80% 20%, rgba(124,77,255,0.22), transparent 55%),
				radial-gradient(900px 500px at 70% 90%, rgba(90, 10, 10,.12), transparent 60%),
				linear-gradient(180deg, #070b16, #0b1020);
			overflow-x:hidden;
		}

		a{ color:inherit; text-decoration:none; }
		button, input, select, textarea{ font-family:inherit; }

span.amarillo { color: var(--amarillo); }
span.cielo { color: var(--cielo); }

/* ===== Layout ===== */
.app{
	display: grid;
	grid-template-columns: 220px 1fr;
	height: 100vh;
	overflow: hidden;
	transition: grid-template-columns 0.25s ease;
}

/* Estado colapsado */
.app.sidebar-collapsed{
	grid-template-columns: 78px 1fr;
}

/* ===== Sidebar collapsed INIT (anti-flash) ===== */
.sidebar-collapsed-init .app{
	grid-template-columns: 78px 1fr !important;
	transition: none !important;
}

.sidebar-collapsed-init .sidebar{
	padding: 16px 8px !important;
}

.sidebar-collapsed-init .nav a{
	transition: none !important;
}

/* ===== Main ===== */
.main{
	padding: 22px 22px 30px;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}

/* ===== Topbar ===== */
.topbar{
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}

/* Empuja acciones a la derecha */
.topbar .actions{
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

.titleblock{
	min-width: 0;
}

.titleblock h1 {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 10px;
}


		.search{
			position:relative;
			width: 360px;
			max-width: 60vw;
		}
		.search input{
			width:100%;
			padding: 12px 14px 12px 40px;
			border-radius: 16px;
			border:1px solid rgba(255,255,255,0.10);
			background: rgba(255,255,255,0.06);
			color: var(--text);
			outline:none;
			transition: 0.18s ease;
		}
		.search input:focus{
			border-color: rgba(79,124,255,0.35);
			box-shadow: 0 0 0 4px rgba(79,124,255,0.10);
		}
		.search .iconosearch {
			position:absolute;
			left:14px;
			top:50%;
			transform:translateY(-50%);
			opacity:0.65;
			font-size:14px;
		}


		/* ===== Cards / grid ===== */
		.grid{
			display:grid;
			grid-template-columns: 1fr 1fr;
			gap: 16px;
			align-items:start;
		}

.grid-parcelas{
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 800px);
	gap: 16px;
	align-items: start;
}

.grid-parcela{
	display: grid;
	grid-template-columns: minmax(0, 400px) minmax(0, 500px);
	gap: 16px;
	align-items: start;
}
.grid-ficha{
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 2px;
	align-items: start;
	line-height:1.6;
}

@media (max-width: 1000px){
	.grid-parcelas{	grid-template-columns: 1fr; }
}

		.card{
			background: rgba(255,255,255,0.05);
			border:1px solid rgba(255,255,255,0.10);
			border-radius: var(--radius);
			box-shadow: var(--shadow2);
			overflow:hidden;
			padding: 16px;
			margin-top: 20px;
		}

		.card-head{
			padding: 14px 16px;
			border-bottom:1px solid rgba(255,255,255,0.08);
			display:flex;
			align-items:center;
			justify-content:space-between;
			gap:10px;
		}
		span.concepto {
			width: 160px;
			font-weight: bold;
			display: inline-block;
		}

.card h3 {
	margin:0;
	font-size:15px;
	font-weight:800;
	margin-bottom:12px;
}
		.card-head .sub{
			margin:0;
			color: var(--muted);
			font-size:12px;
			margin-top:3px;
		}
		.card-body{
			padding: 16px;
		}

hr {
	border:none;
	border-top:1px solid var(--border);
	margin:12px 0;
}

/* =========================================================
	 FILTER BAR
	 ========================================================= */
.filters{
	display:grid;
	grid-template-columns: 1fr auto 1fr ;
	gap:10px;
	align-items:center;
}

@media (max-width: 1100px){
	.filters{
		grid-template-columns: 1fr;
	}
}

		/* ===== Metrics ===== */
		.metrics{
			display:grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 12px;
			margin-bottom: 16px;
		}
		.metric{
			padding: 14px 14px;
			border-radius: 18px;
			border: 1px solid rgba(255,255,255,0.10);
			background: rgba(255,255,255,0.05);
		}
		.metric .label{
			font-size:12px;
			color: var(--muted);
			margin-bottom:6px;
		}
		.metric .value{
			font-size:20px;
			font-weight:900;
			letter-spacing:0.2px;
		}
		.metric .trend{
			margin-top:6px;
			font-size:12px;
			color: var(--muted);
		}


		/* ===== Responsive ===== */
		@media (max-width: 1050px){
			.grid{ grid-template-columns: 1fr; }
			.metrics{ grid-template-columns: 1fr; }
			.search{ width: 100%; max-width: 100%; }
			.topbar{ flex-direction:column; align-items:stretch; }
			.actions{ justify-content:space-between; }
		}
		@media (max-width: 860px){
			.app{ grid-template-columns: 1fr; }
			.sidebar{
				position:relative;
				height:auto;
				border-right:none;
				border-bottom: 1px solid var(--stroke);
			}
			.sidebar-footer{ position:relative; bottom:auto; left:auto; right:auto; margin-top:12px; }
		}
		@media (max-width: 520px){
			.form-grid{ grid-template-columns: 1fr; }
			table{ min-width: 880px; }
		}



/* =========================================================
	 TIMELINE COMMENTS
	 ========================================================= */
.timeline{
	display:flex;
	flex-direction:column;
	gap:12px;
}

.comment{
	padding:12px;
	border-radius:16px;
	border:1px solid var(--border);
	background: rgba(0,0,0,.18);
}

.comment-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin-bottom:8px;
}

.comment-head b{
	font-size:13px;
}

.comment-head small{
	color: var(--muted);
	font-size:12px;
}

.comment p{
	color: rgba(234,240,255,.82);
	line-height:1.45;
	font-size:14px;
}