.kass-app-barra {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 56px;
z-index: 9990;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px 0 6px;
background: #ffffff;
border-bottom: 2px solid #990099;
box-sizing: border-box;
}
.kass-app-barra-izq {
display: flex;
align-items: center;
gap: 2px;
}
.kass-app-barra-der {
display: flex;
align-items: center;
gap: 10px;
}
.kass-app-boton-menu {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.kass-app-boton-menu span {
display: block;
width: 22px;
height: 2px;
background: #333333;
border-radius: 2px;
}
.kass-app-logo {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.kass-app-logo img {
width: 40px;
height: 40px;
border-radius: 50%;
background: #ffffff;
object-fit: cover;
}
.kass-app-boton-redondo {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 50%;
background: #990099;
color: #ffffff;
cursor: pointer;
}
.kass-app-boton-redondo svg {
width: 20px;
height: 20px;
}
.kass-app-velo {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9995;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.kass-app-velo.kass-app-abierto {
opacity: 1;
visibility: visible;
transition: opacity 0.25s ease;
}
.kass-app-cajon {
position: fixed;
top: 0;
left: 0;
z-index: 9996;
width: min(300px, 85vw);
height: 100vh;
height: 100dvh;
background: #ffffff;
box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
transform: translateX(-105%);
visibility: hidden;
transition: transform 0.25s ease, visibility 0s linear 0.25s;
overflow-y: auto;
box-sizing: border-box;
}
.kass-app-cajon.kass-app-abierto {
transform: translateX(0);
visibility: visible;
transition: transform 0.25s ease;
}
.kass-app-cajon-cabecera {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
border-bottom: 2px solid #990099;
}
.kass-app-cajon-logo {
width: 48px;
height: 48px;
border-radius: 50%;
background: #ffffff;
object-fit: cover;
flex-shrink: 0;
}
.kass-app-cajon-titulos {
min-width: 0;
}
.kass-app-cajon-nombre {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
color: #333333;
}
.kass-app-cajon-sub {
margin: 2px 0 0 0;
font-size: 13px;
line-height: 1.3;
color: #666666;
}
.kass-app-cerrar {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin-left: auto;
padding: 0;
border: 0;
background: transparent;
color: #333333;
cursor: pointer;
flex-shrink: 0;
}
.kass-app-cerrar svg {
width: 22px;
height: 22px;
}
.kass-app-cajon-lista {
padding: 8px 0 16px 0;
}
.kass-app-cajon-enlace {
display: flex;
align-items: center;
gap: 12px;
height: 52px;
padding: 0 16px;
color: #333333;
font-size: 15px;
font-weight: 600;
text-decoration: none;
box-sizing: border-box;
}
.kass-app-cajon-enlace:visited {
color: #333333;
}
.kass-app-cajon-enlace:hover,
.kass-app-cajon-enlace:focus {
color: #990099;
}
.kass-app-cajon-icono {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #990099;
}
.kass-app-cajon-icono svg {
width: 22px;
height: 22px;
}
.kass-app-cajon-enlace.kass-app-cajon-activo {
color: #990099;
background: #faf0fa;
box-shadow: inset 3px 0 0 #990099;
}
.kass-app-toast {
position: fixed;
left: 50%;
bottom: 24px;
z-index: 9999;
transform: translateX(-50%);
padding: 10px 18px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.85);
color: #ffffff;
font-size: 14px;
line-height: 1.4;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.kass-app-toast-visible {
opacity: 1;
} body.kass-app-con-barra {
padding-top: 56px;
}
.kass-linea-pie {
text-align: center;
font-size: 13px;
line-height: 1.5;
color: #666666;
padding: 20px 16px 30px;
margin: 0;
}