:root {
      --color-brand: #0f6cbd;
      --color-brand-hover: #115ea3;
      --color-brand-pressed: #0c3b5e;
      --color-brand-light: #ebf3fc;

      --color-neutral-background-1: #ffffff;
      --color-neutral-background-2: #fafafa;
      --color-neutral-background-3: #f5f5f5;

      --color-neutral-foreground-1: #242424;
      --color-neutral-foreground-2: #424242;
      --color-neutral-foreground-3: #616161;

      --color-neutral-stroke-1: #d1d1d1;
      --color-neutral-stroke-2: #e0e0e0;

      --shadow-4:
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 0 2px rgba(0, 0, 0, 0.08);

      --shadow-16:
        0 8px 16px rgba(0, 0, 0, 0.14),
        0 0 4px rgba(0, 0, 0, 0.12);

      --radius-small: 4px;
      --radius-medium: 8px;
    }
.sp-document-viewer,
.sp-document-viewer * {
  box-sizing: border-box;
}

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
    }

    body {
      padding: 0;

      font-family:
        "Segoe UI",
        "Segoe UI Web",
        -apple-system,
        BlinkMacSystemFont,
        Arial,
        sans-serif;

      font-size: 14px;
      line-height: 20px;

      color: var(--color-neutral-foreground-1);
      background: #f3f2f1;
    }
.sp-document-viewer button {
  font: inherit;
}

    /*
     * Visualizador principal
     */
    .sp-document-viewer {
      position: relative;
      z-index: 1;
      isolation: isolate;

      width: 100%;
      height: 100vh;
      height: 100dvh;

      overflow: hidden;

      background: var(--color-neutral-background-1);
    }

    /*
     * Barra superior
     */
    .sp-app-header {
      height: 58px;
      padding: 0 16px;

      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;

      color: #ffffff;
      background: var(--color-brand);
    }

    .sp-app-identity {
      min-width: 0;

      display: flex;
      align-items: center;
      gap: 12px;
    }

    .sp-app-launcher {
      width: 32px;
      height: 32px;
      padding: 5px;

      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;

      border: 0;
      border-radius: var(--radius-small);

      background: transparent;
      cursor: pointer;
    }

    .sp-app-launcher:hover {
      background: rgba(255, 255, 255, 0.12);
    }

    .sp-app-launcher span {
      background: #ffffff;
      border-radius: 1px;
    }

.sp-app-name { min-width: 0; display: flex; align-items: center; gap: 24px; overflow: hidden; color: #ffffff; font-size: 16px; font-weight: 600; white-space: nowrap; } .sp-sharepoint-name { display: inline-block; margin-left: 30px;}

    /*
     * Usuario sin autenticar
     */
    .sp-user-avatar {
      width: 32px;
      height: 32px;
      flex: 0 0 auto;

      display: grid;
      place-items: center;

      color: #616161;
      background: #f5f5f5;

      border: 1px solid rgba(255, 255, 255, 0.8);
      border-radius: 50%;
    }

    .sp-user-avatar svg {
      width: 20px;
      height: 20px;
    }

    /*
     * Cabecera del archivo
     */
    .sp-file-header {
      height: 64px;
      padding: 0 20px;

      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;

      background: var(--color-neutral-background-1);
      border-bottom: 1px solid var(--color-neutral-stroke-2);
    }

    .sp-file-information {
      min-width: 0;

      display: flex;
      align-items: center;
      gap: 12px;
    }

    .sp-file-icon {
      position: relative;

      width: 32px;
      height: 38px;
      flex: 0 0 auto;

      display: grid;
      place-items: center;

      color: #ffffff;
      background: #d13438;

      border-radius: 2px;

      font-size: 11px;
      font-weight: 700;
    }

    .sp-file-icon::after {
      content: "";

      position: absolute;
      top: 0;
      right: 0;

      width: 9px;
      height: 9px;

      background:
        linear-gradient(
          225deg,
          #ffffff 49%,
          rgba(255, 255, 255, 0.45) 50%
        );
    }

    .sp-file-text {
      min-width: 0;
    }

    .sp-file-name {
      margin: 0;
      overflow: hidden;

      font-size: 14px;
      font-weight: 600;
      line-height: 20px;

      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sp-file-path {
      margin: 2px 0 0;
      overflow: hidden;

      color: var(--color-neutral-foreground-3);

      font-size: 12px;
      line-height: 16px;

      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sp-restricted-label {
      padding: 4px 9px;
      flex: 0 0 auto;

      display: inline-flex;
      align-items: center;
      gap: 6px;

      color: #8a3707;
      background: #fff4ce;

      border-radius: var(--radius-small);

      font-size: 12px;
      font-weight: 600;
      line-height: 16px;
    }

    .sp-restricted-label svg {
      width: 14px;
      height: 14px;
    }

    /*
     * Barra de comandos
     */
    .sp-command-bar {
      height: 44px;
      padding: 0 12px;

      display: flex;
      align-items: center;
      gap: 4px;

      overflow-x: auto;

      background: var(--color-neutral-background-1);
      border-bottom: 1px solid var(--color-neutral-stroke-2);
    }

    .sp-command-button {
      min-height: 32px;
      padding: 5px 10px;

      display: inline-flex;
      align-items: center;
      gap: 7px;

      color: #a0a0a0;
      background: transparent;

      border: 0;
      border-radius: var(--radius-small);

      font-weight: 500;
      white-space: nowrap;

      cursor: not-allowed;
    }

    .sp-command-button svg {
      width: 16px;
      height: 16px;
    }

    .sp-command-separator {
      width: 1px;
      height: 20px;
      margin: 0 4px;
      flex: 0 0 auto;

      background: var(--color-neutral-stroke-2);
    }

    /*
     * Área del documento
     */
    .sp-document-area {
      position: relative;

      height: calc(100% - 156px);
      overflow: hidden;

      background: #e5e5e5;
    }

    .sp-document-content {
      width: 100%;
      height: 100%;
      padding: 32px 24px;

      overflow: auto;

      transition:
        filter 180ms ease,
        opacity 180ms ease;
    }

    .sp-document-viewer.is-locked .sp-document-content {
      filter: blur(5px);
      opacity: 0.6;

      pointer-events: none;
      user-select: none;
    }

    /*
     * Documento simulado
     */
    .sp-document-page {
      width: min(720px, 100%);
      min-height: 930px;
      margin: 0 auto;
      padding: 64px 70px;

      background: #ffffff;
      box-shadow: var(--shadow-4);
    }

    .document-heading {
      margin: 0 0 8px;

      font-family: Georgia, serif;
      font-size: 26px;
      line-height: 34px;
    }

    .document-description {
      margin: 0 0 36px;

      color: #666666;
      font-size: 13px;
    }

    .document-section-title {
      margin: 30px 0 12px;

      font-family: Georgia, serif;
      font-size: 18px;
      line-height: 26px;
    }

    .document-paragraph {
      margin: 0 0 18px;

      color: #363636;

      font-family: Georgia, serif;
      font-size: 14px;
      line-height: 24px;
    }

    .imagen-articulo{
      display: block;
      max-width: 80%;
      height: auto;
      margin: 20px auto;
    }
    /*
     * Overlay de acceso
     */
    .sp-access-overlay {
      position: absolute;
      z-index: 10;
      inset: 0;

      display: grid;
      place-items: center;
      padding: 20px;

      background: rgba(242, 242, 242, 0.62);

      backdrop-filter: blur(1px);
      -webkit-backdrop-filter: blur(1px);
    }

    /*
     * Diálogo de acceso
     */
    .sp-access-dialog {
      width: min(440px, 100%);
      overflow: hidden;

      background: var(--color-neutral-background-1);

      border: 1px solid var(--color-neutral-stroke-2);
      border-radius: var(--radius-medium);

      box-shadow: var(--shadow-16);
    }

    .sp-dialog-accent {
      height: 4px;
      background: var(--color-brand);
    }

    .sp-dialog-content {
      padding: 28px 28px 20px;
    }

    .sp-dialog-icon {
      width: 40px;
      height: 40px;
      margin-bottom: 20px;

      display: grid;
      place-items: center;

      color: var(--color-brand);
      background: var(--color-brand-light);

      border-radius: var(--radius-small);
    }

    .sp-dialog-icon svg {
      width: 22px;
      height: 22px;
    }

    .sp-access-dialog h2 {
      margin: 0 0 8px;

      font-size: 20px;
      font-weight: 600;
      line-height: 26px;
    }

    .sp-access-dialog p {
      margin: 0;

      color: var(--color-neutral-foreground-2);

      font-size: 14px;
      line-height: 20px;
    }

    .sp-dialog-help {
      margin-top: 14px !important;

      color: var(--color-neutral-foreground-3) !important;

      font-size: 12px !important;
      line-height: 16px !important;
    }

    .sp-dialog-actions {
      padding: 16px 28px 24px;

      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }

    .sp-button {
      min-height: 32px;
      padding: 5px 14px;

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

      border: 1px solid transparent;
      border-radius: var(--radius-small);

      font-weight: 600;
      line-height: 20px;

      cursor: pointer;
    }

    .sp-button-secondary {
      color: var(--color-neutral-foreground-1);
      background: var(--color-neutral-background-1);

      border-color: var(--color-neutral-stroke-1);
    }

    .sp-button-secondary:hover {
      background: var(--color-neutral-background-3);
    }

    .sp-button-primary {
      color: #ffffff;
      background: var(--color-brand);

      border-color: var(--color-brand);
    }

    .sp-button-primary:hover {
      background: var(--color-brand-hover);
      border-color: var(--color-brand-hover);
    }

    .sp-button-primary:active {
      background: var(--color-brand-pressed);
    }

    .sp-button svg {
      width: 16px;
      height: 16px;
    }

/*
 * Ajustes responsive del visualizador.
 */
@media (max-width: 700px) {
  .sp-file-header {
    padding: 0 14px;
  }

  .sp-document-content {
    padding: 20px 12px;
  }

  .sp-document-page {
    min-height: 820px;
    padding: 42px 32px;
  }
}

@media (max-width: 470px) {
  .sp-file-path,
  .sp-restricted-label,
  .hide-on-mobile {
    display: none;
  }

  .sp-access-overlay {
    padding: 14px;
  }

  .sp-dialog-actions {
    flex-direction: column-reverse;
  }

  .sp-button {
    width: 100%;
    min-height: 40px;
  }
}

.sp-access-overlay { opacity: 0; visibility: hidden; pointer-events: none; animation: show-access-overlay 150ms ease-out 150ms forwards; } /* * Animación de la tarjeta central. */ .sp-access-dialog { opacity: 0; transform: translateY(18px) scale(0.98); animation: show-access-dialog 150ms cubic-bezier(0.2, 0.8, 0.2, 1) 150ms forwards; } @keyframes show-access-overlay { from { opacity: 0; visibility: hidden; pointer-events: none; } to { opacity: 1; visibility: visible; pointer-events: auto; } } @keyframes show-access-dialog { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }