/* Hoja de estilos de los documentos legales.

   Son archivos SUELTOS, no una vista de la aplicacion, y es a proposito:

   * la pagina publica de firma (`/firmar-documento/{token}`) tiene que poder
     enlazar el aviso de privacidad, y una vista del shell exige sesion;
   * un documento legal necesita URL permanente y citable --- para un correo,
     para una respuesta a la SIC, para el pie de una factura;
   * si el JavaScript falla, la politica sigue en pie.

   Por eso no comparten `styles.css`: este archivo se basta solo. Los colores
   y la letra se repiten a proposito --- la alternativa es que un documento
   legal deje de verse si alguien reorganiza la hoja de la aplicacion. */

:root {
  --navy: #10395c;
  --tinta: #1d2b36;
  --tinta-suave: #5b6b78;
  --borde: #dfe6ec;
  --fondo: #eef2f5;
  --aviso: #8a4b00;
  --aviso-fondo: #fff6e6;
  --aviso-borde: #f0cd94;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  /* La misma familia de la aplicacion, con alternativas del sistema: aca no
     se cargan fuentes propias para que el documento abra siempre, incluso sin
     red. */
  font: 15px/1.65 "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}

.hoja {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

/* ---------- La franja de borrador ----------
   Mientras este aqui, el documento NO es una politica adoptada. Va arriba del
   todo, en color de advertencia y con su propio papel ante un lector de
   pantalla: quien llegue por buscador tiene que verlo antes que el texto. */
.borrador {
  background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde);
  border-left: 4px solid var(--aviso);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 28px;
  color: var(--aviso);
}
.borrador strong { display: block; margin-bottom: 4px; font-size: 15px; }
.borrador p { margin: 0; font-size: 14px; }

/* Lo que todavia nadie ha llenado. Se ve: un dato de contacto vacio en una
   politica de tratamiento es un incumplimiento, no un detalle pendiente. */
.pendiente {
  background: #ffe9c7;
  border-bottom: 2px dotted var(--aviso);
  padding: 0 4px;
  font-weight: 600;
  color: var(--aviso);
}
/* SIN `white-space: nowrap`. Lo tuvo, para que «PENDIENTE: NIT» no se partiera
   en dos renglones, y el mismo estilo se usa en un `<caption>` y en parrafos
   largos: medido, la pagina desbordaba 1522px a lo ancho. Un marcador partido
   en dos renglones no le hace dano a nadie; una pagina que se arrastra de
   lado, si.

   Cuando el marcador es un parrafo entero se dibuja como un aviso, no como
   texto resaltado. No se usa un `<caption>`: una nota de datos pendientes no
   es el titulo de la tabla, y con `display:block` el navegador la pintaba
   debajo del encabezado y encogida. */
p.pendiente {
  display: block; text-align: left;
  padding: 10px 12px; border-radius: 6px;
  border-bottom: 0; border-left: 4px solid var(--aviso);
  margin: 12px 0;
}

header.encabezado {
  border-bottom: 2px solid var(--navy);
  padding-bottom: 14px;
  margin-bottom: 24px;
}
header.encabezado h1 { margin: 0 0 4px; font-size: 24px; color: var(--navy); }
header.encabezado .fecha { margin: 0; color: var(--tinta-suave); font-size: 13px; }

h2 {
  font-size: 18px; color: var(--navy);
  margin: 32px 0 10px; padding-top: 4px;
}
h3 { font-size: 15px; margin: 20px 0 6px; }

p, li { color: var(--tinta); }
ul, ol { padding-left: 22px; }
li { margin-bottom: 6px; }

table {
  width: 100%; border-collapse: collapse; margin: 14px 0;
  font-size: 14px;
}
th, td {
  border: 1px solid var(--borde); padding: 8px 10px;
  text-align: left; vertical-align: top;
}
th { background: #f4f7fa; color: var(--navy); font-weight: 600; }
/* Un NIT se lee columna contra columna. */
td.nit { font-variant-numeric: tabular-nums; white-space: nowrap; }

a { color: var(--navy); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 2px;
}

.volver { display: inline-block; margin-bottom: 18px; font-size: 14px; }

footer.pie {
  margin-top: 48px; padding-top: 16px;
  border-top: 1px solid var(--borde);
  color: var(--tinta-suave); font-size: 13px;
}

/* En telefono no puede haber desplazamiento lateral: una tabla ancha se
   desplaza DENTRO de su caja, no arrastra la pagina. */
.tabla-ancha { overflow-x: auto; }

@media (max-width: 480px) {
  body { font-size: 14px; }
  header.encabezado h1 { font-size: 20px; }
}