/* Esquema de la Constancia de Semanas Cotizadas — sólo /como-leer-… y /lector-de-constancia
 *
 * Dibuja el documento tal como se ve, para que quien lo tiene abierto en otra pestaña pueda
 * ir señalando. Los rótulos son los REALES, verificados contra dos constancias emitidas por
 * el SISEC (seo/sources/constancia-layout.md); los valores son marcadores, nunca datos.
 *
 * Es HTML y no una captura por dos razones: una captura de una constancia real llevaría el
 * CURP y el NSS de una persona, y una captura inventada envejece sin que nadie lo note.
 */
.doc{border:1px solid var(--border);border-radius:var(--r);background:var(--surface-alt);
     padding:0;overflow:hidden;font-size:13.5px;line-height:1.45;min-width:290px}
.doc__hoja{padding:14px 16px;border-bottom:1px dashed var(--border)}
.doc__hoja:last-child{border-bottom:0}
.doc__pag{font:800 11px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;
          color:var(--muted);margin:0 0 10px}

/* Encabezado en dos columnas, como el documento */
.doc__enc{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
@media (max-width:520px){.doc__enc{grid-template-columns:1fr}}
.doc__campo{margin:0}
.doc__rot{color:var(--soft);font-size:12.5px;display:block}
.doc__val{color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}

/* La caja del total, que es lo que todo el mundo busca */
.doc__total{border:2px solid var(--verde);border-radius:var(--r-s);padding:8px 12px;
            background:var(--surface);grid-column:2}
@media (max-width:520px){.doc__total{grid-column:1}}
.doc__total b{display:block;font-size:22px;color:var(--titulo);font-variant-numeric:tabular-nums;
              line-height:1.1}

/* Las tres cajas del detalle */
.doc__cajas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 0}
@media (max-width:520px){.doc__cajas{grid-template-columns:1fr}}
.doc__caja{border:1px solid var(--border);border-radius:var(--r-s);padding:8px 10px;
           background:var(--surface);text-align:center}
.doc__caja span{display:block;color:var(--soft);font-size:12px;line-height:1.3;min-height:2.6em}
.doc__caja b{font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
.doc__caja--menos b{color:var(--warn)}
.doc__caja--mas b{color:var(--ok)}

/* Un bloque de patrón */
.doc__patron{border:1px solid var(--border);border-radius:var(--r-s);padding:10px 12px;
             background:var(--surface);margin:10px 0 0}
.doc__fila{display:grid;grid-template-columns:132px 1fr;gap:8px;padding:2px 0}
@media (max-width:520px){.doc__fila{grid-template-columns:1fr}}
.doc__fila--3{grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:520px){.doc__fila--3{grid-template-columns:1fr}}
.doc__nota{color:var(--muted);font-size:12px;margin:8px 0 0;font-style:italic}
.doc__marca{background:var(--ambar-bg);border-radius:3px;padding:0 3px;
            box-shadow:inset 0 -2px 0 var(--ambar-bd)}

/* Cadena original de la firma */
.doc__cadena{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
             color:var(--soft);word-break:break-all;background:var(--surface);
             border:1px solid var(--border);border-radius:var(--r-s);padding:8px 10px;margin:6px 0 0}

/* Chapa numerada sobre el campo que la página explica — el patrón de es-dni.
   Va en el flujo (no en absoluto) porque este esquema es HTML y no un SVG con coordenadas:
   posicionar en % obligaría a mantener un mapa de posiciones que se rompe al primer cambio
   de maqueta, que es justo la advertencia que es-dni dejó escrita en su propio visor. */
.doc__punto{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--verde-l);color:#fff;font:700 12px/1 var(--font);margin-right:7px;
  vertical-align:middle;flex:none}
.doc__punto.es--fijo{background:var(--ambar-d);box-shadow:0 0 0 3px var(--ambar-bg)}