/* =========================================================
   NANEL PRO - App de pedidos para peluqueros
   Colores tomados del logo nanel_profesional.jpg
   ========================================================= */
:root{
	--taupe:        #B4A38F;   /* circulo del logo */
	--taupe-oscuro: #8C7A66;
	--cafe:         #4E4237;   /* textos */
	--dorado:       #D9B55F;   /* onda del logo */
	--dorado-osc:   #B8923A;
	--crema:        #F6F1EA;   /* fondo */
	--blanco:       #FFFFFF;
	--gris:         #B9B1A7;
	--rojo-nanel:   #D21E24;   /* rojo de Nanel perfumerias (detalles) */
	color-scheme: light;       /* la app siempre en claro, aunque el celular este en modo oscuro */
}
.input, .select select, .textarea{
	background-color: var(--blanco);
	color: var(--cafe);
}
.box{
	background-color: var(--blanco);
	color: var(--cafe);
}

*{
	padding:0;
	margin:0;
}
body{
	background-color: var(--crema);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	margin: 0;
	font-family: 'Quicksand', 'Nunito', sans-serif;
	color: var(--cafe);
}
.title, .subtitle, .label, .button, .input, .select select, .table{
	font-family: 'Quicksand', 'Nunito', sans-serif;
}

/*----- HEADER -----*/
.header-info{
	background-color: var(--taupe) !important;
	box-shadow: 0 2px 10px rgba(78,66,55,.25);
	border-bottom: 3px solid var(--dorado);
}
.header-info p, .header-info .subtitle{
	color: var(--blanco) !important;
	letter-spacing: .3px;
}
.header-info .header-logo{
	height: 34px;
	width: auto;
	vertical-align: middle;
	margin-right: .5rem;
}

/*----- LOGIN / default.avfp -----*/
.loginCard{
	padding: 40px 16px 0 16px;
	flex: 1;
}
.loginForm{
	background-color: var(--blanco);
	border-radius: 24px !important;
	box-shadow: 0 10px 30px rgba(78,66,55,.15) !important;
	border-top: 6px solid var(--taupe);
}
.loginForm p{
	color: var(--cafe);
}
.loginForm input{
	background-color: transparent;
	color: #000;
}
.loginForm img{
	width: 190px;
}
.loginTitle{
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--taupe-oscuro) !important;
	letter-spacing: .5px;
}
.loginButton{
	background-color: var(--taupe) !important;
	color: var(--blanco) !important;
	font-weight: 700;
	border: none;
	border-radius: 35px;
}
.loginButton:hover{
	background-color: var(--taupe-oscuro) !important;
}
.loginForm .input:focus,
.loginForm .input:active {
	border-color: var(--dorado) !important;
	box-shadow: 0 0 0 0.125em rgba(217,181,95,.35) !important;
}
.loginForm .control.has-icons-left .input:focus ~ .icon {
	color: var(--dorado-osc) !important;
}

.loggedCard{
	background-color: var(--blanco) !important;
	border-radius: 24px !important;
}
.loggedCard p{
	color: var(--cafe) !important;
}
.loggedCard p strong{
	color: var(--taupe-oscuro) !important;
}

/*----- MENU PRINCIPAL -----*/
.menupri .container{
	box-shadow: 0 10px 30px rgba(78,66,55,.15);
	border-radius: 24px;
}
.menupri div{
	background-color: var(--blanco) !important;
	border-radius: 24px;
}
.menupri button{
	background-color: var(--taupe) !important;
	color: var(--blanco) !important;
	font-weight: 600;
	border: none;
	border-radius: 35px;
}
.menupri button:hover{
	background-color: var(--taupe-oscuro) !important;
}
.menupri button.principal{
	background-color: var(--dorado) !important;
	color: var(--cafe) !important;
	font-weight: 700;
}
.menupri button.principal:hover{
	background-color: var(--dorado-osc) !important;
	color: var(--blanco) !important;
}

/*----- BOTONES GENERALES -----*/
button.volver {
	background-color: var(--gris) !important;
	color: var(--blanco) !important;
	border: none;
}
button.volver:hover{
	background-color: #a0978c !important;
}
button.agregar {
	background-color: var(--dorado) !important;
	color: var(--cafe) !important;
}
.button.is-success{
	background-color: #5E9E6A;
}
.button.is-link{
	background-color: var(--taupe-oscuro);
}

/*----- LISTADOS -----*/
.clientes button.volver,
.clientes button.agregar{
	border-radius: 35px;
}
.clientes button.limpiar{
	background-color: var(--gris) !important;
	color: var(--blanco);
	border: none;
}
.clientes button.limpiar:hover{
	background-color: #a0978c !important;
}
.clientes input.productFilter,
.clientes .select select{
	border: 1px solid var(--gris);
	background-color: var(--blanco) !important;
	color: var(--cafe);
}
.clientes .select:not(.is-multiple):not(.is-loading)::after{
	border-color: var(--taupe-oscuro);
}
.clientes .box{
	border-radius: 14px !important;
	background-color: transparent;
	box-shadow: none !important;
}
.tabla-clientes{
	border-radius: 14px !important;
}
.clientTable thead tr{
	background-color: var(--taupe) !important;
}
.clientTable thead th{
	border-color: var(--taupe-oscuro) !important;
}
.clientTable tbody tr{
	background-color: var(--blanco) !important;
}
.clientTable.is-striped tbody tr:nth-child(even){
	background-color: #FBF8F4 !important;
}
.clientTable.is-hoverable tbody tr:hover{
	background-color: #EFE6D6 !important;
}
.clientTable tbody tr td{
	color: var(--cafe) !important;
	border-color: #E8E0D5 !important;
}
.clientTable{
	border: 1px solid #E8E0D5;
}
.clientTable a{
	color: var(--cafe);
	font-weight: 600;
}
.clientTable a:hover{
	color: var(--dorado-osc);
}

/* Chips de familia / rubro */
.tag.familia{
	background-color: var(--taupe);
	color: var(--blanco);
}
.tag.rubro{
	background-color: #EFE6D6;
	color: var(--cafe);
}
.precio-app{
	font-weight: 700;
	color: var(--cafe);
	white-space: nowrap;
}
.foto-art{
	max-width: 100%;
	max-height: 110px;
	object-fit: contain;
	cursor: zoom-in;
}

.input-readonly{
	background-color: #f5f2ee;
	border-color: #e2dbd2;
	color: #7a7066;
	box-shadow: none;
	pointer-events: none;
}

/*----- FOOTER -----*/
footer{
	background-color: transparent !important;
	padding: 1rem 0 !important;
}
.footer-card{
	background-color: var(--blanco);
	border-radius: 15px;
	padding: 0.4rem 1rem;
	margin: 0 auto;
	width: fit-content;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}
.footer-logos{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0;
}
.footer-logos img{
	height: 70px !important;
	width: auto;
}
.footer-card a{
	text-decoration: none;
	color: inherit;
}
.footer-card span,
.footer-card p{
	margin: 0;
	font-size: 0.85rem;
	color: #888;
}

/*----- ZOOM DE FOTOS -----*/
#visor{
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.8);
	justify-content: center;
	align-items: center;
	z-index: 9999;
}
#visor img{
	max-width: 90%;
	max-height: 90%;
	border-radius: 8px;
	cursor: zoom-out;
	box-shadow: 0 0 15px #000;
	background: #fff;
}

/*----- DESTACADOS (slider del menu) -----*/
.destacados{
	background-color: var(--crema);
}
.destacados h1{
	color: var(--taupe-oscuro) !important;
	letter-spacing: 1px;
}
.mySwiper{
	padding: 1rem 0.5rem 3rem 0.5rem !important;
}
.mySwiper .swiper-slide{
	height: auto;
	display: flex;
}
.producto{
	width: 100%;
	display: flex;
	flex-direction: column;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 10px rgba(78,66,55,0.10);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border: none;
	background-color: var(--blanco);
}
.producto:hover{
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(78,66,55,0.18);
}
.card-contenido{
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1.2rem;
	text-align: center;
}
.artRub{
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 0.5rem;
	color: var(--taupe-oscuro);
	font-size: .8rem;
}
.artDescripcion{
	font-size: 1rem;
	line-height: 1.3;
	margin-bottom: 1rem;
	font-weight: 700;
	color: var(--cafe);
}
.artPrecio{
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--cafe);
	background: #FBF6EC;
	border: 1px solid var(--dorado);
	padding: 0.5rem;
	border-radius: 8px;
	margin-top: auto;
}
.swiper-button-next,
.swiper-button-prev{
	color: var(--taupe-oscuro) !important;
	background: rgba(255, 255, 255, 0.9);
	width: 40px !important;
	height: 40px !important;
	border-radius: 50%;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.swiper-button-next:after,
.swiper-button-prev:after{
	font-size: 1.2rem !important;
	font-weight: bold;
}
.swiper-pagination-bullet-active{
	background-color: var(--taupe-oscuro) !important;
}

@media (max-width: 768px){
	.clientTable{
		font-size: 0.8rem;
	}
	.clientTable th,
	.clientTable td{
		padding: 0.4rem 0.5rem !important;
	}
	.foto-art{
		max-height: 70px;
	}
}