/* 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%; overflow: hidden; }
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; }

/* Andamiaje de altura fija: la cabecera no se mueve, y cada página gestiona su propio scroll interno. Sin
   esto, la página entera se desplazaba y el input de Claude o el editor quedaban fuera de pantalla. */
.m-shell { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.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; }
/* Volver a la lista: flecha **llena** ← en su propia zona a la izquierda. Deliberadamente distinta de los
   chevrons ‹ › de navegar entre chats (esos son finos y van pegados al título). */
.m-back {
    background: none; border: none; color: var(--text); font-size: 1.5rem; font-weight: 700;
    line-height: 1; padding: 0; min-width: 2rem; text-align: left; cursor: pointer;
}
/* Título centrado con subtítulo pequeño debajo (el PC donde vive la sesión). */
.m-head-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.m-head-title-row { display: flex; align-items: center; gap: .3rem; max-width: 100%; }
/* Navegar entre chats: chevrons con el color del contexto; grises al llegar al extremo. Más grandes y con
   área tocable amplia —en móvil un ‹ fino de 1.4rem no se ve ni se acierta con el dedo—. */
.m-chatnav {
    flex: 0 0 auto; background: none; border: none; color: var(--ctx-accent, var(--accent));
    font-size: 2rem; font-weight: 700; line-height: 1; padding: .1rem .5rem; cursor: pointer;
    min-width: 2.2rem; min-height: 2.2rem;
}
.m-chatnav:disabled { color: var(--border); cursor: default; opacity: .5; }
.m-head-title { min-width: 0; font-weight: 600; font-size: 1.05rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-head-sub { max-width: 100%; font-size: .72rem; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Los chats abiertos como puntos, tras el nombre del PC: cuántos hay, en cuál estás y —con la barrita— que
   hay otra máquina en juego. Sin esto, pulsar › y que no pase nada no se explicaba (0.21). */
.m-head-dots { display: inline-flex; align-items: center; gap: .18rem; margin-left: .4rem; vertical-align: middle; }
.m-head-dot { font-size: .5rem; color: var(--border); line-height: 1; }
.m-head-dot.is-on { color: var(--ctx-accent, var(--accent)); }
.m-dot-sep { font-size: .6rem; color: var(--border); margin: 0 .12rem; }
/* Acciones del chat en la cabecera: ✚ conversación nueva y 🕘 histórico. Están aquí para que el chat no
   gaste una fila entera en la barra «⌄ Sesión» que había antes. Área tocable de 2,2rem, como los chevrons. */
.m-headact {
    flex: 0 0 auto; background: none; border: none; color: var(--muted);
    font-size: 1.1rem; line-height: 1; padding: .1rem .35rem; cursor: pointer;
    min-width: 2.2rem; min-height: 2.2rem;
}
.m-headact:active { color: var(--text); }
/* Indicador de conexión: solo un punto, sin texto. Sin `margin-left:auto` cuando hay acciones a su lado: el
   empuje lo da ya el título, y con auto los iconos se despegarían al borde. */
.m-conn { min-width: 1.4rem; text-align: right; font-size: 1rem; }
.m-conn.is-on { color: #7bd88f; }
.m-conn.is-off { color: var(--muted); }
.m-main {
    flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
    padding: 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
/* Contenedor que llena el alto disponible para la vista de proyecto (cabecera + pestañas + contenido). */
.mproj-fill { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.m-title { font-size: 1.3rem; margin: .2rem 0 .6rem; text-align: center; }
.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; }
/* Prefijo de instancia (atenuado) y flecha de «entrar» en la lista instancia · proyecto. */
.m-inst { color: var(--muted); font-weight: 400; }
.m-go { flex: 0 0 auto; color: var(--accent); font-size: 1.2rem; font-weight: 800; padding-left: .4rem; }

/* Login por Google: el botón oficial arriba, y debajo el formulario manual como alternativa. */
.m-google { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin-bottom: 1.2rem; }
.m-google-note { margin: .2rem 0 0; font-size: .85rem; }

/* Descargar la app de escritorio desde el móvil. */
.m-download { margin-top: 1.5rem; padding: .9rem 1rem; background: var(--panel); border: 1px solid var(--border);
    border-radius: 12px; }
.m-download-title { font-size: .9rem; color: var(--muted); margin-bottom: .6rem; }
.m-download-links { display: flex; gap: .5rem; }

/* Versión de la PWA + instalar en el escritorio. */
.m-pwa { margin-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.m-pwa-ver { color: var(--muted); font-size: .8rem; }

/* Barra inferior **sticky** de Home: versión, instalar y descargas. `margin-top: auto` la empuja al fondo
   del `.m-main` (flex column); `position: sticky; bottom` la mantiene visible aunque la lista de arriba
   crezca y haya scroll. Fondo opaco para que no se transparente el contenido al pasar por debajo. */
.m-bottombar {
    margin-top: auto; position: sticky; bottom: 0; z-index: 5;
    display: flex; flex-direction: column; gap: .6rem;
    padding: .8rem 0 calc(.4rem + env(safe-area-inset-bottom));
    background: var(--bg); border-top: 1px solid var(--border);
}
.m-bottombar-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }

/* Interruptor de notificaciones (0.22.9): etiqueta a la izquierda, switch a la derecha. Un control de
   encender/apagar es más claro que un botón cuyo texto cambia, y ocupa lo mismo esté activo o no. */
.m-switch-row { justify-content: space-between; }
.m-switch-label { color: var(--fg, #e6edf3); font-size: .95rem; }
.m-switch {
    flex: 0 0 auto; width: 3.1rem; height: 1.75rem; border-radius: 1rem; border: none; cursor: pointer;
    background: #3a4048; padding: 0; position: relative; transition: background .15s ease;
}
.m-switch.is-on { background: var(--accent, #d97757); }
.m-switch:disabled { opacity: .6; cursor: default; }
.m-switch-knob {
    position: absolute; top: .2rem; left: .2rem; width: 1.35rem; height: 1.35rem; border-radius: 50%;
    background: #fff; transition: transform .15s ease;
}
.m-switch.is-on .m-switch-knob { transform: translateX(1.35rem); }

/* Toast de versión nueva: tocable, arriba de la lista; al pulsarlo se actualiza. */
.m-toast {
    display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%;
    margin: .2rem 0 .8rem; padding: .7rem .9rem; border-radius: 12px; cursor: pointer; text-align: left;
    background: #223052; border: 1px solid var(--accent, #4a7ad0); color: var(--text); font: inherit;
}
.m-toast:active { filter: brightness(1.1); }
.m-toast-title { font-weight: 600; font-size: .95rem; }
.m-toast-sub { font-size: .8rem; color: var(--muted); }

.m-control-head { flex: 0 0 auto; display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.m-control-title { font-weight: 600; }
.m-dot { width: .8rem; height: .8rem; border-radius: 50%; flex: 0 0 auto; }
/* Chat procesando: el punto late (0.20.4). El color de fondo lo pone el contexto; aquí solo la animación. */
.m-dot.is-processing { animation: m-dot-pulse 1.1s ease-in-out infinite; }
@keyframes m-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* Encabezado de sección dentro de una lista (Chats activos / Todos los proyectos). */
.m-subhead { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
    margin: 1.1rem .2rem .5rem; }
.m-subhead:first-child { margin-top: .2rem; }
.m-tag { font-size: .7rem; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: .1rem .4rem; }

/* Vista de proyecto con pestañas */
.mp { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.mp-tabs { display: flex; gap: .4rem; margin-bottom: .6rem; flex: 0 0 auto; }
.mp-tab {
    flex: 1; padding: .6rem; border: 1px solid var(--border); border-radius: 10px;
    background: var(--panel); color: var(--text); font-size: .95rem; min-height: 42px;
}
.mp-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.mp-body { flex: 1; min-height: 0; }
.mp-body > div { height: 100%; }
.mp-hidden { display: none !important; }
}

/* Explorador de archivos móvil */
.mf2 { display: flex; flex-direction: column; height: 100%; }
.mf2-crumbs { display: flex; align-items: center; gap: .1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.mf2-crumb { background: none; border: none; color: var(--accent); font-size: .95rem; padding: .3rem; }
.mf2-sep { color: var(--muted); }
.mf2-crumbs { flex: 0 0 auto; }
.mf2-edit-head { flex: 0 0 auto; }
/* Esquema de árbol con guía vertical (|) a la izquierda, en vez de la línea del rombo. */
.mf2-list { list-style: none; margin: 0 0 0 .5rem; padding: 0; overflow-y: auto; flex: 1; min-height: 0;
    border-left: 2px solid var(--border); }
.mf2-row { display: flex; align-items: center; gap: .5rem; padding: .8rem .6rem; border-bottom: 1px solid #232833; font-size: 1rem; }
.mf2-row::before { content: "─"; color: var(--border); flex: 0 0 auto; margin-left: -.2rem; }
.mf2-row.is-dir { color: #e3c07b; }
.mf2-ic { width: 1.1rem; text-align: center; opacity: .8; }
.mf2-name { flex: 1; word-break: break-all; }
.mf2-empty { color: var(--muted); padding: 1rem .6rem; }
.mf2-edit-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.mf2-open { flex: 1; font-family: var(--mono, monospace); font-size: .8rem; color: var(--muted); word-break: break-all; }
.mf2-text {
    flex: 1; min-height: 0; resize: none; border: 1px solid var(--border); border-radius: 10px; padding: .7rem;
    background: #0b0e13; color: #e6e6e6; font-family: var(--mono, monospace); font-size: .85rem; line-height: 1.5;
    width: 100%;
}

/* Terminal móvil: barra fina arriba y el lienzo de xterm llenando el resto. */
.mterm { display: flex; flex-direction: column; height: 100%; }
.mterm-bar { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; padding: 0 .2rem .4rem; }
.mterm-label { flex: 1; color: var(--muted); font-size: .8rem; }
.mterm-key {
    background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text);
    font-size: .85rem; padding: .4rem .7rem; min-height: 36px;
}
.mterm-canvas { flex: 1; min-height: 0; overflow: hidden; border-radius: 10px; background: #101317; }
.mterm-canvas .xterm { height: 100%; padding: .3rem; }

/* Vincular móvil por QR (0.18 B4). */

#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; }

/* Acción de cierre al pie de la lista de proyectos de una máquina: soltar el control de ese PC. Es explícita
   y distinta de «volver», que solo cambia de pantalla y deja los chats vivos (0.21). */
.m-btn.m-wide { display: block; width: 100%; margin-top: 1rem; }

/* Cerrar un chat abierto desde su fila (0.21.1). Discreta en reposo y con área tocable amplia: es una acción
   destructiva de bajo coste —la sesión sigue viva en su PC— pero no debe pulsarse por error al elegir fila. */
.m-close {
    flex: 0 0 auto; background: none; border: none; color: var(--muted);
    font-size: 1rem; line-height: 1; padding: .4rem .5rem; margin-left: .25rem; cursor: pointer;
    min-width: 2.2rem; min-height: 2.2rem;
}
.m-close:active { color: var(--text); }

/* --- Administrar una instancia: versión, reiniciar y actualizar (0.22) ------------------------------- */

/* Hoja genérica, con el mismo aire que la del chat. Se define aparte porque esta la usan las páginas y no
   el chat, cuyos estilos viven ahora en la hoja compartida `chat.css`. */
.m-sheet-back { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 20; }
.m-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; background: var(--panel-2);
    border-top: 1px solid var(--border); border-radius: 18px 18px 0 0; padding: .5rem .9rem;
    padding-bottom: calc(.9rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: .6rem;
}
.m-sheet-grab { align-self: center; width: 2.4rem; height: .28rem; border-radius: 999px; background: var(--border); margin: .1rem 0 .2rem; }
.m-sheet-title { color: var(--text); font-size: .95rem; font-weight: 600; }

/* Pares dato/valor del estado de la instancia. */
.m-kv { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.m-kv-k { color: var(--muted); font-size: .82rem; }
.m-kv-v { color: var(--text); font-size: .9rem; font-variant-numeric: tabular-nums; }
.m-kv-v.m-kv-new { color: #7bd88f; font-weight: 600; }
.m-notes { font-size: .8rem; }

/* Versión junto al nombre del PC en la lista. Atrasada ⇒ ámbar, que avisa sin alarmar: no es un error. */
.m-ver { display: block; color: var(--muted); font-size: .72rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.m-ver.is-old { color: #d9a441; }
.m-headact.is-alert { color: #d9a441; }

/* Cuenta atrás: es la confirmación, así que ocupa y se lee. El aviso en ámbar porque describe una pérdida
   posible —sesiones vivas, trabajo sin guardar— y no un fallo ya ocurrido. */
.m-countdown { display: flex; flex-direction: column; gap: .5rem; }
.m-countdown-title { color: var(--text); font-size: 1rem; font-weight: 600; margin: 0; }
.m-warn { color: #d9a441; font-size: .82rem; line-height: 1.35; margin: 0; }

/* --- Terminar un chat, y la pantalla de todos los chats (0.22.23) ------------------------------------ */

/* Texto explicativo de una hoja. La variante de error va en rojo tenue: dice qué pasó sin gritar. */
.m-sheet-text { color: var(--muted); font-size: .84rem; line-height: 1.4; margin: 0; }
.m-sheet-error { color: #e08585; }

/* Acción destructiva: terminar mata un proceso en otra máquina, así que no puede parecerse a «aceptar». */
.m-btn.m-danger { background: #7a2f2f; border-color: #a04545; color: #fff; }
.m-btn.m-danger:disabled { opacity: .55; }

/* Pie de una lista: un enlace pequeño, alineado a la derecha, que no compite con las filas. */
.m-listfoot { display: flex; justify-content: flex-end; padding: .1rem .2rem .4rem; }
.m-link {
    background: none; border: none; color: var(--accent, #4f8ef7); font: inherit; font-size: .82rem;
    padding: .3rem .2rem; cursor: pointer; text-decoration: underline;
}

/* Un chat **archivado** (sin CLI vivo): el punto en gris, no con el color de su proyecto. El color señala
   «esto está pasando ahora»; gastarlo en lo que no está vivo lo vacía de significado. */
.m-dot.is-archived { background: var(--border) !important; }
.m-item.is-archived .m-item-name { color: var(--muted); }

/* --- Marca: icono + «Contextara» en Montserrat (0.22.24) --------------------------------------------- */

/* La fuente va **empaquetada**, no traída de Google Fonts: la aplicación de escritorio corre sin red garantizada
   y la PWA tiene que funcionar instalada y offline. Son los subconjuntos latin y latin-ext del archivo variable,
   que cubre 600–700 con un solo fichero por subconjunto (≈37 y 70 KB). Licencia SIL OFL. */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url('../fonts/montserrat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* La marca: el icono y el nombre, una sola pieza. Se usa en la barra del escritorio, en la portada del móvil y
   en el login, así que el aspecto se define **una vez** y no tres veces con tres tamaños distintos. */
.ctx-brand {
    display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: inherit;
    white-space: nowrap;
}
.ctx-brand-icon { flex: 0 0 auto; width: 1.6em; height: 1.6em; display: block; }
.ctx-brand-name {
    font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
    font-weight: 700; letter-spacing: -.01em; line-height: 1;
}
/* Marca **grande y centrada**: la portada y el login, donde es lo primero que se ve y no compite con nada. */
.ctx-brand-hero { display: flex; justify-content: center; margin: 1.1rem 0 1rem; font-size: 1.7rem; }
.ctx-brand-hero .ctx-brand-icon { width: 2.1em; height: 2.1em; }

/* Centrar un botón suelto (el «Conectar» de la portada sin hub configurado). */
.m-center { display: flex; justify-content: center; padding: .4rem 0; }

/* Las dos formas de entrar, en la misma fila: el botón de Google y «Conectar». Se envuelve en pantallas
   estrechas antes que recortar ninguno de los dos. */
.m-authrow { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; }

/* «Opciones avanzadas»: un desplegable discreto, con el mismo chevrón que los árboles. Plegado, no escondido:
   quien tiene un hub propio lo necesita, y quien entra con Google no debería ni verlo. */
.m-adv {
    display: flex; align-items: center; gap: .35rem; width: 100%;
    background: none; border: none; color: var(--muted); font: inherit; font-size: .84rem;
    padding: .6rem .1rem; cursor: pointer; text-align: left;
}
.m-adv-caret { display: inline-block; width: .8rem; text-align: center; }