/* Paleta corporativa Mondi (mondigroup.com) */
:root { --naranja:#ec6607; --naranja-osc:#c95300; --agua:#0055a4; --agua-osc:#003d77; --agua-claro:#e6eef6; --tinta:#000; --gris:#666; --linea:#e3e5e9; --fondo:#f3f4f6;
        --critico:#d6264a; --critico-bg:#ffeef2; --aviso:#8a6f00; --aviso-bg:#fffae6; --ok:#11a06d; --ok-bg:#eaf8f3; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 "MADE Evolve Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; color:var(--tinta); background:var(--fondo); }
a { color:inherit; }
.top { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:12px 28px; background:#fff; border-bottom:1px solid var(--linea); box-shadow:inset 0 -3px 0 var(--naranja); }
.brand { display:flex; align-items:center; gap:16px; text-decoration:none; }
.logo-mondi { height:42px; width:auto; color:#000; flex-shrink:0; }
.brand span { padding-left:16px; border-left:1px solid var(--linea); }
.brand span { display:flex; flex-direction:column; line-height:1.2; } .brand b { font-size:18px; } .brand small { color:var(--gris); font-size:12px; }
.gota { width:30px; height:30px; }
nav { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
nav a:not(.btn) { padding:8px 12px; border-radius:8px; text-decoration:none; color:var(--gris); font-weight:600; }
nav a.on { color:var(--tinta); background:var(--fondo); box-shadow:inset 0 -2px 0 var(--naranja); }
main { max-width:1240px; margin:0 auto; padding:22px 28px 60px; }
h2 { font-size:18px; margin:0; }
h4 { margin:0 0 10px; font-size:14px; }
small { color:var(--gris); }
.ayuda { color:var(--gris); font-size:14px; margin:6px 0 16px; max-width:900px; }
.btn { display:inline-block; border:0; border-radius:999px; background:var(--naranja); color:#fff; font-weight:700; padding:9px 16px; cursor:pointer; text-decoration:none; font:inherit; font-weight:700; }
.btn:hover { background:var(--naranja-osc); }
.btn.sm { padding:6px 11px; font-size:13px; }
.btn.ghost { background:#fff; color:var(--tinta); border:1px solid var(--linea); } .btn.ghost:hover { background:var(--fondo); }
.msg { padding:12px 16px; border-radius:8px; margin-bottom:16px; background:var(--ok-bg); color:var(--ok); }
.msg.error { background:var(--critico-bg); color:var(--critico); }
.st { display:inline-block; font-size:12px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.st.critico { background:var(--critico-bg); color:var(--critico); } .st.aviso { background:var(--aviso-bg); color:var(--aviso); } .st.ok { background:var(--ok-bg); color:var(--ok); }

/* Alarmas en inicio */
.alarmas-box { background:#fff; border:1px solid var(--linea); border-radius:14px; padding:16px 20px; margin-bottom:26px; border-left:6px solid var(--ok); }
.alarmas-box.hay-criticas { border-left-color:var(--critico); } .alarmas-box.hay-avisos { border-left-color:#e8a100; }
.alarmas-box.hay-criticas h2 { color:var(--critico); } .alarmas-box.sin h2 { color:var(--ok); }
.alarmas-cab { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.lista-alarmas { list-style:none; margin:12px 0 0; padding:0; }
.lista-alarmas li { display:grid; grid-template-columns:96px 1fr auto auto; gap:14px; align-items:center; padding:10px 0; border-top:1px solid var(--linea); }
.lista-alarmas .f { white-space:nowrap; }

/* Contadores dibujados */
.titulo-fila { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.esferas { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:16px; }
.esfera { background:#fff; border:1px solid var(--linea); border-radius:16px; padding:14px 16px 16px; text-decoration:none; display:flex; flex-direction:column; transition:box-shadow .15s, transform .15s; }
.esfera:hover { box-shadow:0 6px 20px rgba(20,35,58,.1); transform:translateY(-2px); }
.esfera.critico { border-color:#f1b7b7; } .esfera.aviso { border-color:#f0d58f; }
.esfera svg { width:100%; max-width:210px; margin:0 auto; display:block; }
.aro { fill:#cfd8e3; stroke:#9fb0c4; stroke-width:4; }
.esfera.critico .aro { fill:#f6cfcf; stroke:var(--critico); } .esfera.aviso .aro { fill:#fbe6b3; stroke:#e8a100; }
.cara { fill:#fff; stroke:#b9c5d3; stroke-width:1.5; }
.marca { font-size:9px; fill:var(--gris); text-anchor:middle; letter-spacing:.08em; }
.escala { fill:none; stroke:var(--agua-claro); stroke-width:9; stroke-linecap:round; }
.zona { fill:none; stroke:var(--critico); stroke-width:9; stroke-linecap:round; opacity:.75; }
.hoy-v { font-size:19px; font-weight:800; text-anchor:middle; fill:var(--tinta); }
.hoy-l { font-size:9px; text-anchor:middle; fill:var(--gris); }
.aguja { stroke:var(--critico); stroke-width:3; stroke-linecap:round; }
.esfera.ok .aguja { stroke:var(--agua-osc); }
.eje { fill:var(--tinta); }
.dig { fill:#1d2733; } .dig.dec { fill:#b8282a; }
.dig-t { fill:#fff; font:700 12px ui-monospace, Menlo, monospace; text-anchor:middle; }
.serie { font-size:9px; fill:var(--gris); text-anchor:middle; }
.info { display:flex; flex-direction:column; gap:3px; margin-top:4px; }
.info b { font-size:15px; }
.barra { height:6px; background:var(--agua-claro); border-radius:3px; overflow:hidden; margin:6px 0 2px; }
.barra i { display:block; height:100%; background:var(--agua); border-radius:3px; }
.barra.pasado i { background:var(--critico); }
.pie { display:flex; justify-content:space-between; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap; }

/* Estadísticas */
.filtros { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.seg { display:inline-flex; background:#fff; border:1px solid var(--linea); border-radius:8px; padding:3px; }
.seg button { font:inherit; font-size:13px; font-weight:600; border:0; background:none; padding:7px 12px; border-radius:6px; color:var(--gris); cursor:pointer; }
.seg button.on { background:var(--agua); color:#fff; }
select, input[type=number], input[type=file] { font:inherit; padding:9px 11px; border:1px solid #cdd5df; border-radius:8px; background:#fff; color:var(--tinta); }
.kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.kpi { background:#fff; border-radius:12px; padding:16px 18px; border:1px solid var(--linea); }
.kpi b { display:block; font-size:30px; line-height:1.1; } .kpi span { color:var(--gris); font-size:13px; }
.kpi.alerta b { color:var(--critico); }
.cuadros { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.card { background:#fff; border:1px solid var(--linea); border-radius:12px; padding:16px 18px; }
.card.ancho { grid-column:span 2; }
.card.estrecha { max-width:640px; }
.lienzo { position:relative; height:250px; } .lienzo.bajo { height:170px; }
.leyenda { float:right; font-weight:500; font-size:12px; color:var(--gris); display:inline-flex; gap:6px; align-items:center; }
.leyenda i { display:inline-block; width:12px; height:12px; border-radius:3px; margin-left:8px; }
.l-bar { background:var(--agua); } .l-noche { background:var(--agua-osc); } .l-lim { height:0 !important; border-top:2px dashed var(--critico); border-radius:0 !important; }

/* Tablas */
.tabla { background:#fff; border-radius:12px; border:1px solid var(--linea); overflow-x:auto; margin-top:14px; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--gris); padding:12px 14px; border-bottom:1px solid var(--linea); }
td { padding:10px 14px; border-bottom:1px solid var(--linea); vertical-align:middle; }
tr:last-child td { border-bottom:0; }
.limites input[type=number] { width:120px; }
.vacio { text-align:center; color:var(--gris); padding:30px; }
.acciones { display:flex; justify-content:flex-end; margin-top:16px; }
@media (max-width:800px) {
  main, .top { padding-left:16px; padding-right:16px; }
  .kpis { grid-template-columns:1fr 1fr; } .cuadros { grid-template-columns:1fr; } .card.ancho { grid-column:auto; }
  .lista-alarmas li { grid-template-columns:1fr auto; }
}
.lista-alarmas { max-height:300px; overflow-y:auto; }

/* Portal: login y módulos */
.login-body { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; }
.login-card { background:#fff; border:1px solid var(--linea); border-top:4px solid var(--naranja); border-radius:14px; padding:28px; width:100%; max-width:360px; display:flex; flex-direction:column; gap:14px; }
.login-card h1 { margin:0; font-size:22px; } .login-card .ayuda { margin:0; }
.login-card label { display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:600; color:var(--gris); }
.login-card input[type=text], .login-card input[type=password] { font:inherit; padding:10px 12px; border:1px solid #cdd5df; border-radius:8px; color:var(--tinta); }
.login-card .btn { margin-top:6px; }
.login-card .msg { margin:0; }
.gota.grande { width:44px; height:44px; }
.usuario { display:flex; align-items:center; gap:10px; margin-left:12px; padding-left:12px; border-left:1px solid var(--linea); }
.usuario form { margin:0; }
.modulos { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; margin-top:6px; }
.modulo { background:#fff; border:1px solid var(--linea); border-radius:16px; padding:20px; text-decoration:none; display:flex; flex-direction:column; align-items:flex-start; gap:8px; transition:box-shadow .15s, transform .15s; }
.modulo:hover { box-shadow:0 6px 20px rgba(20,35,58,.1); transform:translateY(-2px); }
.modulo b { font-size:17px; }

.login-card .logo-mondi { height:56px; align-self:flex-start; margin-bottom:4px; }
.login-body { background:linear-gradient(135deg, var(--fondo) 0%, #fff 60%, var(--agua-claro) 100%); }
.login-card input:focus, select:focus, input[type=number]:focus { outline:2px solid var(--naranja); outline-offset:1px; }
.usuario a { color:var(--gris); font-weight:600; text-decoration:none; } .usuario a:hover { color:var(--tinta); }
@media (max-width:800px) { .logo-mondi { height:34px; } .brand span { display:none; } .usuario { margin-left:0; padding-left:0; border-left:0; } }