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

	.nav-doc-links{
		height: 45px;
		line-height: normal !important;
		padding: 0 24px 0 0;
		border-left: none !important;
		background: transparent !important;
		display: flex !important;
		align-items: center;
		gap: 5px;
	}

	.ace-nav > li.nav-doc-links > a.nav-doc-btn,
	.ace-nav > li.nav-doc-links > a.nav-doc-btn:focus{
		display: inline-flex;
		align-items: center;
		gap: 4px;
		width: auto;
		min-width: 0;
		height: auto;
		padding: 4px 7px;
		border: 1px solid rgba(255,255,255,0.38);
		border-radius: 4px;
		background: transparent !important;
		color: #edf5ff;
		font-size: 11px;
		line-height: 14px;
		text-decoration: none;
		outline: 0;
	}

	.ace-nav > li.nav-doc-links > a.nav-doc-btn:hover{
		background: transparent !important;
		border-color: rgba(255,255,255,0.45);
		color: #fff;
		text-decoration: none;
	}

	.ace-nav > li.nav-doc-links > a.nav-doc-btn > .ace-icon{
		font-size: 12px;
		line-height: 14px;
		width: auto;
	}

	.ace-nav > li.nav-user-menu{
		display: flex;
		align-items: center;
		height: 45px;
		line-height: normal;
		margin-left: 22px;
	}

	.ace-nav > li.dark-blue > .tab-usuario{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 24px;
		padding: 0;
	}

	.nav-user-icon{
		width: 24px;
		height: 24px;
		border: 0;
		border-radius: 0;
		color: #fff;
		font-size: 18px;
		line-height: 24px;
		text-align: center;
		background: transparent;
	}

	.tab-guenoa.seleccionada{
		background-color: #3a87ad;
		color: #fff;
	}

	.tab-guenoa{
		position: relative;
		padding-right: 20px;
	}

	.tab-cerrar{
		position: absolute;
		top: 2px;
		right: 2px;
		width: 10px;
		height: 10px;
		background: transparent;
		color: #5f6f7c;
		font-size: 11px;
		line-height: 10px;
		text-align: center;
		cursor: pointer;
		border: 0;
		box-shadow: none;
	}

	.tab-cerrar:hover{
		background: transparent;
		color: #c0392b;
	}

	.tab-guenoa.seleccionada .tab-cerrar{
		color: rgba(255,255,255,0.85);
	}

	.tab-guenoa.seleccionada .tab-cerrar:hover{
		color: #ffffff;
	}

	.dashboard-nav-inferior{
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 20px !important;
		min-height: 20px !important;
		background: linear-gradient(#081724, #1e1e1e) !important;
		z-index: 1040 !important;
		display: block !important;
	}

	body:has(.menu-dashboard:not(.ng-hide)),
	.main-container:has(.menu-dashboard:not(.ng-hide)),
	.main-content:has(.menu-dashboard:not(.ng-hide)),
	.main-content-inner:has(.menu-dashboard:not(.ng-hide)),
	.page-content:has(.menu-dashboard:not(.ng-hide)),
	.page-content > .row:has(.menu-dashboard:not(.ng-hide)){
		background: #181818 !important;
	}

	.menu-dashboard{
		height: calc(100vh - 121px);
		box-sizing: border-box;
		padding: 105px 0 24px;
		background: #181818;
		overflow: hidden;
		display: block;
	}

	.tabs-vista-menu{
		height: calc(100vh - 121px) !important;
		max-height: none !important;
		overflow: hidden !important;
		background: #181818;
	}

	.tabs-vista:has(> .menu-dashboard:not(.ng-hide)){
		height: calc(100vh - 121px) !important;
		max-height: none !important;
		overflow: hidden !important;
		background: #181818;
	}

	.menu-dashboard .menu-iconos{
		position: relative;
		float: none;
		margin: 0 auto;
		text-align: center;
		border: 1px solid #343638;
		background-color: #343638;
		width: 850px !important;
		max-width: 850px;
		box-sizing: border-box;
		min-height: 218px;
		height: auto !important;
		opacity: 1 !important;
		z-index: 1;
	}

	.menu-dashboard .submenu-iconos{
		position: relative;
		width: 100%;
		height: 30px;
		margin: 0;
		max-width: 850px;
	}

	.menu-dashboard .submenu-iconos-contenedor{
		min-height: 30px;
		background-color: #020406;
	}

	.menu-dashboard #sidebar-shortcuts-large{
		margin: 0 3px 3px;
		background-color: #343638;
		width: auto;
		max-width: 850px;
		min-height: 183px;
		padding: 10px 0 18px;
		text-align: center;
	}

	.menu-dashboard .btn-iconos{
		margin: 20px;
	}

	.menu-dashboard .submenu-contenedor-hijo{
		max-width: calc(100% - 170px);
	}

	.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;
	}