:root {
  --bg-dark: #0b0f19;
  --panel-bg: #111827;
  --border-color: #1f293d;
  --text-main: #f8fafc;
  --elis-blue: #0284c7;
  --elis-red: #e11d48;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Encabezado Superior Elis Laundry Edge IoT */
header.elis-header {
  background: #ffffff;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  border-bottom: 3px solid var(--elis-blue);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-menu {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
}

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

.elis-header-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.elis-title {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
}

.elis-subtitle {
  color: var(--elis-blue);
  font-size: 20px;
  font-weight: 800;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.badge-user {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge-datetime {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  display: flex;
  gap: 12px;
}

.status-pill {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-online {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}

.status-offline {
  background: #ffe4e6;
  color: #be123c;
  border: 1px solid #fca5a5;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Contenedor Principal Dashboard HMI (Aprovechamiento Vertical Máximo) */
.hmi-main-container {
  flex: 1;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Panel Mímico Industrial sin subencabezado */
.mimic-panel {
  background-color: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  overflow: hidden;
}

/* Viewport Mímico Industrial */
.mimic-viewport {
  position: relative;
  background: linear-gradient(180deg, #090d16 0%, #030712 100%);
  border-radius: 12px;
  min-height: 410px;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 25px 20px 15px 20px;
  overflow: hidden;
  box-shadow: inset 0 0 50px rgba(0,0,0,0.8);
}

/* Título HMI Ubicado en la Esquina Superior Derecha Dentro del Mímico */
.mimic-title-badge {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 15px;
  font-weight: 800;
  color: #38bdf8;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid #1e293b;
  padding: 6px 16px;
  border-radius: 8px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  z-index: 10;
  backdrop-filter: blur(4px);
}

/* Grupo de Tanque */
.tank-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
}

.tank-label {
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #38bdf8;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  text-align: center;
}

/* Indicadores de Porcentaje */
.tank-badge-large {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  padding: 6px 20px;
  border-radius: 20px;
  font-size: 21px;
  font-weight: 900;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.6), inset 0 1px 1px rgba(255,255,255,0.4);
  border: 1.5px solid rgba(255,255,255,0.4);
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.badge-salmuera {
  background: linear-gradient(135deg, #65a30d 0%, #4d7c0f 100%);
  box-shadow: 0 4px 14px rgba(101, 163, 13, 0.6), inset 0 1px 1px rgba(255,255,255,0.4);
}

.tank-vessel-container {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

/* Vasos Cilíndricos 3D Con Cristal Transparente */
.vessel-3d {
  position: relative;
  background: linear-gradient(90deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.08) 50%, rgba(0,0,0,0.5) 100%);
  box-shadow: inset -15px 0 25px rgba(0,0,0,0.8), inset 10px 0 20px rgba(255,255,255,0.3), 0 12px 30px rgba(0,0,0,0.7);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Domos 3D Superiores */
.vessel-cap-top {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(180deg, #94a3b8 0%, #475569 100%);
  border-radius: 50% / 100% 100% 0 0;
  border-bottom: 2px solid #334155;
  box-shadow: inset 0 4px 6px rgba(255,255,255,0.5);
  z-index: 5;
}

.cap-green {
  background: linear-gradient(180deg, #a3e635 0%, #4d7c0f 100%);
}

/* Tanque 1: Agua Bruta (AD0 - El Más Alto) */
.vessel-agua-bruta {
  width: 145px;
  height: 310px;
  border: 3px solid #cbd5e1;
  border-radius: 24px 24px 8px 8px;
}

/* Tanque 2: Agua Limpia (AD1 - Gemelos) */
.vessel-agua-limpia {
  width: 115px;
  height: 260px;
  border: 3px solid #cbd5e1;
  border-radius: 20px 20px 8px 8px;
}

/* Tubería 3D de Vasos Comunicantes */
.pipe-3d-connecting {
  position: absolute;
  bottom: 18px;
  left: 95px;
  width: 60px;
  height: 18px;
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 50%, #0369a1 100%);
  border: 2px solid #e2e8f0;
  border-radius: 4px;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6), inset 0 2px 4px rgba(255,255,255,0.7);
}

/* Tanque 3: Salmuera (AD2 - Verde Ancho) */
.vessel-salmuera {
  width: 185px;
  height: 220px;
  background: linear-gradient(90deg, rgba(163,230,53,0.15) 0%, rgba(163,230,53,0.03) 25%, rgba(163,230,53,0.1) 50%, rgba(0,0,0,0.5) 100%);
  border: 3px solid #a3e635;
  border-radius: 28px 28px 10px 10px;
  box-shadow: inset -15px 0 25px rgba(0,0,0,0.8), inset 10px 0 20px rgba(163,230,53,0.4), 0 12px 30px rgba(0,0,0,0.7);
}

/* Fluido Animado Nivel 3D - Colores Industriales Vivos */
.liquid-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.liquid-3d-agua {
  background: linear-gradient(90deg, #0284c7 0%, #38bdf8 30%, #0284c7 70%, #075985 100%);
  box-shadow: inset 0 6px 12px rgba(255, 255, 255, 0.6), 0 -6px 20px rgba(56, 189, 248, 0.9);
  border-top: 2px solid #7dd3fc;
}

.liquid-3d-limpia {
  background: linear-gradient(90deg, #0284c7 0%, #38bdf8 35%, #0ea5e9 65%, #075985 100%);
  box-shadow: inset 0 6px 12px rgba(255, 255, 255, 0.6), 0 -6px 20px rgba(56, 189, 248, 0.9);
  border-top: 2px solid #bae6fd;
}

.liquid-3d-salmuera {
  background: linear-gradient(90deg, #65a30d 0%, #a3e635 30%, #84cc16 70%, #3f6212 100%);
  box-shadow: inset 0 6px 12px rgba(255, 255, 255, 0.6), 0 -6px 20px rgba(163, 230, 53, 0.9);
  border-top: 2px solid #d9f99d;
}

/* Menisco 3D Brillante Superior del Agua */
.liquid-meniscus {
  height: 12px;
  width: 100%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.95) 0%, rgba(56, 189, 248, 0.8) 60%, rgba(2, 132, 199, 0.4) 100%);
  border-radius: 50% / 100% 100% 0 0;
  box-shadow: 0 3px 8px rgba(255, 255, 255, 0.9);
}

.meniscus-green {
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.95) 0%, rgba(163, 230, 53, 0.85) 60%, rgba(101, 163, 13, 0.4) 100%);
}

/* Regla Graduada de Porcentaje */
.tank-ruler {
  position: absolute;
  top: 18px;
  right: 5px;
  bottom: 8px;
  width: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 10px;
  color: #cbd5e1;
  font-weight: 800;
  pointer-events: none;
  z-index: 6;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}

/* Tabla Histórica de Datos */
.history-panel {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 16px;
}

.table-responsive {
  max-height: 125px;
  overflow-y: auto;
}

table.hmi-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12px;
}

table.hmi-table th {
  background: #111827;
  color: #38bdf8;
  padding: 8px;
  position: sticky;
  top: 0;
  border-bottom: 2px solid var(--border-color);
}

table.hmi-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #334155;
}

table.hmi-table tr:hover {
  background: rgba(56,189,248,0.1);
}