/* assets/css/legal.css */

body {
  background-color: var(--color-bg, #ffffff);
  color: var(--color-text, #333333);
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-xl, 32px) var(--space-md, 16px);
  line-height: 1.6;
  font-family: var(--font-main), 'Outfit', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1 {
  color: var(--color-primary, #003399);
  border-bottom: 2px solid var(--color-primary, #003399);
  padding-bottom: var(--space-sm, 8px);
  font-size: var(--fs-h2, 1.8rem);
  font-weight: var(--fw-bold, 700);
  margin-top: 0;
  margin-bottom: var(--space-lg, 24px);
}

h2 {
  color: var(--color-primary-hover, #002673);
  margin-top: var(--space-xl, 32px);
  margin-bottom: var(--space-sm, 8px);
  font-size: var(--fs-h3, 1.5rem);
  font-weight: var(--fw-semibold, 600);
}

/* Clases específicas para los Términos de Servicio (Tono Rojo de Alerta) */
.terms-page h1 {
  border-bottom-color: var(--color-error, #d93025);
}

.terms-page h2 {
  color: var(--color-error, #d93025);
}

/* Sincronización de tamaño de letra de lectura legal con el login corporativo */
p, ul, li {
  font-size: 0.88rem; /* Idéntico al de login_view y change_password_view */
  color: var(--color-text-muted, #666666);
  font-weight: var(--fw-regular, 400);
  margin-bottom: var(--space-md, 16px);
}

ul {
  padding-left: var(--space-lg, 24px);
  margin-top: 0;
}

li {
  margin-bottom: var(--space-xs, 4px);
}

.alert {
  background-color: var(--color-secondary, #e6e6e6);
  border-left: 5px solid var(--color-border, #cccccc);
  color: var(--color-text, #333333);
  padding: var(--space-md, 16px);
  margin: var(--space-lg, 24px) 0;
  border-radius: var(--radius-sm, 4px);
  font-size: 0.88rem;
  font-weight: var(--fw-regular, 400);
  line-height: 1.5;
}

.alert strong {
  font-weight: var(--fw-semibold, 600);
}

.footer {
  margin-top: var(--space-xl, 32px);
  font-size: 11px; /* Sincronizado con footer-text de login */
  color: var(--color-text-muted, #666666);
  text-align: center;
  border-top: 1px solid var(--color-border, #cccccc);
  padding-top: var(--space-lg, 24px);
}