/* Contenedor de la habitación: debe ser relativo para el posicionamiento absoluto */
.gdr-habitacion-container {
    position: relative;
    display: inline-block; /* o block, según tu diseño */
}

/* Badge flotante centrado */
.gdr-estado-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 10px;
    pointer-events: none; /* para que no interfiera con clicks */
    z-index: 10;
    white-space: nowrap;
}

.gdr-estado-badge .estado-item {
    display: flex;
    align-items: center;
    gap: 4px;
	padding: 10px 20px;
	font-weight: 700;
	color: #ffffff;
    text-shadow: 0 0 2px black;
	font-size: 30px;
	border-radius: 2px;
	
}

.gdr-estado-badge .color-indicador {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
}

/* Colores */
.gdr-disponible.estado-item { display:none }
.gdr-proceso.estado-item { background-color: #ffa800f0; }
.gdr-ocupada.estado-item { background-color: #ff1800f0; }

/* Etiqueta pequeña */
.gdr-estado-badge .label {
    margin-right: 2px;
    font-size: 11px;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Botón de reserva cuando la habitación está ocupada */
.gdr-ocupada-btn * {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #e0d9cb !important;   
    border-color: #aaa !important;
    pointer-events: none;  
}