/* ============================================================================
   VOCABULARIO VISUAL — el lenguaje del Brand Book de Sondero 29, en una hoja

   De dónde salió: `datos-cliente/identidad/Sondero29 Brand Book.pdf` llevaba en
   el repo desde agosto. Los colores de `DESIGN.md` ya salían de ahí uno por uno;
   lo que no habíamos copiado era el LENGUAJE. Su manual son planos completos de
   olivo con tipografía ligera en minúsculas, micro-etiquetas con tracking y
   reglas de pelo. Nuestra app eran cajitas con borde de 1 px y mayúsculas en
   peso 600. Declara Montserrat Light: usábamos su fuente con el peso equivocado.

   LA REGLA QUE ORDENA TODO:
     Todo lo que se puede TOCAR vive sobre un plano con su regla abajo.
     Lo que solo se LEE va suelto sobre el marfil.
   Así la elegancia de la línea de pelo no le cuesta a Frank tener que adivinar
   dónde picar con guantes.

   POR QUÉ UNA SOLA HOJA. El CSS de Captura vivía copiado en cuatro bloques
   <style>. Ya mordió una vez: el bloque de escritorio estaba en tres pantallas y
   ausente en la cuarta, y «El efectivo» se quedó en formato celular sin que nadie
   lo notara (por eso nació `escritorio.css`). Con cuatro copias, un rediseño se
   desincroniza el primer día.

   ORDEN DE CARGA en cada pantalla:
     vocabulario.css  →  <style> local (lo propio de esa pantalla)  →  escritorio.css

   Referencia: docs/propuesta-visual-18sep.md y las maquetas de docs/propuesta-visual/.
   ============================================================================ */

:root{
  /* Los mismos hex del Brand Book que ya usaba la app. No se movió ni uno. */
  --marfil:#f5f5eb; --cafe:#54483f; --olivo:#54584b; --piedra:#928e81;
  --carbon:#4d4d4d; --terracota:#8d6440;
  --texto:#2f2a25; --texto-2:#57524a; --texto-3:#6b665c;
  --peligro:#9b2c2c; --peligro-soft:#f3e7e7;

  /* Alias que las pantallas ya nombran así. Se conservan para no tocar 4 hojas. */
  --ivory:var(--marfil); --brown:var(--cafe); --olive:var(--olivo); --stone:var(--piedra);
  --charcoal:var(--carbon); --terracotta:var(--terracota);
  --rojo:var(--terracota); --rojo-soft:#ebe9dd; --rojo-oscuro:#6f4d2f;
  --gris:var(--texto-3); --tinta:var(--cafe); --negro:var(--carbon);
  --white:#fbfbf3; --fondo:var(--marfil);
  --muted:var(--texto-3); --ok:var(--olivo); --ok-soft:#e6e8e0;
  --alerta:#6f4d2f; --alerta-soft:#f1e9e0;

  /* El plano: el fondo de lo que se puede tocar. Un tono por debajo del marfil. */
  --plano:#efefe4;
  /* La regla de pelo, para lo que solo separa. */
  --linea:rgba(146,142,129,.34);
  --soft:var(--linea);

  --sans:'Montserrat',system-ui,-apple-system,sans-serif;
  --marca:var(--sans);
  --barra:calc(58px + env(safe-area-inset-bottom));
  /* El sitio que la barra fija le QUITA a la ventana. En celular la barra flota
     encima del contenido, así que ese espacio no es utilizable y hay que restarlo
     de cualquier alto medido en 100vh. En escritorio la barra sube y deja de
     flotar: ahí vale 0 (`escritorio.css`). */
  --sitio-barra:calc(var(--barra) + 12px);

  /* ── Movimiento ─────────────────────────────────────────────────────────
     Los MISMOS tokens que Oficina (`styles.css`), para que las dos mitades se
     muevan igual: corto, con inercia y discreto. La curva de resorte es un muelle
     real (rigidez 210, amortiguación 23): arranca rápido, frena suave y rebasa
     apenas un 1 %. Las salidas van con ease-out liso y más cortas que las entradas.
     Captura no los tenía —el movimiento se trabajó del lado de Oficina— así que
     aquí todo cambiaba de golpe. */
  --dur-hover:120ms;
  --dur-entrada:220ms;
  --dur-morph:320ms;
  --dur-salida:150ms;
  --ease-resorte:linear(0, .0168 4.2%, .0608 8.3%, .1232 12.5%, .1972 16.7%, .2774 20.8%,
    .3596 25%, .4406 29.2%, .5182 33.3%, .5907 37.5%, .6571 41.7%, .7171 45.8%, .7702 50%,
    .8167 54.2%, .8568 58.3%, .8909 62.5%, .9194 66.7%, .9431 70.8%, .9623 75%, .9776 79.2%,
    .9896 83.3%, .9988 87.5%, 1.0056 91.7%, 1.0104 95.8%, 1);
  --ease-salida:cubic-bezier(.2,.7,.2,1);
}

/* ── El movimiento, todo junto y todo apagable ──────────────────────────────
   Nada de esto corre si el sistema pide reducir el movimiento: el bloque entero
   vive dentro de `prefers-reduced-motion: no-preference`. */
@keyframes aparece{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
@keyframes desvanece-baja{ to{opacity:0; transform:translateY(6px)} }

@media (prefers-reduced-motion: no-preference){
  /* Entre pestañas: cada una es una página aparte, así que el salto era seco. Con
     esto lo viejo sale bajando (150 ms) y lo nuevo entra con resorte subiendo 8 px.
     Donde el navegador no lo soporte, simplemente no pasa nada. */
  @view-transition{ navigation:auto }
  ::view-transition-old(root){ animation:desvanece-baja var(--dur-salida) var(--ease-salida) both }
  ::view-transition-new(root){ animation:aparece 260ms var(--ease-resorte) both }
  /* La cabecera y la barra no se mueven: son el marco que se queda quieto mientras
     el contenido cambia. Si se movieran, la pantalla entera parecería saltar. */
  ::view-transition-group(cabecera), ::view-transition-group(barra){ animation-duration:0s }

  /* Lo que cambia de estado al tocarlo, cambia con tiempo. */
  .cat, .sub, .op, .d, .obra, .foto, .foto-alt, .todas, .agregar, .nuevo, .acc button,
  .barra a, .go button, .cerrar, .nav button, button.accion{
    transition:background-color var(--dur-hover) var(--ease-salida),
               color var(--dur-hover) var(--ease-salida),
               border-color var(--dur-hover) var(--ease-salida);
  }
  /* La palomita de lo elegido no aparece de golpe: crece desde el centro. */
  .cat::after, .sub[aria-pressed="true"]::after, .op[aria-pressed="true"]::after{
    transition:opacity var(--dur-entrada) var(--ease-resorte),
               transform var(--dur-entrada) var(--ease-resorte);
  }
  .cat::after{ transform:scale(.6) }
  .cat[aria-pressed="true"]::after{ transform:scale(1) }
  /* Lo que se despliega —las sub-opciones, las horas extra, un aviso— entra desde
     donde nació en vez de aparecer de la nada. */
  .subs:not([hidden]), .extra, .aviso-p, .salida, .heredada, .listo:not([hidden]),
  .veredicto:not([hidden]), .revision:not([hidden]), .cuadre:not([hidden]){
    animation:aparece var(--dur-entrada) var(--ease-resorte) both;
  }
  /* El diálogo sube; no parpadea. */
  dialog[open]{ animation:aparece var(--dur-entrada) var(--ease-resorte) both }
  html{ scroll-behavior:smooth }
}

*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
/* `hidden` es un atributo, y cualquier `display` explícito del CSS lo pisa —por eso
   el botón de la cotización aparecía sin marcar la casilla de «genérica»—. Con el
   vocabulario casi todo lleva `display:flex`, así que el candado va aquí, una vez. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}

/* La textura: su manual vive sobre concreto y papel. Muy sutil, casi subliminal.
   Va como data URI para que funcione sin señal, igual que el resto del cascarón. */
body{
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.55;
  background:var(--fondo); color:var(--texto);
  -webkit-font-smoothing:antialiased; min-height:100vh;
  padding-bottom:var(--sitio-barra);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.035'/></svg>");
}

/* El pie se va SIEMPRE al fondo de la ventana, tenga o no contenido la pantalla.
   Sin esto, «El efectivo» sin entregas registradas lo dejaba flotando a media
   pantalla con medio metro de blanco debajo.

   El alto se mide en 100vh MENOS lo que ocupa la barra fija: en celular la barra
   flota sobre los últimos 70 px de la ventana, así que un pie anclado a 100vh
   quedaba 19 px POR DEBAJO de ella —tapado por el plano olivo— y de pasó metía
   scroll en una pantalla que cabe entera. En escritorio `--sitio-barra` vale 0 y
   esto vuelve a ser 100vh exactos. */
.app{display:flex; flex-direction:column; max-width:560px; margin:0 auto;
  padding:0 0 40px; min-height:calc(100vh - var(--sitio-barra))}
.app > .cuerpo{flex:1 0 auto}

/* Los nombres que hacen que la cabecera y la barra NO se muevan al cambiar de
   pestaña: son el marco, y el marco se queda quieto mientras cambia lo de adentro. */
.top{view-transition-name:cabecera}
.barra{view-transition-name:barra}

/* ── la micro-etiqueta: la firma tipográfica del manual ───────────────────── */
.micro, .lbl, .cats .lbl, .monto label, .dia h2{
  display:block; font-size:14px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--texto-3); line-height:1.5;
}

/* ── la cabecera es un PLANO, no una barra ────────────────────────────────── */
/* Deja de ser sticky: con la barra de abajo fija ya hay un ancla permanente, y
   un plano de 26 px pegado arriba se comía la pantalla del celular. */
.top{
  position:static; display:flex; align-items:center; gap:10px;
  margin:0; padding:calc(18px + env(safe-area-inset-top)) 20px 6px;
  background:var(--olivo); color:var(--marfil); border-bottom:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.05'/></svg>");
}
/* El logo es el ARCHIVO del cliente, nunca texto: el wordmark tiene una ligadura
   propia entre la «o» y el «29» que ninguna fuente reproduce. El filtro lo vuelve
   marfil sólido, porque el asset es de dos tonos y sobre olivo el «29» se perdía. */
.marca{height:30px; width:auto; flex:0 0 auto; display:block; filter:brightness(0) invert(1); opacity:.96}
.top .modulo{display:flex; flex-direction:row; gap:6px; align-items:baseline;
  margin-left:auto; padding-left:0; border-left:0;
  font-size:14px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(245,245,235,.82); min-width:0}
.top .modulo .et, .top .who{font:inherit; color:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* «Captura» se cae en las cuatro y en todos los anchos: la barra, el título y la
   propia liga ya dicen dónde estás. Lo que no está dicho en ningún otro lado es
   QUIÉN entró, y eso importa —Frank tiene que poder ver que abrió con su liga y no
   con la de alguien más—. El bloque entero va pegado a la derecha, igual en las cuatro. */
.top .modulo .et{display:none}

/* El estado de sincronía: una micro-etiqueta, no un botón. Solo grita cuando hay
   algo que decir (pendientes o error); «al día» se queda callado. */
.sync{flex:none; align-self:center; font-size:14px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; padding:6px 0;
  background:none; border:0; color:rgba(245,245,235,.82)}
.sync.pend{color:#e8c9a8; border-bottom:1px solid #e8c9a8}
.sync.err{color:#f0c9c9; border-bottom:1px solid #f0c9c9}

/* El buzón lo inyecta feedback.js al final de la cabecera: aquí solo se le quita
   la caja, para que no compita con el logo. */
.top .fb-btn{flex:none; width:40px; height:40px; padding:0; margin-left:2px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:0; color:rgba(245,245,235,.82); cursor:pointer}
.top .fb-btn svg{width:19px; height:19px}
.top .fb-btn:active{color:var(--marfil)}

/* El reloj vive en la columna de escritorio; en celular no hay dónde ponerlo. */
.reloj{display:none}

/* El recado de Factura, en Gasto: por qué la casilla de abajo llegó marcada sola.
   Mismo lenguaje que los avisos —regla terracota a la izquierda y tinte leve—, porque
   es exactamente eso: algo que el sistema hizo y tiene que explicar. */
.vengo-factura{margin:14px 0 0; padding:12px 14px; font-size:16px; line-height:1.6;
  color:var(--texto); background:color-mix(in oklab, var(--terracota) 8%, var(--plano));
  border-left:3px solid var(--terracota)}
.vengo-factura b{font-weight:500}

/* El estado vacío de una lista: lo que va a aparecer ahí, no un hueco. */
.vacio{margin:0; padding:18px 0; font-size:16px; line-height:1.6; color:var(--texto-3)}

/* El título vive DENTRO del plano: minúsculas, peso 200, sin tracking. */
.plano-tit{background:var(--olivo); color:var(--marfil); margin:0; padding:14px 24px 30px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.05'/></svg>")}
.plano-tit h1{margin:0; font-size:38px; font-weight:200; line-height:1.02;
  letter-spacing:-.015em; text-transform:none; color:var(--marfil)}
/* La leyenda: UNA frase por renglón —cada frase va en su <span>— y dos renglones como
   máximo (César, 22-sep). Más que eso deja de leerse y se vuelve un párrafo. 15 px es el
   escalón de «apoyo» de la escala; el 1.6 es el 1.5 del DESIGN.md con un respiro, que es
   lo que pide texto claro sobre olivo. Mismo trato que la leyenda de Oficina. */
.plano-tit .hint{margin:10px 0 0; font-size:15px; font-weight:300; font-style:normal;
  color:rgba(245,245,235,.82); line-height:1.6}
.plano-tit .hint span{display:block}

/* ── navegación: texto con tracking, no botones con ícono ─────────────────── */
/* En CELULAR se queda abajo y fija: es donde llega el pulgar de pie y con
   guantes. En escritorio sube junto a la cabecera (lo hace escritorio.css). */
.barra{position:fixed; left:0; right:0; bottom:0; z-index:10;
  background:var(--olivo); border-top:1px solid rgba(245,245,235,.18);
  padding-bottom:env(safe-area-inset-bottom)}
.barra .pestanas{display:grid; grid-template-columns:repeat(4,1fr); max-width:560px; margin:0 auto}
/* El tracking baja de .2em a .06em: con la letra ya en 14 px —el mínimo del vocabulario—
   las cuatro pestañas sumaban 392 px en una tira de 390 y «Efectivo» se cortaba. Se cede
   el tracking, que es adorno, antes que el tamaño, que es legibilidad. */
.barra a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:58px; text-decoration:none; color:rgba(245,245,235,.82);
  font-size:14px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  border-top:2px solid transparent; transition:color 150ms ease}
.barra a svg{width:21px; height:21px; stroke-width:1.3}
.barra a[aria-current="page"]{color:var(--marfil); border-top-color:var(--terracota)}
.barra a:active{background:rgba(245,245,235,.08)}

/* ── el paso numerado ─────────────────────────────────────────────────────── */
/* Sale del 1.1 / 2.3 de su manual, y de paso le dice a Frank el orden. */
main, .cuerpo{padding:0 20px}
.paso{display:grid; grid-template-columns:32px 1fr; gap:10px; padding:24px 0;
  border-bottom:1px solid var(--linea)}
/* Un hijo de grid trae `min-width:auto` y NO encoge por debajo de su contenido:
   la fila de sub-opciones estiraba su columna y con ella la página entera. Es la
   misma regla que ya mordió con `1fr` contra `minmax(0,1fr)`. */
.paso > *{min-width:0}
/* HIJO DIRECTO, y no descendiente: `.n` también es la columna del importe en la
   tabla de Factura y la cifra grande de El efectivo. Con `.paso .n` la diagonal se
   dibujaba dentro de cada renglón de la factura. Es el tercer choque de clases de
   este rediseño (los otros dos: `.sub` de la foto contra la subcategoría, y `.d`). */
.paso > .n{display:flex; flex-direction:column; font-size:14px; font-weight:400;
  letter-spacing:.06em; color:var(--texto-3); padding-top:3px}
/* La diagonal del logo, como marca de agua. Separada del número y sin inclinarse
   tanto: pegada se leía como si lo tachara. */
.paso > .n::after{content:''; width:13px; height:22px; margin-top:12px;
  border-left:1px solid var(--piedra); transform:rotate(22deg);
  transform-origin:bottom left; opacity:.55}

/* ── LO QUE SE TOCA: plano con su regla abajo ─────────────────────────────── */
.tocable, .obra, .foto, .foto-alt, .monto .box, .cat, .sub, .op, .adjuntar{
  background:var(--plano); border:0; border-bottom:2px solid var(--linea);
  border-radius:0; font:inherit; color:var(--texto); cursor:pointer;
}
.tocable:focus-visible, .obra:focus-visible, .foto:focus-visible, .foto-alt:focus-visible,
.cat:focus-visible, .sub:focus-visible, .op:focus-visible, .adjuntar:focus-visible,
.barra a:focus-visible, .go button:focus-visible{
  outline:2px solid var(--terracota); outline-offset:2px}

/* el campo elegido: la regla se pinta de terracota y el texto también */
.obra{display:flex; align-items:baseline; gap:10px; width:100%; text-align:left;
  min-height:60px; padding:13px 16px; margin-top:12px; border-bottom-color:var(--cafe)}
.obra .obra-txt{display:flex; flex-direction:column; min-width:0}
.obra .val{font-size:18px; font-weight:300; line-height:1.25; color:var(--texto)}
.obra .det{font-size:14px; color:var(--texto-3)}
.obra .chg{margin-left:auto; flex:0 0 auto; font-size:14px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--terracota); padding-left:12px}

/* ── LO QUE HACE ALGO, contra LO QUE CONTIENE ALGO ───────────────────────── */
/* La regla del plano funciona para un CAMPO —la obra, el monto, la foto—: tiene
   contenido dentro y una regla gruesa abajo, así que se lee como campo aunque el
   plano sea tenue. Un BOTÓN de puro texto no contiene nada, y con el mismo tono se
   lee como una leyenda: nadie lo toca.
   Salió de usar la app: «ADJUNTAR EL PDF DE LA FACTURA» y «APLICAR LA OBRA DE
   ARRIBA…» parecían renglones de instrucciones, no cosas que se pueden picar.
   El plano está a seis puntos de luminosidad del marfil (#efefe4 contra #f5f5eb):
   suficiente para un campo, no para una acción. Por eso las acciones bajan otro
   escalón, llevan tinta plena en vez de gris, y su regla va en piedra. */
/* `button.accion` y no `.accion` a secas: esta hoja carga ANTES del <style> de cada
   pantalla, así que a igual especificidad ganaría el de allá. Con el elemento
   delante, (0,1,1) contra (0,1,0), gana esta sin tener que repetirla en cuatro
   hojas — que es justo lo que este archivo existe para evitar. */
button.accion{
  background:#e4e4d6;
  color:var(--texto);
  border-bottom-color:var(--piedra);
}
button.accion:active{background:var(--plano); color:var(--terracota); border-bottom-color:var(--terracota)}
/* El «+» dice que agrega algo. Va en el texto de cada botón, no aquí, para que se
   lea también en el lector de pantalla. */

/* ── LO QUE SOLO SE LEE: suelto sobre el marfil ───────────────────────────── */
.pie{margin:28px 24px 0; padding-top:14px; border-top:1px solid var(--linea);
  text-align:center; font-size:14px; color:var(--texto-3); flex:0 0 auto}

/* ── la acción: un plano sólido, tipografía ligera y ancha ────────────────── */
.go button{width:100%; min-height:66px; font:inherit; font-size:14px; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase; color:var(--marfil);
  background:var(--cafe); border:0; border-radius:0; cursor:pointer;
  transition:background-color 200ms ease, transform 120ms ease}
.go button:active{background:var(--terracota); transform:scale(.99)}
.go .nota{margin:12px 0 0; text-align:center; font-size:14px; color:var(--texto-3)}

/* ── diálogos ─────────────────────────────────────────────────────────────── */
dialog{border:0; border-radius:0; width:100%; max-width:560px; margin:auto auto 0;
  padding:22px 24px calc(22px + env(safe-area-inset-bottom));
  background:var(--fondo); box-shadow:0 -8px 40px rgba(0,0,0,.18)}
dialog::backdrop{background:rgba(47,42,37,.45)}
dialog h3{font-size:18px; font-weight:200; letter-spacing:-.01em; color:var(--texto);
  margin-bottom:14px; text-transform:none}
.ops{display:flex; flex-direction:column; gap:8px}
.op{display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  min-height:58px; padding:14px 16px; font-size:16px}
.op[aria-pressed="true"]{color:var(--terracota); border-bottom-color:var(--terracota); background:var(--plano)}
.cerrar{margin-top:14px; width:100%; min-height:52px; font:inherit; font-size:14px;
  font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--texto-3);
  background:none; border:0; border-bottom:1px solid var(--linea); border-radius:0; cursor:pointer}

/* ── el aviso de enlace sin acceso ────────────────────────────────────────── */
.aviso{margin-top:60px; padding:0 24px; text-align:center}
.aviso .iso{margin-bottom:20px}
.marca-oscura{height:34px; width:auto}
.aviso h1{font-size:32px; font-weight:200; letter-spacing:-.01em; text-transform:none;
  color:var(--texto); margin-top:6px}
.aviso p{margin-top:10px; color:var(--texto-3); font-size:16px}

/* ── el aviso de arriba (banner) y el toast ───────────────────────────────── */
.banner{margin:14px 24px 0; padding:14px 16px; font-size:15px; line-height:1.45;
  color:var(--texto-2); background:rgba(141,100,64,.07);
  border:0; border-left:3px solid var(--terracota); border-radius:0}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--barra) + 20px);
  z-index:20; background:var(--cafe); color:var(--marfil); font-size:14px; font-weight:300;
  padding:14px 20px; border:0; opacity:0; transition:opacity .25s; pointer-events:none}
.toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){ .toast{transition:none} .go button{transition:none} }

/* ── escritorio: el marco crece y la tipografía respira ───────────────────── */
/* El resto del comportamiento de escritorio (dos columnas, la barra arriba) vive
   en escritorio.css, una sola vez para las cuatro pantallas. */
@media (min-width:900px){
  body{font-size:16px}
  .top{padding:28px 40px 6px}
  .plano-tit{padding:16px 40px 38px}
  .plano-tit h1{font-size:52px}
  .marca{height:34px}
  main, .cuerpo{padding:0}
  .paso{grid-template-columns:44px 1fr; gap:14px; padding:26px 0}
  .pie{margin-left:0; margin-right:0}
  .banner{margin-left:0; margin-right:0}
  .obra .val{font-size:26px}
  .barra a{flex-direction:row; gap:9px; min-height:52px}
  .barra a svg{width:17px; height:17px}

  /* El diálogo deja de ir pegado al borde de abajo. En el celular ahí está bien —es
     una hoja que sube y queda al alcance del pulgar—, pero en una pantalla grande se
     leía como si se hubiera atorado en el filo de la ventana. Centrado, se lee como
     lo que es: algo que se abrió encima. */
  dialog{margin:auto; max-width:560px; padding:30px 34px; box-shadow:0 10px 60px rgba(47,42,37,.25)}
}