/* ============================================================
   SR · Sistema de marca — hoja de producción
   v1.0 · septiembre 2026
   Dirección A, austera. Acento A1 (sin tono).
   ============================================================

   TIPOGRAFÍA — dos modos de cargar Switzer.

   1) Producción, self-host (recomendado). Poné los .woff2 que
      bajaste de Fontshare en /fonts y descomentá este bloque,
      borrando el @import de abajo.

   @font-face{font-family:'Switzer';src:url('/fonts/Switzer-Variable.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap}
   @font-face{font-family:'Switzer';src:url('/fonts/Switzer-Italic-Variable.woff2') format('woff2-variations');font-weight:100 900;font-style:italic;font-display:swap}

      Si preferís estáticas en lugar de la variable:
   @font-face{font-family:'Switzer';src:url('/fonts/Switzer-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
   @font-face{font-family:'Switzer';src:url('/fonts/Switzer-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

   2) Borrador / prototipos. CDN de Fontshare:
   ============================================================ */
@font-face{font-family:'Switzer';src:url('/fonts/Switzer-Variable.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap}

:root{
/* --- color: marca. No hay más que esto. --- */
--sr-ink:#111111;
--sr-mid:#6E6E6B;
--sr-line:#DCDCDA;
--sr-surface:#F0F0EF;
--sr-paper:#FAFAFA;

/* --- color: reservas. No usar sin cumplir la condición.
       A2 · dos niveles de jerarquía sobre superficie oscura.
       A3 · error, vencimiento o dato fuera de rango. Solo producto. --- */
--sr-cold:#10141C;
--sr-alert:#B3261E;

/* --- tipografía --- */
--sr-font:'Switzer','Helvetica Neue',Arial,sans-serif;
--sr-text:400;
--sr-emph:500;

/* --- escala: el cuerpo se redefine por medio, el techo se deriva --- */
--sr-body:14px;
--sr-cap:calc(var(--sr-body) * 2);
--sr-lead:calc(var(--sr-body) * 1.28);
--sr-label:calc(var(--sr-body) * 0.82);
--sr-micro:calc(var(--sr-body) * 0.76);

/* --- espacio: base 8 --- */
--sr-1:8px;--sr-2:16px;--sr-3:24px;--sr-4:40px;--sr-5:64px;--sr-6:104px;

/* --- grilla --- */
--sr-cols:12;--sr-gutter:24px;--sr-margin:40px;--sr-measure:66ch}

/* ============ base ============ */
.sr,.sr *{box-sizing:border-box}
.sr{font-family:var(--sr-font);font-weight:var(--sr-text);font-size:var(--sr-body);line-height:1.62;color:var(--sr-ink);background:var(--sr-paper);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;font-synthesis:none}
.sr h1,.sr h2,.sr h3,.sr h4{font-weight:var(--sr-emph);letter-spacing:-0.022em;line-height:1.16;margin:0 0 var(--sr-2)}
.sr p{margin:0 0 var(--sr-2);max-width:var(--sr-measure)}
.sr h1:last-child,.sr h2:last-child,.sr h3:last-child,.sr h4:last-child,.sr p:last-child{margin-bottom:0}
.sr ul,.sr ol{list-style:none;margin:0;padding:0}
.sr a{color:var(--sr-ink);text-decoration:none;border-bottom:1px solid var(--sr-ink);padding-bottom:1px}
.sr a:hover{color:var(--sr-mid);border-color:var(--sr-line)}
.sr b,.sr strong{font-weight:var(--sr-emph)}

/* ============ tipografía: cinco roles, no más ============ */
.sr-cap{font-size:var(--sr-cap);font-weight:var(--sr-emph);letter-spacing:-0.03em;line-height:1.12}
.sr-lead{font-size:var(--sr-lead);font-weight:var(--sr-text);letter-spacing:-0.015em;line-height:1.4}
.sr-txt{font-size:var(--sr-body);font-weight:var(--sr-text);line-height:1.62}
.sr-lbl{font-size:var(--sr-label);font-weight:var(--sr-emph);letter-spacing:0;line-height:1.5}
.sr-mic{font-size:var(--sr-micro);font-weight:var(--sr-text);color:var(--sr-mid);line-height:1.6}

/* ============ marca ============ */
/* Regla 02: nunca se agranda. Hereda el tamaño del texto contiguo. */
.sr-mark{font-family:var(--sr-font);font-weight:var(--sr-emph);letter-spacing:-0.058em;line-height:1;font-size:1em;display:inline-block}
.sr-mark-box{display:inline-flex;align-items:center;justify-content:center;background:var(--sr-ink);color:var(--sr-paper);width:2.4em;height:2.4em;font-size:0.42em}

/* ============ estructura: la línea es el único ornamento ============ */
.sr-rule{height:1px;background:var(--sr-line);border:0;width:100%}
.sr-rule-k{height:1px;background:var(--sr-ink);border:0;width:100%}
.sr-sect{border-top:1px solid var(--sr-line);padding-top:var(--sr-5);margin-top:var(--sr-6)}
.sr-wrap{max-width:1180px;margin:0 auto;padding:0 var(--sr-margin)}
.sr-grid{display:grid;grid-template-columns:repeat(var(--sr-cols),minmax(0,1fr));gap:var(--sr-gutter)}
/* Rail de índice + contenido + nota al margen */
.sr-rows{display:grid;grid-template-columns:96px minmax(0,600px) minmax(0,250px);gap:32px;align-items:start}

/* ============ índice: todo lleva número ============ */
.sr-idx{font-size:var(--sr-label);color:var(--sr-mid);font-weight:var(--sr-text)}
.sr-idx b{display:block;color:var(--sr-ink);font-weight:var(--sr-emph)}

/* ============ tablas: la unidad de trabajo del sistema ============ */
.sr-tbl{width:100%;border-collapse:collapse;font-size:var(--sr-label)}
.sr-tbl th{text-align:left;font-weight:var(--sr-emph);font-size:var(--sr-micro);color:var(--sr-mid);padding:0 0 9px;border-bottom:1px solid var(--sr-ink)}
.sr-tbl td{padding:11px 0;border-bottom:1px solid var(--sr-line);vertical-align:top;line-height:1.55}
.sr-tbl tr:last-child td{border-bottom:0}
.sr-tbl th+th,.sr-tbl td+td{padding-left:22px}
.sr-tbl .n{color:var(--sr-mid);width:30px}
.sr-tbl .k{font-weight:var(--sr-emph);width:24%}
.sr-tbl .g{color:var(--sr-mid)}
.sr-tbl .num{text-align:right;font-weight:var(--sr-emph)}

/* ============ estados: forma, no color ============ */
.sr-pill{display:inline-block;font-size:var(--sr-micro);font-weight:var(--sr-emph);padding:3px 7px;border:1px solid var(--sr-line);color:var(--sr-mid)}
.sr-pill-on{border-color:var(--sr-ink);color:var(--sr-ink)}
.sr-pill-due{border-color:var(--sr-ink);color:var(--sr-ink);border-style:dashed}
.sr-dot{display:inline-block;width:7px;height:7px;background:currentColor;margin-right:5px;flex:none}
/* Solo producto, solo con condición cumplida */
.sr-pill-alert{border-color:var(--sr-alert);color:var(--sr-alert)}

/* ============ acción ============ */
.sr-btn{display:inline-flex;align-items:center;gap:7px;font-size:var(--sr-label);font-weight:var(--sr-emph);padding:9px 15px;background:var(--sr-ink);color:var(--sr-paper);border:1px solid var(--sr-ink);cursor:pointer}
.sr-btn:hover{background:var(--sr-paper);color:var(--sr-ink)}
.sr-btn-2{background:transparent;color:var(--sr-ink);border-color:var(--sr-line)}
.sr-btn-2:hover{background:transparent;border-color:var(--sr-ink)}

/* ============ prohibiciones, escritas en código ============
   Nada de esto existe en el sistema. Si aparece, es un error.
   border-radius  ·  box-shadow  ·  gradient  ·  segundo tipo
   tercer peso  ·  color fuera de las cinco variables de marca
   ============================================================ */
.sr *{border-radius:0!important;box-shadow:none!important}

/* ============ medios: redefinir el cuerpo, el techo se deriva ============ */
.sr-web{--sr-body:14px}
.sr-doc{--sr-body:10.5pt;--sr-margin:18mm;--sr-cols:6;--sr-measure:72ch}
.sr-slide{--sr-body:24px;--sr-margin:96px;--sr-1:16px;--sr-2:32px;--sr-3:48px;--sr-4:72px;--sr-5:120px}
.sr-social{--sr-body:30px;--sr-margin:80px;--sr-cols:4;--sr-1:16px;--sr-2:32px;--sr-3:48px;--sr-4:72px}
.sr-mail{--sr-body:13px}

@media(max-width:1000px){
:root{--sr-margin:22px}
.sr-rows{grid-template-columns:1fr;gap:18px}
}

@media print{
.sr{background:#fff}
.sr-sect{break-inside:avoid}
.sr-tbl{break-inside:auto}
.sr-tbl tr{break-inside:avoid}
}
