/* Componentes generales de la app (los del marco están en marco.css).
   Ordenados de lo general a lo particular: páginas → superficies → botones →
   formularios → estados → diálogos. */

/* ---------- Páginas ---------- */

.pagina {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--esp-6) var(--pad) var(--esp-7);
  display: grid;
  gap: var(--esp-6);
}

.pagina-angosta {
  max-width: 640px;
}

.pagina-encabezado {
  display: grid;
  gap: var(--esp-2);
}

.pagina-encabezado > .boton {
  justify-self: start;
  margin-top: var(--esp-2);
}

.pantalla-centrada {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--esp-5);
}

.icono {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* El tamaño grande de un ícono, para cuando va solo y tiene que verse. */
.icono-grande {
  width: 30px;
  height: 30px;
}

/* ---------- Superficies ---------- */

.card {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--r-card);
  padding: var(--esp-5);
  display: grid;
  gap: var(--esp-4);
}

.card-encabezado {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

.card-encabezado h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.card-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
}

.grilla-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--esp-4);
}

.card-splat {
  align-content: start;
  transition: border-color var(--transicion), transform var(--transicion);
}

.card-splat:hover {
  border-color: var(--borde-fuerte);
  transform: translateY(-2px);
}

.card-splat [data-borrar] {
  margin-left: auto;
}

.card-splat .card-pie a {
  margin-left: auto;
}

.vacio {
  justify-items: center;
  text-align: center;
  padding: var(--esp-7) var(--esp-5);
}

/* ---------- Estado (puntito de color) ---------- */

.punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--texto-3);
}

.punto-ok {
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
}

.punto-trabajando {
  background: var(--aviso);
  box-shadow: 0 0 8px var(--aviso);
  animation: latir 1.8s ease-in-out infinite;
}

.punto-error {
  background: var(--error);
  box-shadow: 0 0 8px var(--error);
}

/* La subida quedó a medias: el amarillo de "en camino", pero quieto (no avanza solo). */
.punto-pausa {
  background: var(--aviso);
}

@keyframes latir {
  50% {
    opacity: 0.45;
  }
}

/* Globito de ayuda: cuelga hacia abajo del contenedor, con la flechita apuntando al
   elemento que explica. Es un `<span class="tooltip">` de verdad y no un `::after`, así
   puede llevar la punta y entrar en dos renglones cuando el texto es largo.

     <div class="tooltip-container"> …lo que se explica… <span class="tooltip">Texto</span> </div>

   El contenedor es el que recibe el hover, no el elemento: hace falta cuando ese elemento
   recorta lo que se sale. Hoy lo usa la jerarquía del proyecto, para decir en qué anda un
   splat que todavía no está listo. */
.tooltip-container {
  position: relative;
}

.tooltip {
  --fondo-tip: var(--acento);
  position: absolute;
  z-index: 30;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 2 * var(--esp-2));
  padding: 0.35em 0.7em;
  border-radius: var(--r-tag);
  background: var(--fondo-tip);
  color: var(--texto);
  font-size: var(--t-chico);
  font-weight: var(--peso-regular);
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: var(--sombra-boton);
  transition: top 0.3s ease, opacity 0.3s ease, visibility 0.3s;
}

/* La punta: un cuadradito girado 45°, arriba, mordiendo el borde de la burbuja. */
.tooltip::before {
  content: "";
  position: absolute;
  top: -0.25em;
  left: 50%;
  width: 0.6em;
  height: 0.6em;
  transform: translateX(-50%) rotate(45deg);
  background: var(--fondo-tip);
}

.tooltip-container:hover .tooltip,
.tooltip-container:focus-within .tooltip {
  top: calc(100% + 0.45em);
  opacity: 1;
  visibility: visible;
  animation: tooltip-sacudida 500ms ease-in-out forwards;
}

/* El translateX va en cada paso: si no, la sacudida lo pisa y el globito salta a la derecha. */
@keyframes tooltip-sacudida {
  0% {
    transform: translateX(-50%) rotate(2deg);
  }
  50% {
    transform: translateX(-50%) rotate(-3deg);
  }
  70% {
    transform: translateX(-50%) rotate(3deg);
  }
  100% {
    transform: translateX(-50%) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tooltip-container:hover .tooltip,
  .tooltip-container:focus-within .tooltip {
    animation: none;
  }
}

/* ---------- Botones y tags ---------- */

/* Los botones son los de la landing: pastilla y la voz de la marca. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: 10px 22px;
  border-radius: var(--r-pastilla);
  border: 1.5px solid transparent;
  font-family: var(--fuente-marca);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--transicion), transform var(--transicion), border-color var(--transicion),
    background-color var(--transicion), color var(--transicion);
}

.boton:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.boton-chico {
  padding: 6px 12px;
  font-size: var(--t-chico);
}

.boton-primario {
  background: var(--texto);
  color: var(--texto-sobre-claro);
  box-shadow: var(--sombra-boton);
}

.boton-primario:hover:not(:disabled) {
  background: var(--celeste);
  transform: translateY(-1px);
}

.boton-secundario {
  background: none;
  color: var(--texto-2);
  padding-left: 0;
  padding-right: 0;
}

.boton-secundario:hover:not(:disabled) {
  color: var(--texto);
}

.boton-contorno {
  background: rgba(255, 255, 255, 0.04);
  color: var(--texto);
  border-color: var(--borde-fuerte);
}

.boton-contorno:hover:not(:disabled) {
  border-color: var(--celeste);
  background: rgba(255, 255, 255, 0.08);
}

.boton-peligro {
  background: var(--error);
  color: var(--texto-sobre-claro);
}

.boton-bloque {
  width: 100%;
}

.boton-icono {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 0;
  border-radius: var(--r-boton);
  background: none;
  color: var(--texto-2);
  cursor: pointer;
  text-decoration: none;
}

.boton-icono:hover {
  background: var(--panel-activo);
  color: var(--texto);
}

.boton-icono-chico {
  width: 26px;
  height: 26px;
}

.boton-icono-chico .icono {
  width: 15px;
  height: 15px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  padding: 3px 10px;
  border-radius: var(--r-tag);
  background: var(--texto);
  color: var(--texto-sobre-claro);
  font-size: var(--t-chico);
  font-weight: var(--peso-medium);
}

.tag-suave {
  background: var(--panel-activo);
  color: var(--texto-2);
}

.tag-error {
  background: rgba(255, 107, 107, 0.14);
  color: var(--error);
}

.texto-error {
  color: var(--error);
}

.tag .icono {
  width: 12px;
  height: 12px;
}

/* ---------- Avatares ---------- */

/* El círculo de la cuenta: iniciales o foto. `line-height: 1` y el `overflow` son lo que
   lo centra de verdad — sin eso, el interlineado de Saira empuja el texto hacia arriba y una
   foto sin recortar se apoya en una esquina. */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--acento);
  color: var(--texto);
  font-weight: var(--peso-semibold);
  font-size: 0.85rem;
  line-height: 1;
  text-align: center;
  flex: none;
}

/* El hueco donde se repinta el círculo cuando cambia la foto: no cuenta para el armado. */
[data-avatar] {
  display: contents;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.avatar-chico {
  width: 24px;
  height: 24px;
  font-size: 0.7rem;
}

.avatar-grande {
  width: 56px;
  height: 56px;
  background: var(--panel-activo);
  color: var(--texto-2);
}

.avatar-grande .icono {
  width: 28px;
  height: 28px;
}

/* ---------- Formularios ---------- */

.formulario {
  display: grid;
  gap: var(--esp-4);
}

.campo {
  display: grid;
  gap: var(--esp-2);
}

.campo label,
.campo-etiqueta {
  color: var(--texto);
  font-weight: var(--peso-medium);
  font-size: 0.85rem;
}

.campo .obligatorio {
  color: var(--texto-3);
  font-weight: var(--peso-regular);
}

.entrada {
  width: 100%;
  background: rgba(10, 21, 34, 0.55);
  border: 1px solid var(--borde);
  border-radius: var(--r-boton);
  padding: 10px 14px;
  color: var(--texto);
  transition: border-color var(--transicion), background-color var(--transicion);
}

.entrada::placeholder {
  color: var(--texto-3);
}

.entrada:focus {
  border-color: var(--celeste);
  background: rgba(10, 21, 34, 0.8);
  outline: none;
}

textarea.entrada {
  min-height: 80px;
  resize: vertical;
}

.campo.con-error .entrada {
  border-color: var(--error);
}

.campo-error {
  color: var(--error);
  font-size: var(--t-chico);
}

/* Zona para elegir un archivo (el input va escondido adentro). */
.zona-archivo {
  display: grid;
  place-items: center;
  gap: var(--esp-2);
  min-height: 120px;
  padding: var(--esp-5);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.02);
  color: var(--texto-2);
  text-align: center;
  cursor: pointer;
}

.zona-archivo:hover {
  border-color: var(--celeste);
  color: var(--texto);
}

.zona-archivo input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.zona-archivo span {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  overflow-wrap: anywhere;
}

/* ---------- Estados ---------- */

.aviso {
  border-radius: var(--r-boton);
  padding: var(--esp-3) var(--esp-4);
  background: var(--panel-activo);
  color: var(--texto-2);
}

.aviso-error {
  background: rgba(255, 107, 107, 0.1);
  color: var(--error);
}

/* Abajo y al medio: a la derecha están los botones que flotan en la galería y a la
   izquierda el nombre del splat en el visor. Va por encima de un diálogo abierto. */
.aviso-flotante {
  position: fixed;
  z-index: 300;
  left: var(--esp-4);
  right: var(--esp-4);
  bottom: var(--esp-5);
  width: fit-content;
  max-width: calc(100% - 2 * var(--esp-4));
  margin: 0 auto;
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--r-pastilla);
  background: var(--texto);
  color: var(--texto-sobre-claro);
  font-weight: var(--peso-medium);
  box-shadow: var(--sombra-boton);
  animation: aparecer 200ms ease;
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.lista-simple {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-2);
}

/* ---------- Diálogos ---------- */

.dialogo {
  border: 0;
  padding: 0;
  background: none;
  color: var(--texto-2);
  max-width: min(520px, 92vw);
  width: 100%;
  /* Lo que scrollea es el cuerpo de la caja, no el diálogo: sin esto, la caja que entra
     corrida unos pixeles le saca una barra de scroll por un instante. */
  overflow: visible;
}

.dialogo::backdrop {
  background: rgba(4, 12, 24, 0.72);
}

/* Entra apenas: un fundido corto, sin rebotes. */
.dialogo[open] .dialogo-caja {
  animation: dialogo-entra 200ms ease;
}

@keyframes dialogo-entra {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dialogo[open] .dialogo-caja {
    animation: none;
  }
}

.dialogo-ancho {
  max-width: min(1100px, 95vw);
}

.dialogo-ancho .dialogo-cuerpo {
  max-height: none;
  overflow: visible;
}

.visor-pdf {
  width: 100%;
  height: min(76vh, 900px);
  border: 0;
  border-radius: var(--r-tag);
  background: var(--fondo);
}

.dialogo-caja {
  background: var(--noche-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-card);
  box-shadow: var(--sombra-flotante);
  display: grid;
  gap: var(--esp-4);
  padding: var(--esp-5);
}

/* El rótulo chico que va arriba de un título, como en los paneles de la cabeza. */
.rotulo {
  font-family: var(--fuente-marca);
  font-size: var(--t-chico);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--celeste);
}

.dialogo-encabezado {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

.dialogo-titulo {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.dialogo-titulo h2 {
  overflow-wrap: anywhere;
}

/* Datos de a pares (Mi usuario): el rótulo chico arriba y el valor debajo. */
.ficha {
  margin: 0;
  display: grid;
  gap: var(--esp-3);
}

.ficha dt {
  font-size: var(--t-chico);
  color: var(--texto-3);
}

.ficha dd {
  margin: 0;
  color: var(--texto);
  overflow-wrap: anywhere;
}

/* La foto de la cuenta en "Mi usuario": el círculo grande (tocarlo elige otra) y sus dos botones. */
.mi-usuario-foto {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  margin-bottom: var(--esp-4);
  transition: opacity var(--transicion);
}

.mi-usuario-foto.ocupada {
  opacity: 0.5;
  pointer-events: none;
}

.mi-usuario-elegir {
  position: relative;
  cursor: pointer;
  border-radius: 50%;
}

.avatar-foto {
  width: 88px;
  height: 88px;
  font-size: 1.8rem;
}

.mi-usuario-lapiz {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--fondo);
  border-radius: 50%;
  background: var(--celeste);
  color: var(--fondo);
}

.mi-usuario-lapiz .icono {
  width: 15px;
  height: 15px;
}

.mi-usuario-elegir:hover .avatar-foto,
.mi-usuario-elegir:focus-within .avatar-foto {
  box-shadow: 0 0 0 3px var(--celeste);
}

.mi-usuario-acciones {
  display: grid;
  gap: var(--esp-2);
  justify-items: start;
}

.mi-usuario-acciones [hidden] {
  display: none;
}

/* Un link que es un botón: para lo que abre algo sin irse de donde se está. */
.enlace {
  border: 0;
  background: none;
  padding: 0;
  color: var(--celeste);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

.dialogo-encabezado .boton-icono {
  margin-left: auto;
}

/* Los símbolos que van antes de la cruz (el "?" del modo editor) la dejan pegada a ellos. */
.dialogo-encabezado .boton-icono + .boton-icono {
  margin-left: 0;
}

.dialogo-cuerpo {
  display: grid;
  gap: var(--esp-3);
  max-height: 60vh;
  /* En el teléfono `vh` cuenta la pantalla sin las barras del navegador: con muchas filas (Mover
     a…, OT-216) el pie con Cancelar quedaba debajo del borde. Lo visible (`dvh`) menos el
     título, el pie y los márgenes de la caja. */
  max-height: min(60vh, calc(100dvh - 13rem));
  overflow-y: auto;
}

/* Un texto que escribió el usuario, para leerlo entero: respeta sus saltos de renglón y parte
   las palabras que no entran. */
.descripcion-entera {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dialogo-pie {
  display: flex;
  justify-content: flex-end;
  gap: var(--esp-3);
}

.lista-galeria {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Una columna que no crece con el nombre más largo: ese se corta con "…" (OT-216). */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-1);
}

.opcion-galeria {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  width: 100%;
  padding: var(--esp-3);
  border: 1px solid var(--borde);
  border-radius: var(--r-boton);
  background: none;
  color: var(--texto-2);
  text-align: left;
  cursor: pointer;
}

.opcion-galeria:hover {
  background: var(--panel-activo);
  color: var(--texto);
}

/* La lista para elegir una carpeta ("Mover a"): cada una sangrada según cuán adentro está. */
.lista-carpetas .opcion-galeria {
  padding-left: calc(var(--esp-3) + var(--nivel, 0) * 20px);
}

.opcion-galeria:disabled {
  opacity: 0.5;
  cursor: default;
}

.opcion-galeria:disabled:hover {
  background: none;
  color: var(--texto-2);
}

.opcion-galeria-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Menú desplegable (componentes/menu.js) ---------- */

.menu {
  position: relative;
}

.menu-lista {
  position: absolute;
  right: 0;
  top: calc(100% + var(--esp-2));
  z-index: 10;
  min-width: 200px;
  margin: 0;
  padding: var(--esp-2);
  list-style: none;
  background: var(--noche);
  border: 1px solid var(--borde);
  border-radius: 16px;
  box-shadow: var(--sombra-flotante);
}

.menu-lista[hidden] {
  display: none;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  width: 100%;
  padding: var(--esp-2) var(--esp-3);
  border: 0;
  border-radius: var(--r-tag);
  background: none;
  color: var(--texto-2);
  text-decoration: none;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.menu-item:hover,
.menu-item.activo {
  background: var(--panel-activo);
  color: var(--texto);
}

/* Lo que no lleva tilde ni ícono deja el hueco, así los textos quedan alineados. */
.menu-item:not(.activo):not(.con-icono) {
  padding-left: calc(var(--esp-3) + 20px + var(--esp-2));
}

.menu-item-riesgo:hover {
  color: var(--error);
}

.menu-nota {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  max-width: 280px;
  margin-bottom: var(--esp-2);
  padding: var(--esp-2) var(--esp-3) var(--esp-3);
  border-bottom: 1px solid var(--borde);
  color: var(--texto-3);
  font-size: 0.85rem;
  line-height: 1.35;
}

.menu-nota strong {
  display: block;
  color: var(--texto);
  font-weight: 600;
}

.menu-nota svg {
  flex: none;
  margin-top: 2px;
}

.menu-separador {
  height: 1px;
  margin: var(--esp-2) var(--esp-2);
  background: var(--borde);
}

/* ---------- El engranaje del visor (componentes/configuracion.js) ---------- */

.config-panel {
  width: 280px;
  padding: var(--esp-3) var(--esp-4);
}

.config-seccion + .config-seccion {
  margin-top: var(--esp-3);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--borde);
}

.config-tutorial {
  width: 100%;
}

.config-titulo {
  margin: 0 0 var(--esp-2);
  color: var(--texto-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.config-fila {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px var(--esp-2);
  padding: var(--esp-1) 0;
  color: var(--texto-2);
  font-size: 0.88rem;
}

.config-valor {
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.config-fila input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  accent-color: var(--acento);
  cursor: pointer;
}

.config-fila input[type="range"]:disabled {
  cursor: default;
  opacity: 0.4;
}

/* ---------- Tabla (panel de operación) ---------- */

.tabla-contenedor {
  overflow-x: auto;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
}

.tabla th {
  text-align: left;
  color: var(--texto-3);
  font-weight: var(--peso-medium);
  font-size: var(--t-chico);
  padding: var(--esp-2) var(--esp-3);
  border-bottom: 1px solid var(--borde);
}

.tabla td {
  padding: var(--esp-3);
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
}

.tabla td:first-child {
  color: var(--texto);
}


/* Tarjeta que se toca entera: el link de "Abrir" se estira sobre toda la superficie y lo
   que tiene que seguir siendo clickeable aparte (el botón de borrar) se levanta encima. */
.card-link {
  position: relative;
}

.card-link-abrir::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card-link [data-borrar] {
  position: relative;
  z-index: 1;
}

/* ---------- La ventana de los tutoriales (componentes/tutorial.js) ----------
   Las tablas y sus dibujos están en tutorial.css. */

.dialogo-tutorial {
  max-width: min(920px, 95vw);
}

/* Las ventanas que piden toda la atención (los tutoriales, las del modo editor, las capas y los
   avisos antes de compartir o borrar) desenfocan lo que tienen detrás. */
.dialogo-desenfoque::backdrop {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* La hoja: una ventana que sube desde abajo, a lo ancho del teléfono (hasta 520 px), y que se
   corre por dentro. La usan el menú de tres rayas del visor (verOpciones) y Ordenar y Ver como
   de la galería en el teléfono (verOrdenYVista). Lo que tiene lista adentro (el visor) la abre en
   la misma hoja, con la flecha para volver al lado del título. */
.dialogo-hoja {
  max-width: min(520px, 100vw);
  margin: auto auto 0;
}

.dialogo-hoja .dialogo-caja {
  grid-template-rows: auto minmax(0, 1fr);
  max-height: 88dvh;
  padding: var(--esp-4) var(--esp-4) calc(var(--esp-4) + env(safe-area-inset-bottom, 0px));
  border-bottom: 0;
  border-radius: var(--r-card) var(--r-card) 0 0;
}

.dialogo-hoja[open] .dialogo-caja {
  animation: hoja-sube 240ms ease;
}

@keyframes hoja-sube {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dialogo-hoja[open] .dialogo-caja {
    animation: none;
  }
}

/* Lo que se corre es el cuerpo entero: la hoja ya tiene su tope. Sin barra, como el tutorial:
   con el dedo se corre igual. */
.dialogo-hoja .dialogo-cuerpo {
  max-height: none;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.dialogo-hoja .dialogo-cuerpo::-webkit-scrollbar {
  display: none;
}

/* La flecha para volver va antes del título; la cruz sigue en la otra punta. */
.dialogo-hoja [data-atras-hoja] {
  margin-left: 0;
}

.dialogo-hoja [data-atras-hoja][hidden] {
  display: none;
}

/* Las opciones de la hoja de la galería: la elegida, marcada como en los chips de la barra. */
.hoja-grupo {
  display: grid;
  gap: var(--esp-2);
}

.hoja-grupo + .hoja-grupo {
  margin-top: var(--esp-2);
}

.hoja-grupo .opcion-galeria[aria-pressed="true"] {
  border-color: var(--celeste);
  background: var(--panel-activo);
  color: var(--texto);
}

/* En una pantalla baja todavía se puede correr, pero sin la barra. */
.tut {
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  scrollbar-width: none;
}

.tut::-webkit-scrollbar {
  display: none;
}

/* La tabla al medio, la flecha para volver a la izquierda y la de seguir a la derecha. */
.tut-pagina {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: var(--esp-5) var(--esp-4);
}

.tut-pagina[hidden] {
  display: none;
}

.tut-pagina .tut-grupo {
  grid-column: 2;
  grid-row: 1;
}

.tut-pasar {
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--acento);
  color: #fff;
  box-shadow: 0 6px 18px rgba(30, 111, 224, 0.4);
  cursor: pointer;
  transition: background-color var(--transicion), transform var(--transicion);
}

.tut-pasar:hover {
  background: var(--acento-fuerte);
  transform: scale(1.06);
}

.tut-pasar:focus-visible {
  outline: 2px solid var(--celeste);
  outline-offset: 3px;
}

.tut-pasar .icono {
  width: 24px;
  height: 24px;
}

.tut-volver {
  grid-column: 1;
}

.tut-seguir {
  grid-column: 3;
}

.tut-pie {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

/* "No volver a mostrar" es texto, en la otra punta del pie: que no se confunda con Continuar. */
.tut-no-volver {
  margin-right: auto;
  padding: var(--esp-1) 0;
  border: 0;
  background: none;
  color: var(--texto-3);
  font: inherit;
  font-size: var(--t-chico);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.tut-no-volver:hover {
  color: var(--texto-2);
}

@media (max-width: 600px) {
  /* La tabla ocupa el ancho y las flechas van debajo, cada una en su punta. */
  .tut-pagina {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
  }

  .tut-pagina .tut-grupo {
    grid-column: 1 / -1;
  }

  .tut-pasar {
    grid-row: 2;
  }

  .tut-pie {
    grid-row: 3;
  }

  .tut {
    padding: var(--esp-4);
  }
}