/* =============================================================================
   paginas.css — lo propio de cada pieza: heroe, lector, registro, sobre.
   Los tokens salen todos de tema.css; aca no se inventa ni un color.
   ============================================================================= */

/* ------------------------------- HÉROE ------------------------------- */
.heroe { position: relative; overflow: hidden; padding-block: calc(var(--u) * 20) calc(var(--u) * 16); }
/* el pentagrama de fondo: la unica decoracion de la pagina, y es del tema */
.heroe::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom,
    transparent 0 22px,
    color-mix(in srgb, var(--oro) 12%, transparent) 22px 23px,
    transparent 23px 45px);
  -webkit-mask-image: radial-gradient(120% 80% at 70% 25%, #000 0%, transparent 70%);
  mask-image: radial-gradient(120% 80% at 70% 25%, #000 0%, transparent 70%);
  opacity: .5;
}
.heroe-caja { position: relative; display: grid; grid-template-columns: 1.05fr .95fr;
  gap: calc(var(--u) * 12); align-items: center; }
@media (max-width: 900px) { .heroe-caja { grid-template-columns: 1fr; gap: calc(var(--u) * 8); } }
.heroe h1 em { font-style: italic; color: var(--oro); }
.heroe .lede { margin-top: calc(var(--u) * 5); }
.promesa { font-size: .8rem; color: var(--texto-3); border-left: 2px solid var(--oro-hondo);
  padding-left: calc(var(--u) * 3); max-width: 52ch; line-height: 1.5; }

/* zona de arrastre */
.zona { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--u) * 2); text-align: center; cursor: pointer;
  padding: calc(var(--u) * 10) calc(var(--u) * 6);
  background: var(--tinta-700); border: 1.5px dashed color-mix(in srgb, var(--oro) 45%, transparent);
  border-radius: 14px; color: var(--texto-3);
  transition: border-color var(--transicion), background var(--transicion), transform var(--transicion); }
.zona:hover, .zona.encima { border-color: var(--oro); background: var(--tinta-600); }
.zona.encima { transform: scale(1.012); }
.zona.trabajando { cursor: progress; border-style: solid; }
.zona-icono { color: var(--texto-3); transition: color var(--transicion); }
.zona:hover .zona-icono { color: var(--oro); }
.zona-titulo { font-size: 1.06rem; color: var(--titulo); margin: 0; font-weight: 500; }
.zona-sub { margin: 0; font-size: .9rem; color: var(--texto-2); }
.zona-nota { font-size: .74rem; margin: calc(var(--u) * 2) 0 0; letter-spacing: .02em; }
.enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--oro);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.estado-ok { color: var(--ok); } .estado-off { color: var(--texto-3); }
.estado-falla { color: var(--falla); } .estado-trabajando { color: var(--aviso); }

/* panel de resultado de la conversion */
.resultado { margin-top: calc(var(--u) * 4); background: var(--tinta-700);
  border: 1px solid var(--oro-hondo); border-radius: 12px; padding: calc(var(--u) * 5); }
.resultado-cab { display: flex; align-items: center; gap: calc(var(--u) * 3); margin-bottom: var(--u); }
.resultado-cab strong { color: var(--titulo); }
.resultado-detalle { font-size: .78rem; color: var(--texto-2); margin: 0 0 calc(var(--u) * 4); }
.resultado-botones { display: flex; gap: calc(var(--u) * 3); flex-wrap: wrap; }

/* ------------------------------- LECTOR ------------------------------- */
.lector-marco { background: var(--tinta-700); border: var(--borde); border-radius: 14px;
  overflow: hidden; }
.lector-barra { display: flex; align-items: center; gap: calc(var(--u) * 4); flex-wrap: wrap;
  padding: calc(var(--u) * 3) calc(var(--u) * 4); background: var(--tinta-600);
  border-bottom: 1px solid var(--tinta-500); }
.control { display: flex; align-items: center; gap: calc(var(--u) * 2);
  font-size: .8rem; color: var(--texto-2); }
.control select, .control input[type=range] { font: inherit; color: var(--texto);
  background: var(--tinta-700); border: 1px solid var(--tinta-500); border-radius: 6px;
  padding: calc(var(--u) * 1.2) calc(var(--u) * 2); max-width: 210px; accent-color: var(--oro); }
.control input[type=range] { padding: 0; width: 110px; }
.control-grupo { display: flex; gap: calc(var(--u) * 2); }
.control-grupo.derecha { margin-left: auto; }
.boton.chico { padding: calc(var(--u) * 1.6) calc(var(--u) * 3); font-size: .82rem; }
.lector-caja { padding: calc(var(--u) * 4); background: var(--tinta-800); }
/* ---- el editor arranca EN BLANCO ----
   La invitación se apila SOBRE el lienzo en vez de reemplazarlo: así el componente ya
   está montado y con su tamaño desde el primer momento, y abrir una partitura no mueve
   la página de sitio. */
/* sin partitura el lienzo mide 0 y la invitación —que va encima— se montaba sobre el
   pie. El hueco tiene que existir aunque no haya nada dibujado. */
.lector-zona { position: relative; min-height: min(46vh, 420px); }
/* La PALETA del lector la manda el host: el motor emite `var(--tinta)`, `var(--mesa)`…
   y quien lo hospeda decide los colores. El componente trae los suyos por defecto
   —claros, pensados para papel—, así que acá se pisan por los de esta web, que es
   oscura: la mesa deja de ser gris claro y la hoja flota sobre el mismo fondo del
   sitio. El selector es #lector (un id) porque el componente pone los suyos en su
   propia clase .pl-lector, y un id gana. */
#lector.pl-lector { --mesa: var(--tinta-800); --bordeHoja: transparent; --folio: var(--texto-3); }
#lector .pl-lienzo svg.hoja { filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .55)); }
.lector-zona.encima::after { content: ''; position: absolute; inset: calc(var(--u) * 2);
  border: 2px dashed var(--oro); border-radius: 10px; pointer-events: none; }
.lector-vacio { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: calc(var(--u) * 2);
  background: var(--tinta-800); text-align: center; padding: calc(var(--u) * 6); }
.lector-vacio[hidden] { display: none; }
.lector-vacio-titulo { margin: 0; font-size: 1.06rem; color: var(--titulo); font-weight: 500; }
.lector-vacio-sub { margin: 0; font-size: .9rem; color: var(--texto-2);
  display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); align-items: baseline;
  justify-content: center; }
.lector-vacio-tipos { font-size: .74rem; color: var(--texto-3); letter-spacing: .02em; }
.lector-vacio-nota { margin: calc(var(--u) * 2) 0 0; font-size: .74rem; color: var(--texto-3);
  max-width: 42ch; }
.lector-vacio-error { margin: calc(var(--u) * 2) 0 0; font-size: .78rem; color: var(--falla);
  max-width: 52ch; line-height: 1.6; }
.lector-vacio-error[hidden] { display: none; }
/* el héroe apunta al editor: botón + estado del conversor, centrados en su columna */
.heroe-cta { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: calc(var(--u) * 3); }

/* ---- conversión en curso: spinner + fase + consejo rotativo (como PianoLibre) ---- */
.lector-cargando { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: calc(var(--u) * 4);
  background: var(--tinta-800); text-align: center; padding: calc(var(--u) * 6); z-index: 3; }
.lector-cargando[hidden] { display: none; }
.girador { width: 54px; height: 54px; border-radius: 50%;
  border: 5px solid var(--tinta-500); border-top-color: var(--oro);
  animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.lector-cargando-titulo { margin: 0; font-size: 1.02rem; color: var(--titulo); font-weight: 500; }
.lector-cargando-tip { margin: 0; font-size: .76rem; color: var(--texto-3); max-width: 46ch;
  min-height: 2.6em; transition: opacity 400ms ease; }
.lector-cargando-tip.cambiando { opacity: 0; }
/* barra de espera SIN porcentaje: no mentimos con un número */
.barra-espera { width: min(260px, 60%); height: 6px; border-radius: 3px;
  background: var(--tinta-600); overflow: hidden; }
.barra-espera span { display: block; width: 40%; height: 100%; border-radius: 3px;
  background: var(--oro); animation: vaiven 1.6s ease-in-out infinite; }
@keyframes vaiven { 0% { margin-left: 0; } 50% { margin-left: 60%; } 100% { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) {
  .girador, .barra-espera span { animation-duration: 4s; }
}
.lector-pie { padding: calc(var(--u) * 2.5) calc(var(--u) * 4); font-size: .74rem;
  color: var(--texto-3); border-top: 1px solid var(--tinta-500); margin: 0; }
.pista { margin: calc(var(--u) * 3) 0 0; font-size: .84rem; color: var(--oro);
  display: flex; align-items: center; gap: calc(var(--u) * 2); transition: opacity 400ms ease; }
.pista::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--oro);
  animation: latido 2.4s ease-in-out infinite; }
.pista.ida { opacity: 0; pointer-events: none; }
@keyframes latido { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* ------------------------------- CIFRAS ------------------------------- */
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 4); }
@media (max-width: 800px) { .cifras { grid-template-columns: 1fr; } }
.cifra { display: flex; flex-direction: column; gap: var(--u);
  padding: calc(var(--u) * 5); background: var(--tinta-700); border: var(--borde);
  border-radius: var(--radio); border-top: 2px solid var(--oro); }
.cifra-n { font-size: 1.75rem; color: var(--oro); letter-spacing: -.02em; line-height: 1; }
.cifra-q { font-size: .9rem; color: var(--texto-2); line-height: 1.45; }
.nota-alcance { margin-top: calc(var(--u) * 6); color: var(--texto-2); max-width: var(--medida); }

/* ------------------------------- TEASERS ------------------------------- */
.teasers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 4); }
@media (max-width: 800px) { .teasers { grid-template-columns: 1fr; } }
.teaser { display: flex; flex-direction: column; gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 5); background: var(--tinta-700); border: var(--borde);
  border-radius: var(--radio); text-decoration: none; color: inherit;
  transition: border-color var(--transicion), transform var(--transicion); }
.teaser:hover { border-color: var(--oro-hondo); transform: translateY(-2px); }
.teaser strong { font-family: var(--serif); font-size: 1.12rem; color: var(--titulo); }
.teaser span:last-child { font-size: .88rem; color: var(--texto-2); }
.cab-seccion.fila { display: flex; align-items: flex-end; justify-content: space-between;
  gap: calc(var(--u) * 6); flex-wrap: wrap; }

/* ------------------------------- NOVEDADES ------------------------------- */
/* el buscador esconde con el atributo `hidden`, y sin esto no serviria de nada:
   [hidden] vale display:none, pero lo pisa cualquier `display` propio — y aca
   las lineas son flex. Sin el !important el filtro contaba bien y no ocultaba
   nada (se veia el release entero al buscar). */
[hidden] { display: none !important; }
/* el cartel de la version publicada */
.cartel { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(var(--u) * 3);
  background: var(--tinta-700); border: var(--borde); border-left: 3px solid var(--oro);
  border-radius: var(--radio); padding: calc(var(--u) * 4) calc(var(--u) * 5);
  text-decoration: none; color: inherit; margin-bottom: calc(var(--u) * 5);
  transition: border-color var(--transicion); }
.cartel:hover { border-color: var(--oro-hondo); border-left-color: var(--oro); }
.c-num { font-family: var(--mono); font-size: 1.15rem; color: var(--oro); }
.c-tit { font-family: var(--serif); font-size: 1.15rem; color: var(--titulo); }
.c-fe, .c-n { font-family: var(--mono); font-size: .72rem; color: var(--texto-3); }
.c-n { margin-left: auto; border: 1px solid var(--tinta-500); border-radius: 20px;
  padding: 3px calc(var(--u) * 2.5); }

/* el tablero: una tarjeta por proyecto, con una barra por tipo */
.tab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 4); }
@media (max-width: 820px) { .tab { grid-template-columns: 1fr; } }
.area { background: var(--tinta-700); border: var(--borde); border-radius: var(--radio);
  padding: calc(var(--u) * 5); border-top: 2px solid var(--oro); }
.area-cab { display: flex; justify-content: space-between; align-items: flex-start;
  gap: calc(var(--u) * 4); flex-wrap: wrap; margin-bottom: calc(var(--u) * 4); }
.area-cab h3 { font-family: var(--serif); font-size: 1.22rem; color: var(--titulo); margin: 0; }
.area-sub { font-size: .78rem; color: var(--texto-3); margin: var(--u) 0 0; }
.area-pc { text-align: right; }
.area-pc b { display: block; font-family: var(--mono); font-size: 1.5rem; color: var(--oro);
  line-height: 1; font-weight: 400; }
.area-pc span { font-size: .7rem; color: var(--texto-3); white-space: nowrap; }

.barra-fila { display: grid; grid-template-columns: 74px 1fr auto auto;
  align-items: center; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 2.5);
  font-family: var(--mono); font-size: .74rem; }
.barra-rotulo { color: var(--texto-2); }
.barra-riel { height: 14px; background: var(--tinta-900); border: 1px solid var(--tinta-500);
  border-radius: 3px; overflow: hidden; }
.barra-riel i { display: block; height: 100%; }
.barra-feature .barra-riel i { background: linear-gradient(90deg, var(--oro-hondo), var(--oro)); }
.barra-bug .barra-riel i { background: linear-gradient(90deg, #3E7A5C, var(--ok)); }
.barra-cuenta { color: var(--titulo); min-width: 52px; text-align: right; }
.barra-pc { color: var(--texto-3); min-width: 42px; text-align: right; }

.nota-medida { font-size: .8rem; color: var(--texto-3); border-left: 2px solid var(--oro-hondo);
  padding-left: calc(var(--u) * 3); margin-top: calc(var(--u) * 5); max-width: var(--medida);
  line-height: 1.6; }

/* el buscador: solo esconde lo ya dibujado */
.busc { display: flex; align-items: center; gap: calc(var(--u) * 3); flex-wrap: wrap;
  margin-bottom: calc(var(--u) * 4); }
.busc input { flex: 1 1 220px; max-width: 340px; background: var(--tinta-700);
  border: 1px solid var(--tinta-500); border-radius: 8px; font: inherit; font-size: .88rem;
  color: var(--texto); padding: calc(var(--u) * 2.2) calc(var(--u) * 3); }
.busc input:focus-visible { border-color: var(--oro); outline: none; }
.busc .cuenta { font-family: var(--mono); font-size: .74rem; color: var(--texto-3); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; }

/* ACORDEON POR PROYECTO -> Funciones/Fallas -> estado -> lineas */
details.proyecto, details.ver, details.v-proyecto { background: var(--tinta-700); border: var(--borde);
  border-radius: var(--radio); margin-bottom: calc(var(--u) * 3); overflow: hidden; }
details.proyecto[open], details.ver[open] { border-color: var(--oro-hondo); }
details.proyecto > summary, details.ver > summary, details.v-proyecto > summary {
  cursor: pointer; list-style: none;
  display: flex; flex-wrap: wrap; gap: calc(var(--u) * 3.5); align-items: baseline;
  padding: calc(var(--u) * 4) calc(var(--u) * 5); }
details.proyecto > summary::-webkit-details-marker,
details.ver > summary::-webkit-details-marker,
details.v-proyecto > summary::-webkit-details-marker { display: none; }
details.proyecto > summary::before, details.ver > summary::before,
details.v-proyecto > summary::before {
  content: '\25B8'; color: var(--oro); font-size: .8rem; }
details.proyecto[open] > summary::before, details.ver[open] > summary::before,
details.v-proyecto[open] > summary::before {
  content: '\25BE'; }
details.proyecto > summary:hover, details.ver > summary:hover,
details.v-proyecto > summary:hover { background: var(--tinta-600); }
.p-nombre { font-family: var(--serif); font-size: 1.14rem; color: var(--titulo); }
.p-cuenta, .v-n { margin-left: auto; font-family: var(--mono); font-size: .72rem;
  color: var(--texto-3); }
.p-cuerpo, .vcuerpo { padding: 0 calc(var(--u) * 5) calc(var(--u) * 4) calc(var(--u) * 6); }

.tipo { margin-top: calc(var(--u) * 4); }
.tipo > h4, .v-proyecto > h4 { font-family: var(--serif); font-size: 1.02rem;
  color: var(--oro); margin: 0 0 calc(var(--u) * 2);
  padding-bottom: var(--u); border-bottom: 1px solid var(--tinta-500); }
details.v-proyecto { margin-top: calc(var(--u) * 3); background: var(--tinta-800); }
details.v-proyecto[open] { border-color: var(--tinta-500); }
details.v-proyecto > summary { padding: calc(var(--u) * 3) calc(var(--u) * 4); }
details.v-proyecto .p-nombre { font-size: 1.02rem; }
details.v-proyecto > .p-cuerpo { padding: 0 calc(var(--u) * 4) calc(var(--u) * 3)
  calc(var(--u) * 5); }
details.v-proyecto .tipo:first-child { margin-top: calc(var(--u) * 2); }

.estado { margin-top: calc(var(--u) * 3); padding-left: calc(var(--u) * 3);
  border-left: 2px solid var(--tinta-500); }
.estado h5 { display: flex; align-items: center; gap: calc(var(--u) * 2);
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 400; margin: 0 0 var(--u); }
.estado .n { font-size: .66rem; color: var(--texto-3); border: 1px solid var(--tinta-500);
  border-radius: 20px; padding: 1px calc(var(--u) * 1.8); letter-spacing: 0; }
.g-prog { border-left-color: var(--aviso); } .g-prog h5 { color: var(--aviso); }
.g-bug  { border-left-color: var(--falla); } .g-bug h5  { color: var(--falla); }
.g-ok   { border-left-color: var(--ok); }    .g-ok h5   { color: var(--ok); }
.g-no   { border-left-color: var(--tinta-500); } .g-no h5 { color: var(--texto-3); }

ul.lin { list-style: none; margin: 0; padding: 0; }
ul.lin li { display: flex; gap: calc(var(--u) * 4); align-items: baseline;
  padding: calc(var(--u) * 1.6) 0; font-size: .93rem; line-height: 1.55; }
ul.lin .que { flex: 1 1 auto; color: var(--texto); }
ul.lin .fe { flex: 0 0 auto; font-family: var(--mono); font-size: .7rem;
  color: var(--texto-3); white-space: nowrap; }

.vnum { font-family: var(--mono); font-size: 1.05rem; color: var(--oro); }
.vtit { font-family: var(--serif); font-size: 1.14rem; color: var(--titulo); }
.vfe { font-family: var(--mono); font-size: .72rem; color: var(--texto-3); }
.v-resumen { font-size: .92rem; color: var(--texto-2); margin: 0; max-width: var(--medida); }

/* la ultima version, en la portada */
.ultima { display: block; background: var(--tinta-700); border: var(--borde);
  border-left: 2px solid var(--oro); border-radius: var(--radio);
  padding: calc(var(--u) * 5); text-decoration: none; color: inherit;
  transition: border-color var(--transicion), transform var(--transicion); }
.ultima:hover { border-color: var(--oro-hondo); transform: translateY(-2px); }
.ultima strong { display: block; font-family: var(--serif); font-size: 1.2rem;
  color: var(--titulo); margin: var(--u) 0 calc(var(--u) * 3); }
.ultima ul { list-style: none; margin: 0; padding: 0; }
.ultima li { position: relative; padding-left: calc(var(--u) * 4); font-size: .92rem;
  color: var(--texto-2); line-height: 1.6; }
.ultima li::before { content: '\2014'; position: absolute; left: 0; color: var(--texto-3); }
.ultima .mas { display: inline-block; margin-top: calc(var(--u) * 4); font-size: .86rem;
  color: var(--oro); }

/* ------------------------------- SOBRE ------------------------------- */
.linea-tiempo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 4); }
@media (max-width: 800px) { .linea-tiempo { grid-template-columns: 1fr; } }
.hito-t { border-top: 2px solid var(--tinta-500); padding-top: calc(var(--u) * 3); }
.hito-t:last-child { border-color: var(--oro); }
.hito-t .fecha { display: block; margin-bottom: var(--u); }
.hito-t p { font-size: .9rem; color: var(--texto-2); margin: 0; }
.flujo { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 2);
  margin: calc(var(--u) * 4) 0; }
.flujo-paso { font-family: var(--mono); font-size: .8rem; color: var(--texto);
  background: var(--tinta-700); border: var(--borde); border-radius: 8px;
  padding: calc(var(--u) * 2.5) calc(var(--u) * 4); }
.flujo-flecha { color: var(--oro-hondo); }
/* la tabla no encoge mas alla de su contenido: que scrollee ella, no la pagina */
.tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-creditos { width: 100%; min-width: 460px; border-collapse: collapse; font-size: .9rem; }
.tabla-creditos th, .tabla-creditos td { text-align: left; padding: calc(var(--u) * 3);
  border-bottom: 1px solid var(--tinta-500); vertical-align: top; }
.tabla-creditos th { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-3); font-weight: 400; }
.tabla-creditos td:first-child { color: var(--titulo); white-space: nowrap; }
.legal h3 { margin-top: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 3); font-size: 1.12rem; }
.legal p, .legal li { color: var(--texto-2); }
.legal ul { padding-left: calc(var(--u) * 5); max-width: var(--medida); }
.legal li { margin-bottom: calc(var(--u) * 2); }
.aviso-caja { background: var(--tinta-700); border: var(--borde); border-radius: var(--radio);
  padding: calc(var(--u) * 5); margin-top: calc(var(--u) * 4); }

/* ---- menu de exportar: los TRES formatos salen del mismo MusicXML (LF-032) ----
   <details> nativo: se abre y se cierra sin JS, y el teclado ya funciona solo. */
.exportar { position: relative; display: inline-block; }
.exportar > summary { list-style: none; cursor: pointer; }
.exportar > summary::-webkit-details-marker { display: none; }
.exportar-flecha { font-size: .7em; opacity: .8; }
.exportar[open] > summary .exportar-flecha { transform: rotate(180deg); display: inline-block; }
/* sin partitura cargada no hay nada que exportar */
.exportar.inactivo > summary { opacity: .4; cursor: not-allowed; pointer-events: none; }
.exportar-menu { position: absolute; right: 0; top: calc(100% + var(--u)); z-index: 20;
  min-width: 260px; background: var(--tinta-700); border: var(--borde);
  border-radius: var(--radio); padding: calc(var(--u) * 1.5);
  box-shadow: 0 10px 30px rgb(0 0 0 / .45); }
.exportar-menu button { display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: 8px; color: var(--titulo);
  font: inherit; font-size: .9rem; padding: calc(var(--u) * 2.5) calc(var(--u) * 3); }
.exportar-menu button:hover, .exportar-menu button:focus-visible { background: var(--tinta-500); color: var(--oro); }
.exportar-menu small { display: block; margin-top: 2px; color: var(--texto-3);
  font-size: .74rem; font-family: var(--mono); }
/* en pantalla angosta el menu no se sale por el borde */
@media (max-width: 560px) { .exportar-menu { right: auto; left: 0; min-width: min(260px, 78vw); } }