/* ============================================================
   ROLUM · Ingeniería y Mantenimiento
   Tokens de marca v1.0 — julio 2026
   Sarape · Gerardo Garza Castilla
   Referencia completa: ROLUM-manual-de-marca.pdf
   ============================================================ */

/* Tipografías — Google Fonts, SIL OFL 1.1
   <link href="https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@400;600;700;800&family=Barlow:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet"> */

:root{
  /* ---- Neutros cálidos ---------------------------------- */
  --rol-forja:      #14100D;  /* fondo principal oscuro     */
  --rol-acero:      #1F1915;  /* superficies elevadas       */
  --rol-hierro:     #332B25;  /* bordes y divisiones        */
  --rol-zinc:       #8A7F76;  /* texto 2° sobre oscuro      */
  --rol-grafito:    #4A4139;  /* texto 2° sobre claro       */
  --rol-cemento:    #DED9D1;  /* líneas sobre claro         */
  --rol-cal:        #F5F2ED;  /* fondo claro / texto claro  */

  /* ---- Señal -------------------------------------------- */
  --rol-fragua:     #E85B12;  /* primario · acción          */
  --rol-chispa:     #FF8A2B;  /* hover / foco / enlaces     */
  --rol-oxido:      #7E2E0C;  /* profundidad / presionado   */

  /* ---- Estado (solo fichas y reportes) ------------------ */
  --rol-operativo:  #4F8A3D;
  --rol-alerta:     #E0A020;
  --rol-paro:       #B4321E;

  /* ---- Roles semánticos --------------------------------- */
  --rol-bg:            var(--rol-forja);
  --rol-surface:       var(--rol-acero);
  --rol-border:        var(--rol-hierro);
  --rol-text:          var(--rol-cal);
  --rol-text-muted:    var(--rol-zinc);
  --rol-accent:        var(--rol-fragua);
  --rol-accent-hover:  var(--rol-chispa);
  --rol-on-accent:     var(--rol-forja);

  /* ---- Tipografía --------------------------------------- */
  --rol-display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --rol-text-family: 'Barlow', Arial, sans-serif;
  --rol-mono: 'IBM Plex Mono', Consolas, monospace;

  --rol-size-display: clamp(2.6rem, 7vw, 5.5rem);
  --rol-size-h1:      clamp(2rem, 4.5vw, 3.2rem);
  --rol-size-h2:      1.5rem;
  --rol-size-body:    1.0625rem;   /* 17px */
  --rol-size-small:   0.8125rem;   /* 13px */

  --rol-lh-display: 0.92;
  --rol-lh-body:    1.55;
  --rol-measure:    68ch;

  /* ---- Espaciado · escala 4px --------------------------- */
  --rol-s1:4px;  --rol-s2:8px;  --rol-s3:12px; --rol-s4:16px; --rol-s5:24px;
  --rol-s6:32px; --rol-s7:48px; --rol-s8:64px; --rol-s9:96px; --rol-s10:128px;

  /* ---- Chaflán · elemento de firma ---------------------- */
  --rol-chaflan-sm: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  --rol-chaflan:    polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  --rol-radius: 0;  /* radio 0 en toda la marca. No cambiar. */

  /* ---- Textura acero cepillado -------------------------- */
  --rol-cepillado: repeating-linear-gradient(90deg, rgba(245,242,237,.035) 0 1px, transparent 1px 3px);

  /* ---- Movimiento --------------------------------------- */
  --rol-dur-fast: 140ms;
  --rol-dur:      200ms;
  --rol-ease-in:  cubic-bezier(.4,0,1,1);
  --rol-ease-out: cubic-bezier(0,0,.2,1);
}

/* Modo claro — papelería, cotizaciones, impresión */
[data-modo="taller"]{
  --rol-bg:         var(--rol-cal);
  --rol-surface:    #EBE7E0;
  --rol-border:     var(--rol-cemento);
  --rol-text:       var(--rol-forja);
  --rol-text-muted: var(--rol-grafito);
}

/* ---- Base ------------------------------------------------ */
body{
  background: var(--rol-bg);
  color: var(--rol-text);
  font-family: var(--rol-text-family);
  font-size: var(--rol-size-body);
  line-height: var(--rol-lh-body);
}
h1,h2,h3,h4{
  font-family: var(--rol-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: var(--rol-lh-display);
  letter-spacing: -.01em;
}
p{ max-width: var(--rol-measure); }
code, .dato, td.num{
  font-family: var(--rol-mono);
  font-variant-numeric: tabular-nums;
}

/* ---- Botón ----------------------------------------------- */
.rol-btn{
  font-family: var(--rol-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: var(--rol-s3) var(--rol-s5);
  border: 0;
  cursor: pointer;
  background: var(--rol-accent);
  color: var(--rol-on-accent);
  clip-path: var(--rol-chaflan-sm);
  transition: background-color var(--rol-dur-fast) var(--rol-ease-out),
              transform 100ms var(--rol-ease-out);
}
.rol-btn:hover{ background: var(--rol-accent-hover); }
.rol-btn:active{ transform: translateY(1px); background: var(--rol-oxido); color: var(--rol-cal); }
.rol-btn:disabled{ background: var(--rol-hierro); color: var(--rol-zinc); cursor: not-allowed; }
:focus-visible{ outline: 2px solid var(--rol-chispa); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  *{ transition-duration: 1ms !important; animation-duration: 1ms !important; }
}