/* Hoja base de /app/, trozo 07 — su index enlaza los trozos en orden, y la cascada depende de él. */ /* ==================================================================================================/* ================================================================================================== F18 — EL ARMAZÓN, MOBILE FIRST. ================================================================================================== POR QUÉ SE REESCRIBIÓ ESTA CAPA. El operador lo dijo exacto: «que no se vea como una adaptación mal hecha a móvil». Y no era una impresión — era la estructura. La versión anterior era DESKTOP-FIRST: la base describía el escritorio y un `@media (max-width: 760px)` al final deshacía cosas para el teléfono. Eso produce dos defectos que ninguna revisión ve y el dedo sí: · lo que se olvida corregir se queda con el valor de escritorio, y en un teléfono eso es siempre lo apretado (una lista de 34px de alto, letra de 11.5, botones de 24); · las reglas del teléfono viven al final, lejos de la pieza, así que quien edita el componente no ve que existen y las contradice sin enterarse. Pasó: el riel se apagaba en una regla que perdía por especificidad contra la que lo enseñaba, cinco secciones arriba. AHORA la base ES el teléfono. `@media (min-width: 48em)` AÑADE lo que una pantalla grande permite: el eje ancho, la barra fija, la densidad. Nada se deshace; todo se suma. Si mañana se olvida una pieza en la capa grande, el resultado en escritorio es una app cómoda de más, no un teléfono ilegible — el error cae del lado bueno, que es la regla de esta casa. LA FRONTERA está en `em` y no en `px` a propósito: 48em respeta el tamaño de letra que la persona haya elegido en su sistema. Quien lee a 20px pasa a la versión ancha más tarde, cuando de verdad le cabe. LO QUE NO CAMBIA: los tokens, los contrastes medidos, los cuatro estados y todos los componentes portados de F16/F17 — esta capa es COMPOSICIÓN, no identidad. ================================================================================================== */ html, body { height: 100%; } body { margin: 0; display: flex; background: var(--superficie); color: var(--tinta); font: 400 var(--t-md)/var(--lh-md) var(--prosa); overflow: hidden; /* el scroll vive en .principal, no en la página */ } /* El atributo hidden MANDA sobre cualquier display de esta hoja. Sin esto, `.lateral{display:flex}` le ganaba al `hidden` que main.js pone sin sesión y la barra aparecía —con su lista esqueleto y su badge— al lado del formulario de entrada: una app a medias en vez de una app cerrada. */ [hidden] { display: none !important; } /* ---- iconos del sprite -------------------------------------------------------------------------- En el teléfono el icono acompaña al dedo, así que la base es 21 y en pantalla grande BAJA a 18: al revés de como estaba. Un icono grande sobra en escritorio; uno pequeño estorba en un móvil. */ .ic { width: 21px; height: 21px; flex: 0 0 auto; display: inline-block; vertical-align: -4px; } .ic-marca { width: 24px; height: 24px; color: var(--acento); } /* ================================================================================================== 1 · LA BARRA — en el teléfono es un PANEL que entra desde el borde. Esa es su naturaleza aquí, no una excepción: por eso vive en la base y no en una corrección. ================================================================================================== */ .lateral { position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(86vw, 340px); display: flex; flex-direction: column; min-height: 0; background: var(--fondo); border-right: var(--filete) solid var(--linea); /* La sombra gigante oscurece lo que asoma sin taparlo: el asomo sigue recibiendo el toque. */ box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .32); transition: transform .22s cubic-bezier(.2, .7, .3, 1); } .lateral.oculta { transform: translateX(-100%); box-shadow: none; } .lateral-cab { padding: var(--e4) var(--e4) var(--e2); } .marca { display: flex; align-items: center; gap: var(--e2); font: 600 var(--t-xl)/1 var(--prosa); letter-spacing: var(--track-titulo); color: var(--tinta); border: 0; padding: 0; } /* Un objetivo de toque mide 44. En la base es la altura de TODO lo pulsable; en pantalla grande, donde apunta un cursor de un píxel, baja a 36. */ .nav-item { display: flex; align-items: center; gap: var(--e3); width: auto; margin: 0 var(--e2); padding: 0 var(--e3); height: var(--alto-tactil); background: transparent; color: var(--tinta); border: 0; border-radius: var(--r-control); font: 500 var(--t-lg)/1 var(--prosa); cursor: pointer; text-align: left; transition: background .12s ease; } .nav-item:hover { background: var(--hundida); } .nav-item .ic { color: var(--tinta-suave); } .nav-item.nueva { margin-top: var(--e1); } .buscar-envoltura { display: flex; align-items: center; gap: var(--e2); margin: var(--e2) var(--e3); padding: 0 var(--e3); height: var(--alto-tactil); background: var(--hundida); border: var(--filete) solid transparent; border-radius: var(--r-control); color: var(--tinta-apagada); transition: border-color .12s ease, background .12s ease; } .buscar-envoltura:focus-within { border-color: var(--acento); background: var(--superficie); } .buscar-envoltura .ic { width: 18px; height: 18px; } .buscar-envoltura .buscar-conv { flex: 1; margin: 0; padding: 0; height: auto; background: transparent; border: 0; outline: none; box-shadow: none; color: var(--tinta); font: 400 var(--t-lg)/1 var(--prosa); } .buscar-conv::placeholder { color: var(--tinta-apagada); } .sec-acciones { margin: 0; padding: 0; border: 0; } /* F18 M3 — Acciones es un PANEL, no un ítem de menú. Es la pieza que las cuatro direcciones del rediseño destacan igual: borde de acento, dos líneas y la cifra. Es lo único de la barra que espera a una persona, y se tiene que ver como tal. `height: auto` pisa el alto fijo de .nav-item: con subtítulo son dos líneas. */ .acciones-titulo { position: relative; width: calc(100% - 2 * var(--e2)); height: auto; min-height: var(--alto-tactil); padding: var(--e2) var(--e3); border: var(--filete) solid var(--linea); border-left: var(--carril) solid var(--acento); border-radius: var(--r-menudo); background: var(--acento-tenue); } .acciones-titulo.activo { background: var(--hundida); } .acciones-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .acciones-tit { font: 600 var(--t-md)/var(--lh-2xs) var(--prosa); color: var(--tinta); } .acciones-sub { font: 400 var(--t-xs)/var(--lh-2xs) var(--prosa); color: var(--tinta-apagada); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Sin subtítulo (0 comprobado) el panel baja el volumen: borde normal, sin tinte. Cero de verdad no pide atención — pero el panel no desaparece, porque desaparecer es lo que hacía el ítem. */ .acciones-titulo:has(.acciones-sub[hidden]) { background: transparent; border-left-color: var(--linea); } .badge-pendientes { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--acento); color: var(--acento-tinta); border-radius: var(--r-chip); font: 600 var(--t-xs)/1 var(--prosa); font-variant-numeric: tabular-nums; } .badge-pendientes.desconocido { background: var(--desconocido); color: #fff; } .lateral-aviso { margin: 0 var(--e3); } .lateral-aviso:empty { display: none; } /* ---- la lista de conversaciones ---------------------------------------------------------------- Los grupos por fecha (Hoy / Ayer / Últimos 7 días / Anteriores) los pidió el operador explícito y se calculan con la fecha LOCAL de quien mira, no con el UTC del servidor. */ .conversaciones { flex: 1; min-height: 0; overflow-y: auto; padding: var(--e1) var(--e3) var(--e3); } .grupo-titulo { padding: var(--e5) var(--e2) var(--e2); font: 600 var(--t-xs)/1 var(--prosa); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--tinta-apagada); border: 0; margin: 0; } .conv { position: relative; border-radius: var(--r-control); border: 0; margin: 0; padding: 0; background: transparent; transition: background .12s ease; } .conv:hover, .conv.activa { background: var(--hundida); } .conv.activa .conv-titulo { font-weight: 600; } .conv-abrir { /* F18 M3 — la fila del rediseño: UNA línea, título a la izquierda y hora corta a la derecha, como en las cuatro direcciones. El correo y la fecha completa viven en el title de la fila. Antes eran dos líneas y la segunda repetía el correo del operador en cada una. */ display: flex; align-items: center; gap: var(--e2); width: 100%; min-height: var(--alto-tactil); /* El hueco de los dos botones de fila se RESERVA. En un teléfono están siempre visibles (no hay cursor con el que posarse) y sin esta reserva se montaban sobre la fecha y la tapaban: un botón que oculta el dato al que acompaña no ayuda, estorba. */ padding: var(--e2) 78px var(--e2) var(--e2); background: transparent; border: 0; border-radius: var(--r-control); text-align: left; cursor: pointer; color: inherit; font: inherit; } .conv-titulo { flex: 1; min-width: 0; font: 400 var(--t-md)/var(--lh-md) var(--prosa); color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cuando { flex: none; font: 400 var(--t-xs)/1 var(--prosa); color: var(--tinta-apagada); font-variant-numeric: tabular-nums; white-space: nowrap; } /* La hora termina donde empieza la reserva de 78px de los botones de fila: conviven sin taparse, que era el defecto que la reserva vino a cerrar. */ .conv-acciones { position: absolute; right: var(--e1); top: 50%; transform: translateY(-50%); display: flex; gap: var(--e1); opacity: 1; /* visibles: en un teléfono no hay `hover` que revele */ } .conv-btn { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; background: var(--fondo); color: var(--tinta-apagada); border: 0; border-radius: var(--r-menudo); font-size: var(--t-md); cursor: pointer; transition: color .12s ease, background .12s ease; } .conv:hover .conv-btn { background: var(--hundida); } .conv-btn:hover { color: var(--tinta); background: var(--fondo); } .conv-editar { width: calc(100% - 2 * var(--e2)); margin: var(--e1) var(--e2); padding: var(--e2); background: var(--superficie); color: var(--tinta); border: var(--filete) solid var(--acento); border-radius: var(--r-menudo); font: 400 var(--t-lg)/var(--lh-sm) var(--prosa); outline: none; } /* ---- pie de la barra ---- */ .lateral-pie { padding: var(--e3) var(--e3) var(--e4); border-top: var(--filete) solid var(--linea); display: flex; flex-direction: column; gap: var(--e3); background: transparent; } .quien { font: 400 var(--t-sm)/var(--lh-xs) var(--prosa); color: var(--tinta-apagada); } .quien a { color: var(--tinta-suave); } .escape { display: flex; gap: var(--e4); } .escape a { display: inline-flex; align-items: center; gap: var(--e1); font: 400 var(--t-sm)/1 var(--prosa); color: var(--tinta-apagada); text-decoration: none; } .escape a:hover { color: var(--tinta); } .escape .ic { width: 16px; height: 16px; } /* ================================================================================================== 2 · EL ASOMO — la franja de chat que se ve con la barra abierta, y que al tocarla VUELVE al chat. Es un