*{box-sizing:border-box;margin:0;padding:0}
body{background:#555;font-family:Arial,Helvetica,sans-serif;color:#1A1A1A}
.hmi{position:relative;width:800px;height:480px;background:#ECECEC;overflow:hidden;margin:0 auto}
.status{position:absolute;left:0;top:0;width:800px;height:52px;background:#002C7A;color:#FFFFFF;display:flex;align-items:center;font-size:18px}
.status .modo{width:150px;padding-left:10px;font-weight:bold;font-size:20px}
.status .fase{width:230px;font-size:16px}
.status .alarma{width:260px;height:40px;line-height:40px;background:#C8102E;color:#FFFFFF;text-align:center;font-weight:bold;font-size:16px;overflow:hidden;white-space:nowrap}
.status .alarma.ok{background:#1E9E3A}
.status .usuario{width:90px;text-align:center;font-size:14px;line-height:16px}
.status .hora{width:70px;text-align:center;font-size:16px;font-weight:bold}
.titulo{position:absolute;left:0;top:52px;width:800px;height:34px;line-height:34px;background:#D9D9D9;color:#002C7A;font-size:22px;font-weight:bold;padding-left:12px;border-bottom:2px solid #002C7A}
.area{position:absolute;left:0;top:86px;width:800px;height:334px;padding:8px 10px}
.barra{position:absolute;left:0;top:420px;width:800px;height:60px;background:#4A4A4A;display:flex;gap:4px;padding:0 2px}
.btn{flex:1;min-width:60px;height:60px;background:#2B5797;color:#FFFFFF;border:2px solid #FFFFFF;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;font-size:16px;font-weight:bold;line-height:17px;text-align:center}
.btn small{font-size:12px;font-weight:normal;color:#F5AD00}
.btn.sel,.btn:active{background:#F5AD00;color:#1A1A1A}
.btn.rojo{background:#C8102E} .btn.verde{background:#1E9E3A}
.campo{display:inline-block;vertical-align:top;margin:4px 6px;width:180px}
.campo .et{font-size:16px;color:#4A4A4A;height:18px;white-space:nowrap;overflow:hidden}
.campo .val{height:48px;line-height:44px;background:#FFFFFF;border:2px solid #4A4A4A;font-size:28px;font-weight:bold;text-align:right;padding-right:8px;font-family:Consolas,'Courier New',monospace}
.campo .val.edit{border-color:#2B5797;border-width:3px;background:#FFFBE6}
.campo .dir{font-size:11px;color:#2B5797;font-family:Consolas,monospace;height:14px}
.campo .uni{font-size:14px;color:#4A4A4A;margin-left:4px}
.ancho{width:250px} .corto{width:130px}
.led{display:inline-flex;align-items:center;gap:8px;font-size:16px;margin:6px 10px;min-width:220px}
.led i{display:inline-block;width:24px;height:24px;border-radius:12px;background:#777;border:2px solid #4A4A4A}
.led i.on{background:#1E9E3A} .led i.al{background:#C8102E} .led i.am{background:#F5AD00}
.sel3{display:inline-flex;margin:6px 10px;border:2px solid #4A4A4A}
.sel3 span{width:110px;height:48px;line-height:44px;text-align:center;font-size:18px;background:#FFFFFF;border-right:2px solid #4A4A4A}
.sel3 span:last-child{border-right:0} .sel3 span.on{background:#F5AD00;font-weight:bold}
.fila{display:flex;align-items:center;gap:6px;margin:4px 0}
.fila .nom{width:300px;font-size:18px}
.barra-nivel{position:relative;width:60px;height:280px;background:#FFFFFF;border:2px solid #4A4A4A;display:inline-block;vertical-align:top;margin:4px 20px}
.barra-nivel .lleno{position:absolute;left:0;bottom:0;width:100%;background:#2B5797}
.barra-nivel .marca{position:absolute;left:-4px;width:68px;height:0;border-top:3px solid #C8102E;font-size:12px;color:#C8102E}
.nota{font-size:14px;color:#4A4A4A;margin-top:6px}
.aviso{background:#F5AD00;color:#1A1A1A;font-weight:bold;font-size:16px;padding:6px 10px;border:2px solid #C8102E;margin:6px 0}
.tecla{display:inline-block;width:60px;height:60px;line-height:56px;text-align:center;font-size:24px;font-weight:bold;background:#2B5797;color:#FFFFFF;border:2px solid #FFFFFF;margin:3px}
.tecla.am{background:#F5AD00;color:#1A1A1A}
table.alarmas{border-collapse:collapse;width:100%;font-size:15px}
table.alarmas th{background:#002C7A;color:#FFFFFF;text-align:left;padding:4px 6px;font-size:14px}
table.alarmas td{padding:4px 6px;border-bottom:1px solid #D9D9D9}
table.alarmas tr.act td{background:#FFD6D6;font-weight:bold}
table.etapas td{padding:5px 8px;font-size:18px;border-bottom:1px solid #D9D9D9}
table.etapas td.v{font-family:Consolas,monospace;font-weight:bold;background:#FFFFFF;width:90px;text-align:right}
.esq{display:block;margin:0 auto}