:root {
			--navy: #102f48;
			--navy-2: #1a4869;
			--ink: #1d2b36;
			--muted: #71808c;
			--line: #dce5eb;
			--surface: #ffffff;
			--bg: #f3f7fa;
			--green: #149447;
			--green-soft: #e4f6eb;
			--red: #d12f45;
			--red-soft: #fdecef;
			--gray: #78838c;
			--gray-soft: #edf0f2;
			--orange: #ed8a18;
			--orange-soft: #fff0db;
			--shadow: 0 6px 18px rgba(16, 47, 72, .06);
			--sigs-navy: #173b57;
			--sigs-orange: #ed8a18;
			--sigs-yellow: #fdc918; /* <--- ADICIONADO AQUI */
		}
        * { box-sizing: border-box; }
        html,
		body {
			width: 100%;
			height: 100%;
			min-height: 0;
			margin: 0;
			padding: 0;
			overflow: hidden;
		}

		body {
			background: var(--bg);
			color: var(--ink);
			font: 14px/1.35 Inter, Segoe UI, Arial, sans-serif;
		}
        button { font: inherit; }
        .app {
			position: relative; /* Necessário para posicionar o ::before */
			width: 100%;
			max-width: 1750px;
			height: 100%;
			min-height: 0;
			margin: 0 auto;
			padding: 12px 12px 8px; /* Adicionado um pouco mais de padding no topo */
			display: flex;
			flex-direction: column;
			overflow: hidden !important;
		}
		
		.app::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 6px;
			border-radius: 0 0 8px 8px;
			background: linear-gradient(90deg, var(--sigs-orange), var(--sigs-yellow), var(--sigs-orange));
			z-index: 999;
		}
		
		html:fullscreen,
		html:fullscreen body {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		body:fullscreen {
			overflow: hidden;
		}
		
		body:fullscreen {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 6px;
			border-radius: 0 0 8px 8px;
		}

		.app {
			max-width: 1750px;
			margin: auto;
			padding: 8px 12px;
			height: 100%;
			min-height: 0;
			display: flex;
			flex-direction: column;
			overflow: hidden;
		}
        
        /* Topbar Unificada (Estilo Dashboard SiGS) */
        .topbar { 
            display: flex; 
            align-items: center; 
            justify-content: space-between; 
            gap: 12px; 
            padding: 8px 16px;
			border-bottom: 2px solid rgba(23, 59, 87, .18);
            /*border-radius: 8px;
            border: 1px solid var(--line);
            border-top: 5px solid var(--sigs-orange);
			border-right: 5px solid var(--sigs-orange);
			border-left: 5px solid var(--sigs-orange);
            box-shadow: var(--shadow);
			background: var(--surface);*/
            margin-bottom: 10px;
        }
        .brand { display: flex; align-items: center; gap: 12px; }
        .brand-mark { 
            width: 40px; 
            height: 40px; 
            border-radius: 8px; 
            display: grid; 
            place-items: center; 
            color: #fff; 
            background: linear-gradient(145deg, var(--navy-2), var(--navy)); 
            font-size: 1.2rem;
        }
        h1 { margin: 0; color: var(--navy); font-size: clamp(1.1rem, 1.6vw, 1.45rem); letter-spacing: .03em; font-weight: 800; text-transform: uppercase; }
        .subtitle { color: var(--muted); margin-top: 1px; font-size: .8rem; }
        .logo-center { display: flex; align-items: center; justify-content: center; }
        .logo-center img { height: 52px; width: auto; max-width: 285px; object-fit: contain; }
        .updated { color: var(--muted); font-size: .8rem; text-align: right; white-space: nowrap; font-weight: 600; }

        /* Dashboard Top Grid (3 Seções bem distribuídas) */
        .dashboard-top {
            display: grid;
            grid-template-columns: 360px 1fr 1fr;
            gap: 12px;
            margin-bottom: 12px;
			flex: 0 0 auto;
        }
        @media (max-width: 1300px) {
            .dashboard-top { grid-template-columns: 1fr; }
        }

        /* Classes de Bordas Laranjas de Destaque conforme o padrão do Dashboard de Acompanhamento */
        .border-orange-top { border-top: 5px solid var(--sigs-orange) !important; }
        .border-orange-left { border-left: 5px solid var(--sigs-orange) !important; }
        .border-orange-right { border-right: 5px solid var(--sigs-orange) !important; }

        /* Bloco Esquerdo: Cards de KPIs Resumo */
        .summary-container {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 8px;
            padding: 10px;
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .summary-header {
            font-size: .82rem;
            font-weight: 800;
            color: var(--navy);
            text-transform: uppercase;
            letter-spacing: .04em;
            margin-bottom: 8px;
            padding-bottom: 4px;
            border-bottom: 1px solid var(--line);
        }
        .summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
        .metric { 
            background: #fafbfc; 
            border: 1px solid var(--line); 
            border-radius: 6px; 
            padding: 8px 10px; 
            text-align: center;
        }
        .metric.total-metric { grid-column: span 2; background: #f0f4f8; }
        .metric-label { display: block; color: var(--muted); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
        .metric-value { display: block; color: var(--navy); font-size: 1.35rem; font-weight: 800; margin-top: 2px; }
        .metric.occupied .metric-value { color: var(--red); }
        .metric.free .metric-value { color: var(--green); }
        .metric.blocked .metric-value { color: var(--gray); }
        .metric.extra .metric-value { color: var(--orange); }

        /* Cards de Gráficos Centro e Direita */
        .chart-card {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 8px;
            padding: 10px 8px;
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .chart-card h3 {
            margin: 0 0 6px 0;
            font-size: .82rem;
            color: var(--navy);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .03em;
            padding-bottom: 4px;
            border-bottom: 1px solid var(--line);
            text-align: center;
        }
        .chart-wrapper {
            position: relative;
            height: clamp(145px, 22vh, 200px);
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Toolbar & Grid de Unidades */
        .toolbar { 
            display: flex; 
            align-items: center; 
            justify-content: space-between; 
            gap: 10px; 
            margin: 6px 0 8px; 
            background: var(--surface);
            padding: 6px 14px;
            border-radius: 6px;
            border: 1px solid var(--line);
			border-left: 5px solid var(--sigs-orange);
			border-right: 5px solid var(--sigs-orange);
			
        }
        .toolbar h2 { margin: 0; color: var(--navy); font-size: 1.15rem; font-weight: 800; text-transform: uppercase; }
        .hint { color: var(--muted); font-size: .82rem; font-weight: 600; }
        
        .units { flex: 1 1 0 !important; min-height: 0 !important; overflow: hidden !important; display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); gap: 8px; }
        .unit { 
            appearance: none; 
            width: 100%; 
            padding: 0; 
            border: 1px solid var(--line); 
            border-radius: 8px; 
            background: var(--surface); 
            color: var(--ink); 
            text-align: left; 
            cursor: pointer; 
            overflow: hidden; 
            box-shadow: var(--shadow); 
            transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; 
            min-height: 0 !important;
			height: 100% !important;
            display: flex; 
            flex-direction: column; 
            justify-content: space-between;
        }
        .unit:hover, .unit:focus-visible { transform: translateY(-2px); border-color: var(--sigs-orange); box-shadow: 0 10px 24px rgba(16, 47, 72, .12); outline: none; }
        .unit-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; color: #fff; background: linear-gradient(135deg, var(--navy-2), var(--navy)); }
        .unit-code { font-size: 1.0rem; font-weight: 900; letter-spacing: .04em; }
        .unit-open { opacity: .75; font-size: 1.0rem; }
        .unit-name { padding: 6px 10px 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .88rem; font-weight: 700; }
        .unit-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px 8px; }
        .sector-stat { border: 1px solid var(--line); border-radius: 6px; padding: 4px 5px; overflow: hidden; background: #fafbfc; }
        .sector-stat strong { display: block; color: var(--navy); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 800; }
        .sector-stat span { display: block; color: var(--muted); font-size: .72rem; margin-top: 1px; }
        .mini-beds { display: flex; flex-wrap: wrap; gap: 3px; padding: 0 8px 8px; min-height: 38px; }
        .mini-bed { width: 10px; height: 12px; border-radius: 2px; flex: 0 0 10px; }
        .mini-bed.occupied { background: var(--red); }
        .mini-bed.free { background: var(--green); }
        .mini-bed.blocked { background: var(--gray); }
        .mini-bed.extra { background: var(--orange); }
        
        .empty, .error { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); }
        .error { color: #8e2636; background: var(--red-soft); }
        .legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin: 8px 0 2px; color: var(--muted); font-size: .78rem; font-weight: 700; }
        .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
        .legend .occupied i { background: var(--red); } .legend .free i { background: var(--green); } .legend .blocked i { background: var(--gray); } .legend .extra i { background: var(--orange); }
        
        /* Modal */
        .modal-backdrop { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(8, 26, 40, .62); z-index: 10000; }
        .modal-backdrop.open { display: flex; }
        .modal { width: min(980px, 100%); max-height: min(850px, 94vh); overflow: auto; border-radius: 12px; background: var(--surface); box-shadow: 0 22px 70px rgba(0,0,0,.28); }
        .modal-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; color: #fff; background: linear-gradient(135deg, var(--navy-2), var(--navy)); }
        .modal-title { margin: 0; font-size: 1.15rem; }
        .modal-subtitle { opacity: .78; font-size: .78rem; margin-top: 2px; }
        .close { width: 30px; height: 30px; border: 0; border-radius: 6px; background: rgba(255,255,255,.15); color: #fff; font-size: 1.2rem; cursor: pointer; }
        .close:hover { background: rgba(255,255,255,.28); }
        .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; }
        .detail-sector { border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
        .detail-sector h3 { margin: 0 0 8px; color: var(--navy); font-size: .9rem; }
        .detail-summary { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
        .pill { padding: 3px 6px; border-radius: 999px; background: var(--gray-soft); color: var(--muted); font-size: .70rem; font-weight: 700; }
        .pill.red { color: var(--red); background: var(--red-soft); } .pill.green { color: var(--green); background: var(--green-soft); } .pill.orange { color: var(--orange); background: var(--orange-soft); }
        .detail-beds { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
        .detail-bed { min-height: 44px; display: grid; place-items: center; align-content: center; border-radius: 6px; border: 1px solid; font-size: .72rem; font-weight: 800; text-align: center; }
        .detail-bed small { display: block; font-size: .62rem; font-weight: 500; margin-top: 1px; }
        .detail-bed.occupied { color: #fff; background: var(--red); border-color: #ac2235; } .detail-bed.free { color: var(--green); background: var(--green-soft); border-color: #a4d9b4; } .detail-bed.blocked { color: var(--gray); background: var(--gray-soft); border-color: #cbd2d7; } .detail-bed.extra { color: #fff; background: var(--orange); border-color: #c56b08; }

        @media (max-width: 1200px) { .units { grid-template-columns: repeat(4, minmax(180px, 1fr)); } }
        @media (max-width: 900px) { .units { grid-template-columns: repeat(3, minmax(170px, 1fr)); } }
        @media (max-width: 650px) { .app { padding: 6px; } .topbar { flex-direction: column; text-align: center; } .units { grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 6px; } .detail-grid { grid-template-columns: 1fr; } }

        /* Ações Flutuantes */
        .floating-actions {
            position: fixed;
            bottom: 12px;
            right: 12px;
            z-index: 20;
            display: flex;
            gap: 8px;
            opacity: 0.35;
            transition: opacity 0.3s ease;
        }
        .floating-actions:hover { opacity: 1; }
        .btn-float {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 12px;
            background-color: var(--sigs-navy);
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 6px;
            font-size: 11px;
            font-weight: 700;
            text-decoration: none;
            cursor: pointer;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
            transition: background-color 0.2s ease, transform 0.1s ease;
        }
        .btn-float:hover { background-color: var(--sigs-orange); color: var(--sigs-navy); }
        .btn-float:active { transform: scale(0.96); }


/* =====================================================================
   MODO FULLSCREEN CONTROLADO PELO dashboard_unificado.php
   ===================================================================== */
html.modo-fullscreen-externo,
html.modo-fullscreen-externo body,
body.modo-fullscreen-externo {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}
html.modo-fullscreen-externo body { display: flex !important; flex-direction: column !important; }
html.modo-fullscreen-externo .app,
body.modo-fullscreen-externo .app {
    width: 100% !important; max-width: none !important; height: 100% !important; min-height: 0 !important;
    margin: 0 !important; padding: 8px 12px !important; overflow: hidden !important;
}
html.modo-fullscreen-externo .dashboard-top,
body.modo-fullscreen-externo .dashboard-top { flex: 0 0 auto !important; }
html.modo-fullscreen-externo .units,
body.modo-fullscreen-externo .units { min-height: 0 !important; overflow: hidden !important; }
html.modo-fullscreen-externo .unit,
body.modo-fullscreen-externo .unit { min-height: 0 !important; }
html.modo-fullscreen-externo .floating-actions,
body.modo-fullscreen-externo .floating-actions { display: none !important; }
@media (max-height: 800px) {
    .app {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .topbar {
        padding-top: 4px;
        padding-bottom: 4px;
        margin-bottom: 5px;
    }

    .brand-mark {
        width: 32px;
        height: 32px;
    }

    .logo-center img {
        height: 38px !important;
    }

    .chart-wrapper {
        height: 145px;
    }

    .toolbar {
        margin-top: 3px;
        margin-bottom: 4px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .unit-head {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .unit-stats {
        padding-top: 3px;
        padding-bottom: 3px;
    }

    .mini-beds {
        min-height: 26px;
        padding-bottom: 3px;
    }
}
@media (max-height: 700px) {
    html.modo-fullscreen-externo .app,
    body.modo-fullscreen-externo .app { padding-top: 4px !important; padding-bottom: 4px !important; }
    html.modo-fullscreen-externo .topbar { padding-top: 4px !important; padding-bottom: 4px !important; margin-bottom: 5px !important; }
    html.modo-fullscreen-externo .brand-mark { width: 30px !important; height: 30px !important; }
    html.modo-fullscreen-externo .logo-center img { height: 36px !important; }
    html.modo-fullscreen-externo .chart-wrapper { height: 150px !important; }
    html.modo-fullscreen-externo .toolbar { margin-top: 3px !important; margin-bottom: 4px !important; padding-top: 4px !important; padding-bottom: 4px !important; }
    html.modo-fullscreen-externo .unit-head { padding-top: 4px !important; padding-bottom: 4px !important; }
    html.modo-fullscreen-externo .unit-stats { padding-top: 3px !important; padding-bottom: 3px !important; }
    html.modo-fullscreen-externo .mini-beds { padding-bottom: 3px !important; min-height: 28px !important; }
}