/* comun.css — lo que aparece IGUAL en mas de una pagina.
   Solo entra lo medido como repetido, no lo que parece que se va a compartir. */

:root {
  --ground: #E4E8E6;
  --surface: #DADFDD;
  --sunk: #D0D6D3;
  --line: #BFC7C4;
  --ink: #1B201E;
  --muted: #525C5A;
  --faint: #7A8482;
  --accent: #155E5A;
  --accent-soft: #D8E8E5;
}

:root[data-theme="dark"] {
  --ground: #0F1216;
  --surface: #171B21;
  --sunk: #12161B;
  --line: #262C35;
  --ink: #E7EAEE;
  --muted: #98A2AE;
  --faint: #727C89;
  --accent: #5CBDB5;
  --accent-soft: #16302E;
}

/* 🔴 EL TEMA DEL SISTEMA VIVE ACA, y antes no vivia en ningun lado comun.
   Estaba repetido en index.css, verify.css y verify-tech.css, y FALTABA en
   doc.css — asi que `info`, `format`, `privacy` y `contact` se quedaban
   claras sobre un sitio oscuro. Visto en sta el 2026-09-04.
   `:not([data-theme="light"])` para que la eleccion explicita gane igual. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0F1216; --surface:#171B21; --sunk:#12161B; --line:#262C35;
    --ink:#E7EAEE; --muted:#98A2AE; --faint:#727C89;
    --accent:#5CBDB5; --accent-soft:#16302E;
  }
}

/* --- cromado comun: reset, aviso sin-JS, tema, idioma, pie --- */

*{box-sizing:border-box}

body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.55;
}

.pie-sep{width:1px;height:14px;background:var(--line)}

.idi a{
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  font-size:24px;letter-spacing:.04em;text-decoration:none;
  color:var(--faint);padding:4px 9px;border-radius:4px
}

.idi a:hover,.idi a:focus-visible{color:var(--accent);background:var(--sunk);outline:none}

.idi .idi-on{color:var(--accent);font-weight:600}

.tema{display:flex;gap:2px}

.tema button{
  background:none;border:0;cursor:pointer;font-size:28px;line-height:1;
  color:var(--faint);padding:4px 8px;border-radius:4px
}

.tema button:hover,.tema button:focus-visible{color:var(--accent);background:var(--sunk);outline:none}

.tema .tema-on{color:var(--accent)}

/* Las paginas del sitio. Fila propia, con la linea ARRIBA: el corte separa el
   contenido de la pagina del cromado, y los controles de idioma y tema quedan
   del lado del contenido porque son de ESTA pagina, no del sitio. */
.pie-nav{
  display:flex;justify-content:center;align-items:center;gap:10px;
  flex-wrap:wrap;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line)
}

.pie-nav a{
  font-size:15px;text-decoration:none;color:var(--faint);
  padding:3px 8px;border-radius:4px
}

.pie-nav a:hover,.pie-nav a:focus-visible{color:var(--accent);background:var(--sunk);outline:none}

.pie-nav .pie-nav-on{color:var(--ink);font-weight:600}

/* Los repositorios de anclaje. Fila propia, DEBAJO de los controles.

   ⚠️ El layout vivia en index.css y por eso solo se veia bien en la portada:
   en las demas paginas el flex no aplicaba, la fila no centraba y los
   separadores —1px de ancho con alto fijo— desaparecian por ser inline. */
.pie-repos{
  display:flex;justify-content:center;align-items:center;gap:10px;
  flex-wrap:wrap;margin-top:10px
}

.pie-repos a{
  font-size:14px;text-decoration:none;color:var(--faint);
  padding:2px 6px;border-radius:4px
}

.pie-repos a:hover,.pie-repos a:focus-visible{color:var(--accent);background:var(--sunk);outline:none}

/* El aviso de JS apagado. Rojo/naranja a proposito: no es decoracion, es que
   la pagina no va a funcionar como deberia y hay que verlo antes de leerla. */
.sinjs{
  background:#8A2F0B;color:#FFE9DC;border:1px solid #C2570F;
  border-radius:6px;padding:10px 12px;margin:0 0 12px;
  font-size:15px;line-height:1.4
}

.sinjs b{color:#FFF}

/* LA BANDA DE AVISOS URGENTES. Solo la portada la lleva, y solo aparece si hay
   algo que decir: sin avisos no se dibuja ni el contenedor (ver avisos.go).

   Va ARRIBA DE TODO, antes de .wrap, porque un aviso que hay que buscar no es
   un aviso. Los colores son fijos y no salen de las variables del tema: el
   mensaje tiene que verse igual en claro y en oscuro, y un `danger` que se
   funde con el fondo del tema deja de gritar. */
.avisos{max-width:1120px;margin:0 auto;padding:10px 10px 0}

.aviso{
  border-radius:6px;padding:10px 12px;margin:0 0 8px;
  font-size:15px;line-height:1.45;border:1px solid;text-align:center
}
.aviso-t{margin:0;font-weight:700}
.aviso-c{margin:4px 0 0}
.aviso-a{display:inline-block;margin-top:6px;color:inherit;text-decoration:underline}

/* danger: el mismo rojo que el aviso de JS apagado, por coherencia — es la
   señal de "esto no va a funcionar como esperás". */
.aviso-danger{background:#8A2F0B;color:#FFE9DC;border-color:#C2570F}
.aviso-danger .aviso-t{color:#FFF}

.aviso-warning{background:#6B4A00;color:#FFF3D6;border-color:#A87400}
.aviso-warning .aviso-t{color:#FFF}

.aviso-info{background:#123A52;color:#DCEEF9;border-color:#1F6389}
.aviso-info .aviso-t{color:#FFF}

/* El renglon de DOCUMENTACION, debajo del de paginas.
   Mas chico y mas apagado a proposito: son textos largos, no acciones. El que
   los busca los encuentra; el que no, no tropieza con ellos. */
.pie-docs{
  display:flex;justify-content:center;align-items:center;gap:8px;
  flex-wrap:wrap;margin-top:8px
}

.pie-docs a{
  font-size:14px;text-decoration:none;color:var(--faint);
  padding:2px 6px;border-radius:4px
}

.pie-docs a:hover,.pie-docs a:focus-visible{color:var(--accent);background:var(--sunk);outline:none}

/* El cuerpo renderizado desde Markdown. Hereda casi todo de .doc; aca solo va
   lo que el Markdown produce y la prosa escrita a mano no tiene. */
.doc-md h2{font-size:20px}
.doc-md h3{font-size:17px}
.doc-md blockquote{
  margin:0 0 16px;padding:12px 16px;border-left:3px solid var(--accent);
  background:var(--sunk);border-radius:0 6px 6px 0
}
.doc-md blockquote p:last-child{margin-bottom:0}
.doc-md pre{
  overflow-x:auto;background:var(--sunk);border:1px solid var(--line);
  border-radius:6px;padding:12px 14px;margin:0 0 16px;font-size:14px
}
.doc-md pre code{background:none;padding:0;font-size:inherit}
.doc-md table{border-collapse:collapse;width:100%;font-size:15px;margin:0 0 16px}
.doc-md th,.doc-md td{
  text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top
}
.doc-md th{color:var(--faint);font-weight:600}
.doc-md hr{border:0;border-top:1px solid var(--line);margin:26px 0}

/* Las tablas del Markdown no caben en movil: scroll propio y no la pagina. */
@media(max-width:620px){
  .doc-md table{display:block;overflow-x:auto;white-space:nowrap}
}

.doc-fuente{
  margin-top:28px;padding-top:14px;border-top:1px solid var(--line);
  font-size:14px;color:var(--faint)
}

.doc-otros{
  display:flex;justify-content:center;align-items:center;gap:8px;
  flex-wrap:wrap;margin-top:26px;padding-top:16px;border-top:1px solid var(--line)
}
.doc-otros-t{font-size:13px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.doc-otros a{font-size:15px;text-decoration:none;color:var(--accent);padding:2px 6px;border-radius:4px}
.doc-otros a:hover,.doc-otros a:focus-visible{background:var(--sunk);outline:none}