/* ============================================================ MinerOS Hub · CAPA TÁCTIL DE COMPONENTES (estilos) ------------------------------------------------------------ Pareja de `mobile-ui.js`. Bloque B de la Fase 2. VOCABULARIO No se introduce ni un color nuevo. Todo sale de los tokens que ya existen: --card, --border, --border-gold, --gold, --text-2, --mono. Una capa de componentes que trae su propia paleta es una segunda identidad, y el sitio ya tiene una. MOVIMIENTO El brief pide 150–400ms y prohíbe rebotes. Todas las transiciones usan la misma curva de salida, `cubic-bezier(.2,.7,.3,1)`, que frena sin pasarse del destino. Una sola curva en toda la capa es lo que hace que se sienta un sistema y no cinco animaciones. ============================================================ */ /* ============================================================ 1 · HOJA INFERIOR ============================================================ */ /* `dialog` trae borde, fondo y padding del navegador, y en algunos además `max-height:calc(100% - 6px)`. Se limpia todo antes de construir encima. */ .ms-sheet-dlg{border:0;padding:0;background:transparent;max-width:100%;max-height:100%; width:100%;height:100%;margin:0;overflow:hidden;display:grid;align-items:end} .ms-sheet-dlg::backdrop{background:rgba(6,6,8,.62);backdrop-filter:blur(2px);opacity:0;transition:opacity .26s} .ms-sheet-dlg.on::backdrop{opacity:1} .ms-sheet-dlg:not([open]){display:none} .ms-sheet-in{background:var(--bg-2,#111114);border-top:1px solid var(--border-gold,#3a2f15); border-radius:20px 20px 0 0;box-shadow:0 -20px 60px -20px rgba(0,0,0,.8); display:flex;flex-direction:column; /* 86vh y no 100: dejar ver una franja de la página detrás es lo que comunica "esto está encima", y da sitio para cerrar tocando fuera. `dvh` porque `vh` se resuelve contra el viewport GRANDE —el de la barra de URL oculta— y en un móvil con la barra visible la hoja se dimensiona más alta que la pantalla: su cuerpo cree que tiene sitio, decide que no hay nada que desplazar y el gesto se pierde. Es el mismo fallo que dejó sin scroll la ficha de la tienda. */ max-height:86vh; transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.7,.3,1)} @supports(height:100dvh){.ms-sheet-in{max-height:86dvh}} .ms-sheet-dlg.on .ms-sheet-in{transform:translateY(0)} /* El asidero no es decorativo: es lo que dice que la hoja se arrastra. */ .ms-sheet-grip{width:38px;height:4px;border-radius:99px;background:var(--border,#26262c); margin:9px auto 0;flex:0 0 auto} .ms-sheet-head{display:flex;align-items:center;gap:12px;padding:12px 18px 10px;flex:0 0 auto; border-bottom:1px solid var(--border,#26262c)} .ms-sheet-head h2{flex:1;min-width:0;font-family:var(--display,sans-serif);font-size:1.06rem; font-weight:600;letter-spacing:-.01em;margin:0;color:var(--text,#f5f3ee)} .ms-sheet-head h2:empty{display:none} .ms-sheet-x{flex:0 0 auto;width:44px;height:44px;border-radius:11px;border:1px solid var(--border,#26262c); background:none;color:var(--text-2,#a9a59c);font-size:.95rem;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;transition:.15s} .ms-sheet-x:hover{color:var(--text,#fff);background:var(--bg-3,#17171b)} .ms-sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch; /* Sin esto, llegar al final del cuerpo pasa el desplazamiento a la página de detrás: el "doble scroll incómodo" que el brief nombra. */ overscroll-behavior:contain; padding:16px 18px; /* Hueco de la barra de gestos del teléfono. */ padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))} /* Con la hoja abierta la página no se mueve detrás. */ html.ms-sheet-open{overflow:hidden} /* En escritorio la misma pieza se presenta centrada: un modal ahí no sube desde abajo, aparece donde está la atención. */ @media(min-width:1024px){ .ms-sheet-dlg{align-items:center;justify-items:center} .ms-sheet-in{max-width:min(560px,calc(100vw - 48px));border-radius:18px; border:1px solid var(--border-gold,#3a2f15);max-height:82vh; transform:translateY(12px) scale(.98)} .ms-sheet-dlg.on .ms-sheet-in{transform:none} .ms-sheet-grip{display:none} } /* ============================================================ 2 · PESTAÑAS ============================================================ */ .ms-tabs{display:flex;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none;overscroll-behavior-x:contain; /* La tira se pega arriba al desplazar: en un panel de cinco pestanas, perderlas de vista obliga a subir para cambiar. `--nav-h` viene de system.css y es el mismo token que usa la barra de la calculadora. Antes esto era `--ms-navh`, un nombre que NO se definia en ninguna hoja de produccion —solo en el banco de pruebas— asi que caia siempre a su reserva de 64px con una cabecera de 65 o 69: exactamente el defecto que se acababa de corregir en la barra de la calculadora, esperando a la primera pagina que usara pestanas. */ position:sticky;top:var(--nav-h,65px);z-index:5; background:var(--bg,#0a0a0b); padding:10px 0 11px;margin:0 0 16px; /* El sangrado negativo hace que la tira llegue al borde de la pantalla mientras su contenido respeta el margen del contenedor: así la última pestaña no parece cortada a mitad. */ margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px; border-bottom:1px solid var(--border,#26262c)} .ms-tabs::-webkit-scrollbar{display:none} .ms-tab{flex:0 0 auto;min-height:44px;padding:0 15px;border-radius:999px;cursor:pointer; border:1px solid var(--border,#26262c);background:none;color:var(--text-2,#a9a59c); font-family:var(--font,sans-serif);font-size:.84rem;font-weight:600; /* Nunca se comprime el texto: el brief lo prohíbe y una pestaña ilegible deja de ser navegable. Si no caben, se desplazan. */ white-space:nowrap;transition:background .18s,color .18s,border-color .18s} .ms-tab:hover{color:var(--text,#fff);border-color:var(--border-gold,#3a2f15)} .ms-tab.on{background:var(--gold,#e7bd5a);border-color:var(--gold,#e7bd5a);color:#17120a} .ms-tab:focus-visible{outline:2px solid var(--gold,#e7bd5a);outline-offset:2px} /* ============================================================ 3 · ACORDEÓN ·
------------------------------------------------------------ Nativo a propósito: teclado, semántica y que Ctrl+F del navegador abra la sección donde está la coincidencia. En una web con guías técnicas eso último importa de verdad. ============================================================ */ .ms-acc{border:1px solid var(--border,#26262c);border-radius:14px;background:var(--card,#141417); margin:0 0 10px;overflow:hidden} .ms-acc>summary{display:flex;align-items:center;gap:12px;cursor:pointer; min-height:56px;padding:14px 16px;list-style:none; font-family:var(--display,sans-serif);font-size:1rem;font-weight:600; letter-spacing:-.01em;color:var(--text,#f5f3ee)} /* Safari pinta su propio triángulo y lo hace en un pseudo aparte. */ .ms-acc>summary::-webkit-details-marker{display:none} .ms-acc>summary::marker{content:""} .ms-acc>summary:hover{background:var(--bg-3,#17171b)} .ms-acc>summary:focus-visible{outline:2px solid var(--gold,#e7bd5a);outline-offset:-2px} /* Titulo y sobretitulo van en su propia columna. El `summary` es flex, asi que un `display:block` sobre el sobretitulo no lo apilaba —sale como hermano flex y se pone al lado del titulo—. Con este envoltorio el marcado de la pagina no tiene que saber nada de eso. */ .ms-acc-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .ms-acc-t .ms-acc-sub{order:-1} /* El signo va DESPUÉS del texto y con `margin-left:auto`: alineado a la derecha, el ojo encuentra todos los del listado en la misma columna en vez de perseguirlos tras cada título. */ .ms-acc>summary::after{content:"";margin-left:auto;flex:0 0 auto; width:9px;height:9px;border-right:2px solid var(--text-muted,#817e77); border-bottom:2px solid var(--text-muted,#817e77); transform:rotate(45deg) translateY(-2px);transition:transform .22s cubic-bezier(.2,.7,.3,1)} .ms-acc[open]>summary::after{transform:rotate(-135deg) translateY(-2px)} .ms-acc[open]>summary{border-bottom:1px solid var(--border,#26262c)} .ms-acc-body{padding:15px 16px 17px;color:var(--text-2,#a9a59c);font-size:.93rem;line-height:1.7} .ms-acc-body>:last-child{margin-bottom:0} .ms-acc-sub{font-family:var(--mono,monospace);font-size:.72rem;letter-spacing:.08em; text-transform:uppercase;color:var(--text-muted,#817e77);font-weight:600} /* ============================================================ 4 · FILA DE DATOS PLEGABLE ·
------------------------------------------------------------ La alternativa a comprimir una tabla. Arriba lo que identifica y decide; dentro, todas las columnas que la tabla tenía, como pares clave-valor. Es la respuesta al punto 12 del brief: la tabla no se estrecha, se convierte en lista. ============================================================ */ .ms-rows{border:1px solid var(--border,#26262c);border-radius:14px;overflow:hidden;background:var(--card,#141417)} .ms-row{border-bottom:1px solid var(--border,#26262c)} .ms-rows .ms-row:last-child{border-bottom:0} .ms-row>summary{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 12px; cursor:pointer;min-height:60px;padding:12px 14px;list-style:none} .ms-row>summary::-webkit-details-marker{display:none} .ms-row>summary::marker{content:""} .ms-row>summary:hover{background:var(--bg-3,#17171b)} .ms-row>summary:focus-visible{outline:2px solid var(--gold,#e7bd5a);outline-offset:-2px} /* Colocacion explicita en la rejilla. Sin `grid-column` en cada parte, la colocacion automatica metia el valor en la columna 2 y empujaba el nombre a la 3: el equipo salia a la derecha, pegado a su cifra, y la columna del medio quedaba vacia. Medido en el banco de pruebas. */ .ms-row-rank{grid-column:1;grid-row:1/3;align-self:center; font-family:var(--mono,monospace);font-size:.82rem;font-weight:700; color:var(--gold,#e7bd5a);min-width:2.2em} .ms-row-name{grid-column:2;grid-row:1;font-family:var(--display,sans-serif);font-size:1rem;font-weight:600; letter-spacing:-.01em;color:var(--text,#f5f3ee);min-width:0} .ms-row-meta{grid-column:2;grid-row:2;font-family:var(--mono,monospace);font-size:.76rem; color:var(--text-muted,#817e77);letter-spacing:.02em} .ms-row-val{grid-column:3;grid-row:1/3;align-self:center; text-align:right;font-family:var(--mono,monospace); font-variant-numeric:tabular-nums;font-size:.9rem;color:var(--text,#f5f3ee);white-space:nowrap} .ms-row-val small{display:block;font-size:.72rem;color:var(--text-muted,#817e77);margin-top:2px} .ms-row[open]>summary{border-bottom:1px solid var(--border,#26262c);background:var(--bg-3,#17171b)} /* Los pares clave-valor de dentro: dos columnas en cuanto hay sitio, una sola por debajo de 360px, donde dos dejan 150px por celda. */ .ms-row-detail{padding:13px 14px 15px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px; background:var(--border,#26262c)} .ms-row-detail>div{background:var(--card,#141417);padding:10px 12px} .ms-row-detail dt{font-family:var(--mono,monospace);font-size:.68rem;letter-spacing:.08em; text-transform:uppercase;color:var(--text-muted,#817e77);margin:0 0 3px} .ms-row-detail dd{font-family:var(--mono,monospace);font-size:.86rem; font-variant-numeric:tabular-nums;color:var(--text,#f5f3ee);margin:0} .ms-row-acts{display:flex;gap:9px;padding:0 14px 14px;flex-wrap:wrap} /* Dos clases a proposito. Con una sola, `.ms-row-acts>*` empata en especificidad con cualquier `.boton-de-la-pagina` y pierde por orden de carga: medido en pools, el boton de detalle se quedaba en 38px porque su regla vive en un `