/* NetMap - estilos compartidos (claro / oscuro automático) */
:root{color-scheme:light;--bg:#f5f4f0;--card:#fff;--line:#e3e1da;--tx:#1f1f1d;--tx2:#6b6a65;--acc:#185FA5;--accbg:#E6F1FB;--net:#378ADD;
--ok:#639922;--okbg:#EAF3DE;--okt:#27500A;--wip:#EF9F27;--wipbg:#FAEEDA;--wipt:#633806;--pen:#E24B4A;--penbg:#FCEBEB;--pent:#791F1F;--bad:#5F5E5A;
--paper:#fff;--wall:#4a4a47;--ink:#55554f;--ink2:#9a9890}
@media (prefers-color-scheme:dark){:root{color-scheme:dark;--bg:#1c1c1a;--card:#262624;--line:#3a3a37;--tx:#f1efe8;--tx2:#a9a79f;--accbg:#0C447C;--acc:#B5D4F4;
--okbg:#27500A;--okt:#C0DD97;--wipbg:#633806;--wipt:#FAC775;--penbg:#791F1F;--pent:#F7C1C1;--paper:#1f1f1d;--wall:#b4b2a9;--ink:#a9a79f;--ink2:#6b6a65}}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--tx);font-size:14px}
body.centro{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
h1{font-size:20px;font-weight:600;margin:0 0 4px}
h2{font-size:16px;font-weight:600;margin:0}
.logo{color:var(--net)}
.sub{color:var(--tx2);margin:0 0 14px;font-size:13px}
.tarjeta{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;width:100%}
label{display:block;font-size:13px;color:var(--tx2);margin-bottom:10px}
input,select,textarea{display:block;width:100%;font:inherit;font-size:14px;height:36px;padding:0 10px;margin-top:4px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--tx)}
textarea{height:64px;padding:8px 10px;resize:vertical}
input[type=checkbox]{display:inline;width:auto;height:auto;margin:0 6px 0 0}
button,.btn{font:inherit;font-size:13px;height:34px;padding:0 12px;border:1px solid var(--line);background:var(--card);color:var(--tx);border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap}
button:hover,.btn:hover{border-color:var(--tx2)}
button.primario{background:var(--acc);border-color:var(--acc);color:#fff;width:100%;justify-content:center;height:38px}
@media (prefers-color-scheme:dark){button.primario{background:#185FA5;border-color:#185FA5}}
button.on{background:var(--accbg);color:var(--acc);border-color:var(--acc)}
button.peligro{color:var(--pen)}
.aviso{font-size:13px;padding:8px 10px;border-radius:8px;margin:0 0 12px}
.aviso.err{background:var(--penbg);color:var(--pent)}
.aviso.ok{background:var(--okbg);color:var(--okt)}
.aviso.info{background:var(--accbg);color:var(--acc)}
header.barra{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--card);border-bottom:1px solid var(--line);flex-wrap:wrap}
header.barra .t{font-weight:600}
header.barra .s{font-size:12px;color:var(--tx2)}
.sp{flex:1}
.badge{font-size:12px;padding:3px 10px;border-radius:8px;white-space:nowrap}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:-1px;margin-right:4px}
.toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,12px);opacity:0;transition:opacity .2s,transform .2s;display:flex;align-items:center;gap:8px;
  background:var(--card);color:var(--tx);border:1px solid var(--line);border-left:4px solid var(--net);padding:10px 14px;border-radius:10px;font-size:13px;z-index:60;max-width:92vw;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast.ver{opacity:1;transform:translate(-50%,0)}
.toast i{font-size:18px;color:var(--net)}
.toast.ok{border-left-color:var(--ok)}.toast.ok i{color:var(--ok)}
.toast.error{border-left-color:var(--pen)}.toast.error i{color:var(--pen)}
.modal-fondo{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:16px;z-index:40;animation:aparece .15s ease-out}
.modal-fondo .tarjeta{max-width:420px;max-height:90vh;overflow:auto;box-shadow:0 20px 50px rgba(0,0,0,.35);animation:sube .18s ease-out}
.dialogo{text-align:center;max-width:380px!important}
.dialogo .sub{margin:6px 0 16px;font-size:14px;line-height:1.5}
.dialogo label{text-align:left}
.dialogo .fila{justify-content:center}
.dialogo .fila button{min-width:110px;justify-content:center}
.dlg-ic{width:48px;height:48px;border-radius:50%;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:24px;background:var(--accbg);color:var(--acc)}
.dlg-ic.peligro{background:var(--penbg);color:var(--pen)}
button.primario.rojo{background:#E24B4A;border-color:#E24B4A}
button:disabled{opacity:.5;cursor:not-allowed}
@keyframes aparece{from{opacity:0}}
@keyframes sube{from{transform:translateY(10px);opacity:0}}
.fila{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}

/* Recuadro de avance dentro de una ventana (subidas, conversiones) */
.estado{display:flex;gap:12px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:6px 0 4px}
.estado .giro{flex:none;width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--net);border-radius:50%;animation:giro .8s linear infinite}
.estado .tx{flex:1;min-width:0}
.estado b{display:block;font-size:13px;font-weight:600}
.estado small{display:block;font-size:12px;color:var(--tx2);margin-top:2px;line-height:1.4}
.estado .barra{height:6px;background:var(--line);border-radius:3px;margin-top:8px;overflow:hidden}
.estado .barra i{display:block;height:100%;width:0;background:var(--net);transition:width .2s}
@keyframes giro{to{transform:rotate(360deg)}}

/* Selector de opciones en botones (subir plano, descargar) */
.modos{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0}
.modos label{margin:0}
.modos input{display:none}
.modos span{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 8px;border:1px solid var(--line);border-radius:9px;cursor:pointer;font-size:13px;color:var(--tx2)}
.modos input:checked+span{border-color:var(--acc);background:var(--accbg);color:var(--acc)}

/* Opciones de las listas desplegables con los colores del tema */
option{background:var(--card);color:var(--tx)}

/* Aviso de conexión: sin señal / cambios por subir */
.estado-red{position:fixed;left:12px;bottom:12px;z-index:45;display:flex;align-items:center;gap:8px;background:var(--card);color:var(--tx);
  border:1px solid var(--line);border-left:4px solid var(--net);border-radius:10px;padding:8px 12px;font-size:12px;box-shadow:0 6px 18px rgba(0,0,0,.25);cursor:pointer;max-width:calc(100% - 24px)}
.estado-red.sin{border-left-color:var(--wip)}
.estado-red i{font-size:17px;color:var(--net)}
.estado-red.sin i{color:var(--wip)}