/* RIEGO A1 · HMI estilo iFIX clásico: gris de consola, botones con relieve, displays negros con dígitos verdes.
   Estética única a propósito (como una consola de planta): no cambia con el tema claro u oscuro. */
:root {
  color-scheme: light;
  --consola: #b9bec3;        /* fondo de la ventana */
  --pantalla: #c3c7cb;       /* lienzo del display */
  --cara: #d4d0c8;           /* cara de botón */
  --luz: #ffffff; --sombra: #6e6e6e; --sombra2: #404040;
  --titulo-1: #0a246a; --titulo-2: #3a6ea5;
  --tinta: #000000; --tinta-2: #303437;
  --display: #000000; --dig: #2bff4f; --dig-2: #e8f0e8;
  --rojo: #ff1a1a; --rojo-osc: #7a0000; --amarillo: #ffe600; --verde: #00b52a; --gris: #8a8f94; --magenta: #ff2bd6; --azul: #0b5fff;
  --agua: #2f7df6; --agua-2: #8cc0ff;
  --f-ui: Tahoma, Verdana, "Segoe UI", system-ui, sans-serif;
  --f-dig: "Share Tech Mono", "Consolas", "Lucida Console", monospace;
  --barra-alarma: 58px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--consola); color: var(--tinta); font: 13px/1.35 var(--f-ui); min-height: 100vh; padding-bottom: calc(var(--barra-alarma) + env(safe-area-inset-bottom, 0px)); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--titulo-1); }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px dotted #000; outline-offset: 2px; }

/* relieve clásico */
.relieve { background: var(--cara); border: 2px solid; border-color: var(--luz) var(--sombra2) var(--sombra2) var(--luz); box-shadow: inset -1px -1px 0 var(--sombra), inset 1px 1px 0 #e9e7e2; }
.hundido { border: 2px solid; border-color: var(--sombra) var(--luz) var(--luz) var(--sombra); box-shadow: inset 1px 1px 0 var(--sombra2); }
.btn { background: var(--cara); border: 2px solid; border-color: var(--luz) var(--sombra2) var(--sombra2) var(--luz); box-shadow: inset -1px -1px 0 var(--sombra), inset 1px 1px 0 #e9e7e2; padding: 5px 12px; min-height: 30px; cursor: pointer; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; font-size: 12px; }
.btn:active, .btn[aria-pressed="true"] { border-color: var(--sombra2) var(--luz) var(--luz) var(--sombra2); box-shadow: inset 1px 1px 0 var(--sombra); background: #c9c5bd; }
.btn[aria-pressed="true"] { color: var(--titulo-1); }
.btn:disabled { color: #8d8a84; text-shadow: 1px 1px 0 #fff; cursor: not-allowed; }
.btn.peligro { color: #a00000; }
.btn.ok { color: #005a14; }
.btn.chico { padding: 2px 8px; min-height: 24px; font-size: 11px; }
.campo { background: #fff; border: 2px solid; border-color: var(--sombra) var(--luz) var(--luz) var(--sombra); box-shadow: inset 1px 1px 0 var(--sombra2); padding: 4px 6px; min-height: 28px; width: 100%; min-width: 0; }
.campo:disabled { background: #e4e2dd; color: #555; }

/* barra de título */
.titulo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; color: #fff; background: linear-gradient(90deg, var(--titulo-1), var(--titulo-2)); padding-block: 6px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; grid-template-columns: auto 1fr auto; gap: 4px 16px; align-items: center; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.marca svg { flex: none; }
.marca small { display: block; font-weight: 400; font-size: 11px; opacity: .85; letter-spacing: .02em; }
.pantalla-nombre { text-align: center; font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.reloj { text-align: right; font-family: var(--f-dig); font-size: 15px; white-space: nowrap; }
.sesion { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; font-size: 12px; border-top: 1px solid #ffffff40; padding-top: 4px; }
.sesion b { color: #ffe680; }
.sesion .btn { color: #000; padding: 1px 8px; min-height: 22px; font-size: 11px; }
.com { display: inline-flex; align-items: center; gap: 6px; }
.led { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #000; display: inline-block; background: var(--gris); box-shadow: inset -2px -2px 3px #0005; }
.led.verde { background: #2bff4f; } .led.rojo { background: var(--rojo); } .led.amarillo { background: var(--amarillo); } .led.magenta { background: var(--magenta); }

/* navegación */
.nav { display: flex; gap: 4px; padding: 6px max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px)); background: var(--consola); border-bottom: 2px solid var(--sombra); overflow-x: auto; scrollbar-width: thin; }
.nav .btn { flex: 0 0 auto; min-width: 118px; min-height: 36px; }
.nav .cuenta { display: inline-block; min-width: 20px; padding: 0 5px; margin-left: 6px; background: var(--rojo); color: #fff; border-radius: 9px; font-size: 11px; }
.nav .cuenta:empty { display: none; }

main { padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.display { background: var(--pantalla); padding: 10px; display: grid; gap: 10px; min-width: 0; }
.display > h2 { margin: 0; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.aviso-nivel { margin: 0; padding: 6px 10px; background: #fffbe0; border: 1px solid #b59b00; font-size: 12px; }

/* sinóptico */
.mimico { overflow-x: auto; background: #aeb4b9; }
.mimico svg { display: block; width: 100%; height: auto; max-height: calc(100vh - 236px); min-height: 430px; }
.m-fondo { fill: #b2b8bd; }
.m-grilla { stroke: #a6acb1; stroke-width: 1; fill: none; }
.m-titulo { font: 700 15px var(--f-ui); fill: #102030; letter-spacing: .08em; }
.m-txt { font: 12px var(--f-ui); fill: #102030; }
.m-txt-b { font: 700 12px var(--f-ui); fill: #102030; }
.m-tag { font: 700 13px var(--f-ui); fill: #000; }
.m-chico { font: 11px var(--f-ui); fill: #2a3439; }
.m-ok { fill: #0b5a1c; } .m-mal { fill: #a00000; }
.tubo { fill: none; stroke: #59626a; stroke-width: 13; stroke-linejoin: round; stroke-linecap: square; }
.tubo-luz { fill: none; stroke: #a8b0b7; stroke-width: 5; stroke-linejoin: round; stroke-linecap: square; }
.flujo { fill: none; stroke: var(--agua); stroke-width: 5; stroke-dasharray: 10 12; stroke-linejoin: round; opacity: 0; }
.flujo.on { opacity: 1; animation: fluir .7s linear infinite; }
@keyframes fluir { to { stroke-dashoffset: -22; } }
.tanque-cuerpo { fill: url(#acero); stroke: #2c3339; stroke-width: 2; }
.tanque-agua { fill: url(#agua); }
.escala { stroke: #1b2226; stroke-width: 1.2; }
.lim-lal { stroke: var(--amarillo); stroke-width: 2.5; stroke-dasharray: 8 5; }
.lim-lall { stroke: var(--rojo); stroke-width: 2.5; stroke-dasharray: 8 5; }
.instr { fill: #f4f4ee; stroke: #000; stroke-width: 1.6; }
.instr-txt { font: 700 11px var(--f-ui); fill: #000; }
.caja-dig { fill: #000; stroke: #6e6e6e; stroke-width: 1.5; }
.dig { font: 20px var(--f-dig); fill: var(--dig); }
.dig-chico { font: 14px var(--f-dig); fill: var(--dig-2); }
.dig.mal, .dig-chico.mal { fill: var(--magenta); }
.bomba-cuerpo { stroke: #000; stroke-width: 2; fill: var(--verde); }
.bomba.marcha .bomba-cuerpo { animation: energizada 1s steps(1) infinite; }
@keyframes energizada { 0% { fill: var(--rojo); } 50% { fill: var(--rojo-osc); } }
.bomba.bloq .bomba-cuerpo { fill: var(--amarillo); }
.bomba.fuera .bomba-cuerpo { fill: var(--gris); }
.bomba.sincom .bomba-cuerpo { fill: var(--magenta); }
.bomba-base { fill: #59626a; stroke: #000; stroke-width: 1.5; }
.clic { cursor: pointer; }
.clic:hover .resalte, .clic:focus-visible .resalte { stroke: #0b5fff; stroke-width: 3; }
.resalte { fill: transparent; stroke: transparent; stroke-width: 3; stroke-dasharray: 6 4; }
.inv { fill: #e9ece4; fill-opacity: .35; stroke: #4c5a63; stroke-width: 3; }
.maceta { fill: #a35f34; stroke: #5b2e14; stroke-width: 2; }
.tierra { stroke: #3a2010; stroke-width: 1; }
.hoja { fill: #2f8a3a; stroke: #14501c; stroke-width: 1.2; }
.barra-fondo { fill: #000; stroke: #6e6e6e; stroke-width: 1.5; }
.barra-banda { fill: #2bff4f; fill-opacity: .22; }
.barra-pv { fill: var(--agua-2); }
.gota { fill: var(--agua); opacity: 0; }
.goteo.on .gota { animation: gotear 1s linear infinite; }
.goteo.on .gota:nth-child(2) { animation-delay: .33s; } .goteo.on .gota:nth-child(3) { animation-delay: .66s; }
@keyframes gotear { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(26px); } }
.cinta { font: 700 12px var(--f-ui); }
.cinta-fondo-rojo { fill: var(--rojo); } .cinta-fondo-amarillo { fill: var(--amarillo); }

/* tarjetas de resumen (celular) */
.resumen { display: none; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.tile { text-align: left; padding: 8px; cursor: pointer; display: grid; gap: 4px; }
.tile .t { font-weight: 700; font-size: 12px; display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.tile .v { background: var(--display); color: var(--dig); font: 22px var(--f-dig); padding: 2px 8px; border: 2px solid; border-color: var(--sombra) var(--luz) var(--luz) var(--sombra); }
.tile .v.mal { color: var(--magenta); }
.tile .s { font-size: 11px; color: var(--tinta-2); }

/* leyenda */
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 11px; padding: 4px 2px 0; }
.leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.leyenda i { width: 14px; height: 14px; border: 1px solid #000; display: inline-block; }

/* paneles genéricos */
.grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; align-items: start; }
.panel { padding: 0; min-width: 0; }
.panel > h3 { margin: 0; padding: 4px 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: linear-gradient(90deg, #4a5a68, #7e8d99); }
.panel > .cuerpo { padding: 10px; display: grid; gap: 8px; }
.fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 140px); gap: 8px; align-items: center; }
.fila label { font-size: 12px; }
.fila .unidad { font-size: 11px; color: var(--tinta-2); }
.acciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nota { margin: 0; font-size: 11.5px; color: var(--tinta-2); }
.dig-box { background: var(--display); color: var(--dig); font: 18px var(--f-dig); padding: 2px 8px; border: 2px solid; border-color: var(--sombra) var(--luz) var(--luz) var(--sombra); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dig-box.mal { color: var(--magenta); }
.msg { margin: 0; font-size: 12px; font-weight: 700; min-height: 1.3em; }
.msg.ok { color: #0b5a1c; } .msg.mal { color: #a00000; }

/* tablas tipo resumen de alarmas */
.tabla { overflow-x: auto; background: #fff; }
table { border-collapse: collapse; width: 100%; font-size: 12px; }
th { background: #d4d0c8; text-align: left; padding: 4px 8px; border-bottom: 2px solid var(--sombra); border-right: 1px solid #b0aca4; white-space: nowrap; position: sticky; top: 0; }
td { padding: 4px 8px; border-bottom: 1px solid #d8d8d8; vertical-align: middle; }
tr.sel td { background: #0a246a !important; color: #fff !important; }
tr.al-act-nr td { animation: filaAlarma 1s steps(1) infinite; font-weight: 700; }
@keyframes filaAlarma { 0% { background: var(--rojo); color: #fff; } 50% { background: var(--amarillo); color: #000; } }
tr.al-act td { color: #c00000; font-weight: 700; }
tr.al-norm-nr td { color: #7a6a00; }
.pri { display: inline-block; min-width: 52px; text-align: center; font-weight: 700; border: 1px solid #000; padding: 0 4px; color: #000; }
.pri-1 { background: var(--rojo); color: #fff; } .pri-2 { background: var(--amarillo); color: #000; } .pri-3 { background: #9fd1ff; color: #000; }
.dias { display: inline-flex; gap: 2px; }
.dias button { width: 26px; min-height: 24px; padding: 0; font-size: 11px; }

/* tendencias */
.trend-cab { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.trend-lienzo { position: relative; background: #000; border: 2px solid; border-color: var(--sombra) var(--luz) var(--luz) var(--sombra); }
.trend-lienzo canvas { display: block; width: 100%; height: 440px; touch-action: pan-y; }
.plumas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; }
.pluma { display: grid; grid-template-columns: auto auto 1fr auto; gap: 6px; align-items: center; padding: 4px 8px; cursor: pointer; text-align: left; }
.pluma input { margin: 0; }
.pluma i { width: 18px; height: 4px; display: inline-block; }
.pluma b { font-family: var(--f-dig); font-size: 15px; background: #000; color: var(--dig); padding: 0 6px; min-width: 64px; text-align: right; }
.pluma .n { font-size: 11px; }

/* faceplate */
.fp-capa { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.faceplate { position: absolute; pointer-events: auto; width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - var(--barra-alarma) - 40px); display: grid; grid-template-rows: auto minmax(0, 1fr); box-shadow: 4px 4px 0 #0006; }
.fp-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: linear-gradient(90deg, var(--titulo-1), var(--titulo-2)); color: #fff; padding: 3px 4px 3px 8px; font-weight: 700; cursor: move; user-select: none; touch-action: none; }
.fp-titulo .btn { color: #000; min-height: 22px; padding: 0 8px; }
.fp-cuerpo { overflow-y: auto; padding: 10px; display: grid; gap: 10px; background: var(--cara); }
.fp-pv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: stretch; }
.fp-barra { width: 38px; height: 150px; position: relative; background: #000; border: 2px solid; border-color: var(--sombra) var(--luz) var(--luz) var(--sombra); }
.fp-barra .pv { position: absolute; left: 4px; right: 4px; bottom: 0; background: var(--agua-2); }
.fp-barra .banda { position: absolute; left: 0; right: 0; background: #2bff4f38; border-top: 2px solid #2bff4f; border-bottom: 2px solid #2bff4f; }
.fp-barra .crit { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--rojo); }
.fp-datos { display: grid; gap: 6px; align-content: start; }
.fp-grande { font: 40px/1 var(--f-dig); background: #000; color: var(--dig); padding: 6px 10px; border: 2px solid; border-color: var(--sombra) var(--luz) var(--luz) var(--sombra); text-align: right; }
.fp-grande.mal { color: var(--magenta); }
.fp-estado { font-weight: 700; padding: 4px 8px; border: 1px solid #000; text-align: center; letter-spacing: .06em; }
.fp-estado.marcha { animation: estadoMarcha 1s steps(1) infinite; color: #fff; }
@keyframes estadoMarcha { 0% { background: var(--rojo); } 50% { background: var(--rojo-osc); } }
.fp-estado.parada { background: var(--verde); color: #fff; }
.fp-estado.bloq { background: var(--amarillo); }
.fp-estado.fuera { background: var(--gris); color: #fff; }
.fp-estado.sincom { background: var(--magenta); color: #fff; }
.grupo { border: 2px groove #f4f2ee; padding: 8px; display: grid; gap: 6px; margin: 0; min-width: 0; }
.grupo legend { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 0 4px; }
.modos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.permisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12px; }
.permisos li { display: flex; gap: 8px; align-items: center; }
.mini { width: 100%; height: 90px; display: block; background: #000; border: 2px solid; border-color: var(--sombra) var(--luz) var(--luz) var(--sombra); }
.linea-comando { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.linea-comando label { flex: 1 1 140px; }
.linea-comando .campo { flex: 0 0 90px; width: 90px; }

/* barra de alarmas (siempre visible) */
.barra-alarma { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; min-height: calc(var(--barra-alarma) + env(safe-area-inset-bottom, 0px)); background: #1c1f22; color: #fff; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-block: 6px calc(6px + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); border-top: 3px solid #50575d; }
.baliza { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #000; background: #4a4f54; box-shadow: inset -4px -4px 6px #0007, 0 0 0 3px #2c3034; }
.baliza.parpadeo { animation: baliza .8s steps(1) infinite; }
@keyframes baliza { 0% { background: var(--rojo); box-shadow: inset -4px -4px 6px #0006, 0 0 14px 4px #ff1a1a99; } 50% { background: var(--amarillo); box-shadow: inset -4px -4px 6px #0006, 0 0 14px 4px #ffe60099; } }
.baliza.fijo-rojo { background: var(--rojo); } .baliza.fijo-amarillo { background: var(--amarillo); }
.al-texto { font-family: var(--f-dig); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.al-texto .linea1 { display: block; overflow: hidden; text-overflow: ellipsis; }
.al-texto .linea2 { display: block; font-family: var(--f-ui); font-size: 11px; color: #b9c0c6; }
.al-texto.activa .linea1 { color: #ff6b6b; } .al-texto.nr .linea1 { color: #ffe600; }
.barra-alarma .btn { color: #000; }

/* login */
.login { min-height: calc(100vh - var(--barra-alarma)); display: grid; place-items: center; padding: 16px; }
.login-ventana { width: min(420px, 100%); }
.login-ventana .fp-titulo { cursor: default; }
.login-ventana form { padding: 14px; display: grid; gap: 10px; background: var(--cara); }
.demo-usuarios { display: grid; gap: 6px; }
.sim { padding: 8px; display: grid; gap: 6px; }
.sim h4 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }

@media (max-width: 760px) {
  .titulo { grid-template-columns: minmax(0, 1fr) auto; }
  .pantalla-nombre { display: none; }
  .reloj { font-size: 12px; white-space: normal; max-width: 96px; line-height: 1.2; }
  .resumen { display: grid; order: -1; }
  .display > h2 { order: -2; }
  .mimico svg { width: 940px; max-height: none; min-height: 0; }
  .fila { grid-template-columns: minmax(0, 1fr) 110px; }
  .faceplate { left: 8px !important; right: 8px; top: auto !important; bottom: calc(var(--barra-alarma) + env(safe-area-inset-bottom, 0px) + 8px); width: auto; max-height: calc(100vh - var(--barra-alarma) - 80px); }
  .trend-lienzo canvas { height: 320px; }
  .al-texto { font-size: 13px; }
  .barra-alarma .btn { padding: 4px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .flujo.on, .goteo.on .gota { animation: none; }
  .bomba.marcha .bomba-cuerpo { animation: none; fill: var(--rojo); }
  .fp-estado.marcha { animation: none; background: var(--rojo); }
  tr.al-act-nr td { animation: none; background: #ffd0d0; }
  .baliza.parpadeo { animation: none; background: var(--rojo); }
}

/* aviso flotante */
.toast { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(var(--barra-alarma) + env(safe-area-inset-bottom, 0px) + 12px); z-index: 90; max-width: min(420px, calc(100vw - 32px)); padding: 8px 12px; font-weight: 700; }
.toast.ok { color: #0b5a1c; } .toast.mal { color: #a00000; }

/* v3: datos manuales y auditoría */
.man-form { display: grid; grid-template-columns: minmax(200px, 2fr) minmax(110px, 1fr) minmax(160px, 2fr) auto; gap: 8px; align-items: end; }
.man-form label { display: grid; gap: 3px; font-size: 12px; }
.man-form .unidad { font-size: 11px; color: var(--tinta-2); }
.man-form .acciones { margin: 0; }
.rombo { display: inline-block; width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid #000; margin-right: 8px; vertical-align: 1px; }
.au-val { max-width: 280px; word-break: break-word; }
.au-ant { color: #5a5a5a; }
.au-ruta { font-size: 11px; color: #3a4a5a; word-break: break-all; }
@media (max-width: 760px) { .man-form { grid-template-columns: 1fr 1fr; } .man-form label:first-child, .man-form label:nth-child(3) { grid-column: 1 / -1; } }