.btn {border: none;color: white;height:200px;width:450px;font-size: 32px;cursor: pointer;margin: 0px 10px 10px 0px;}
.btnlarge { border: none;color: white;height:50px; width:100px;font-size: 22px;cursor: pointer;}

.imprimir {background-color: #00FF00;} /* Verde Claro*/
.imprimir:hover {background-color: #2510a3;}
.excel {background-color: #00FF00;} /* Verde Claro*/
.excel:hover {background-color: #2510a3;}

.falabella {background-color: #228B22;} /* Verde Claro*/
.falabella:hover {background-color: #2510a3;}

.hites {background-color: #2196F3;} 
.hites:hover {background-color: #2510a3;}

.ripley {background-color: #000000} /* Negro*/
.ripley:hover {background: #2510a3;}

.chuwi {background-color: #ff8000;} /* Naranja */
.chuwi:hover {background: #2510a3;}

.com {background-color: #34495E;} /* Plomo */
.com:hover {background: #2510a3;}

.seller {background-color: #800000;} /* Marron */
.seller:hover {background: #2510a3;}

.linio {background-color: #F08080;} /* Naranja */
.linio:hover {background: #2510a3;}

.paris {background-color: #2196F3;} /* Celeste */ 
.paris:hover {background: #2510a3;}

.mercadolibre {background-color: #FED821; } /* Amarillo */ 
.mercadolibre:hover {background: #2510a3;}

.chilexpress {background-color: #800080; } /* Morado */ 
.chilexpress:hover {background: #2510a3;}

.jumpseller {background-color: #CB4335 ;} /* Verde */
.jumpseller:hover {background-color: #2510a3;}

.starken {background-color: #000080;} /* Verde bosque */
.starken:hover {background-color: #2510a3;}

.convenio {background-color: #008080;} /* Verde bosque */
.convenio:hover {background-color: #2510a3;}

.otros {background-color: #008080;} 
.otros:hover {background-color: #2510a3;}

.imprimir {background-color: #228b88;} 
.imprimir:hover {background-color: #2510a3;}

.modificar {background-color: #0000ff;} /* Azul */
.modificar:hover {background-color: #2510a3;}
.restaurar {background-color: #00ff00;} /* Verde */
.restaurar:hover {background-color: #2510a3;}
.eliminar {background-color: #ff0000;} /* Rojo */
.eliminar:hover {background-color: #2510a3;}
.consultaorden {background-color: #4CAF50;} /* Verde */
.consultaorden:hover {background-color: #2510a3;}

.consultauser {background-color: #2196F3;} /* Celeste*/
.consultauser:hover {background: #2510a3;}

.registro {background-color: #ff8000;} /* Naranja */
.registro:hover {background: #2510a3;}

.notificaorden {background-color: #f44336;} /* Rojo */ 
.notificaorden:hover {background: #2510a3;}

.restaurar {background-color: #ff0080; } /* Rosado */ 
.restaurar:hover {background: #2510a3;}

.verencapsulados {background-color: #804000;} /* Marron */
.verencapsulados:hover {background-color: #2510a3;}

.imagenes {background-color: #572364;} /* Morado */ 
.imagenes:hover {background: #2510a3;}

/* Menú principal */
ul {
  list-style-type: none;
  margin: 0 auto; /* Centra el menú horizontalmente */
  padding: 0;
  overflow: hidden;
  background: #1f1f1f; /* Fondo gris oscuro */
  border-radius: 12px; /* Bordes redondeados */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Sombra ligera */
}

/* Elementos del menú */
li {
  float: left;
}

/* Estilo de los enlaces */
li a {
  display: block;
  color: #e0e0e0; /* Gris claro para el texto */
  text-align: center;
  font-size: 18px; /* Tamaño de fuente ajustado */
  padding: 16px 24px; /* Espaciado adecuado */
  text-decoration: none;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Tipografía moderna */
  transition: all 0.3s ease; /* Suaviza todas las transiciones */
  border-radius: 8px; /* Bordes redondeados para cada elemento */
}

/* Efecto hover */
li a:hover:not(.active2) {
  background: #444; /* Gris medio para el hover */
  color: #fff; /* Texto blanco */
  transform: scale(1.1); /* Efecto de zoom */
  box-shadow: 0 6px 12px rgba(68, 68, 68, 0.5); /* Sombra más destacada */
}

/* Estado activo */
li a.active2 {
  background: #3a3a3a; /* Gris oscuro más claro que el fondo */
  color: #fff; /* Texto blanco */
  font-weight: bold; /* Resalta el texto activo */
  box-shadow: 0 6px 12px rgba(58, 58, 58, 0.5); /* Sombra más intensa */
}


.active {background-color: #0000ff;}
.active2 {background-color: #0489B1;}
#logo {width: 200px;height: auto;margin-bottom: 20px;}
#logoz {width: 200px;height: auto;margin-bottom: 20px; margin-left: 260px;;}
#logop {width: 120px;height: 120px;}
#logom {width: 200px;height: 50px;}
#destacada {width: 500px;height: 200px;display:block;margin-left: auto;margin-right: auto;}
* {box-sizing: border-box;}
input[type=text],input[type=password], select, textarea {width: 97%;padding: 10px 10px 5px 10px;margin: 0px 0px 20px 0px;border: none;border-bottom: 2px solid #000;resize: vertical;font-size: 18px;box-sizing: border-box;outline: none;}
label {padding: 12px 12px 12px 0;display: inline-block;}
.row input[type=submit] {background-color: #4CAF50;color: white;padding: 12px 20px;border: none;border-radius: 4px;cursor: pointer;float: right;margin: 20px 26px 0px 0px;text-transform: uppercase;}
.row input[type=submit]:hover {background-color: #45a049;}
.row input[type=button] {background-color: #4CAF50;color: white;padding: 12px 20px;border: none;border-radius: 4px;cursor: pointer;float: right;margin: 20px 26px 0px 0px;text-transform: uppercase;}
.row input[type=button]:hover {background-color: #45a049;}
.col-25 {float: left;width: 25%;margin-top: 6px;}
.col-75 {float: left;width: 75%;margin-top: 6px;}
/* Clear floats after the columns */
.row:after {content: "";display: table;clear: both;}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
	.columna {width: 48%;float:left;margin: 0px 15px 10px 0px;}

@media (max-width: 500px) {.columna {width:auto;float:none;}}

#myInput {background-image: url('/css/searchicon.png');background-position: 10px 10px;background-repeat: no-repeat;width: 100%;font-size: 16px;padding: 12px 20px 12px 40px;border: 1px solid #ddd;margin-bottom: 12px;}
#myTable {border-collapse: collapse;width: 100%;border: 1px solid #ddd;font-size: 18px;}
#myTable th, #myTable td {text-align: left;padding: 12px;}
#myTable tr {border-bottom: 1px solid #ddd;}
#myTable tr.header, #myTable tr:hover {background-color: #f1f1f1;}

.form-horizontal {max-width: 830px; width: auto;height: 160px;margin: 20px auto 50px;}
.g-recaptcha {display: block;margin: 0 auto;width: 830px;position: relative;}

form {display: block;width: 680px;margin: 0 auto 20px auto;}
form input#start {display: block;width: 100%;margin: 0px 0px 23px 0px;height: 50px;padding: 0px 15px 0px 15px;color: #000;font-size: 20px;font-family: Open Sans, sans-serif;float: left;cursor: pointer;}
.form-horizontal input#sbt {width: 150px;height: 60px;margin: 0px 20px 20px 0px;float: right;text-transform: uppercase;color: #fff;background: #004581;border: none;cursor: pointer;font-size: 16px;}
.form-horizontal input#sbt:hover {background: #688fb3;}
.caja select {width: 100%;height: 50px;color: #000;font-size: 20px;font-family: Open Sans, sans-serif;appearance: menulist;box-sizing: border-box;cursor: pointer;}
.btn:hover {background: #ff5300;}
.btn-cnt {width: 680px;margin: 0 auto;clear: both;}
.msg-error {
  color: red;
 }


/* ELINARES */
 


.orange {
  background: #ffc241;
  color: #fff;
}

.kpi-card
{
  overflow: hidden;
  position: relative;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.75);;
  display: inline-block;
  float: left;
  padding: 1em;
  border-radius: 0.3em;
  font-family: sans-serif;  
  width: 240px;
  min-width: 180px;
  margin-left: 0.5em;
  margin-top: 0.5em;
}

.card-value {
  display: block;
  font-size: 200%;  
  font-weight: bolder;
}

.card-text {
  display:block;
  font-size: 70%;
  padding-left: 0.2em;
}