/* Aceptación de políticas. Se ve una vez cada vez que cambian, sin la aplicación
   alrededor, así que va sobre el layout de autenticación pero más ancha: aquí hay
   que leer un documento, no rellenar dos campos. */

.policy-accept {
  inline-size: 100%;
  max-inline-size: 46rem;
  margin-inline: auto;
  padding-block: var(--prme-space-8);
}

.policy-accept__head { text-align: center; margin-bottom: var(--prme-space-8); }

.policy-doc {
  background: var(--prme-surface-lowest);
  border: 1px solid var(--prme-outline-variant);
  border-radius: var(--prme-radius-control);
  padding: var(--prme-space-6);
  margin-bottom: var(--prme-space-6);
}

/* Marcada: un borde de color, no un fondo — el fondo compite con el texto del
   documento, que es lo que hay que leer. */
.policy-doc--accepted { border-color: var(--prme-primary); }

.policy-doc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--prme-space-3);
  margin-bottom: var(--prme-space-3);
}

.policy-doc__title { font-size: 1.15rem; margin: 0 0 var(--prme-space-4); }

/* El documento se desplaza dentro de su tarjeta: con cuatro políticas seguidas, el
   botón de aceptar quedaría a varias pantallas de distancia. */
.policy-doc__content {
  max-block-size: 22rem;
  overflow-y: auto;
  padding: var(--prme-space-4);
  border: 1px solid var(--prme-outline-variant);
  border-radius: var(--prme-radius-control);
  background: var(--prme-surface-low);
  font-size: .9rem;
  line-height: 1.6;
}

/* El HTML lo redacta un administrador y puede traer cualquier etiqueta: se le dan
   márgenes razonables en vez de confiar en los del navegador. */
.policy-doc__content > :first-child { margin-block-start: 0; }
.policy-doc__content > :last-child { margin-block-end: 0; }
.policy-doc__content h1,
.policy-doc__content h2,
.policy-doc__content h3 { font-size: 1rem; margin-block: var(--prme-space-4) var(--prme-space-2); }
.policy-doc__content p,
.policy-doc__content ul,
.policy-doc__content ol { margin-block: 0 var(--prme-space-3); }
.policy-doc__content table { inline-size: 100%; }
.policy-doc__content img { max-inline-size: 100%; height: auto; }

.policy-doc__check {
  display: flex;
  align-items: flex-start;
  gap: var(--prme-space-3);
  margin-top: var(--prme-space-4);
  cursor: pointer;
}

.policy-accept__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--prme-space-3);
}

/* ------------------------------ editor ----------------------------------- */

/* Fuente y vista previa lado a lado. En pantalla estrecha se apilan: leer HTML en
   media columna de móvil no sirve para nada. */
.policy-editor {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--prme-space-4);
}

@media (min-width: 992px) {
  .policy-editor { grid-template-columns: 1fr 1fr; }
}

.policy-editor__pane { min-inline-size: 0; }

.policy-editor__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--prme-space-1);
  margin-bottom: var(--prme-space-2);
  /* Alto fijo para que las dos columnas empiecen a la misma altura, con barra o sin ella. */
  min-block-size: 2rem;
}

.policy-editor__bar--label {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--prme-on-surface-variant);
}

/* Monoespaciada y sin ajuste de línea automático de palabras largas partidas:
   se está editando marcado, no prosa. */
.policy-editor__source {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
  line-height: 1.5;
  tab-size: 2;
  resize: vertical;
}

.policy-editor__preview {
  /* Misma altura que el textarea de 24 filas, para que las dos columnas casen. */
  block-size: 30rem;
  max-block-size: none;
}

/* La versión ya guardada se lee entera, sin caja con desplazamiento propio: no hay
   nada debajo compitiendo por el sitio. */
.policy-doc__content--full {
  max-block-size: none;
  overflow-y: visible;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 1rem;
}