/* Cliente móvil (0.18 B4): pensado para dedos y pantalla chica. Tema oscuro, coherente con el escritorio. */
:root {
    --bg: #0f1319; --panel: #1b1f26; --panel-2: #232833; --border: #3d4552;
    --text: #e6e6e6; --muted: #9aa3af; --accent: #3b82f6; --danger: #f2a5a5;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    background: var(--bg); color: var(--text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-size: 16px;
    -webkit-text-size-adjust: 100%;
}
.m-boot { padding: 2rem; color: var(--muted); text-align: center; }

.m-shell { display: flex; flex-direction: column; min-height: 100dvh; }
.m-header {
    display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem;
    padding-top: calc(.7rem + env(safe-area-inset-top)); background: var(--panel);
    border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10;
}
.m-brand { color: var(--text); font-weight: 700; text-decoration: none; font-size: 1.05rem; }
.m-conn { margin-left: auto; font-size: .8rem; }
.m-conn.is-on { color: #7bd88f; }
.m-conn.is-off { color: var(--muted); }
.m-main { flex: 1; padding: 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }

.m-title { font-size: 1.3rem; margin: .2rem 0 .6rem; }
.m-sub { color: var(--muted); font-size: .95rem; margin: .2rem 0 1rem; line-height: 1.4; }
.m-error { color: var(--danger); font-size: .9rem; }

.m-form { display: flex; flex-direction: column; gap: .9rem; max-width: 30rem; }
.m-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--muted); }
.m-form input {
    font-size: 1rem; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: 10px;
    background: var(--panel); color: var(--text);
}

.m-btn {
    font-size: 1rem; padding: .8rem 1.1rem; border: 1px solid var(--border); border-radius: 10px;
    background: var(--panel-2); color: var(--text); cursor: pointer; min-height: 44px;
}
.m-btn:disabled { opacity: .6; }
.m-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.m-small { padding: .5rem .8rem; font-size: .9rem; min-height: 38px; }

.m-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.m-item {
    display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem;
    background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
}
.m-item-name { flex: 1; font-weight: 600; }

.m-control-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.m-control-title { font-weight: 600; }

#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    background: #3a2020; color: #f2c2c2; padding: .8rem 1rem; border-top: 1px solid #6d4141;
}
#blazor-error-ui .reload { color: #fff; text-decoration: underline; }