@charset "utf-8";
/* ==========================================================================
   FAN ARTS URABREAD — hoja de estilo
   Misma mesa de dibujo que urabread.pages.dev: tapete de corte morado con su
   cuadricula, papel crema y la tipografia Mazzard. Encima, carpetas de
   cristal tintadas con el color del arte de cada artista.
   Todas las medidas salen de los tokens de :root.
   ========================================================================== */

@font-face { font-family: "Mazzard"; src: url("fuentes/mazzard-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Mazzard"; src: url("fuentes/mazzard-extrabold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Mazzard"; src: url("fuentes/mazzard-black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* ---- color: la mesa de dibujo (tokens de urabread.pages.dev), en
     penumbra: el fondo queda en segundo plano y mandan las carpetas ---- */
  --fondo: #0f0a18;                     /* base del tapete, casi negra */
  --fondo-luz: rgb(72 50 116 / .5);     /* la luz que cae desde arriba */
  --tapete: #33264a;                    /* el morado de la marca (paneles) */
  --tapete-2: #1e1530;
  --tapete-3: #150e22;                  /* lo mas hondo: visor, huecos */
  --raya: rgb(255 255 255 / .03);       /* cuadricula fina (cada 34 px) */
  --raya-fuerte: rgb(255 255 255 / .055);/* cada 5 cuadros */
  --papel: #f6efe1;                     /* texto principal: 17:1 sobre --fondo */
  --papel-2: #d9cfe6;                   /* secundario: 13:1 */
  --papel-3: #b3a6c9;                   /* terciario: 8,5:1 */
  --tinta: #241b21;                     /* texto sobre papel y sobre el acento */
  --acento: #ef4e8c;                    /* rosa de la marca: 5,7:1 sobre --fondo */
  --acento-claro: #ff9cc4;              /* rosa para texto chico sobre el tapete */
  --oro: #f2b84b;
  --plata: #dfe3ec;
  --bronce: #e0955a;
  --peligro: #ff8796;
  --exito: #6fe0a2;
  --borde: rgb(255 255 255 / .14);
  --borde-fuerte: rgb(255 255 255 / .3);
  --vidrio: rgb(255 255 255 / .08);
  --vidrio-2: rgb(255 255 255 / .14);
  --sombra-color: 10 4 20;

  /* ---- espaciado: escala 4/8 ---- */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;

  /* ---- tipografia ---- */
  --fuente: "Mazzard", "Trebuchet MS", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Roboto Mono", monospace;
  --t-xs: .8125rem;                                       /* 13 px: datos en mono */
  --t-sm: .875rem;                                        /* 14 px */
  --t-base: 1rem;                                         /* 16 px */
  --t-lg: 1.125rem;                                       /* 18 px */
  --t-xl: clamp(1.625rem, 1.2rem + 1.9vw, 2.625rem);      /* nombre del artista */
  --t-2xl: clamp(3rem, 1.9rem + 5.4vw, 6rem);             /* titular */
  --interlineado: 1.5;
  --interlineado-titulo: .98;

  /* ---- radios y sombras ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-full: 999px;
  --sombra-1: 0 2px 8px rgb(var(--sombra-color) / .4);
  --sombra-2: 0 18px 34px -16px rgb(var(--sombra-color) / .8);
  --sombra-3: 0 40px 80px -30px rgb(0 0 0 / .85);

  /* ---- movimiento ---- */
  --curva: cubic-bezier(.2, .8, .2, 1);
  --t-rapida: 180ms;
  --t-media: 280ms;

  --contenedor: 1320px;
  --alto-barra: 72px;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
  background: var(--fondo);
  scroll-padding-top: calc(var(--alto-barra) + var(--e4));
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: var(--fuente);
  font-weight: 700;
  font-size: var(--t-base);
  line-height: var(--interlineado);
  color: var(--papel);
  -webkit-font-smoothing: antialiased;
}
/* EL TAPETE DE CORTE, en dos capas FIJAS del tamaño de la pantalla.
   Antes era un degradado repetido pintado sobre toda la pagina: en paginas
   muy largas (la carpeta de un artista con 200 dibujos) Chromium lo
   rasterizaba mal y las rayas salian torcidas. Ahora cada raya es una
   baldosa chica (34 y 170 px) que se repite exacta, y ademas no se repinta
   al hacer scroll. */
body::before {                                   /* la cuadricula, tenue */
  content: "";
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--raya-fuerte) 1px, transparent 1px) 0 0 / 170px 170px,
    linear-gradient(0deg, var(--raya-fuerte) 1px, transparent 1px) 0 0 / 170px 170px,
    linear-gradient(90deg, var(--raya) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(0deg, var(--raya) 1px, transparent 1px) 0 0 / 34px 34px;
  /* se apaga hacia los bordes y abajo: el tapete acompaña, no compite */
  -webkit-mask-image: radial-gradient(130% 100% at 50% 0%, #000 25%, rgb(0 0 0 / .35) 70%, transparent 100%);
  mask-image: radial-gradient(130% 100% at 50% 0%, #000 25%, rgb(0 0 0 / .35) 70%, transparent 100%);
}
body::after {                                    /* luz arriba, esquinas en sombra */
  content: "";
  position: fixed; inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(90% 55% at 50% -6%, var(--fondo-luz), transparent 70%),
    radial-gradient(150% 110% at 50% 20%, transparent 50%, rgb(0 0 0 / .55) 100%),
    var(--fondo);
}
body.con-modo { padding-bottom: 88px; }
html.visor-abierto { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--acento-claro); }
b { font-weight: 900; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icono {
  width: 20px; height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contenedor {
  width: 100%;
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: max(var(--e4), env(safe-area-inset-left)) max(var(--e4), env(safe-area-inset-right));
}
@media (min-width: 720px) { .contenedor { padding-inline: var(--e6); } }

.saltar {
  position: absolute; left: var(--e4); top: -80px; z-index: 100;
  padding: var(--e3) var(--e4);
  border-radius: var(--r-sm);
  background: var(--papel); color: var(--tinta);
  text-decoration: none;
}
.saltar:focus { top: var(--e4); }

/* ---------------------------------------------------------------- botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 44px;
  padding: 0 var(--e4);
  border-radius: var(--r-full);
  border: 1px solid var(--borde);
  background: var(--vidrio);
  color: var(--papel);
  font-size: var(--t-sm);
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-rapida), border-color var(--t-rapida), transform var(--t-rapida) var(--curva);
}
.boton:active { transform: scale(.97); }
.boton:disabled { opacity: .55; cursor: progress; }
.boton--glass {
  background: rgb(255 255 255 / .1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
}
.boton--acento { background: var(--acento); border-color: transparent; color: var(--tinta); }
.boton--peligro { background: rgb(255 135 150 / .14); border-color: rgb(255 135 150 / .5); color: #ffd6dc; }
.boton--chico { min-height: 36px; padding: 0 var(--e3); font-size: var(--t-xs); }
.boton-icono {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: rgb(255 255 255 / .1);
  color: var(--papel);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  transition: background-color var(--t-rapida), transform var(--t-rapida) var(--curva), opacity var(--t-rapida);
}
.boton-icono:disabled { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .boton:hover:not(:disabled) { background: var(--vidrio-2); border-color: var(--borde-fuerte); }
  .boton--acento:hover:not(:disabled) { background: #f56a9d; }
  .boton-icono:hover:not(:disabled) { background: rgb(255 255 255 / .2); }
}

/* --------------------------------------------------------------- cabecera */
.cabecera {
  position: relative;
  padding-block: var(--e4) var(--e6);
}
/* la regla del tapete: una marca cada cuadro y una mas larga cada 5 */
.cabecera::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 14px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .3) 0 1px, transparent 1px 170px) 0 0 / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, rgb(255 255 255 / .18) 0 1px, transparent 1px 34px) 0 0 / 100% 7px no-repeat;
}
.cabecera__fila {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  padding-top: var(--e4);
}
/* "volver a urabread": pegatina de color con la cara de Yüu, para que se vea.
   Degradado frambuesa -> morado de la marca: el texto blanco pasa AA en los
   dos extremos (5,2:1 y 6,7:1). Al pasar el raton crece un poco. */
.migas {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 44px;
  padding: 0 var(--e4) 0 var(--e3);
  border-radius: var(--r-full);
  background: linear-gradient(120deg, #c2356d, #6a3fc4);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 0 #3f2378, 0 10px 26px -8px rgb(239 78 140 / .55);
  transition: scale var(--t-rapida) var(--curva), translate var(--t-rapida) var(--curva), box-shadow var(--t-rapida);
}
.migas .icono { width: 18px; height: 18px; stroke-width: 2.4; }
.migas__yuu {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: #fbf6ec;
  box-shadow: 0 0 0 2px rgb(255 255 255 / .9);
}
.migas:active { scale: .97; }
@media (hover: hover) and (pointer: fine) {
  .migas:hover { scale: 1.08; translate: 0 -2px; box-shadow: 0 6px 0 #3f2378, 0 18px 34px -8px rgb(239 78 140 / .75); }
}
.cabecera__titular { padding-top: var(--e6); }
.titulo {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 var(--e3);
  font-size: var(--t-2xl);
  font-weight: 900;
  line-height: var(--interlineado-titulo);
  letter-spacing: .03em;                  /* Mazzard Black es muy apretada: un poco de aire */
  color: var(--papel);
  text-shadow: 0 6px 0 rgb(var(--sombra-color) / .45);
}
/* la etiqueta morada, como el @urabread de la web principal */
.titulo__marca {
  display: inline-block;
  margin-top: .22em;
  padding: .28em .5em .32em;
  border-radius: 10px;
  background: #7c4fd0;
  color: #fff;
  font-size: max(.26em, 1rem);
  letter-spacing: 0;
  line-height: 1;
  text-shadow: none;
  box-shadow: 0 4px 0 #4e2c8e;
  transform: rotate(-4deg);
}
.bajada {
  max-width: 58ch;
  margin-top: var(--e4);
  color: var(--papel-2);
  font-size: var(--t-base);
}
.bajada b { color: var(--papel); }
.cifras {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5);
  margin-top: var(--e5);
}
/* el numero va delante ("138 artistas"), salvo en "desde may 2023" */
.cifras > div { display: flex; flex-direction: row-reverse; align-items: baseline; gap: var(--e2); }
.cifras > .cifras__desde { flex-direction: row; }
.cifras dd { font-size: var(--t-lg); font-weight: 900; color: var(--papel); font-variant-numeric: tabular-nums; }
.cifras dt { color: var(--papel-3); font-size: var(--t-sm); }
@media (min-width: 720px) {
  .bajada { font-size: var(--t-lg); }
  .cifras dd { font-size: 1.5rem; }
}

/* "Recien horneados": los ultimos dibujos como fotos sobre el tapete */
.horno { display: none; }
@media (min-width: 1024px) {
  .cabecera__titular { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--e6); }
  .horno:not([hidden]) { display: grid; justify-items: center; gap: var(--e3); }
}
.horno__cabeza { display: grid; justify-items: center; gap: 2px; }
.horno__titulo { font-size: var(--t-sm); font-weight: 900; color: var(--acento-claro); rotate: -2deg; }
.horno__fotos { display: flex; padding: var(--e1) var(--e4) var(--e3); }
/* se tocan solo los marcos: el nombre de cada foto nunca queda debajo de la siguiente */
.horno__foto {
  --r: 0deg;
  position: relative;
  display: block;
  width: 118px;
  margin-inline: -4px;
  padding: 6px 6px 22px;
  border-radius: 6px;
  background: #fbf6ec;
  box-shadow: var(--sombra-2), 0 2px 4px rgb(0 0 0 / .3);
  rotate: var(--r);
  transition: translate var(--t-media) var(--curva), rotate var(--t-media) var(--curva);
}
.horno__foto:nth-child(1) { --r: -6deg; translate: 0 8px; }
.horno__foto:nth-child(2) { --r: -2deg; }
.horno__foto:nth-child(3) { --r: 3deg; translate: 0 4px; }
.horno__foto:nth-child(4) { --r: 7deg; translate: 0 12px; }
.horno__foto img, .horno__foto--vacia > span { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; background: var(--tapete-3); }
.horno__autor {
  position: absolute; inset: auto 6px 4px;
  overflow: hidden;
  color: var(--tinta);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.horno__foto:focus-visible { z-index: 2; }
@media (hover: hover) and (pointer: fine) {
  .horno__foto:hover { z-index: 2; translate: 0 -8px; rotate: 0deg; }
}
.horno__cuando { font-family: var(--mono); font-size: var(--t-xs); font-weight: 400; color: var(--papel-3); }

/* ------------------------------------------------------ barra (pegajosa) */
.barra {
  position: sticky; top: 0; z-index: 30;
  padding-block: var(--e3);
  background: rgb(20 13 32 / .8);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-block: 1px solid var(--borde);
  box-shadow: 0 16px 30px -24px rgb(0 0 0 / .9);
}
.barra__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e2);
  align-items: center;
}
@media (min-width: 720px) { .barra__fila { grid-template-columns: minmax(0, 30rem) auto; justify-content: space-between; gap: var(--e4); } }

.buscador { position: relative; display: flex; align-items: center; min-width: 0; }
.buscador input {
  width: 100%;
  height: 48px;
  padding: 0 var(--e3) 0 42px;
  border-radius: var(--r-full);
  border: 1px solid var(--borde-fuerte);
  background: rgb(20 12 34 / .6);
  color: var(--papel);
  font-size: var(--t-base);      /* 16 px: el iPhone no hace zoom */
  font-weight: 700;
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.buscador input::placeholder { color: var(--papel-3); opacity: 1; }
.buscador:has(.buscador__limpiar:not([hidden])) input { padding-right: 48px; }
.buscador input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.buscador input:focus-visible { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgb(239 78 140 / .4); }
.buscador__lupa { position: absolute; left: 14px; color: var(--papel-3); pointer-events: none; }
.buscador__limpiar {
  position: absolute; right: 4px;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--papel-2);
}
.buscador__limpiar .icono { width: 18px; height: 18px; }

/* Carpetas | Todos: control segmentado de cristal */
.vistas {
  display: flex;
  padding: 1px;                    /* 44 + 2 + 2 de borde = 48, lo mismo que el buscador */
  border-radius: var(--r-full);
  background: rgb(20 12 34 / .6);
  border: 1px solid var(--borde-fuerte);
}
.vistas__boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-width: 44px; height: 44px;
  padding: 0 var(--e3);
  border-radius: var(--r-full);
  color: var(--papel-2);
  font-size: var(--t-sm);
  font-weight: 800;
  text-decoration: none;
  transition: background-color var(--t-rapida), color var(--t-rapida);
}
.vistas__boton[aria-current="page"] { background: var(--papel); color: var(--tinta); box-shadow: 0 2px 6px rgb(0 0 0 / .3); }
/* en movil solo icono, pero el texto sigue ahi para los lectores de pantalla */
@media (max-width: 559px) {
  .vistas__boton span, .visor__acciones .boton:not(.boton--peligro) span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
@media (min-width: 560px) { .vistas__boton { padding: 0 var(--e4); } }
@media (hover: hover) and (pointer: fine) {
  .vistas__boton:not([aria-current]):hover { background: rgb(255 255 255 / .1); color: var(--papel); }
  .buscador input:hover { border-color: rgb(255 255 255 / .45); }
}

/* --------------------------------------------- filtros: categorias + orden */
.filtros {
  display: flex; align-items: center; gap: var(--e3);
  padding-block: var(--e4) var(--e2);
}
.chips { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; }
/* fila deslizable; el degradado del final avisa de que hay mas (el relleno
   final deja que el ultimo chip salga del degradado al llegar al tope) */
.chips__fila {
  display: flex; gap: var(--e2);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--e1) var(--e6) var(--e1) var(--e1);
  margin: calc(var(--e1) * -1);
  scroll-padding-inline: var(--e4);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--e6)), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--e6)), transparent);
}
.chips__fila::-webkit-scrollbar { display: none; }
.chip { position: relative; flex: none; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip__txt {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 44px;
  padding: 0 var(--e4);
  border-radius: var(--r-full);
  border: 1px solid var(--borde);
  background: rgb(255 255 255 / .06);
  color: var(--papel-2);
  font-size: var(--t-sm);
  font-weight: 800;
  white-space: nowrap;
  transition: background-color var(--t-rapida), color var(--t-rapida), border-color var(--t-rapida);
}
.chip__n { font-family: var(--mono); font-size: var(--t-xs); font-weight: 400; color: var(--papel-3); }
.chip__check { display: none; width: 16px; height: 16px; stroke-width: 3; }
.chip input:checked + .chip__txt { background: var(--acento); border-color: transparent; color: var(--tinta); }
.chip input:checked + .chip__txt .chip__n { color: var(--tinta); }
.chip input:checked + .chip__txt .chip__check { display: block; }
.chip input:focus-visible + .chip__txt { outline: 3px solid var(--papel); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .chip input:not(:checked):hover + .chip__txt { background: var(--vidrio-2); color: var(--papel); border-color: var(--borde-fuerte); }
}
.orden { position: relative; flex: none; }
.orden select {
  -webkit-appearance: none; appearance: none;
  height: 44px;
  padding: 0 38px 0 var(--e4);
  border-radius: var(--r-full);
  border: 1px solid var(--borde);
  background: rgb(255 255 255 / .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9cfe6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
  color: var(--papel-2);
  font-size: var(--t-base);
  font-weight: 800;
  cursor: pointer;
}
.orden select option { background: var(--tapete-2); color: var(--papel); }
@media (max-width: 559px) {
  .filtros { gap: var(--e2); }
  .orden select { max-width: 150px; text-overflow: ellipsis; }
}

/* ===================================================== CARPETAS DE CRISTAL
   Anatomia: trasera opaca (sin blur) + 3 dibujos como fotos impresas +
   frente de cristal (UN solo backdrop-filter por carpeta). El frente se
   recorta con #recorte-carpeta y su brillo usa la misma forma.
   Reglas que no se rompen (investigacion 26/09/2026):
   - nada de opacity/filter/mask/clip-path en .carpeta ni en sus padres: se
     vuelven "backdrop root" y el cristal deja de ver los dibujos;
   - sin preserve-3d (rompe el blur); la inclinacion va con perspective()
     dentro del transform del propio frente;
   - -webkit-backdrop-filter con valores literales (Safari no acepta var()).
   ========================================================================== */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr));
  gap: var(--e2) var(--e3);
  padding-block: var(--e2) var(--e8);
}
@media (min-width: 720px) {
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: var(--e3) var(--e5); }
}
.celda { position: relative; padding-top: var(--e6); }
.celda:has(.carpeta:hover), .celda:has(.carpeta:focus-visible), .celda:has(.abierta) { z-index: 2; }

.carpeta {
  --tinte: #c9bfe0;
  --o: 0;                                  /* 0 = cerrada, 1 = abierta */
  position: relative;
  display: block;
  border-radius: var(--r-md);
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  outline-offset: 6px;
}
.carpeta:focus-visible, .carpeta.abierta { --o: 1; }
@media (hover: hover) and (pointer: fine) { .carpeta:hover { --o: 1; } }

.carpeta__caja { position: relative; display: block; aspect-ratio: 1 / .92; }

.carpeta__trasera {
  position: absolute; inset: 14% 0 0 0;
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgb(255 255 255 / .16), transparent 30%),
    linear-gradient(170deg, color-mix(in oklab, var(--tinte) 62%, #150d24), color-mix(in oklab, var(--tinte) 34%, #150d24));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), var(--sombra-2);
}
/* la sombra que crece al abrir: se anima solo la opacidad de esta capa */
.carpeta__trasera::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 30px 50px -18px rgb(0 0 0 / .75);
  opacity: var(--o);
  transition: opacity var(--t-media) var(--curva);
}

.carpeta__hojas { position: absolute; inset: 0; }
.carpeta__hoja {
  --x: 0%; --r: 0deg;
  position: absolute;
  left: 28%; bottom: 30%;
  width: 44%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  border-radius: 7px;
  border: 3px solid #fbf6ec;                 /* borde de foto impresa */
  background: #fbf6ec;
  box-shadow: 0 8px 18px rgb(var(--sombra-color) / .5);
  transform-origin: 50% 150%;
  translate: calc(var(--x) * (1 + var(--o) * .6)) calc(var(--o) * -24%);
  rotate: calc(var(--r) * (1 + var(--o) * 1.25));
  transition: translate var(--t-media) var(--curva), rotate var(--t-media) var(--curva);
}
/* el mas reciente al centro y delante; los anteriores asoman a los lados */
.carpeta__hoja:nth-child(1) { --r: 1.5deg; z-index: 3; }
.carpeta__hoja:nth-child(2) { --x: -34%; --r: -9deg; z-index: 2; transition-delay: 25ms; }
.carpeta__hoja:nth-child(3) { --x: 34%; --r: 9deg; z-index: 1; transition-delay: 50ms; }
.carpeta__hoja--video {
  display: grid; place-items: center;
  background: var(--tapete-3);
  color: var(--papel);
}
.carpeta__hoja--video .icono { width: 28px; height: 28px; }

/* El cristal, SIN backdrop-filter (tecnica "copia del fondo", la C de
   references/casos/liquid-glass.md): lo que hay detras del frente se sabe
   (la trasera y los 3 dibujos), asi que el frente pinta una base opaca con
   los colores de la trasera y encima una copia de los dibujos con
   filter: blur(), alineada con los de verdad. Se ve igual que el vidrio
   esmerilado, funciona en todos los navegadores y no dispara el bug abierto
   de Chromium 40241108 (backdrop-filter + clip-path en muchos elementos:
   zonas sin pintar al hacer scroll). Ademas cuesta menos: el desenfoque se
   pinta una vez, no en cada fotograma. */
.carpeta {
  --desenfoque: 10px;
}
.carpeta__frente {
  position: absolute; inset: auto 0 0 0;
  height: 60%;
  z-index: 4;
  display: block;
  overflow: hidden;
  /* respaldo; la forma buena es shape() (abajo): Firefox no aplica este url() */
  -webkit-clip-path: url("#recorte-carpeta");
  clip-path: url("#recorte-carpeta");
  /* base opaca = la trasera que queda detras (tapa los dibujos nitidos) */
  background: linear-gradient(170deg, color-mix(in oklab, var(--tinte) 52%, #150d24), color-mix(in oklab, var(--tinte) 34%, #150d24));
}
/* la copia desenfocada de los dibujos: mide lo mismo que toda la carpeta
   (60% x 100/60 = 100%) para que cada copia quede sobre su original */
.carpeta__reflejo {
  position: absolute; inset: auto 0 0 0;
  height: calc(100% / .6);
  filter: blur(var(--desenfoque)) saturate(170%);
}
/* tinte, sombra de abajo (para leer el nombre) y reflejo de luz arriba */
.carpeta__frente::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(162deg, rgb(255 255 255 / .34) 0%, rgb(255 255 255 / .08) 28%, transparent 52%),
    linear-gradient(0deg, rgb(14 8 24 / .8) 0%, rgb(14 8 24 / .42) 42%, transparent 78%),
    color-mix(in oklab, var(--tinte) 46%, transparent);
}
/* las 3 capas del frente comparten caja y giro */
.carpeta__frente, .carpeta__borde, .carpeta__info {
  transform-origin: 50% 100%;
  transition: transform var(--t-media) var(--curva);
}
/* al abrir, el frente se inclina hacia delante. Solo entonces hay 3D: en
   reposo ninguna carpeta se compone en 3D (menos trabajo para la GPU) */
.carpeta:is(:focus-visible, .abierta) :is(.carpeta__frente, .carpeta__borde, .carpeta__info) {
  transform: perspective(700px) rotateX(-13deg);
}
@media (hover: hover) and (pointer: fine) {
  .carpeta:hover :is(.carpeta__frente, .carpeta__borde, .carpeta__info) { transform: perspective(700px) rotateX(-13deg); }
}
/* La misma geometria que #forma-carpeta, en porcentajes: clip-path: shape() es
   Baseline 2026 (Chrome 135, Safari 18.4, Firefox 148) y recorta tambien el
   backdrop-filter. Probado con el QA en Chromium, WebKit y Firefox. */
@supports (clip-path: shape(from 0 0, line to 1px 1px)) {
  .carpeta__frente {
    -webkit-clip-path: none;
    clip-path: shape(from 0% 11.6%,
      arc to 6.4% 0% of 6.4% 11.6% cw,
      hline to 37%,
      curve to 50% 13% with 43% 0% / 44% 13%,
      hline to 93.6%,
      arc to 100% 24.6% of 6.4% 11.6% cw,
      vline to 88.4%,
      arc to 93.6% 100% of 6.4% 11.6% cw,
      hline to 6.4%,
      arc to 0% 88.4% of 6.4% 11.6% cw,
      close);
  }
}
/* brillo del borde: el <use> se recorta con #recorte-borde dentro del SVG,
   asi solo queda la mitad interior del trazo: una linea fina que sigue la pestaña */
.carpeta__borde {
  position: absolute; inset: auto 0 0 0;
  z-index: 5;
  width: 100%; height: 60%;
  max-width: none;
  overflow: hidden;
  fill: none;
  stroke: url("#brillo-borde");
  stroke-width: 2.5;
  pointer-events: none;
}
/* el contenido encima del cristal (misma caja). El nombre usa todo el ancho;
   la flecha va en la fila del contador */
.carpeta__info {
  position: absolute; inset: auto 0 0 0;
  z-index: 6;
  height: 60%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "av nom nom" "av cue ir";
  align-content: end;
  align-items: center;
  gap: 2px var(--e2);
  padding: 0 var(--e2) var(--e2);
}
.carpeta__avatar {
  grid-area: av;
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tapete-3);
  box-shadow: 0 0 0 2px rgb(255 255 255 / .9), 0 2px 6px rgb(0 0 0 / .4);
}
.carpeta__nombre {
  grid-area: nom;
  align-self: end;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: break-word;
  font-size: var(--t-sm);
  font-weight: 800;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgb(0 0 0 / .7);
}
.carpeta__cuenta {
  grid-area: cue;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 400;
  line-height: 1.2;
  color: rgb(255 255 255 / .86);
  text-shadow: 0 1px 2px rgb(0 0 0 / .7);
}
.carpeta__ir {
  grid-area: ir;
  display: none;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgb(255 255 255 / .16);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35);
  translate: calc(var(--o) * 3px) 0;
  transition: background-color var(--t-media), color var(--t-media), translate var(--t-media) var(--curva);
}
.carpeta__ir .icono { width: 16px; height: 16px; stroke-width: 2.4; }
.carpeta:is(:focus-visible, .abierta) .carpeta__ir { background: #fff; color: var(--tinta); }
@media (hover: hover) and (pointer: fine) { .carpeta:hover .carpeta__ir { background: #fff; color: var(--tinta); } }

/* medalla del podio: numeros de verdad (orden por cantidad de dibujos) */
.carpeta__puesto {
  position: absolute; top: 9%; right: 4%;
  z-index: 7;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  color: var(--tinta);
  font-size: var(--t-sm);
  font-weight: 900;
  line-height: 1;
  background: radial-gradient(circle at 35% 30%, #fff8dc, var(--oro) 55%, #b27b1d);
  box-shadow: 0 0 0 2px rgb(255 255 255 / .75), 0 4px 10px rgb(0 0 0 / .45);
  rotate: -8deg;
}
.carpeta__puesto--2 { background: radial-gradient(circle at 35% 30%, #fff, var(--plata) 55%, #8f97a8); }
.carpeta__puesto--3 { background: radial-gradient(circle at 35% 30%, #ffe6cf, var(--bronce) 55%, #9a5a2c); }
.carpeta__nuevo {
  position: absolute; left: 5%; top: calc(40% + 6px);
  z-index: 7;
  padding: 2px var(--e2);
  border-radius: var(--r-full);
  background: var(--acento);
  color: var(--tinta);
  font-size: .75rem;
  font-weight: 900;
  line-height: 1.4;
  box-shadow: 0 2px 6px rgb(0 0 0 / .35);
}
.carpeta--clara { --tinte: #d6cfe4; }

@media (min-width: 720px) {
  .carpeta__info { gap: var(--e3); padding: 0 var(--e3) var(--e3); }
  .carpeta__avatar { width: 34px; height: 34px; }
  .carpeta__nombre { font-size: var(--t-base); }
  .carpeta__ir { display: grid; }
  .carpeta__puesto { width: 34px; height: 34px; font-size: var(--t-base); }
}
/* carpetas chicas (movil): el mismo esmerilado en proporcion */
@media (max-width: 600px) {
  .carpeta { --desenfoque: 7px; }
}

/* esqueleto mientras llegan los datos */
.esqueleto {
  display: block;
  aspect-ratio: 1 / .92;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgb(255 255 255 / .07), rgb(255 255 255 / .03));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08);
  clip-path: inset(14% 0 0 0 round var(--r-md));
  animation: respira 1.6s ease-in-out infinite alternate;
}
@keyframes respira { to { opacity: .55; } }

/* ------------------------------------------- coincidencias de la busqueda */
.coincidencias { padding-bottom: var(--e8); }
.coincidencias__titulo { margin-bottom: var(--e4); font-size: var(--t-lg); font-weight: 900; }

/* ------------------------------------------------------------------ vacio */
.vacio {
  display: grid; justify-items: center; gap: var(--e3);
  padding: var(--e7) var(--e4) var(--e8);
  text-align: center;
}
.vacio img { width: 96px; height: auto; filter: drop-shadow(0 12px 16px rgb(0 0 0 / .45)); rotate: -4deg; }
.vacio__titulo { font-size: var(--t-lg); font-weight: 900; }
.vacio__texto { max-width: 42ch; color: var(--papel-2); }
.vacio--linea { position: static; padding: var(--e7) 0; color: var(--papel-2); }

/* ------------------------------------------------------- vista de galeria */
.ficha { display: grid; gap: var(--e4); padding-block: var(--e4) var(--e5); }
.ficha__volver { justify-self: start; }
.ficha__cuerpo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--e4);
  padding: var(--e4);
  border-radius: var(--r-lg);
  background:
    linear-gradient(162deg, rgb(255 255 255 / .16), transparent 45%),
    color-mix(in oklab, var(--tinte, #7c4fd0) 26%, rgb(20 12 34 / .6));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), var(--sombra-2);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
}
.ficha__cuerpo:has(.ficha__avatar[hidden]) { grid-template-columns: minmax(0, 1fr); }
.ficha__avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tapete-3);
  box-shadow: 0 0 0 3px var(--tapete-2), 0 0 0 6px var(--tinte, var(--acento));
}
.ficha__nombre {
  font-size: var(--t-xl);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.ficha__meta { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); margin-top: var(--e2); color: var(--papel-2); font-size: var(--t-sm); }
.ficha__usuario { color: var(--acento-claro); }
.ficha__alias { color: var(--papel-3); }
.ficha__datos { font-family: var(--mono); font-weight: 400; color: var(--papel-2); }
.ficha__acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--e2); }
.ficha__acciones:empty { display: none; }
@media (min-width: 720px) {
  .ficha__cuerpo { grid-template-columns: auto minmax(0, 1fr) auto; padding: var(--e5); gap: var(--e5); }
  .ficha__acciones { grid-column: auto; }
  .ficha__avatar { width: 88px; height: 88px; }
}

/* --------------------------------------------------------------- mosaico */
/* cada pieza la coloca app.js (position absolute + translate) */
.mosaico { position: relative; min-height: 120px; }
.mosaico:empty { min-height: 0; }
.obra {
  position: absolute; top: 0; left: 0;
  border-radius: var(--r-sm);
  box-shadow: var(--sombra-1);
  transition: translate var(--t-rapida) var(--curva), box-shadow var(--t-rapida);
}
.obra:focus-within { z-index: 3; }
.obra__enlace {
  position: absolute; inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  background: color-mix(in oklab, var(--tinte, #6d5a92) 30%, var(--tapete-3));
  color: #fff;
  text-decoration: none;
}
.obra__enlace:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.obra__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: scale var(--t-media) var(--curva);
}
.obra__tipo {
  position: absolute; top: var(--e2); left: var(--e2);
  display: inline-flex; align-items: center; gap: var(--e1);
  padding: 2px var(--e2);
  border-radius: var(--r-full);
  background: rgb(14 8 24 / .72);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.5;
}
.obra__tipo .icono { width: 12px; height: 12px; }
.obra__pie {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: center; gap: var(--e2);
  min-width: 0;
  padding: var(--e6) var(--e2) var(--e2);
  background: linear-gradient(transparent, rgb(12 7 20 / .88));
  font-size: var(--t-xs);
  line-height: 1.2;
}
.obra__avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; background: var(--tapete-3); }
.obra__autor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.obra__fecha { font-family: var(--mono); font-weight: 400; }
.obra__quitar {
  position: absolute; top: var(--e1); right: var(--e1);
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgb(255 255 255 / .3);
  border-radius: 50%;
  background: rgb(14 8 24 / .75);
  color: #ffd6dc;
}
.obra__quitar .icono { width: 18px; height: 18px; }
/* con raton: el pie aparece al pasar por encima; en tactil se ve siempre el autor */
@media (hover: hover) and (pointer: fine) {
  .obra__pie { opacity: 0; transition: opacity var(--t-rapida); }
  .obra:is(:hover, :focus-within) .obra__pie { opacity: 1; }
  .obra:hover { translate: 0 -3px; box-shadow: 0 16px 30px -12px rgb(0 0 0 / .8); }
  .obra:hover .obra__img { scale: 1.04; }
  .obra__quitar { opacity: 0; transition: opacity var(--t-rapida); }
  .obra:is(:hover, :focus-within) .obra__quitar { opacity: 1; }
  .obra__quitar:hover { background: var(--peligro); color: var(--tinta); }
}
@media (hover: none) { .obra__pie:has(.obra__fecha) { display: none; } }

.centinela { height: 1px; }
.cargar-mas { display: flex; margin: var(--e6) auto 0; }

/* ------------------------------------------------------------------- pie */
.pie {
  margin-top: auto;
  padding-block: var(--e6) calc(var(--e6) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borde);
  background: rgb(9 6 15 / .6);
  color: var(--papel-3);
  font-size: var(--t-sm);
}
.pie__fila { display: grid; gap: var(--e3); }
.pie__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e3); }
.pie a { color: var(--papel-2); }
.pie__links a { display: inline-flex; align-items: center; min-height: 44px; }
/* en movil los enlaces van uno debajo de otro: sin "·" colgando al final de linea */
@media (max-width: 719px) {
  .pie__links { flex-direction: column; align-items: flex-start; }
  .pie__links > [aria-hidden="true"] { display: none; }
}
.pie__admin {
  display: inline-flex; align-items: center; gap: var(--e1);
  min-height: 44px;
  padding: 0 var(--e2);
  border: 0; border-radius: var(--r-sm);
  background: none;
  color: var(--papel-3);
  font-size: var(--t-sm);
}
.pie__admin .icono { width: 14px; height: 14px; }
@media (min-width: 720px) { .pie__fila { grid-template-columns: 1fr auto; align-items: center; } }

/* ================================================================= VISOR */
.visor {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--tapete-3);
  color: var(--papel);
  overscroll-behavior: contain;
}
.visor[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.visor::backdrop { background: rgb(10 5 18 / .92); }
.visor__ambiente {
  position: absolute; inset: -10%;
  background: center / cover no-repeat;
  filter: blur(60px) saturate(1.5);
  opacity: .5;
  pointer-events: none;
}
.visor__arriba, .visor__escena, .visor__abajo { position: relative; z-index: 1; }
.visor__arriba {
  display: flex; align-items: center; gap: var(--e3);
  padding: max(var(--e3), env(safe-area-inset-top)) max(var(--e4), env(safe-area-inset-right)) var(--e2) max(var(--e4), env(safe-area-inset-left));
}
.visor__autor {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-width: 0; min-height: 44px;
  padding: 0 var(--e4) 0 var(--e1);
  border-radius: var(--r-full);
  background: rgb(255 255 255 / .1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .2);
  color: var(--papel);
  font-weight: 800;
  text-decoration: none;
}
.visor__autor img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px var(--tinte, var(--acento)); }
.visor__autor span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor__contador { margin-left: auto; font-family: var(--mono); font-size: var(--t-sm); font-weight: 400; color: var(--papel-2); }
.visor__cerrar { flex: none; }
.visor__contador:empty + .visor__cerrar { margin-left: auto; }
/* el tamano exacto del dibujo lo pone app.js (ajustarMedia) */
.visor__escena {
  position: relative;
  min-height: 0;
  touch-action: pan-y pinch-zoom;
}
.visor__pista {
  position: absolute; inset: var(--e2);
  transition: transform var(--t-rapida) var(--curva);
}
.visor__figura { display: grid; place-items: center; width: 100%; height: 100%; }
.visor__media {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: center / cover no-repeat;
  box-shadow: var(--sombra-3);
}
img.visor__media:not(.cargada) { filter: saturate(.9); }
.visor__nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; }
.visor__nav--ant { left: max(var(--e2), env(safe-area-inset-left)); }
.visor__nav--sig { right: max(var(--e2), env(safe-area-inset-right)); }
.visor__abajo {
  display: grid; justify-items: center; gap: var(--e2);
  padding: var(--e2) max(var(--e4), env(safe-area-inset-right)) max(var(--e4), env(safe-area-inset-bottom)) max(var(--e4), env(safe-area-inset-left));
  text-align: center;
}
.visor__texto {
  max-width: 60ch;
  max-height: 4.5em;
  overflow-y: auto;
  color: var(--papel);
  font-size: var(--t-base);
  overflow-wrap: anywhere;
}
.visor__texto::before { content: "“"; }
.visor__texto::after { content: "”"; }
.visor__meta { font-family: var(--mono); font-size: var(--t-xs); font-weight: 400; color: var(--papel-2); }
.visor__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e2); }
@media (max-width: 719px) {
  .visor__acciones .boton:not(.boton--peligro) { width: 48px; padding: 0; }
  .visor__nav { top: auto; bottom: var(--e2); translate: none; width: 40px; height: 40px; }
  .visor__pista { bottom: 56px; }
}
@media (min-width: 720px) {
  .visor__pista { inset: var(--e2) 84px; }
  .visor__nav { width: 52px; height: 52px; }
}

/* ------------------------------------------------ panel (admin) y modo */
.panel {
  width: min(100% - 2 * var(--e4), 440px);
  padding: 0;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--tapete) 88%, #fff);
  color: var(--papel);
  box-shadow: var(--sombra-3);
}
.panel::backdrop { background: rgb(10 5 18 / .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.panel__caja { display: grid; gap: var(--e4); padding: var(--e5); }
.panel__titulo { font-size: 1.5rem; font-weight: 900; }
.panel__texto { color: var(--papel-2); }
.panel__botones { display: flex; justify-content: flex-end; gap: var(--e2); }
.campo { display: grid; gap: var(--e2); }
.campo__etiqueta { font-size: var(--t-sm); color: var(--papel-2); }
.campo input {
  height: 48px;
  padding: 0 var(--e4);
  border-radius: var(--r-sm);
  border: 1px solid var(--borde-fuerte);
  background: var(--tapete-3);
  color: var(--papel);
  font-size: var(--t-base);
}
.campo input:focus-visible { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgb(239 78 140 / .4); }
.campo__error { color: var(--peligro); font-size: var(--t-sm); }

.modo {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  padding: var(--e3) max(var(--e4), env(safe-area-inset-right)) max(var(--e3), env(safe-area-inset-bottom)) max(var(--e4), env(safe-area-inset-left));
  background: rgb(22 15 34 / .9);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-top: 1px solid var(--borde-fuerte);
}
.modo__caja { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); max-width: var(--contenedor); margin-inline: auto; }
.modo__titulo { font-weight: 900; color: var(--acento-claro); }
.modo__estado { font-size: var(--t-xs); color: var(--papel-2); }
.modo__estado--error { color: var(--peligro); }
.modo__botones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-left: auto; }

/* ---------------------------------------------------------------- avisos */
.avisos {
  position: fixed; left: 50%; bottom: max(var(--e5), env(safe-area-inset-bottom)); z-index: 60;
  display: grid; gap: var(--e2);
  width: min(100% - 2 * var(--e4), 460px);
  translate: -50% 0;
  pointer-events: none;
}
body.con-modo .avisos { bottom: 104px; }
.aviso {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  min-height: 48px;
  padding: var(--e2) var(--e2) var(--e2) var(--e4);
  border-radius: var(--r-md);
  border: 1px solid var(--borde-fuerte);
  background: rgb(30 20 46 / .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--sombra-2);
  font-size: var(--t-sm);
  pointer-events: auto;
  animation: sube var(--t-media) var(--curva);
}
.aviso--error { border-color: rgb(255 135 150 / .6); }
.aviso--fuera { opacity: 0; translate: 0 8px; transition: opacity var(--t-rapida), translate var(--t-rapida); }
.aviso__accion {
  min-height: 36px;
  padding: 0 var(--e3);
  border: 0; border-radius: var(--r-sm);
  background: var(--papel);
  color: var(--tinta);
  font-weight: 900;
  font-size: var(--t-sm);
}
@keyframes sube { from { opacity: 0; translate: 0 12px; } }

.sin-js { padding: var(--e5); text-align: center; color: var(--papel-2); }

/* ------------------------------------------------------- transiciones */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }

/* ------------------------------------------------- preferencias del usuario */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .carpeta :is(.carpeta__frente, .carpeta__borde, .carpeta__info) { transform: none !important; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .barra, .modo, .ficha__cuerpo, .boton--glass, .boton-icono {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* carpeta opaca, sin la copia desenfocada de los dibujos */
  .carpeta__reflejo { display: none; }
  .carpeta__frente::after { background: linear-gradient(0deg, rgb(14 8 24 / .92), rgb(14 8 24 / .5)), color-mix(in oklab, var(--tinte) 60%, #150d24); }
  .barra { background: var(--tapete-2); }
}
@media (forced-colors: active) {
  .carpeta__frente { border: 1px solid CanvasText; }
}