:root {
  --sample-paper: #ffffff;
  --sample-ink: #202631;
  --sample-border: #dbe5ee;
  --sample-muted: #566779;
}

main {
  padding: clamp(18px, 3vw, 42px);
}

.sample-workspace {
  width: min(100%, 980px);
  margin: 0 auto;
}

.sample-hint {
  width: min(100%, 794px);
  margin: 0 auto 14px;
  color: var(--sample-muted);
  font-size: 14px;
  line-height: 1.5;
}

.sample-document {
  width: min(100%, 794px);
  min-height: 1123px;
  margin: 0 auto;
  padding: 76px 84px;
  color: var(--sample-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12pt;
  line-height: 1.55;
  background: var(--sample-paper);
  border: 1px solid var(--sample-border);
  border-radius: 4px;
  box-shadow: 0 18px 48px rgba(31, 50, 68, 0.12);
  cursor: text;
  user-select: text;
}

.sample-document:focus-visible {
  outline: 3px solid rgba(0, 111, 192, 0.24);
  outline-offset: 4px;
}

.sample-document p {
  margin: 0 0 9pt;
  text-align: justify;
  text-wrap: pretty;
}

.sample-document p:last-child {
  margin-bottom: 0;
}

.sample-source {
  display: none;
}

/* El aviso vive en el propio botón; esto solo queda para el lector de pantalla. */
.sample-copy-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Dos acciones distintas y del mismo tamaño: abrir el editor con el texto es la
   principal y va rellena; copiar es la alternativa y va perfilada, para que se
   distingan de un vistazo sin que ninguna parezca deshabilitada. */
.sample-action--ghost,
.sample-action--ghost:hover {
  color: var(--brand);
  border-color: #b9d3e8;
}

.sample-action--ghost {
  background: #ffffff;
}

.sample-action--ghost:hover {
  background: #eaf3fb;
  border-color: var(--brand);
}

.sample-action:focus-visible {
  outline: 3px solid rgba(0, 111, 192, 0.35);
  outline-offset: 2px;
}

/* El acuse de recibo se dibuja en el propio botón, sea cual sea: copiar y abrir
   fallan de la misma manera y se lo dicen en el sitio donde se ha pulsado. */
.sample-action.is-copied,
.sample-action.is-copied:hover {
  color: #ffffff;
  background: #147a4b;
  border-color: #147a4b;
}

.sample-action.is-failed,
.sample-action.is-failed:hover {
  color: #ffffff;
  background: #b42318;
  border-color: #b42318;
}

.sample-action.is-copied,
.sample-action.is-failed {
  animation: copy-pop 460ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

.copy-feedback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.copy-mark {
  flex: none;
  width: 20px;
  height: 20px;
  animation: copy-mark-in 440ms cubic-bezier(0.34, 1.45, 0.64, 1) both;
}

.copy-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 57 ≈ 2πr con r = 9: el aro entero cabe en un guion y se descubre girando. */
.copy-mark-ring {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-90deg);
  stroke-opacity: 0.7;
  stroke-dasharray: 57;
  stroke-dashoffset: 57;
  animation: copy-ring 520ms cubic-bezier(0.35, 0, 0.2, 1) forwards;
}

/* `pathLength="1"` normaliza el trazo: sirve igual para el check y para la cruz. */
.copy-mark-stroke {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: copy-stroke 340ms cubic-bezier(0.65, 0, 0.35, 1) 260ms forwards;
}

.copy-label {
  animation: copy-label 340ms cubic-bezier(0.16, 1, 0.3, 1) 140ms both;
}

@keyframes copy-pop {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.04); }
}

@keyframes copy-mark-in {
  from { opacity: 0; transform: scale(0.55) rotate(-30deg); }
  to { opacity: 1; transform: none; }
}

@keyframes copy-ring {
  to { stroke-dashoffset: 0; }
}

@keyframes copy-stroke {
  to { stroke-dashoffset: 0; }
}

@keyframes copy-label {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sample-action.is-copied,
  .sample-action.is-failed,
  .copy-mark,
  .copy-mark-ring,
  .copy-mark-stroke,
  .copy-label {
    animation: none;
  }

  .copy-mark-ring,
  .copy-mark-stroke {
    stroke-dashoffset: 0;
  }
}

@media (max-width: 760px) {
  .sample-document {
    min-height: 0;
    padding: 34px 26px;
    border-radius: 8px;
  }
}

@media print {
  header,
  .sample-hint,
  .sample-copy-status {
    display: none !important;
  }

  main {
    padding: 0;
  }

  .sample-document {
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
}