/* ═══════════════════════════════════════════════════════════════════════════
   MORFO · GALERÍA — el panel del equipo
   Memoria Observable de Recursos Fotográficos de Operadores · «El mirador».
   La morfo: con las alas cerradas guarda (el archivo, carpeta por carpeta); abiertas deslumbra
   (lo que ve el cliente). EL DISEÑO ES «LA MESA» (2026-10-09): el drive y el WeTransfer en la
   misma pantalla. El riel a la izquierda (abajo en el celular, como Instagram), todo el ancho
   para el contenido y, a la derecha, la mesa con el carrusel de MORFO detrás. Tres temas de
   PRISMA (oscuro, teal, claro), con el botón compartido (prisma-tema.js). Lo que va sobre una
   foto no cambia con el tema. Sin negrita.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --serif:Marcellus, 'PP Fragment Glare', Georgia, serif;
  --sans:Figtree, 'PP Fragment Sans', Inter, system-ui, sans-serif;
  --tinta-marca:#1A2633; --deep:#005565; --teal:#006D82; --salvia:#7D9B5B; --crema:#EADFCE; --rojo:#B3261E; --ocre:#8A6A2F;
  --sombra:0 30px 70px -18px rgba(26,38,51,.62);
  --curva:cubic-bezier(.2,.8,.2,1);
  --margen:40px;
}
/* OSCURO · la tinta del ecosistema */
html[data-tema="oscuro"]{
  --suelo:#141D27; --hoja:#1A2633; --hoja-2:#212F3E; --tinta:#EADFCE; --tinta-2:rgba(234,223,206,.66); --tinta-3:rgba(234,223,206,.44);
  --linea:rgba(234,223,206,.13); --linea-2:rgba(234,223,206,.24); --acento:#2A93A8; --relleno:#005565; --relleno-tinta:#FFFFFF;
  --campo:rgba(234,223,206,.05); --vacio:rgba(234,223,206,.04);
}
/* TEAL · suelo #046477, hojas deep, tinta crema */
html[data-tema="teal"]{
  --suelo:#046477; --hoja:#005565; --hoja-2:#0A5B6A; --tinta:#EADFCE; --tinta-2:rgba(255,255,255,.76); --tinta-3:rgba(255,255,255,.52);
  --linea:rgba(234,223,206,.18); --linea-2:rgba(234,223,206,.32); --acento:#9CCFD9; --relleno:#1A2633; --relleno-tinta:#EADFCE;
  --campo:rgba(255,255,255,.07); --vacio:rgba(255,255,255,.05);
}
/* CLARO · papel crema y hojas blancas */
html[data-tema="claro"]{
  /* papel crema con cuerpo (Luis, 2026-10-11: «todo muy muy blanco, sin tanto contraste»): el suelo un tono
     más tostado, las tarjetas blancas con su filete y la letra secundaria más firme */
  --suelo:#EDE7DC; --hoja:#FFFFFF; --hoja-2:#E6DED0; --tinta:#1A2633; --tinta-2:#3E4A57; --tinta-3:#66717C;
  --linea:#D9CEBC; --linea-2:#C2B49C; --acento:#006D82; --relleno:#005565; --relleno-tinta:#FFFFFF;
  --campo:#FBF9F5; --vacio:#EFE9DF;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* AL TOCAR, sin la sombra cuadrada del navegador: cada botón se achica un poquito con su propia forma */
:is(button, .bt, .cab__editar, .riel__marca, .riel__sec, .circ, .mas, .chip, .pz-tema-btn, .idioma, .ses__salir, .mesa__accion, .mesa__escoger, .mesa__vaciar, .mesa__quitar):active{ transform:scale(.93); }
:is(.riel__sec, .pieza, .tarjeta, .pila > a, .renglon):active{ transform:scale(.97); }
/* el foco: sólo con el teclado, y como un anillo que sigue las esquinas de cada botón */
:focus:not(:focus-visible){ outline:none; }
html, body, *{ scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar{ width:0 !important; height:0 !important; background:transparent; }
html{ background:var(--suelo); }
body{ margin:0; background:var(--suelo); color:var(--tinta); font-family:var(--sans); font-weight:400; font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; }
button, input, textarea, select{ font:inherit; color:inherit; }
button{ cursor:pointer; }
:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--suelo), 0 0 0 4px var(--acento) !important; }
.pz-tema-btn:focus-visible{ outline:none !important; }
.material-icons-outlined{ font-size:20px; line-height:1; vertical-align:middle; }
[hidden]{ display:none !important; }
.num{ font-variant-numeric:tabular-nums; }

/* ── el login (la estructura es la de prisma-login.css) ── */
/* La morfo azul abierta, enderezada, sobre un lienzo de hojas más ancho y alto que la foto. El tamaño y
   la posición los calcula index.html (una sola cuenta para todos los tamaños, sin brincos): aquí sólo se leen. */
.ingreso{ display:flex; background:#141D27 url('fotos/fl-54345339836.webp') no-repeat fixed;
  background-size:var(--fondo-tam); background-position:var(--fondo-pos); }
.ingreso::before{ content:''; position:fixed; inset:0; background:linear-gradient(180deg, rgba(20,29,39,.06), rgba(20,29,39,.34)); pointer-events:none; }

/* ── EL MARCO DEL PANEL ───────────────────────────────────────────────────────
   Tres columnas: el riel, el contenido (todo el ancho que queda) y la mesa. El riel y la mesa
   se quedan quietos al bajar; arriba del contenido, la barra con el camino, el título y sus
   acciones, siempre en el mismo sitio. Arriba no hay foto: la foto vive detrás de la mesa. */
@property --mesa{ syntax:'<length>'; inherits:true; initial-value:392px; }
/* el ancho de la mesa y los rellenos crecen y se achican con la pantalla, sin escalones: así la foto de
   atrás (que mide lo que la mesa más --foto-extra) nunca brinca al cambiar el tamaño */
:root{ --mesa-abierta:clamp(330px, calc(8.88vw + 225px), 392px); --hueco:clamp(14px, calc(1.6vw + 2px), 28px); }
.marco{ --riel:84px; --mesa:var(--mesa-abierta); --cab-lado:var(--hueco); display:grid; grid-template-columns:var(--riel) minmax(0, 1fr) round(var(--mesa), 1px); min-height:100vh; min-height:100dvh; }

/* EL RIEL: la estrella en un círculo y las tres secciones */
.riel{ position:sticky; top:0; height:100vh; height:100dvh; z-index:35; display:flex; flex-direction:column; align-items:center; gap:4px; padding:18px 0;
  background:var(--hoja); border-right:1px solid var(--linea); }
.riel__marca{ display:grid; place-items:center; width:48px; height:48px; margin-bottom:22px; border-radius:50%; background:var(--relleno);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.55); transition:transform .3s var(--curva); }
.riel__marca:hover{ transform:rotate(45deg); }
.riel__marca img{ width:28px; height:28px; }
.riel__sec{ position:relative; width:68px; padding:10px 0 8px; border:0; border-radius:16px; background:none; display:flex; flex-direction:column; align-items:center; gap:5px;
  color:var(--tinta-3); text-decoration:none; font-size:10.5px; letter-spacing:.04em; transition:background .2s, color .2s; }
.riel__sec .material-icons-outlined{ font-size:23px; }
.riel__sec b{ position:absolute; top:5px; right:9px; min-width:17px; height:17px; padding:0 4px; border-radius:99px; background:var(--relleno); color:var(--relleno-tinta);
  font:400 9.5px/17px var(--sans); text-align:center; }
.riel__sec b:empty{ display:none; }
.riel__sec:hover{ background:var(--vacio); color:var(--tinta); }
.riel__sec[aria-current]{ background:var(--vacio); color:var(--tinta); }
.riel__sec[aria-current] .material-icons-outlined{ color:var(--acento); }
.riel__mesa{ display:none; }
/* EN LA COMPUTADORA: la barra de arriba llega hasta la mesa y una línea muy sutil, con su sombra, separa
   la mesa del contenido de arriba abajo. Arriba a la derecha, sobre la mesa y a la altura del buscador
   (--cab-alto lo mide el panel): ocultar la mesa, el tema, el idioma y el usuario. */
@media (min-width:901px){
  /* LA DIVISIÓN ES UNA SOLA PIEZA de arriba abajo, encima de la barra y del contenido: una línea recta y la
     misma sombra en toda su altura (antes eran dos y en la unión con la barra se veía un escalón). Se mueve
     con la mesa al ocultarla. */
  .marco .division{ display:block; position:fixed; top:0; bottom:0; right:round(var(--mesa), 1px); z-index:2; width:26px; pointer-events:none;
    border-right:1px solid color-mix(in srgb, var(--tinta) 13%, transparent); background:linear-gradient(90deg, transparent, var(--sombra-mesa)); transition:opacity .3s var(--curva); }
  .mesa-oculta .division{ opacity:0; }
  .marco{ --sombra-mesa:rgba(4,8,12,.34); }
  html[data-tema="claro"] .marco{ --sombra-mesa:rgba(26,38,51,.11); }
  .mesa .mesa__in{ padding-top:calc(var(--cab-alto, 76px) + 16px); }
  /* como en las demás apps: cada ícono en su círculo y el usuario en su óvalo; aquí, de vidrio sobre la foto */
  .marco .accesos{ position:absolute; top:50%; right:calc(14px - round(var(--mesa), 1px)); transform:translateY(-50%); gap:8px; }
  .marco .accesos :is(.pz-tema-btn, .idioma, .mesa-volver){ background:rgba(16,24,33,.42); border:1px solid rgba(234,223,206,.2); color:rgba(234,223,206,.86);
    backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); }
  .marco .accesos :is(.pz-tema-btn, .idioma, .mesa-volver){ width:38px; height:38px; border-radius:50%; }
  .marco .accesos :is(.pz-tema-btn, .idioma, .mesa-volver):hover{ border-color:rgba(234,223,206,.45); color:#FFFFFF; }
  /* sobre la foto, la pastilla de ARIA tal cual: transparente con su filete, la letra blanca con sombra */
  .marco .accesos .ses{ background:rgba(13,20,27,.56); border-color:rgba(234,223,206,.24); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); }
  .marco .accesos .ses__disco{ background:#005565; border-color:#2A93A8; }
  .marco .accesos .ses__yo{ display:inline; color:#FFFFFF; text-shadow:0 1px 10px rgba(10,16,22,.55); }
  .marco .accesos .ses__salir{ color:rgba(234,223,206,.58); }
  .marco .accesos .ses__salir:hover{ color:#FFFFFF; }
  .marco .accesos .ses__cambiar{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.15); color:rgba(234,223,206,.75); }

  /* LA MESA SE OCULTA: su ancho baja a cero y la galería gana ese campo; vuelve con su botón de arriba */
  /* el mismo tiempo y la misma curva que el viaje de las tarjetas (galeria.js, VIAJE) */
  .marco.animando{ transition:--mesa .5s var(--curva); }
  .marco.mesa-oculta{ --mesa:0px; }
  /* lo de adentro de la mesa tiene siempre su ancho de mesa abierta, pegado a la derecha: no se aprieta ni
     se reacomoda mientras la mesa crece o se achica. Al ocultar, se apaga primero; al mostrar, aparece
     cuando ya hay lugar. */
  .mesa{ clip-path:inset(0); }   /* lo que sobra a la izquierda no asoma bajo la galería */
  .mesa .mesa__in{ left:auto; width:var(--mesa-abierta); }
  .mesa .mesa__lugar{ left:auto; width:calc(var(--mesa-abierta) - 146px); }
  .mesa__in, .mesa__lugar{ transition:opacity .32s var(--curva) .2s, visibility .32s .2s; }
  .mesa-oculta :is(.mesa__in, .mesa__lugar){ opacity:0; visibility:hidden; transition-duration:.18s; transition-delay:0s; }
  /* nada de la barra se mueve: lo que la mesa deja libre queda como relleno a la derecha de la barra */
  .marco .cab{ padding-right:calc(var(--cab-lado) + var(--mesa-abierta) - round(var(--mesa), 1px)); }
  .marco .accesos .mesa-volver{ display:inline-grid; }
  .mesa-volver__mostrar, .mesa-oculta .mesa-volver__ocultar{ display:none; }
  .mesa-oculta .mesa-volver__mostrar{ display:inline; }
  .mesa-volver b{ display:none; }
  .mesa-oculta .mesa-volver b:not([hidden]){ display:block; }

  .lado{ grid-column:2; } .mesa{ grid-column:3; }
  .marco{ --riel:0px; }
  .marco .cab{ padding-left:calc(var(--hueco) + 70px); }
  .marco .cab.buscando .buscar{ left:calc(var(--hueco) + 70px); }
  .riel__pie{ gap:6px; }
}
/* EL MENÚ VA EN LA BARRA (Luis, 2026-10-11): no hay riel; arriba a la izquierda, a la altura del título,
   sólo la estrella, en todos los tamaños (en el celular ya no hay barra abajo). Al pasar, al tocarla o con
   el teclado, la cápsula se descubre desde la estrella hacia abajo y las secciones entran una tras otra; al salir se van en orden inverso y la cápsula se recoge. Cerrada no se
   ve su contorno. Todo con transform, opacidad y clip-path: nada mueve el diseño. */
.marco{ --abre:cubic-bezier(.16,1,.3,1); }
.marco .riel{ position:fixed; left:18px; top:calc((var(--cab-alto, 76px) - 60px) / 2); z-index:36; width:60px; height:auto; gap:6px; padding:9px 0 12px;
  background:none; border:0; pointer-events:none; }
.marco .riel::before{ content:''; position:absolute; inset:0; z-index:-1; border:1px solid var(--linea); border-radius:30px;
  background:color-mix(in srgb, var(--hoja) 86%, transparent); box-shadow:0 24px 50px -20px rgba(0,0,0,.7);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  clip-path:inset(0 0 calc(100% - 60px) 0 round 30px); opacity:0; pointer-events:none;
  transition:clip-path .38s var(--curva) .12s, opacity .25s var(--curva) .22s; }
.marco .riel__marca{ width:42px; height:42px; margin:0 0 9px; pointer-events:auto; transition:transform .5s var(--abre); }
.marco .riel__marca img{ width:24px; height:24px; }
/* cada pieza entra en su turno (--n, lo pone el panel) y al cerrar se va en el orden contrario */
.marco .riel > :not(.riel__marca){ opacity:0; transform:translateY(-14px) scale(.85); pointer-events:none;
  transition:opacity .2s var(--curva) calc((6 - var(--n, 0)) * .035s), transform .25s var(--curva) calc((6 - var(--n, 0)) * .035s); }
.marco .riel__sec{ width:44px; height:44px; padding:0; border-radius:50%; justify-content:center; }
.marco .riel__sec .material-icons-outlined{ font-size:21px; }
.marco .riel__sec span:not(.material-icons-outlined){ display:none; }
.marco .riel__sec b{ top:1px; right:-3px; }
/* abierta: al tocar la estrella (.abierta), con el teclado y, donde hay cursor, al pasar */
.marco:not(.listo) .riel > *, .marco:not(.listo) .riel::before{ transition:none !important; }
.marco .riel:is(.abierta, :focus-visible, :has(:focus-visible))::before{ clip-path:inset(0 round 30px); opacity:1; pointer-events:auto;
  transition:clip-path .62s var(--abre), opacity .3s var(--curva); }
.marco .riel:is(.abierta, :focus-visible, :has(:focus-visible)) .riel__marca{ transform:rotate(45deg); }
.marco .riel:is(.abierta, :focus-visible, :has(:focus-visible)) > :not(.riel__marca){ opacity:1; transform:none; pointer-events:auto;
  transition:opacity .4s var(--abre) calc(.08s + var(--n, 0) * .06s), transform .6s var(--abre) calc(.08s + var(--n, 0) * .06s); }
@media (hover:hover){
  .marco .riel:hover::before{ clip-path:inset(0 round 30px); opacity:1; pointer-events:auto; transition:clip-path .62s var(--abre), opacity .3s var(--curva); }
  .marco .riel:hover .riel__marca{ transform:rotate(45deg); }
  .marco .riel:hover > :not(.riel__marca){ opacity:1; transform:none; pointer-events:auto;
    transition:opacity .4s var(--abre) calc(.08s + var(--n, 0) * .06s), transform .6s var(--abre) calc(.08s + var(--n, 0) * .06s); }
}
/* «Agregar»: igual que las secciones, el primero de abajo */
.marco .riel__agregar[hidden]{ display:none; }
/* el tema y el idioma, tras una rayita */
.marco .riel__ajustes{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:4px; padding-top:10px; border-top:1px solid var(--linea); width:40px; }
.marco .riel__ajustes .cab__tema{ display:inline-flex; }
.marco .riel__ajustes :is(.pz-tema-btn, .idioma){ width:40px; height:40px; padding:0; border-radius:50%; display:inline-grid; place-items:center; cursor:pointer;
  background:none; border:1px solid var(--linea); color:var(--tinta-2); box-shadow:none; }
.marco .riel__ajustes :is(.pz-tema-btn, .idioma):hover{ border-color:var(--linea-2); color:var(--tinta); background:var(--vacio); }
.marco .riel__ajustes .pz-tema-btn .material-icons-outlined{ font-size:18px; color:inherit; }
.division{ display:none; }
.accesos{ display:flex; align-items:center; gap:8px; }

/* LA BARRA DE ARRIBA del contenido */
.lado{ min-width:0; display:flex; flex-direction:column; }
/* EL CONTENIDO SE DESPLAZA EN SU PROPIO ESPACIO, debajo de la barra (Luis, 2026-10-09): la barra es
   translúcida sobre la foto de atrás, y lo que sube se corta en su borde, sin verse a través ni
   desvanecerse. La página en sí no se mueve. */
.lado{ height:100vh; height:100dvh; }
.lado > .cab{ flex:none; }
.app{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.cab{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:18px; min-height:76px; padding:12px var(--hueco); }
/* el fondo de la barra (y su línea) se desvanece hacia la derecha donde entra la foto de la mesa: sin escalón */
.cab::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-bottom:1px solid var(--linea);
  background:var(--velo-barra); backdrop-filter:blur(8px) saturate(1.2); -webkit-backdrop-filter:blur(8px) saturate(1.2); }
.cab{ container-type:inline-size; container-name:barra; }
.cab__tit{ flex:1; min-width:0; display:flex; align-items:center; gap:14px; }
.cab__textos{ flex:1; min-width:0; }
/* la ruta, debajo del nombre: entera; si no cabe, baja de renglón */
.cab__ruta{ display:flex; flex-wrap:nowrap; align-items:center; margin:3px 0 0 -7px; font-size:12.5px; min-width:0; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; }
.cab__ruta::-webkit-scrollbar{ height:0; }
/* sin ruta (la galería, enlaces, envíos) queda su lugar vacío: así en el celular lo de la derecha no se corre */
.cab__ruta:empty{ display:none; }
.cab__ruta.corrida{ -webkit-mask-image:linear-gradient(90deg, transparent, #000 28px); mask-image:linear-gradient(90deg, transparent, #000 28px); }
.cab__ruta a{ display:inline-flex; align-items:center; gap:5px; padding:2px 7px; border-radius:99px; color:var(--tinta-2); text-decoration:none; transition:background .2s, color .2s; }
.cab__ruta a:hover{ background:var(--vacio); color:var(--tinta); }
.cab__ruta a .material-icons-outlined{ font-size:15px; }
.cab__sep{ font-size:16px; color:var(--tinta-3); opacity:.6; }
.cab__paso{ display:inline-flex; align-items:center; white-space:nowrap; }
.cab__fila{ display:flex; align-items:baseline; gap:14px; min-width:0; }
.cab h1{ margin:0; min-width:0; font-family:var(--serif); font-weight:400; font-size:26px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  /* la serif baja más que su renglón: el recorte no se come la cola de la g, la p ni la y, y el alto del renglón queda igual */
  padding-bottom:.16em; margin-bottom:-.16em; }
/* el conteo de lo que hay, en la esquina de arriba del contenido: la cifra en Marcellus y su palabra en chico */
/* la fila de arriba del contenido: los filtros a la izquierda (si hay) y las cifras en la esquina derecha */
.app__cabeza{ display:flex; align-items:center; gap:12px; min-height:22px; margin:-8px 0 10px; }
.app__cabeza:empty{ display:none; }
.app__cabeza .filtros{ margin:0; }
.app__cuentas{ display:flex; align-items:baseline; gap:14px; margin-left:auto; flex:none; }
/* editar la carpeta: un círculo chico junto a su nombre, que no mueve nada de la barra */
.cab__editar{ align-self:center; width:30px; height:30px; flex:none; padding:0; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:none; border:1px solid var(--linea); color:var(--tinta-2); transition:border-color .2s, color .2s, background .2s; }
.cab__editar:hover{ border-color:var(--linea-2); color:var(--tinta); background:var(--vacio); }
.cab__editar .material-icons-outlined{ font-size:15px; }
.cab__cuenta{ display:inline-flex; align-items:baseline; gap:6px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-3); white-space:nowrap; }
.cab__cuenta b{ font-weight:400; font-family:var(--serif); font-size:17px; letter-spacing:0; color:var(--tinta); }
.cab__cuenta + .cab__cuenta{ padding-left:16px; border-left:1px solid var(--linea); }
.cab__acc{ display:flex; align-items:center; gap:8px; flex:none; }
/* el menú de «Agregar» */
.menu-agregar{ position:fixed; z-index:90; min-width:250px; padding:6px; border-radius:16px; background:var(--hoja); color:var(--tinta); border:1px solid var(--linea-2); box-shadow:var(--sombra);
  animation:menuBaja .28s cubic-bezier(.16,1,.3,1); transform-origin:top right; }
@keyframes menuBaja{ from{ opacity:0; transform:translateY(-6px) scale(.97); } }
.menu-agregar button{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; border:0; border-radius:11px; background:none; color:inherit; text-align:left; cursor:pointer; }
.menu-agregar button:hover{ background:var(--vacio); }
.menu-agregar button > .material-icons-outlined{ width:34px; height:34px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:18px; background:var(--vacio); color:var(--acento); }
.menu-agregar button span:last-child{ display:grid; line-height:1.25; }
.menu-agregar b{ font-weight:500; font-size:13.5px; }
.menu-agregar small{ font-size:11.5px; color:var(--tinta-3); }
.cab__vista{ display:flex; align-items:center; gap:8px; }
.cab__vista:empty{ display:none; }
.bt{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 16px; border-radius:99px; border:1px solid var(--linea-2); background:transparent;
  color:var(--tinta); font-size:13px; white-space:nowrap; transition:background .2s, border-color .2s; }
.bt .material-icons-outlined{ font-size:18px; }
.bt:hover{ background:var(--vacio); }
.bt--lleno{ background:var(--relleno); border-color:var(--relleno); color:var(--relleno-tinta); }
.bt--lleno:hover{ background:color-mix(in srgb, var(--relleno) 80%, #000); }
.buscar{ position:relative; display:flex; align-items:center; gap:8px; height:38px; width:250px; padding:0 14px; border-radius:99px; background:var(--campo); border:1px solid var(--linea); }
.buscar > .material-icons-outlined{ font-size:18px; color:var(--tinta-3); }
.buscar input{ flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; font-size:13px; color:var(--tinta); }
.buscar input::placeholder{ color:var(--tinta-3); }
.buscar input::-webkit-search-cancel-button{ display:none; }
.buscar:focus-within{ border-color:var(--acento); }
.buscar input:focus-visible{ box-shadow:none !important; outline:none; }
.cab__tema{ display:inline-flex; }
.cab .pz-tema-btn, .cab .cab__lupa{ width:38px; height:38px; padding:0; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  background:var(--campo); border:1px solid var(--linea); color:var(--tinta-2); box-shadow:none; transition:border-color .2s, color .2s; }
.cab .pz-tema-btn:hover, .cab__lupa:hover{ border-color:var(--linea-2); color:var(--tinta); }
.cab .pz-tema-btn .material-icons-outlined, .cab__lupa .material-icons-outlined{ font-size:17px; color:inherit; }
/* LA PASTILLA DEL USUARIO, LA MISMA DE ARIA, CIMA, VIVERO Y GOLFITO: cápsula con su filete, la flechita de
   suplantar a la izquierda (sólo para quien puede), el disco con la persona, el nombre y salir sin caja */
.ses{ display:inline-flex; align-items:center; gap:8px; flex-wrap:nowrap; height:38px; padding:0 12px 0 6px; min-width:0; border-radius:9999px; background:transparent; border:1px solid var(--linea); }
.ses__disco{ width:22px; height:22px; border-radius:9999px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(0,109,130,.30); border:1px solid rgba(0,109,130,.50); color:#FFFFFF; }
.ses__yo{ font:500 12.5px/1 var(--sans); color:var(--tinta); white-space:nowrap; max-width:150px; overflow:hidden; text-overflow:ellipsis; }
.ses__salir{ display:inline-flex; align-items:center; margin-left:2px; padding:0; border:0; background:none; color:var(--tinta-3); cursor:pointer; }
.ses__salir:hover{ color:var(--tinta); }
/* entrar como otra persona: la flechita en la pastilla y su lista, como en ARIA */
.ses__cambiar{ width:22px; height:22px; border-radius:9999px; flex:none; padding:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  background:var(--vacio); border:1px solid var(--linea); color:var(--tinta-2); transition:color .2s, background-color .2s; }
.ses__cambiar:hover{ color:var(--tinta); }
.ses__cambiar[hidden]{ display:none !important; }
.ses--prestada{ box-shadow:0 0 0 2px var(--acento); }
.supl-menu{ position:fixed; z-index:95; max-height:min(60vh, 420px); overflow-y:auto; padding:6px; border-radius:16px; background:var(--hoja); color:var(--tinta);
  border:1px solid var(--linea-2); box-shadow:var(--sombra); }
.supl-fila{ display:flex; align-items:center; gap:8px; width:100%; padding:9px 12px; border:0; border-radius:10px; background:none; color:var(--tinta); font-size:13px; text-align:left; cursor:pointer; }
.supl-fila:hover{ background:var(--vacio); }
.supl-fila--volver{ color:var(--acento); border-bottom:1px solid var(--linea); border-radius:10px 10px 0 0; margin-bottom:4px; }
.supl-fila--volver .material-icons-outlined{ font-size:17px; }
.supl-nota{ margin:0; padding:10px 12px; font-size:12.5px; color:var(--tinta-2); }
/* sólo en pruebas: ver como administrador o como vendedor */
.modo{ display:inline-flex; }

.cab .cab__lupa{ display:none; }
.cab .ver-como{ flex:none; }
/* el idioma: un círculo como el del tema, con la sigla del idioma al que se pasa */
.idioma{ width:40px; height:40px; padding:0; border-radius:50%; flex:none; display:inline-grid; place-items:center; cursor:pointer;
  background:var(--campo); border:1px solid var(--linea); color:var(--tinta-2); font:400 11px/1 var(--sans); letter-spacing:.08em; transition:border-color .2s, color .2s; }
.idioma:hover{ border-color:var(--linea-2); color:var(--tinta); }
.riel__pie{ position:fixed; left:18px; bottom:16px; z-index:36; display:flex; }
.riel__pie .modo{ height:auto; display:flex; gap:3px; padding:3px; border-radius:99px; border:1px solid var(--linea); background:var(--campo); }
.riel__pie .modo button{ height:20px; padding:0 8px; border:0; border-radius:99px; background:transparent; color:var(--tinta-2);
  font:400 8.5px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; }
.riel__pie .modo button:hover{ color:var(--tinta); }
.riel__pie .modo button[aria-pressed="true"]{ background:var(--relleno); color:var(--relleno-tinta); }
.resultados{ position:absolute; top:calc(100% + 8px); right:0; width:min(380px, 88vw); background:var(--hoja); color:var(--tinta); border:1px solid var(--linea); border-radius:14px;
  box-shadow:var(--sombra); padding:8px; max-height:60vh; overflow:auto; z-index:40; }
.resultados h4{ margin:8px 10px 4px; font-weight:400; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--tinta-3); }
.resultado{ display:flex; gap:10px; align-items:center; width:100%; text-align:left; border:0; background:transparent; padding:8px 10px; border-radius:10px; color:inherit; text-decoration:none; }
.resultado:hover{ background:var(--vacio); }
.resultado i{ width:38px; height:38px; border-radius:8px; background:var(--hoja-2) center/cover; flex:none; display:grid; place-items:center; font-style:normal; color:var(--tinta-3); }
.resultado small{ display:block; color:var(--tinta-2); font-size:12px; }

/* EL CONTENIDO */
.app{ padding:22px var(--hueco) 110px; min-width:0; }

/* ── LA MESA: el carrusel de MORFO detrás; cada pieza lleva su propio vidrio oscuro y entre una
   y otra se ve la foto. Arriba y abajo, una sombra suave para el título y la leyenda. Lo de
   adentro va siempre en crema sobre vidrio: no cambia con el tema. ── */
.mesa{ position:sticky; top:0; height:100vh; height:100dvh; color:#EADFCE; }
/* LA FOTO DE ATRÁS ES UNA CAPA DEL MARCO, fija a la derecha, siempre visible (en el celular también,
   detrás del contenido): mide lo que la mesa más --foto-extra, entra por debajo de la galería sin mover
   nada y se funde con el suelo de cada tema a lo largo de --degradado. Como su alto es la pantalla y su
   ancho cambia parejo, al angostar sólo se recorta por los lados: nunca se acerca ni brinca. */
/* la barra de arriba es un velo: deja ver la foto, apenas más oscuro que lo de alrededor */
.marco{ --velo-barra:linear-gradient(rgba(8,12,17,.06), rgba(8,12,17,.06)), color-mix(in srgb, var(--suelo) 16%, transparent); }
html[data-tema="claro"] .marco{ --velo-barra:linear-gradient(rgba(26,38,51,.05), rgba(26,38,51,.05)), color-mix(in srgb, var(--suelo) 40%, transparent); }
/* --g1…--g5: cuánto suelo queda en cada sexto del degradado (1 − t², la intensidad que escogió Luis) */
.marco{ --fin-contenido:var(--foto-extra); --foto-extra:730px; --degradado:1040px; --g1:97%; --g2:89%; --g3:75%; --g4:56%; --g5:31%; }
.lado{ position:relative; z-index:1; }
.mesa__fotos, .mesa__tinte{ position:fixed; top:0; bottom:0; right:0; width:calc(var(--mesa-abierta) + var(--foto-extra)); }
.mesa__fotos{ background:#141D27; overflow:hidden; }
.mesa__foto{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .62s cubic-bezier(.22,.9,.24,1); }
.mesa__foto.activa{ opacity:1; }
/* el degradado: largo y suave (con varios pasos, para que no se vea el corte), más las sombras de arriba y abajo */
.mesa__tinte{ pointer-events:none; background:
  linear-gradient(90deg, color-mix(in srgb, var(--suelo) var(--velo, 0%), transparent) calc(var(--fin-contenido) - 140px), transparent var(--fin-contenido)),
  linear-gradient(90deg, var(--suelo) 0, color-mix(in srgb, var(--suelo) var(--g1), transparent) calc(var(--degradado) / 6),
    color-mix(in srgb, var(--suelo) var(--g2), transparent) calc(var(--degradado) * 2 / 6), color-mix(in srgb, var(--suelo) var(--g3), transparent) calc(var(--degradado) * 3 / 6),
    color-mix(in srgb, var(--suelo) var(--g4), transparent) calc(var(--degradado) * 4 / 6), color-mix(in srgb, var(--suelo) var(--g5), transparent) calc(var(--degradado) * 5 / 6),
    color-mix(in srgb, var(--suelo) 0%, transparent) var(--degradado)),
  linear-gradient(180deg, rgba(12,18,25,.62) 0%, rgba(12,18,25,0) 24%, rgba(20,29,39,0) 74%, rgba(20,29,39,.5) 100%); }
/* la foto se funde con el fondo del contenido, sutil, por su borde izquierdo (en cada tema, con su suelo) */
/* el nombre de la foto, pegado al borde derecho: lejos del difuminado de la izquierda */
.mesa__lugar{ position:absolute; left:130px; right:16px; bottom:14px; z-index:2; text-align:right; font-size:11px; color:rgba(244,237,226,.94); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 1px 8px rgba(0,0,0,.6); }
.mesa__in{ position:absolute; inset:0 0 38px; z-index:2; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:20px 16px 16px 40px;
  --tinta:#F4EDE2; --tinta-2:rgba(244,237,226,.95); --tinta-3:rgba(244,237,226,.84); --vacio:rgba(234,223,206,.14); --acento:#A9DBE4;
  --pieza:rgba(14,21,29,.7); --pieza-borde:rgba(234,223,206,.24); color:var(--tinta); }
.mesa__cab{ display:flex; align-items:flex-start; gap:8px; padding:0 4px; text-shadow:0 1px 3px rgba(0,0,0,.9), 0 0 24px rgba(0,0,0,.8), 0 2px 40px rgba(0,0,0,.6); }
.mesa__cab h2{ margin:0; font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.1; }
.mesa__cab p{ margin:2px 0 4px; font-size:12px; color:var(--tinta); }
.mesa__cerrar{ display:none; width:34px; height:34px; border-radius:50%; border:0; padding:0; place-items:center; background:var(--pieza); color:var(--tinta);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.mesa__cerrar .material-icons-outlined{ font-size:18px; }
/* las últimas fotos puestas, en abanico: grandes y con su sombra, para que se separen de la foto de atrás */
.mesa__abanico{ position:relative; height:128px; flex:none; margin:4px 0 2px; }
.mesa__abanico span{ position:absolute; left:50%; top:50%; width:126px; height:88px; margin:-44px 0 0 -63px; background:#1A2633 center / cover;
  box-shadow:0 18px 34px -12px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.14);
  transform:translateX(calc(var(--i) * 52px)) rotate(calc(var(--i) * 7deg)); transition:transform .45s var(--curva); }
.mesa:hover .mesa__abanico span{ transform:translateX(calc(var(--i) * 64px)) rotate(calc(var(--i) * 9deg)); }
.mesa__cosas{ display:grid; gap:4px; }
.mesa__cosa, .mesa__vacia, .mesa__soltar, .mesa__vaciar{ background:var(--pieza); border:1px solid var(--pieza-borde);
  backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5); text-shadow:0 1px 6px rgba(0,0,0,.35); }
.mesa__cosa{ display:flex; align-items:center; gap:9px; padding:4px; border-radius:12px; }
.mesa__cosa.llega{ animation:mesaLlega .6s var(--curva); }
@keyframes mesaLlega{ from{ opacity:0; transform:translateY(-10px) scale(.96); } }
.mesa__cosa i{ width:32px; height:32px; border-radius:9px; flex:none; background:rgba(234,223,206,.1) center / cover; display:grid; place-items:center; color:var(--tinta-3); }
.mesa__cosa > span{ flex:1; min-width:0; display:grid; line-height:1.3; }
.mesa__cosa b{ font-weight:400; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mesa__cosa small{ font-size:11.5px; color:var(--tinta-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mesa__quitar{ width:26px; height:26px; flex:none; border-radius:50%; border:0; padding:0; display:grid; place-items:center; background:rgba(234,223,206,.12); color:var(--tinta-2); }
.mesa__quitar:hover{ background:#EADFCE; color:#1A2633; }
.mesa__quitar .material-icons-outlined{ font-size:15px; }
.mesa__vacia{ display:grid; gap:8px; padding:0; background:none !important; border:0 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
/* la mesa vacía: dos botones grandes, cada uno con su vidrio, para empezar */
.mesa__escoger{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; border-radius:18px; border:1px solid var(--pieza-borde); background:var(--pieza);
  color:var(--tinta); text-align:left; cursor:pointer; backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); transition:background .2s, border-color .2s; }
.mesa__escoger:hover{ background:rgba(14,21,29,.84); border-color:rgba(156,207,217,.5); }
.mesa__escoger-txt{ display:grid; line-height:1.3; min-width:0; }
.mesa__escoger b{ font-weight:400; font-family:var(--serif); font-size:15.5px; }
.mesa__escoger small{ font-size:11.5px; color:var(--tinta-2); }
.mesa__escoger .mesa__mas{ width:32px; height:32px; flex:none; }
.mesa__escoger .mesa__mas .material-icons-outlined{ font-size:19px; }
.mesa__escoger--subir .mesa__mas{ background:rgba(234,223,206,.16); }
.mesa__mas{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#2A93A8; color:#fff; }
.mesa__mas .material-icons-outlined{ font-size:16px; }
.solo-cel{ display:none; }
/* «Escoger de la galería»: los + se encienden un momento */
body.escogiendo .mas{ opacity:1; transform:none; animation:masBrilla 1s var(--curva) 3; }
@keyframes masBrilla{ 50%{ background:#2A93A8; color:#fff; box-shadow:0 0 0 7px rgba(42,147,168,.35); transform:scale(1.12); } }
.mesa__soltar{ display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:14px; font-size:12px !important; border-style:dashed; border-color:rgba(234,223,206,.32);
  color:var(--tinta); font-size:12.5px; cursor:pointer; transition:background .2s, border-color .2s; }
.mesa__soltar u{ color:var(--acento); text-decoration:none; }
.mesa__soltar:hover, .mesa.encima .mesa__soltar{ background:rgba(16,24,33,.82); border-color:var(--acento); color:var(--tinta); }
.mesa.encima .mesa__in{ outline:2px dashed rgba(156,207,217,.7); outline-offset:-10px; border-radius:22px; }
/* LOS DOS CAMINOS: uno sobre el otro, a todo el ancho; cada uno con su ícono en un círculo, su nombre en
   Marcellus, una línea que dice qué hace y la flecha que se adelanta al pasar */
.mesa__acc{ display:grid; gap:8px; margin-top:auto; }
.mesa__accion{ display:flex; align-items:center; gap:12px; width:100%; min-height:58px; padding:8px 16px 8px 9px; border-radius:99px; border:0; text-align:left; cursor:pointer;
  background:#F4EDE2; color:#1A2633; box-shadow:0 16px 32px -16px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.5);
  transition:transform .25s var(--curva), box-shadow .25s var(--curva), background .2s; }
.mesa__accion > .material-icons-outlined:first-child{ width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:19px; background:rgba(26,38,51,.09); }
.mesa__accion-txt{ flex:1; min-width:0; display:grid; gap:1px; line-height:1.2; }
.mesa__accion-txt b{ font-weight:400; font-family:var(--serif); font-size:16px; }
.mesa__accion-txt small{ font-size:11.5px; opacity:.72; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mesa__accion-ir{ flex:none; font-size:18px !important; opacity:.55; transition:transform .25s var(--curva), opacity .2s; }
.mesa__accion:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 20px 36px -16px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.6); }
.mesa__accion:hover:not(:disabled) .mesa__accion-ir{ transform:translateX(3px); opacity:1; }
.mesa__accion--envio{ background:linear-gradient(135deg, #2A93A8, #006D82); color:#FFFFFF; box-shadow:0 16px 32px -16px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.18); }
.mesa__accion--envio > .material-icons-outlined:first-child{ background:rgba(255,255,255,.16); }
.mesa__accion:disabled{ background:var(--pieza); color:rgba(244,237,226,.7); box-shadow:inset 0 0 0 1px var(--pieza-borde); cursor:default;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.mesa__accion:disabled > .material-icons-outlined:first-child{ background:rgba(234,223,206,.1); }
.mesa__vaciar{ width:32px; height:32px; flex:none; margin-left:auto; border-radius:50%; padding:0; display:grid; place-items:center; color:var(--tinta); cursor:pointer; }
.mesa__vaciar .material-icons-outlined{ font-size:18px; }
/* arriba a la derecha (sólo en la computadora): ocultar la mesa y, ya oculta, traerla de vuelta con su cifra */
.mesa-volver{ display:none; position:relative; border-radius:50%; padding:0; place-items:center; cursor:pointer; }
.mesa-volver .material-icons-outlined{ font-size:18px; }
.mesa-volver b{ position:absolute; top:-2px; right:-3px; min-width:16px; height:16px; padding:0 4px; border-radius:99px; background:var(--relleno); color:#FFFFFF; font:400 9.5px/16px var(--sans); }
.mesa__cerrar{ margin-left:auto; } .mesa__vaciar + .mesa__cerrar{ margin-left:0; }
.mesa__vaciar:hover{ background:rgba(179,38,30,.85); border-color:transparent; color:#FFFFFF; }
.mesa-velo{ display:none; }

/* ── botones ── */
.redondo{ width:36px; height:36px; border-radius:50%; border:1px solid var(--linea); background:var(--campo); display:grid; place-items:center; color:var(--tinta-2); padding:0; }
.redondo:hover{ color:var(--tinta); border-color:var(--linea-2); }
.boton{ display:inline-flex; align-items:center; gap:8px; border:1px solid transparent; border-radius:999px; padding:10px 18px; font-size:13.5px;
  letter-spacing:.03em; background:var(--relleno); color:var(--relleno-tinta); text-decoration:none; white-space:nowrap; transition:background .2s, border-color .2s; }
.boton:hover{ background:color-mix(in srgb, var(--relleno) 82%, #000); }
.boton--suave{ background:transparent; color:var(--tinta); border-color:var(--linea-2); }
.boton--suave:hover{ background:var(--vacio); }
.boton--peligro{ background:var(--rojo); color:#fff; }
.boton--peligro:hover{ background:#8f1e18; }
.boton:disabled{ opacity:.5; cursor:default; }
.boton .material-icons-outlined{ font-size:18px; }

.filtros{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; align-items:center; }
.chip{ border:1px solid var(--linea); background:transparent; color:var(--tinta-2); border-radius:999px; padding:6px 14px; font-size:12.5px; }
.chip:hover{ color:var(--tinta); border-color:var(--linea-2); }
.chip[aria-pressed="true"]{ background:var(--relleno); border-color:var(--relleno); color:var(--relleno-tinta); }
.chip b{ font-weight:400; opacity:.7; margin-left:4px; }
/* ── LO QUE SE RECORRE: los títulos de cada grupo, las carpetas y los archivos ── */
.tit{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; min-height:36px; margin:28px 0 12px; font-weight:400; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tinta-3); }
.app > .tit:first-child, .r2-aviso + .tit{ margin-top:4px; }
.pilas + .cuadros, .pilas + .lista, .lista + .cuadros, .lista + .lista, .pilas + .filtros, .lista + .filtros{ margin-top:30px; }
.filtros--archivos{ margin:0 0 12px; }
.tit a{ font-family:var(--serif); font-size:21px; letter-spacing:0; text-transform:none; color:var(--tinta); text-decoration:none; }
.tit a:hover{ color:var(--acento); }
.tit .num{ letter-spacing:.04em; opacity:.8; }
.tit .num:empty{ display:none; }
.tit__ayuda{ letter-spacing:0; text-transform:none; font-size:12px; opacity:.85; }
.tit__der{ margin-left:auto; display:flex; align-items:center; gap:10px; letter-spacing:0; text-transform:none; }
.tit .filtros{ margin:0; }
.ver-como{ display:flex; gap:2px; padding:3px; border-radius:10px; background:var(--vacio); }
.ver-como button{ width:32px; height:28px; border:0; border-radius:7px; background:none; color:var(--tinta-3); display:grid; place-items:center; padding:0; }
.ver-como button .material-icons-outlined{ font-size:18px; }
.ver-como button[aria-pressed="true"]{ background:var(--hoja); color:var(--tinta); box-shadow:0 2px 8px -4px rgba(0,0,0,.4); }

/* el + de la mesa: aparece al pasar; en el celular está siempre; lo puesto queda marcado */
.mas{ position:absolute; top:8px; left:8px; z-index:3; width:30px; height:30px; border-radius:50%; border:0; display:grid; place-items:center; padding:0;
  background:rgba(20,29,39,.62); color:#EADFCE; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transform:scale(.8); transition:opacity .2s, transform .25s var(--curva), background .2s; }
.mas .material-icons-outlined{ font-size:19px; }
/* en las tarjetas, el + acompaña el tamaño de la tarjeta */
:is(.pila, .pieza) > .mas{ width:clamp(22px, 15cqi, 32px); height:clamp(22px, 15cqi, 32px); top:clamp(5px, 4cqi, 10px); left:clamp(5px, 4cqi, 10px); }
:is(.pila, .pieza) > .mas .material-icons-outlined{ font-size:clamp(14px, 9.5cqi, 20px); }
.mas.puesto{ opacity:1; transform:none; background:#2A93A8; color:#fff; }
.pila:hover .mas, .pieza:hover .mas, .renglon:hover .mas, .mas:focus-visible{ opacity:1; transform:none; }
.mas:hover{ background:#2A93A8; color:#fff; }
@media (hover:none){ .mas{ opacity:1; transform:none; } }

/* UNA CARPETA, EN LA LÍNEA DE LAS TARJETAS DE LOS ENLACES: la foto grande arriba que se funde con la
   tarjeta y, encima de lo que se funde, el nombre en Marcellus y lo que tiene. Detrás asoman dos hojas,
   apenas: es una carpeta. Al pasar, la foto se acerca despacio.
   EL TAMAÑO: el zoom decide cuántas caben por renglón (--cols-pila, lo calcula el panel) y las tarjetas se
   estiran justas: nunca queda una franja vacía. Todo lo de adentro se mide contra el ancho de la propia
   tarjeta (cqi): crece o se achica la tarjeta entera, no sólo la letra. */
.pilas{ display:grid; grid-template-columns:repeat(var(--cols-pila, 4), minmax(0, 1fr)); gap:24px var(--pila-hueco); }
.app{ --pila-hueco:16px; --pieza-hueco:6px; }
.pila{ position:relative; min-width:0; margin-top:8px; container-type:inline-size; }
.pila::before, .pila::after{ content:''; position:absolute; top:-5px; left:10px; right:10px; height:5px; border:1px solid var(--linea); border-bottom:0; background:var(--hoja-2); pointer-events:none; }
.pila::after{ top:-9px; left:20px; right:20px; height:4px; opacity:.55; }
.pila > a{ position:relative; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--linea); background:var(--hoja); text-decoration:none; color:inherit;
  box-shadow:var(--sombra-carpeta); transition:border-color .25s; }
.pila:hover > a{ border-color:var(--linea-2); }
.pila__foto{ position:relative; display:grid; place-items:center; aspect-ratio:4 / 3; background:linear-gradient(160deg, #005565 0%, #1A2633 78%) center / cover; color:rgba(234,223,206,.5);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,.5) 78%, transparent 100%); mask-image:linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,.5) 78%, transparent 100%);
  transition:transform 1.4s var(--curva), filter .3s; }
.pila:hover .pila__foto{ transform:scale(1.05); }
.pila__foto .material-icons-outlined{ font-size:clamp(20px, 15cqi, 52px); }
.pila.puesto .pila__foto{ filter:brightness(.78) saturate(.8); }
.pila.puesto > a{ border-color:#2A93A8; }
.pila__txt{ position:relative; z-index:1; display:grid; gap:.15em; margin-top:-14cqi; padding:0 6.8cqi 6.4cqi; line-height:1.25; min-width:0; }
.pila__txt em{ font-style:normal; font-size:clamp(8.5px, 4.9cqi, 14px); letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-3); }
.pila__txt b{ font-weight:400; font-family:var(--serif); font-size:clamp(11px, 8.3cqi, 30px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pila__txt small{ font-size:clamp(9.5px, 5.6cqi, 17px); color:var(--tinta-2); }
/* sobre la foto de atrás: una sombra suave debajo de cada carpeta y de cada foto */
.marco{ --sombra-carpeta:0 18px 34px -16px rgba(0,0,0,.75); }
html[data-tema="claro"] .marco{ --sombra-carpeta:0 2px 4px rgba(26,38,51,.06), 0 20px 36px -18px rgba(26,38,51,.5); }
/* en el tema claro la foto se queda entera hasta casi el borde y el nombre va debajo, sobre papel cálido:
   letra oscura sobre papel, nunca sobre una foto lavada */
html[data-tema="claro"] .pila__foto{ -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 84%, transparent 100%); mask-image:linear-gradient(180deg, #000 0%, #000 84%, transparent 100%); }
html[data-tema="claro"] .pila > a{ border-color:var(--linea); background:#FAF6EF; }
html[data-tema="claro"] .pila__txt{ margin-top:-3cqi; padding-top:1cqi; }
.pieza{ box-shadow:var(--sombra-carpeta); }

/* EL TAMAÑO DE LAS TARJETAS (sólo en la galería): una barra que se arrastra; doble toque vuelve al de siempre */
.tamano{ display:flex; align-items:center; height:34px; padding:0 12px; border-radius:99px; background:var(--vacio); flex:none; }
.tamano[hidden]{ display:none; }
.tamano input{ -webkit-appearance:none; appearance:none; width:110px; height:18px; margin:0; background:none; cursor:pointer; }
.tamano input::-webkit-slider-runnable-track{ height:3px; border-radius:3px; background:linear-gradient(90deg, var(--acento) var(--p, 40%), var(--linea-2) var(--p, 40%)); }
.tamano input::-moz-range-track{ height:3px; border-radius:3px; background:linear-gradient(90deg, var(--acento) var(--p, 40%), var(--linea-2) var(--p, 40%)); }
.tamano input::-webkit-slider-thumb{ -webkit-appearance:none; width:15px; height:15px; margin-top:-6px; border-radius:50%; background:var(--tinta); border:0; box-shadow:0 1px 6px rgba(0,0,0,.35); transition:transform .15s; }
.tamano input::-moz-range-thumb{ width:15px; height:15px; border-radius:50%; background:var(--tinta); border:0; box-shadow:0 1px 6px rgba(0,0,0,.35); }
.tamano input:active::-webkit-slider-thumb{ transform:scale(1.2); }

/* en lista: un renglón */
.lista{ display:grid; border:1px solid var(--linea); border-radius:14px; overflow:hidden; background:var(--hoja); }
.renglon{ position:relative; border-top:1px solid var(--linea); cursor:pointer; min-width:0; }
.renglon:first-child{ border-top:0; }
.renglon:hover{ background:var(--vacio); }
.renglon > a, .renglon__a{ display:grid; grid-template-columns:36px minmax(0, 1fr) auto; align-items:center; gap:12px; padding:7px 48px 7px 50px; text-decoration:none; color:inherit; }
.renglon i{ width:36px; height:36px; border-radius:8px; background:var(--vacio) center / cover; display:grid; place-items:center; color:var(--tinta-3); font-style:normal; }
.renglon i b{ font-weight:400; font-size:9.5px; }
.renglon i .material-icons-outlined{ font-size:18px; }
.renglon span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.renglon small{ font-size:11.5px; color:var(--tinta-3); white-space:nowrap; }
.renglon .mas{ top:50%; left:10px; margin-top:-15px; background:var(--vacio); color:var(--tinta-2); backdrop-filter:none; }
.renglon .mas.puesto{ background:#2A93A8; color:#fff; }
.renglon .elegir{ position:absolute; top:50%; right:12px; margin-top:-13px; }
.renglon.elegida{ background:color-mix(in srgb, var(--acento) 12%, transparent); }

/* los archivos: cuadros parejos, para que quepan muchos */
.cuadros{ display:grid; grid-template-columns:repeat(var(--cols-pieza, 6), minmax(0, 1fr)); gap:var(--pieza-hueco); }
.pieza{ position:relative; aspect-ratio:1; min-width:0; border-radius:10px; overflow:hidden; background:var(--hoja-2); cursor:zoom-in; color:#fff; outline-offset:2px; container-type:inline-size; }
.pieza img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s var(--curva), filter .3s; }
.pieza:hover img{ transform:scale(1.05); }
.pieza.puesto img{ filter:brightness(.7) saturate(.8); }
.pieza:not(.pieza--doc)::after{ content:''; position:absolute; inset:0; z-index:1; border:1px solid rgba(255,255,255,.09); pointer-events:none; }
.pieza__nom{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:26px 10px 8px; background:linear-gradient(0deg, rgba(10,15,20,.74), transparent); color:#F4EDE2;
  font-size:clamp(9.5px, 8.6cqi, 16px); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; transform:translateY(6px); transition:opacity .3s, transform .35s var(--curva); pointer-events:none; }
.pieza:hover .pieza__nom, .pieza:focus-visible .pieza__nom{ opacity:1; transform:none; }
@media (hover:none){ .pieza__nom{ display:none; } }
.pieza .marca-video{ position:absolute; z-index:3; left:8px; bottom:8px; display:flex; gap:4px; align-items:center; font-size:11.5px; padding:3px 9px 3px 5px; border-radius:999px;
  background:rgba(20,29,39,.6); backdrop-filter:blur(6px); }
.pieza .marca-video .material-icons-outlined{ font-size:17px; }
.elegir{ position:absolute; top:8px; right:8px; z-index:3; width:26px; height:26px; border-radius:50%; border:1.5px solid rgba(255,255,255,.92); background:rgba(20,29,39,.3);
  display:grid; place-items:center; opacity:0; transition:opacity .2s; color:#fff; padding:0; }
.elegir .material-icons-outlined{ font-size:16px; opacity:0; }
.pieza:hover .elegir, .pieza:focus-within .elegir, .renglon:hover .elegir, .eligiendo .elegir{ opacity:1; }
.elegida .elegir{ background:var(--deep); border-color:var(--deep); opacity:1; }
.elegida .elegir .material-icons-outlined{ opacity:1; }
.pieza.elegida{ outline:2px solid var(--acento); }
.pieza .es-portada{ position:absolute; right:8px; bottom:8px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:rgba(20,29,39,.6); backdrop-filter:blur(6px); }
.pieza .es-portada .material-icons-outlined{ font-size:15px; color:#EADFCE; }
.pieza .sin-mini{ position:absolute; inset:0; display:grid; place-items:center; color:var(--tinta-3); }
/* un documento: su primera página de vistazo y, al pie, la extensión y el nombre */
.pieza--doc{ background:var(--hoja); border:1px solid var(--linea); color:var(--tinta); cursor:pointer; }
.pieza__hoja{ position:absolute; inset:0 0 28cqi 0; overflow:hidden; background:#FFFFFF center top / cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg, #000 62%, transparent 100%); mask-image:linear-gradient(180deg, #000 62%, transparent 100%); transition:transform 1.1s var(--curva); }
.pieza--doc:hover .pieza__hoja{ transform:scale(1.04); }
.pieza__hoja:not([style]):empty::before{ content:''; position:absolute; inset:14px 18px; background:repeating-linear-gradient(180deg, #E2D9CA 0 3px, transparent 3px 9px); opacity:.7; }
.doc-vistazo{ position:absolute; top:0; left:0; transform-origin:0 0; pointer-events:none; background:#FFFFFF; color:#1A2633; }
.doc-vistazo--word{ width:816px; }
.doc-vistazo--word section.docx{ box-shadow:none !important; margin:0 !important; }
.doc-vistazo--word section.docx ~ section.docx{ display:none; }
.doc-vistazo--excel{ width:620px; padding:10px; font:12px/1.35 var(--sans); }
.doc-vistazo--excel table{ border-collapse:collapse; }
.doc-vistazo--excel td{ border:1px solid #CFC3AF; padding:3px 6px; white-space:nowrap; }
.pieza__pie{ position:absolute; left:0; right:0; bottom:0; height:30cqi; display:flex; align-items:center; gap:6cqi; padding:0 8cqi; background:transparent; }
.pieza__pie .ext{ flex:none; padding:.2em .65em; border-radius:99px; background:var(--relleno); color:var(--relleno-tinta); font-size:clamp(7.5px, 7cqi, 12px); letter-spacing:.08em; }
.pieza__pie .nom{ min-width:0; font-size:clamp(9px, 9.4cqi, 16px); color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pieza--doc .elegir{ border-color:var(--linea-2); background:var(--campo); color:var(--tinta); }
.pieza--doc.puesto{ border-color:#2A93A8; }

/* ── LOS ENLACES Y LOS ENVÍOS: tarjetas apaisadas, con su foto y sus acciones a mano ── */
/* LA TARJETA DE UN ENLACE O UN ENVÍO: la foto grande a la izquierda que se funde con la tarjeta, y el texto
   encima de lo que se funde. En los envíos, los días que quedan van grandes sobre la foto. */
.tarjetas{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap:12px; }
.tarjeta{ position:relative; display:flex; min-height:168px; min-width:0; overflow:hidden; border:1px solid var(--linea); background:var(--hoja); transition:border-color .25s; }
.tarjeta:hover{ border-color:var(--linea-2); }
.tarjeta__foto{ position:absolute; top:0; bottom:0; left:0; width:52%; display:grid; place-items:center; background:linear-gradient(160deg, #005565 0%, #1A2633 78%) center / cover;
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 48%, rgba(0,0,0,.4) 76%, transparent 100%); mask-image:linear-gradient(90deg, #000 0%, #000 48%, rgba(0,0,0,.4) 76%, transparent 100%);
  transition:transform 1.4s var(--curva); }
.tarjeta:hover .tarjeta__foto{ transform:scale(1.04); }
.tarjeta__foto .estrella{ width:34px; opacity:.4; margin-right:30%; }
.tarjeta--envio .tarjeta__foto::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(13,20,27,.62), transparent 55%); }
.tarjeta__dias{ position:absolute; left:16px; bottom:12px; z-index:1; display:flex; align-items:baseline; gap:6px; line-height:1; color:#FFFFFF; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; text-shadow:0 2px 14px rgba(0,0,0,.6); }
.tarjeta__dias b{ font-weight:400; font-family:var(--serif); font-size:56px; letter-spacing:0; }
.tarjeta__txt{ position:relative; z-index:1; margin-left:44%; flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:16px 16px 14px 8px; line-height:1.3; }
.tarjeta__quien{ display:inline-flex; align-items:center; gap:5px; align-self:flex-start; padding:2px 9px 2px 5px; border-radius:99px; background:var(--vacio); font-size:11px; color:var(--tinta-2); }
.tarjeta__quien .material-icons-outlined{ font-size:14px; }
.tarjeta__txt b{ font-weight:400; font-family:var(--serif); font-size:20px; line-height:1.15; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tarjeta__txt small{ font-size:12px; color:var(--tinta-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tarjeta__meta{ display:flex; flex-wrap:wrap; gap:2px 12px; font-size:11.5px; color:var(--tinta-2); }
.tarjeta__url{ font-size:11.5px; color:color-mix(in srgb, var(--acento) 55%, var(--tinta)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tarjeta__acc{ display:flex; align-items:center; gap:6px; margin-top:6px; }
.bt--chico{ height:32px; padding:0 13px; font-size:12px; }
.bt--chico .material-icons-outlined{ font-size:16px; }
/* míos · todos · de una persona */
.filtros--personas{ margin:0 0 0 auto; text-transform:none; letter-spacing:0; }
.filtros__persona{ height:31px; padding:0 12px; border-radius:99px; border:1px solid var(--linea); background:var(--campo); color:var(--tinta-2); font-size:12.5px; }
.estado{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.estado::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--tinta-3); }
.estado--vivo::before{ background:var(--salvia); }
.estado--listo::before{ background:var(--acento); }
.estado--vencido::before, .estado--pausa::before{ background:var(--rojo); }
.estado--vence::before{ background:var(--ocre); }
.circ{ width:32px; height:32px; flex:none; display:inline-grid; place-items:center; border-radius:50%; border:1px solid var(--linea-2); background:transparent; color:var(--tinta-2);
  padding:0; text-decoration:none; transition:background .2s, border-color .2s, color .2s; }
.circ .material-icons-outlined{ font-size:16px; }
.circ:hover{ border-color:var(--acento); color:var(--tinta); }
.circ--lleno{ background:var(--relleno); border-color:var(--relleno); color:var(--relleno-tinta); }
.circ--lleno:hover{ background:color-mix(in srgb, var(--relleno) 80%, #000); color:var(--relleno-tinta); }
.circ--borrar:hover{ background:#B3261E; border-color:#B3261E; color:#FFFFFF; }

.vacio{ text-align:center; padding:64px 20px; border:1px dashed var(--linea-2); border-radius:18px; color:var(--tinta-2); }
.vacio h2{ font-family:var(--serif); font-weight:400; font-size:26px; color:var(--tinta); margin:14px 0 6px; }
.vacio p{ margin:0 auto 20px; max-width:50ch; }
.vacio img{ width:44px; opacity:.5; }
html[data-tema="claro"] .vacio img{ filter:brightness(.3); }
.tit + .vacio, .lista + .vacio, .pilas + .vacio{ margin-top:24px; }

/* ── la bandeja de lo elegido ── */
.bandeja{ position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:40; display:flex; gap:6px; align-items:center;
  background:var(--hoja); border:1px solid var(--linea-2); border-radius:999px; padding:6px 6px 6px 18px; box-shadow:var(--sombra); max-width:calc(100% - 32px); flex-wrap:wrap; }
.bandeja > span{ font-size:13px; color:var(--tinta-2); margin-right:6px; }
.bandeja .boton{ padding:8px 14px; }

/* ── soltar archivos ── */
.soltar{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; background:rgba(0,85,101,.62); backdrop-filter:blur(4px); pointer-events:none;
  color:#fff; text-align:center; }
.soltar div{ border:2px dashed rgba(255,255,255,.7); border-radius:24px; padding:48px 60px; }
.soltar strong{ display:block; font-family:var(--serif); font-weight:400; font-size:32px; }

/* ── subidas en curso ── */
.subidas{ position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:45; width:340px; max-width:calc(100% - 32px); background:var(--hoja);
  border:1px solid var(--linea-2); border-radius:16px; box-shadow:var(--sombra); overflow:hidden; }
.subidas header{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px 10px 16px; font-size:13px; border-bottom:1px solid var(--linea); }
.subidas ul{ list-style:none; margin:0; padding:6px 0; max-height:260px; overflow:auto; }
.subidas li{ padding:8px 16px; font-size:12.5px; }
.subidas li .fila{ display:flex; justify-content:space-between; gap:10px; }
.subidas li .fila span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.subidas li .fila span:last-child{ color:var(--tinta-3); flex:none; }
.subidas .barrita{ height:3px; border-radius:2px; background:var(--vacio); margin-top:6px; overflow:hidden; }
.subidas .barrita i{ display:block; height:100%; width:100%; background:var(--acento); transform:scaleX(0); transform-origin:left center; transition:transform .3s; }
.subidas li.error .fila span:last-child{ color:var(--rojo); }
html[data-tema="oscuro"] .subidas li.error .fila span:last-child, html[data-tema="teal"] .subidas li.error .fila span:last-child{ color:#E2766F; }

/* ── ventanas ── */
.velo{ position:fixed; inset:0; z-index:70; background:rgba(10,16,22,.62); backdrop-filter:blur(6px); display:grid; place-items:center; padding:16px; animation:aparecer .25s; }
@keyframes aparecer{ from{ opacity:0; } }
.ventana{ width:min(560px, 100%); max-height:calc(100vh - 32px); overflow:auto; background:var(--hoja); color:var(--tinta); border:1px solid var(--linea);
  border-radius:20px; box-shadow:var(--sombra); padding:26px; animation:subir .35s var(--curva); }
.ventana--ancha{ width:min(1040px, 100%); }
@keyframes subir{ from{ opacity:0; transform:translateY(12px); } }
.ventana h2{ font-family:var(--serif); font-weight:400; font-size:26px; margin:0 0 6px; }
.ventana > p{ margin:0 0 18px; color:var(--tinta-2); }
.campos{ display:flex; flex-direction:column; gap:14px; }
.campo label{ display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-3); margin-bottom:6px; }
.campo input[type=text], .campo input[type=date], .campo textarea, .campo select{ width:100%; border:1px solid var(--linea); background:var(--campo); border-radius:12px; padding:10px 12px; outline:none; }
.campo input:focus, .campo textarea:focus{ border-color:var(--acento); }
.campo textarea{ min-height:86px; resize:vertical; }
.campo .ayuda{ margin:6px 0 0; font-size:12px; color:var(--tinta-3); }
.campo .ayuda.mal{ color:var(--rojo); }
html[data-tema="oscuro"] .campo .ayuda.mal, html[data-tema="teal"] .campo .ayuda.mal{ color:#E2766F; }
.pie-ventana{ display:flex; justify-content:flex-end; gap:10px; margin-top:22px; flex-wrap:wrap; }
.pie-ventana .izq{ margin-right:auto; }
.dos{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .dos{ grid-template-columns:1fr; } }
/* Dentro de un campo, las casillas del árbol son texto normal, no un título de campo. */
.campo label.rama{ display:flex; margin:0; font-size:14px; letter-spacing:normal; text-transform:none; color:var(--tinta); }
.campo label.rama.incluida{ color:var(--tinta-2); }

/* El proveedor de CIMA */
.proveedor-elegido{ display:flex; align-items:center; gap:12px; border:1px solid var(--linea); border-radius:12px; padding:10px 12px; background:var(--campo); }
.proveedor-elegido div{ flex:1; min-width:0; }
.proveedor-elegido small{ display:block; color:var(--tinta-3); font-size:12px; }
.prov-filtro{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:8px; }
.prov-filtro input, .prov-filtro select{ width:100%; border:1px solid var(--linea); background:var(--campo); border-radius:12px; padding:10px 12px; outline:none; }
.prov-filtro input:focus, .prov-filtro select:focus{ border-color:var(--acento); }
.lista-prov{ margin-top:8px; border:1px solid var(--linea); border-radius:12px; max-height:290px; overflow:auto; background:var(--campo); }
.lista-prov button{ display:grid; width:100%; text-align:left; border:0; background:transparent; padding:9px 12px; border-bottom:1px solid var(--linea); }
.lista-prov button:last-child{ border-bottom:0; }
.lista-prov button:hover{ background:var(--vacio); }
.lista-prov small{ color:var(--tinta-3); font-size:12px; }
.lista-prov__cuenta{ position:sticky; top:0; margin:0; padding:7px 12px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-3);
  background:var(--hoja); border-bottom:1px solid var(--linea); }
.lista-prov__cargando{ margin:12px; color:var(--tinta-3); }

/* El árbol para elegir */
.arbol{ border:1px solid var(--linea); border-radius:14px; padding:6px; max-height:52vh; overflow:auto; background:var(--campo); }
.rama{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:10px; cursor:pointer; font-size:14px; }
.rama:hover{ background:var(--vacio); }
.rama input{ width:17px; height:17px; accent-color:var(--deep); flex:none; }
.rama .n{ margin-left:auto; color:var(--tinta-3); font-size:12px; }
.rama small{ color:var(--tinta-3); font-size:12px; }
.rama.incluida{ color:var(--tinta-2); }
.rama.apagada{ opacity:.4; pointer-events:none; }

/* ── EL VISOR ─────────────────────────────────────────────────────────────────
   A pantalla completa, sobre la misma foto difuminada. La foto vive en una capa que se mueve con
   translate + scale (el motor está en galeria.js); arriba flota la barra, a los lados las flechas, abajo la
   tira de miniaturas y a la derecha el panel de los detalles, que entra y sale deslizándose. Lo de adentro
   es siempre crema sobre vidrio oscuro, sin importar el tema. --abierto vale 1 con el panel a la vista. */
.visor{ --pw:360px; --abierto:0; --curva-v:cubic-bezier(.16,1,.3,1);
  position:fixed; inset:0; z-index:80; overflow:hidden; background:#080D12; color:#EADFCE; animation:visorEntra .35s var(--curva-v); }
.visor--panel{ --abierto:1; }
.visor--sale{ animation:visorSale .26s var(--curva) forwards; }
@keyframes visorEntra{ from{ opacity:0; } }
@keyframes visorSale{ to{ opacity:0; } }
.visor__fondo, .visor__fondo span{ position:absolute; inset:0; }
.visor__fondo span{ inset:-12%; background:#0D141B center / cover; filter:blur(70px) saturate(1.35) brightness(.42); opacity:0; transition:opacity .8s var(--curva); }
.visor__fondo span.ve{ opacity:1; }
.visor__fondo::after{ content:''; position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(5,8,12,.7) 100%); }

/* la escena: todo el visor; la foto dentro, con su sombra */
.visor__escena{ position:absolute; inset:0; overflow:hidden; touch-action:none; cursor:default; }
.visor--zoom .visor__escena{ cursor:grab; }
.visor--arrastra .visor__escena{ cursor:grabbing; }
.visor__lienzo{ position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; overflow:hidden; border-radius:0;
  box-shadow:0 2px 6px rgba(0,0,0,.45), 0 34px 90px -18px rgba(0,0,0,.9);
  transition:opacity .45s var(--curva-v); }
.visor__lienzo.entra{ opacity:0; }
.visor__lienzo.sale{ opacity:0; transition:opacity .35s var(--curva); }
.visor__lienzo img{ position:absolute; inset:0; width:100%; height:100%; display:block; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.visor__foto{ opacity:0; transition:opacity .4s var(--curva); }
.visor__foto.lista{ opacity:1; }
/* la miniatura sólo espera al original: nítida, recta y sin desbordar; cuando llega el original, se va */
.visor__foto.lista ~ .visor__previa, .visor__previa:has(~ .visor__foto.lista){ visibility:hidden; transition:visibility 0s .4s; }
/* video y documento: su área, a la izquierda del panel y debajo de la barra */
.visor__area{ position:absolute; top:78px; bottom:28px; left:84px; right:calc(84px + var(--abierto) * var(--pw)); display:grid; place-items:center; pointer-events:none; }
.visor__area > *{ pointer-events:auto; }
.visor__area video{ max-width:100%; max-height:100%; border-radius:0; box-shadow:0 2px 6px rgba(0,0,0,.45), 0 34px 90px -18px rgba(0,0,0,.9); }
.visor--doc .visor__area{ top:70px; bottom:0; left:84px; right:calc(84px + var(--abierto) * var(--pw)); place-items:stretch; }   /* deja lugar a las flechas */
.visor--doc .visor__area .lienzo{ width:100%; height:100%; min-height:0; }
.visor:has(.visor__tira) .visor__area{ bottom:108px; }
.visor--doc:has(.visor__tira) .visor__area{ bottom:92px; }

/* la barra de arriba: quién es, a la izquierda; los controles, a la derecha (se corren con el panel) */
.visor__barra{ position:absolute; z-index:4; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 18px 30px 24px; background:linear-gradient(180deg, rgba(5,8,12,.55), transparent); pointer-events:none; transition:opacity .45s var(--curva); }
.visor__barra > *{ pointer-events:auto; }
/* con el panel abierto, los botones se corren con él (transform) y el nombre se corta antes: nunca se enciman */
.visor__quien{ flex:1; min-width:0; display:flex; align-items:baseline; gap:14px; margin-right:calc(var(--abierto) * var(--pw)); text-shadow:0 1px 10px rgba(0,0,0,.6); }
.visor__cuenta{ flex:none; font-size:11px; letter-spacing:.18em; color:rgba(234,223,206,.66); }
.visor__nombre{ min-width:0; font-weight:400; font-family:var(--serif); font-size:19px; color:#F4EDE2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* los controles: los que van y vienen a la izquierda; el zoom en su cápsula; «detalles» y «cerrar» juntos, al final */
.visor__acc{ flex:none; display:flex; align-items:center; gap:10px; transform:translateX(calc(var(--abierto) * var(--pw) * -1)); transition:transform .55s var(--curva-v); }
.visor__fijos{ display:flex; align-items:center; gap:8px; padding-left:10px; border-left:1px solid rgba(234,223,206,.16); }
.visor--panel .visor__suelto{ display:none; }
.visor__bt, .visor__flecha{ width:40px; height:40px; flex:none; padding:0; border-radius:50%; display:inline-grid; place-items:center; cursor:pointer; text-decoration:none;
  background:rgba(13,20,27,.5); border:1px solid rgba(234,223,206,.18); color:rgba(234,223,206,.9);
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); transition:background .2s, border-color .2s, color .2s, opacity .45s var(--curva), transform .55s var(--curva-v); }
.visor__bt:hover, .visor__flecha:hover{ background:rgba(13,20,27,.78); border-color:rgba(234,223,206,.42); color:#FFFFFF; }
.visor__bt .material-icons-outlined{ font-size:19px; }
.visor__bt[aria-pressed="true"]{ background:#005565; border-color:#2A93A8; color:#FFFFFF; }
.visor__bt.puesto{ background:#2A93A8; border-color:#2A93A8; color:#FFFFFF; }
/* el zoom: una barra que se arrastra, como la de la galería, con su porcentaje */
.visor__zoom{ display:none; align-items:center; gap:10px; height:40px; padding:0 14px 0 12px; border-radius:99px; cursor:pointer;
  background:rgba(13,20,27,.5); border:1px solid rgba(234,223,206,.18); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); }
.visor--foto .visor__zoom{ display:flex; }
.visor__zoom > .material-icons-outlined{ font-size:18px; color:rgba(234,223,206,.7); }
.visor__zoom input{ -webkit-appearance:none; appearance:none; width:128px; height:18px; margin:0; background:none; cursor:pointer; }
.visor__zoom input::-webkit-slider-runnable-track{ height:3px; border-radius:3px; background:linear-gradient(90deg, #9CCFD9 var(--p, 0%), rgba(234,223,206,.24) var(--p, 0%)); }
.visor__zoom input::-moz-range-track{ height:3px; border-radius:3px; background:linear-gradient(90deg, #9CCFD9 var(--p, 0%), rgba(234,223,206,.24) var(--p, 0%)); }
.visor__zoom input::-webkit-slider-thumb{ -webkit-appearance:none; width:15px; height:15px; margin-top:-6px; border-radius:50%; background:#F4EDE2; border:0; box-shadow:0 1px 6px rgba(0,0,0,.5); transition:transform .15s; }
.visor__zoom input::-moz-range-thumb{ width:15px; height:15px; border-radius:50%; background:#F4EDE2; border:0; box-shadow:0 1px 6px rgba(0,0,0,.5); }
.visor__zoom input:active::-webkit-slider-thumb{ transform:scale(1.2); }
.visor__pct{ min-width:42px; text-align:right; color:#F4EDE2; font:500 12.5px/1 var(--sans); }

/* las flechas, a media altura */
.visor__flecha{ position:absolute; z-index:3; top:50%; width:48px; height:48px; margin-top:-24px; }
.visor__flecha .material-icons-outlined{ font-size:26px; }
.visor__flecha--ant{ left:20px; }
.visor__flecha--sig{ right:20px; transform:translateX(calc(var(--abierto) * var(--pw) * -1)); }

/* la tira de miniaturas, abajo al centro del espacio libre */
.visor__tira{ position:absolute; z-index:3; bottom:18px; left:50%; display:flex; gap:6px; max-width:min(760px, calc(100vw - var(--pw) - 200px)); padding:6px; overflow-x:auto; scrollbar-width:none;
  border-radius:16px; background:rgba(13,20,27,.5); border:1px solid rgba(234,223,206,.14); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  transform:translateX(calc(-50% - var(--abierto) * var(--pw) / 2)); transition:transform .55s var(--curva-v), opacity .45s var(--curva); }
.visor__tira::-webkit-scrollbar{ height:0; }
.visor__tira button{ flex:none; width:62px; height:46px; padding:0; border:0; border-radius:8px; background:#1A2633 center / cover; color:#9CCFD9; cursor:pointer;
  opacity:.5; outline:2px solid transparent; outline-offset:-2px; transition:opacity .25s, outline-color .25s, transform .3s var(--curva-v); }
.visor__tira button b{ font-weight:400; font-family:var(--serif); font-size:11px; }
.visor__tira button:hover{ opacity:.85; }
.visor__tira button[aria-current="true"]{ opacity:1; outline-color:#F4EDE2; }

/* quieta la mano: los controles se apagan y la foto queda sola */
.visor--quieto .visor__barra, .visor--quieto .visor__flecha, .visor--quieto .visor__tira{ opacity:0; }
.visor--quieto .visor__escena{ cursor:none; }

/* EL PANEL DE LOS DETALLES: vidrio oscuro que entra desde la derecha */
.visor__panel{ position:absolute; z-index:5; top:0; right:0; bottom:0; width:var(--pw); display:flex; flex-direction:column; gap:18px; padding:76px 22px 22px; overflow-y:auto; scrollbar-width:none;
  background:rgba(10,15,21,.74); border-left:1px solid rgba(234,223,206,.1); backdrop-filter:blur(24px) saturate(1.3); -webkit-backdrop-filter:blur(24px) saturate(1.3);
  transform:translateX(calc((1 - var(--abierto)) * 100%)); transition:transform .55s var(--curva-v); }
.visor__panel::-webkit-scrollbar{ width:0; }
.visor:not(.visor--panel) .visor__panel{ visibility:hidden; transition:transform .55s var(--curva-v), visibility 0s .55s; }
.visor__ficha{ display:flex; flex-direction:column; gap:14px; }
.visor__tipo{ align-self:flex-start; padding:3px 10px; border-radius:99px; background:rgba(234,223,206,.1); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(234,223,206,.8); }
.visor__titulo{ margin:0; width:100%; padding:2px 0 6px; border:0; border-bottom:1px solid rgba(234,223,206,.16); border-radius:0; background:none; color:#F4EDE2;
  font-family:var(--serif); font-weight:400; font-size:21px; line-height:1.25; word-break:break-word; outline:none; transition:border-color .2s; }
input.visor__titulo:hover{ border-bottom-color:rgba(234,223,206,.32); }
input.visor__titulo:focus{ border-bottom-color:#9CCFD9; }
.visor__campo{ display:grid; gap:6px; }
.visor__campo span{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(234,223,206,.58); }
.visor__campo textarea{ width:100%; resize:vertical; min-height:68px; padding:10px 12px; border-radius:12px; background:rgba(234,223,206,.05); border:1px solid rgba(234,223,206,.13);
  color:#F4EDE2; font:inherit; font-size:13.5px; line-height:1.45; outline:none; transition:border-color .2s, background .2s; }
.visor__campo textarea:focus{ border-color:#9CCFD9; background:rgba(234,223,206,.08); }
.visor__campo textarea::placeholder{ color:rgba(234,223,206,.4); }
.visor__desc{ margin:0; font-size:14px; line-height:1.5; color:rgba(244,237,226,.86); }
.visor__datos{ display:grid; gap:2px; padding:6px 0; border-top:1px solid rgba(234,223,206,.1); border-bottom:1px solid rgba(234,223,206,.1); }
.visor__dato{ display:grid; grid-template-columns:22px 82px 1fr; align-items:center; gap:8px; padding:7px 0; font-size:13px; }
.visor__dato .material-icons-outlined{ font-size:17px; color:rgba(234,223,206,.5); }
.visor__dato > span:nth-child(2){ color:rgba(234,223,206,.6); }
.visor__dato b{ font-weight:400; color:#F4EDE2; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.visor__hacer{ display:flex; flex-direction:column; gap:10px; margin-top:auto; }
.visor__mesa{ display:flex; align-items:center; justify-content:center; gap:8px; height:46px; border:0; border-radius:99px; background:#F4EDE2; color:#1A2633; font:500 14px/1 var(--sans); cursor:pointer;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.8); transition:transform .25s var(--curva), background .2s; }
.visor__mesa:hover{ transform:translateY(-1px); background:#FFFFFF; }
.visor__mesa.puesto{ background:linear-gradient(135deg, #2A93A8, #006D82); color:#FFFFFF; }
.visor__mesa .material-icons-outlined{ font-size:19px; }
.visor__mas{ display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); gap:6px; }
.visor__op{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:62px; padding:8px 6px; border-radius:14px; border:1px solid rgba(234,223,206,.12);
  background:rgba(234,223,206,.04); color:rgba(234,223,206,.86); font:inherit; font-size:11.5px; text-decoration:none; cursor:pointer; transition:background .2s, border-color .2s, color .2s; }
.visor__op .material-icons-outlined{ font-size:20px; }
.visor__op:hover{ background:rgba(234,223,206,.1); border-color:rgba(234,223,206,.28); color:#FFFFFF; }
.visor__op--borrar:hover{ background:rgba(179,38,30,.85); border-color:transparent; }

/* en el celular: la foto a todo; los detalles suben como una hoja; la tira se queda guardada */
@media (max-width:900px){
  .visor{ --pw:0px; }
  .visor__barra{ padding:calc(10px + env(safe-area-inset-top, 0px)) 10px 26px 16px; gap:8px; }
  .visor__nombre{ font-size:16px; }
  .visor__acc{ gap:6px; transform:none; }
  .visor__quien{ margin-right:0; }
  .visor__barra{ padding-right:10px; }
  .visor__bt{ width:36px; height:36px; }
  .visor__acc [data-v="bajar"], .visor__zoom{ display:none !important; }
  .visor__fijos{ padding-left:0; border-left:0; }
  .visor__flecha, .visor__tira{ display:none; }
  .visor__area{ top:62px; left:8px; right:8px; bottom:16px; }
  .visor--doc .visor__area{ left:0; right:0; bottom:0; }
  .visor__panel{ top:auto; left:0; width:auto; max-height:72vh; max-height:72dvh; padding:22px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-left:0; border-top:1px solid rgba(234,223,206,.14);
    border-radius:22px 22px 0 0; transform:translateY(calc((1 - var(--abierto)) * 104%)); }
  .visor--panel{ --abierto:1; }
}

.prefijo{ display:flex; align-items:center; border:1px solid var(--linea); border-radius:12px; background:var(--campo); overflow:hidden; }
.prefijo span{ padding:10px 0 10px 12px; color:var(--tinta-3); font-size:13px; white-space:nowrap; }
.prefijo input{ border:0 !important; background:transparent !important; padding-left:2px !important; border-radius:0 !important; }

.aviso{ position:fixed; left:50%; top:calc(76px + env(safe-area-inset-top, 0px)); transform:translateX(-50%); z-index:90; background:var(--relleno); color:var(--relleno-tinta);
  padding:10px 18px; border-radius:999px; font-size:13px; box-shadow:var(--sombra); animation:subir .3s var(--curva); max-width:calc(100% - 32px); }
.aviso.mal{ background:var(--rojo); color:#fff; }
/* la etiqueta del + : una pastilla con la tinta del tema, que aparece al lado con un leve deslizamiento */
.etq{ position:fixed; left:0; top:0; z-index:95; pointer-events:none; white-space:nowrap; padding:6px 12px; border-radius:999px;
  background:var(--hoja); color:var(--tinta); border:1px solid var(--linea); box-shadow:var(--sombra); font-size:12px; letter-spacing:.01em;
  opacity:0; transform:translateX(-4px); transition:opacity .18s var(--curva), transform .22s var(--curva); }
.etq--izq{ transform:translateX(4px); }
.etq--ver{ opacity:1; transform:none; }
.cargando{ display:grid; place-items:center; min-height:50vh; color:var(--tinta-3); }
.cargando img{ width:44px; animation:girar 6s linear infinite; opacity:.7; }
html[data-tema="claro"] .cargando img{ filter:brightness(.3); }
@keyframes girar{ to{ transform:rotate(360deg); } }
.r2-aviso{ border:1px solid var(--ocre); color:var(--tinta); background:color-mix(in srgb, var(--ocre) 12%, transparent); border-radius:14px; padding:12px 16px; margin:0 0 22px; font-size:13.5px; display:flex; gap:10px; align-items:flex-start; }

/* ── el editor de enlaces: el formulario a la izquierda y la vista previa en vivo a la derecha ── */
/* ═══ LOS DOS ESTUDIOS (la página para tu cliente y el link de descarga, Luis 2026-10-12) ═══
   A la izquierda los pasos en tarjetas rectas y el botón grande del lienzo abajo; a la derecha la página en vivo
   en una ventana de navegador o un teléfono, sobre la foto de MORFO atenuada (sin difuminar). */
.ventana--editor{ width:min(1500px, 100%); height:calc(100vh - 32px); height:calc(100dvh - 32px); max-height:none; padding:0; overflow:hidden;
  background:var(--hoja); box-shadow:0 40px 90px -20px rgba(0,0,0,.7); }
.estudio{ display:grid; grid-template-columns:minmax(380px, 470px) minmax(0, 1fr); height:100%; }
.estudio__lado{ display:flex; flex-direction:column; min-height:0; min-width:0; border-right:1px solid var(--linea); background:var(--hoja); }
.estudio__cab{ display:grid; grid-template-columns:1fr auto; align-items:start; gap:14px; padding:24px 26px 20px; border-bottom:1px solid var(--linea); }
.estudio__kicker{ display:block; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--acento); }
.estudio__cab h2{ margin:7px 0 0; font-family:var(--serif); font-weight:400; font-size:28px; line-height:1.12; color:var(--tinta); }
.estudio__x{ width:40px; height:40px; border-radius:50%; border:1px solid var(--linea); background:transparent; color:var(--tinta-2); display:grid; place-items:center; padding:0; cursor:pointer; }
.estudio__x:hover{ background:var(--vacio); color:var(--tinta); border-color:var(--linea-2); }
.estudio__cab .estudio__alterna{ display:none; grid-column:1 / -1; }
.estudio__pasos{ flex:1; min-height:0; overflow:auto; padding:18px 26px 26px; display:flex; flex-direction:column; gap:12px; scrollbar-width:none; }
.estudio__pasos::-webkit-scrollbar{ display:none; }
.paso{ flex:none; border:1px solid var(--linea); background:color-mix(in srgb, var(--tinta) 3%, transparent); padding:16px 18px 18px; }
.paso__cab{ display:flex; align-items:center; gap:12px; margin:0 0 14px; min-width:0; }
.paso__n{ width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:12px; font-variant-numeric:tabular-nums;
  border:1px solid var(--linea-2); color:var(--tinta-2); transition:background .3s var(--curva), border-color .3s, color .3s; }
.paso.listo .paso__n{ background:var(--relleno); border-color:var(--relleno); color:var(--relleno-tinta); }
.paso__cab h3{ margin:0; flex:none; font-family:var(--serif); font-weight:400; font-size:19px; color:var(--tinta); }
.paso__resumen{ margin-left:auto; min-width:0; font-size:12px; color:var(--tinta-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.estudio .ayuda{ margin:8px 0 0; font-size:12px; line-height:1.45; color:var(--tinta-3); }
.estudio .ayuda.mal{ color:var(--rojo); }
html[data-tema="oscuro"] .estudio .ayuda.mal, html[data-tema="teal"] .estudio .ayuda.mal{ color:#E2766F; }
.estudio .ayuda--arriba{ margin:0 0 12px; color:var(--tinta-2); }
.estudio .dos{ grid-template-columns:minmax(0, 1fr) auto; align-items:start; }
/* el pie: el mismo botón grande del lienzo; arriba, cuando ya se armó, el link con Copiar y Abrir */
.estudio__pie{ display:flex; flex-direction:column; gap:10px; padding:16px 26px 22px; border-top:1px solid var(--linea); background:var(--hoja); }
.estudio__pie .mesa__accion{ min-height:62px; }
html[data-tema="claro"] .estudio__pie .mesa__accion:not(.mesa__accion--envio){ background:#1A2633; color:#F4EDE2; }
html[data-tema="claro"] .estudio__pie .mesa__accion:not(.mesa__accion--envio) > .material-icons-outlined:first-child{ background:rgba(244,237,226,.14); }
.estudio__pie .mesa__accion:disabled{ background:var(--vacio); color:var(--tinta-3); box-shadow:inset 0 0 0 1px var(--linea); }
.estudio__borrar{ align-self:center; display:inline-flex; align-items:center; gap:6px; border:0; background:none; color:var(--tinta-3); font-size:12.5px; padding:4px 10px; border-radius:999px; cursor:pointer; }
.estudio__borrar .material-icons-outlined{ font-size:16px; }
.estudio__borrar:hover{ color:var(--rojo); background:var(--vacio); }
.estudio__listo{ display:flex; align-items:center; gap:10px; padding:10px 10px 10px 14px; border:1px solid color-mix(in srgb, var(--acento) 45%, transparent);
  background:color-mix(in srgb, var(--acento) 10%, transparent); animation:subir .35s var(--curva); }
.estudio__listo[hidden]{ display:none; }
.estudio__listo > .material-icons-outlined{ color:var(--acento); font-size:22px; flex:none; }
.estudio__listo-txt{ flex:1; min-width:0; display:grid; gap:2px; }
.estudio__listo-txt b{ font-weight:400; font-family:var(--serif); font-size:15px; color:var(--tinta); }
.estudio__listo-txt code{ font-family:var(--sans); font-size:12px; color:var(--acento); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.estudio__listo .boton{ padding:8px 12px; flex:none; }
/* pastillas de dos o más opciones: el idioma, Armar / Cómo queda, Computadora / Celular */
.segmentado{ display:inline-flex; gap:2px; padding:3px; border-radius:999px; border:1px solid var(--linea); background:var(--campo); }
.segmentado > label, .segmentado > button{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:6px; margin:0; border:0; background:none; cursor:pointer;
  padding:7px 14px; border-radius:999px; font-size:13px; letter-spacing:normal; text-transform:none; color:var(--tinta-2); white-space:nowrap; transition:background .2s, color .2s; }
.segmentado .material-icons-outlined{ font-size:17px; }
.segmentado input{ position:absolute; opacity:0; pointer-events:none; }
.segmentado > label:has(input:checked), .segmentado > button[aria-pressed="true"]{ background:var(--relleno); color:var(--relleno-tinta); }
.segmentado > label:has(input:focus-visible){ outline:2px solid var(--acento); outline-offset:1px; }
.segmentado > label:not(:has(input:checked)):hover, .segmentado > button[aria-pressed="false"]:hover{ color:var(--tinta); }
/* el texto en dos idiomas: pestañas finas, con un puntito si el inglés ya tiene algo */
.idiomas{ display:flex; gap:20px; margin:0 0 14px; border-bottom:1px solid var(--linea); }
.idiomas button{ display:inline-flex; align-items:center; gap:7px; border:0; background:none; padding:0 0 9px; margin-bottom:-1px; border-bottom:2px solid transparent; border-radius:0;
  font-size:13px; color:var(--tinta-3); cursor:pointer; }
.idiomas button:hover{ color:var(--tinta-2); }
.idiomas button[aria-selected="true"]{ color:var(--tinta); border-bottom-color:var(--acento); }
.idiomas .punto{ width:6px; height:6px; border-radius:50%; background:var(--acento); }
.idiomas .punto[hidden]{ display:none; }
/* lo que va: cada pieza con su foto, como en el lienzo */
.cosas{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; max-height:268px; overflow:auto; scrollbar-width:none; }
.cosas::-webkit-scrollbar{ display:none; }
.cosas li{ display:flex; align-items:center; gap:12px; padding:6px 8px 6px 6px; border:1px solid var(--linea); background:var(--campo); }
.cosas i{ width:44px; height:44px; flex:none; display:grid; place-items:center; background:var(--hoja-2) center / cover no-repeat; color:var(--tinta-3); font-style:normal; }
.cosas i .material-icons-outlined{ font-size:20px; }
.cosas li > span{ flex:1; min-width:0; display:grid; gap:2px; line-height:1.25; }
.cosas b{ font-weight:400; font-size:13.5px; color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cosas small{ font-size:11.5px; color:var(--tinta-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cosas__quitar{ width:30px; height:30px; flex:none; border-radius:50%; border:0; background:transparent; color:var(--tinta-3); display:grid; place-items:center; padding:0; cursor:pointer; }
.cosas__quitar .material-icons-outlined{ font-size:17px; }
.cosas__quitar:hover{ background:var(--vacio); color:var(--tinta); }
.cosas .cosas__vacio{ justify-content:center; padding:16px 12px; border-style:dashed; background:transparent; color:var(--tinta-3); font-size:12.5px; text-align:center; }
/* subir archivos: una franja, no un cajón */
.zona-envio{ display:flex; align-items:center; gap:14px; margin-top:8px; padding:12px 14px; border:1.5px dashed var(--linea-2); background:transparent; color:var(--tinta-2); cursor:pointer; transition:border-color .2s, background .2s; }
.zona-envio__ic{ width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--vacio); color:var(--acento); }
.zona-envio > span:last-child{ display:grid; gap:2px; min-width:0; }
.zona-envio b{ font-weight:400; font-family:var(--serif); font-size:16px; color:var(--tinta); }
.zona-envio small{ font-size:11.5px; color:var(--tinta-3); }
.zona-envio:hover, .zona-envio.encima{ border-color:var(--acento); background:var(--vacio); }
/* agregar de la galería: el árbol se despliega debajo */
.mas-galeria{ margin-top:10px; }
.mas-galeria > summary{ list-style:none; display:inline-flex; align-items:center; gap:8px; padding:8px 15px 8px 12px; border-radius:999px; border:1px solid var(--linea-2); color:var(--tinta); font-size:13px; cursor:pointer; user-select:none; }
.mas-galeria > summary::-webkit-details-marker{ display:none; }
.mas-galeria > summary .material-icons-outlined{ font-size:18px; color:var(--acento); }
.mas-galeria > summary:hover, .mas-galeria[open] > summary{ background:var(--vacio); }
.mas-galeria .arbol{ margin-top:10px; max-height:320px; scrollbar-width:none; }
.mas-galeria .arbol::-webkit-scrollbar{ display:none; }
/* los interruptores: un riel con su bolita */
.interruptores{ display:grid; gap:12px; }
.interruptor{ display:flex; align-items:center; gap:12px; margin:0; font-size:13.5px; color:var(--tinta); cursor:pointer; }
.interruptor input{ appearance:none; -webkit-appearance:none; position:relative; width:36px; height:20px; flex:none; margin:0; border-radius:999px; background:var(--linea-2); cursor:pointer; transition:background .25s var(--curva); }
.interruptor input::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .25s var(--curva); }
.interruptor input:checked{ background:var(--acento); }
.interruptor input:checked::after{ transform:translateX(16px); }
.interruptor input:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
/* la vista previa: la foto de MORFO atenuada, la pastilla de tamaño y la ventana o el teléfono */
.estudio__previa{ position:relative; display:flex; flex-direction:column; align-items:center; min-width:0; min-height:0; overflow:hidden; background:#0E151C; }
.estudio__fondo{ position:absolute; inset:0; background:#0E151C; }
.estudio__fondo i{ position:absolute; inset:0; background:center / cover no-repeat; opacity:0; transition:opacity 1.6s ease; }
.estudio__fondo i.ver{ opacity:1; }
.estudio__fondo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,15,21,.62), rgba(10,15,21,.82)); }
.estudio__pantallas{ position:relative; z-index:1; margin:18px 0 0; flex:none; background:rgba(10,15,21,.5); border-color:rgba(234,223,206,.16); }
.estudio__pantallas > button{ color:rgba(234,223,206,.72); }
.estudio__pantallas > button[aria-pressed="true"]{ background:#EADFCE; color:#141D27; }
.estudio__pantallas > button[aria-pressed="false"]:hover{ color:#EADFCE; }
.previa-marco{ position:relative; z-index:1; flex:1; align-self:stretch; min-height:0; display:flex; align-items:center; justify-content:center; padding:16px 30px 30px; }
.previa-ventana{ position:relative; width:100%; height:100%; display:flex; flex-direction:column; background:#141D27; border:1px solid rgba(234,223,206,.14); box-shadow:0 40px 80px -24px rgba(0,0,0,.85); }
.previa-ventana__barra{ height:36px; flex:none; display:flex; align-items:center; gap:12px; padding:0 14px; background:#1A2633; border-bottom:1px solid rgba(234,223,206,.10); }
.previa-ventana__puntos{ display:flex; gap:6px; flex:none; }
.previa-ventana__puntos i{ width:9px; height:9px; border-radius:50%; background:rgba(234,223,206,.22); }
.previa-ventana__url{ flex:1; max-width:540px; min-width:0; margin:0 auto; height:24px; padding:0 14px; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(234,223,206,.07); color:rgba(234,223,206,.66); font-size:11.5px; white-space:nowrap; }
.previa-ventana__url > span:last-child{ overflow:hidden; text-overflow:ellipsis; }
.previa-ventana__url .material-icons-outlined{ font-size:13px; opacity:.7; }
.previa-pantalla{ flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; background:#141D27; }
.previa-ventana iframe{ flex:1; width:100%; min-height:0; border:0; background:#141D27; }
.tel-estado, .tel-pie, .tel-boton{ display:none; }
/* el teléfono: marco de metal oscuro con sus botones, la isla y la hora arriba, y abajo la dirección y la rayita de inicio */
/* mide lo que un iPhone (393 × 852) y se achica entero con --escala para caber: nunca se ensancha ni se aplasta */
.previa-marco[data-pantalla="celular"] .previa-ventana{ flex:none; width:393px; height:852px; transform:scale(var(--escala, 1)); padding:11px; border:0; border-radius:58px;
  background:linear-gradient(150deg, #2B3641 0%, #11181F 38%, #0B1117 62%, #222C36 100%);
  box-shadow:0 0 0 1px rgba(234,223,206,.20), inset 0 0 0 1.5px rgba(234,223,206,.10), inset 0 0 0 4px #06090C, 0 50px 90px -30px rgba(0,0,0,.92); }
.previa-marco[data-pantalla="celular"] .previa-pantalla{ border-radius:47px; background:#0B1117; }
.previa-marco[data-pantalla="celular"] .previa-ventana__barra{ display:none; }
.previa-marco[data-pantalla="celular"] .tel-estado{ display:flex; flex:none; align-items:center; justify-content:space-between; height:50px; padding:0 30px 0 34px;
  color:#EADFCE; font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums; background:#0B1117; }
.tel-isla{ width:112px; height:32px; border-radius:20px; background:#000; box-shadow:inset 0 0 0 1px rgba(234,223,206,.06); }
.tel-iconos{ display:flex; align-items:center; gap:4px; }
.tel-iconos .material-icons-outlined{ font-size:16px; }
.previa-marco[data-pantalla="celular"] .tel-pie{ display:flex; flex:none; flex-direction:column; align-items:center; gap:10px; padding:9px 18px 8px; background:#121A22; border-top:1px solid rgba(234,223,206,.08); }
.tel-url{ width:100%; height:38px; display:flex; align-items:center; justify-content:center; gap:6px; padding:0 14px; border-radius:999px; background:rgba(234,223,206,.08);
  color:rgba(234,223,206,.78); font-size:12.5px; white-space:nowrap; overflow:hidden; }
.tel-url > span:last-child{ overflow:hidden; text-overflow:ellipsis; }
.tel-url .material-icons-outlined{ font-size:13px; opacity:.7; }
.tel-inicio{ width:124px; height:5px; border-radius:3px; background:rgba(234,223,206,.6); }
.previa-marco[data-pantalla="celular"] .tel-boton{ display:block; position:absolute; width:4px; border-radius:2px; background:linear-gradient(90deg, #1C252E, #2E3945); }
.tel-boton--accion{ left:-4px; top:118px; height:30px; }
.tel-boton--sube{ left:-4px; top:172px; height:56px; }
.tel-boton--baja{ left:-4px; top:240px; height:56px; }
.tel-boton--lado{ right:-4px; top:196px; height:88px; }
/* en el celular: una sola columna y arriba se escoge entre armar y ver cómo queda */
@media (max-width:900px){
  .velo:has(.ventana--editor){ padding:0; }
  .ventana--editor{ width:100%; height:100vh; height:100dvh; border:0; }
  .estudio{ display:flex; flex-direction:column; }
  .estudio__lado{ display:contents; }
  .estudio__cab{ padding:calc(16px + env(safe-area-inset-top, 0px)) 16px 14px; background:var(--hoja); }
  .estudio__cab h2{ font-size:24px; }
  .estudio__cab .estudio__alterna{ display:flex; }
  .estudio__alterna > button{ flex:1; }
  .estudio__pasos{ padding:14px 16px 20px; }
  .estudio__pie{ padding:12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .estudio__previa{ flex:1; }
  .estudio[data-vista="armar"] .estudio__previa, .estudio[data-vista="previa"] :is(.estudio__pasos, .estudio__pie){ display:none; }
  .previa-marco{ padding:12px 14px 18px; }
  .paso{ padding:14px 14px 16px; }
}
@media (max-width:480px){ .estudio .dos{ grid-template-columns:1fr; } }

/* Los diseños: tarjetas con un dibujito de cada página, hecho con CSS. */
.disenos{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.diseno{ position:relative; display:flex !important; flex-direction:column; gap:4px; border:1px solid var(--linea); border-radius:14px; padding:10px 12px 12px; cursor:pointer;
  text-transform:none !important; letter-spacing:normal !important; font-size:13px !important; color:var(--tinta) !important; margin:0 !important; background:var(--campo); }
.diseno:hover{ border-color:var(--linea-2); }
.diseno:has(input:checked){ border-color:var(--acento); box-shadow:inset 0 0 0 1px var(--acento); }
.diseno input{ position:absolute; opacity:0; pointer-events:none; }
.diseno:has(input:focus-visible){ outline:2px solid var(--acento); outline-offset:2px; }
.diseno b{ font-weight:400; font-family:var(--serif); font-size:15px; line-height:1.2; }
.dibujo{ display:block; position:relative; height:64px; border-radius:8px; overflow:hidden; margin-bottom:6px; }
.dibujo i{ position:absolute; display:block; border-radius:2px; }
/* Kit: la barra, la portada (partida o de fondo) y las tarjetas. */
.dibujo--kit-claro, .dibujo--kit-claro-fondo{ background:#F6F3ED; }
.dibujo--kit-oscuro, .dibujo--kit-oscuro-fondo{ background:#141D27; }
.dibujo--kit-claro i:nth-child(1), .dibujo--kit-oscuro i:nth-child(1){ left:8px; width:34%; top:12px; height:7px; background:#1A2633; }
.dibujo--kit-oscuro i:nth-child(1){ background:#EADFCE; }
.dibujo--kit-claro i:nth-child(2), .dibujo--kit-oscuro i:nth-child(2){ left:48%; right:8px; top:8px; height:28px; background:linear-gradient(135deg, #7D9B5B, #2F3B22); }
.dibujo--kit-claro-fondo i:nth-child(1), .dibujo--kit-oscuro-fondo i:nth-child(1){ left:0; right:0; top:0; height:38px; border-radius:0; background:linear-gradient(135deg, #006D82, #2F3B22); }
.dibujo--kit-claro-fondo i:nth-child(2), .dibujo--kit-oscuro-fondo i:nth-child(2){ left:8px; width:40%; top:24px; height:6px; background:#FFFFFF; }
.dibujo--kit-claro i:nth-child(3), .dibujo--kit-claro-fondo i:nth-child(3){ left:8px; right:8px; top:44px; height:14px; background:repeating-linear-gradient(90deg, #CFC3AF 0 30%, transparent 30% 35%); }
.dibujo--kit-oscuro i:nth-child(3), .dibujo--kit-oscuro-fondo i:nth-child(3){ left:8px; right:8px; top:44px; height:14px; background:repeating-linear-gradient(90deg, #33475a 0 30%, transparent 30% 35%); }
/* Envíos: dónde va la foto y dónde la tarjeta con la lista. */
.dibujo--envio-noche{ background:radial-gradient(120% 90% at 20% 0%, #33475a 0%, #141D27 70%); }
.dibujo--envio-noche i:nth-child(1){ left:26%; right:26%; top:8px; bottom:8px; background:rgba(234,223,206,.14); border-radius:6px; }
.dibujo--envio-noche i:nth-child(2){ left:32%; right:32%; top:16px; height:6px; background:#EADFCE; }
.dibujo--envio-noche i:nth-child(3){ left:32%; right:32%; top:30px; height:20px; background:repeating-linear-gradient(180deg, rgba(234,223,206,.4) 0 3px, transparent 3px 6px); }
.dibujo--envio-papel{ background:#F6F3ED; }
.dibujo--envio-papel i:nth-child(1){ left:0; right:0; top:0; height:26px; border-radius:0; background:linear-gradient(135deg, #006D82, #7D9B5B); }
.dibujo--envio-papel i:nth-child(2){ left:24%; right:24%; top:14px; bottom:6px; background:#FFFFFF; box-shadow:0 2px 6px rgba(20,29,39,.15); border-radius:5px; }
.dibujo--envio-papel i:nth-child(3){ left:30%; right:30%; top:24px; height:22px; background:repeating-linear-gradient(180deg, #CFC3AF 0 3px, transparent 3px 6px); }
.dibujo--envio-partido{ background:#141D27; }
.dibujo--envio-partido i:nth-child(1){ left:0; width:52%; top:0; bottom:0; border-radius:0; background:linear-gradient(160deg, #006D82, #2F3B22); }
.dibujo--envio-partido i:nth-child(2){ left:8px; width:30%; bottom:10px; height:6px; background:#FFFFFF; }
.dibujo--envio-partido i:nth-child(3){ left:58%; right:8px; top:12px; height:40px; background:repeating-linear-gradient(180deg, rgba(234,223,206,.4) 0 3px, transparent 3px 7px); }
.dibujo--envio-mural{ background:linear-gradient(135deg, #7D9B5B, #006D82 60%, #2F3B22); }
.dibujo--envio-mural i:nth-child(1){ left:8px; width:42%; top:8px; bottom:8px; background:#FFFFFF; border-radius:5px; }
.dibujo--envio-mural i:nth-child(2){ left:14px; width:28%; top:16px; height:6px; background:#1A2633; }
.dibujo--envio-mural i:nth-child(3){ left:14px; width:30%; top:30px; height:18px; background:repeating-linear-gradient(180deg, #CFC3AF 0 3px, transparent 3px 6px); }

/* ── enviar archivos ── */


/* ── los dos modos: lo que es sólo del administrador no se le ofrece al vendedor ── */
html[data-modo="vendedor"] .solo-admin{ display:none !important; }

/* ── la ventana de un envío: el árbol de la galería y lo escogido ── */
.arbol--envio{ max-height:46vh; }
.rama-envio{ display:flex; align-items:center; gap:6px; }
.rama-envio .rama{ flex:1; min-width:0; }
.rama-envio .redondo{ width:30px; height:30px; flex:none; }
.archivos-envio{ display:grid; grid-template-columns:repeat(auto-fill, minmax(86px, 1fr)); gap:8px; padding:6px 8px 12px; }
.pieza-envio{ position:relative; display:flex; flex-direction:column; gap:4px; cursor:pointer; font-size:11px; color:var(--tinta-2); }
.pieza-envio input{ position:absolute; top:6px; left:6px; width:16px; height:16px; accent-color:var(--deep); }
.pieza-envio img, .pieza-envio .ext{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; background:var(--hoja-2); border:2px solid transparent; }
.pieza-envio .ext{ display:grid; place-items:center; font-family:var(--serif); font-size:16px; color:var(--acento); }
.pieza-envio.elegida img, .pieza-envio.elegida .ext{ border-color:var(--acento); }
.pieza-envio small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── lo que flota, dentro del contenido (entre el riel y la mesa) ── */
.bandeja{ left:calc((100vw - var(--mesa-abierta)) / 2); }
body:has(.marco:not([hidden])) .subidas{ right:calc(var(--mesa-abierta) + 20px); }
body:has(.marco:not([hidden])) .soltar{ left:0; right:var(--mesa-abierta); }
body:has(.marco:not([hidden])) .aviso{ left:calc((100vw - var(--mesa-abierta)) / 2); top:calc(92px + env(safe-area-inset-top, 0px)); }

/* ── pantallas medianas: la mesa se angosta y las acciones se quedan con su ícono ── */
/* ── LA BARRA DE ARRIBA SE ACOMODA AL ANCHO DEL CONTENIDO (no al de la pantalla), de a poco: así
   nunca se mete debajo de la mesa. Primero se va el nombre del usuario, luego el texto de las
   acciones secundarias, el buscador pasa a la lupa, el conteo se acorta y al final la acción
   principal queda con su ícono. ── */
@container barra (max-width:1264px){
  .tamano input{ width:80px; }
  .buscar{ display:none; }
  .cab .cab__lupa{ display:inline-flex; }
  .cab__vista .bt:not(.bt--lleno){ width:38px; padding:0; justify-content:center; }
  .cab__vista .bt:not(.bt--lleno) span:not(.material-icons-outlined){ display:none; }
}
@container barra (max-width:1264px){
  .cab.buscando .buscar{ display:flex; position:absolute; left:20px; right:20px; top:50%; transform:translateY(-50%); width:auto; z-index:5; background:var(--hoja); box-shadow:var(--sombra); }
}
@container barra (max-width:924px){
}
@container barra (max-width:764px){
  .cab__vista .bt--lleno{ width:38px; padding:0; justify-content:center; }
  .cab__vista .bt--lleno span:not(.material-icons-outlined){ display:none; }
  .cab h1{ font-size:22px; }
}
/* ── EL CELULAR ─────────────────────────────────────────────────────────────────
   Arriba, el título y, debajo, sus acciones; abajo, la misma isla de la computadora, acostada: la
   estrella, las tres secciones y la mesa con lo que lleva. La foto de atrás sigue ahí, detrás del
   contenido; la mesa sube como una hoja de vidrio. */
@media (max-width:900px){
  .riel__pie{ display:none; }
  .marco{ --fin-contenido:calc(100% + 140px); }
  .marco{ grid-template-columns:minmax(0, 1fr); }
  /* la estrella arriba a la izquierda, junto al nombre (la cápsula baja al tocarla) */
  .marco .riel{ left:10px; top:calc(env(safe-area-inset-top, 0px) - 1px); }

  /* LA BARRA EN DOS RENGLONES ORDENADOS (Luis, 2026-10-11: «se ve todo apuñado y desordenado»):
     1 · el nombre —que se corta con puntos si no cabe—, su cifra y Editar (nunca baja); a la derecha, buscar,
         la mesa y el usuario;
     2 · la ruta entera (baja de renglón si hace falta, no se corta); a la derecha, el tamaño y la vista.
     En los teléfonos la ruta ocupa su renglón y el tamaño y la vista bajan al tercero, a la derecha. */
  .cab{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; min-height:0; padding:calc(10px + env(safe-area-inset-top, 0px)) 14px 12px; }
  .cab__tit, .cab__textos, .cab__acc{ display:contents; }
  .cab__fila{ order:1; flex:1 1 0; min-width:0; flex-wrap:nowrap; align-items:center; gap:10px; margin-left:52px; }
  .cab h1{ flex:0 1 auto; }
  .cab__editar{ flex:none; }
  .cab__vista{ order:2; }
  .cab__vista:empty{ display:none; }
  .cab .cab__lupa{ order:3; }
  .accesos{ order:4; }
  .cab::after{ content:''; order:5; flex-basis:100%; height:0; }
  .cab__ruta{ order:6; flex:1 1 0; min-width:0; margin:0 0 0 -7px; }
  .cab .tamano{ order:7; margin-left:auto; }
  .cab .ver-como{ order:8; }
  .buscar{ order:9; }
  .accesos{ gap:8px; }
  .cab .mesa-volver{ display:inline-grid; width:40px; height:40px; border:1px solid var(--linea); background:var(--campo); color:var(--tinta-2); }
  .cab .mesa-volver[aria-pressed="true"]{ background:var(--relleno); border-color:var(--relleno); color:var(--relleno-tinta); }
  .cab .mesa-volver .mesa-volver__ocultar{ display:none; }
  .cab .mesa-volver .mesa-volver__mostrar{ display:inline; }
  .cab .mesa-volver b:not([hidden]){ display:block; }
  .app__cuentas{ gap:10px; }
  .app__cabeza{ margin:-4px 0 10px; flex-wrap:wrap; }
  .cab__cuenta{ font-size:9.5px; } .cab__cuenta b{ font-size:16px; }
  .cab__cuenta + .cab__cuenta{ padding-left:10px; }
  /* el cambio de modo es sólo de pruebas: en el celular no cabe y se cambia desde la computadora */
  .accesos .modo{ display:none !important; }
  .cab__vista .bt{ width:34px; height:34px; padding:0; justify-content:center; }
  .cab__vista .bt span:not(.material-icons-outlined){ display:none; }
  .cab h1{ font-size:22px; }
  .cab__ruta{ font-size:12px; }
  .cab__lupa{ width:40px; height:40px; }
  .ses{ height:40px; padding:0 12px 0 6px; }
  .ses__disco{ width:26px; height:26px; }
  .modo{ height:34px; }
  .modo button{ padding:0 9px; letter-spacing:.08em; }
  .cab.buscando .buscar{ display:flex; position:absolute; left:14px; right:14px; top:calc(10px + env(safe-area-inset-top, 0px)); transform:none; width:auto; z-index:5; background:var(--hoja); box-shadow:var(--sombra); }
  .resultados{ left:0; right:0; width:auto; }

  .app{ padding:14px 14px calc(28px + env(safe-area-inset-bottom, 0px)); }
  .tit{ margin:22px 0 10px; }
  .tit a{ font-size:19px; }
  .tit__ayuda{ display:none; }
  .pilas{ row-gap:20px; }
  .app{ --pila-hueco:12px; --pieza-hueco:3px; }
  .cab .tamano{ padding:0 10px; height:40px; }
  .tamano input{ width:84px; }
  .pieza{ border-radius:6px; }
  .mas{ width:28px; height:28px; top:6px; left:6px; }
  .renglon > a, .renglon__a{ padding:7px 44px 7px 46px; }
  .renglon small{ display:none; }
  .tarjetas{ grid-template-columns:minmax(0, 1fr); gap:8px; }
  .tarjeta{ min-height:150px; }
  .tarjeta__txt{ margin-left:34%; padding:12px 12px 12px 4px; }
  .tarjeta__txt b{ font-size:17px; }
  .tarjeta__dias b{ font-size:44px; }
  .tarjeta__url{ display:none; }
  .filtros--personas{ margin:6px 0 0; width:100%; }
  .vacio{ padding:44px 18px; }

  /* la mesa: un panel de vidrio que sale de la derecha, como en la computadora; se abre con su botón de arriba */
  .mesa{ position:fixed; top:0; right:0; bottom:0; left:auto; z-index:85; width:min(400px, 88vw); height:auto;
    transform:translateX(104%); transition:transform .45s cubic-bezier(.16,1,.3,1); box-shadow:-24px 0 60px -20px rgba(0,0,0,.6);
    background:rgba(10,15,21,.38); border-left:1px solid rgba(234,223,206,.14); overflow:hidden; }
  /* con la mesa abierta, la galería sigue a la vista a la izquierda, pero se recorta justo donde empieza la
     mesa (al mismo paso que ella entra): a través de la mesa sólo se ve la foto de atrás, atenuada, y no el
     álbum (Luis, 2026-10-11). La barra flotante se aparta mientras la mesa está abierta. */
  .lado{ clip-path:inset(0 0 0 0); transition:clip-path .45s cubic-bezier(.16,1,.3,1); }
  body.mesa-abierta .lado{ clip-path:inset(0 min(400px, 88vw) 0 0); }
  body.mesa-abierta .mesa{ transform:none; }
  /* por dentro, la misma mesa de la computadora: el mismo aire a los lados, la misma separación y el título
     a la misma distancia de arriba; la estrella no se ve a través de la mesa abierta */
  .mesa__in{ bottom:calc(34px + env(safe-area-inset-bottom, 0px)); padding:calc(22px + env(safe-area-inset-top, 0px)) 18px 18px 22px; gap:8px; }
  .mesa__cab{ align-items:center; }
  body.mesa-abierta .marco .riel{ opacity:0; pointer-events:none; }
  .marco .riel{ transition:opacity .3s var(--curva); }
  body:has(.marco:not([hidden])).mesa-abierta .aviso{ top:auto; bottom:calc(34px + env(safe-area-inset-bottom, 0px)); left:calc(100vw - min(400px, 88vw) / 2); width:max-content; max-width:calc(min(400px, 88vw) - 36px); transition:bottom .35s var(--curva); }
  .mesa__lugar{ left:16px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }
  .mesa__cerrar{ display:grid; }
  .solo-cel{ display:inline; } .solo-pc{ display:none; }
  .mesa-velo{ display:block; position:fixed; inset:0; z-index:84; background:rgba(8,12,17,.3); opacity:0; pointer-events:none; transition:opacity .35s; }
  body.mesa-abierta .mesa-velo{ opacity:1; pointer-events:auto; }

  /* lo que flota, encima de la barra de abajo */
  .bandeja{ left:50%; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); }
  body:has(.marco:not([hidden])) .subidas{ right:12px; left:12px; width:auto; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); }
  body:has(.marco:not([hidden])) .soltar{ left:0; right:0; }
  body:has(.marco:not([hidden])) .aviso{ left:50%; top:auto; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); }
}
/* EN LOS TELÉFONOS, TAMBIÉN DOS RENGLONES (Luis, 2026-10-11: «nunca tres filas»):
   1 · la estrella, el nombre con Editar y, a la derecha, el usuario con su nombre;
   2 · la ruta (una línea que se desliza) y, a la derecha, la vista, la mesa y buscar.
   Todo en el mismo lugar en cualquier vista: sin ruta queda su hueco (no se corre nada a la izquierda).
   El tamaño de las tarjetas se cambia pellizcando la galería (galeria.js); la vista es un solo botón. */
@media (max-width:560px){
  .cab .tamano{ display:none !important; }
  .accesos{ display:contents; }
  .ses{ order:2; }
  .cab::after{ order:3; }
  /* el corrimiento de 7 px va con «left», no con margen negativo: así nunca se cuela en el renglón de arriba */
  .cab__ruta, .cab__ruta:empty{ display:flex; order:4; flex:1 1 0; min-height:36px; margin:0; position:relative; left:-7px; }
  .cab .ver-como{ order:5; padding:2px; }
  .cab .ver-como button[aria-pressed="true"]{ display:none; }
  .cab .mesa-volver{ order:6; }
  .cab .cab__lupa{ order:7; }
  .cab__vista{ order:8; }
  /* el nombre se lee entero: si no cabe en una línea, toma dos (nunca se corta a la mitad) */
  .cab h1{ font-size:19px !important; line-height:1.18; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .ses__resto{ display:none; }
  .cab h1 > span{ white-space:normal; }
}
@media (max-width:480px){
  .accesos{ gap:6px; }
  .cab .tamano{ padding:0 8px; }
  .tamano input{ width:62px; }
  .ver-como button{ width:28px; }
  .cab__lupa, .cab .mesa-volver{ width:36px !important; height:36px !important; }
  .ses{ height:36px; padding:0 10px 0 4px; gap:6px; }
  .ses__yo{ max-width:96px; }
  .marco .riel{ top:calc(env(safe-area-inset-top, 0px) - 3px); }
}
@media (max-width:380px){
  .pilas{ gap:16px 10px; }
}

/* teléfonos muy angostos: los dos renglones siguen enteros */
@media (max-width:360px){
  .cab{ column-gap:5px; }
  .ses{ padding:0 8px 0 4px; gap:4px; }
  .ses__yo{ max-width:64px; }
}

/* ── ESQUINAS RECTAS (Luis, 2026-10-09: «pon todo con esquinas cuadradas para verlo, exceptuando los
   botones»): los cuadros, las fotos, las tarjetas, los paneles y las ventanas van rectos; los
   botones, las pastillas, los campos y los círculos se quedan como están. ── */
.pila__foto, .pieza, .lista, .tarjeta, .tarjeta__foto, .renglon i, .resultado i, .resultados, .vacio, .r2-aviso,
.mesa__cosa, .mesa__cosa i, .mesa__vacia, .mesa__escoger, .mesa__soltar, .mesa__abanico span, .mesa.encima .mesa__in,
.ventana, .ventana--editor, .diseno, .dibujo, .arbol, .lista-prov, .proveedor-elegido, .zona-envio,
.pieza-envio img, .pieza-envio .ext, .subidas, .paso, .cosas li, .cosas i, .estudio__listo,
.previa-marco[data-pantalla="escritorio"] .previa-ventana{ border-radius:0 !important; }
@media (max-width:900px){ .mesa{ border-radius:0; } .pieza{ border-radius:0; } }