:root {
  --steel-mist: rgb(136, 138, 142);  /* Borders, dividers, disabled elements */
  --steel-mist50: rgba(136, 138, 142, 0.50);  /* Borders, dividers, disabled elements */
  --steel-mist35: rgba(136, 138, 142, 0.35);  /* Borders, dividers, disabled elements */
  --silver-shadow: rgb(167, 170, 175); /* Secondary text (captions, labels) */
  --cloud-chrome: rgb(185, 188, 194); /* Body text, subtitle */
  --deep-ocean-drive: rgb(6, 80, 151); /* Hover states, secondary buttons */
  --midnight-navigation: rgb(2, 64, 132); /* Primary buttons, CTAs, key accents */
  --midnight-navigation35: rgba(2, 65, 132, 0.35); /* Primary buttons, CTAs, key accents */
  --phantom-black: rgb(18, 19, 23); /* Full-page background */

  --transito: rgb(247, 25, 55);
  --transito25: rgba(247, 25, 55, 0.25);
  --transito75: rgba(247, 25, 55, 0.75);
  --trazo: rgb(255, 115, 0);
  --trazo25: rgba(255, 115, 0, 0.25);
  --trazo75: rgba(255, 115, 0, 0.75);
  --corte: rgb(255, 221, 0);
  --corte25: rgba(255, 221, 0, 0.25);
  --corte75: rgba(255, 221, 0, 0.75);
  --union: rgb(143, 193, 32);
  --union25: rgba(143, 193, 32, 0.25);
  --union75: rgba(143, 193, 32, 0.75);
  --cerrado: rgb(8, 150, 38);
  --cerrado25: rgba(8, 150, 38, 0.25);
  --cerrado75: rgba(8, 150, 38, 0.75);
  --empaque: rgb(59, 167, 225);
  --empaque25: rgba(59, 167, 225, 0.25);
  --empaque75: rgba(59, 167, 225, 0.75);
  --almacen: rgb(2, 57, 236);
  --almacen25: rgba(2, 57, 236, 0.25);
  --almacen75: rgba(2, 57, 236, 0.75);
  --instalacion: rgb(143, 58, 255);
  --instalacion25: rgba(143, 58, 255, 0.25);
  --instalacion75: rgba(143, 58, 255, 0.75);

  font-family: Avenir, Helvetica, Arial, sans-serif;
  font-weight: 400;

  /* color-scheme: light dark; */
  color: #b9bcc2;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}







body {
  border-style: solid;
  border-color: var(--steel-mist);
  background-color: rgb(0 175 239);

  display: grid;
  grid-template-columns: 100vw;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  overflow: hidden;
}
header {
  display: grid;
  padding: 10px;
  align-items: center;
  justify-content: space-between;
}
header { grid-template-columns: auto auto; }
footer {
  padding: 10px;

  position: relative;
  grid-template-columns: auto 1fr auto;
  height: 200px;
}

main {
  display: grid;
  grid-gap: 10px;
  margin: 0 10px;
  padding: 10px;
  /* max-height: calc(100vh - 66px - 36px - 20px); */
  height: calc(100% - 20px);
  overflow: auto;
  background-color: var(--phantom-black);
  border-radius: 20px;
  align-content: start;
}

main::-webkit-scrollbar {
  display: none;
}

.header-leftside-container {
  display: flex;
  align-items: center;
}

.page-title {
  font-weight: 800;
  font-size: 34px;
  color: var(--phantom-black);
}

.group-title {
  display: flex;
  justify-content: center;

  font-weight: 600;
  text-transform: capitalize;
  color: var(--phantom-black);
  font-size: clamp(8px, 24px, 24px);

  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;

  writing-mode: vertical-rl; /* Vertical, right to left */
  /* transform: rotate(180deg); */ /* Flip to make it bottom-to-top */
  padding: 0 5px;
}

.group-title__left {
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
}

.orders-group {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
  /* align-items: start; */
  /* height: fit-content; */
  border-style: solid;
  border-width: 5px 0;
  overflow: hidden;
}

.groups-container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  flex-wrap: nowrap;
  height: fit-content;
}

.group-count {
  font-size: 32px;
  color: var(--phantom-black);
  font-weight: 600;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 0 5px;
  display: flex;
  align-items: center;
}

/* .folio {
  text-decoration: none;
  color: var(--cloud-chrome);
  font-weight: 600;
  font-size: 22px;
  padding-left: 5px;
}
.folio:hover {
  text-decoration: underline;
} */

.orders-group-transito {
  border-color: var(--transito);
}
.orders-group-trazo {
  border-color: var(--trazo);
}
.orders-group-corte {
  border-color: var(--corte);
}
.orders-group-union {
  border-color: var(--union);
}
.orders-group-cerrado {
  border-color: var(--cerrado);
}
.orders-group-empaque { border-color: var(--empaque); }
.orders-group-almacen { border-color: var(--almacen); }
.orders-group-instalacion { border-color: var(--instalacion); }

.orders-group-background-transito {
  background-color: var(--transito);
}

.orders-group-background-trazo {
  background-color: var(--trazo);
}
.orders-group-background-corte {
  background-color: var(--corte);
}
.orders-group-background-union {
  background-color: var(--union);
}
.orders-group-background-cerrado {
  background-color: var(--cerrado);
}
.orders-group-background-empaque {
  background-color: var(--empaque);
}
.orders-group-background-almacen {
  background-color: var(--almacen);
}
.orders-group-background-instalacion {
  background-color: var(--instalacion);
}

.transito-text { background-color: var(--transito); }
.trazo-text { background-color: var(--trazo); }
.corte-text { background-color: var(--corte); }
.union-text { background-color: var(--union); }
.cerrado-text { background-color: var(--cerrado); }
.empaque-text { background-color: var(--empaque); }
.almacen-text { background-color: var(--almacen); }
.instalacion-text { background-color: var(--instalacion); }

.flex-justify,
.flex-justify-center,
.flex-justify-between,
.flex-justify-evenly,
.flex-justify-end {
  display: flex;
  align-items: center;
  /* max-width: 100%; */
  /* overflow-x: hidden; */
}
.flex-align-items-stretch {
  align-items: stretch;
}

.gap5 {
  gap: 5px;
}
.gap10 {
  gap: 10px;
}
.gap20 {
  gap: 20px;
}
.gap40 {
  gap: 40px;
}
.flex-no-wrap {
  flex-wrap: nowrap;
}
.flex-align-self-start {
  align-self: flex-start;
}

.flex-justify-center {
  justify-content: center;
}
.flex-justify-evenly {
  justify-content: space-evenly;
}
.flex-justify-between {
  justify-content: space-between;
}
.flex-justify-end {
  justify-content: flex-end;
}
.flex-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.flex-align-items-center {
  align-items: center;
}
.flex-column-align-center {
  align-items: center;
}
.flex-column-align-end {
  align-items: flex-end;
}
.flex-column-justify-end {
  justify-content: end;
}
.grid-col,
.grid-col1,
.grid-col2,
.grid-col3,
.grid-col4,
.grid-col5,
.grid-col6,
.grid-col7,
.grid-col8,
.grid-col13 {
  display: grid;
  grid-auto-rows: auto;
  gap: 10px;
  /* align-items: center; */
  transition: all 0.3s ease; /* This enables animation */
}
.grid-col1 {
  grid-template-columns: 1fr;
}
.grid-col2 {
  grid-template-columns: 1fr 1fr;
}
.grid-col2-auto {
  grid-template-columns: auto auto;
}
.grid-col3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-col3-auto {
  grid-template-columns: repeat(3, auto);
}
.grid-col4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid-col4-auto {
  grid-template-columns: repeat(4, auto);
}
.grid-col4-dashboard {
  grid-template-columns: 35px 35px 100px 1fr;
}
.grid-col5 {
  grid-template-columns: repeat(5, 1fr);
}
.grid-col5-auto {
  grid-template-columns: repeat(5, auto);
}
.grid-col6 {
  grid-template-columns: repeat(6, 1fr);
}
.grid-col6 {
  grid-template-columns: repeat(6, auto);
}
.grid-col7 {
  grid-template-columns: repeat(7, 1fr);
}
.grid-col8 {
  grid-template-columns: repeat(8, 1fr);
}
.grid-col13 {
  grid-template-columns: auto auto 1fr auto repeat(7, 1fr) auto 1fr;
}
.grid-column-span2 {
  grid-column: span 2;
}
.grid-column-span3 {
  grid-column: span 3;
}
.grid-align-items-start {
  align-items: start;
}
.grid-align-items-center {
  align-items: center;
}
.grid-align-content-center {
  align-content: center;
}
.grid-justify-items-end {
  justify-items: end;
}
.grid-justify-items-center {
  justify-items: center;
}
.grid-justify-content-end {
  justify-content: end;
}
/* .order1 {
  order: 1;
}
.order2 {
  order: 2;
}
.order3 {
  order: 3;
}
.order4 {
  order: 4;
} */
.width100 {
  width: 100%;
}
.width100dvw {
  width: 100dvw;
}
.width50percent {
  width: 50%;
}
.width-fit {
  width: fit-content;
}



/* MARGIN */
.margin-left5 {
  margin-left: 5px;
}


/* PADDING */
.padding5px {
  padding: 5px;
}
.padding10px {
  padding: 10px;
}
.padding40 {
  padding: 40px;
}
.padding20 {
  padding: 20px;
}
.padding1020px {
  padding: 10px 20px;
}
.padding20px {
  padding: 20px;
}
.padding2040px {
  padding: 20px 40px;
}
.padding4080 {
  padding: 40px 80px;
}
.padding-left-40px {
  padding-left: 40px;
}

.padding-top-bottom10px {
  padding: 10px 0;
}


.padding-right5 {
  padding-right: 5px;
}
.padding-bottom5px {
  padding-bottom: 5px;
}

.padding-bottom10px {
  padding-bottom: 10px;
}









l-i {
  --size: 1em;
  display: inline-flex;
  width: var(--size);
  height: var(--size);
  vertical-align: middle;
}
/*
l-i svg {
  display: block;
  width: 100%;
  height: 100%;
}
p l-i,
button l-i,
a l-i,
span l-i {
  vertical-align: -0.125em;
} */.road-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #2a2a2a;
    overflow: hidden;
    border-radius: 20px;
}

.lane-markings {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 3px;
    background: repeating-linear-gradient(
        to right,
        transparent 0px,
        transparent 3vw,
        #ffeb3b 3vw,
        #ffeb3b 6vw,
        transparent 6vw,
        transparent 9vw
    );
    /* animation: moveMarkings 2s linear infinite; */
}

.road-edges {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.road-edge {
    position: absolute;
    width: 100%;
    height: 2px;
    background: #ffffff;
}

.road-edge.left {
    top: 0;
}

.road-edge.right {
    bottom: 0;
}

.shoulder {
    position: absolute;
    width: 100%;
    height: 8%;
    background-color: #666;
    /* background:
        linear-gradient(45deg, #2d5a36 0%, #4a7c59 15%, #3e6b4e 30%, #5a8a67 45%, #2d5a36 60%, #4a7c59 75%, #3e6b4e 90%, #2d5a36 100%),
        linear-gradient(135deg, #4a7c59 0%, #2d5a36 25%, #5a8a67 50%, #3e6b4e 75%, #4a7c59 100%);
    background-size: 4vw 100%, 6vw 100%;
    background-blend-mode: multiply; */
    /* animation: grassWave 6s ease-in-out infinite; */
}

.shoulder.left {
    top: 0;
    animation-delay: -2s;
}

.shoulder.right {
    bottom: 0;
    animation-delay: -4s;
}

/* .shoulder::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse 0.3vw 0.8vw at 15% 20%, rgba(139, 195, 74, 0.6) 50%, transparent 50%),
        radial-gradient(ellipse 0.2vw 0.6vw at 35% 40%, rgba(76, 175, 80, 0.7) 50%, transparent 50%),
        radial-gradient(ellipse 0.4vw 1vw at 55% 60%, rgba(56, 142, 60, 0.5) 50%, transparent 50%),
        radial-gradient(ellipse 0.25vw 0.7vw at 75% 80%, rgba(139, 195, 74, 0.6) 50%, transparent 50%),
        radial-gradient(ellipse 0.3vw 0.9vw at 25% 70%, rgba(104, 159, 56, 0.6) 50%, transparent 50%),
        radial-gradient(ellipse 0.2vw 0.5vw at 65% 30%, rgba(76, 175, 80, 0.7) 50%, transparent 50%),
        radial-gradient(ellipse 0.35vw 0.8vw at 85% 50%, rgba(56, 142, 60, 0.5) 50%, transparent 50%),
        radial-gradient(ellipse 0.2vw 0.6vw at 45% 90%, rgba(139, 195, 74, 0.6) 50%, transparent 50%);
    background-size: 8vw 100%, 6vw 100%, 10vw 100%, 7vw 100%, 9vw 100%, 5vw 100%, 8vw 100%, 6vw 100%;
    /* animation: grassBlades 12s linear infinite; * /
} */

/* .shoulder::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 25%, rgba(46, 125, 50, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 60% 15%, rgba(67, 160, 71, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 80% 45%, rgba(56, 142, 60, 0.2) 1px, transparent 1px),
        radial-gradient(circle at 30% 65%, rgba(139, 195, 74, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 10% 85%, rgba(76, 175, 80, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 90% 75%, rgba(104, 159, 56, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 40% 35%, rgba(46, 125, 50, 0.2) 1px, transparent 1px),
        radial-gradient(circle at 70% 85%, rgba(67, 160, 71, 0.3) 1px, transparent 1px);
    background-size: 3vw 100%, 2.5vw 100%, 4vw 100%, 3.5vw 100%, 2vw 100%, 3.8vw 100%, 2.8vw 100%, 3.2vw 100%;
    /* animation: grassDetails 15s linear infinite reverse; * /
} */

.start-text {
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
    font-family: 'Arial', sans-serif;
    letter-spacing: 2px;
}

@keyframes grassWave {
    0%, 100% {
        filter: hue-rotate(0deg) brightness(1) contrast(1);
    }
    25% {
        filter: hue-rotate(5deg) brightness(1.1) contrast(1.1);
    }
    50% {
        filter: hue-rotate(-3deg) brightness(0.95) contrast(1.05);
    }
    75% {
        filter: hue-rotate(7deg) brightness(1.05) contrast(1.1);
    }
}

@keyframes grassBlades {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    }
    100% {
        background-position: -8vw 0, -6vw 0, -10vw 0, -7vw 0, -9vw 0, -5vw 0, -8vw 0, -6vw 0;
    }
}

@keyframes grassDetails {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    }
    100% {
        background-position: 3vw 0, 2.5vw 0, 4vw 0, 3.5vw 0, 2vw 0, 3.8vw 0, 2.8vw 0, 3.2vw 0;
    }
}

.road-surface {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        radial-gradient(circle at 50% 90%, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    /* animation: moveTexture 6s linear infinite; */

    background-size: 4vw 4vw, 6vw 6vw, 3vw 3vw; /* ADD THIS LINE */
}

.environment {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.finish-line {
            position: absolute;
            right: 0;
            top: 16px;
            width: 20px;
            height: 84%;
            background: 
                linear-gradient(0deg, 
                    black 0%, black 12.5%, 
                    white 12.5%, white 25%, 
                    black 25%, black 37.5%, 
                    white 37.5%, white 50%, 
                    black 50%, black 62.5%, 
                    white 62.5%, white 75%, 
                    black 75%, black 87.5%, 
                    white 87.5%, white 100%
                );
            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5);
            z-index: 1;
        }

.finish-line::before {
            content: '';
            position: absolute;
            right: 20px;
            top: 0;
            width: 15px;
            height: 100%;
            background: 
                linear-gradient(0deg, 
                    white 0%, white 12.5%, 
                    black 12.5%, black 25%, 
                    white 25%, white 37.5%, 
                    black 37.5%, black 50%, 
                    white 50%, white 62.5%, 
                    black 62.5%, black 75%, 
                    white 75%, white 87.5%, 
                    black 87.5%, black 100%
                );
            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
        }

@keyframes moveMarkings {
    0% {
        transform: translateY(-50%) translateX(0);
    }
    100% {
        transform: translateY(-50%) translateX(-9vw);
    }
}

@keyframes moveTexture {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }
    100% {
        background-position: 4vw 0, 6vw 0, 3vw 0;
    }
}

.speed-sign {
    position: absolute;
    right: 80px;
    bottom: -6%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: #ffffff;
    border: 3px solid #ff0000;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 4;
    animation: signBob 3s ease-in-out infinite;
}

.speed-sign::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 20px;
    background: #666;
    border-radius: 3px;
}

.speed-number {
    font-size: 26px;
    font-weight: bold;
    color: #000;
    font-family: 'Arial', sans-serif;
    /* line-height: 1; */
    margin-bottom: 0;
}

.speed-text {
    font-size: 8px;
    color: #000;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    text-align: center;
    line-height: 1;
}

@keyframes signBob {
    0%, 100% {
        transform: translateY(-50%) rotate(0deg);
    }
    25% {
        transform: translateY(-48%) rotate(1deg);
    }
    50% {
        transform: translateY(-52%) rotate(0deg);
    }
    75% {
        transform: translateY(-48%) rotate(-1deg);
    }
}.marquee-frame {
  position: absolute;
  top: 16px;
  left: 0;
  width: 100%;
  z-index: 2;
}
.marquee-container {
  position: relative;
  padding: 10px 0;
  border-radius: 20px;

  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  font-size: 24px;
}

/* Shadow overlays */
.marquee-container::before,
.marquee-container::after {
  content: '';
  position: absolute;
  top: 15px;
  width: 40px;
  height: 100%;
  z-index: 2; /* Must be above the content */
  pointer-events: none;
}

/* .marquee-container::before {
  left: 0;
  background: linear-gradient(to right, #111 0%, transparent 100%);
}

.marquee-container::after {
  right: 0;
  background: linear-gradient(to left, #111 0%, transparent 100%);
} */

.marquee-content {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 40px;
  width: fit-content;
  will-change: transform;
}

.marquee-content:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  0% {
    /* Use the variable for the starting position */
    /* transform: translateX(var(--marquee-start-offset)); */
    transform: translateX(-100%);
  }
  3% {
    /* Optional: Hold at the start */
    transform: translateX(-100%);
  }
  95% {
    /* Move left by the content's own full width */
    transform: translateX(var(--marquee-start-offset));
  }
  100% {
    /* Hold at the end */
    transform: translateX(var(--marquee-start-offset));
  }
}

.marquee__article {
  display: grid;
  grid-gap: 10px;
  row-gap: 0;
  grid-template-columns: auto auto 100%;
  align-items: center;
  padding: 5px 10px;
  border-radius: 10px;

  background-color: rgb(119, 119, 119);
  /*
  background-image:
  radial-gradient(at 1% 96%, hsla(211,97%,26%,1) 0px, transparent 50%),
  radial-gradient(at 80% 0%, hsla(209,92%,30%,1) 0px, transparent 50%),
  radial-gradient(at 90% 15%, hsla(220,2%,54%,1) 0px, transparent 50%);
  */

 /*  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
  width: fit-content;
}

.terminados-title,
.terminados {
  text-align: center;
  font-weight: 600;
  color: var(--phantom-black);
}

.terminados {
  font-size: 28px;
}

.marquee__article--logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.marquee__article--folio {
  color: var(--phantom-black);
  font-weight: 600;
  font-size: 24px;
}

.marquee__article--model {
  color: var(--phantom-black);
  font-weight: 600;
  font-size: 20px;
}
.marquee__article--customer-name {
  grid-column: span 3;
  font-size: 16px;
  color: var(--phantom-black);
  text-transform: capitalize;
  font-weight: 600;
}