/* =========================
   GRID GENERAL
========================= */

	.dashboard-grid{
		display:grid;
		grid-template-columns: repeat(12, 1fr);
		grid-auto-rows: auto;
		gap:15px;
		padding:15px;
		background:#f5f7f8;
		height:100%;
	}


/* =========================
   BLOQUES GRID
========================= */

	/* KPIs: 12 columnas → 12 KPIs máx en una fila */
	.grid-kpi{
		grid-column: span 1;
		grid-row: span 1;
		text-align:center;
	}

	/* bloque principal */
	.grid-muestras{
		grid-column: span 6; /* 👈 clave */
		grid-row: span 4;
	}


	/* gráfico grande */
	.grid-evolucion{
		grid-column: span 8;
		grid-row: span 4;
	}

	/* bloques normales */
	.grid-box{
		grid-column: span 4;
		grid-row: span 2;
	}

	.grid-full{
		grid-column: span 12;
		grid-row: span 2;
	}

/* =========================
   BOXES
========================= */

	.dash-box{
		background:#fff;
		border-radius:10px;
		padding:15px;
		box-shadow:0 2px 6px rgba(0,0,0,0.05);
		display:flex;
		flex-direction:column;
		overflow:hidden;
	}

/* =========================
   TITULOS
========================= */

	.dash-title{
		font-size:14px;
		font-weight:600;
		margin-bottom:10px;
		color:#333;
	}

/* =========================
   KPIs
========================= */

	.kpi-title{
		font-size:12px;
		color:#777;
		line-height:1.2;
	}

	.kpi-value{
		font-size:26px;
		font-weight:bold;
		color:#2c3e50;
	}
	
	.kpi-blue{
		background:linear-gradient(180deg, #eef4ff 0%, #e6f0ff 100%);
		border:1px solid #dbe7ff;
	}

	.kpi-blue .kpi-value{
		color:#2f6de0;
	}
	
	.kpi-grey{
		background:linear-gradient(180deg, #f5f5f5 0%, #ebebeb 100%);
		border:1px solid #dddddd;
	}

	.kpi-grey .kpi-value{
		color:#666666;
	}

	.kpi-red{
		background:linear-gradient(180deg, #fff1f1 0%, #ffe5e5 100%);
		border:1px solid #ffd6d6;
	}

	.kpi-red .kpi-value{
		color:#e04b4b;
	}

	.kpi-row{
		grid-column: span 12;   /* 🔥 ocupa toda la fila */
		display:grid;
		grid-template-columns: repeat(8, 1fr);
		gap:15px;
	}
	
	.kpi-row .dash-box{
		min-height:80px;
	}

/* =========================
   MINI KPIs (bloque muestras)
========================= */

	.mini-kpis{
		display:flex;
		gap:10px;
		margin-bottom:10px;
	}

	.mini-card{
		flex:1;
		background:#f7f9fa;
		border-radius:8px;
		padding:8px;
		text-align:center;
	}

	.mini-value{
		font-size:18px;
		font-weight:bold;
	}

	.mini-label{
		font-size:11px;
		color:#777;
	}

/* =========================
   BLOQUE MUESTRAS INTERNO
========================= */

	.muestras-grid{
		display:grid;
		grid-template-columns: 1fr 1fr;
		gap:10px;
		flex:1;
		min-height:0;
	}

	.sub-block{
		display:flex;
		flex-direction:column;
		background:#f4f6f8;
		border-radius:8px;
		padding:10px;
		min-height:0;
	}

	/* subtítulos destacados */
	.sub-title{
		font-size:13px;
		font-weight:600;
		margin-bottom:8px;
		color:#333;
		background:#e9edf0;
		padding:6px 8px;
		border-radius:6px;
	}

	.grid-estudios{
		grid-column: span 6;
		grid-row: span 4;   /* 🔥 misma altura que muestras */
	}
	
	
/* =========================
   TABLAS (SCROLL CORRECTO)
========================= */

	.dash-table{
		flex:1;
		overflow:auto;
		padding-right:8px;
		margin-right:-8px;
		min-height:0;
		font-size:12px
	}

	.dash-table table{
		width:100%;
		border-collapse:collapse;
		font-size:13px;
	}

	.dash-table td{
		padding:5px 4px;
		border-bottom:1px solid #eee;
		color:#333;
	}

	.dash-table tr:hover{
		background:#f9fbfc;
	}

	.num{
		text-align:right;
		font-weight:600;
		color:#2c3e50;
	}

/* =========================
   SCROLL FINO
========================= */

	.dash-table::-webkit-scrollbar{
		width:6px;
	}

	.dash-table::-webkit-scrollbar-thumb{
		background:#ccc;
		border-radius:3px;
	}

/* =========================
   CHARTS
========================= */

	#chartSemana,
	#chartEstudios{
		flex:1;
	}

/* =========================
   RESPONSIVE
========================= */

	@media (max-width: 900px){

		.dashboard-grid{
			grid-template-columns: 1fr;
		}

		.grid-kpi,
		.grid-muestras,
		.grid-evolucion,
		.grid-box,
		.grid-full{
			grid-column: span 1;
		}
	}


/* =========================
   Botones
========================= */
	.mini-tabs{
		display:flex;
		gap:10px;
		margin-bottom:10px;
	}

	.mini-tab{
		flex:1;
		background:#f4f6f8;
		border-radius:8px;
		padding:8px;
		text-align:center;
		cursor:pointer;
		font-size:12px;
		transition:all 0.2s;
	}

	.mini-tab b{
		font-size:16px;
	}

	.mini-tab:hover{
		background:#e9edf0;
	}

	.mini-tab.active{
		background:#2c7be5;
		color:#fff;
	}

	.mini-tab.active b{
		color:#fff;
	}
	
	
	.mini-tab.nav{
		max-width:40px;
		display:flex;
		align-items:center;
		justify-content:center;
		font-size:16px;
	}

	.dona-title{
		font-size:12px;
		font-weight:bold;
		text-align:center;
		margin-bottom:10px;
		color:#666;
	}


	.dona-table table{
		width:100%;
		font-size:11px;
		border-collapse:collapse;
	}

	.dona-table td{
		padding:2px 4px;
	}

	.dona-table td.num{
		text-align:right;
		font-weight:600;
	}
	
	

	#chartHoy, #chartSemana, #chartMes{
		width:100%;
		height:160px;
		position:relative;   /* 🔥 necesario para centrar total */
		display:flex;
		align-items:center;
		justify-content:center;
	}
	
		
	.dona-table{
		flex:1;
		margin-top:8px;
		overflow:visible;
		min-height:0;
		max-height:none;
		padding:0 10px;
	}
	
	.donas-grid{
		display:flex;
		gap:20px;
		align-items:stretch;
	}
	
	.dona-item{
		flex:1;
		display:flex;
		flex-direction:column;
		align-items:stretch;
		justify-content:flex-start;
		min-height:0;
	}


	.dona-total{
		position:absolute;
		font-size:18px;
		font-weight:bold;
		color:#444;
		left:50%;
		top:50%;
		transform:translate(-50%, -50%);
		pointer-events:none;
	}
		
	.dona-total{
		font-size:20px;
		font-weight:600;
		color:#333;
	}
	
	.total-row{
		border-top:1px solid #ddd;
		font-weight:600;
	}

	.total-row td{
		padding-top:6px;
	}



	.td-color{
		width:16px;
		padding-right:4px;
	}

	.color-box{
		display:inline-block;
		width:10px;
		height:10px;
		border-radius:2px;
	}

	.dona-table table{
		width:auto;
		font-size:11px;
		border-collapse:collapse;
	}

	.dona-table td{
		padding:2px 4px;
	}

	.dona-table td.num{
		text-align:right;
		font-weight:600;
	}

	.total-row{
		border-top:1px solid #ddd;
		font-weight:600;
	}

	.dona-table{

	}


	.tabla-analisis{
		width:85%;
		font-size:11px;
		border-collapse:collapse;
	}

	.tabla-analisis th{
		text-align:left;
		font-weight:600;
		color:#666;
		padding:4px;
		border-bottom:1px solid #ddd;
	}

	.tabla-analisis td{
		padding:2px 4px;
		border-bottom:1px solid #ddd;
	}

	.tabla-analisis td.num{
		text-align:right;
		font-weight:600;
		padding-right:10px
	}

	.td-color{
		width:16px;
	}

	.color-box{
		display:inline-block;
		width:10px;
		height:10px;
		border-radius:2px;
	}

	.total-row{
		border-top:1px solid #ddd;
		font-weight:600;
	}
		
	.chart-wrapper{
		height:160px;         /* 🔥 MISMO ALTO PARA TODOS */
		min-height:160px;
		max-height:160px;
		display:flex;
		align-items:center;
		justify-content:center;
	}

	#chartHoy, #chartSemana, #chartMes{
		width:100%;
		height:100%;   /* 🔥 ahora depende del wrapper */
		position:relative;
	}