/* app_publico/static/styles.css */
/* Solo público: visor docs paciente */

.pub-docs-page .pd-viewer{
  width: 100%;
  height: min(72vh, 720px);
  position: relative;
  border: 1px solid rgba(20,24,30,0.12);
  border-radius: 18px;
  background: rgba(255,255,255,0.82);
  box-shadow: 0 18px 45px rgba(0,0,0,0.10);
  overflow: hidden;
}

/* Quitar “tarjeta extra” SOLO en este visor (queda como privado) */
.pub-docs-page .pd-viewer.pd-viewer-flat{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 18px !important; /* si querés recto: 0 */
}

/* Iframe fallback (si se usa) */
.pub-docs-page .pd-viewer iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent !important;
}

/* PDF.js container (evita el “Abrir” en Chrome móvil) */
.pub-docs-page .pd-pdfjs{
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 12px;
  padding-bottom: 130px; /* reserva para botones fixed */
  box-sizing: border-box;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.pub-docs-page .pd-pdfjs canvas{
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

/* Overlay de carga centrado (SIN marco/borde) */
.pub-docs-page .pd-loading{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 8;

  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(2px);
}

.pub-docs-page .pd-loading-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;

  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
}

.pub-docs-page .pd-loading-logo{
  width: 124px;
  height: 84px;
  opacity: 0.80;
  animation: pdspin 1.1s linear infinite;
}

.pub-docs-page .pd-loading-text{
  font-weight: 800;
  font-size: 20px;
  color: rgba(21,26,34,0.78);
  text-align: center;
  text-shadow: 0 2px 12px rgba(255,255,255,0.55);
}

@keyframes pdspin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* Lista */
.pub-docs-page .pd-list{
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.pub-docs-page .pd-item{
  width: 100%;
  height: 52px;
  border-radius: 18px;
  border: 1px solid rgba(20,24,30,0.12);
  background: rgba(255,255,255,0.80);
  box-shadow: 0 12px 26px rgba(0,0,0,0.08);
  cursor: pointer;
  font-weight: 800;
  color: rgba(21,26,34,0.86);
  padding: 0 14px;
  text-align: left;
}

.pub-docs-page .pd-item:active{ transform: translateY(1px); }

.pub-docs-page .pd-item.is-active{
  box-shadow: 0 0 0 3px rgba(0,0,0,0.18), 0 12px 26px rgba(0,0,0,0.10);
}

.pub-docs-page .pd-empty{
  margin-top: 10px;
  font-weight: 800;
  color: rgba(21,26,34,0.70);
}

/* Acciones flotantes: FIXED (NO SCROLL) y más abajo */
.pub-docs-page .pd-actions{
  position: fixed;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 999;
  pointer-events: auto;
}

/* Botón 3D negro icon-only */
.pub-docs-page .pd-actbtn{
  position: relative !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 18px !important;

  display: grid !important;
  place-items: center !important;

  border: 1px solid rgba(255,255,255,0.12) !important;
  background: linear-gradient(180deg, #2b2f38 0%, #141821 48%, #07090d 100%) !important;

  box-shadow:
    0 28px 44px rgba(0,0,0,0.38),
    0 12px 18px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -16px 26px rgba(0,0,0,0.70) !important;

  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;

  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease !important;
}

.pub-docs-page .pd-actbtn::after{
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    radial-gradient(120px 75px at 30% 16%,
      rgba(255,255,255,0.34),
      rgba(255,255,255,0.08) 55%,
      transparent 72%),
    linear-gradient(180deg,
      rgba(255,255,255,0.14) 0%,
      transparent 42%) !important;
  opacity: .95 !important;
}

.pub-docs-page .pd-actbtn::before{
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  border-radius: 14px !important;
  pointer-events: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -12px 18px rgba(0,0,0,0.45) !important;
  opacity: .72 !important;
}

.pub-docs-page .pd-actbtn:hover{
  transform: translateY(-2px) !important;
  filter: brightness(1.03) contrast(1.03) !important;
  box-shadow:
    0 32px 50px rgba(0,0,0,0.42),
    0 14px 20px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -16px 26px rgba(0,0,0,0.72) !important;
}

.pub-docs-page .pd-actbtn:active{
  transform: translateY(1px) !important;
  filter: brightness(0.985) !important;
  box-shadow:
    0 18px 30px rgba(0,0,0,0.38),
    0 8px 14px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -20px 30px rgba(0,0,0,0.78) !important;
}

.pub-docs-page .pd-actbtn i{
  font-size: 20px !important;
  color: #f2f5ff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.40) !important;
  position: relative !important;
  z-index: 1 !important;
}

.pub-docs-page .pd-actbtn:disabled{
  opacity: .45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: grayscale(0.2) !important;
}

/* ─────────────────────────────────────────────
   Login público (pacientes) - rp-*
   ───────────────────────────────────────────── */

.rp-page .rp-login-actions{
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

.rp-page .rp-login-btn{
  width: 100%;
  max-width: 520px;
  height: 60px;
  border-radius: 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, #2b2f38 0%, #141821 48%, #07090d 100%);

  box-shadow:
    0 28px 44px rgba(0,0,0,0.38),
    0 12px 18px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -16px 26px rgba(0,0,0,0.70);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}

.rp-page .rp-login-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.03) contrast(1.03);
  box-shadow:
    0 32px 50px rgba(0,0,0,0.42),
    0 14px 20px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -16px 26px rgba(0,0,0,0.72);
}

.rp-page .rp-login-btn:active{
  transform: translateY(1px);
  filter: brightness(0.985);
  box-shadow:
    0 18px 30px rgba(0,0,0,0.38),
    0 8px 14px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -20px 30px rgba(0,0,0,0.78);
}

.rp-page .rp-login-btn i{
  font-size: 20px;
  color: #f2f5ff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.40);
}

.rp-page .rp-login-btn span{
  color: #f2f5ff;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .2px;
}