@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
   Velqerix — capa de forma.

   Tercera y última hoja. app.css define la estructura, tema.css la paleta y
   ésta la forma nueva: la barra fina de arriba, el saludo con el glifo, el
   redactor como tarjeta con su fila de mandos abajo, la hoja que sube desde el
   borde inferior, los menús emergentes, el cajón lateral y las pantallas de
   entrar y crear cuenta en una sola columna.

   Va acá y no repartida en app.css a propósito. Lo de app.css sigue siendo
   verdad —las medidas, los estados, el desplazamiento del hilo— y sobre eso se
   apoya todo esto; lo que cambia es la disposición, y tenerla junta en un solo
   archivo es lo que permite mirarla, medirla y volver atrás sin desarmar las
   dos mil líneas de abajo.

   Ni un color escrito a mano: todo sale de las fichas de tema.css, así el tema
   claro y el oscuro siguen andando sin tocar una línea de acá.

   Orden: fichas de forma · barra · saludo · redactor · mandos · hoja · menús ·
   cajón lateral · acceso · teléfono.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* El glifo del saludo. Es la marca de Velqerix, no un adorno: por eso tiene
     ficha propia y no cuelga del acento —el acento pinta botones y enlaces, y
     si comparten ficha no se puede mover uno sin mover el otro—. */
  --glifo: #2f6bd8;

  --r-hoja: 22px;
  --alto-mando: 40px;
  --toque: 44px;

  /* Lo que mide el redactor de ancho. Más angosto que el hilo a propósito: una
     línea de texto de 90 caracteres se lee mal, y el hilo necesita aire para
     las tablas y los bloques de código. */
  --ancho-redactor: 760px;
}

html[data-tema="oscuro"] { --glifo: #7fb0ff; }

/* ── La barra de arriba ────────────────────────────────────────────────────
   Se adelgaza y se vacía. Antes llevaba el título, dos tiras de botones y el
   engranaje, y en el teléfono eso era una fila de cosas apretadas que no se
   podían tocar. Ahora lleva tres cosas: el cajón, lo que estás mirando y el
   interruptor de tema. El motor y el nivel bajaron al redactor, que es donde se
   usan. */

.tablero-barra {
  gap: .4rem;
  padding-inline: .55rem;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease, background-color .18s ease;
}

/* La línea de abajo aparece recién cuando hay hilo desplazado debajo: sobre la
   pantalla vacía una raya que no separa nada es ruido. */
.tablero-barra.apoyada {
  border-bottom-color: var(--linea);
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(10px);
}

.tablero-barra .btn-icono { flex: 0 0 auto; }

/* El título ocupa el medio y se recorta con puntos suspensivos. Centrado en el
   teléfono, pegado a la izquierda en el escritorio: en una pantalla ancha un
   título centrado queda flotando lejos de todo. */
.tablero-titulo {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .95rem;
  font-weight: 560;
  letter-spacing: -.012em;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La pastilla del plan, en el lugar del título mientras no haya conversación.
   Dice en qué plan estás y ofrece el siguiente, que es la única cosa que vale
   la pena decir cuando la pantalla está vacía. */
.pastilla-plan {
  flex: 0 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-inline: auto;
  padding: .3rem .8rem;
  border-radius: var(--r-full);
  background: var(--velo-2);
  font-size: .8rem;
  color: var(--tinta-3);
  white-space: nowrap;
  overflow: hidden;
}

.pastilla-plan > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.pastilla-plan i {
  width: 3px;
  height: 3px;
  border-radius: var(--r-full);
  background: var(--tinta-4);
  flex: 0 0 auto;
}

.pastilla-plan a {
  color: var(--acento);
  font-weight: 540;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--borde-acento);
  flex: 0 0 auto;
}

.pastilla-plan a:hover { text-decoration-color: currentColor; }

/* Una de las dos, nunca las dos. Y sin una línea de JS: `:has(.vacio)` es
   verdadero exactamente mientras el hilo esté en la pantalla de bienvenida, así
   que no hay una clase que alguien se olvide de sacar en uno de los seis sitios
   donde el hilo cambia de contenido. */
body:has(.vacio) .tablero-titulo,
body:not(:has(.vacio)) .pastilla-plan { display: none; }

/* ── La pantalla vacía ─────────────────────────────────────────────────────
   Saludo a la izquierda con el glifo adelante, y el redactor justo abajo. El
   par queda a media altura: el `::after` del tablero es el contrapeso que lo
   empuja desde el borde inferior, un poco más fuerte que el hilo de arriba, así
   la pareja apoya un dedo arriba del centro —que es donde el pulgar llega—. */

body:has(.vacio) .tablero { display: flex; flex-direction: column; }
body:has(.vacio) .hilo { flex: 1 1 auto; display: flex; align-items: flex-end; padding-bottom: 0; }
body:has(.vacio) .hilo-interior { width: 100%; }
body:has(.vacio) .redactor { flex: 0 0 auto; }
body:has(.vacio) .tablero::after { content: ""; flex: 1.35 1 auto; }

.vacio {
  justify-items: start;
  text-align: left;
  gap: .5rem;
  padding-block: 0 .4rem;
  max-width: var(--ancho-redactor);
  margin-inline: auto;
  width: 100%;
}

/* La etiqueta y el párrafo se van: en la pantalla vacía sobran. El plan ya está
   en la pastilla de arriba y la explicación la lee nadie. */
.vacio .etiqueta,
.vacio p { display: none; }

.vacio h2 {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 7.6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.015em;
}

/* El glifo: la marca, del tamaño de la letra y en su propio color. Va como
   parte del <h2> para que baje y suba con él en cada tamaño de pantalla. */
.vacio h2 .ic-glifo {
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  color: var(--glifo);
}

/* Las cuatro tarjetas de arranque bajan debajo del redactor y sólo aparecen
   cuando hay lugar. En un teléfono el saludo y el redactor tienen que quedar
   solos: cuatro tarjetas empujan el redactor fuera de la pantalla y lo primero
   que se ve deja de ser dónde escribir. */
.chispas-zona {
  padding: .2rem 1rem 1.2rem;
  display: none;
}

body:has(.vacio) .chispas-zona { display: block; }

.chispas-zona .chispas {
  max-width: var(--ancho-redactor);
  margin-inline: auto;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: .5rem;
}

.chispa-btn {
  border-radius: var(--r-lg);
  padding: .7rem .85rem;
  gap: .2rem;
}

.chispa-btn b { font-size: .84rem; }
.chispa-btn b .ic { color: var(--glifo); }

/* En el teléfono queda sólo el titular de cada tarjeta: el ejemplo largo no se
   lee y estira la tarjeta a tres líneas. */
@media (max-width: 760px) {
  .chispas-zona { display: none !important; }
}

/* ── El redactor ───────────────────────────────────────────────────────────
   Pasa de una fila —texto a la izquierda, botones a la derecha— a una tarjeta
   de dos pisos: arriba el texto de punta a punta, abajo la fila de mandos. Es
   lo que cambia más el uso en el teléfono: escribir dos renglones ya no empuja
   los botones, y los mandos quedan a la altura del pulgar en vez de arriba. */

.redactor { padding: .5rem .75rem .7rem; }
.redactor-interior { max-width: var(--ancho-redactor); gap: .4rem; }

.redactor-caja {
  display: block;
  border-radius: var(--r-hoja);
  padding: .5rem .5rem .45rem;
  background: var(--papel);
  border: 1px solid var(--linea-fuerte);
  box-shadow: var(--sombra-1);
  transition: border-color .16s ease, box-shadow .16s ease;
}

.redactor-caja:focus-within {
  border-color: var(--borde-acento);
  box-shadow: var(--brillo);
}

.redactor textarea {
  width: 100%;
  padding: .5rem .55rem .35rem;
  max-height: 46vh;
  font-size: 1rem;
  line-height: 1.55;
}

/* La fila de mandos. Todo lo que decide *cómo* se contesta vive acá: lo que se
   adjunta, el modo y el motor con su nivel. El enviar queda a la derecha, solo,
   porque es lo único que dispara. */
.redactor-mandos {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding-top: .1rem;
}

.redactor-mandos .btn-icono {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  color: var(--tinta-3);
}

.redactor-mandos .btn-icono:hover { color: var(--tinta); background: var(--velo-2); }
.redactor-mandos .redactor-enviar { margin-left: auto; }

/* La pastilla del motor y el nivel. Un solo texto, sin recuadro: es una
   etiqueta que se puede tocar, no un botón que compite con el enviar. */
.pastilla-motor {
  display: inline-flex;
  align-items: baseline;
  gap: .38rem;
  min-width: 0;
  height: var(--alto-mando);
  padding-inline: .5rem;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--tinta-2);
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}

.pastilla-motor:hover { background: var(--velo-2); }
.pastilla-motor:hover b { color: var(--tinta); }

/* El nombre del motor pesa; el nivel va apagado detrás. Es la jerarquía que
   corresponde: el motor decide qué modelo contesta, el nivel cuánto piensa. */
.pastilla-motor b { font-weight: 560; color: var(--tinta); }
.pastilla-motor span { color: var(--tinta-4); }

/* La flecha es un borde girado y no un glifo, así sigue el color del texto sin
   una ficha más y sin pedirle otro icono a Icons.php. */
.pastilla-motor::after {
  content: "";
  align-self: center;
  flex: 0 0 auto;
  width: .32rem;
  height: .32rem;
  margin-left: .1rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .55;
}

/* El nombre del motor no se come el renglón: «Velqerix Max» ya llega cortado
   a «Max», pero un motor nuevo con nombre largo no tiene que empujar al
   enviar fuera de la tarjeta. */
.pastilla-motor b { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; }

/* La fila vieja de botones del redactor deja de existir como grupo aparte: sus
   tres botones ahora cuelgan del menú del «＋». */
.redactor-botones { display: none; }

/* El pie del redactor se queda —ahí viven las etiquetas de «trabajando» y de
   «retomando»— pero pierde los atajos de teclado: la fila de mandos ya dice
   todo lo que hay que saber, y en el teléfono no hay teclas que apretar. */
.redactor-pie { min-height: 0; padding-top: .1rem; }
.redactor-pie .fila-fin { display: none; }
.redactor-pie:empty { display: none; }

/* ── La hoja que sube desde abajo ──────────────────────────────────────────
   El cajón de paneles —ajustes, habilidades, memoria, archivos, servidores—
   entraba de costado y en el teléfono ocupaba la pantalla entera. Acá sube
   desde el borde de abajo, con las esquinas redondeadas arriba y un tirador,
   y deja ver un poco del hilo atrás. Es el mismo cajón y el mismo JS: cambia
   de dónde viene y hasta dónde llega.

   En el escritorio se queda como estaba, de costado: ahí hay ancho de sobra y
   una hoja baja desperdicia media pantalla. */

@media (max-width: 900px) {
  .cajon {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: min(88dvh, var(--alto-real, 100dvh));
    grid-template-rows: auto auto minmax(0, 1fr);
    border-left: 0;
    border-top: 1px solid var(--linea);
    border-radius: var(--r-hoja) var(--r-hoja) 0 0;
    transform: translateY(100%);
  }

  /* El tirador: no se toca, se lee. Dice «esto sube y baja» sin una palabra. */
  .cajon::before {
    content: "";
    justify-self: center;
    width: 36px;
    height: 4px;
    margin-top: .5rem;
    border-radius: var(--r-full);
    background: var(--linea-fuerte);
  }

  .cajon-cabeza {
    padding: .7rem .95rem .55rem;
    padding-top: .7rem;
  }

  .cajon-cuerpo {
    padding: .2rem .85rem calc(1.4rem + env(safe-area-inset-bottom));
  }
}

/* ── Los menús emergentes ──────────────────────────────────────────────────
   Dos: el del «＋» del redactor —imagen, archivo, mis archivos— y el del pie
   del cajón lateral —cuenta, tema, plan, salir—. Los dos son la misma cosa:
   una tarjeta flotante anclada a lo que la abrió, con filas altas para el dedo
   y separadores donde cambia el tema de las opciones.

   Anclados con `position: absolute` dentro de un padre `relative`, no con
   coordenadas calculadas en JS: así siguen a su botón cuando la barra se mueve
   o el teclado del teléfono empuja el redactor hacia arriba. */

/* El menú se cuelga del ancla, no del <body>: la posición la resuelve el CSS y
   no hay coordenadas que recalcular cuando el teclado del teléfono empuja el
   redactor. El `span` necesita el `inline-flex` o su caja no envuelve al botón
   y el menú se ancla al renglón entero. */
.ancla { position: relative; }
span.ancla { display: inline-flex; }

.menu {
  position: absolute;
  z-index: 64;
  min-width: 220px;
  max-width: min(300px, calc(100vw - 1.6rem));
  padding: .3rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--linea-fuerte);
  background: var(--papel);
  box-shadow: var(--sombra-3);
  display: grid;
  gap: .05rem;
  transform-origin: bottom left;
  animation: menu-entra .14s var(--paso, ease) both;
}

@keyframes menu-entra {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .menu { animation: none; }
}

/* Arriba del botón y alineado a la izquierda: el «＋» vive en el borde de abajo
   de la pantalla, y un menú que baje se sale. */
.menu.arriba { bottom: calc(100% + .4rem); left: 0; }
.menu.abajo { top: calc(100% + .4rem); left: 0; }
.menu.derecha { right: 0; left: auto; transform-origin: bottom right; }

/* Cada fila: icono, texto, y a veces una insignia a la derecha. 44 px de alto
   porque es el mínimo que un pulgar acierta sin apuntar. */
.menu-op {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  min-height: var(--toque);
  padding: .5rem .6rem;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--tinta-2);
  font: inherit;
  font-size: .9rem;
  text-align: left;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}

.menu-op:hover,
.menu-op:focus-visible { background: var(--velo-2); color: var(--tinta); }
.menu-op .ic { flex: 0 0 auto; color: var(--tinta-3); }
.menu-op:hover .ic { color: var(--acento); }
.menu-op > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-op.peligro { color: var(--rojo-tinta); }
.menu-op.peligro .ic { color: var(--rojo-tinta); }
.menu-op.peligro:hover { background: var(--velo-2); color: var(--rojo-tinta); }

/* La insignia de la derecha: el plan al que se puede subir. */
.menu-op em {
  flex: 0 0 auto;
  padding: .12rem .5rem;
  border-radius: var(--r-full);
  background: var(--tinte-1);
  color: var(--acento);
  font-size: .72rem;
  font-style: normal;
  font-weight: 560;
}

/* El correo de quien entró, arriba del menú de la cuenta. No es una opción: es
   el rótulo que dice de quién es este menú. */
.menu-quien {
  padding: .5rem .6rem .45rem;
  font-size: .78rem;
  color: var(--tinta-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-raya { height: 1px; margin: .25rem .4rem; background: var(--linea); }

/* ── El cajón lateral ──────────────────────────────────────────────────────
   Se reordena de arriba abajo: el botón de cerrar solo, la pastilla de
   «Conversación nueva», las cuatro secciones como filas con icono, el rótulo
   «Chats y tareas» con la lupa al lado, la lista, y abajo la fila de quien
   entró que abre su menú.

   Lo que cambia de fondo es que las cuatro secciones suben: estaban abajo, en
   dos filas de botones cuadrados de 60 px que no decían qué eran. Arriba y como
   filas con nombre se leen, y el pie queda para una sola cosa. */

.lado { grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto; }

.lado-cabeza { height: auto; padding: .6rem .7rem .2rem; }

/* La marca sale del cajón: ya está en la pantalla de entrar y en el sitio
   público, y acá le robaba el renglón al botón de cerrar. */
.lado-cabeza .marca { display: none; }
.lado-cabeza .btn-icono { margin-left: 0; }

.lado-nueva { padding: 0 .55rem .5rem; }

/* La pastilla de nueva conversación pierde el relleno de acento: en el original
   es un botón azul que grita, y al lado de cuatro filas tranquilas desequilibra
   el cajón. Queda como la fila más marcada de la lista, no como otra cosa. */
.lado-nueva .btn-primario {
  justify-content: flex-start;
  gap: .65rem;
  padding: .6rem .7rem;
  border-radius: var(--r-md);
  background: var(--velo-3);
  color: var(--tinta);
  border: 1px solid transparent;
  box-shadow: none;
  font-size: .93rem;
  font-weight: 560;
  min-height: var(--toque);
}

.lado-nueva .btn-primario:hover {
  background: var(--velo-4);
  border-color: var(--linea);
  transform: none;
  box-shadow: none;
}

.lado-nueva .btn-primario .ic { color: var(--acento); }

/* Las cuatro secciones, en filas. `.lado-secciones` es nuevo y va donde antes
   estaban las dos filas de botones cuadrados del pie. */
.lado-secciones {
  padding: 0 .55rem .6rem;
  display: grid;
  gap: .05rem;
}

.lado-seccion {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  min-height: var(--toque);
  padding: .5rem .7rem;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--tinta-2);
  font: inherit;
  font-size: .92rem;
  text-align: left;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}

.lado-seccion:hover,
.lado-seccion:focus-visible { background: var(--velo-2); color: var(--tinta); }
.lado-seccion .ic { flex: 0 0 auto; color: var(--tinta-3); }
.lado-seccion:hover .ic { color: var(--acento); }
.lado-seccion > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* El rótulo de la lista, con la lupa al lado. El buscador ya no ocupa un renglón
   propio: aparece cuando se toca la lupa, y mientras no se busca nada ese
   renglón es del primer chat. */
.lado-rotulo {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem 1rem .3rem;
  font-size: .74rem;
  font-weight: 560;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-4);
}

.lado-rotulo span { flex: 1 1 auto; min-width: 0; }
.lado-rotulo .btn-icono { width: 30px; height: 30px; flex: 0 0 auto; }

/* El buscador, plegado. Se despliega con la lupa del rótulo y se enfoca solo.
   `0fr → 1fr` para que la animación mida sin números fijos: el alto del campo
   cambia con el tamaño de letra del sistema.

   Va escrito `minmax(0, 0fr)` y no `0fr` pelado porque un `fr` suelto es
   `minmax(auto, …)`: la fila nunca baja del mínimo automático de lo que lleva
   adentro, y el mínimo automático de un `<input>` es su alto de una línea. Con
   `0fr` el campo se quedaba de 18px visible siempre, incluso con `min-height:0`
   encima —a los controles de formulario eso no les alcanza—. */
.lado-buscar {
  padding: 0 .9rem;
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  /* El recorte va acá y no sólo en el hijo: al `<input>` no se lo puede achicar
     a cero —tiene alto propio— así que sobresale de la fila de cero, y lo que
     lo hace desaparecer es que el envoltorio lo tape. */
  overflow: clip;
  /* Sin margen de recorte cuando está plegado: cuatro píxeles de más y el borde
     de arriba del campo se asoma como una rayita debajo del rótulo. */
  overflow-clip-margin: 0;
  transition: grid-template-rows .18s ease, padding-bottom .18s ease;
}

.lado-buscar > * { overflow: hidden; min-height: 0; }
/* Desplegado sí hace falta el margen: el aro de foco se dibuja dos píxeles por
   fuera del campo y sin esto saldría afeitado. */
.lado.buscando .lado-buscar {
  grid-template-rows: minmax(0, 1fr);
  padding-bottom: .55rem;
  overflow-clip-margin: 5px;
}
.lado-buscar .ic { display: none; }
.lado-buscar input { padding-left: .8rem; }

/* Las filas de conversación: la viñeta adelante en vez del fondo relleno, y la
   activa se marca con el punto en acento y la letra firme. Es más liviano que
   una barra azul de punta a punta, y en una lista larga se lee mejor. */
.lado-lista { padding-inline: .55rem; gap: .02rem; }

.conv {
  grid-template-columns: auto minmax(0, 1fr) auto;
  border-radius: var(--r-md);
  min-height: 40px;
}

.conv::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-right: .1rem;
  border-radius: var(--r-full);
  background: var(--tinta-4);
  opacity: .5;
  transition: background-color .14s ease, opacity .14s ease;
}

.conv.activa::before { background: var(--acento); opacity: 1; }

/* La activa deja de ser una barra de color: fondo apenas insinuado y la letra
   en tinta plena. Con el punto en acento ya se sabe cuál es. */
.conv.activa {
  background: var(--velo-2);
  color: var(--tinta);
}

/* El pie del cajón: el medidor de crédito, fino, y debajo la fila de quien
   entró —avatar, nombre, plan y la flecha que abre su menú—. Las dos filas de
   botones cuadrados que había acá subieron a `.lado-secciones`: abajo tapaban
   el medidor y no decían qué eran. El engranaje y el interruptor de tema se
   fueron al menú, así la fila entera es un solo blanco de toque. */
.lado-pie {
  padding: .5rem .55rem calc(.5rem + env(safe-area-inset-bottom));
  gap: .35rem;
}

.lado-pie .fila { display: none; }

/* El medidor pierde el nombre del plan —ya está al lado del nombre de quien
   entró, dos renglones más abajo— y se queda con lo que no está en ningún otro
   lado: cuánto queda hoy, la barra, y cuánto va del mes. */
.lado-pie .medidor { padding-inline: .5rem; gap: .3rem; }
.lado-pie .medidor-fila { font-size: .76rem; }
.lado-pie .medidor [data-medidor-plan] { display: none; }

.lado-usuario {
  width: 100%;
  min-height: var(--toque);
  padding: .4rem .5rem;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .12s ease;
}

.lado-usuario:hover,
.lado-usuario:focus-visible { background: var(--velo-2); }

/* Nombre y plan en un renglón, separados por un punto: el plan es un dato de
   una palabra y darle un renglón propio hacía la fila el doble de alta. */
.lado-usuario-datos {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  grid-template-columns: none;
}

.lado-usuario-datos b { font-size: .9rem; flex: 0 1 auto; }
.lado-usuario-datos span { font-size: .8rem; color: var(--tinta-4); flex: 0 0 auto; }
.lado-usuario-datos span::before { content: "· "; }

/* La flecha, igual que la de la pastilla del motor: un borde girado. */
.lado-usuario::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: .34rem;
  height: .34rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  color: var(--tinta-4);
  opacity: .8;
}

/* ── Entrar y crear cuenta ─────────────────────────────────────────────────
   De dos columnas a una sola centrada. La columna de la derecha —cuatro cosas
   que te esperan adentro— pasa a ser una tira de cuatro renglones cortos abajo
   del formulario: dicho igual, ocupando un tercio, y sin desaparecer en el
   teléfono como pasaba antes.

   Que quede centrado y angosto no es sólo estética: en el teléfono el formulario
   ya era una columna, y así la pantalla de entrar se ve igual en los dos lados
   en vez de ser dos diseños distintos. */

.acceso {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-content: center;
  justify-items: center;
  gap: 0;
  padding: clamp(1rem, 4vw, 2.5rem) 1rem clamp(2rem, 6vw, 3.5rem);
}

.acceso-caja {
  width: 100%;
  max-width: 420px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  gap: 1.15rem;
  text-align: center;
  justify-items: center;
}

/* `.panel` pinta una veladura con un `::before`; sin recuadro no tiene sentido. */
.acceso-caja::before { display: none; }

.acceso-caja .marca { justify-self: center; }

/* La marca, sin el cuadrado. Acá arriba de la columna el recuadro azul de 38 px
   pesaba más que el título, y encima el glifo desaparecía: `.marca-glifo` trae
   fondo azul de `tema.css` y la letra en blanco, así que pintar la letra de azul
   —que es lo que se quiere sobre el papel— la dejaba del color de su propio
   fondo. Se le saca el fondo y la sombra, y ahí sí el azul se ve. */
.acceso-caja .marca-glifo {
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  color: var(--glifo);
}

.acceso-caja .marca-glifo .ic { width: 30px; height: 30px; }
.acceso-caja .marca:hover .marca-glifo { background: none; box-shadow: none; transform: none; }

/* El nombre se queda. `app.css` lo esconde por debajo de 720 px para que la barra
   del sitio no se apriete, pero acá la marca está sola en el medio de la pantalla
   y sin el nombre la página de entrar no dice de quién es. */
.acceso-caja .marca-texto { display: inline; }
.acceso-caja h1 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
.acceso-caja .plomo { font-size: .93rem; }
.acceso-caja form { width: 100%; text-align: left; }

/* La tira de abajo. Se muestra también en el teléfono —app.css la escondía por
   debajo de 900 px— porque ahora no es una columna al costado sino cuatro
   renglones que entran en cualquier ancho. */
.acceso-lateral {
  display: grid;
  width: 100%;
  max-width: 420px;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linea);
  gap: .85rem;
  align-content: start;
}

.acceso-lateral .etiqueta { justify-self: center; }

.acceso-lista { gap: .55rem; }

/* Iconos chicos y sin recuadro: la caja de 40 px con borde y degradado era el
   peso justo al costado de un formulario, pero debajo de él son cuatro cajas
   que compiten con los campos. */
.acceso-lista li { grid-template-columns: 22px minmax(0, 1fr); gap: .65rem; align-items: center; }

.acceso-lista .ic-caja {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--glifo);
}

.acceso-lista .ic-caja .ic { width: 18px; height: 18px; }
.acceso-lista b { font-size: .89rem; font-weight: 560; }

/* El ejemplo de cada punto se va: al costado del formulario había sitio para
   explicarlo, debajo son cuatro párrafos que nadie lee antes de entrar. */
.acceso-lista p { display: none; }

/* ── El teléfono ───────────────────────────────────────────────────────────
   Última sección a propósito: pisa todo lo de arriba. Acá van las tres cosas
   que hacen que se use cómodo con una mano —blancos de toque de 44 px, el hueco
   de las barras del sistema, y letra de 16 px en todo lo que se escribe— y las
   medidas que app.css había fijado para el diseño viejo.

   El corte es 900 px, el mismo que usa app.css para pasar el cajón a flotante:
   dos cortes distintos dejan una franja de anchos donde el cajón ya flota pero
   la barra todavía se cree de escritorio. */

@media (max-width: 900px) {
  /* El cajón un poco más ancho que los 88vw de app.css: con las secciones como
     filas con nombre, «Servidores» no tiene que partirse en dos renglones. */
  .lado { width: min(340px, 86vw); }

  /* La barra de arriba baja de 56 a lo que necesita, y le deja sitio a la barra
     de estado del teléfono. Sin esto, en pantalla completa el botón del cajón
     queda debajo del reloj. */
  .tablero-barra {
    height: auto;
    min-height: 52px;
    padding-top: env(safe-area-inset-top);
    padding-inline: .35rem;
    gap: .25rem;
  }

  .tablero-barra .btn-icono { width: var(--toque); height: var(--toque); }

  /* El saludo llena el ancho sin pasarse: `7.6vw` a 390 px son 29,6 px, que es
     el tamaño en el que «Hola, Nombre.» entra en dos renglones cortos. */
  .vacio { gap: .4rem; padding-block: 0 .3rem; }

  /* El redactor conserva la esquina redonda grande —es la forma de la tarjeta, y
     app.css la bajaba a `--r-md` para el diseño de una sola fila— y gana aire
     abajo para que la fila de mandos no toque el borde. */
  .redactor { padding: .4rem .55rem calc(.5rem + env(safe-area-inset-bottom)); }
  .redactor-caja { border-radius: var(--r-hoja); padding: .45rem .4rem .4rem; }
  .redactor textarea { font-size: 16px; max-height: 38vh; padding: .5rem .5rem .3rem; }

  /* Los mandos, al dedo. 40 px de alto es el mínimo cómodo para un botón que
     está pegado a otro; el enviar se queda en 44 porque es el que más se toca. */
  .redactor-mandos { gap: .15rem; }
  .redactor-mandos .btn-icono { width: 40px; height: 40px; }
  .redactor-mandos .redactor-enviar { width: var(--toque); height: var(--toque); }
  .pastilla-motor { height: 38px; padding-inline: .4rem; font-size: .82rem; }

  /* El menú del «＋» se estira de borde a borde menos un margen: anclado al
     botón, que está a la izquierda, un menú angosto quedaba perdido. */
  .menu { min-width: min(260px, calc(100vw - 1.6rem)); }
}

/* Teléfono angosto. app.css apretaba acá las dos tiras de la barra; ya no están,
   así que lo que queda es que el saludo y la pastilla no empujen nada. */
@media (max-width: 400px) {
  .vacio h2 { font-size: 1.6rem; }
  .pastilla-plan { padding-inline: .6rem; font-size: .76rem; }
  .pastilla-motor { max-width: 42vw; }
  .lado-secciones { padding-inline: .4rem; }
}

/* Sin ratón no hay hover que valga: lo que sólo se veía al pasar por encima
   tiene que verse siempre, y lo que se movía no se mueve. */
@media (hover: none) {
  .lado-nueva .btn-primario:hover { background: var(--velo-3); border-color: transparent; }
  .menu-op:hover { background: none; color: var(--tinta-2); }
  .menu-op:hover .ic { color: var(--tinta-3); }
  .lado-seccion:hover { background: none; color: var(--tinta-2); }
  .lado-seccion:hover .ic { color: var(--tinta-3); }
  .pastilla-motor:hover { background: none; }
}

/* Nada de esto tiene sentido impreso: la hoja, los menús y el cajón son formas
   de una pantalla que se toca. */
@media print {
  .menu, .lado-secciones, .lado-rotulo, .pastilla-plan, .redactor-mandos { display: none; }
}