/* ====== DG VPS UI (90° corners) ====== */
.dvps-wrapper{
  background:#1f1f1f;
  border:1px solid #333;
  color:#e5e7eb;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  max-width:980px;
  margin:0 auto;
  overflow:visible;

  /* Fondo WhatsApp */
  position:relative;
  background-image:url('imgs/dg-bg.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* Si quieres 0 oscurecimiento total del fondo (como pediste) */
.dvps-wrapper::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.0);
  pointer-events:none;
  z-index:0;
}
.dvps-wrapper > *{ position:relative; z-index:1; }

/* Tabs */
.dvps-tabs{display:flex;border-bottom:1px solid #333;background:#181818}
/*
  Importante: cuando hay icono (candado) no debemos aumentar la altura del tab.
  Usamos flex para centrar icono+texto en la misma línea.
*/
.dvps-tab{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  padding:10px 12px;
  min-height:44px;
  line-height:1;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:rgba(255,255,255,.70);
  text-decoration:none;
  position:relative
}
.dvps-tabs .dvps-ico{
  width:14px;
  height:14px;
  flex:0 0 14px;
  display:block;
}
.dvps-tabs .dvps-tab span{display:inline-flex;align-items:center;line-height:1}
.dvps-tab:hover{color:rgba(255,255,255,.85)}
.dvps-tab-active{color:rgba(255,255,255,.92);font-weight:600}
.dvps-tab-locked{color:rgba(255,255,255,.40)!important;cursor:not-allowed}
.dvps-tab-locked:hover{color:rgba(255,255,255,.40)!important}
.dvps-tab-active::after{
  content:"";
  position:absolute;
  left:14px;right:14px;bottom:0;
  height:3px;
  background:rgba(255,255,255,.35);
  border-radius:2px

/* === Accenti per sezione (INBOX / ARCHIVO / LABORAL) === */
.dvps-wrapper{
  --dvps-accent-inbox: rgba(34,197,94,.85);   /* verde */
  --dvps-accent-archivo: rgba(59,130,246,.85);/* blu */
  --dvps-accent-laboral: rgba(168,85,247,.85);/* viola */
}

/* Effetto “incassato” nella barra tabs */
.dvps-tabs{box-shadow: inset 0 -1px 0 rgba(255,255,255,.04), inset 0 1px 0 rgba(0,0,0,.35);}

/* underline colore per tab attiva */
.dvps-tab-active[data-dvps-tab="inbox"]::after{background:var(--dvps-accent-inbox);}
.dvps-tab-active[data-dvps-tab="archivo"]::after{background:var(--dvps-accent-archivo);}
.dvps-tab-active[data-dvps-tab="laboral"]::after{background:var(--dvps-accent-laboral);}

/* leggera tinta sul tab attivo */
.dvps-tab-active[data-dvps-tab="inbox"]{background:linear-gradient(180deg, rgba(34,197,94,.14), rgba(34,197,94,.05));}
.dvps-tab-active[data-dvps-tab="archivo"]{background:linear-gradient(180deg, rgba(59,130,246,.14), rgba(59,130,246,.05));}
.dvps-tab-active[data-dvps-tab="laboral"]{background:linear-gradient(180deg, rgba(168,85,247,.14), rgba(168,85,247,.05));}

/* stato locked: niente tinta, icona lock già gestita */
.dvps-tab-locked{background:transparent;}
}

/* Messages */
.dvps-message{padding:8px 14px;font-size:13px;background:#14532d;color:#bbf7d0;border-bottom:1px solid #166534}
.dvps-message.dvps-error{background:#7f1d1d;color:#fecaca;border-color:#b91c1c}

/* Header */
.dvps-uyd-header{
  background:#2b2b2b;
  padding:8px 14px;
  font-size:13px;
  border-bottom:1px solid #3a3a3a;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.dvps-uyd-header-title{font-weight:500;color:#e5e7eb;user-select:none;cursor:default;pointer-events:none}
.dvps-muted{opacity:.7}

/* MAIN transparente (INBOX/ARCHIVO/LABORAL) */
.dvps-uyd-main{
  background:transparent !important;
  min-height:260px;
  padding:14px;
  overflow:visible;
}

/* Grid */
.dvps-uyd-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:10px;
  overflow:visible; /* clave para que no "corte" menús */
}

/* Card/item TRANSPARENTE pero legible */
.dvps-uyd-item{
  position:relative;
  isolation:isolate;
  z-index:1;
  background:rgba(0,0,0,0.00);
  backdrop-filter: blur(5px);
  padding:8px 10px;
  padding-right:8px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  border:1px solid #3b3b3b;
  height:72px;
  min-height:72px;
  overflow:visible;
  box-shadow:0 1px 6px rgba(0,0,0,.18)
}

.dvps-uyd-item-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0;overflow:hidden}
.dvps-uyd-item a{display:block;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e5e7eb;text-decoration:none}

/* Iconos (NO blanqueados/gris) */
.dvps-uyd-icon-file,.dvps-uyd-icon-folder{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;flex:0 0 32px;overflow:hidden}
.dvps-uyd-icon-folder{background:transparent !important; opacity:.75;}
.dvps-uyd-icon-file{background:transparent; opacity:.9;}
.dvps-ico{width:20px;height:20px;display:block;filter:none !important;} /* <-- clave */

/* Textos */
.dvps-uyd-empty{font-size:13px;color:#9ca3af}
.dvps-section-title{font-size:13px;margin-bottom:6px;color:#9ca3af}
.dvps-mb-14{margin-bottom:14px}

/* Upload bar */
.dvps-uyd-upload-bar{background:#2f2f2f;border-top:1px solid #3a3a3a;padding:10px 14px;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.dvps-uyd-upload-text small{color:#9ca3af}

/* ====== Action bar (4 botones solo icono, gris, sin bordes, 90°) ====== */
.dvps-action-bar{display:flex;gap:10px;flex-wrap:nowrap;align-items:center;justify-content:flex-end;margin-left:auto}
.dvps-action-btn{
  position:relative;
  overflow:hidden;
  line-height:0;
  width:44px;height:44px;
  background:#3a3a3a;
  border:none;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, opacity .12s ease;
}
.dvps-action-btn:hover{background:#4a4a4a;transform:translateY(-1px);opacity:.98}
.dvps-action-btn:active{transform:translateY(0);opacity:.92}
.dvps-action-btn .dvps-ico{width:22px;height:22px}
.dvps-uyd-icon-file .dvps-ico,.dvps-uyd-icon-folder .dvps-ico{width:18px;height:18px}

.dvps-file-label{position:relative;display:inline-flex;align-items:center}
.dvps-file-input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}

/* Botones del modal */
.dvps-uyd-upload-btn{background:#2f2f2f;border:1px solid #3b3b3b;padding:7px 14px;color:#e5e7eb;font-weight:500;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;line-height:1}
.dvps-uyd-upload-btn:hover{background:#3a3a3a}

.dvps-delete-btn{width:32px;height:32px;background:#3a3a3a;border:none;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s ease, background .12s ease, opacity .12s ease;flex:0 0 32px}
.dvps-delete-btn img{width:18px;height:18px;display:block;opacity:.95;filter:brightness(0) invert(1);}
.dvps-delete-btn:hover{background:#4a4a4a;transform:translateY(-1px)}
.dvps-delete-btn:hover img{opacity:1}

.dvps-arc-breadcrumb{font-size:12px;margin-bottom:8px;color:#9ca3af}
.dvps-arc-breadcrumb a{color:#9ca3af;text-decoration:none}

/* Modal */
.dvps-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:999999}
.dvps-modal{background:#1f1f1f;border:1px solid #3b3b3b;max-width:420px;width:92%;padding:14px}
.dvps-modal h3{margin:0 0 10px 0;font-size:14px}
.dvps-modal input{width:100%;padding:10px;border:1px solid #3b3b3b;background:#262626;color:#fff}
.dvps-modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}

/* Preview modal */
.dvps-preview-modal{
  backdrop-filter: blur(5px);
  border:1px solid #2d2d2d;
  max-width:1200px;
  width:min(1200px, 96vw);
  max-height:92vh;
  height:92vh;
  display:flex;
  flex-direction:column
}
.dvps-preview-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #2d2d2d;background:#151515;position:sticky;top:0;z-index:999999}
.dvps-preview-title{flex:1;font-size:13px;color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.dvps-preview-close{background:transparent;border:0;color:rgba(255,255,255,.8);font-size:18px;line-height:1;padding:6px 10px;cursor:pointer}
.dvps-preview-body{padding:12px;overflow:hidden;flex:1;display:flex;flex-direction:column;min-height:0}

@media(max-width:820px){
  .dvps-preview-modal{
    width:100vw;
    max-width:100vw;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
    border-left:0;
    border-right:0;
  }
  .dvps-preview-head{
    padding:12px 14px;
  }
  .dvps-preview-body{
    padding:0;
    height:calc(100dvh - 52px);
  }
  .dvps-preview-hint{
    padding:10px 14px;
  }
}


@media(max-width:600px){
  .dvps-wrapper{border-left:none;border-right:none}
  .dvps-uyd-upload-bar{flex-direction:column;align-items:flex-start}
  .dvps-action-bar{justify-content:flex-start;margin-left:0}
}

/* Scanner button: only mobile */
#open-scanner-btn{display:none}
@media(max-width:820px){#open-scanner-btn{display:inline-flex}}

/* Thumb */
.dvps-thumb{width:32px;height:32px;display:block;object-fit:cover}

/* Context menu (⋮) */
.dvps-item-actions{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;z-index:2;}
.dvps-menu-btn{width:32px;height:32px;background:transparent;border:none;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:none}
.dvps-menu-btn:hover{background:rgba(255,255,255,.06);border-radius:999px;transform:translateY(-1px)}
.dvps-kebab{font-size:18px;line-height:1;color:#e5e7eb;display:block;margin-top:-1px}

/* Menú por encima SIEMPRE */
.dvps-menu{
  position:absolute;
  right:0;
  top:36px;
  min-width:150px;
  background:#1f1f1f;
  border:1px solid #3b3b3b;
  z-index:9999999;     /* <-- clave */
  display:none
}
.dvps-menu.is-open,.dvps-menu.open{display:block}

.dvps-menu-item{width:100%;display:block;text-align:left;background:none;border:none;color:#e5e7eb;padding:10px 12px;font-size:13px;cursor:pointer;text-decoration:none}
.dvps-menu-item:hover{background:#2b2b2b}
.dvps-menu-item.dvps-danger{color:#fecaca}
.dvps-menu-item.dvps-danger:hover{background:#7f1d1d;color:#fff}

/* CUANDO EL MENÚ ESTÁ ABIERTO, SUBIMOS LA CARD POR ENCIMA DE LAS DEMÁS
   (Chrome/Safari modernos soportan :has) */
.dvps-uyd-item:has(.dvps-menu.is-open),
.dvps-uyd-item:has(.dvps-menu.open){
  z-index:999999;  /* <-- esto evita que quede detrás de otras cards */
}

.dvps-modal-hint{margin-top:8px;color:#9ca3af;font-size:12px}

/* Ellipsis fuerte */
.dvps-wrapper .dvps-uyd-item-main a{
  display:block;
  flex:1;
  min-width:0;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Menú compacto */
.dvps-menu-item{margin:0 !important;line-height:1.1 !important}
.dvps-menu-item + .dvps-menu-item{border-top:1px solid #2b2b2b}
.dvps-menu{padding:0 !important}
.dvps-menu-item{
  padding:8px 10px !important;
  font-size:13px !important;
  line-height:1 !important;
  min-height:auto !important;
  height:auto !important;
  margin:0 !important;
}

/* --- Actions UI: mobile bottom bar + desktop "+" menu --- */
.dvps-hidden-input{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;opacity:0 !important;pointer-events:none !important;}

.dvps-actions-desktop{margin-left:auto;position:relative;display:flex;align-items:center;gap:10px;}
.dvps-plus-btn{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid #3b3b3b;border-radius:10px;
  background:linear-gradient(180deg,#3a3a3a 0%, #2e2e2e 100%) !important;
  cursor:pointer;
  color:#ffffff !important;
  line-height:1 !important;
  padding:0 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}
.dvps-plus-btn:hover{background:linear-gradient(180deg,#444 0%, #333 100%);}
.dvps-plus-btn .dvps-ico{width:22px;height:22px}
.dvps-plus-sign{font-size:28px;line-height:1;color:#ffffff !important;}

.dvps-actions-menu{
  position:absolute;
  right:0;
  top:52px;
  min-width:220px;
  background:#1f1f1f;
  border:1px solid #3a3a3a;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  padding:6px;
  z-index:99998;
}
.dvps-actions-menu[hidden]{display:none !important;}
.dvps-actions-menu .dvps-actions-item{
  width:100%;
  display:flex;align-items:center;gap:10px;
  padding:10px 10px;
  background:transparent;
  border:0;
  border-radius:10px;
  color:#eaeaea;
  cursor:pointer;
  text-align:left;
  line-height:1;
  appearance:none;
  -webkit-appearance:none;
}
.dvps-actions-menu .dvps-actions-item:hover{background:#2a2a2a;}
.dvps-actions-menu .dvps-actions-item .dvps-ico{width:20px;height:20px}
.dvps-actions-menu .dvps-actions-item span{font-size:14px}

/* Bottom bar (mobile + desktop). Visible via media queries. */
.dvps-bottom-bar{display:none;}

/* Desktop: quitamos el "+" y usamos la barra inferior flotante (lado derecho). */
@media (min-width: 821px){
  .dvps-desktop-actions{display:none !important;}

  .dvps-bottom-bar{
    display:flex !important;
    gap:8px;
    position:fixed;
    right:16px;
    bottom:16px;
    left:auto;
    width:auto;
    z-index:99997;
    background:rgba(25,25,25,.92);
    border:1px solid rgba(255,255,255,.10);
    padding:10px;
    border-radius:16px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }

  .dvps-bottom-bar .dvps-bottom-item{
    background:transparent !important;
    border:0 !important;
    color:#eaeaea !important;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:6px 6px !important;
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
    line-height:1 !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    min-width:74px;
  }

  .dvps-bottom-ico .dvps-ico{width:22px;height:22px}
  .dvps-bottom-txt{font-size:12px;opacity:.95}

  /* En desktop no mostramos el escáner */
  .dvps-scan-only{display:none !important;}

  /* No hace falta reservar tanto espacio como con la barra full-width */
  .dvps-uyd-main{padding-bottom:64px;}
}

/* ARCHIVO: desactivar + */
.dvps-wrapper.dvps-scope-archivo .dvps-plus-btn,
.dvps-desktop-actions--readonly .dvps-plus-btn{
  opacity:.35 !important;
  background:transparent !important;
  border-color:rgba(255,255,255,.12) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:none !important;
  pointer-events:none !important;
}

@media (max-width: 820px){
  .dvps-desktop-actions{display:none !important;}
  .dvps-uyd-main{padding-bottom:90px;}

  .dvps-bottom-bar{
    display:grid !important;
    grid-template-columns:repeat(4, 1fr);
    gap:0;
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:99997;
    background:rgba(25,25,25,.96);
    border-top:1px solid rgba(255,255,255,.08);
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    backdrop-filter: blur(8px);
  }
  .dvps-bottom-bar .dvps-bottom-item{
    background:transparent !important;
    border:0 !important;
    color:#eaeaea !important;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:6px 2px !important;
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
    line-height:1 !important;
    appearance:none !important;
    -webkit-appearance:none !important;
  }
  .dvps-bottom-ico .dvps-ico{width:22px;height:22px}
  .dvps-bottom-txt{font-size:12px;opacity:.95}

  .dvps-bottom-bar.dvps-readonly .dvps-bottom-item{
    opacity:.12 !important;
    pointer-events:none !important;
    filter:grayscale(1) contrast(.9) brightness(.8) !important;
  }
}

.dvps-bottom-bar.dvps-readonly .dvps-bottom-item{
  opacity:.12 !important;
  pointer-events:none !important;
  filter:grayscale(1) contrast(.9) !important;
}
.dvps-bottom-bar.dvps-readonly .dvps-bottom-txt{opacity:.55 !important;}

/* La barra inferior existe también en desktop (ver media query arriba) */

.dvps-wrapper *, .dvps-wrapper *::before, .dvps-wrapper *::after{box-sizing:border-box;}
.dvps-plus-sign{font-size:26px;line-height:1;font-weight:700;color:#fff;display:block;transform:translateY(-1px);}


/* ===== Preview modal: fijo, siempre cerrable, scroll interno ===== */
#dvps-preview-modal.dvps-modal-backdrop{
  padding: 12px;
  padding-top: calc(12px + env(safe-area-inset-top));
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.dvps-preview-modal{
  width: min(980px, 96vw);
  height: min(86vh, 900px);
  max-height: calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  border-radius: 14px;
  overflow: hidden;
}
.dvps-preview-head{
  position: sticky;
  top: 0;
  z-index: 2;
}
.dvps-preview-body{
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.dvps-preview-body iframe{
  width: 100%;
  height: 100%;
  min-height: 60vh;
  border: 0;
  display: block;
}
.dvps-preview-body img{
  max-height: 78vh;
  width: 100%;
  height: auto;
  object-fit: contain;
  display:block;
}
/* ===== PDF.js rendering (móvil/Android safe) ===== */
.dvps-pdfjs-holder{width:100%;padding:10px 0;}
.dvps-pdfjs-page{width:100%;max-width:100%;margin:0 auto 14px auto;background:#fff;border-radius:10px;overflow:hidden;}
.dvps-pdfjs-page canvas{display:block;width:100%;height:auto;}
/* Botones de navegación de PDFs (prev/next) siempre por delante */
.dvps-preview-head [data-dvps-pdf-nav]{position:relative;z-index:3}



.dvps-preview-more{background:transparent;border:0;color:rgba(255,255,255,.85);font-size:18px;line-height:1;padding:6px 10px;cursor:pointer}

.dvps-more-menu{
  position:absolute;
  top:44px;
  right:8px;
  background:#1a1a1a;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:6px;
  min-width:190px;
  z-index:1000000;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.dvps-more-menu button{
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  color:rgba(255,255,255,.92);
  padding:10px 10px;
  border-radius:10px;
  cursor:pointer;
  font-size:13px;
}
.dvps-more-menu button:hover{
  background:rgba(255,255,255,.06);
}



/* ===============================
   ICONOS GRANDES (LISTA) - v136
   Caja más grande + SVG grande, sin romper filas
================================= */
.dvps-uyd-icon-file{
  width:72px !important;
  min-width:72px !important;
  height:72px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.dvps-uyd-icon-file img.dvps-ico{
  width:48px !important;
  height:48px !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
}



/* ===============================
   CARPETAS GRANDES (solo carpetas) - v136c
   Nota: la lista tiene height fijo 56px y el icon box 32px, por eso aquí lo sobreescribimos SOLO para carpetas.
================================= */
.dvps-folder-item{
  height:72px !important;
  min-height:72px !important;
  padding-top:6px !important;
  padding-bottom:6px !important;
}

.dvps-folder-item .dvps-uyd-icon-folder{
  width:60px !important;
  height:60px !important;
  flex:0 0 60px !important;
  overflow:visible !important;
  opacity:1 !important;
}

.dvps-folder-item .dvps-uyd-icon-folder img.dvps-ico{
  width:40px !important;
  height:40px !important;
  object-fit:contain !important;
}



/* ===============================
   PREVIEW (PDF/IMAGEN) - FIX MÓVIL
   - X y ⋮ siempre visibles y clicables
   - Cabecera sticky
   - Body con scroll (no "pierdes" la X)
================================= */
#dvps-preview-modal{ z-index: 999999 !important; }
#dvps-preview-modal .dvps-preview-modal{ z-index: 1000000 !important; }

#dvps-preview-modal .dvps-preview-head{
  position: sticky;
  top: 0;
  z-index: 1000001 !important;
  background: rgba(20,20,20,.92);
  backdrop-filter: blur(8px);
}

#dvps-preview-modal .dvps-preview-body,
#dvps-preview-modal #dvps-preview-body{
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100dvh - 64px);
}

#dvps-preview-modal .dvps-preview-close,
#dvps-preview-modal .dvps-preview-more{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:20px !important;
  line-height:1 !important;
  border-radius:12px !important;
}

#dvps-preview-modal .dvps-preview-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}



/* ===============================
   PREVIEW - Z-INDEX DEFINITIVO
   (para que quede por delante del menú/header de la web)
================================= */
#dvps-preview-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important; /* por delante de cualquier header/menu */
}

#dvps-preview-modal .dvps-preview-modal{
  position: relative;
  z-index: 2147483001 !important;
}

#dvps-preview-modal .dvps-preview-head{
  z-index: 2147483002 !important;
}

/* El menú ⋮ siempre por encima de la barra */
#dvps-preview-more-menu{
  z-index: 2147483003 !important;
}



/* ===============================
   PREVIEW - BAJAR VISOR BAJO EL MENU
   (para que no quede detrás del header de la web)
   Ajusta --dvps-header-offset si tu header mide distinto.
================================= */
:root{
  --dvps-header-offset: 72px; /* cambia a 56/64/80 si hace falta */
}

/* backdrop */
#dvps-preview-modal{
  align-items: flex-start !important;
  padding-top: var(--dvps-header-offset) !important;
  box-sizing: border-box !important;
}

/* caja del modal */
#dvps-preview-modal .dvps-preview-modal{
  margin-top: 0 !important;
  max-height: calc(100dvh - var(--dvps-header-offset)) !important;
  height: calc(100dvh - var(--dvps-header-offset)) !important;
}

/* body scroll dentro del cuadro */
#dvps-preview-modal .dvps-preview-body,
#dvps-preview-modal #dvps-preview-body{
  max-height: calc(100dvh - var(--dvps-header-offset) - 64px) !important; /* 64px ~ head */
}



/* ===============================
   PREVIEW: 100% ANCHO + HEADER GRADIENT (demo)
   (solo CSS, sin tocar JS)
================================= */
@media (max-width: 820px){
  #dvps-preview-modal .dvps-preview-modal{
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }
}

/* Header con gradiente (demo) */
#dvps-preview-modal .dvps-preview-head{
  background: linear-gradient(135deg, #6d28d9 0%, #db2777 50%, #f59e0b 100%) !important;
  color: #fff !important;
}
#dvps-preview-modal .dvps-preview-close,
#dvps-preview-modal .dvps-preview-more{
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important;
}
#dvps-preview-modal .dvps-preview-title{
  color:#fff !important;
  font-weight:700 !important;
}



/* ===============================
   PREVIEW OVERLAY (HEADER SIEMPRE VISIBLE)
   - Header por delante del menú (z-index alto)
   - Body scroll dentro del visor
================================= */
#dvps-preview-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  padding-top: 0 !important;
}

#dvps-preview-modal .dvps-preview-modal{
  width: 100% !important;
  max-width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  display:flex !important;
  flex-direction:column !important;
}

#dvps-preview-modal .dvps-preview-head{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2147483001 !important;
  background: rgba(20,20,20,.92) !important;
  backdrop-filter: blur(8px);
}

#dvps-preview-modal .dvps-preview-body,
#dvps-preview-modal #dvps-preview-body{
  flex: 1 1 auto !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-top: 64px !important; /* espacio para header fijo */
}

/* ===== FULL FIX ADDED ===== */

/* HEADER GRADIENT + BLUR */
.dvps-preview-header{
    background: linear-gradient(90deg, #ff3c3c, #ff2d6f, #ff5f3c);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color:#fff;
}

/* SQUARE BUTTONS */
.dvps-preview-modal button,
.dvps-preview-modal .button,
.dvps-preview-modal .btn{
    border-radius:0 !important;
}

/* OFFSET 90PX */
:root{
    --dvps-menu-h:90px;
}

.dvps-preview-modal{
    position:fixed !important;
    top:var(--dvps-menu-h) !important;
    left:0;
    right:0;
    height:calc(100dvh - var(--dvps-menu-h)) !important;
}


/* ===== TABS COLORED UNDERLINE (INBOX/ARCHIVO/LABORAL) ===== */
/* Colors taken from the PDF viewer header gradient */
.dvps-tab.dvps-tab-active[data-dvps-tab="inbox"]::after{
  background:#ff3c3c !important;
  box-shadow:0 0 10px rgba(255,60,60,.35) !important;
}
.dvps-tab.dvps-tab-active[data-dvps-tab="archivo"]::after{
  background:#ff2d6f !important;
  box-shadow:0 0 10px rgba(255,45,111,.35) !important;
}
.dvps-tab.dvps-tab-active[data-dvps-tab="laboral"]::after{
  background:#ff5f3c !important;
  box-shadow:0 0 10px rgba(255,95,60,.35) !important;
}

/* Optional: slight tint on active tab text */
.dvps-tab.dvps-tab-active[data-dvps-tab="inbox"]{ color:rgba(255,255,255,.95) !important; }
.dvps-tab.dvps-tab-active[data-dvps-tab="archivo"]{ color:rgba(255,255,255,.95) !important; }
.dvps-tab.dvps-tab-active[data-dvps-tab="laboral"]{ color:rgba(255,255,255,.95) !important; }

/* ===== Ajustes solicitados: PDF en desktop por iframe + botones móviles sin "bloques" ===== */

/* Desktop: centra el visor PDF (iframe) y evita sensación de 100% ancho */
@media (min-width: 821px){
  .dvps-preview-body{
    align-items: center;
  }
  .dvps-preview-body iframe{
    width: 100%;
    max-width: 920px;
    height: 100%;
    min-height: 70vh;
  }
}

/* Smartphone: botones solo icono + texto (sin cajas/estados raros) */
@media (max-width: 820px){
  .dvps-bottom-bar .dvps-bottom-item{
    background:none !important;
    box-shadow:none !important;
    outline:none !important;
  }
  .dvps-bottom-bar .dvps-bottom-item:active{
    background:none !important;
  }
  .dvps-preview-close,
  .dvps-preview-more{
    background:none !important;
    box-shadow:none !important;
    outline:none !important;
    padding:4px 8px !important;
  }
  .dvps-preview-close:active,
  .dvps-preview-more:active{
    background:none !important;
  }
}

/* Botón peligro (borrar) en menú ⋮ del visor */
.dvps-more-menu .dvps-danger{
  color:#ffb4b4;
}