@charset "utf-8";

/**************************** CARRITO HEAD ****************************/
.carrito ul{
	padding: 0;
	margin: 0;
}
.carrito a{
	text-decoration: none;
	color: #FFF
}
.carrito li{
	display: inline-block;
	list-style: none;
	margin: 0 10px;
	cursor: pointer;
}
.carrito i{
	font-size: 24px;
	position: relative;
	top: 3px;
}
.carrito img{
	position: relative;
	top: 6px;
}

/**************************** LOGIN HEAD ****************************/
.ingresar:hover .login{
	display: block;
}
.login{
	position: absolute;
	top: 23px;
	right: 0px;
	width: 200px;
	height: 252px;
	background-color: var(--uiadm);
	border-radius: 10px;
	box-shadow: 0 0 9px rgba(0,0,0,.75);
	box-sizing: border-box;
	padding: 15px;
	text-align: center;
	display: none;
}
.login input{
	height: 24px;
	width: 100%;
	border: none;
	border-radius: 7px;
	margin: 8px 0;
	color: var(--cart);
}
.login i{
	font-size: 70px;
	color: #666;
	margin-bottom: 8px;
}
/**************************** RINES ****************************/
.rin-marco{
	position: relative;
	top: 0px;
	width: 250px;
	background-color: #FFF;
	height: 360px;
	border: solid 1px var(--rojo);
	border-radius: 10px;
	margin: 30px 12px;
	text-decoration: none;
	color: #000;
}
.rin-marco:hover{
	box-shadow: 0 0 9px rgba(0,0,0,.75);
	border: solid 1px #CCC;
}
.rin-marco img{
	position: relative;
	width: 188px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	display: block;
	top: 40px;
}
.marca{
	position: absolute;
	top: 10px;
	left: 10px;
	width: 36px;
	height: 36px;
	background-image: url("../imagenes/tyrelogo.svg");
	background-size: 35px;
	background-repeat: no-repeat;
	z-index: 1;
}
.data{
	position: relative;
	top: 41px;
	width: 100%;
	text-align: center;
	/*min-height: 121px;
	background-color: var(--gris);*/
	border-radius: 0 0 10px 10px;
}
.data p{
	text-transform: uppercase;
	font-size: 16px;
	margin: 5px 0;
}
.modelo-t{
	color: var(--rojo);
	font-weight: 500;
}
.letreros{
	position: absolute;
	right: 15px;
	top: 15px;
	width: 76px;
	color: #FFF;
	font-size: 11px;
	text-transform: uppercase;
	text-align: center;
	font-weight: 500;
	z-index: 2;
}
.nuevo{
	position: relative;
	top: 0px;
	width: 76px;
	line-height: 19px;
	margin: 5px 0;
	background-color: #39B54A;
	z-index: 51;
	border-radius: 8px;
}
.promo{
	position: relative;
	top: 0px;
	width: 76px;
	line-height: 19px;
	margin: 5px 0;
	background-color: #FF5E1F;
	z-index: 52;
	border-radius: 8px;
}
/**************************** DROPDOWN ****************************/

.dropdown{
	position: relative;
	display: inline-block;
	z-index: 4;
}
.dropdown:hover{
	z-index: 100;
}
.dropdown-content{
	display: none;
	position: absolute;
	background-color: var(--cart);
	min-width: 100px;
	box-shadow: 0px 0px 5px 4px rgba(0,0,0,.5);
	padding: 12px 0px;
	border-radius: 10px;
}
.dropdown-content a{
	padding: 12px 16px;
	color: #FFF;
	text-decoration: none;
	display: block;
	/*border-bottom: solid 1px var(--brillante);*/
}
.dropdown-content a:hover{
	background-color: var(--gris);
	color: var(--rojo);
}
.dropdown:hover .dropdown-content{
	display: block;
}
/****************************  INFO DETALLE ****************************/
.info{
	width: 900px;
	position: relative;
	display: flex;
	padding: 25px;
	box-sizing: border-box;
	margin: 25px auto;
	box-shadow: 0px 0px 5px -1px #000;
 	border-radius: 10px;
 	background-color: #FFF;
 	word-break: break-word;
}
.info img{
	width: 450px;
	height: 100%;
}
.xmark{
	position: absolute;
	top: 11px;
	right: 6px;
	font-size: 21px;
	height: 22px;
	width: 22px;
	display: block;
	cursor: pointer;
	color: var(--rojo);
}
.datos{
	position: relative;
	width: 375px;
	left: 25px;
	/*border: solid 1px #000;*/
}
.modelo{
	position: relative;
	top: 0px;
	width: 100%;
	text-align: center;
	font-size: 36px;
	color: var(--titulos);
	margin-bottom: 10px;
}
.tabla{
	display: flex;
	/*flex-wrap: wrap;
	flex-direction: column;
	align-content: space-between;*/
	width: 375px;
	/*height: 345px;*/
}
.data-c{
	left: 70px;
}
.tabla div{
	position: relative;
	text-transform: uppercase;
	font-size: 18px;
}
.tabla p>*:first-child{
	color: var(--cart);
}
.stock-d {
	color: var(--titulos) !important;
}
.cart-in-detail{
	position: relative;
	top: 15px;
	left: 0px;
	text-align: right;
}
.cart-btd{
	background-image: url("../imagenes/cartplus.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 21px;
}
.cart-txt{
	position: relative;
	width: 140px;
	height: 32px !important;
	font-size: 18px;
	color: var(--titulos);
	border: solid 1px #999 !important;
	border-radius: 5px !important;
}
input[type=text], input[type=pasword]{
	border-radius: 5px;
	border: none;
	height: 20px;
	padding-left: 5px;
}
/**************************** RADIOS ****************************/
input[type=radio]{
	--s: 15px;
	height: var(--s);
	aspect-ratio: 1;
	border: solid 2px var(--oro);
	padding: calc(var(--s)/8);
	background: radial-gradient(farthest-side, var(--oro), 94%, #0000)
	50%/0 0 no-repeat content-box;
	border-radius: 50%;
	outline-offset: calc(var(--s)/10);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: .3s;
}
input[type=radio]:checked{
	border-color: var(--oro);
	background-size: 100% 100%;
}
@media print {
	input[type=radio] {
    	-webkit-appearance: auto;
    	-moz-appearance: auto;
    	appearance: auto;
    	background: none;
  	}
}
.radio{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 5px 0px;
	cursor: pointer;
}
/****************************  BUSCADOR ****************************/
.m-buscar{
	margin: 0 10px;
	cursor: pointer;
}
.m-buscar::after{
	content: url(../imagenes/arrow1.png);
	position: relative;
	top: -2px;
	margin-left: 3px;
}
.fbusca{
	position: relative;
	width: 150px;
	margin-left: 10px;
	top: -6px;
}
.buscar{
	position: relative;
	border: none;
	border-radius: 7px 0 0 7px !important;
	width: 116px;
	height: 24px !important;
	color: var(--cart);
	background-color: #FFF;
	padding-left: 5px;
	font-weight: 500;
}
.lupa{
	position: absolute;
	top: 0px;
	left: 123px;
	height: 26px;
	width: 24px;
	background-color: #FFF;
	border-radius: 0 7px 7px 0;
	color: #AAA;
	font-size: 18px;
	line-height: 26px;
}
/**************************** CHECKBOX ****************************/
.container {
  	display: block;
  	position: relative;
  	padding-left: 35px;
  	margin-bottom: 12px;
  	cursor: pointer;
  	-webkit-user-select: none;
  	-moz-user-select: none;
  	-ms-user-select: none;
  	user-select: none;
}
.container input[type=checkbox] {
  	position: absolute;
  	opacity: 0;
  	cursor: pointer;
  	height: 0;
  	width: 0;
}
.checkmark {
  	position: absolute;
  	top: 0;
  	left: 0;
  	height: 19px;
  	width: 19px;
  	border: solid 2px var(--rojo);
  	border-radius: 6px;
}
.container input[type=checkbox]:checked ~ .checkmark {
  	background-color: var(--rojo);
}
.checkmark:after {
  	content: "";
  	position: absolute;
  	display: none;
}
.container input[type=checkbox]:checked ~ .checkmark:after {
  	display: block;
}
.container .checkmark:after {
  	left: 6px;
  	top: 2px;
  	width: 5px;
  	height: 10px;
  	border: solid white;
  	border-width: 0 3px 3px 0;
  	-webkit-transform: rotate(45deg);
  	-ms-transform: rotate(45deg);
  	transform: rotate(45deg);
}
.llnm{
	display: flex;
	background-color: #FFF;
	width: 164px;
	border-radius: 5px;
	position: relative;
	top: 9px;
  	color: black;
  	font-size: 12px;
  	font-weight: bold;
  	height: 33px;
	align-items: center;
	justify-content: center;
	box-shadow: 0px 1px 3px #000;
}
.gris{
	color: #666;
	width: 150px;
	height: 35px;
}
.btn-d{
	position: absolute;
	top: 25px;
	right: 25px;
	width: 170px;
	text-align: center;
}
.btn-d a{
	line-height: 35px;
	text-decoration: none;
}
.trash{
	font-size: 24px;
	color: var(--ochenta);
	margin: 25px;
	cursor: pointer;
}
.trashc{
	color: var(--ochenta);
	cursor: pointer;
}
.editar-u{
	position: absolute;
	right: 0px;
	bottom: 0px;
	margin: 25px;
	font-size: 24px;
	color:  var(--brillante);
	cursor: pointer;
}
.usuario{
	text-align: center;
	text-transform: none;
	font-size: 12px;
}
.usuario i{
	font-size: 20px;
	position: absolute;
	/*margin-right: 0px;
	margin-left: 0px;*/
	left: 0px;
	right: 0px;
	top: -15px;
}
.c-usuario{
	position: relative;
	width: auto;
	display: block;
}
.usuario p{
	margin: 0px;
	position: relative;
	top: 10px;
	text-align: center;
}
.text-txt{
	position: relative;
	width: 300px;
	height: 96px;
	font-size: 18px;
	color: var(--titulos);
	border: solid 1px #999;
	border-radius: 5px;
	font-family: 'Rubik', sans-serif;
}
.input-txt{
	position: relative;
	width: 300px;
	height: 32px !important;
	font-size: 16px;
	color: var(--titulos);
	border: solid 1px #999;
	border-radius: 5px;
	margin-bottom: 10px;
}
.center{
	text-align: center;
}
.initial{
	display: initial !important;
}
.msjtxt, .msjbad{
	position: relative;
	width: 90%;
	height: 50px;
	text-align: center;
	background-color: palegreen;
	border-radius: 10px;
	border: solid 1px mediumseagreen;
	line-height: 50px;
	color: darkcyan;
	display: inline-block;
	font-size: 16px;
	margin-left: auto;
	margin-right: auto;
	display: block
}
.msjbad{
	background-color: lightcoral;
	border: solid 1px red;
	color: red
}
.menumovil{
	display: none;
}
/*.llnm{
	display: block;
	background-color: #FFF;
	width: 40px;
	border-radius: 5px;
	top: 3px;
	position: relative;
}*/
.llnm img{
	position: relative;
	top: 2px;
	left: 8px;
}
/**************************** CARRITO ****************************/
.stock{
	position: absolute;
	left: 15px;
	top: 230px;
	text-align: center;
	color: #C1272D;
	font-size: 16px;
}
.precio{
	position: absolute;
	/*left: 15px;*/
	bottom: 15px;
	font-size: 16px;
	width: 100%;
	text-align: center;
}
.add-cart{
	position: absolute;
	right: 15px;
	top: 268px;
	width: 32px;
}
.add-cart-bt{
	position: relative;
	width: 32px;
	height: 32px;
	background-color: var(--rojo);
	color: #FFF;
	border: none;
	border-radius: 18px;
	font-size: 14px;
	box-sizing: border-box;
	text-align: center;
	margin-bottom: 10px;
	z-index: 15;
}
.add-cart input[type=button]{
	background-image: url("../imagenes/cartplus.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 21px;
	cursor: pointer;
}
.amount{
	position: absolute;
	top: 0px;
	/*left: 165px;*/
	background-color: var(--brillante);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	color: #FFF;
	font-size: 10px;
	line-height: 16px;
	text-align: center;
}
/**************************** MENU LATERAL ****************************/
.lateral ul, li{
	padding: 0px;
	margin: 0px;
	list-style: none;
}
.lateral a{
	position: relative;
	color: #666;
	text-shadow: 1px 1px 0px #FFF;
	text-decoration: none;
	text-transform: uppercase;
	width: 210px;
	height: 50px;
	border-bottom: solid 1px #999;
	box-shadow: 0px 1px 0px #E6E6E6;
	display: block;
	text-align: left;
	line-height: 50px;
	box-sizing: border-box;
	padding-left: 30px;
}
.lateral a:hover{
	padding-left: 20px;
	background-color: #E6E6E6;
	border-left: solid 10px var(--brillante);
}
/**************************** DETALLE ****************************/
.detalle-cart span, .detalle-cart p, .detalle-cart a{
	display: block;
}
.cantidades{
	position: relative;
	width: 100%;
	height: 51px;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}
.metodos{
	position: relative;
	width: 100%;
	height: 126px;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.direccion{
	position: relative;
	width: 100%;
	margin-bottom: 20px;
}
.direcciones-drop{
	width: 330px;
	font-size: 15px;
	text-transform: none;
	color: #FFFFFF;
	font-weight: normal;
}
.direcciones-drop div{
	padding: 10px 15px;
	display: flex;
}
.direcciones-drop div:not(:last-of-type){
	border-bottom: solid 1px #999;
	box-shadow: 0px 1px 0px #E6E6E6;;
}
.direcciones-drop input[type=radio]{
	margin-right: 10px; 
}
.botonp{
	position: relative;
	width: 145px;
	height: 35px;
	border-radius: 5px;
	border: none;
	background-color: var(--rojo);
	color: #FFF;
	font-size: 18px;
	text-transform: uppercase;
	margin: 9px;
	cursor: pointer;
	display: block;
}
.botonp:hover{
	background-color: var(--titulos);
}
.botonp:disabled {
	background-color: var(--ochenta);
}
.banca{
	position: relative;
	width: 100%;
	display: flex;
	margin-bottom: 20px;
}
.banca div{
	position: relative;
	width: 50%;
}
.pedir{
	position: relative;
	width: 100;
	text-align: center;
}
.clabe{
	font-size: 14px;
}
/**************************** PRODUCTO DETALLE ****************************/
.producto-detalle{
	position: relative;
	width: 680px;
	height: 200px;
	border: solid 1px var(--brillante);
	border-radius: 10px;
	margin-bottom: 10px;
	display: flex;
}
.producto-detalle img{
	position: relative;
	width: 180px;
	height: 180px;
	left: 5px;
	top: 5px;
}
.productos p{
	margin: 6px 0px;
}
.data-p, .precios-p{
	margin-left: 10px;
	padding: 25px;
	box-sizing: border-box;;
}
.data-p p:first-child{
	color: var(--brillante);
	font-weight: 500;
}
.data-p span, .precios-p span{
	color: #000;
}
.data-p p:nth-child(2){
	font-weight: 500;
}
.precios-p p:nth-child(3){
	font-weight: 500;
}
.precios-p p{
	margin: 18px 0px;
}
.spinner{
	width: 79px;
	height: 26px;
	border: solid 1px #999;
	border-radius: 5px;
}
.precios-p i{
	position: absolute;
	bottom: 15px;
	right: 15px;
}
.spinner input[type=button]{
	position: relative;
	top: 0px;
	width: 20px;
	border: 0px;
	height: 24px;
	background-color: #FFF;
	margin: 0px 1px;
	border-radius: 5px;
	font-size: 16px;
	cursor: pointer;
}
.spinner input[type=button]:hover{
	background-color: #EEE;
}
.spinner input[type=button]:active{
	background-color: var(--cart);
}
.spinner input[type=text]{
	width: 19px;
	height: 23px;
	border: none;
	text-align: center;
	font-size: 16px;
}
.row-detalle::after{
	content: url(../imagenes/arrow.svg);
	width: 15px;
	height: 16px;
	display: inline-block;
	top: -3px;
}
.datosg, .datosu{
	width: 451px;
	display: block;
	margin: 25px;
	padding: 25px;
	box-sizing: border-box;
}
.domicilios{
	position: absolute;
	width: 590px;
	display: block;
	right: 0px;
	top: 0px;
	margin: 25px;
	padding: 25px;
	box-sizing: border-box;
	height: auto;
}
#direccionfm{
	display: flex;
}
.direccionesfm{
	position: relative;
	width: 360px;
}
.datosu{
	position: absolute;
	top: 250px;
	left: 0px;
}
/**************************** PEDIDOS ****************************/
.pedido{
	position: relative;
	display: flex;
	width: 100%;
	min-height: 195px;
	background-color: #CCC;
	border-radius: 10px;
	margin: 25px;
	text-transform: uppercase;
	font-size: 16px;
	color: #666;
}
.data-pedido p{
	margin: 0 0 10px 0;
}
.data-pedido{
	padding: 25px;
	box-sizing: border-box;
	border-right: solid 1px #999;
	box-shadow: 1px 0px 0px #E6E6E6;
}
.data-pedido:last-of-type{
	border: none;
	box-shadow: unset;
}
.data-pedido span{
	color: #000;
}
.data-print{
	position: absolute;
	top: 0px;
	right: 0px;
	margin: 15px;
}
.data-trash{
	position: absolute;
	bottom: 0px;
	right: 0px;
	margin: 25px;
}
.data-pedido table{
	color: #000
}
.data-pedido td{
	padding-right: 15px; 
}
.data-monto{
	width: 250px;
}