:root {
  --bg: #0a1020; --panel: #111a2f; --panel2: #16213b; --linea: #223052; --texto: #e7edf8; --suave: #93a3c2;
  --acento: #5b9bff; --acento2: #3b6fe0; --ok: #34d399; --aviso: #fbbf24; --mal: #f87171;
  --radio: 14px; --sombra: 0 10px 30px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: radial-gradient(1200px 600px at 80% -10%, #14224a 0%, transparent 60%), var(--bg); color: var(--texto);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; min-height: 100vh; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 18px 16px 60px; }

/* barra superior */
.top { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.marca { display: flex; align-items: center; gap: 12px; }
.marca .logo { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, var(--acento), #8b5cf6); display: grid; place-items: center; font-weight: 800; letter-spacing: .02em; }
.marca h1 { font-size: 18px; margin: 0; line-height: 1.1; }
.marca small { color: var(--suave); }
.acciones-top { display: flex; gap: 8px; flex-wrap: wrap; }

/* botones */
.btn { background: var(--panel2); border: 1px solid var(--linea); padding: 8px 13px; border-radius: 10px; cursor: pointer; transition: .15s; white-space: nowrap; }
.btn:hover { border-color: var(--acento); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primario { background: var(--acento2); border-color: var(--acento2); font-weight: 600; }
.btn.primario:hover { background: var(--acento); border-color: var(--acento); }
.btn.peligro { border-color: #6b2b33; color: #fca5a5; }
.btn.chico { padding: 5px 10px; font-size: 13px; }

/* servidor */
.servidor { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.pastilla { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px; }
.pastilla .t { color: var(--suave); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.pastilla .v { font-size: 20px; font-weight: 650; margin-top: 2px; }
.pastilla .s { color: var(--suave); font-size: 12px; }
.barra { height: 6px; background: #0b1428; border-radius: 99px; overflow: hidden; margin-top: 8px; }
.barra > i { display: block; height: 100%; background: var(--acento); border-radius: 99px; }
.barra > i.aviso { background: var(--aviso); } .barra > i.mal { background: var(--mal); }

/* total del día */
.total { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }

/* tarjetas */
.cajeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--linea); border-radius: 18px; padding: 16px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 14px; }
.card.mal { border-color: #7f2d37; } .card.aviso { border-color: #6b5a1c; }
.card-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.card-h h2 { margin: 0; font-size: 18px; } .card-h small { color: var(--suave); }
.insignia { padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 650; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.insignia.ok { background: rgba(52, 211, 153, .14); color: var(--ok); }
.insignia.aviso { background: rgba(251, 191, 36, .14); color: var(--aviso); }
.insignia.mal { background: rgba(248, 113, 113, .16); color: var(--mal); }
.filas { display: grid; gap: 7px; }
.fila { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.fila .nom { width: 98px; color: var(--suave); flex: none; }
.fila .det { color: var(--texto); min-width: 0; overflow-wrap: anywhere; }
.punto { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #4b5a7a; box-shadow: 0 0 0 3px rgba(255,255,255,.04); }
.punto.ok { background: var(--ok); } .punto.aviso { background: var(--aviso); } .punto.mal { background: var(--mal); }
.chip { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--linea); margin-right: 4px; }
.chip.ok { border-color: #1f6b52; color: var(--ok); } .chip.mal { border-color: #7f2d37; color: var(--mal); } .chip.aviso { border-color: #6b5a1c; color: var(--aviso); }
.hoy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hoy > div { background: var(--panel2); border-radius: 12px; padding: 9px 10px; }
.hoy .t { color: var(--suave); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.hoy .v { font-weight: 650; font-size: 15px; margin-top: 1px; overflow-wrap: anywhere; }
.hoy .s { color: var(--suave); font-size: 11px; }
.nota { color: var(--suave); font-size: 13px; background: var(--panel2); border-radius: 10px; padding: 8px 10px; }
.enlaces { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

/* actividad */
.seccion { margin-top: 26px; }
.seccion > h3 { font-size: 14px; color: var(--suave); text-transform: uppercase; letter-spacing: .07em; margin: 0 0 10px; font-weight: 600; }
.lista { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.lista .item { display: flex; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--linea); font-size: 13px; flex-wrap: wrap; }
.lista .item:last-child { border-bottom: 0; }
.lista .cuando { color: var(--suave); width: 130px; flex: none; }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { width: min(100%, 400px); background: var(--panel); border: 1px solid var(--linea); border-radius: 20px; padding: 28px; box-shadow: var(--sombra); }
.login-card .marca { justify-content: center; margin-bottom: 20px; flex-direction: column; text-align: center; gap: 8px; }
.login-card .marca .logo { width: 52px; height: 52px; font-size: 20px; }
label.campo { display: block; margin-bottom: 12px; }
label.campo > span { display: block; font-size: 13px; color: var(--suave); margin-bottom: 5px; }
input[type=text], input[type=password], input[type=email], select { width: 100%; background: #0b1428; border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; outline: none; }
input:focus, select:focus { border-color: var(--acento); }
.codigo { letter-spacing: .35em; text-align: center; font-size: 20px; }
.error { color: var(--mal); font-size: 13px; min-height: 18px; margin: 4px 0 10px; }
.ok-msg { color: var(--ok); }
.qr { display: block; margin: 10px auto; background: #fff; border-radius: 12px; padding: 6px; }
.secreto { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; text-align: center; color: var(--suave); word-break: break-all; }

/* modal */
.velo { position: fixed; inset: 0; background: rgba(3, 7, 18, .72); display: grid; place-items: center; padding: 16px; z-index: 50; backdrop-filter: blur(3px); }
.modal { width: min(100%, 540px); max-height: 92vh; overflow: auto; background: var(--panel); border: 1px solid var(--linea); border-radius: 18px; padding: 20px; box-shadow: var(--sombra); }
.modal h3 { margin: 0 0 12px; font-size: 18px; }
.modal .pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.opcion { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 12px; margin-bottom: 8px; cursor: pointer; }
.opcion:has(input:checked) { border-color: var(--acento); background: rgba(91, 155, 255, .08); }
.opcion input { margin-top: 3px; } .opcion small { display: block; color: var(--suave); }
pre.texto { background: #070d1c; border: 1px solid var(--linea); border-radius: 12px; padding: 12px; max-height: 52vh; overflow: auto; font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; margin: 8px 0 0; }
.pasos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.pasos li::before { content: "✓ "; color: var(--ok); }
.pasos li.actual::before { content: "… "; color: var(--aviso); }
.clave-nueva { font-family: ui-monospace, Menlo, Consolas, monospace; background: #070d1c; border: 1px dashed var(--acento); border-radius: 10px; padding: 10px; word-break: break-all; margin-top: 8px; }
.fila-input { display: flex; gap: 8px; } .fila-input > input { flex: 1; }

#toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 80; width: min(92vw, 460px); }
.toast { background: var(--panel2); border: 1px solid var(--linea); border-left: 4px solid var(--acento); border-radius: 12px; padding: 10px 14px; box-shadow: var(--sombra); }
.toast.ok { border-left-color: var(--ok); } .toast.mal { border-left-color: var(--mal); }

@media (max-width: 520px) {
  .hoy { grid-template-columns: 1fr; }
  .fila .nom { width: 84px; }
  .lista .cuando { width: 100%; }
}