@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@200;400;700&display=swap');
@import url('https://tienda.recambioscomarca.com/css/style.css');
@import url('https://tienda.recambioscomarca.com/css/forms.css');

/* PALETA */
	/* Acento: #D21A15 rgba(210,26,21,1) */
	/* Soft grey: #f3f4f6 */
	/* Middle grey: #d1d5db */
	/* Base grey: #6b7280 */
	/* Dark grey: #111827 */
	

* { margin:0; padding:0; border:none; outline:none; box-sizing:border-box; font-family:"Roboto", Helvetica, Arial, Geneva, sans-serif;
	transition: background 0.3s ease-in-out, color .3s ease-in-out, box-shadow .3s ease-in-out; }
/*
  transition-duration: .15s;
  transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
*/
}
input::-moz-focus-inner { border:0; }
body { font-size:14px; line-height:1.4em; color:#111827; -webkit-text-size-adjust:none; padding:0rem 0 0 12rem; }
a { text-decoration:none; color:#6b7280; }
	a:hover { text-decoration:none; }
p { line-height:1.3em; }
ul { list-style:none; }


/* ICONOS */
.icon, .iconDiv:before, .sideOptions li a:after { display:inline-block; vertical-align:bottom; font-size:1.5em; line-height:1em;
	font-family:'v3' !important; speak:never; font-style:normal; font-weight:normal; font-variant:normal; font-style:normal; text-rendering:auto; line-height:1em; font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.iconBig { font-size:2.75rem; }
.iconBox { display:inline-flex; width:1.75em; height:1.75em; margin:0; background:#D21A15; color:#fff !important; border-radius:8px; border-radius:50%; font-size:1.7em;
	justify-content:center; align-items:center; }
	.iconBoxLite { background:rgba(107, 114, 128,.7); font-size:1.4em; }

.status:before { content:''; display:inline-block; width:.6em; height:0.6em; border-radius:50%; margin-right:.6em;
	background:rgb(195,195,195); outline:4px solid rgba(195,195,195,.3); }
	.statusIddle:before { background:rgba(195,195,195,.2); outline:4px solid rgba(195,195,195,.2); }
	.statusOK:before { background:rgb(34,197,94); outline:4px solid rgba(34,197,94,.2); }
	.statusKO:before { background:#FF2F00; outline:4px solid rgba(255,47,0,.2); }

.status1:before { content:''; display:inline-block; width:.6em; height:0.6em; border-radius:50%; margin-right:.6em; background:rgb(195,195,195); outline:4px solid rgba(195,195,195,.3); }
	.statusOK1 { background:rgb(34,197,94); outline:4px solid rgba(34,197,94,.2); }
	.statusNO1 { background:#FF2F00; outline:4px solid rgba(255,47,0,.2); }

.iconDiv input { text-align:left; padding-left:2.75em; }
.iconDiv:before { display:block; position:absolute; z-index:1; margin:.5em; }
	.search {  }
	.search:before { content:"\f009"; }

/* Botones & formularios */
.btn, input, select, textarea, .imgEdit fieldset { display:inline-flex; height:3em; padding:.1em 1em; border-radius:8px;
	align-items:center; justify-content:center; font-size:1em; color:#111827; text-align:center;
	border:1px solid #d1d5db; box-shadow:rgba(0,0,0,.1) 0 1px 2px; background:#fff; }
	.btn:hover { background:#f3f4f6; }
	.btn .icon { margin:0 .3em 0 -.1em; }
		.btn:hover .icon { color:#111827; }
	input { box-shadow:rgba(0,0,0,.1) 0 2px 2px inset; }
		input:focus { border-color:#D21A15; box-shadow:rgba(0,0,0,.1) 0 3px 4px; }
		input:active { outline:1px solid #D21A15; border-color:#D21A15; }
	select { padding:.1em 2em .1em 1em; text-align:left; -webkit-appearance:none;
		background:url(../img/select.png) right bottom no-repeat #fff; background-size:contain; }
	


.btnTrans { background:transparent; border:none; box-shadow:none; }
	.btnTrans:hover { background:#f3f4f6; }
.btnLight, .inputLight { background:#f3f4f6; border:none; box-shadow:none; }
	.btnLight:hover { background:#d1d5db; }
.btnLine { box-shadow:none; }

.btnAction { color:#fff; background:#D21A15; border:none; }
	.btnAction:hover { background:#111827; }
.btnRound { border-radius:50%; }
.btnIcon { width:3em; }
	.btnIcon .icon { font-size:1.3em; margin:0; }
.btnAccent .icon { color:#D21A15; }

/*----- FORMS -----*/
.form { }
	.form h4 { padding-bottom:.5em; border-bottom:1px dotted #d1d5db; }
	.form fieldset { position:relative; display:block; }
	.form fieldset label { position:absolute; left:1rem; top:.3rem; font-size:.9em; color:rgb(156,163,175); }
		.form fieldset.inputCheck label { position:static; }
		.form fieldset input[type=file] { height:4.2em; padding-top:1.6rem; }
		.form fieldset input[type=checkbox] { width:inherit; height:inherit; }
/*
	.form .imgEdit { grid-template-columns: 1fr 1fr 1fr 1fr; }
		.form .imgEdit fieldset { min-width:10.5em; height:auto; padding-top:2em; text-align:left; }
		.form .imgEdit fieldset img { max-width:13em; height:6rem; border-radius:4px; }
			.form .imgEdit fieldset img:hover { box-shadow:0 0 .7em rgba(0,0,0,.2); }
		.form .imgEdit fieldset input { width:1rem; height:1rem; position:absolute; top:-3px; right:-3px; padding:1.7rem 0 0 1.7rem; border-radius:0 8px;
			background:url(../img/editBtn.png) center center rgb(156,163,175); background-size:cover; cursor:pointer; text-indent:-9999px; overflow:hidden; }
			.form .imgEdit fieldset input:hover { background-color:#D21A15; }
			.form .imgEdit fieldset input.ok { background-color:#42DC6D; border-color:#42DC6D; }
				.form .imgEdit fieldset input.ok:hover { background-color:#3CB15D; border-color:#3CB15D; }
		.form .imgEdit fieldset .btn { width:1.8rem; height:1.8rem; position:absolute; bottom:-3px; right:-3px; border-radius:8px 0; }
		
	.form fieldset .error { display:block; ;padding:.3em .6em; border-radius:8px; margin-top:4px;
		font-size:.9em; color:#D21A15; background:rgba(210,26,21,.07); }

	.form fieldset.disabled input,
	.form fieldset.disabled input:active { border:none; outline:none; background:rgba(209,213,219,.3);
		box-shadow: 0 1px 2px rgba(0,0,0,.05) inset; }
*/


	/* wysiwyg */
	.note-editor .note-editable { height:400px; }


/* Menú principal */
.menubar { position:fixed; bottom:0; left:0; top:0; width:12rem; padding:1rem;
	border-right:1px solid #e5e7eb; background:#fff; color:#6b7280; }
.menubar h1 { /* text-align:center; color:#D21A15; font-size:1.4rem; margin:0 -.5rem 1.1rem;
	line-height:2.25rem; */ height:3.9rem; margin-top:-.5rem; text-indent:-9999px;
	background:url(../img/recambios-comarca.png) center center no-repeat; background-size:contain; }

.menubar nav ul { list-style:none; padding:1em 0 0; }
	.menubar nav li {  }
		.menubar nav li a { display:flex; align-items:center; padding:.6em .8em; border-radius:8px; }
			.menubar nav li a:hover { background:#f3f4f6; color:#111827; }
				.menubar nav li a:hover .icon { color:#D21A15; }
				.menubar nav li.active a { background:rgba(210,26,21,.07); color:#D21A15; }
		.menubar nav li .icon { font-size:24px; margin-right:.4em; }
			.menubar nav li.active .icon { color:#D21A15; }
		.menubar nav li.sep { border-bottom:1px solid; margin:1.2em 0 .3em;
			text-transform:uppercase; font-size:.8em; font-weight:bold; letter-spacing:.05em; color:#aeb5c1; }

/* Barra superior */
.topbar { position:fixed; top:0; right:0; bottom:0; z-index:9999; left:12rem; height:4.5rem; padding:1rem 2rem;
	border-bottom:1px solid #e5e7eb; background:#fff; color:#6b7280;
	display:flex; justify-content:space-between; align-items:center; }
.topbar h1 { margin:0; }
.topbar nav ul { list-style:none; padding:0; margin:0; display:flex; }
	.topbar nav ul li { margin-left:1rem; }

.subMenu { position:fixed; top:4.5rem; right:0; bottom:0; left:12rem; height:3.5rem; padding:0 2rem; margin-top:-1px;
	border-bottom:1px solid #e5e7eb; background:#fff; color:#6b7280;
	display:flex; justify-content:space-between; align-items:center; }
	.subMenu .icon { font-size:1.3em; margin-right:.4em; }
	.subMenu ul { display:flex; gap:1.2em; width:100%; height:100%; border-top:1px solid #f3f4f6; }
		.subMenu ul li { display:flex; align-items:center; height:100%; border-bottom:4px solid transparent; }
			.subMenu ul li.active { color:#D21A15; border-bottom-color:#D21A15;}
			.subMenu ul li a { padding:.5em .7em; border-radius:8px; }
				.subMenu ul li a:hover { background:#f3f4f6; }
			.subMenu ul li.active a, .subMenu ul li.active .icon { color:#D21A15; }

/* Sidebar Options */
.sideOptions { border-bottom:1px solid #f3f4f6; }
	.sideOptions li { padding:.2em 0; border-top:1px solid #f3f4f6; }
		.sideOptions li a { display:block; padding:.8em 0; position:relative; }
			.sideOptions li a:hover { color:#D21A15; }
			.sideOptions li a:after { content:"\e902"; position:absolute; right:0; color:rgb(156,163,175); }
		.sideOptions li .icon { margin-right:.4em; color:rgb(156,163,175); }
/* Pop-up Menu */
.popMenu { position:absolute; right:1.5rem; top:3.5rem;
	padding:0 .5em; border-radius:8px; border:1px solid rgb(229,231,235); box-shadow:rgba(0,0,0,.2) 0 .5em 1.5em; background:#fff; color:#111827; }
	.popMenu ul { padding:0 0 .5em; margin:.5em 0 0; border-bottom:1px solid rgb(229,231,235); }
		.popMenu ul:last-child { border:none; padding:0 0 .3em; }
			.popMenu ul li a { display:flex; align-items:center; position:relative; padding:.6em; border-radius:5px; margin:.2em 0; color:#6b7280; }
				.popMenu ul li a:hover { color:#fff; background:rgb(156,163,175); }
			.popMenu ul li .icon { font-size:1.3em; margin-right:.4em; color:rgb(156,163,175); }
				.popMenu ul li:hover .icon { color:#fff; }

/* Contenido principal */
.container { display:flex; min-height:100dvh; /* padding:4.5rem 0 0 12rem; */ background:#f3f4f6; /* flex-direction:column; */ }
.content { display:grid; width:100%; height:fit-content; grid-template-columns:1fr 1fr; gap:2rem; padding:2rem; overflow-y:auto; }
	.content .content { padding:0; }
	.content.withSidebar {grid-template-columns:2fr 1fr; }
	.content.withSubMenu { margin-top:3.5rem; }

.card { display:flex; flex-direction:column; gap:1rem; align-content: start;
	border-radius:.5rem; padding:1.5rem; background:#fff; }
	.card.fixed { max-width:1000px; }
	.card header a>Z
	.card footer { display:flex; gap:1em; align-items:center;
		padding:1rem 1.5rem; margin:-1rem -1.5rem -1.5rem;
		border-radius:0 0 .5rem .5rem;background:linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 60%, rgba(243,244,246,.5) 100%); }
		.card footer .toolbar { width:100%; justify-content:flex-end; }
		.card .overflow td:first-child { padding-left:1.5rem;  }
		.card .overflow td:last-child { padding-right:1.5rem; }
			.card .block .overflow td:first-child,
			.card .block .overflow td:last-child { padding:.7em .6em; }

	.card .btn:last-child { margin-top:auto; }


h2 { font-size:32px; line-height:1.4em; }
h3 { font-size:18px; line-height:1.3em; }
h4 { font-size:15px; line-height:1.3em; }
.lightTxt { color:#AEB5C1; }
.bigTxt { font-size:1.8em; line-height:1.3em;font-weight:bold; }
.medTxt { font-size:1.3em; line-height:1.3em;font-weight:bold; }
.smallTxt { font-size:.9em; line-height:1.3em; }


.row { display:flex; gap:1rem; }
.col-span-full { grid-column:1 / -1; }
.overflow { /* margin-left:-1.5rem; margin-right:-1.5rem; */ margin:0 -1.5rem -1.5rem; }
.space-between { justify-content:space-between; }
.center { display:flex; align-items:center; gap:.4em; }
.expand-width { width:100%; }
.flex-column { display:flex; flex-flow:column; gap:1em; }

.actionBox { display:flex; gap:1em; align-items:center; justify-content:space-between;
	padding:.5em .5em .5em 1em; border:1px solid #e5e7eb; border-radius:12px; background:#f3f4f6; }

.toolbar { display:flex; gap:.8em; }
	.toolbar > * { display:flex; flex:0 0 auto; align-items:center; gap:.8em; }

table { border-collapse:collapse; /* border-bottom:1px solid #f3f4f6; */ }
	table thead { text-transform:uppercase; font-size:.8em; font-weight:bold; letter-spacing:.05em; }
		table thead td { padding:1em .6em; background:rgba(210,26,21,.04); border:0; margin-bottom:-1px; /* text-align:center; */ line-height:1.1em; }
	table td { border-top:1px solid #f3f4f6; padding:.7em .6em; text-align:left; }
		table tr:hover td { background:rgba(243,244,246,.3);
			transition: background .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out; }
			/* .block table tr:hover td { background:rgb(243,244,246); } */
		table td.ctr { text-align:center; }
		table td.left { text-align:left; }
		table td:first-child { /* text-align:left; */ }
		table td:last-child { /* text-align:right; */ }
		table td.currency { /* text-align:right; */ white-space:nowrap; }
			table td.currency mark { padding:.1em .4em; border-radius:4px; background:rgb(34,197,94);
				color:#fff; font-weight:bold; }
		/* .block table td { border-top-color:#fff; } */
	table a { color:#D21A15; }


.pagination { grid-column:span 2; text-align:center; }
	.pagination a:hover, .pagination a:hover .icon { color:#D21A15; }
	.pagination .totals { margin-bottom:.2rem; color:rgba(107,114,128,.4); }
		.pagination .totals strong { color:rgba(107,114,128,.8); font-weight:normal; }
	.pagination nav { max-width:900px; margin:0 auto; display:flex; justify-content:space-between; }
		.pagination nav > a { display:flex; align-items:center; }
		.pagination nav .pages { font-size:0; }
			.pagination nav .pages a { width:2.5em; height:2.5em; display:inline-flex; justify-content:center;
				align-items:center;  border-radius:50%; font-size:14px; }
				.pagination nav .pages a:hover { background:rgba(107,114,128,.07); }
				.pagination nav .pages a.selected { outline:1px solid rgba(107,114,128,.4); }


/*
@media (max-width:768px) { .container {     flex-direction:column; }
	.menubar {     width:100%;     text-align:center; }
	.content {     padding:1rem; }
	header.topbar nav ul {     flex-direction:column;     align-items:flex-end; }
	header.topbar nav ul li {     margin:0.5rem 0; }
}
*/


#infoActBB{color:orange}