ProyectoTicketFei/css/zonas.css

83 lines
1.5 KiB
CSS

/* Contenedor principal que divide la pantalla */
.main-container {
display: flex;
height: 80vh; /* Ocupar 80% de la pantalla */
gap: 20px;
padding: 20px;
}
/* Lado izquierdo (imagen + botones) */
.cardIzq {
flex: 2; /* Ocupar 2/3 del ancho */
display: flex;
flex-direction: column;
align-items: center;
}
.cardIzq img {
width: 100%;
max-width: 600px;
height: 400px;
}
.zones-container {
display: flex;
gap: 10px;
margin-top: 15px;
}
/* Lado derecho (tarjeta con info) */
.cardDer {
flex: 1; /* Ocupar 1/3 del ancho */
display: flex;
align-items: center;
justify-content: center;
}
.card {
background: #aab2b2;
border-radius: 12px;
padding: 20px;
width: 100%;
max-width: 300px;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
}
.zone-btn {
padding: 10px;
border-radius: 8px;
color: white;
font-weight: bold;
cursor: pointer;
}
.vip-zone { background-color: #5e17eb; }
.oro-zone { background-color: #d5ce2d; }
.plata-zone { background-color: #737373; }
.general-zone { background-color: #725e2b; color: rgb(255, 255, 255); }
.asiento {
display: inline-block;
width: 40px;
height: 40px;
margin: 5px;
text-align: center;
line-height: 40px;
font-size: 1.2em;
border: 1px solid #000;
cursor: pointer;
background-color: #f8f9fa;
border-radius: 5px;
}
.asiento.seleccionado {
background-color: #28a745;
color: white;
}
.asiento.ocupado {
background-color: #dc3545;
color: white;
cursor: not-allowed;
}