/* Paleta de marca Tekno: azul #2E318B, rojo #E61D24, amarillo #FEC308,
   tipografia Poppins (igual que pinturastekno.com.ar). */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

.tekno-pb2b {
	/* !important: en paginas armadas con el editor de bloques de Astra, una
	regla del tema (".entry-content[data-ast-blocks-layout] > *") tiene mas
	especificidad que esta clase y pisaba el ancho maximo, haciendo que el
	formulario se vea "estirado" a todo el ancho de la pagina en vez de
	compacto (pasaba en "Ingresar" pero no en "Mi cuenta", que no usa esa
	misma estructura de bloques). */
	max-width: 800px !important;
	margin: 0 auto !important;
	font-family: 'Poppins', sans-serif;
	color: #2b2b2b;
}

.tekno-pb2b h3 {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	color: #2E318B;
}

/* Filtro por rubro, arriba del buscador. El de subrubro solo aparece
   cuando el rubro elegido tiene mas de un tipo adentro. */
.tekno-pb2b-filtros {
	display: flex;
	gap: 14px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.tekno-pb2b-campo {
	flex: 1 1 240px;
	min-width: 0;
}

.tekno-pb2b-campo label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.tekno-pb2b-campo select {
	width: 100%;
	padding: 10px 12px;
	font-size: 16px;
	font-family: inherit;
	color: inherit;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-sizing: border-box;
}

.tekno-pb2b-campo select:focus {
	outline: none;
	border-color: #2E318B;
	box-shadow: 0 0 0 3px rgba(46, 49, 139, 0.15);
}

.tekno-pb2b-catalogo {
	margin: 0 0 16px;
	font-size: 14px;
}

.tekno-pb2b-catalogo a {
	color: #2E318B;
	text-decoration: none;
	border-bottom: 1px solid rgba(46, 49, 139, 0.35);
	padding-bottom: 1px;
}

.tekno-pb2b-catalogo a:hover,
.tekno-pb2b-catalogo a:focus {
	border-bottom-color: #2E318B;
}

.tekno-pb2b-ayuda {
	font-size: 12.5px;
	color: #6b6b73;
	margin: 6px 0 0;
}

.tekno-pb2b-buscador {
	position: relative;
	margin-bottom: 20px;
}

.tekno-pb2b-buscador label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.tekno-pb2b-buscador input[type="text"] {
	width: 100%;
	padding: 10px 12px;
	font-size: 16px;
	font-family: inherit;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tekno-pb2b-buscador input[type="text"]:focus {
	outline: none;
	border-color: #2E318B;
	box-shadow: 0 0 0 3px rgba(46, 49, 139, 0.15);
}

.tekno-pb2b-resultados {
	position: absolute;
	z-index: 20;
	background: #fff;
	border: 1px solid #ccc;
	border-top: none;
	width: 100%;
	max-height: 320px;
	overflow-y: auto;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
	border-radius: 0 0 6px 6px;
}

.tekno-pb2b-resultados .item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 12px;
	cursor: pointer;
	border-bottom: 1px solid #f0f0f0;
}

.tekno-pb2b-resultados .item .info {
	flex: 1 1 auto;
	min-width: 0;
}

/* Es lo que le permite al cliente distinguir dos productos parecidos
   (el sintetico del de fosfato de zinc, por ejemplo) sin salir del buscador. */
.tekno-pb2b-resultados .item .desc {
	font-size: 12.5px;
	color: #6b6b73;
	margin-top: 3px;
	line-height: 1.4;
}

.tekno-pb2b-resultados .item .precio {
	flex: 0 0 auto;
	font-weight: 700;
	font-size: 14px;
	color: #2E318B;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.tekno-pb2b-resultados .aviso-mas {
	padding: 10px 12px;
	background: #FFF6D9;
	color: #6b5a1e;
	font-size: 12.5px;
	line-height: 1.45;
	position: sticky;
	bottom: 0;
}

.tekno-pb2b-resultados .sin-resultados {
	padding: 14px 12px;
	color: #888;
	font-style: italic;
	font-size: 14px;
}

.tekno-pb2b-resultados .item:hover {
	background: #FFF6D9;
}

.tekno-pb2b-resultados .item .sku {
	color: #2E318B;
	font-weight: 600;
	font-size: 12px;
	margin-right: 6px;
}

.tekno-pb2b-carrito {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 24px;
}

.tekno-pb2b-carrito th {
	background: #2E318B;
	color: #fff;
	border-bottom: none;
	padding: 10px 8px;
	text-align: left;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.tekno-pb2b-carrito th:first-child {
	border-top-left-radius: 6px;
}

.tekno-pb2b-carrito th:last-child {
	border-top-right-radius: 6px;
}

.tekno-pb2b-carrito td {
	border-bottom: 1px solid #e2e2e2;
	padding: 8px 8px;
	text-align: left;
	font-size: 14px;
}

.tekno-pb2b-carrito input[type="number"] {
	width: 80px;
	padding: 4px 6px;
	font-family: inherit;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.tekno-pb2b-carrito input[type="number"]:focus {
	outline: none;
	border-color: #2E318B;
	box-shadow: 0 0 0 3px rgba(46, 49, 139, 0.15);
}

.tekno-pb2b-carrito .quitar {
	color: #E61D24;
	cursor: pointer;
	background: none;
	border: none;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
}

.tekno-pb2b-vacio td {
	color: #888;
	font-style: italic;
}

.tekno-pb2b-total-fila td {
	border-top: 2px solid #2E318B;
	border-bottom: 1px solid #e2e2e2;
	padding-top: 12px;
	padding-bottom: 12px;
	font-weight: 700;
	font-size: 15px;
	color: #2E318B;
}

.tekno-pb2b-datos {
	margin-bottom: 20px;
}

.tekno-pb2b-datos label {
	display: block;
	margin-bottom: 12px;
	font-weight: 600;
}

.tekno-pb2b-datos input,
.tekno-pb2b-datos textarea {
	width: 100%;
	margin-top: 4px;
	padding: 10px 12px;
	font-size: 15px;
	font-family: inherit;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-sizing: border-box;
	font-weight: normal;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tekno-pb2b-datos input:focus,
.tekno-pb2b-datos textarea:focus {
	outline: none;
	border-color: #2E318B;
	box-shadow: 0 0 0 3px rgba(46, 49, 139, 0.15);
}

/* !important en color/fondo: algunos temas de WordPress definen un color
   de enlace global que le gana por especificidad a un simple .clase en
   los <a>, y este botón se usa tanto en <button> como en <a>. Sin esto,
   el tema puede pisar el color de texto o el link se ve subrayado.

   El :visited se agrega aparte porque algunos temas tambien definen un
   color de "enlace visitado" propio, que tiene mas especificidad que un
   simple a.clase y no queda cubierto por la regla de arriba. Pasa sobre
   todo con "Repetir pedido" (un link a la pagina del pedido, que despues
   de usarlo una vez el navegador ya marca como visitado): sin esta regla
   el texto del boton se vuelve casi del mismo color que el fondo y se
   deja de leer, aunque "Descargar Excel" (que apunta a un archivo
   distinto en cada pedido y casi nunca queda "visitado") se vea bien. */
a.tekno-pb2b-boton,
a.tekno-pb2b-boton:visited,
.tekno-pb2b-boton {
	display: inline-block;
	background: #2E318B !important;
	color: #fff !important;
	border: none;
	padding: 12px 26px;
	font-size: 16px;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	border-radius: 30px;
	cursor: pointer;
	text-decoration: none !important;
	text-align: center;
	transition: background-color 0.15s ease;
}

a.tekno-pb2b-boton:hover,
a.tekno-pb2b-boton:visited:hover,
.tekno-pb2b-boton:hover,
a.tekno-pb2b-boton:focus,
a.tekno-pb2b-boton:visited:focus,
.tekno-pb2b-boton:focus {
	background: #23265f !important;
	color: #fff !important;
}

a.tekno-pb2b-boton-secundario,
a.tekno-pb2b-boton-secundario:visited,
.tekno-pb2b-boton-secundario {
	background: #fff !important;
	color: #2E318B !important;
	border: 1px solid #2E318B;
	margin-right: 10px;
}

a.tekno-pb2b-boton-secundario:hover,
a.tekno-pb2b-boton-secundario:visited:hover,
.tekno-pb2b-boton-secundario:hover {
	background: #EEEEF8 !important;
	color: #2E318B !important;
}

.tekno-pb2b-boton:disabled {
	opacity: 0.6;
	cursor: default;
}

.tekno-pb2b-mensaje {
	margin: 14px 0;
	padding: 10px 14px;
	border-radius: 6px;
	font-weight: 500;
}

.tekno-pb2b-mensaje.ok {
	background: #e6f4ea;
	color: #1e6b3e;
}

.tekno-pb2b-mensaje.error {
	background: #FCE8E8;
	color: #E61D24;
}

.tekno-pb2b-sesion {
	font-size: 13px;
	color: #555;
	margin-top: -6px;
}

.tekno-pb2b-login-aviso {
	text-align: center;
	padding: 20px;
}

.tekno-pb2b-login {
	max-width: 380px !important;
	margin: 0 auto !important;
}

.tekno-pb2b-login h3 {
	margin-top: 0;
}

.tekno-pb2b-login label {
	display: block;
	margin-bottom: 14px;
	font-weight: 600;
}

.tekno-pb2b-login input {
	width: 100%;
	margin-top: 4px;
	padding: 10px 12px;
	font-size: 15px;
	font-family: inherit;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-sizing: border-box;
	font-weight: normal;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tekno-pb2b-login input:focus {
	outline: none;
	border-color: #2E318B;
	box-shadow: 0 0 0 3px rgba(46, 49, 139, 0.15);
}

.tekno-pb2b-login input[type="checkbox"] {
	width: auto;
	margin: 0 6px 0 0;
	padding: 0;
	vertical-align: middle;
}

.tekno-pb2b-login-opciones {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
	font-weight: normal;
	font-size: 14px;
}

.tekno-pb2b-login-recordar {
	display: flex !important;
	align-items: center;
	font-weight: normal !important;
	margin-bottom: 0 !important;
}

.tekno-pb2b-login-olvido,
.tekno-pb2b-login-olvido:visited {
	color: #2E318B;
	text-decoration: none;
}

.tekno-pb2b-login-olvido:hover {
	text-decoration: underline;
}

.tekno-pb2b-mis-pedidos {
	max-width: 100%;
}

.tekno-pb2b-pedido-item {
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 14px;
}

.tekno-pb2b-pedido-item summary {
	cursor: pointer;
	font-weight: 600;
	color: #2E318B;
	list-style: revert;
}

.tekno-pb2b-pedido-item table {
	margin-top: 14px;
	margin-bottom: 0;
}

.tekno-pb2b-pedido-acciones {
	margin: 14px 0 0;
}

/* En pantallas chicas (celular) la tabla de productos del pedido tiene
   demasiadas columnas para el ancho disponible y obliga a desplazarse para
   el costado para verla completa. En vez de eso, por debajo de este ancho
   cada fila se convierte en una "tarjeta" apilada, con cada dato en su
   propia linea y una etiqueta que indica que es (el mismo dato de siempre,
   solo que acomodado distinto). Aplica tanto al formulario de "Hacer
   pedido" como al historial de "Mis pedidos", porque ambos usan esta misma
   tabla. */
@media (max-width: 640px) {
	.tekno-pb2b-carrito thead {
		display: none;
	}

	/* Las celdas de aca abajo dejan de ser celdas de tabla y pasan a ser
	   bloques, asi que ya no corresponde el modelo de bordes "unidos" de
	   la tabla de escritorio. */
	.tekno-pb2b-carrito {
		border-collapse: separate;
		border-spacing: 0;
	}

	.tekno-pb2b-carrito,
	.tekno-pb2b-carrito tbody,
	.tekno-pb2b-carrito tfoot,
	.tekno-pb2b-carrito tr,
	.tekno-pb2b-carrito td {
		display: block;
		width: 100%;
		box-sizing: border-box;
		/* El tema Astra le pone bordes propios a la tabla y a cada celda
		   (entre ellos un borde DERECHO en cada <td>). En la vista de
		   escritorio esos bordes quedan disimulados entre las columnas,
		   pero aca cada celda pasa a ocupar todo el ancho, asi que ese
		   borde derecho se dibujaba como una linea vertical suelta en el
		   medio de las tarjetas. Se limpian todos y despues se vuelven a
		   poner solo los que queremos. */
		border: 0;
	}

	.tekno-pb2b-carrito tr {
		margin-bottom: 12px;
		border: 1px solid #e2e2e2;
		border-radius: 8px;
		padding: 4px 12px;
	}

	.tekno-pb2b-carrito td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		border-bottom: 1px solid #f0f0f0;
		padding: 8px 0;
		text-align: right;
	}

	.tekno-pb2b-carrito td:last-child {
		border-bottom: none;
	}

	.tekno-pb2b-carrito td[data-label]::before {
		content: attr(data-label);
		font-weight: 600;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		color: #888;
		text-align: left;
	}

	.tekno-pb2b-carrito input[type="number"] {
		width: 90px;
	}

	.tekno-pb2b-vacio {
		border: none !important;
	}

	.tekno-pb2b-total-fila {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		border: 1px solid #2E318B !important;
	}

	.tekno-pb2b-total-fila td {
		display: block;
		width: auto;
		border: 0;
		padding: 8px 0;
	}

	.tekno-pb2b-total-filler {
		display: none !important;
	}
}