/* Estilo compartido por las dos paginas legales. Va en un archivo aparte y no embebido en
   cada HTML porque son dos documentos que se editan por separado y tienen que verse igual:
   duplicar el CSS garantiza que uno de los dos quede distinto la primera vez que se toque.

   Deliberadamente NO usa `static/panel.css`. Estas paginas las abre un revisor de Meta sin
   sesion y desde cualquier dispositivo; atarlas al CSS del panel las rompe el dia que el
   panel cambie de identidad visual. */

:root {
  --fondo: #ffffff;
  --texto: #1a1a1a;
  --tenue: #5c5c5c;
  --borde: #e2e2e2;
  --acento: #0f766e;
  --aviso-fondo: #fff8e1;
  --aviso-borde: #f0c14b;
  --aviso-texto: #7a5b00;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #16181c;
    --texto: #e8e8e8;
    --tenue: #a0a0a0;
    --borde: #2e3238;
    --acento: #2dd4bf;
    --aviso-fondo: #2b2410;
    --aviso-borde: #6b5518;
    --aviso-texto: #e8c76a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 40px 20px 80px;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

main { max-width: 760px; margin: 0 auto; }

h1 { font-size: 28px; line-height: 1.25; margin: 0 0 6px; }
h2 { font-size: 20px; margin: 40px 0 10px; padding-top: 14px; border-top: 1px solid var(--borde); }
h3 { font-size: 16px; margin: 24px 0 6px; }

.fecha { color: var(--tenue); font-size: 14px; margin: 0 0 32px; }

a { color: var(--acento); }

ul { padding-left: 22px; }
li { margin-bottom: 6px; }

/* Las tablas de subencargados y de retencion. `overflow-x` en el contenedor y no en la
   tabla: en un celular la fila de tres columnas se sale, y el que tiene que scrollear es
   el bloque, nunca el documento entero. */
.tabla { overflow-x: auto; margin: 16px 0; }
table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 15px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { font-weight: 600; }

/* El recuadro de los datos que faltan completar antes de publicar. Es intencionalmente
   feo: si se publica con los placeholders puestos, tiene que cantar a la primera mirada. */
.completar {
  background: var(--aviso-fondo);
  border: 2px dashed var(--aviso-borde);
  color: var(--aviso-texto);
  padding: 14px 18px;
  border-radius: 6px;
  margin: 24px 0;
  font-size: 15px;
}

.pie { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--borde); color: var(--tenue); font-size: 14px; }