@import url(../../../css/comun.css);

.error{ display:none; margin:10px auto; font-size:93.75%; color:#F00; }
select{ border:1px solid #D02539; padding:2px 5px; max-width:100%; }

/* Cabecera */
#cabecera{ padding:3px 0px; }

/* Cabecera compra */
#cab_carrito{ margin:60px auto 20px auto; padding-bottom:5px; border-bottom:1px solid #CCC; }
#cab_carrito .titulo{ font-size:125%; font-weight:bold; }
#cab_carrito p:not(.titulo){ font-size:100%; color:#CCC; }

/* Pasos compra */
#pasos{ position:relative; margin-bottom:40px; }
#pasos li.activo{ font-weight:bold; }
#pasos li{ font-size:100%; }

/* Navegación pasos */
#navPasos{ float:none; clear:both; margin:60px auto; }
#navPasos a:hover{ cursor:pointer; }

/* Paso 1 */
#tabla{ width:100%; margin:20px auto; }

#btn_menos_carro, #btn_mas_carro{background-color:#D02539; line-height:20px; width:20px; text-align:center; }
#btn_menos_carro, #btn_menos_carro:visited,
#btn_mas_carro, #btn_mas_carro:visited{ font-weight:bold; color:#FFF; }
#btn_menos_carro:hover, #btn_mas_carro:hover{ cursor:pointer; }
.cantidad > *{ display:inline-block; vertical-align:middle; }
.cantidad span{ font-size:125%; }

#btn_supr_carro{ display:inline-block; }
#btn_supr_carro:hover{ cursor:pointer; }
#btn_supr_carro img{ vertical-align:middle; }

.codigo_promo{ text-align:right; width:100%; }
.codigo_promo > *{ display:inline-block; vertical-align:middle; font-size:125%; }
.codigo_promo p{ margin-right:5px; margin-bottom:5px; }
.codigo_promo input{ padding:0px 5px; border:1px solid #D02539; margin-bottom:5px; color:#333; font-size:19px; min-width:295px; }

#carritoTotales{ width:100%; }

/* Totales */
#tablaTotal{ margin-bottom:40px; float:right; border:1px solid #D02539; }
.totales{ width:100%; border-bottom:1px solid #D02539; }
.totales > *{ display:inline-block; margin-right:-4px; padding:8px; }
.totales > p:first-child{ width:55%; }
.totales > p:last-child{ width:45%; text-align:right; font-weight:bold; }
.totalisimo{ background-color:#D02539; color:#FFF; }
.totalisimo > p:last-child{ font-size:125%; }

/* Observaciones */
#cntObservaciones{ }
#cntObservaciones p{ margin-bottom:5px; font-size:100%; }
#cntObservaciones textarea{ width:100%; height:127px; border:1px solid #D02539; }

/* Envio */
#descenvio{ font-size: 87.5%; padding: 5px 0px; }

/* Datos del cliente */
#datosCliente{ }

/* Datos del pedido */
#datosCliente{ margin-bottom:20px; width:100%; }
#datosCliente .titulo{ font-size:112.5%; color:#D02539; }
#datosCliente p{ width:100%; margin-bottom:5px; }
#datosCliente p.titulo{ margin-bottom:15px; }
#datosCliente span{ font-weight:bold; }

/* Datos del pedido */
#datosPedido{ }
#datosPedido .titulo{ font-size:112.5%; color:#D02539; margin-bottom:15px; }
#datosPedido > div{ border:1px solid #D02539; padding:10px; width:100%; }
#datosPedido span{ font-weight:bold; }

.paso5 .naranja{ color:orange !important; }
.paso5 .verde{ color:green !important; }
.paso5 .rojo{ color:red !important; }

#tyc{ margin-top:40px; width:100%; float:none; clear:both; text-align:center; }
#tyc a,
#tyc a:visited{ color:#D02539; }

#cargando{ display:none; position:relative; margin:20px auto; text-align:center; }
#cargando img{ max-height:50px; }

.notas_pie{ margin-bottom:20px; font-style:italic; color:#777; font-size:93.75%; }
.notas_pie strong{ color:red; font-size:112.5%; }

/* PC */
@media screen and (min-width: 980px) { 

	#cabecera_fija { height: 148px; }

	/* Cabecera compra */
	#cab_carrito .titulo{ float:left; }
	#cab_carrito p:not(.titulo){ float:right; }

	/* Pasos compra */
	#pasos:after{ content:''; display:block; width:98%; height:1px; border-bottom:2px solid #D02539;  position:absolute; top:25px; z-index:-1; }
	#pasos li{ display:inline-block; padding:15px 36px; margin-right:33px; background-color:#EEE; }
	#pasos li.activo{ color:#FFF; background-color:#D02539; }
	#pasos li.pasados{ color:#000; background-color:#D02539; }
	#pasos li:last-child{ margin-right:0px; }
	
	/* Navegación pasos */
	#navPasos li a{ display:inline-block; padding:10px 30px; }
	#navpIzq{ float:left; background-color:#EEE; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; }
	#navpDch{ float:right; background-color:#D02539; -webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomright: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; }
	#navpIzq a, #navpIzq a:visited{ color:#000; }
	#navpDch a, #navpDch a:visited{ color:#FFF; }
	
	#navpIzq:hover,
	#navpDch:hover{ font-weight:bold; border-bottom:1px solid #CCC; }
	
	/* Tabla */
	#tabla{ display:table; }
	.rowCab{  display:table-header-group;  font-weight:bold;  text-align:center; }
	.rows{ display:table-row; width:100%; }
	.rows:last-child > *{ border-bottom:1px solid #000; }
	.cols{ display:table-cell; padding:5px; }
	
	.rows:nth-of-type(2n+1){ background-color:#EEE; }
	.rowCab .rows{ background-color:#000; color:#FFF; }
	
	.responsivo{ display:none; }
	
	.referencia{ width:10%; text-align:left; font-weight:bold; }
	.producto{ width:42%; text-align:left; }
	
	#tabla .separador{ display:none; }
		
	.precio{ width:15%; text-align:right; }
	.cantidad{ width:15%; text-align:right; }
	.subtotal{ text-align:right; }
	.eliminar{ width:5%; text-align:right; }
	
	/* Totales */
	#tablaTotal{ width:30%; }
	
	/* Observaciones */
	#cntObservaciones{ float:right; margin:0px 2% 0px 0px; width:68%; }
	
	/* Datos del cliente */
	#datosCliente{ }
	#datosCliente > div{ display:inline-block; vertical-align:top; margin-right:-4px; width:49.99%; padding:20px 0px; }
	
	/* Datos del pedido */
	#datosPedido{ }
	#datosPedido p:not(.titulo){ display:inline-block; vertical-align:top; margin-right:-4px; width:25%; }
	

}

/* TABLET */
@media screen and (min-width: 640px) and (max-width: 980px) { 

	/* Cabecera compra */
	#cab_carrito .titulo{ float:left; }
	#cab_carrito p:not(.titulo){ float:right; }

	/* Navegación pasos */
	#navPasos li a{ display:inline-block; padding:10px 30px; }
	#navpIzq{ float:left; background-color:#EEE; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; }
	#navpDch{ float:right; background-color:#D02539; -webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomright: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; }
	#navpIzq a, #navpIzq a:visited{ color:#000; }
	#navpDch a, #navpDch a:visited{ color:#FFF; }
	
	/* Tabla */
	#tabla{ }
	.rowCab{ display:none; }
	.rows{ margin:10px auto; padding:10px; border:1px solid #EEE; } 
	.cols{ display:inline-block; vertical-align:top; }

	.responsivo{ font-weight:bold; margin-right:5px; }
	
	.referencia{ width:25%; }
	.producto{ width:69%; }

	#tabla .separador{ display:block; width:100%; height:20px; }
	
	.precio{ width:30%; }
	.precio .responsivo{ float:left; }
	
	.cantidad{ width:30%; }
	.cantidad .responsivo{ float:left; }
	
	.subtotal{ width:30%; }
	.subtotal .responsivo{ float:left; }
	
	.eliminar{ width:7%; text-align:right; }
	
	/* Totales */
	#tablaTotal{ width:45%; }
	
	/* Observaciones */
	#cntObservaciones{ float:right; margin:0px 5% 0px 0px; width:50%; }
	
}

/* MÓVIL */
@media screen and (min-width: 200px) and (max-width: 640px) {

	/* Cabecera compra */
	#cab_carrito{ margin:40px auto 10px auto; }
	#cab_carrito p{ text-align:center; }

	/* Navegación pasos */
	#navPasos{ text-align:center; }
	#navPasos li{ margin:10px; display:inline-block; }
	#navPasos li a{ display:inline-block; padding:10px 30px; }
	#navpIzq{ background-color:#EEE; }
	#navpDch{ background-color:#D02539; }
	
	#navpIzq a, #navpIzq a:visited{ color:#000; }
	#navpDch a, #navpDch a:visited{ color:#FFF; }
	
	/* Tabla */
	#tabla{ }
	.rowCab{ display:none; }
	.rows{ margin:10px auto; padding:10px 10px 0px 10px; border:1px solid #EEE; } 
	.cols{ margin-bottom:15px; display:inline-block; vertical-align:top; }

	.responsivo{ font-weight:bold; margin-right:5px; }
	
	.referencia{ width:100%; }
	.referencia .responsivo{ float:left; }
	
	.producto{ width:100%; }
	.producto .responsivo{ float:left; }

	.precio{ width:48%; }
	.precio .responsivo{ float:left; }
	
	.cantidad{ width:48%; }
	.cantidad .responsivo{ float:left; }
	
	.subtotal{ width:90%; }
	.subtotal .responsivo{ float:left; }
	
	.eliminar{ width:8%; text-align:right; }
	
	/* Totales */
	#tablaTotal{ width:100%; }
	
	.codigo_promo{ margin-top:20px; }

}

/* TABLET y MÓVIL (común) */
@media screen and (min-width: 200px) and (max-width: 980px) { 
	
	/* Pasos compra */
	#pasos{ text-align:center; }
	#pasos li{ display:inline-block; padding:5px 10px; margin-right:10px; border-bottom:1px solid #EEE; }
	#pasos li.activo,
	#pasos li.pasados{ border-bottom:1px solid #000; }
	#pasos li.activo{ color:#D02539; }
	
	/* Datos del cliente */
	#datosCliente{ }
	#datosCliente > div{ width:100%; padding:1%; }
	
	/* Datos del pedido */
	#datosPedido{ }
	#datosPedido p:not(.titulo){ display:inline-block; vertical-align:top; margin-right:-4px; width:50%; padding:1%; }
	#datosPedido p.titulo{ padding:1%; }
	
}