/* La galería (pantallas/galeria.js) y la ventana de "+ Nuevo" (componentes/nuevo-splat.js).

   Las tarjetas son las de "Comenzá con tu primer splat" de la landing: un vidrio apenas más
   claro que el fondo azul noche, borde fino, esquinas bien redondeadas y la imagen adentro
   con su propio radio.

   Orden: herramientas de la barra → ruta → grilla y tarjetas → carpetas → lista de detalle →
   arrastrar → botones flotantes → menú de una tarjeta → ventana de "+ Nuevo". */

/* ---------- Herramientas de la barra: ordenar, ver como, buscar ---------- */

.barra-grupo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-width: 0;
}

.barra-rotulo {
  font-family: var(--fuente-marca);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-3);
  white-space: nowrap;
}

.chips {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Botones sutiles: no pesan hasta que se los toca; el elegido queda apenas marcado. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-pastilla);
  background: none;
  color: var(--texto-2);
  font-size: 0.88rem;
  font-weight: var(--peso-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion);
}

.chip:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--texto);
}

.chip[aria-pressed="true"],
.chip[aria-expanded="true"] {
  border-color: var(--borde);
  background: rgba(255, 255, 255, 0.1);
  color: var(--texto);
}

.chip .icono {
  width: 15px;
  height: 15px;
}

/* El desplegable de "Ver como" cuelga de la izquierda de la barra: abre hacia la derecha. */
.barra-izq .menu-lista {
  left: 0;
  right: auto;
  min-width: 170px;
}

/* Las tres rayitas de Ordenar y Ver como: solo en el teléfono, a la izquierda del buscador
   (dialogos.js: verOrdenYVista). Ahí los chips y el menú de la barra no van, y la barra queda en
   un renglón, pegada a la cabeza. */
.barra-opciones {
  display: none;
}

@media (max-width: 767px) {
  .barra-izq:has(.barra-grupo) {
    display: none;
  }

  .barra-opciones {
    display: inline-grid;
    color: var(--texto);
  }

  [data-buscar]:has(.barra-opciones) {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
  }

  [data-buscar]:has(.barra-opciones) .buscador {
    flex: 1;
    min-width: 0;
  }
}

.buscador {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  width: clamp(150px, 22vw, 280px);
  padding: 0 14px;
  border: 1px solid var(--borde);
  border-radius: var(--r-pastilla);
  background: rgba(10, 21, 34, 0.45);
  color: var(--texto-3);
  transition: border-color var(--transicion), background-color var(--transicion);
}

.buscador:focus-within {
  border-color: var(--celeste);
  background: rgba(10, 21, 34, 0.75);
  color: var(--celeste);
}

.buscador .icono {
  width: 17px;
  height: 17px;
}

.buscador input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--texto);
  outline: none;
}

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

.buscador input::-webkit-search-cancel-button {
  filter: invert(1) opacity(0.6);
  cursor: pointer;
}

/* ---------- La pantalla ---------- */

.galeria {
  max-width: calc(var(--ancho-pagina) + 2 * var(--pad));
  margin: 0 auto;
  /* Abajo queda lugar para los botones que flotan: la última fila no se esconde detrás. */
  padding: var(--esp-5) var(--pad) 140px;
}

.galeria-nota {
  padding: var(--esp-5) 0;
}

.galeria-vacia {
  max-width: 560px;
  margin: clamp(2rem, 8vh, 6rem) auto 0;
}

.galeria-vacia h2 {
  font-size: 1.7rem;
}

/* ---------- La ruta ---------- */

.migas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--esp-1);
  min-height: 0;
  color: var(--texto-3);
}

.migas:not(:empty) {
  margin: 0 calc(-1 * var(--esp-2)) var(--esp-4);
}

.migas .icono {
  width: 14px;
  height: 14px;
}

.miga {
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-pastilla);
  color: var(--texto-2);
  font-family: var(--fuente-titulo);
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion);
}

a.miga:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--texto);
}

.miga-actual {
  color: var(--texto);
}

/* ---------- La grilla ----------
   "Grande" entra de a cuatro por fila en una pantalla de escritorio, y de a menos a medida
   que la pantalla se angosta. "Pequeño" entra de a seis. */

.galeria-grilla {
  --columnas: 4;
  display: grid;
  grid-template-columns: repeat(var(--columnas), minmax(0, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.5rem);
}

.galeria-grilla.vista-pequeno {
  --columnas: 6;
  gap: clamp(0.6rem, 1.1vw, 1rem);
}

@media (max-width: 1180px) {
  .galeria-grilla {
    --columnas: 3;
  }

  .galeria-grilla.vista-pequeno {
    --columnas: 4;
  }
}

@media (max-width: 820px) {
  .galeria-grilla {
    --columnas: 2;
  }

  .galeria-grilla.vista-pequeno {
    --columnas: 3;
  }
}

@media (max-width: 480px) {
  .galeria-grilla {
    --columnas: 1;
  }

  .galeria-grilla.vista-pequeno {
    --columnas: 2;
  }
}

/* ---------- Tarjetas ---------- */

.tarjeta {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-3) var(--esp-4);
  border: 1px solid var(--borde);
  border-radius: var(--r-card);
  background: var(--panel);
  /* Se agarran y se arrastran: ni se selecciona el texto ni salta el menú de iOS. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease,
    opacity 180ms ease;
}

.tarjeta:hover,
.tarjeta.con-menu,
.tarjeta:focus-within {
  /* Por encima de sus vecinas: la lista que despliega una carpeta cae sobre la fila de abajo. */
  z-index: 5;
  border-color: var(--borde-fuerte);
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(4, 12, 24, 0.28);
}

/* La tarjeta entera abre el splat o la carpeta: el link se estira por encima de todo, y lo
   que tiene que tocarse aparte (los tres puntos) se levanta arriba de él. */
.tarjeta-enlace {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  cursor: pointer;
}

.tarjeta-enlace:focus-visible {
  outline-offset: 3px;
}

.tarjeta-imagen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 14px;
  background-color: #1b3f73;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1.4px),
    linear-gradient(135deg, #1f4a85, #17386a 60%, #122d57);
  background-size: 18px 18px, auto;
}

.tarjeta-imagen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.tarjeta:hover .tarjeta-imagen img {
  transform: scale(1.04);
}

/* Sin imagen todavía: el cubo, sobre el mismo fondo de puntos que los huecos de la landing. */
.tarjeta-hueco {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.4);
}

.tarjeta-hueco .icono {
  width: 26%;
  height: auto;
  max-width: 56px;
  stroke-width: 1.4;
}

/* Mientras se procesa: la imagen apagada, con un velo azul, y el anillo de avance encima
   (componentes/etapas.js: `anillo`). Cuando termina, la tarjeta se redibuja a color. */
.tarjeta-proceso .tarjeta-imagen img {
  filter: grayscale(1) brightness(0.62);
}

.tarjeta-proceso .tarjeta-imagen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(14, 35, 67, 0.5), rgba(10, 21, 34, 0.62));
  pointer-events: none;
}

.tarjeta-proceso .tarjeta-hueco {
  opacity: 0.35;
}

.tarjeta-avance {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  /* Tocarlo abre el splat, como el resto de la tarjeta. */
  pointer-events: none;
}

.tarjeta-avance .anillo {
  --grosor: 6px;
  width: clamp(54px, 30%, 84px);
  filter: drop-shadow(0 4px 12px rgba(4, 12, 24, 0.5));
}

.tarjeta-avance .anillo::before {
  /* Lo que falta, claro sobre la imagen oscura: que el avance se lea de lejos. */
  background: conic-gradient(var(--celeste) calc(var(--p) * 1%), rgba(255, 255, 255, 0.22) 0);
}

.tarjeta-avance .anillo-espera::before {
  background: conic-gradient(var(--celeste) 0 22%, rgba(255, 255, 255, 0.22) 0);
}

.tarjeta-avance .anillo-valor {
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  text-shadow: 0 1px 6px rgba(4, 12, 24, 0.7);
}

/* En "Detalle" el anillo va chico y sin número adentro, a la derecha de la descripción. */
.tarjeta-avance-fila {
  display: none;
}

.tarjeta-avance-fila .anillo {
  --grosor: 4px;
  width: 26px;
  margin: 0;
}

.tarjeta-avance-fila .anillo-valor {
  display: none;
}

/* El estado solo se dice cuando no está listo: una tarjeta lista no lleva nada encima. */
.tarjeta-estado {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 9px;
  border-radius: var(--r-pastilla);
  background: var(--velo-fuerte);
  color: var(--texto);
  font-size: var(--t-chico);
  font-weight: var(--peso-medium);
}

/* Editado con el modo editor: arriba a la derecha de la imagen. En la lista de detalle, donde
   la imagen es chica, queda el lápiz y lo dice el renglón de la fecha. */
.tarjeta-editado {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 6px;
  border-radius: var(--r-pastilla);
  background: var(--acento);
  color: #fff;
  font-size: var(--t-chico);
  font-weight: var(--peso-medium);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.tarjeta-editado .icono {
  width: 13px;
  height: 13px;
}

.tarjeta-editado-texto {
  display: none;
}

.vista-detalle .tarjeta-editado {
  right: 6px;
  top: 6px;
  padding: 4px;
}

.vista-detalle .tarjeta-editado-texto {
  display: inline;
}

.tarjeta-pie {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  padding: 0 var(--esp-1);
  min-width: 0;
}

.tarjeta-texto {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.tarjeta-texto h3 {
  font-size: 1.2rem;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tarjeta-texto p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La descripción solo se lee en la lista de detalle: ahí entran dos renglones y, si el splat
   tiene una, es un botón que la abre entera. En las demás vistas está en "Ver descripción",
   en el menú de la tarjeta. */
.tarjeta-detalle {
  display: none;
}

button.tarjeta-detalle {
  position: relative;
  z-index: 2;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-chico);
  text-align: left;
  cursor: pointer;
}

button.tarjeta-detalle:hover {
  color: var(--texto);
}

/* Los accesos directos de la tarjeta, al lado de los tres puntos: cada vista muestra los
   suyos. En "Grande", descargar y compartir; en "Detalle", editar, compartir y mover. En
   "Pequeño" no hay lugar: queda el menú. */
.tarjeta-accesos {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 2px;
}

.tarjeta-accesos .boton-icono {
  display: none;
  border-radius: 50%;
}

.vista-grande .acceso-grande,
.vista-detalle .acceso-detalle {
  display: grid;
}

/* Los tres puntos, y los accesos de "Grande", aparecen al acercarse, al enfocar con teclado o
   con el menú abierto. En "Detalle" los accesos están siempre: la fila tiene lugar. */
.tarjeta-mas {
  position: relative;
  z-index: 2;
  border-radius: 50%;
}

.tarjeta-mas,
.vista-grande .tarjeta-accesos {
  opacity: 0;
  transition: opacity var(--transicion), background-color var(--transicion);
}

.tarjeta:hover .tarjeta-mas,
.tarjeta.con-menu .tarjeta-mas,
.tarjeta-mas:focus-visible,
.vista-grande .tarjeta:hover .tarjeta-accesos,
.vista-grande .tarjeta.con-menu .tarjeta-accesos,
.vista-grande .tarjeta-accesos:focus-within {
  opacity: 1;
}

@media (hover: none) {
  .tarjeta-mas,
  .vista-grande .tarjeta-accesos {
    opacity: 1;
  }
}

/* Con el dedo, los tres puntos y los accesos son chicos para apuntar: un milímetro afuera abría
   el splat. Su zona de toque se agranda 10 px alrededor, sin cambiar cómo se ven. */
@media (pointer: coarse) {
  .tarjeta-mas::after,
  .tarjeta-accesos .boton-icono::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
  }

  .tarjeta-accesos .boton-icono {
    position: relative;
  }
}

.vista-pequeno .tarjeta {
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-2) var(--esp-3);
  border-radius: 18px;
}

.vista-pequeno .tarjeta-imagen {
  border-radius: 12px;
}

.vista-pequeno .tarjeta-texto h3 {
  font-size: 1rem;
}

.vista-pequeno .tarjeta-avance .anillo {
  --grosor: 5px;
  width: clamp(40px, 34%, 60px);
}

.vista-pequeno .tarjeta-estado {
  left: 6px;
  top: 6px;
  padding: 2px 8px 2px 7px;
}

/* ---------- Carpetas ----------
   Una carpeta es una tarjeta con forma de carpeta: sin el recuadro de las demás, con la
   solapa arriba a la izquierda y, adentro, lo primero que guarda. */

.tarjeta-carpeta {
  border-color: transparent;
  background: none;
}

.tarjeta-carpeta:hover,
.tarjeta-carpeta.con-menu,
.tarjeta-carpeta:focus-within {
  border-color: transparent;
  background: none;
  box-shadow: none;
}

.carpeta-forma {
  --carpeta-borde: rgba(255, 226, 150, 0.7);
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  grid-template-rows: 13% minmax(0, 1fr);
  filter: drop-shadow(0 12px 22px rgba(4, 12, 24, 0.26));
  transition: filter 180ms ease;
}

/* La solapa: un trapecio con la esquina de afuera redondeada, pegado al cuerpo. */
.carpeta-solapa {
  width: 44%;
  margin-bottom: -1px;
  border: 1px solid var(--carpeta-borde);
  border-bottom: 0;
  border-radius: 12px 16px 0 0;
  background: linear-gradient(180deg, rgba(var(--carpeta-rgb), 0.95), rgba(var(--carpeta-rgb), 0.82));
  clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
}

.carpeta-cuerpo {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 9px;
  overflow: hidden;
  border: 1px solid var(--carpeta-borde);
  border-radius: 0 16px 16px 16px;
  background: linear-gradient(165deg, rgba(var(--carpeta-rgb), 0.86), rgba(var(--carpeta-rgb), 0.66) 70%);
}

.tarjeta-carpeta:hover .carpeta-forma {
  --carpeta-borde: #fff3cf;
  filter: drop-shadow(0 18px 30px rgba(4, 12, 24, 0.36));
}

.carpeta-cuerpo img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: 9px;
}

.carpeta-con-0 {
  place-items: center;
}

.carpeta-icono {
  width: 30%;
  height: auto;
  max-width: 64px;
  color: rgba(74, 52, 8, 0.6);
  stroke-width: 1.3;
}

.carpeta-con-2,
.carpeta-con-3,
.carpeta-con-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.carpeta-con-3,
.carpeta-con-4 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* Con tres, la primera ocupa todo el alto de su columna. */
.carpeta-con-3 img:first-child {
  grid-row: span 2;
}

/* Lo que tiene adentro: una ventana sutil que se extiende desde la carpeta al pasarle el
   cursor, y se va igual de suave. Solo donde hay cursor, y nunca mientras se arrastra. */
.carpeta-lista {
  position: absolute;
  top: calc(100% - var(--esp-2));
  left: var(--esp-2);
  right: var(--esp-2);
  z-index: 20;
  display: grid;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: var(--noche);
  box-shadow: var(--sombra-flotante);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}

@media (hover: hover) {
  .tarjeta-carpeta:hover .carpeta-lista {
    opacity: 1;
    visibility: visible;
    transform: none;
    /* Espera un instante: cruzar la grilla con el cursor no abre todas las carpetas. */
    transition-delay: 320ms, 320ms, 320ms;
  }
}

.galeria.arrastrando .carpeta-lista,
.tarjeta-carpeta.con-menu .carpeta-lista {
  opacity: 0;
  visibility: hidden;
}

.carpeta-lista ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.carpeta-lista li {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-width: 0;
  color: var(--texto);
}

.carpeta-lista li .icono {
  width: 14px;
  height: 14px;
  color: var(--carpeta);
}

.carpeta-lista-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
}

/* ---------- Detalle: una lista, con lo que no entra en una tarjeta ---------- */

.galeria-grilla.vista-detalle {
  --columnas: 1;
  gap: var(--esp-2);
}

.vista-detalle .tarjeta {
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: var(--esp-4);
  padding: var(--esp-2) var(--esp-3) var(--esp-2) var(--esp-2);
  border-radius: 18px;
}

.vista-detalle .tarjeta:hover {
  transform: none;
}

.vista-detalle .tarjeta-imagen {
  border-radius: 12px;
}

.vista-detalle .tarjeta-pie {
  align-items: center;
  gap: var(--esp-4);
  padding: 0;
}

.vista-detalle .tarjeta-texto {
  flex: 0 1 32%;
}

.vista-detalle .tarjeta-detalle {
  display: -webkit-box;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--texto-2);
}

.vista-detalle .tarjeta-avance {
  display: none;
}

.vista-detalle .tarjeta-avance-fila {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}

.vista-detalle .tarjeta-estado {
  left: 6px;
  top: 6px;
  padding: 2px 8px 2px 7px;
  font-size: 0.7rem;
}

.vista-detalle .tarjeta-carpeta .tarjeta-pie {
  justify-content: space-between;
}

.vista-detalle .carpeta-lista {
  left: 148px;
  right: auto;
  width: min(360px, calc(100% - 160px));
}

@media (max-width: 640px) {
  .vista-detalle .tarjeta {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--esp-3);
  }

  /* En el teléfono la fila no da para la descripción ni para los accesos: queda el menú. */
  .vista-detalle .tarjeta-detalle,
  .vista-detalle .tarjeta-accesos {
    display: none;
  }

  .vista-detalle .tarjeta-texto {
    flex: 1;
  }
}

/* ---------- Arrastrar ---------- */

/* La tarjeta que viaja con el puntero: una copia, por encima de todo. */
.fantasma {
  position: fixed;
  z-index: 200;
  margin: 0;
  pointer-events: none;
  opacity: 0.94;
  border-color: var(--celeste);
  box-shadow: 0 28px 50px rgba(4, 12, 24, 0.5);
  transition: none;
  will-change: transform;
}

.fantasma .carpeta-lista,
.fantasma .tarjeta-accesos,
.fantasma .tarjeta-mas {
  display: none;
}

/* Varias que viajan juntas: la copia va apilada sobre otras dos y lleva la cuenta. El fondo es
   opaco para que la pila se lea: con el vidrio de la tarjeta se veía lo de atrás. */
.fantasma-grupo {
  opacity: 1;
  background: var(--panel-activo);
  box-shadow:
    9px 9px 0 -1px var(--panel-activo),
    9px 9px 0 0 var(--celeste),
    18px 18px 0 -1px var(--panel-solido),
    18px 18px 0 0 var(--celeste-suave),
    0 34px 54px rgba(4, 12, 24, 0.55);
}

.fantasma-cuenta {
  position: absolute;
  z-index: 3;
  top: -12px;
  right: -12px;
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: var(--r-pastilla);
  background: var(--celeste);
  color: var(--texto-sobre-claro);
  font-family: var(--fuente-marca);
  font-size: 0.9rem;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(4, 12, 24, 0.45);
}

/* ---------- Elegir varias ----------
   El recuadro que se arrastra sobre el fondo y las tarjetas que quedaron elegidas. */

.lazo {
  position: fixed;
  z-index: 150;
  border: 1px solid var(--celeste);
  border-radius: 6px;
  background: var(--celeste-suave);
  pointer-events: none;
}

.tarjeta.seleccionada {
  border-color: var(--celeste);
  background: var(--acento-suave);
  box-shadow: 0 0 0 2px var(--celeste);
}

/* El tilde de la elegida, arriba a la derecha: un círculo celeste (::after) con la marca
   dibujada encima (::before). */
.tarjeta.seleccionada::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -9px;
  right: -9px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--celeste);
  box-shadow: 0 4px 12px rgba(4, 12, 24, 0.45);
  pointer-events: none;
}

.tarjeta.seleccionada::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: -3px;
  right: 1px;
  width: 6px;
  height: 11px;
  border: solid var(--texto-sobre-claro);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(40deg);
  pointer-events: none;
}

/* La capa que la lleva: no arma caja, solo le pone a la copia la vista de la galería
   (`vista-detalle`, `vista-pequeno`) para que se dibuje igual que la tarjeta que se agarró. */
.fantasma-capa {
  display: contents;
}

/* La que quedó en su lugar mientras tanto. */
.tarjeta.arrastrada {
  opacity: 0.3;
  transform: none;
  box-shadow: none;
}

.galeria.arrastrando,
.galeria.arrastrando .tarjeta-enlace {
  cursor: grabbing;
}

.galeria.arrastrando .tarjeta:hover {
  transform: none;
}

/* Soltar acá es entrar (a una carpeta) o juntarse (con otro splat). */
.tarjeta.soltar-dentro {
  border-color: var(--celeste);
  background: var(--celeste-suave);
  transform: scale(1.03);
  box-shadow: 0 0 0 3px var(--celeste-suave);
}

.tarjeta-carpeta.soltar-dentro {
  background: none;
  box-shadow: none;
}

.tarjeta-carpeta.soltar-dentro .carpeta-forma {
  --carpeta-borde: #fff;
  filter: drop-shadow(0 0 14px rgba(var(--carpeta-rgb), 0.7));
}

.miga.soltar-dentro {
  border-color: var(--celeste);
  background: var(--celeste-suave);
  color: var(--texto);
}

/* Soltar acá es cambiar de posición: una raya celeste dice de qué lado queda. */
.tarjeta.soltar-antes::before,
.tarjeta.soltar-despues::before {
  content: "";
  position: absolute;
  top: 6%;
  bottom: 6%;
  width: 4px;
  border-radius: 4px;
  background: var(--celeste);
  box-shadow: 0 0 12px rgba(169, 210, 255, 0.8);
}

.tarjeta.soltar-antes::before {
  left: calc(-0.5 * clamp(0.9rem, 1.6vw, 1.5rem) - 2px);
}

.tarjeta.soltar-despues::before {
  right: calc(-0.5 * clamp(0.9rem, 1.6vw, 1.5rem) - 2px);
}

.vista-detalle .tarjeta.soltar-antes::before,
.vista-detalle .tarjeta.soltar-despues::before {
  top: auto;
  bottom: auto;
  left: 2%;
  right: 2%;
  width: auto;
  height: 4px;
}

.vista-detalle .tarjeta.soltar-antes::before {
  top: -6px;
}

.vista-detalle .tarjeta.soltar-despues::before {
  bottom: -6px;
}

/* ---------- Los dos botones que flotan ---------- */

.flotantes {
  position: fixed;
  right: clamp(1rem, 3vw, 2.25rem);
  bottom: calc(clamp(1rem, 3vw, 2.25rem) + env(safe-area-inset-bottom, 0px));
  z-index: 35;
  display: grid;
  justify-items: center;
  gap: var(--esp-3);
}

.flotante {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--celeste);
  box-shadow: 0 0 0 4px var(--celeste-suave), 0 14px 30px rgba(4, 12, 24, 0.45);
  color: var(--noche);
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.flotante .icono {
  width: 28px;
  height: 28px;
  stroke-width: 2.4;
  transition: transform 260ms ease;
}

.flotante:hover {
  background: #fff;
  box-shadow: 0 0 0 6px rgba(169, 210, 255, 0.34), 0 16px 34px rgba(4, 12, 24, 0.5);
  transform: translateY(-2px);
}

.flotante:hover > .icono {
  transform: rotate(90deg);
}

/* El de la carpeta es el segundo: más chico y sin el celeste lleno. */
.flotante-chico {
  width: 50px;
  height: 50px;
  border: 1px solid var(--borde-fuerte);
  background: var(--noche-2);
  box-shadow: 0 12px 26px rgba(4, 12, 24, 0.45);
  color: var(--texto);
}

.flotante-chico .icono {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.flotante-chico:hover {
  border-color: var(--celeste);
  background: var(--panel-activo);
  box-shadow: 0 14px 30px rgba(4, 12, 24, 0.5);
}

.flotante-chico:hover > .icono {
  transform: none;
}

/* Qué hace cada uno: el nombre aparece a su izquierda al acercarse. */
.flotante-rotulo {
  position: absolute;
  right: calc(100% + var(--esp-3));
  top: 50%;
  padding: 5px 12px;
  border-radius: var(--r-pastilla);
  background: var(--noche);
  border: 1px solid var(--borde);
  color: var(--texto);
  font-family: var(--fuente-marca);
  font-size: var(--t-chico);
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translate(6px, -50%);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.flotante:hover .flotante-rotulo,
.flotante:focus-visible .flotante-rotulo {
  opacity: 1;
  transform: translate(0, -50%);
}

/* ---------- El menú de una tarjeta ---------- */

.menu-contexto {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  z-index: 60;
  min-width: 200px;
  animation: contexto-entra 140ms ease;
}

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

/* ---------- La ventana de "+ Nuevo" ---------- */

.dialogo-nuevo {
  max-width: min(780px, 94vw);
}

.dialogo-medio {
  max-width: min(720px, 94vw);
}

.nuevo-cuerpo {
  gap: var(--esp-4);
  max-height: min(64vh, 640px);
  /* El foco de los campos no se recorta contra el borde del scroll. */
  padding: 2px;
}

.nuevo-pie {
  align-items: center;
}

/* Qué se filmó: Objeto o Sala, una pastilla de dos con la elegida en el acento (como el
   switch de los modos del visor). Son radios de verdad: un toque cambia y el teclado anda. */
.tipo-splat {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* "Crear splat" sin Objeto ni Sala elegido. */
.tipo-splat .falta {
  color: var(--error);
  font-weight: 600;
}

.tipo-opciones {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  justify-self: start;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--borde);
  border-radius: var(--r-pastilla);
  background: rgba(10, 21, 34, 0.55);
}

.tipo-opcion {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  height: 38px;
  padding: 0 var(--esp-4) 0 var(--esp-3);
  border-radius: var(--r-pastilla);
  color: var(--texto-2);
  font-family: var(--fuente-marca);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transicion), color var(--transicion);
}

.campo .tipo-opcion {
  color: var(--texto-2);
  font-size: 0.82rem;
  font-weight: 700;
}

.tipo-opcion input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.tipo-opcion .icono {
  width: 19px;
  height: 19px;
}

.campo .tipo-opcion:hover {
  color: var(--texto);
}

.campo .tipo-opcion:has(input:checked) {
  background: var(--acento);
  color: #fff;
  box-shadow: 0 4px 12px rgba(30, 111, 224, 0.4);
}

.tipo-opcion:has(input:focus-visible) {
  outline: 2px solid var(--celeste);
  outline-offset: 2px;
}

.tipo-opcion:has(input:disabled) {
  cursor: default;
  opacity: 0.6;
}

/* Tres opciones en un teléfono angosto: un poco menos de aire para que entren en un renglón. */
@media (max-width: 420px) {
  .tipo-opcion {
    gap: var(--esp-1);
    padding: 0 var(--esp-3) 0 var(--esp-2);
    letter-spacing: 0.02em;
  }
}

.nuevo-nota {
  flex: 1;
  min-width: 0;
}

/* Los videos, uno al lado del otro. La rueda del mouse los corre de costado mientras el
   cursor está acá adentro (lo hace el JS); afuera, la rueda mueve la ventana. */
.carrusel {
  display: flex;
  align-items: stretch;
  gap: var(--esp-3);
  margin: 0;
  padding: var(--esp-3);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  border: 1px dashed var(--borde-fuerte);
  border-radius: 18px;
  background: rgba(10, 21, 34, 0.4);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.carrusel > li {
  flex: none;
  width: 196px;
  scroll-snap-align: start;
}

/* El primero: elegir (o sumar) videos. Solo, ocupa todo el ancho. */
.carrusel-agregar:only-child {
  flex: 1;
  width: auto;
}

.carrusel-agregar label {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--esp-2);
  height: 100%;
  min-height: 168px;
  padding: var(--esp-3);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--texto-2);
  font-weight: var(--peso-medium);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transicion), color var(--transicion);
}

.carrusel-agregar label:hover,
.carrusel-agregar label:focus-within {
  background: var(--celeste-suave);
  color: var(--texto);
}

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

.carrusel-mas {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--celeste);
  color: var(--noche);
}

.carrusel-video {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
}

.carrusel-imagen {
  position: relative;
  aspect-ratio: 16 / 10;
  margin-bottom: var(--esp-2);
  overflow: hidden;
  border-radius: 14px;
  background-color: #1b3f73;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1.4px),
    linear-gradient(135deg, #1f4a85, #17386a 60%, #122d57);
  background-size: 18px 18px, auto;
}

.carrusel-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carrusel-hueco {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.45);
}

.carrusel-hueco .icono {
  width: 34px;
  height: 34px;
  stroke-width: 1.5;
}

.carrusel-hueco.leyendo {
  animation: latir 1.4s ease-in-out infinite;
}

.carrusel-nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texto);
  font-weight: var(--peso-medium);
  font-size: 0.9rem;
}

.carrusel-quitar {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--velo-fuerte);
  color: var(--texto);
  cursor: pointer;
  transition: background-color var(--transicion), transform var(--transicion);
}

.carrusel-quitar .icono {
  width: 16px;
  height: 16px;
}

.carrusel-quitar:hover {
  background: var(--error);
  color: var(--noche);
  transform: scale(1.08);
}

/* El avance de la subida, sobre la imagen de cada video. */
.carrusel-avance {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 4px;
  padding: 18px 10px 8px;
  background: linear-gradient(0deg, rgba(10, 21, 34, 0.92), transparent);
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.carrusel-avance[hidden] {
  display: none;
}

.carrusel-video.lista .barra-relleno {
  background: var(--ok);
}

.carrusel-video.con-error .barra-relleno {
  background: var(--error);
}

.carrusel-video.con-error [data-pct] {
  color: var(--error);
}

/* Un video que no dura lo que tiene que durar: el cartel tapa su imagen apenas se lee el
   encabezado, con una entrada corta para que se note que saltó recién. */
.carrusel-rechazo {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  padding: var(--esp-3);
  background: rgba(10, 21, 34, 0.94);
  box-shadow: inset 0 0 0 2px var(--error);
  border-radius: inherit;
  color: var(--texto);
  font-size: 0.82rem;
  text-align: center;
  animation: rechazo-entra 0.28s ease-out;
}

.carrusel-rechazo .icono {
  width: 22px;
  height: 22px;
  margin-bottom: 2px;
  color: var(--error);
}

.carrusel-rechazo strong {
  color: var(--error);
  font-size: 0.92rem;
}

/* El ícono del hueco y la imagen quedan debajo: el cartel no se mezcla con ellos. */
.carrusel-video.rechazado .carrusel-hueco,
.carrusel-video.rechazado .carrusel-imagen img {
  visibility: hidden;
}

.carrusel-video.rechazado .carrusel-nombre {
  color: var(--texto-2);
  text-decoration: line-through;
}

@keyframes rechazo-entra {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
}

/* Con la barra en dos renglones (css/marco.css) el buscador ocupa el suyo entero. */
@media (max-width: 700px) {
  .buscador {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .barra-rotulo {
    display: none;
  }

  .nuevo-pie {
    flex-wrap: wrap;
  }

  .nuevo-nota {
    flex-basis: 100%;
  }

  .carrusel > li {
    width: 160px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta,
  .tarjeta-imagen img,
  .carpeta-lista,
  .flotante,
  .flotante .icono {
    transition: none;
  }

  .menu-contexto,
  .carrusel-hueco.leyendo {
    animation: none;
  }
}