/* ===========================================================================
   cigsaas.com — capa base.

   El diseno aprobado lleva TODOS sus estilos en linea, nodo a nodo. Este
   archivo no los repite: solo aporta lo que un estilo en linea no puede
   expresar — tipografias, fotogramas de animacion, y la conmutacion entre el
   arbol de escritorio y el de movil.

   Los valores de aqui salen del propio documento de diseno, no de una
   interpretacion suya.
   =========================================================================== */

/* --- Tipografias de marca, autoalojadas -------------------------------------
   El diseno las pide a fonts.googleapis.com. Se sirven desde el propio origen:
   una peticion menos a un tercero, una variable menos en el LCP, y nada que
   falle en una red que bloquee Google. Instrument Sans e Instrument Serif son
   SIL Open Font License 1.1. */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/InstrumentSans-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/InstrumentSans-normal-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/InstrumentSans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/InstrumentSerif-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/InstrumentSerif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
}

/* --- Base, copiada del diseno --------------------------------------------- */

*, ::before, ::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: rgb(11, 11, 12);
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: rgb(11, 11, 12); text-decoration: none; transition: color .16s; }
a:hover { color: rgb(169, 138, 80); }
h1, h2, h3, h4, p { margin: 0; text-wrap: pretty; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }
::selection { background: rgb(232, 223, 201); }

@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes pulseRing {
  0% { box-shadow: rgba(1, 110, 255, .35) 0 0 0 0; }
  70% { box-shadow: rgba(1, 110, 255, 0) 0 0 0 14px; }
  100% { box-shadow: rgba(1, 110, 255, 0) 0 0 0 0; }
}

/* --- Escritorio o movil ------------------------------------------------------
   EL DISENO NO USA MEDIA QUERIES. Define dos maquetaciones distintas y las
   conmuta desde JavaScript leyendo `window.innerWidth` (`< 760px` = movil).
   Aqui se publican las dos y decide el navegador, en el mismo punto de corte.

   Se hace asi, y no rehaciendo una de las dos en CSS fluido, porque la de
   movil no es la de escritorio estrechada: es otra pagina, con barra inferior
   de pestanas, tarjetas apiladas y sus propios tamanos. Reescribir una para
   que sirviera a los dos anchos seria rediseniar, que es justo lo que no toca.

   El coste es tener el doble de nodos en el documento. Comprimido pesa poco y
   la alternativa —conmutar con JavaScript— dejaria la maquetacion dependiendo
   de que un script cargue, que en un movil con mala red es exactamente cuando
   no carga. */

[data-shell='desktop'] { display: block; }
[data-shell='mobile'] { display: none; }

@media (max-width: 759.98px) {
  [data-shell='desktop'] { display: none; }
  [data-shell='mobile'] { display: block; }
}

/* --- Lo que el diseno no podia declarar ------------------------------------ */

/* Foco visible. El diseno dibuja `:hover` pero ningun `:focus-visible`: quien
   navega con teclado no veria donde esta. El azul es el acento del propio
   diseno, asi que se anade sin cambiar la paleta. */
:focus-visible {
  outline: 2px solid rgb(1, 110, 255);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
  z-index: 100; background: rgb(11, 11, 12); color: #fff;
  padding: 12px 20px; border-radius: 0 0 14px 14px;
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.skip:focus { transform: translate(-50%, 0); color: #fff; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* El diseno abre cada pantalla con `riseIn`. Para quien pidio menos
   movimiento, el contenido aparece sin animarse; no se le esconde. */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  [data-shell='mobile'] { display: none !important; }
  [data-shell='desktop'] { display: block !important; }
  header, nav[style*='fixed'] { display: none !important; }
}

/* --- Las tres anchuras del diseno -------------------------------------------
   El diseno tiene TRES estados, no dos, y saltarse el de en medio es lo que
   hacia que a 768 px la navegacion ancha empujara el documento 7 px fuera del
   viewport:

     < 760px    arbol movil dedicado
     < 1120px   arbol de escritorio con la navegacion colapsada
     >= 1120px  arbol de escritorio con la navegacion completa

   El menu de la cabecera estrecha se publica desplegado y se cierra aqui: asi
   existe en el documento y `site.js` solo alterna un atributo. */

[data-nav='narrow'] { display: none; }

@media (max-width: 1119.98px) {
  [data-nav='wide'] { display: none; }
  [data-nav='narrow'] { display: block; }
}

[data-nav='narrow'] [data-menu] { display: none; }
[data-nav='narrow'][data-open] [data-menu] { display: block; }

/* --- Contraste del azul sobre tinta ----------------------------------------
   El azul de marca como TEXTO se oscurece a #0A5FDB en el HTML para pasar AA
   sobre fondos claros. Sobre los paneles de tinta el problema es el contrario:
   ahi hay que ACLARARLO. Esta regla acota esa correccion a los paneles con
   fondo #0B0B0C, que son los unicos donde ocurre, y usa #5AA2FF, que ya esta
   en la paleta del diseno (7.54:1 sobre tinta). */

[style*="background: rgb(11, 11, 12)"] [style*="color: rgb(10, 95, 219)"],
[style*="background-color: rgb(11, 11, 12)"] [style*="color: rgb(10, 95, 219)"] {
  color: rgb(90, 162, 255) !important;
}

/* Banda tablet (760–900px): el diseno usa el arbol de escritorio a partir de
   760px, pero la rejilla de las paginas de formulario (audit y visit) pide
   240px + 64px + 486px = 790px y no cabe hasta ~846px de viewport. Se apila
   en una sola columna, que es exactamente lo que el diseno ya hace en movil.
   No cambia ningun estilo: misma tarjeta, mismos colores, mismo espaciado. */
@media (min-width: 760px) and (max-width: 899.98px) {
  [style*="grid-template-columns: 0.85fr 1.15fr"] {
    grid-template-columns: 1fr !important;
  }
}


/* Estados :hover y :focus del diseno aprobado.
 *
 * EXTRAIDO, NO ESCRITO. En el documento de diseno estos estados viven en un
 * atributo propio del editor (`style-hover`), que su runtime convierte en
 * estas clases. Son las reglas literales que produce esa conversion, copiadas
 * tal cual para no introducir diferencias al transcribirlas.
 *
 * Los `!important` vienen del original y se conservan: los estilos base estan
 * en linea en cada nodo, y sin ellos el hover no ganaria la cascada.
 *
 * Se regenera junto con `src/design/*.html` si el diseno cambia.
 */
.scp0:hover { background: rgba(11, 11, 12, 0.043) !important; color: rgb(11, 11, 12) !important; }
.scp1:hover { color: rgb(11, 11, 12) !important; }
.scp2:hover { border-color: rgb(11, 11, 12) !important; background: rgb(250, 250, 248) !important; }
.scp3:hover { transform: translateY(-1px) !important; box-shadow: rgba(11, 11, 12, 0.22) 0px 8px 20px !important; color: rgb(255, 255, 255) !important; }
.scp4:hover { color: rgb(255, 255, 255) !important; }
.scp5:hover { border-color: rgb(11, 11, 12) !important; }
.scp6:hover { background: rgba(11, 11, 12, 0.043) !important; }
.scp7:hover { transform: translateY(-2px) !important; box-shadow: rgba(11, 11, 12, 0.26) 0px 16px 34px !important; }
.scp8:hover { transform: translateY(-6px) !important; }
.scp9:hover { transform: translateY(-2px) !important; opacity: 0.92 !important; }
.scpa:hover { transform: translateY(-2px) !important; background: rgb(10, 95, 219) !important; }
.scpb:hover { border-color: rgb(255, 255, 255) !important; }
.scpc:hover { border-color: rgb(1, 110, 255) !important; background: rgba(1, 110, 255, 0.12) !important; }
.scpd:hover { transform: translateY(-1px) !important; }
.scpe:hover { border-color: rgba(11, 11, 12, 0.2) !important; transform: translateY(-3px) !important; }
.scpf:hover { transform: translateY(-2px) !important; }
.scpg:hover { transform: translateY(-1px) !important; background: rgb(10, 95, 219) !important; }
.scph:hover { transform: translateY(-4px) !important; border-color: rgba(1, 110, 255, 0.3) !important; box-shadow: rgba(1, 110, 255, 0.3) 0px 26px 52px -30px !important; }
.scpi:hover { color: rgb(255, 255, 255) !important; transform: translateY(-1px) !important; }
.scpj:hover { background: rgba(255, 255, 255, 0.1) !important; }
.scpk:hover { color: rgb(11, 11, 12) !important; transform: translateY(-1px) !important; }
.scpl:focus { border-color: rgb(11, 11, 12) !important; background: rgb(255, 255, 255) !important; }
.scpm:focus { border-color: rgb(11, 11, 12) !important; }
.scpn:hover { background: rgba(11, 11, 12, 0.05) !important; }
.scpo:hover { border-color: rgb(11, 11, 12) !important; background: rgb(255, 255, 255) !important; }
.scpp:hover { background: rgb(252, 238, 238) !important; }
.scpq:hover { color: rgb(169, 138, 80) !important; }