*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
background:#f4f7fb;
color:#1f2937;
padding:30px;
}

header{
display:none;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
}

body:not(.login-mode) header{
display:flex;
}

.brand{
display:flex;
gap:18px;
align-items:center;
}

#labLogo{
height:80px;
width:80px;
border-radius:14px;
object-fit:contain;
box-shadow:0 4px 12px rgba(0,0,0,0.10);
}

#labTitle{
font-size:24px;
font-weight:700;
}

#headerStatus{
font-size:14px;
color:#16a34a;
}

.card{
background:white;
border-radius:18px;
padding:22px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
transition:all .22s ease;
cursor:default;
}

.card:hover{
transform:translateY(-4px);
box-shadow:0 18px 36px rgba(0,0,0,.10);
}

.login-card{
max-width:420px;
margin:60px auto;
display:flex;
flex-direction:column;
gap:14px;
background:white;
border-radius:24px;
padding:40px;
box-shadow:0 20px 60px rgba(0,0,0,0.12);
}

input,select,button{
padding:12px;
border-radius:10px;
border:1px solid #d1d5db;
font-size:15px;
}

button{
background:#111827;
color:white;
border:none;
cursor:pointer;
}

button:hover{
opacity:.92;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:18px;
margin-bottom:22px;
}

.big{
font-size:34px;
font-weight:700;
margin:14px 0;
}

.ok{
color:#16a34a;
font-weight:700;
}

.alarm{
color:#dc2626;
font-weight:700;
}

.chart-box{
    height: auto;
    padding: 20px;
}

.chart-tabs{
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.tab-btn{
    background: #f1f5f9;
    color: #374151;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn:hover{
    background: #e2e8f0;
}

.tab-btn.active{
    background: #111827;
    color: white;
    border-color: #111827;
}

.chart-panel{
    width: 100%;
    height: 340px;
    position: relative;
}

.chart-panel canvas{
    width: 100% !important;
    height: 100% !important;
}

@media(max-width: 768px){
    .tab-btn{
        padding: 7px 12px;
        font-size: 12px;
    }
    .chart-panel{
        height: 260px;
    }
}

#clock{
font-size:15px;
font-weight:600;
}

@media(max-width:768px){
body{padding:15px;}
#labTitle{font-size:18px;}
.big{font-size:28px;}
}

.card.ok-state{
border-left:6px solid #16a34a;
}

.card.warn-state{
border:3px solid #f59e0b;
background:#fffaf0;
box-shadow:
0 0 0 4px rgba(245,158,11,.15),
0 0 25px rgba(245,158,11,.35);
animation:alarmPulse 1.2s infinite;
}

@keyframes alarmPulse{
0%{transform:scale(1);}
50%{transform:scale(1.02);}
100%{transform:scale(1);}
}

.card.alarm-state{
border:3px solid #dc2626;
background:#ffe5e5;
box-shadow:
0 0 0 4px rgba(220,38,38,.15),
0 0 25px rgba(220,38,38,.35);
animation:alarmPulse 1.2s infinite;
}

.card.alarm-state h3{
color:#b91c1c;
font-weight:800;
}

@keyframes bannerBlink{
0%{opacity:1;}
50%{opacity:.7;}
100%{opacity:1;}
}

.alarm-banner{
margin-bottom:18px;
padding:16px 22px;
border-radius:16px;
background:#dc2626;
color:white;
font-size:18px;
font-weight:800;
box-shadow:0 10px 30px rgba(220,38,38,.35);
animation:bannerBlink 1s infinite;
text-align:center;
letter-spacing:.4px;
}

body.tv-mode{
padding:10px;
background:#ffffff;
}

body.tv-mode .card{
padding:28px;
}

body.tv-mode .big{
font-size:42px;
}

body.tv-mode #topHeader{
margin-bottom:10px;
}

#summaryRow{
gap:10px;
margin-bottom:12px;
}

#summaryRow .card{
padding:8px 10px;
border-radius:12px;
box-shadow:0 4px 12px rgba(0,0,0,.05);
min-height:auto;
}

#summaryRow h3{
font-size:11px;
margin-bottom:3px;
color:#6b7280;
font-weight:600;
line-height:1;
}

#summaryRow .big{
font-size:16px;
margin:0;
line-height:1;
font-weight:700;
}

.modal-bg{
position:fixed;
inset:0;
background:rgba(0,0,0,.45);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
}

.modal-box{
background:white;
padding:28px;
border-radius:20px;
width:420px;
max-width:95%;
box-shadow:0 25px 60px rgba(0,0,0,.18);
}

.modal-box h2{
margin-bottom:14px;
font-size:24px;
}

.modal-box p{
margin:10px 0;
font-size:16px;
}

#chart_inc1,
#chart_inc2{
width:100% !important;
height:120px !important;
display:block;
}

#chart_inc1,
#chart_inc2{
display:block !important;
width:100% !important;
height:140px !important;
}

.sparkline{
width:100%;
height:70px;
margin-top:10px;
}

.sparkline svg{
width:100%;
height:100%;
display:block;
}

#dashboard .grid{
align-items:start;
}

#dashboard .card{
height:auto !important;
min-height:unset !important;
padding:18px !important;
display:flex;
flex-direction:column;
justify-content:flex-start;
}

#dashboard .grid {
    align-items: stretch;
}

#dashboard .big{
margin:8px 0 !important;
line-height:1.1;
}

.grid{
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:16px;
}


/* ===== TARJETAS DE MONITOREO ===== */

.monitor-card {
    padding: 0 !important;
    overflow: hidden;
    min-height: 160px;
    display: flex !important;
    flex-direction: column !important;
}

.monitor-card.tarjeta-oculta {
    display: none !important;
}

.monitor-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.monitor-icon {
    font-size: 20px;
    line-height: 1;
}

.monitor-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    letter-spacing: 0.2px;
}

.monitor-rows {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    flex: 1;
}

.monitor-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 18px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}

.monitor-row:last-child {
    border-bottom: none;
}

.monitor-row:hover {
    background: #f8fafc;
}

.monitor-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.monitor-value {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    text-align: right;
}

/* Estado de alarma en tarjetas nuevas */
.monitor-card.alarm-state .monitor-header {
    background: #fee2e2;
    border-bottom-color: #fca5a5;
}

.monitor-card.alarm-state .monitor-title {
    color: #b91c1c;
}

.monitor-card.ok-state .monitor-header {
    background: #f0fdf4;
    border-bottom-color: #86efac;
}

/* Valor en alarma */
.monitor-value.alarm {
    color: #dc2626;
}

.monitor-value.ok {
    color: #16a34a;
}

/* ===== SALA LIMPIA HORIZONTAL ===== */

.card-full {
    grid-column: 2 / -1;
}

.clean-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    padding: 16px;
    flex: 1;
}

.clean-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    border-right: 1px solid #f1f5f9;
    text-align: center;
}

.clean-item:last-child {
    border-right: none;
}

.clean-label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 8px;
}

.clean-value {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

@media(max-width: 768px){
    .clean-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .clean-item:nth-child(3) {
        border-right: none;
    }

    .card-full {
        grid-column: 1 / -1;
    }
}

/* ===== ALTURA UNIFORME TARJETAS ===== */
#card_inc1, #card_inc2,
#card_pres1, #card_pres2,
#card_lab,
#card_power {
    min-height: 200px;
}


/* ===== LOGIN PAGE ===== */

body.login-mode {
    background: linear-gradient(135deg, #1e3a5f 0%, #1a5c38 100%);
    min-height: 100vh;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 8px;
    gap: 12px;
}

.login-logo {
    width: 160px;
    height: auto;
    object-fit: contain;
    background: transparent;
}

.login-brand-name {
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(135deg, #2563eb, #16a34a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.5px;
}

.login-subtitle {
    font-size: 13px;
    color: #6b7280;
    text-align: center;
    margin-bottom: 8px;
    line-height: 1.5;
}

.login-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
    margin: 4px 0;
}

.login-label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
    display: block;
}

.login-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.login-btn {
    background: linear-gradient(135deg, #2563eb, #16a34a) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    transition: opacity 0.2s ease !important;
    margin-top: 4px;
}

.login-btn:hover {
    opacity: 0.92 !important;
    transform: translateY(-1px);
}

.login-footer {
    text-align: center;
    font-size: 11px;
    color: #9ca3af;
    margin-top: 8px;
}

#loginMsg {
    font-size: 13px;
    color: #dc2626;
    text-align: center;
    font-weight: 600;
    min-height: 20px;
}


/* ===== MODO OSCURO ===== */

body.dark-mode {
    background: #0f172a;
    color: #e2e8f0;
}

body.dark-mode .card {
    background: #1e293b;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    color: #e2e8f0;
}

body.dark-mode .monitor-header {
    background: #0f172a;
    border-bottom-color: #334155;
}

body.dark-mode .monitor-title {
    color: #e2e8f0;
}

body.dark-mode .monitor-label {
    color: #94a3b8;
}

body.dark-mode .monitor-value {
    color: #f1f5f9;
}

body.dark-mode .monitor-row {
    border-bottom-color: #1e293b;
}

body.dark-mode .monitor-row:hover {
    background: #0f172a;
}

body.dark-mode header {
    background: #0f172a;
}

body.dark-mode #labTitle {
    color: #f1f5f9;
}

body.dark-mode input,
body.dark-mode select {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}

body.dark-mode button {
    background: #334155;
    color: #e2e8f0;
}

body.dark-mode .login-btn {
    background: linear-gradient(135deg, #2563eb, #16a34a) !important;
    color: white !important;
}

body.dark-mode .tab-btn {
    background: #1e293b;
    color: #94a3b8;
    border-color: #334155;
}

body.dark-mode .tab-btn.active {
    background: #f1f5f9;
    color: #111827;
    border-color: #f1f5f9;
}

body.dark-mode .modal-box {
    background: #1e293b;
    color: #e2e8f0;
}

body.dark-mode .chart-tabs {
    background: transparent;
}

body.dark-mode #summaryRow .card {
    background: #1e293b;
}

body.dark-mode #summaryRow h3 {
    color: #94a3b8;
}

body.dark-mode .card.ok-state {
    border-left-color: #16a34a;
}

body.dark-mode .card.alarm-state {
    border-color: #dc2626;
    background: #2d1515;
}

body.dark-mode .monitor-card.ok-state .monitor-header {
    background: #0f2318;
    border-bottom-color: #166534;
}

body.dark-mode .clean-item {
    border-right-color: #334155;
}

body.dark-mode .clean-label {
    color: #94a3b8;
}

body.dark-mode .clean-value {
    color: #f1f5f9;
}

body.dark-mode table thead tr {
    background: #0f172a !important;
}

body.dark-mode table tbody tr {
    border-bottom-color: #334155;
}

body.dark-mode table td,
body.dark-mode table th {
    color: #e2e8f0 !important;
}

/* ===== BADGE OFFLINE ===== */

.monitor-header {
    position: relative;
    flex-wrap: wrap;
}

.offline-badge {
    font-size: 11px;
    font-weight: 700;
    color: #dc2626;
    background: #fee2e2;
    padding: 3px 8px;
    border-radius: 6px;
    margin-left: auto;
}

body.dark-mode .offline-badge {
    background: #450a0a;
    color: #fca5a5;
}