/********** ESTILO CSS - NAF **********/

html, body, div, span, applet, object, iframe,  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, dl, dt, dd {
	font-style: normal;
	vertical-align: baseline;
	margin: 0;
	padding: 0;
	border: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
	display: block;
}
audio, canvas, progress, video {
	display: inline-block;
	vertical-align: baseline
}

a {
    outline: none;
    color: var(--P600);
    text-decoration: none;
}  
a:visited {
    color: var(--P600);
}
a:hover {
	text-decoration: underline;  
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html {
    font-size: 16px;
}

body, span, input, button, texarea {
    font-family: "Figtree", sans-serif;
}
body {
	color: var(--S950);
    min-width: 358px;
    background-color: #FFF;
}


/* Variables de color*/
:root {

    /* Primario */
    --P50: #f4f5fa;
    --P100: #e5e6f4;
    --P200: #d1d4ec;
    --P300: #b1b8df;
    --P400: #8c95ce;
    --P500: #7175c0;
    --P600: #5f5eb2;
    --P700: #5853a3;
    --P800: #4e4885;
    --P900: #403d6b;
    --P950: #2c2942;

    /* Shark */
    --S50: #f8fafc;
    --S100: #f1f5f9;
    --S200: #e2e8f0;
    --S300: #cbd5e1;
    --S400: #94a3b8;
    --S500: #64748b;
    --S600: #475569;
    --S700: #334155;
    --S800: #1e293b;
    --S900: #0f172a;
    --S950: #020617;

    /* Error */
    --error50: #fef2f2;
    --error100: #fde3e3;
    --error200: #fdcbcb;
    --error300: #faa7a7;
    --error400: #f46a6a;
    --error500: #eb4848;
    --error600: #d82a2a;
    --error700: #b52020;
    --error800: #961e1e;
    --error900: #7d1f1f;
    --error950: #440b0b;

    /* Exito */
    --exito50: #f0fdf5;
    --exito100: #dcfce8;
    --exito200: #bbf7d1;
    --exito300: #86efad;
    --exito400: #4ade80;
    --exito500: #22c55e;
    --exito600: #16a34a;
    --exito700: #15803c;
    --exito800: #166533;
    --exito900: #14532b;
    --exito950: #052e14;

    /* Alerta */
    --alerta50: #FEF9E8;
    --alerta100: #FEF0C3;
    --alerta200: #FEE28A;
    --alerta300: #FDD147;
    --alerta400: #FAC215;
    --alerta500: #EAB308;
    --alerta600: #CA9A04;
    --alerta700: #A17C07;
    --alerta800: #85680E;
    --alerta900: #715A12;
    --alerta950: #423306;

    /* Información */
    --info50: #EFF5FF;
    --info100: #DBE8FE;
    --info200: #BFD7FE;
    --info300: #93BBFD;
    --info400: #609AFA;
    --info500: #3B82F6;
    --info600: #2570EB;
    --info700: #1D64D8;
    --info800: #1E55AF;
    --info900: #1E478A;
    --info950: #172E54;

    /* Variables de espacio */
    --medida8: 0.5rem;
    --medida12: 0.75rem;
    --medida16: 1rem;
    --medida20: 1.25rem;
    --medida24: 1.5rem;
    --medida28: 1.75rem;
    --medida32: 2rem;
    --medida36: 2.25rem;
    --medida40: 2.5rem;
    --medida44: 2.75rem;
    --medida48: 3rem;
    --medida52: 3.25rem;
    --medida56: 3.5rem;

    /* Variables de bordes radius */
    --radiusSm: 0.25rem;
    --radiusMd: 0.5rem;
    --radiusLg: 0.75rem;
}

/* Textos */

h1,h2,h3,h4 {
    color: var(--S950);
    margin: 0px;
    font-weight: 600;
}

h1 {
    font-size: var(--medida28);
    line-height: var(--medida36);
    font-weight: 600;
}

h2 {
    font-size: 1.5rem;
    line-height: 2.25rem;
}

h3 {
    font-size: 1.25rem;
    line-height: 1.5rem;
}

h4 {
    font-size: 1rem;
    line-height: 1.5rem;
}

label, p {
    font-size: 1rem;
	color: var(--S500);
    line-height: 1.25rem;
    font-weight: 400;
}

p {
    margin: 0rem;
}

strong {
    font-weight: bold;
    margin: 0px;
}
.font-semibold { font-weight: 600;}

small {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 400;
}

i {
    font-size: var(--medida24);
}
.descripcion , .descripcion p{
	color:#020617;
}



/*.link{
    color: var(--P600);
    text-decoration: none;
}
.link:hover{
    text-decoration: underline;
}
.link--sinEstilo{
    text-decoration: none;
    color: initial;
	border: none;
	padding: 0;
	background: transparent;
}*/

.content {
	padding: 20px 40px;
}
.contentTitulo {
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--S200);
}
.mb-24 { margin-bottom: 24px;}

.etiqueta { 
  padding-left: 8px;
  padding-right: 8px;
  color:#64748B;
}

.txt-12 { 
  color:#64748B;
  font-size: 12px;
  display:block;
}
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: flex-start;
}
.grid{
  display: grid;
  gap: 12px;
}
.p-24 { padding: 24px;}
.rutaEntrega {
	display: grid;
	gap: 40px;
}

.rutaEntregaEstado {
	display: flex;
	gap: 12px;
	align-items: center;
	position:relative;
	/*z-index:1;*/
}
/*.rutaEntregaEstadoFinal { z-index:0;}
.rutaEntregaEstadoFinal:before {
  content: ' ';
  border-left: 1px solid var(--exito500);
  display: block;
  width: 10px;
  height: 100%;
  position: absolute;
  bottom: 100%;
  left: 20px;
}
.rutaEntregaEstado.error:before {
  border-left: 1px solid var(--error500);
}
.rutaEntregaEstadoFinal.rutaEntregaEstadoDefault:before {
  border-left: 1px solid var(--S200);
 }*/

.reporteEntrega {
	display: flex;
	padding-left: 106px;
}
.reporte-error {
	background-color: #F8FAFC;
	padding: 24px;
	border-radius: 12px;
}
.rutas-background {
	background-color: #F1F5F9;
	padding: 18px 24px;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
}
.reporteFigure {
	border-radius: 8px;
}
.showMovil { display: none;}

.pointer {
	background-color: var(--S50);
	display: flex;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	z-index:1;
}
.pointer:after {
	background: var(--P600);
	width: 12px;
	height: 12px;
	content: '';
	border-radius: 50%;
	/*font-size: 24px;
	line-height: 2px;/
	position: absolute;
	top: 48%;
	left: 24px;*/
}

@media (min-width: 781px) {
.coll-modal{
	display: grid;
	align-items: self-start;
	grid-template-columns: auto 594px;
	align-items: baseline;
	align-content: flex-start;
}
.coll-rutas {
	display: grid;
	align-items: self-start;
	grid-template-columns: 70% 30%;
	align-items: flex-start;
	align-content: flex-start;
	gap: 24px;
}
}
.grid {
	display: grid;
	gap: 24px;
}
ul.grid {
	list-style-type: none;
}
.coll-rutas .py-px-16{
	border-bottom: 1px solid #E2E8F0;
}
.coll-rutas .py-px-16:last-child{
	border-bottom: none;
}
.ruta-lef {
	background-color:var(--S50);
	width:248px;
	height: 490px;
	padding:36px;
	border-radius: var(--radiusLg) 0 0 var(--radiusLg);
	position:relative;
	display: grid;
	align-content: baseline;
	gap: 24px;
}
#tabs {
	display: grid;
	gap: 24px;
	list-style-type: none;
}
.tabs__li{
	color: #5F5EB2;
	font-weight: 600;
	padding-left: 24px;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: -12px;
}
.tabs__li:before {
  content: ' ';
  display: block;
  background-color:#5F5EB2;
  width: 24px;
  height: 2px;
}
.tabs__li.inactive {
  color:#64748B;
  margin:0;
}
.tabs__li.inactive:before {
  background-color:#64748B;
  width: 12px;
}
.modal__botonesLeft {
	position:absolute;
	left:0;
	bottom:20px;
	width: 100%;
	text-align: center;
}

.ruta-right {
	position:relative;
	display: grid;
	gap: 24px;
}
.ml-auto { margin-left: auto}
.tabOverflow { overflow-y:auto; height:400px;padding:36px;}

.form__group__icon i { font-size: 20px;}
.form__icon .select2-container .select2-selection--single .select2-selection__rendered { padding-left: 44px;}
.tabcontent .form__label{ font-size: 14px;}

.gridPerfil {
  display: grid;
  grid-template-columns: 25% auto;
  gap: 12px;
  align-items: flex-start;
}
.gridPerfil .row {
  gap: 12px;
  align-items: flex-start;
}
.gridPerfil .row div {
	width: 36%;
}
.gridPerfil .row div.form__icon {
	width: 100%;
}
.border { border: 1px solid var(--S200); border-radius: 4px; }
.coll__group3 .form__group {
	width: 320px;
}
.w-160 { width: 160px;}
.w-350 { width: 350px;}
.py-px-16{
	padding: 16px 24px;
}

.invisible {
  visibility: hidden;
}

.flex{
  display: flex;
}

/********** RESPONSIVE **********/
@media (max-width: 900px) {
.content {
  padding: 20px;
}
.grid2 {
  grid-template-columns: 1fr;
}
.ruta-lef {
  width: 200px;
}
}

@media (max-width: 780px) {
.reporteEntrega{
	display: none;
	width: 100%;
	height: 100%;
	padding: 0;
	background-color: #00000040;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index:4;
}

.reporte-error {
	background-color:#FFF;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
}
.showMovil.btn { display: inline-flex;}

.ruta-lef {
	width: 100%;
	height:auto;
	padding: 24px 24px 12px;
	gap: 12px;
	border-radius:var(--radiusLg) var(--radiusLg) 0 0;
}
#tabs {
  display: flex;
  gap: 12px;
  height: 50px;
  overflow-y: auto;
}
.modal__botonesLeft {
	width: 90px;
	top: 18px;
	right: 0;
	bottom: auto;
	left: auto;
}
.tabOverflow {
  overflow-y: auto;
  height: 350px;
  padding: 24px 24px 12px;
}
.modal__botones {
  padding: 20px 24px 20px;
}
.gridPerfil {
  grid-template-columns: auto;
}
.gridPerfil .row div {
  width: 50%;
}
}

@media (max-width: 600px) {
h1 {
  font-size: var(--medida24);
  line-height: var(--medida28);
}
.coll__group3 .form__group {
  width: 100%;
}
}

@media (max-width: 540px) {
.contentTitulo .row.row--gap24.mb-24 {display:block;}
.contentTitulo .row.row--gap24.mb-24 .label {margin-top: 6px;}
.tabla tr td {padding: 14px 10px;}
.p-24 { padding: 16px;}
.divContenedorTop, .divContenedorFooter, .rutas-background { padding: 14px 16px;  }
.row { flex-wrap: wrap;} 
}

@media (max-width: 450px) {
.gridPerfil .row { display: grid;}
 .gridPerfil .row div {
    width: 100%;
  }
}