/* Estilos de las páginas de /legal/*.
 *
 * Archivo propio y no `app.css` por la misma razón por la que la landing tiene
 * el suyo: estas páginas las abre gente SIN sesión (un alumno que recibió un
 * link, un abogado revisando, alguien decidiendo si se registra), así que no
 * deben depender de nada del panel ni poder romperlo. Comparten la paleta con
 * app.css y landing.css, pero no el archivo — un cambio de marca se hace en los
 * tres.
 *
 * Prioridad de diseño, en este orden: legibilidad de un documento largo,
 * impresión limpia, y recién después estética. Un aviso de privacidad que no se
 * puede leer ni imprimir no cumple su función aunque se vea bonito.
 */

:root{
  --ink:#1f1f1f;
  --paper:#f5efe6;
  --paper-2:#ece3d3;
  --line:#e0d5bf;
  --text:#221f1c;
  --muted:#6b6b6b;
  --ember:#e4572e;
  --ember-dark:#b8401f;
  --ember-tint:#fbe4d8;
  --warn:#a9760a;
  --warn-tint:#fdf1dc;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius:16px;
  --radius-sm:10px;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Encabezado ---------- */

.legal-top{
  background:var(--ink);
  padding:18px 0;
}
.legal-top-inner{
  max-width:820px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.legal-top img{display:block;height:28px;width:auto;}
.legal-top nav{display:flex;gap:18px;flex-wrap:wrap;}
.legal-top nav a{
  color:rgba(245,239,230,.72);
  text-decoration:none;
  font-size:13.5px;
}
.legal-top nav a:hover{color:#fff;text-decoration:underline;}
.legal-top nav a[aria-current="page"]{color:#fff;font-weight:600;}

/* ---------- Contenedor ---------- */

.legal-wrap{
  max-width:820px;
  margin:0 auto;
  padding:40px 24px 80px;
}

h1{
  font-family:var(--font-display);
  font-size:clamp(28px,5vw,40px);
  line-height:1.15;
  margin:0 0 12px;
  font-weight:600;
}
h2{
  font-family:var(--font-display);
  font-size:clamp(20px,3.2vw,25px);
  line-height:1.25;
  margin:44px 0 12px;
  font-weight:600;
  /* scroll-margin para que el ancla de la tabla de contenido no quede debajo
     del borde superior de la ventana. */
  scroll-margin-top:20px;
}
h3{
  font-size:17px;
  margin:26px 0 8px;
  font-weight:650;
}
p{margin:0 0 14px;}
ul,ol{margin:0 0 14px;padding-left:22px;}
li{margin:0 0 6px;}
strong{font-weight:650;}
a{color:var(--ember-dark);}

/* ---------- Metadatos del documento ---------- */

.legal-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  padding:14px 18px;
  margin:0 0 8px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:13.5px;
  color:var(--muted);
}
.legal-meta b{color:var(--text);font-weight:600;}

/* Un valor que todavía es placeholder. Rojo y con fondo: la idea es que sea
   imposible publicar la página sin verlo. */
.legal-pendiente{
  background:var(--ember-tint);
  color:var(--ember-dark);
  font-weight:600;
  padding:0 4px;
  border-radius:4px;
  border-bottom:1px dashed var(--ember);
}

/* ---------- Aviso de borrador ---------- */

.legal-draft{
  border:1px solid #e6c98a;
  background:var(--warn-tint);
  color:#6b4a05;
  border-radius:var(--radius-sm);
  padding:14px 18px;
  margin:0 0 28px;
  font-size:14px;
}
.legal-draft b{color:#4d3503;}

/* ---------- Tabla de contenido ---------- */

.legal-toc{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:16px 20px;
  margin:0 0 36px;
  background:#fff;
}
.legal-toc h2{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 10px;
}
.legal-toc ol{
  margin:0;
  padding-left:20px;
  columns:2;
  column-gap:28px;
  font-size:14px;
}
.legal-toc li{margin:0 0 4px;break-inside:avoid;}
.legal-toc a{color:var(--text);text-decoration:none;}
.legal-toc a:hover{color:var(--ember-dark);text-decoration:underline;}

/* ---------- Acciones ---------- */

.legal-acciones{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 28px;
}
.legal-btn{
  font:inherit;
  font-size:13.5px;
  font-weight:550;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
}
.legal-btn:hover{border-color:var(--ember);color:var(--ember-dark);}

/* ---------- Tablas ---------- */

/* Las tablas de subprocesadores y de retención son anchas. Se envuelven en un
   contenedor con scroll propio para que el body nunca haga scroll horizontal
   en un teléfono. */
.legal-tabla-wrap{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  margin:0 0 20px;
  background:#fff;
}
table{
  border-collapse:collapse;
  width:100%;
  min-width:560px;
  font-size:14px;
}
th,td{
  text-align:left;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
th{
  background:var(--paper-2);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--muted);
}
tr:last-child td{border-bottom:none;}

/* ---------- Nota de revisión ---------- */

.legal-nota{
  border-left:3px solid var(--ember);
  background:#fff;
  padding:12px 16px;
  margin:0 0 20px;
  font-size:14px;
  color:var(--muted);
}
.legal-nota b{color:var(--text);}

/* ---------- Pie ---------- */

.legal-pie{
  margin-top:56px;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-size:13.5px;
  color:var(--muted);
}
.legal-pie a{color:var(--ember-dark);}

/* ---------- Impresión ----------
   El documento tiene que poder guardarse en PDF tal cual: sin navegación, sin
   botones, sin fondos que se coman el tóner, y sin cortar un título del párrafo
   que encabeza. */
@media print{
  .legal-top,.legal-acciones,.legal-toc{display:none !important;}
  body{background:#fff;font-size:11.5pt;}
  .legal-wrap{max-width:none;padding:0;}
  .legal-meta,.legal-draft,.legal-nota,.legal-tabla-wrap{
    background:#fff;
    border:1px solid #ccc;
  }
  h2,h3{break-after:avoid;page-break-after:avoid;}
  table{break-inside:auto;}
  tr{break-inside:avoid;}
  a{color:#000;text-decoration:none;}
  /* La URL de los enlaces externos, para que un PDF impreso siga siendo útil. */
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;}
}