/* =========================================================
		TAGS CUSTOM
		========================================================= */
		dashboard,
		dashboard section,
		dashboard card,
		dashboard percent,
		dashboard icon,
		dashboard head {
			display: block;
			box-sizing: border-box;
		}

		body section::before, /*Se remover, scroll fica meio bugadoo :(*/
		body section::after, /*Se remover, scroll fica meio bugadoo :(*/
		dashboard section::before,
		dashboard section::after,
		dashboard card::before,
		dashboard card::after,
		dashboard percent::before,
		dashboard percent::after,
		dashboard icon::before,
		dashboard icon::after,
		dashboard head::before,
		dashboard head::after {
			box-sizing: border-box;
		}

		/* =========================================================
		DASHBOARD (GRID PRINCIPAL)
		========================================================= */
		dashboard {
			display: grid;
			grid-template-columns: repeat(12, 1fr);
			gap: 12px;
			width: 100%;
			margin-bottom: 60px;
			cursor: default;
		}

		/* =========================================================
		HEAD (CABEÇALHOS DE GRUPO)
		========================================================= */
		dashboard head {
			display: flex;
			align-items: center;
			font-size: 10px;
			font-weight: 700;
			letter-spacing: 4px;
			text-transform: uppercase;
			color: #111827;
			cursor: pointer;
			grid-column: span 12;
			margin-top: 10px;
			padding: 8px 4px;
			transition: color 0.2s ease;
		}

		dashboard head img{
			position:relative;
			width: 10px;
			height: 10px;
			transform: rotate(180deg);
			background:#CCC;
			border-radius:14px;
			border:4px #CCC solid;
		}

		/* =========================================================
		SECTION (CONTAINER DOS CARDS)
		========================================================= */
		dashboard .section {
			position: relative;
			width: 100%;
			min-height: 1px;
			display: block;
			z-index:1;
			padding-top:8px;
		}

		/* =========================================================
		CARD (WIDGET) - GRID LAYOUT
		========================================================= */
		dashboard card {
			position: relative;
			width: 100%;

			display: grid;/* Grid: gráfico à esquerda, texto à direita */
			grid-template-columns: auto 1fr;
			grid-template-rows: auto;
			gap: 12px;
			
			background: rgba(255, 255, 255, 0.85);
			backdrop-filter: blur(12px);
			-webkit-backdrop-filter: blur(12px);
			
			border: 1px solid rgba(255, 255, 255, 0.6);
			border-bottom-left-radius: 6px;
			border-bottom-right-radius: 6px;
			
			padding: 15px 10px 10px 10px;
			
			box-shadow:
				0 4px 6px -1px rgba(0, 0, 0, 0.05),
				0 2px 4px -1px rgba(0, 0, 0, 0.03),
				inset 0 1px 0 rgba(255, 255, 255, 0.8);
			
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			
			/* Overflow visible para o .resume absoluto */
			overflow: visible;
		}

		
		dashboard card::before {
			content: '';
			position: absolute;
			top: -2px;
			left: 0;
			right: 0;
			height: 3px;
			background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
			opacity: 0.8;
			border-top-left-radius: 6px;
			border-top-right-radius: 6px;
		}

		dashboard card:hover {
			transform: translateY(-2px);
			box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
		}

		/* =========================================================
		CHART WRAPPER
		========================================================= */
		dashboard card .chart-wrapper {
			position: relative;
			
			/* Grid: coluna ESQUERDA */
			grid-column: 1;
			grid-row: 1;
			
			flex-shrink: 0;
			border-radius: 8px;
			overflow: hidden;

			/* Transição suave para quando ocultar/mostrar */
			transition: opacity 0.3s ease, transform 0.3s ease;
		}

		dashboard card .chart-wrapper i {
			position: absolute;
			font-size: 12px;
			text-align: center;
			pointer-events: none;
		}

		dashboard card .chart-wrapper canvas {
			width: 100% !important;
			height: 100% !important;
		}

		/* =========================================================
		PROGRESS TEXT
		========================================================= */
		dashboard card .progress-text {
			/* Grid: coluna DIREITA */
			grid-column: 2;
			grid-row: 1;
			
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: 4px;
			text-align: right;
			
			/* Permite expansão vertical */
			align-self: start;
		}

		dashboard card .progress-text legend {
			display: flex;
			align-items: center;
			gap: 6px;
			font-size: 9px;
			font-weight: 600;
			color: #6b7280;
			text-transform: uppercase;
			letter-spacing: 0.05em;
		}

		dashboard card .progress-text legend span {
			background: rgba(99, 102, 241, 0.1);
			color: #4f46e5;
			padding: 2px 8px;
			border-radius: 20px;
			font-size: 9px;
			font-weight: 700;
		}

		dashboard card .progress-text legend img {
			width: 14px;
			height: 14px;
			opacity: 0.5;
			cursor: pointer;
			filter: grayscale(100%);
			transform: rotate(-90deg) scale(1.1);
			transition: all 0.3s ease;
			z-index: 10;
		}

		dashboard card .progress-text legend img:hover {
			opacity: 1;
			filter: grayscale(0%);
			transform: rotate(-90deg) scale(1.2);
		}

		dashboard card .progress-text strong {
			font-size: 22px;
			font-weight: 700;
			line-height: 1.2;
			letter-spacing: -0.02em;
			background: linear-gradient(135deg, #1f2937, #4b5563);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}

		/* =========================================================
		PERCENTUAL
		========================================================= */
		dashboard card .progress-text percent {
			display: inline-flex;
			align-items: center;
			gap: 4px;
			font-size: 4px;
			font-weight: 600;
			padding: 4px 10px;
			border-radius: 20px;
			background: rgba(34, 197, 94, 0.1);
			color: #16a34a;
		}

		dashboard card .progress-text percent.negative {
			background: rgba(139, 102, 1, 0.1);
			color: #dc2626;
		}

		dashboard card .progress-text percent.attention {
			background: rgba(239, 68, 68, 0.1);
			color: #ee9b02;
		}

		dashboard card .progress-text percent icon {
			position: static;
			font-style: normal;
		}

		/* =========================================================
		RESUME (DROPDOWN) - OVERLAY ABSOLUTO
		========================================================= */
		dashboard card .resume {
			/* OVERLAY: position absolute para não expandir o card */
			position: absolute;
			top: calc(100% - 4px);
			left: -2px;
			right: -1px;
			
			display: none;
			max-height: 240px;
			overflow-y: auto;
			overflow-x: hidden;
			
			background: rgba(249, 250, 251, 0.98);
			backdrop-filter: blur(20px);
			
			border: 1px solid rgba(0, 0, 0, 0.06);
			border-top:none;
			border-top: none;
			border-bottom-left-radius: 6px;
			border-bottom-right-radius: 6px;
			
			padding: 12px;
			margin-top: 0;
			
			/* Z-index para ficar por cima */
			z-index: 100;
			
			/* Animação suave */
			opacity: 0;
			transform: translateY(-10px);
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			
			/* Sombra para destacar do fundo */
			box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
		}

		/* Estado visível */
		dashboard card .resume.active,
		dashboard card .resume[style*="display: block"] {
			display: block !important;
			opacity: 1;
			transform: translateY(0);
		}

		/* =========================================================
		RESUME CONTENT
		========================================================= */
		dashboard card .resume .title {
			position:relative;
			width: 100%;
			display: block;
			top:-8px;
			text-align: center;
			font-size: 10px;
			font-weight: 700;
			color: #374151;
			text-transform: uppercase;
			letter-spacing: 1px;
			border-bottom: 2px solid rgba(99, 102, 241, 0.2);
			padding-bottom: 4px;
			margin-bottom: 4px;
		}

		dashboard card .resume .row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 12px;
			border-radius: 6px;
			margin-bottom: 4px;
			background: rgba(255, 255, 255, 0.6);
			border-left: 3px solid transparent;
			transition: all 0.2s ease;
		}

		dashboard card .resume .row:hover {
			background: rgba(255, 255, 255, 0.9);
			transform: translateX(4px);
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		}

		dashboard card .resume .row label {
			flex: 1;
			font-size: 12px;
			color: #4b5563;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-right: 12px;
		}

		dashboard card .resume .row span {
			font-size: 13px;
			font-weight: 600;
			color: #111827;
			font-family: 'SF Mono', 'Courier New', monospace;
			white-space: nowrap;
		}

		dashboard card .resume .row:last-of-type {
			margin-bottom: 0;
		}

		/* =========================================================
		CORES DE DESTAQUE
		========================================================= */
		dashboard card .resume .green {
			background: rgba(34, 197, 94, 0.08);
			border-left-color: #22c55e;
		}

		dashboard card .resume .green label,
		dashboard card .resume .green span {
			color: #15803d;
		}

		dashboard card .resume .red {
			background: rgba(239, 68, 68, 0.08);
			border-left-color: #ef4444;
		}

		dashboard card .resume .red label,
		dashboard card .resume .red span {
			color: #b91c1c;
		}

		/* =========================================================
		GRID RESPONSIVO
		========================================================= */
		.fr_1 { grid-column: span 12; }
		.fr_2 { grid-column: span 6; }
		.fr_3 { grid-column: span 4; }
		.fr_4 { grid-column: span 3; }

		@media (max-width: 1200px) {
			dashboard {
				gap: 10px;
			}
		}

		@media (max-width: 1000px) {
			.fr_4,
			.fr_3 {
				grid-column: span 6;
			}
			
			dashboard card {
				padding: 12px 8px 8px 8px;
			}
		}

		@media (max-width: 720px) {
			.fr_4,
			.fr_3,
			.fr_2 {
				grid-column: span 12;
			}
			
			dashboard {
				gap: 8px;
			}
			
			dashboard card {
				grid-template-columns: auto 1fr;
				align-items: center;
			}

			dashboard card .chart-wrapper {
				grid-column: 1;
				grid-row: 1;
				margin: 0;
			}

			dashboard card .progress-text {
				grid-column: 2;
				grid-row: 1;
				align-items: flex-end;
				text-align: right;
			}
		}

		/* =========================================================
		MELHORIAS DE ACESSIBILIDADE (SEM BORDAS VISUAIS)
		========================================================= */
		dashboard card:focus-within {
			outline: none;
		}

		dashboard card .progress-text legend img:focus {
			outline: none;
		}

		/* =========================================================
		ANIMAÇÕES GLOBAIS
		========================================================= */
		@keyframes slideIn {
			from {
				opacity: 0;
				transform: translateY(20px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		dashboard .section {
			animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
		}

		/* Escalonar animação para cada card */
		dashboard .section:nth-child(1) { animation-delay: 0.05s; }
		dashboard .section:nth-child(2) { animation-delay: 0.1s; }
		dashboard .section:nth-child(3) { animation-delay: 0.15s; }
		dashboard .section:nth-child(4) { animation-delay: 0.2s; }
		dashboard .section:nth-child(5) { animation-delay: 0.25s; }
		dashboard .section:nth-child(6) { animation-delay: 0.3s; }
		dashboard .section:nth-child(7) { animation-delay: 0.35s; }
		dashboard .section:nth-child(8) { animation-delay: 0.4s; }