@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Unbounded:wght@600;700&display=swap");

/* EZ Social v2: tema del CRM sobre File Browser. Solo CSS, sin tocar el HTML.
   Escala de espacio: 4 / 8 / 12 / 16 / 24 / 32 / 48. Margen lateral de la pagina: --gutter. */
:root, body, html.dark {
  --ez-bg: #0D1110;
  --ez-s1: #171D1B;
  --ez-s2: #212927;
  --ez-s3: #2C3633;
  --ez-line: #2B3431;
  --ez-text: #F2F7EF;
  --ez-dim: #9DB093;
  --ez-acc: #34D17C;
  --ez-acc-soft: rgba(52, 209, 124, .16);
  --ez-ink: #070907;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --gutter: 20px;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --background: var(--ez-bg);
  --surfacePrimary: var(--ez-s1);
  --surfaceSecondary: var(--ez-s2);
  --borderPrimary: var(--ez-line);
  --borderSecondary: var(--ez-line);
  --divider: var(--ez-line);
  --textPrimary: var(--ez-text);
  --textSecondary: var(--ez-dim);
  --blue: var(--ez-acc);
  --dark-blue: #1F8F55;
  --action: var(--ez-acc);
  --iconPrimary: var(--ez-acc);
  --iconSecondary: var(--ez-text);
  --iconTertiary: var(--ez-acc);
  --red: #FF5C6B;
  color-scheme: dark;
}

body, button, input, textarea, select {
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
}
html { -webkit-tap-highlight-color: transparent; }
html, body { overflow-x: clip; }
body, #app, #login, #loading { background: var(--ez-bg) !important; color: var(--ez-text); }
::selection { background: var(--ez-acc); color: var(--ez-ink); }
:focus-visible { outline: 2px solid var(--ez-acc) !important; outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--ez-s3) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--ez-s3); border-radius: 8px; }
input, textarea { caret-color: var(--ez-acc); }

/* ---------- Login ---------- */
#login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--sp-5) var(--sp-4); }
#login form {
  background: var(--ez-s1) !important; border: 1px solid var(--ez-line);
  border-radius: 28px; padding: var(--sp-6) var(--sp-5) var(--sp-5); width: min(100%, 380px);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
#login img { width: 80px; height: 80px; border-radius: 24px; align-self: center; }
#login h1 {
  font-family: "Unbounded", sans-serif !important; font-weight: 700; text-align: center;
  font-size: 1.6rem; letter-spacing: -.03em; margin: var(--sp-3) 0 var(--sp-4);
}
#login input[type=text], #login input[type=password] { margin: 0; }
#login .button, #login input[type=submit] { margin-top: var(--sp-2); }
#login p, #login .wrong { text-align: center; margin: 0; }

/* ---------- Controles ---------- */
input, .input {
  background: var(--ez-bg) !important; color: var(--ez-text) !important;
  border: 1px solid var(--ez-line) !important; border-radius: 16px !important;
  min-height: 52px; padding: 0 var(--sp-4) !important; font-size: 1rem; width: 100%;
}
input:focus, .input:focus { border-color: var(--ez-acc) !important; box-shadow: 0 0 0 4px var(--ez-acc-soft); }
input::placeholder { color: var(--ez-dim); opacity: .8; }

.button, button.button, input[type=submit] {
  background: var(--ez-acc) !important; color: var(--ez-ink) !important;
  border: 0 !important; border-radius: 999px !important; font-weight: 700; font-size: 1rem;
  min-height: 52px; padding: 0 var(--sp-5); display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s var(--ease), filter .15s;
}
.button:hover { filter: brightness(1.08); }
.button:active { transform: scale(.97); }
/* En File Browser "Cancelar" es --grey y la accion principal es --flat: la principal queda verde, Cancelar sin relleno */
button.button.button--grey, .button.button--grey { background: transparent !important; color: var(--ez-dim) !important; }
button.button.button--grey:hover, .button.button--grey:hover { background: var(--ez-s2) !important; color: var(--ez-text) !important; }
button.button.button--red, .button.button--red { background: rgba(255, 92, 107, .14) !important; color: #FF5C6B !important; }
input:focus-visible { outline: none !important; }

/* ---------- Cabecera ---------- */
header {
  background: var(--ez-bg) !important; border-bottom: 1px solid var(--ez-line) !important;
  box-shadow: none !important; height: 4rem; padding: 0 var(--sp-3) 0 var(--sp-4) !important; gap: var(--sp-1);
}
header title { font-family: "Unbounded", sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
header .action { border-radius: 14px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
header .action:hover { background: var(--ez-s2); }
header img { border-radius: 10px; height: 2.5em; margin-right: var(--sp-3); }
#search #input { background: var(--ez-s1) !important; border: 1px solid var(--ez-line); border-radius: 14px; padding: 0 var(--sp-4); }
#search #input input { border: 0 !important; padding: 0 !important; box-shadow: none !important; background: transparent !important; min-height: 0; }

/* ---------- Menu lateral ---------- */
nav { background: var(--ez-s1) !important; border-right: 1px solid var(--ez-line); box-shadow: none !important; padding: var(--sp-3) 0; }
nav .action { border-radius: 14px !important; margin: var(--sp-1) var(--sp-3); width: calc(100% - 24px); padding: .85em 1em; }
nav .action:hover { background: var(--ez-s2); }
nav > div { border-top: 1px solid var(--ez-line) !important; margin-top: var(--sp-3); padding-top: var(--sp-3); }
nav .credits { display: none !important; } /* no mostrar el disco de la VPS ni links del proyecto */

/* ---------- Ruta (breadcrumbs) ---------- */
.breadcrumbs {
  background: var(--ez-bg) !important; border: 0 !important; height: 3.5rem !important; top: 4rem !important;
  padding: 0 calc(var(--gutter) - 8px) !important; display: flex; align-items: center; gap: 2px;
  overflow-x: auto; overflow-y: hidden !important; white-space: nowrap; scrollbar-width: none;
}
.breadcrumbs::-webkit-scrollbar { display: none; }
.breadcrumbs a { border-radius: 12px; padding: var(--sp-2) var(--sp-2); color: var(--ez-dim) !important; font-weight: 600; }
.breadcrumbs a:hover { background: var(--ez-s2); color: var(--ez-text) !important; }
.breadcrumbs a[aria-current=page], .breadcrumbs span:last-child a {
  color: var(--ez-text) !important; font-family: "Unbounded", sans-serif; font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em;
}
.breadcrumbs span { color: var(--ez-line); }

/* ---------- Listado: contenedor ---------- */
#listing { margin: 0 !important; padding: 0 var(--gutter) !important; }
#listing .item {
  color: var(--ez-text); box-shadow: none !important; cursor: pointer;
  animation: rise .4s var(--ease) both;
  transition: background .15s, transform .2s var(--ease), border-color .15s;
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* Titulos de seccion: aire arriba, poco abajo */
#listing h2 {
  display: block !important; margin: var(--sp-6) 0 var(--sp-3) !important; padding: 0 var(--sp-1);
  color: var(--ez-dim); font-size: .75rem !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
#listing h2:first-child { margin-top: var(--sp-4) !important; }

/* ---------- Vista cuadricula (por defecto) ---------- */
#listing.mosaic > div {
  display: grid !important; grid-template-columns: repeat(6, 1fr); gap: var(--sp-2) var(--sp-2);
  align-items: start;
}
#listing.mosaic h2 { grid-column: 1 / -1; width: 100%; }
#listing.mosaic .item.header { display: none !important; }
#listing.mosaic .item {
  width: auto !important; margin: 0 !important; padding: 0 !important;
  border-radius: 18px; overflow: hidden; position: relative;
  background: var(--ez-s1) !important; border: 1px solid var(--ez-line) !important;
}
#listing.mosaic .item:hover { background: var(--ez-s2) !important; }
#listing.mosaic .item:active { transform: scale(.97); }
#listing.mosaic .item i { color: var(--ez-acc) !important; margin: 0; vertical-align: middle; }
#listing.mosaic .size, #listing.mosaic .modified { display: none !important; }
#listing.mosaic .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* Carpetas: fichas anchas, una por fila en el celu (nombre completo) */
#listing.mosaic .item[data-dir=true] {
  grid-column: span 6; height: 64px; display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4) !important;
}
#listing.mosaic .item[data-dir=true] div:first-of-type {
  width: 40px !important; height: 40px !important; flex: none; border-radius: 12px; background: var(--ez-acc-soft);
  display: flex; align-items: center; justify-content: center;
}
#listing.mosaic .item[data-dir=true] i { font-size: 1.4rem !important; }
#listing.mosaic .item[data-dir=true] div:last-of-type {
  position: static !important; width: auto !important; flex: 1; min-width: 0; padding: 0 !important; background: none !important; text-align: left !important;
}
#listing.mosaic .item[data-dir=true] .name { font-size: .92rem; }

/* Archivos: cuadrados, tres por fila */
#listing.mosaic .item[data-dir=false] { grid-column: span 2; aspect-ratio: 1; }
#listing.mosaic .item[data-dir=false] div:first-of-type { width: 100% !important; height: 100% !important; }
#listing.mosaic .item[data-dir=false] img { width: 100%; height: 100%; object-fit: cover; margin: 0; display: block; }
#listing.mosaic .item[data-dir=false] i { font-size: 2.6rem !important; display: flex; align-items: center; justify-content: center; height: 100%; padding-bottom: var(--sp-5); }
#listing.mosaic .item[data-dir=false] div:last-of-type {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100% !important; padding: var(--sp-2) var(--sp-3) var(--sp-3) !important;
  text-align: left !important; background: none !important;
}
#listing.mosaic .item[data-dir=false] .name { font-size: .72rem; color: var(--ez-text); }

/* Fotos: se ven solas. El nombre aparece al pasar el mouse. */
#listing.mosaic .item[data-type=image] { background: var(--ez-s2) !important; border-color: transparent !important; }
#listing.mosaic .item[data-type=image] div:last-of-type {
  opacity: 0; padding-top: var(--sp-6) !important; background: linear-gradient(transparent, rgba(7, 9, 7, .8)) !important; transition: opacity .2s;
}
@media (hover: hover) { #listing.mosaic .item[data-type=image]:hover div:last-of-type { opacity: 1; } }

/* Seleccion */
#listing .item[aria-selected=true] { border-color: var(--ez-acc) !important; background: var(--ez-acc-soft) !important; color: var(--ez-text) !important; }
#listing.mosaic .item[data-type=image][aria-selected=true] { outline: 3px solid var(--ez-acc); outline-offset: -3px; }
#listing.mosaic .item[data-type=image][aria-selected=true] img { opacity: .55; }
#listing.mosaic .item[data-type=image][aria-selected=true] div:last-of-type { opacity: 1; }

/* ---------- Vista lista ---------- */
#listing.list .item {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--ez-line) !important;
  border-radius: 0; padding: var(--sp-3) var(--sp-1) !important; gap: var(--sp-3);
}
#listing.list .item:hover { background: var(--ez-s1) !important; }
#listing.list .item i { color: var(--ez-acc) !important; }
#listing.list .item div:first-of-type img { width: 2.8em; height: 2.8em; border-radius: 10px; }
#listing.list .item .name { font-weight: 600; }
#listing.list .item .size, #listing.list .item .modified { color: var(--ez-dim); font-variant-numeric: tabular-nums; }
#listing.list .item.header {
  background: var(--ez-bg) !important; color: var(--ez-dim); font-size: .8rem; font-weight: 600; padding: var(--sp-3) var(--sp-1) !important;
}
#listing.list .item.header a, #listing.list .item.header p { color: var(--ez-dim); }
#listing.list .item.header .active { color: var(--ez-text); }

#listing #multiple-selection { background: var(--ez-s2) !important; border-top: 1px solid var(--ez-acc); }

/* ---------- Barra de seleccion ---------- */
#file-selection:empty { display: none !important; } /* vacia se dibujaba como una barrita */
#file-selection {
  background: rgba(33, 41, 39, .92) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--ez-line); border-radius: 999px; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .85) !important; bottom: 20px; width: calc(100% - 2 * var(--gutter)); max-width: 26em; z-index: 100000;
}
#file-selection > span { font-weight: 600; font-size: .9rem; margin: 0 auto 0 0; }
#file-selection .action { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
#file-selection .action:hover { background: var(--ez-s3); }

/* ---------- Ventanas ---------- */
.overlay { background: rgba(7, 9, 7, .72) !important; }
.card, .card.floating {
  background: var(--ez-s1) !important; border: 1px solid var(--ez-line); border-radius: 28px !important;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .85) !important; color: var(--ez-text); overflow: hidden;
}
.card .card-title { padding: var(--sp-5) var(--sp-5) var(--sp-2) !important; }
.card .card-title h2, .card h2 { font-family: "Unbounded", sans-serif; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; color: var(--ez-text); margin: 0; }
.card .card-content { padding: var(--sp-2) var(--sp-5) var(--sp-4) !important; color: var(--ez-text); }
.card .card-action { background: transparent !important; border-top: 1px solid var(--ez-line); padding: var(--sp-3) var(--sp-4) var(--sp-4) !important; display: flex; justify-content: flex-end; gap: var(--sp-2); }
.card .card-action .button { min-height: 46px; }
.upload-files .file .file-progress > div, .vue-simple-progress-bar { background: var(--ez-acc) !important; }
.upload-files .file { border-bottom: 1px solid var(--ez-line); padding: var(--sp-3) var(--sp-4); }

/* ---------- Estado vacio: tres fotos inclinadas ---------- */
h2.message {
  position: relative; display: flex !important; flex-direction: column; align-items: center; text-align: center;
  margin: var(--sp-7) 0 0 !important; padding: 150px var(--sp-5) 0; color: var(--ez-text);
  font-family: "Unbounded", sans-serif; font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em;
}
h2.message i {
  position: absolute; top: 10px; left: 50%; width: 92px; height: 116px; margin-left: -46px; z-index: 2;
  font-size: 0 !important; border-radius: 20px; transform: rotate(-3deg);
  background: linear-gradient(160deg, #34D17C 0%, #1F8F55 55%, #0D3B26 100%); border: 3px solid var(--ez-s1);
  box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .7);
}
h2.message::before, h2.message::after {
  content: ""; position: absolute; top: 22px; left: 50%; width: 84px; height: 106px; border-radius: 20px; border: 3px solid var(--ez-s1);
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .6);
}
h2.message::before { margin-left: -118px; transform: rotate(-14deg); background: linear-gradient(160deg, #F5B342, #C9633A 60%, #5B2A2A); }
h2.message::after { margin-left: 34px; transform: rotate(12deg); background: linear-gradient(160deg, #5CA8F0, #3A5BC9 60%, #1E2A5B); }
h2.message span::after {
  content: "Tocá Subir para agregar tus fotos"; display: block; margin-top: var(--sp-2);
  font-family: "Hanken Grotesk", sans-serif; font-weight: 400; font-size: .9rem; color: var(--ez-dim); letter-spacing: 0;
}

/* ---------- Visor de fotos ---------- */
#previewer { background: #070907 !important; }
#previewer header { background: linear-gradient(rgba(7, 9, 7, .85), transparent) !important; border: 0 !important; }

/* ---------- Logo EZ (el logo.svg original queda cacheado en Cloudflare) ---------- */
header img, #login img {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Crect width='96' height='96' rx='24' fill='%23171D1B'/%3E%3Crect x='2' y='2' width='92' height='92' rx='22' fill='none' stroke='%2334D17C' stroke-width='4'/%3E%3Ctext x='48' y='62' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='800' font-size='40' fill='%2334D17C' letter-spacing='-2'%3EEZ%3C/text%3E%3C/svg%3E");
}

/* ---------- Celular ---------- */
@media (max-width: 736px) {
  header img { display: block !important; height: 36px; margin-right: auto; }
  header .menu-button { order: -1; }
  #listing { margin-bottom: 9rem !important; }
  #more { display: none !important; }

  /* Dock de acciones al alcance del pulgar */
  #dropdown {
    display: flex !important; align-items: center; gap: var(--sp-1);
    top: auto !important; right: auto !important; left: 50% !important;
    bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px));
    transform: translateX(-50%) !important;
    background: rgba(33, 41, 39, .92) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--ez-line); border-radius: 999px; padding: var(--sp-2);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .85) !important; z-index: 900 !important;
  }
  #dropdown > div { display: flex; }
  #dropdown .action { width: 48px !important; height: 48px; padding: 0; justify-content: center; border-radius: 999px !important; }
  #dropdown .action i { color: var(--ez-text) !important; text-shadow: none !important; }
  #dropdown .action span:not(.counter) { display: none; }
  #dropdown .action:hover { background: var(--ez-s3); }
  #dropdown #upload-button {
    width: auto !important; padding: 0 var(--sp-5) 0 var(--sp-4); gap: var(--sp-2);
    background: var(--ez-acc) !important; order: -1; margin-right: var(--sp-1);
  }
  #dropdown #upload-button i { color: var(--ez-ink) !important; }
  #dropdown #upload-button span:not(.counter) { display: inline !important; padding: 0 !important; color: var(--ez-ink); font-weight: 700; font-size: .95rem; }
  body:has(#file-selection:not(:empty)) #dropdown { display: none !important; }

  ::-webkit-scrollbar { display: none; }
  * { scrollbar-width: none; }
}

/* ---------- Pantalla grande ---------- */
@media (min-width: 737px) {
  :root, body { --gutter: 32px; }
  #listing.mosaic > div { grid-template-columns: repeat(12, 1fr); gap: var(--sp-3); }
  #listing.mosaic .item[data-dir=true] { grid-column: span 3; }
  #listing.mosaic .item[data-dir=false] { grid-column: span 2; }
  .breadcrumbs { padding: 0 calc(var(--gutter) - 8px) !important; }
  header .menu-button, header .search-button { display: none !important; }
  #search { height: 44px; align-self: center; }
  #search #input { height: 44px; }
  nav .action { padding: .7em 1em; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===== Subir al estilo Drive ===== */

/* Hoja de opciones: filas grandes con icono en circulo (sin texto de relleno) */
.card:has(.card-action.full) .card-content { display: none; }
.card:has(.card-action.full) .card-title { padding-bottom: var(--sp-3) !important; }
.card-action.full {
  display: flex !important; flex-direction: column; justify-content: flex-start !important; gap: var(--sp-1);
  border-top: 0 !important; padding: 0 var(--sp-3) var(--sp-4) !important;
}
.card-action.full .action {
  display: flex !important; flex-direction: row; align-items: center; gap: var(--sp-4); width: 100% !important; height: auto; min-height: 68px;
  padding: var(--sp-2) var(--sp-3); border: 0 !important; border-radius: 18px; text-align: left; cursor: pointer; background: transparent;
  transition: background .15s, transform .2s var(--ease);
}
.card-action.full .action:hover, .card-action.full .action:focus-visible { background: var(--ez-s2); }
.card-action.full .action:active { transform: scale(.98); }
.card-action.full .action i {
  flex: none; width: 48px; height: 48px; margin: 0; border-radius: 50%; background: var(--ez-acc-soft);
  display: grid; place-items: center; font-size: 1.5rem !important; color: var(--ez-acc) !important;
}
.card-action.full .action .title { margin: 0; text-align: left; font-size: 1rem; font-weight: 600; color: var(--ez-text); }
.card:has(.card-action.full) .action:nth-child(1) .title::after,
.card:has(.card-action.full) .action:nth-child(2) .title::after {
  display: block; margin-top: 2px; font-size: .82rem; font-weight: 400; color: var(--ez-dim);
}
.card:has(.card-action.full) .action:nth-child(1) .title::after { content: "Una o varias fotos o documentos"; }
.card:has(.card-action.full) .action:nth-child(2) .title::after { content: "Con todo lo que tenga adentro"; }

/* Cartel de progreso: flota arriba de la barra de acciones, no tapado */
.upload-files .card.floating {
  position: fixed; top: auto !important; transform: none !important; margin: 0;
  left: var(--sp-4); right: var(--sp-4); width: auto; max-width: none; border-radius: 24px !important;
  bottom: calc(max(20px, env(safe-area-inset-bottom) + 12px) + 80px); z-index: 100001;
}
.upload-files .card-title {
  display: grid !important; grid-template-columns: 1fr auto auto; align-items: center; column-gap: var(--sp-1); row-gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-3) var(--sp-3) var(--sp-5) !important;
}
.upload-files .card-title h2 { font-size: .95rem; }
.upload-files .upload-info { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: .78rem; color: var(--ez-dim); font-variant-numeric: tabular-nums; }
.upload-files .upload-percentage { color: var(--ez-acc); font-weight: 700; }
.upload-files .card-title .action { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.upload-files .card-title .action:hover { background: var(--ez-s3); }
.upload-files .card-content { padding: 0 var(--sp-5) var(--sp-3) !important; }
.upload-files .file { padding: var(--sp-2) 0 !important; border-bottom: 0; }
.upload-files .file-name { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.upload-files .file-progress { height: 6px; border-radius: 6px; background: var(--ez-s3); overflow: hidden; }
.upload-files .file-progress > div { height: 100%; border-radius: 6px; background: var(--ez-acc) !important; transition: width .3s var(--ease); }
#nprogress .bar { background: var(--ez-acc) !important; }
#nprogress .peg { box-shadow: 0 0 10px var(--ez-acc), 0 0 5px var(--ez-acc) !important; }

@media (min-width: 737px) {
  .upload-files .card.floating { left: auto; right: var(--sp-5); bottom: var(--sp-5); width: 380px; }
}

/* Hoja desde abajo en el celular */
@media (max-width: 736px) {
  .card.floating:has(.card-action.full) {
    top: auto !important; left: 0 !important; right: 0; bottom: 0; transform: none !important; width: 100%; max-width: none;
    border-radius: 28px 28px 0 0 !important; padding-bottom: env(safe-area-inset-bottom);
    animation: sheet .3s var(--ease) both;
  }
  .card.floating:has(.card-action.full)::before {
    content: ""; display: block; width: 36px; height: 4px; border-radius: 4px; background: var(--ez-s3); margin: var(--sp-3) auto 0;
  }
}
@keyframes sheet { from { transform: translateY(100%); } }

/* Arrastrar: File Browser pone opacity .5 inline en las fichas mientras se arrastra un archivo encima */
body:has(#listing .item[style*="opacity: 0.5"])::after {
  content: "Soltá los archivos para subirlos"; position: fixed; inset: var(--sp-3); z-index: 100002; pointer-events: none;
  display: grid; place-items: center; text-align: center; padding: var(--sp-5);
  border: 2px dashed var(--ez-acc); border-radius: 28px; background: rgba(13, 17, 16, .86);
  color: var(--ez-text); font-family: "Unbounded", sans-serif; font-weight: 600; font-size: 1.1rem; letter-spacing: -.01em;
}
@media (hover: hover) and (min-width: 737px) {
  h2.message span::after { content: "Tocá Subir o arrastrá tus fotos hasta acá"; }
}
.card-action.full .action i { line-height: 1; padding: 0; }
.upload-files .upload-eta { display: none; } /* viene en ingles ("remaining") */
.card-action.full .action i { display: block !important; margin: 0 !important; line-height: 48px !important; text-align: center; }